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.