[PYTHON] Let's make a WEB application for phone book with flask Part 4

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)

Now that we have a registration window, we will combine it and create a search form.

How to search

SELECT (column) FROM (table name) WHERE (検索するcolumn)  =(equal) or LIKE "(String)" 

Just use SQLITE string search as it is. For some reason I couldn't do FTS (full-text search) in my environment, so I can't search by name only.

With this, I was able to implement all the necessary functions.

But ...

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("Not applicable")
        return redirect(url_for("basicview"))

    else:
        return render_template("index.html",contacts = result)


if __name__ == '__main__':
    app.run(debug = True)

Display 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>
        <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>
        <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">
Search
    </button>

    <div class = "collapse" id = "collapseSamp">
      <div class ="well">
        <form action = "{{url_for("search_entry")}}" method = "POST" class="form-inline">
          <input name = "Name" placeholder="name">
          <input type ="submit" value = "Send">
        </form>
      </div>
    </div>
  </body>
</html>

** What is this ... **

It doesn't even become a WEB application ...

2017-05-14_17h25_41.png

I decided to remake it from the next time.

Recommended Posts

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! (2)
[GCP] Procedure for creating a web application with Cloud Functions (Python + Flask)
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 ~
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 GUI with python.
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
Make a rare gacha simulator with Flask
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
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
[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
Let's make an app that can search similar images with Python and Flask Part2
Let's make a simple game with Python 3 and iPhone
Parse and visualize JSON (Web application ⑤ with Python + Flask)
[Part 2] Let's build a web server on EC2 Linux
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)
Let's make a Mac app with Tkinter and py2app
Hobby Web engineer develops web application with Vue.js + Flask (& GCP)
[Super easy] Let's make a LINE BOT with Python.