Как создать веб-приложение с помощью Flask и SQLite в Python

Flask на основе Python — это микровеб-фреймворк. Как правило, микрофреймворк практически не зависит от внешних фреймворков. Несмотря на то, что это микрофреймворк, практически все может быть разработано, когда и как это необходимо, с использованием библиотек Python и других зависимостей. В этом посте мы разработаем приложение Flask, которое собирает пользовательский ввод в форму и показывает его на дополнительной веб-странице с помощью SQLite в Python.

Package Required

Установите flask, чтобы продолжить работу с интерфейсом веб-приложения.

pip install flask
pip install db-sqlite3

Шаги по созданию приложения с использованием Flask и SQLite

Шаг 1: Создайте виртуальную среду

Шаг 2: Установите необходимые модули внутри виртуальной среды.

Шаг 3: Создайте внешний интерфейс веб-приложения.

index.html

Файл index.html будет содержать две кнопки, одна кнопка для проверки всех списков участников (взято из базы). И другая кнопка для создания новой записи.

HTML

<!DOCTYPE html>

<html>

    <head>

        <title>Flask and SQLite </title>

    </head>

    <body>

        <h1>Build Web App Using Flask and SQLite</h1>

        <button class="btn" type="button" onclick="window.location.href='{{ url_for('join') }}';">Fill form to get updates</button><br/>

        <button class="btn" type="button" onclick="window.location.href='{{ url_for('participants') }}';">Check participant list</button>

    </body>

</html>

join.html

В файле join.html создайте простую форму, которая принимает имя, адрес электронной почты, город, страну и телефон в качестве входных данных для сохранения в базе данных. Методом POST получите запрос формы всех столбцов и зафиксируйте изменения в базе данных после вставки сведений в таблицу.

HTML

<!DOCTYPE html>

<html>

    <head>

        <title>Flask and SQLite </title>

    </head>

    <body>

        <form method="POST">

            <label>Enter Name:</label>

            <input type="name" name="name" placeholder="Enter your name" required><br/>

            <label>Enter Email:</label>

            <input type="email" name="email" placeholder="Enter your email" required><br/>

            <label>Enter City:</label>

            <input type="name" name="city" placeholder="Enter your City name" required><br/>

            <label>Enter Country:</label>

            <input type="name" name="country" placeholder="Enter the Country name" required><br/>

            <label>Enter phone num:</label>

            <input type="name" name="phone" placeholder="Your Phone Number" required><br/>

            <input type = "submit" value = "submit"/><br/>

        </form>

    </body>

</html>

participants.html

Используйте тег таблицы и назначьте заголовок с помощью тега <th>. Для автоматического увеличения строки таблицы в новой записи используйте шаблон jinja цикла For. Внутри цикла For добавьте теги <tr> и <td>.

HTML

<!DOCTYPE html>

<html>

    <head>

        <title>Flask and SQLite </title>

    </head>

    <style>

        table, th, td {

          border:1px solid black;

        }

        </style>

    <body>

        <table style="width:100%">

            <tr>

              <th>Name</th>

              <th>Email</th>

              <th>City</th>

              <th>Country</th>

              <th>Phone Number</th>

            </tr>

            {%for participant in data%}

               <tr>

                 <td>{{participant[0]}}</td>

                 <td>{{participant[1]}}</td>

                 <td>{{participant[2]}}</td>

                 <td>{{participant[3]}}</td>

                 <td>{{participant[4]}}</td>

                </tr>

            {%endfor%}

          </table>

    </body>

</html>

Шаг 4: Создайте app.py

Создайте новый файл с именем app.py и создайте внешний интерфейс веб-приложения, визуализируя шаблоны HTML. Отсюда мы пойдем функция за объяснением функции, как в пунктах:

Чтобы вставить данные в базу данных, нам сначала нужно создать новую таблицу базы данных. Столбец, который необходимо вставить в базу данных, — это имя, адрес электронной почты, город, страна и номер телефона.
Основной синтаксис для запуска sqlite3 — сначала подключиться к базе данных. sqlite3.connect(«database.db») создаст новую базу данных. Следующим шагом является создание новой таблицы, но сначала она проверит, существует ли уже таблица или нет.
Одна кнопка в index.html запрашивает список участников, и, таким образом, используя существующую базу данных, выберите * из таблицы и отобразите ее с помощью шаблона Python, т.е. шаблона Jinja для запуска цикла в HTML. В следующем коде мы создали тег таблицы, внутри тега таблицы для каждой новой вставки в базу данных мы добавляем шаблон Loop Jinja для автоматического увеличения новой строки таблицы.
В функции участников мы используем выбор всех столбцов из имени таблицы, мы используем метод fetchall() для получения данных.

Python3

from flask import Flask, render_template, request

import sqlite3

app = Flask(__name__)

@app.route('/')

@app.route('/home')

def index():

    return render_template('index.html')

connect = sqlite3.connect('database.db')

connect.execute(

    'CREATE TABLE IF NOT EXISTS PARTICIPANTS (name TEXT, \

    email TEXT, city TEXT, country TEXT, phone TEXT)')

@app.route('/join', methods=['GET', 'POST'])

def join():

    if request.method == 'POST':

        name = request.form['name']

        email = request.form['email']

        city = request.form['city']

        country = request.form['country']

        phone = request.form['phone']

        with sqlite3.connect("database.db") as users:

            cursor = users.cursor()

            cursor.execute("INSERT INTO PARTICIPANTS \

            (name,email,city,country,phone) VALUES (?,?,?,?,?)",

                           (name, email, city, country, phone))

            users.commit()

        return render_template("index.html")

    else:

        return render_template('join.html')

@app.route('/participants')

def participants():

    connect = sqlite3.connect('database.db')

    cursor = connect.cursor()

    cursor.execute('SELECT * FROM PARTICIPANTS')

    data = cursor.fetchall()

    return render_template("participants.html", data=data)

if __name__ == '__main__':

    app.run(debug=False)