Essayez de créer une application WEB pour l'annuaire téléphonique avec flask Partie 1 (Connectez-vous avec SQLITE, affichez avec Flask) Essayez de créer une application WEB pour l'annuaire téléphonique avec flask Partie 2 (Comment gérer POST et GET dans Flask) Essayez de créer une application WEB pour l'annuaire téléphonique avec flask Partie 3 (Ajouter un formulaire d'inscription) Essayez de créer une application WEB pour l'annuaire téléphonique avec la partie 4 du flacon (Ajouter un formulaire de recherche)

Jusqu'à la dernière fois

--Partie d'affichage

Comment recevoir la méthode POST

Maintenant que j'ai appris chacun, il est temps de m'inscrire. Pour vous inscrire, appuyez simplement sur la méthode POST reçue et enregistrez-la dans Sqlite, donc collez uniquement la source. app.py Schéma de sampledb.db index.html form.html Collez chacune des sources.

Nous utilisons également Bootstrap pour rendre l'affichage cool. form.html prend en charge l'affichage / non-affichage avec un bouton afin qu'il puisse être combiné avec index.html plus tard.

Schéma SQlite

`sampledb.db`



CREATE TABLE `contacts` (
	`id`	INTEGER PRIMARY KEY AUTOINCREMENT,
	`name`	TEXT UNIQUE,
	`phone_num`	TEXT UNIQUE,
	`Commentary`	TEXT,
	`yomigana`	TEXT
);

app.py

`app.py`


# -*- coding:utf-8 -*_

from flask import Flask,request,render_template,redirect,url_for
import sqlite3
from flask_httpauth import HTTPBasicAuth

app = Flask(__name__)
auth = HTTPBasicAuth()

users = {"john":"hello","susan":"bye"}

@auth.get_password
def get_pw(username):
    if username in users:
        return users.get(username)
    return None

@app.route("/")
@auth.login_required

def basicview():
    conn = sqlite3.connect("sampledb.db")
    cursor = conn.cursor()

    cursor.execute("select name,phone_num,Commentary from contacts order by yomigana")
    result = cursor.fetchall()

    cursor.close()
    conn.close()

    return render_template("index.html",contacts = result)

@app.route("/register")
def hello():
    return render_template("form.html")

@app.route("/add_entry" ,methods = ["POST"])

def add_ent():
    conn = sqlite3.connect("sampledb.db")
    cursor = conn.cursor()
    cursor.execute("insert into contacts (name,yomigana,phone_num,Commentary) values (?,?,?,?)",
                    (request.form["Name"],request.form["Kana"],request.form["Num"],request.form["Comm"]))

    conn.commit()
    cursor.close()
    conn.close()

    try:
        print(request.form["Name"])
    finally:

        return redirect(url_for("basicview"))

if __name__ == '__main__':
    app.run(debug = True)

Partie de mise en page

`index.html`


<!DOCTYPE html>

<html lang="en">
  <head>
      <meta charset = "utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Annuaire</h3>
        <div class = "table-responsive">
        <table class = "table table-bordered table-hover">
          <tr>
            <th>Name</th>
            <th>Number</th>
            <th>Comment</th>
          </tr>
          {% for num in contacts %}
          <tr>
            {% for name in num %}
              <td>{{name}}</td>
            {% endfor %}
          </tr>
          {% endfor %}
        </table>
      </div>
      </div>
    </div>
  </body>
</html>

`form.html`


<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset = "utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
  <body>
    <button type = "button" class = "btn btn-default" data-toggle ="collapse" data-target="#collapseSamp">
enregistrement
    </button>

    <div class = "collapse" id = "collapseSamp"
      <div class ="well">
        <form action = "{{url_for("add_ent")}}" method = "POST" class="form-inline">
          <input name = "Name" placeholder="Nom">
          <input name = "Kana" placeholder="Kana">
          <input name = "Num" placeholder="numéro de téléphone">
          <input name = "Comm" placeholder="commentaire">
          <input type ="submit" value = "Envoyer">
        </form>
      </div>
    </div>
  </body>
</html>

Ce que je pensais

Est-ce que je peux utiliser Google Bootstrap à chaque fois?

Je ne connais pas le décorateur. Serez-vous capable de vous en souvenir pendant que vous le faites?

La prochaine fois, j'aimerais combiner form.html et index.html afin de pouvoir effectuer une recherche.

Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 3