Щоб додати дані в веб-додаток, побудований за принципом Model-View-Controller (MVC), перший крок — це зрозуміти роль кожного компонента в цій архітектурній моделі. Модель відповідає за управління даними, View (представлення) — за інтерфейс користувача, а Controller — за зв'язок між ними та керування логікою додатка. У цьому контексті додавання даних означає змінення моделі та забезпечення потоку даних від користувача до бази даних через відповідний контролер.

У попередньому практичному занятті Посилання на практикум 8, ми вже підключили наш Flask-додаток до бази даних, що дозволяє ефективно зберігати та керувати даними. Тепер ми продовжимо, додаючи дані в додаток за допомогою моделі, представлення та контролера в архітектурі MVC. Цей процес передбачає створення форми введення в представленні (view), обробку введених даних у контролері, а також їх збереження в базі даних через модель. Такий підхід робить веб-додаток більш інтерактивним та здатним динамічно обробляти дані.

Перед тим як перейти до додавання даних, важливо розібратися в структурі форм у веб-додатку, зокрема в тому, як працюють HTTP-методи, такі як POST і GET.

Метод GET

Метод GET використовується, коли ми хочемо отримати дані з сервера. Наприклад, коли ви шукаєте щось на сайті або в додатку, дані пошуку передаються на сервер таким чином. Дані пошуку з'являються в URL. Ось приклад форми з методом GET:

 Пошук:   

 Пошук  

Форма з'явиться в URL. Це можна використовувати для отримання певних даних з бази даних через запит або шлях, який ми заповнюємо у формі.

Метод POST

Метод POST використовується, коли ми хочемо надіслати дані на сервер, наприклад, при додаванні нових даних, таких як ім'я чи електронна пошта. Дані передаються через тіло запиту, що робить їх більш безпечними порівняно з GET. Ось приклад форми з методом POST:

Ім'я:         Надіслати   
 ```  ![pic](https://drive.javascript.org.ua/f1b77df4b11_B0udOdpPHsbN4BsFYAZ7Ag_png)  Коли форма надіслана, вона не буде відображатися в рядку пошуку. Це робиться для забезпечення конфіденційності форми.

## Створення файлу `TambahBuku.html`

Створіть файл `TambahBuku.html` у папці `templates`:

Додати книгу
Назва книги:
Опис:
Додати
```

Цей файл буде заповнювати форму відповідно до колонок у базі даних. У цьому випадку ми будемо заповнювати колонку з назвою книги та описом.

# Для атрибутів name відповідно використовуйте назви з моделі

name="name"
name="description"
```

ModelBuku.py

Додавання функції для додавання книги в BukuController

1.
Введіть декілька необхідних бібліотек, таких як request, redirect, url_for та flash. Помістіть цей код у другий рядок

from flask import request, redirect, url_for, flash

1. Створіть метод або функцію add_book()

def add_book():  
 if request.method == 'POST':  
 name = request.form.get('name')  
 description = request.form.get('description')  

 if not name or not description:  
 flash("Назва та опис книги повинні бути заповнені!", "error")  
 return redirect(url_for('tambah_buku'))  

 # Створення нового екземпляра Item  
 new_item = Item(name=name, description=description)  
 db.session.add(new_item)  
 db.session.commit()  
 flash("Книгу успішно додано!", "success")  
 return redirect(url_for('buku'))

Отже, весь код виглядатиме так:

from Models.BukuModels import Item, db  
from flask import request, redirect, url_for, flash  

def index():  
 # Отримати всі дані книг з бази даних  
 items = Item.query.all()  
 return items  

def add_book():  
 if request.method == 'POST':  
 name = request.form.get('name')  
 description = request.form.get('description')  

 if not name or not description:  
 flash("Назва та опис книги повинні бути заповнені!", "error")  
 return redirect(url_for('tambah_buku'))  

 # Створення нового екземпляра Item  
 new_item = Item(name=name, description=description)  
 db.session.add(new_item)  
 db.session.commit()  
 flash("Книгу успішно додано!", "success")  
 return redirect(url_for('buku'))

!Для цього коду налаштуйте модель книги та форму name, яку потрібно заповнити пізніше

name = request.form.get('name')  
 description = request.form.get('description')

TambahBuku.html

Додайте новий маршрут у app.py

1. Додайте кілька бібліотек, таких як у контролері: request, redirect, url_for та flash

from flask import Flask, render_template, request, redirect, url_for, flash  
from Controllers.BukuController import index, db, add_book

1. Створіть новий маршрут

@app.route('/TambahBuku', methods=['GET', 'POST'])  
def tambah_buku():  
 if request.method == 'POST':  
 return add_book()  
 return render_template('TambahBuku.html')

3.
Усього код

from flask import Flask, render_template  
from Controllers.BukuController import index, db, add_book  
from config import Config  
from flask import Flask, render_template, request, redirect, url_for, flash  

# Ініціалізація Flask  
app = Flask(__name__)  
app.config.from_object(Config)  
db.init_app(app)  

@app.route('/home')  
def home():  
 return render_template('Home.html')  


@app.route('/buku')  
def buku():  
 items = index()  
 return render_template('Buku.html', items=items)  

@app.route('/TambahBuku', methods=['GET', 'POST'])  
def tambah_buku():  
 if request.method == 'POST':  
 return add_book()  
 return render_template('TambahBuku.html')  

# Запуск додатку  
if __name__ == '__main__':  
 app.run(debug=True)

Додати кнопку для маршруту додавання книги для полегшення навігації

Вставте цей код під закриваючий тег таблиці

Buku.html

Tambah Buku

Додати ключ у конфігурацію

config.py

SECRET_KEY = 'your_secret_key_here'

Тож повний код буде таким:

from dotenv import load_dotenv  
import os  


# Завантаження змінних середовища з файлу .env  
load_dotenv()  

class Config:  
 SQLALCHEMY_DATABASE_URI = f"mysql+pymysql://{os.getenv('DB_USER')}:{os.getenv('DB_PASSWORD')}@{os.getenv('DB_HOST')}:{os.getenv('DB_PORT')}/{os.getenv('DB_NAME')}"  
 SQLALCHEMY_TRACK_MODIFICATIONS = False  
 SECRET_KEY = 'your_secret_key_here'

Остаточний результат

Сторінка з книгами

Сторінка додавання книги

Ці макети можна отримати, використовуючи CSS Bootstrap, який додано в код кожної HTML-сторінки

Видалення даних книги

Після додавання функції видалення книги, наступним кроком буде створення функції для видалення книги. Для цієї функції ми будемо використовувати метод GET і запит за ID, де кнопка отримує ID кожного запису. Це дозволить визначити, який саме запис буде видалено. Для видалення книги є кілька кроків, які потрібно виконати:

def delete_book(book_id):  
 # Шукаємо книгу за ID  
 item_to_delete = Item.query.get(book_id)  

 if not item_to_delete:  
 flash("Книгу не знайдено!", "error")  
 return redirect(url_for('buku'))  

 # Видалення книги з бази даних  
 db.session.delete(item_to_delete)  
 db.session.commit()  
 flash("Книгу успішно видалено!", "success")  
 return redirect(url_for('buku'))

@app.route("/delete/")  
def delete(book_id):  
 return delete_book(book_id)

 Hapus  

Перекладено з: Tambah dan Hapus Data APlikasi Web MVC