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

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 ...

2017-05-14_17h25_41.png

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

Recommended Posts

Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 2
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 3
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 4
Créons une application Web de conversion A vers B avec Flask! De zéro ...
Créez un framework Web avec Python! (2)
[GCP] Procédure de création d'une application Web avec Cloud Functions (Python + Flask)
Développement d'applications Web avec Flask
[Jouons avec Python] Créer un livre de comptes de ménage
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 6] ~ Authentification utilisateur 2 ~
Application Web avec Python + Flask ② ③
Application Web avec Python + Flask ④
J'ai créé une application de livre simple avec python + Flask ~ Introduction ~
Créer une application Web avec Flask ②
Faisons une interface graphique avec python.
Faisons une rupture de bloc avec wxPython
Créer une application Web avec Django
Créer une application Web avec Flask ①
Faisons un graphe avec python! !!
Faisons un spacon avec xCAT
Créer une application Web avec Flask ③
Créer une application Web avec Flask ④
Créer une application Web de type Flask / Bottle sur AWS Lambda avec Chalice
Faisons une discussion WEB en utilisant WebSocket avec AWS sans serveur (Python)!
Faisons un jeu de shiritori avec Python
Créez un simulateur de gacha rare avec Flask
Faisons la voix lentement avec Python
Faisons un langage simple avec PLY 1
[Python] Une application web rapide avec Bottle!
Créez une application Web simple avec Flask
Exécutez une application Web Python avec Docker
Créer un service Web avec Docker + Flask
Faisons une IA à trois yeux avec Pylearn 2
Faisons un bot Twitter avec Python!
Faisons un plug-in backend pour Errbot
J'ai fait une application WEB avec Django
[Streamlit] Je déteste JavaScript, donc je crée une application Web uniquement avec Python
Je souhaite créer une application Web en utilisant React et Python flask
Créez un simple générateur d'images par points avec Flask
Lancer un serveur Web avec Python et Flask
Remplaçons UWSC par Python (5) Faisons un robot
Faisons un module pour Python en utilisant SWIG
Cours de production d'applications Web appris avec Flask of Python Partie 2 Chapitre 1 ~ Échange JSON ~
Créons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 2] ~ Configuration de Vue ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 1] ~ Django setup ~
Créons une application capable de rechercher des images similaires avec Python et Flask Part1
Créons une application capable de rechercher des images similaires avec Python et Flask Part2
Essayez de créer un jeu simple avec Python 3 et iPhone
Analyser et visualiser JSON (application Web ⑤ avec Python + Flask)
[Partie 2] Construisons un serveur Web avec EC2 Linux
Lancer une application Web Python sur Nginx + Gunicorn avec Docker
Application Web réalisée avec Python3.4 + Django (Construction de l'environnement Part.1)
Facilitons un peu la gestion des dépendances avec pip
Création d'une application Web qui mappe les informations sur les événements informatiques avec Vue et Flask
[Pour jouer] Essayez de faire de Yuma un robot LINE (Python)
Créons une application Mac avec Tkinter et py2app
Hobby Web Engineer développe une application Web avec Vue.js + Flask (& GCP)
[Super facile] Faisons un LINE BOT avec Python.