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)

Maintenant que nous avons une fenêtre d'inscription, nous allons la combiner et créer un formulaire de recherche.

Comment chercher

SELECT (colonne) FROM (nom de la table)　WHERE (検索するcolonne)  =(égal) or LIKE "(Chaîne)"

Utilisez simplement la recherche de chaînes SQLITE telle quelle. Pour une raison quelconque, je ne pouvais pas faire de FTS (recherche en texte intégral) dans mon environnement, donc je ne peux pas rechercher uniquement par nom.

Avec cela, j'ai pu implémenter toutes les fonctions nécessaires.

Mais ...

app.py

`app.py`


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

from flask import Flask,request,render_template,redirect,url_for,flash
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()

    return redirect(url_for("basicview"))

@app.route("/search")
def search_ent():
    return render_template("search.html")

@app.route("/search_result",methods = ["POST"])
def search_entry():
    conn = sqlite3.connect("sampledb.db")
    cursor = conn.cursor()
    search_name  = "%"+request.form["Name"]+"%"
    cursor.execute("select name,yomigana,phone_num,Commentary from contacts where name like ?",(search_name,))
    result = cursor.fetchall()


    cursor.execute("select name,yomigana,phone_num,Commentary from contacts where Commentary like ?",(search_name,))
    result1 = cursor.fetchall()
    result = result.extend(result1)
    
    if result ==[]:
        print("N'est pas applicable")
        return redirect(url_for("basicview"))

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


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

Pièce d'affichage

`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>
        <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>
        <ul class = flashes>
          
        </ul>
        <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>

`search.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">
Chercher
    </button>

    <div class = "collapse" id = "collapseSamp">
      <div class ="well">
        <form action = "{{url_for("search_entry")}}" method = "POST" class="form-inline">
          <input name = "Name" placeholder="Nom">
          <input type ="submit" value = "Envoyer">
        </form>
      </div>
    </div>
  </body>
</html>

Qu'est-ce que c'est ...

Cela ne devient même pas une application WEB ...

J'ai décidé de le refaire de la prochaine fois.

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