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

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

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?

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

Recommended Posts

Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 1
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! (1)
Créez un framework Web avec Python! (2)
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 3] ~ Implémentation de la faiblesse nerveuse ~
Création d'une application d'analyse de données à l'aide de Streamlit
Transformez votre téléphone intelligent Android en serveur Web à l'aide de python.
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 1
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
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 ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 5] ~ Authentification des utilisateurs ~
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 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
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
Flask + PyPy J'ai pris un benchmark de vitesse avec Blueprint pour le Web à grande échelle
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
Acquisition de données à partir de l'API d'analyse avec l'application Web Client API Google pour python Partie 2
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
Faire un bot d'analyse morphologique de manière lâche avec LINE + Flask
Comment faire un jeu de tir avec toio (partie 1)
Analyser et visualiser JSON (application Web ⑤ avec Python + Flask)
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)