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

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.

Recommended Posts

Let's make a WEB application for phone book with flask Part 1
Let's make a WEB application for phone book with flask Part 2
Let's make a WEB application for phone book with flask Part 3
Let's make a WEB application for phone book with flask Part 4
Let's make an A to B conversion web application with Flask! From scratch ...
Let's make a web framework with Python! (1)
Let's make a web framework with Python! (2)
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 3] ~ Implementation of nervous breakdown ~
Creating a data analysis application using Streamlit
Turn your Android Smart Phone into a Web Server using python.
Let's make a WEB application for phone book with flask Part 1
Let's make a WEB application for phone book with flask Part 2
Let's make a WEB application for phone book with flask Part 3
Let's make a WEB application for phone book with flask Part 4
Web application development with Flask
[Let's play with Python] Make a household account book
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 6] ~ User Authentication 2 ~
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 5] ~ User authentication ~
Web application with Python + Flask ② ③
Web application with Python + Flask ④
I made a simple book application with python + Flask ~ Introduction ~
Creating a web application using Flask ②
Let's make a breakout with wxPython
Build a web application with Django
Creating a web application using Flask ①
Make Flask a Cloud Native application
Let's make a graph with python! !!
Let's make a supercomputer with xCAT
Creating a web application using Flask ③
Creating a web application using Flask ④
If you know Python, you can make a web application with Django
Build a Flask / Bottle-like web application on AWS Lambda with Chalice
Let's make a web chat using WebSocket with AWS serverless (Python)!
Let's make a shiritori game with Python
Let's make a voice slowly with Python
Let's make a simple language with PLY 1
[Python] A quick web application with Bottle!
Create a simple web app with flask
Run a Python web application with Docker
Create a web service with Docker + Flask
Let's make a tic-tac-toe AI with Pylearn 2
Let's make a Twitter Bot with Python!
Let's make a Backend plugin for Errbot
I made a WEB application with Django
[Streamlit] I hate JavaScript, so I make a web application only with Python
Flask + PyPy I took a speed benchmark with Blueprint for large-scale Web
I want to make a web application using React and Python flask
Publish a web application for viewing data created with Streamlit on heroku
Make a simple pixel art generator with Flask
Launch a web server with Python and Flask
Let's replace UWSC with Python (5) Let's make a Robot
Let's make a module for Python using SWIG
Data acquisition from analytics API with Google API Client for python Part 2 Web application
[ES Lab] I tried to develop a WEB application with Python and Flask ②
Web application production course learned with Flask of Python Part 2 Chapter 1 ~ JSON exchange ~
Let's make a nervous breakdown app with Vue.js and Django-Rest-Framework [Part 2] ~ Vue setup ~
Let's make a nervous breakdown app with Vue.js and Django-Rest-Framework [Part 1] ~ Django setup ~
Let's make an app that can search similar images with Python and Flask Part1
Make a morphological analysis bot loosely with LINE + Flask
How to make a shooting game with toio (Part 1)
Parse and visualize JSON (Web application ⑤ with Python + Flask)
Launch a Python web application with Nginx + Gunicorn with Docker
Web application made with Python3.4 + Django (Part.1 Environment construction)
Let's make dependency management with pip a little easier
I made a web application that maps IT event information with Vue and Flask
[For play] Let's make Yubaba a LINE Bot (Python)