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

проекты 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)

Выход:

Для маршрута: http://127.0.0.1:5000/

Для маршрута1

Для маршрута: http://127.0.0.1:5000/join

Здесь мы добавляем два новых данных в базу данных.

Здесь мы добавляем два новых

данные 1

Здесь мы добавляем два новых2

данные 2

Для маршрута: http://127.0.0.1:5000/participants

Для маршрут3

Читайте также:  Как удалить запятые из строки Python?
Оцените статью
bestprogrammer.ru
Добавить комментарий