Try to make a WEB application for phone book with flask Part 1 (Connection with SQLITE, displayed in Flask) Try to make a WEB application for phone book with flask Part 2 (How to handle POST and GET in Flask) Try to make a WEB application for phone book with flask Part 3 (Add registration form) Try to make a web application for phone book with flask Part 4 (Add search form)

Until last time

--Display part --How to receive the POST method

Now that I have learned each, it is time to register. To register, just tuple the received POST method and register it in Sqlite, so paste only the source. app.py Schema of sampledb.db index.html form.html Paste each of the sources.

I also use Bootstrap to make the display look cool. form.html supports display / non-display with buttons so that it can be combined with index.html later.

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)

Layout part

`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">Phone book</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">
Registration
    </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="phone number">
          <input name = "Comm" placeholder="comment">
          <input type ="submit" value = "Send">
        </form>
      </div>
    </div>
  </body>
</html>

What I thought

――Is Bootstrap OK to google each time? It's too much to remember and it's dangerous ――I don't know the decorator. Will you be able to remember it while you are doing it?

Next time, I would like to combine form.html and index.html so that I can search.

Let's make a WEB application for phone book with flask Part 3