Додавання функції редагування в веб-додаток на основі Python Flask

Ми вже успішно створили простий веб-застосунок з використанням Python Flask та SQLAlchemy для додавання назв книг і їх описів. Тепер настав час зробити наступний крок. У цій статті ми додамо можливість редагувати вже існуючі дані книг, зокрема оновлювати назву книги, опис і обкладинку. Таким чином, наш застосунок стане більш гнучким і дозволить користувачам легко оновлювати дані книг. Давайте подивимося, як інтегрувати цю функцію ефективно!»

Ось кроки:

Переконайтеся, що ви виконали попереднє практичне завдання до етапу завантаження та видалення текстових даних

Попередня версія додатка

Додайте нову функцію до контролера книг def editbook(bookid):

def edit_book(book_id):  
 # Знайти книгу за ID  
 edit = Item.query.get(book_id)  

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

 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('edit_buku', book_id=book_id))  

 # Оновлюємо дані книги  
 edit.name = name  
 edit.description = description  
 db.session.commit()  
 flash("Книгу успішно оновлено!", "success")  
 return redirect(url_for('buku'))  

 # Показуємо форму з поточними даними книги  
 return render_template('edit_book.html', book=edit)

Аналіз коду

edit = Item.query.get(book_id)

Ця функція edit шукає книгу за переданим через кнопку book_id, що знаходиться на головній сторінці.

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

Якщо книга за вказаним ID не знайдена (edit дорівнює None), функція:

1. Показує повідомлення "Книгу не знайдено!" з категорією "error".
2. Перенаправляє користувача на сторінку зі списком книг (buku).

if request.method == 'POST':

Ця перевірка визначає, чи використовує запит метод POST, що означає, що користувач надіслав дані з форми.

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

1. Дані з форми отримуються за допомогою request.form.get().
2. name і description беруться з полів форми з іменами name та description. Переконайтеся, що це відповідає полям вводу в Editbuku.html

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

1. Перевіряється, чи не порожні значення name і description.
2. Якщо одне з них порожнє, з’являється повідомлення "Назва та опис книги повинні бути заповнені!" і користувач перенаправляється назад на сторінку редагування книги.

edit.name = name  
edit.description = description  
db.session.commit()

1. Якщо перевірки пройдено успішно, оновлюються поля name і description книги.
2. Зміни зберігаються в базі даних через db.session.commit().

flash("Книгу успішно оновлено!", "success")  
return redirect(url_for('buku'))

1. Після оновлення книги з’являється повідомлення "Книгу успішно оновлено!".
2. Користувач перенаправляється на сторінку списку книг.

return render_template('edit_book.html', book=edit)

1. Якщо запит не метод POST, функція виводить форму редагування з поточними даними книги з бази даних.
   2.
   "edit" (книга, яку потрібно редагувати) передається в шаблон edit_book.html, щоб відобразити її у формі.

Створіть сторінку EditBuku.html у папці templates

<form method="POST" action="{{ url_for('edit', book_id=items.id) }}">
  <label for="name">Назва книги</label>
  <input type="text" id="name" name="name" value="{{ items.name }}" required>
  <label for="description">Опис</label>
  <textarea id="description" name="description" required>{{ items.description }}</textarea>
  <button type="submit">Зберегти зміни</button>
</form>

Аналіз коду

<form method="POST" action="{{ url_for('edit', book_id=items.id) }}">

: Елемент form визначає HTML форму з методом POST. Це означає, що дані будуть надіслані на сервер за допомогою HTTP-методу POST. Метод POST зазвичай використовується для операцій, що змінюють дані на сервері, таких як створення чи оновлення даних.

<label for="name">Назва книги</label>

Назва книги:
- Цей лейбл пов'язаний з полем вводу через атрибут for, значення якого має бути рівним id поля вводу (name). Лейбл допомагає користувачам зрозуміти, що це поле для введення назви книги.

<input type="text" id="name" name="name" value="{{ items.name }}" required>

• type="text": Це поле для введення тексту.
• id="name": Дасть унікальний ідентифікатор для цього поля, щоб його можна було посилатися через лейбл та JavaScript.
• name="name": Це ім’я використовується для ідентифікації даних вводу на сервері після надсилання форми.
• value="{{ items.name }}": Це заповнює значення поля введення поточним значенням name з об'єкта items. Таким чином, форма відобразить поточну назву книги, коли сторінка редагування відкривається.
• required: Переконується, що це поле повинно бути заповнене, перш ніж форма може бути відправлена.

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

@app.route('/edit/', methods=['GET', 'POST'])  # Додаємо маршрут для редагування книги
def edit(book_id):
    if request.method == 'POST':
        return edit_book(book_id)
    item_to_edit = edit_book(book_id)
    return render_template('EditBuku.html', items=item_to_edit)

Додайте посилання для редагування книги на сторінці Buku.html

<a href="{{ url_for('edit', book_id=item.id) }}">Редагувати</a>

Розмістіть код, як це показано нижче:

{% for item in items %}
  <tr>
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.description }}</td>
    <td><a href="{{ url_for('edit', book_id=item.id) }}">Редагувати</a></td>
    <td><a href="{{ url_for('delete', book_id=item.id) }}">Видалити</a></td>
  </tr>
{% endfor %}

Додайте повідомлення зверху таблиці

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }}">{{ message }}</div>
    {% endfor %}
  {% endif %}
{% endwith %}




Перекладено з: [Menambahkan Fitur Edit Pada Aplikasi WEB berbasis Python Flask](https://medium.com/@aldidaimfauzan15/menambahkan-fitur-edit-pada-aplikasi-web-berbasis-python-flask-73831c8b96b9)