[PYTHON] Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 3 erstellen

Versuchen Sie, eine WEB-Anwendung für ein Telefonbuch mit Flasche Teil 1 zu erstellen (Mit SQLITE verbinden, mit Flask anzeigen) Versuchen Sie, eine WEB-Anwendung für ein Telefonbuch mit Flasche Teil 2 zu erstellen (Wie man mit POST und GET in Flask umgeht) Versuchen Sie, eine WEB-Anwendung für ein Telefonbuch mit Flasche Teil 3 zu erstellen (Anmeldeformular hinzufügen) Versuchen Sie, eine WEB-Anwendung für ein Telefonbuch mit Flasche Teil 4 zu erstellen (Suchformular hinzufügen)

Bis zum letzten Mal

Jetzt, da ich jeden gelernt habe, ist es Zeit, sich zu registrieren. Um sich zu registrieren, tippen Sie einfach auf die empfangene POST-Methode und registrieren Sie sie in Sqlite. Fügen Sie also nur die Quelle ein. app.py Schema von sampledb.db index.html form.html Fügen Sie jede der Quellen ein.

Wir verwenden auch Bootstrap, um die Anzeige cool aussehen zu lassen. form.html unterstützt die Anzeige / Nichtanzeige mit einer Schaltfläche, damit sie später mit index.html kombiniert werden kann.

SQlite-Schema

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)

Layoutteil

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">Telefonbuch</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">
Anmeldung
    </button>

    <div class = "collapse" id = "collapseSamp"
      <div class ="well">
        <form action = "{{url_for("add_ent")}}" method = "POST" class="form-inline">
          <input name = "Name" placeholder="Name">
          <input name = "Kana" placeholder="Kana">
          <input name = "Num" placeholder="Telefonnummer">
          <input name = "Comm" placeholder="Kommentar">
          <input type ="submit" value = "Senden">
        </form>
      </div>
    </div>
  </body>
</html>

Was ich dachte

――Ist es in Ordnung, jedes Mal Google Bootstrap zu googeln? Es ist zu viel, um sich daran zu erinnern, und es ist gefährlich

Das nächste Mal möchte ich form.html und index.html kombinieren, damit ich suchen kann.

Recommended Posts

Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 1 erstellen
Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 2 erstellen
Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 3 erstellen
Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 4 erstellen
Lassen Sie uns mit Flask eine Webanwendung zur Konvertierung von A nach B erstellen! Von Grund auf neu ...
Erstellen Sie ein Webframework mit Python! (1)
Erstellen Sie ein Webframework mit Python! (2)
Machen wir eine nervenschwächende App mit Vue.js und Django-Rest-Framework [Teil 3] ~ Implementierung von Nervenschwäche ~
Erstellen einer Datenanalyseanwendung mit Streamlit
Verwandeln Sie Ihr Android-Smartphone mithilfe von Python in einen Webserver.
Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 1 erstellen
Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 2 erstellen
Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 3 erstellen
Lassen Sie uns eine WEB-Anwendung für das Telefonbuch mit Flasche Teil 4 erstellen
Entwicklung von Webanwendungen mit Flask
[Lass uns mit Python spielen] Ein Haushaltsbuch erstellen
Machen wir eine nervenschwächende Anwendung mit Vue.js und Django-Rest-Framework [Teil 6] ~ Benutzerauthentifizierung 2 ~
Lassen Sie uns mit Vue.js und Django-Rest-Framework [Teil 5] ~ Benutzerauthentifizierung ~ eine nervenschwächende Anwendung erstellen
Webanwendung mit Python + Flask ② ③
Webanwendung mit Python + Flask ④
Ich habe eine einfache Buch-App mit Python + Flask ~ Introduction ~ erstellt
Erstellen einer Webanwendung mit Flask ②
Machen wir einen Blockbruch mit wxPython
Erstellen Sie eine Webanwendung mit Django
Erstellen einer Webanwendung mit Flask ①
Lassen Sie uns ein Diagramm mit Python erstellen! !!
Machen wir mit xCAT einen Spacon
Erstellen einer Webanwendung mit Flask ③
Erstellen einer Webanwendung mit Flask ④
Erstellen Sie mit Chalice eine flaschen- / flaschenähnliche Webanwendung auf AWS Lambda
Lassen Sie uns einen Web-Chat mit WebSocket mit AWS serverless (Python) durchführen!
Lassen Sie uns mit Python ein Shiritori-Spiel machen
Lassen Sie uns mit Python langsam sprechen
Lassen Sie uns mit PLY 1 eine einfache Sprache erstellen
[Python] Eine schnelle Webanwendung mit Bottle!
Erstellen Sie eine einfache Web-App mit Flasche
Führen Sie eine Python-Webanwendung mit Docker aus
Erstellen Sie einen Webdienst mit Docker + Flask
Machen wir mit Pylearn 2 eine dreiäugige KI
Machen wir einen Twitter-Bot mit Python!
Lassen Sie uns ein Backend-Plug-In für Errbot erstellen
Ich habe eine WEB-Bewerbung bei Django gemacht
[Streamlit] Ich hasse JavaScript, deshalb erstelle ich eine Webanwendung nur mit Python
Flask + PyPy Mit Blueprint habe ich einen Geschwindigkeits-Benchmark für das große Web erstellt
Ich möchte eine Webanwendung mit React und Python Flask erstellen
Erstellen Sie mit Flask einen einfachen Punktbildgenerator
Starten Sie einen Webserver mit Python und Flask
Ersetzen wir UWSC durch Python (5) Machen wir einen Roboter
Lassen Sie uns mit SWIG ein Modul für Python erstellen
Datenerfassung von der Analytics-API mit dem Google API-Client für die Python Part 2-Webanwendung
Kurs zur Erstellung von Webanwendungen, der mit Flask of Python Teil 2 Kapitel 1 ~ JSON-Austausch ~ gelernt wurde
Lassen Sie uns mit Vue.js und Django-Rest-Framework [Teil 2] ~ Vue setup ~ eine nervenschwächende App erstellen
Lassen Sie uns mit Vue.js und Django-Rest-Framework [Teil 1] ~ Django-Setup ~ eine nervenschwächende App erstellen
Lassen Sie uns eine App erstellen, die ähnliche Bilder mit Python und Flask Part1 durchsuchen kann
Machen Sie mit LINE + Flask einen morphologischen Analyse-Bot
Wie man ein Schießspiel mit toio macht (Teil 1)
Analysieren und visualisieren Sie JSON (Webanwendung ⑤ mit Python + Flask)
Starten Sie mit Docker eine Python-Webanwendung auf Nginx + Gunicorn
Webanwendung erstellt mit Python3.4 + Django (Teil.1 Umgebungskonstruktion)
Lassen Sie uns das Abhängigkeitsmanagement mit pip etwas einfacher machen
Erstellt eine Web-App, die IT-Ereignisinformationen mit Vue und Flask abbildet
[Zum Spielen] Versuche Yuma zu einem LINE Bot zu machen (Python)