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

Introduction

Hi, my name is Nioh. I am currently accounting at a small business. In order to solve the problem of not knowing what to ask and where to ask, I decided to create a phone book as a web application so that it can be easily shared.

** "Why don't you use Google Spreadsheets?" **

I was immediately told. That's true. I still implement it because I wanted to know how to handle modules such as Flask.

necessary function

  1. Basic authentication → I want to implement at least --Search function --Registration function --Display function

I wondered if the above functions were necessary.

However, to be honest, it was inevitable that I would stumble at Basic authentication, so I will first make parts according to the flow of use.

  1. Log in
  2. Displayed
  3. Search
  4. Register

platform

I wanted to make it with python, so I will make it using Flask.

Flask is a web application framework that uses Django to create web apps in Python.

User ⇔ Phonebook DB

As an intermediary

User ⇔ Homepage ⇔ Python (Flask) ⇔ Phonebook DB

It works like that.

I thought it would be easy to understand the installation etc. by looking at here.

helloworld.py



from flask import Flask
app = Flask(__name__) #Initialization

@app.route(/) 
#Routing (eg http://www.name.com/Application to run on
# http://www.name.com/If you want to execute by self, click here
# @app.route(/self)Change to

def hello_world():
   return "Hello World!"

if __name__ == "__main__":
   app.run()

If you do this in the terminal, it's OK

1. About login

First, refer to Basic authentication with flask.

pip install Flask-HTTPAuth

The link destination is all lowercase, but it seems that uppercase letters are also mixed.

Surprising? Easy to

The source looks like this

Basic_auth.py



from flask import Flask
from flask_httpauth import HTTPBasicAuth

app = Flask(__name__)
auth = HTTPBasicAuth() #Creating an auth object

users = {
    "john": "hello",
    "susan": "bye"
}

@auth.get_password #Decorate
def get_pw(username):
    if username in users:
        return users.get(username)
    return None

@app.route('/')
@auth.login_required #
def index():
    return "Hello, %s!" % auth.username()

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

I will use this with a slight modification.

2. Display

Implement DB⇔Browser.

First of all, about Jinja2 Jinja2 is a template engine used by Flask. Write inside HTML, Create a "templates" folder in the APP folder, and put HTML written using Jinja2 in it.

---app.py ------ | --templates folder ------|--templates.html

It's like preparing and playing with templates.html.

To be honest, let's just remember {% for ~~%} ~~ {% endfor%}. The rest is used while nesting.

Next, about DB Use the module of sqlite3. For this, I referred to python-izm. For how to use SQLITE, I referred to DBonline.

After creating a table with SQLITE Browser, I thought that I didn't need to learn how to use Sqlite except ** SELECT and INSERT UPDATE at first. ** **

I think I will be able to use it as appropriate.

Only the syntax is remembered for the sqlite3 module.

sample.py



import sqlite3

conn = sqlite3.connect("[DB name and path]")
cursor = conn.cursor()

cursor.execute("[SQL syntax]")

conn.commit() #When the select statement is saved with this, it is OK without adding it because it is only a reference
cursor.close()
conn.close()

This is a set. [Tips] When putting a variable in the SQL syntax, for example, ["select? From tables", (tuple)] is used to assign the variable. When there is only one variable, it will fail if you do not create a tuple in the format (variable **, **) even if there is only one.

I made it like this.

app.py


#-*- coding:utf-8 -*-
#! usr/env/python

from flask import Flask,render_template
import csv
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("/")

def hello():
    return ("hello world")

@app.route("/index")
@auth.login_required

def index():
    conn = sqlite3.connect("sampledb.db")
    cursor = conn.cursor()

    cursor.execute("select * from contacts ")
    contacts_data = cursor.fetchall() #Take out in list

    cursor.close()
    conn.close()
    return render_template("index.html",contacts = contacts_data)

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

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>ID</th>
            <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>

You have now implemented Basic authentication and the display part. Click here for more ↓

Try to make a WEB application for phone book with flask Part 2

What I thought

Actually, I don't know much about security, so please teach me in an easy-to-understand manner.

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)
[GCP] Procedure for creating a web application with Cloud Functions (Python + Flask)
Let's make a nervous breakdown application with Vue.js and Django-Rest-Framework [Part 3] ~ Implementation of nervous breakdown ~
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 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
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
Let's make an app that can search similar images with Python and Flask Part2
Make a morphological analysis bot loosely with LINE + Flask
How to make a shooting game with toio (Part 1)
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