6.2. ToDo

Aplikacja internetowa ToDo w oparciu o framework Realizacja aplikacji internetowej Quiz w oparciu o framework Flask 3.1.x i bazę danych SQLite. Aplikacja umożliwi dodawanie przez zalogowanego użytkownika zadań z określoną datą, ich przeglądanie i oznaczanie jako wykonane.

Zalecamy zapoznanie się z materiałami zawartymi w scenariuszach:

• Podstawy Pythona,

• Bazy danych w Pythonie,

• Quiz.

Do pracy potrzebne nam będzie wirtualne środowisko Pythona z zainstalowanym pakietem Flask. Początek pracy jest taki sam, jak w przypadku aplikacji Quiz, tzn.:

1. przygotowujemy wirtualne środowisko Pythona w katalogu projekty_flask, chyba że zrobiliśmy to wcześniej podczas realizacji aplikacji Quiz;

2. w katalogu projekty_flask tworzymy katalog aplikacji: todo;

3. wykonujemy 2. i 3. punkt scenariusza Quiz, tj.: „Projekt i aplikacja” oraz „Strona główna”.

W pliku app.py zmieniamy w konfiguracji aplikacji nazwę serwisu zapisaną w kluczu SITE_NAME na „Projekty Flask”.

6.2.1. Model danych i baza

Jako źródło danych aplikacji wykorzystamy tym razem bazę SQLite3 obsługiwaną za pomocą modułu Pythona sqlite3.

Model danych, tj. w tym przypadku schemat bazy danych, zdefiniujemy w pliku modele.sql, który tworzymy w katalogu aplikacji i wypełniamy kodem SQL:

Plik modele.sql Kod nr

-- projekty_flask/todo/modele.sql

-- tabela z użytkownikami
DROP TABLE IF EXISTS user;
CREATE TABLE user (
  id INTEGER PRIMARY KEY AUTOINCREMENT, -- unikalny identyfikator
  login TEXT UNIQUE NOT NULL, -- nazwa użytkownika
  haslo TEXT NOT NULL -- hasło użytkownika
);
-- przykładowy użytkownik
INSERT INTO user (id, login, haslo)
VALUES (null, 'adam', 'scrypt:32768:8:1$b6ySf4OhUqADg4os$9fab79b9175c7e1ac341d06b72a3bb3e3a213733c6211bfa7f2b388988065e837df630be38e7eb5729d59db4f5e7d0abd7886e0697125f1a0e8a0eadd6a9eb3a');

-- tabela z zadaniami
DROP TABLE IF EXISTS zadanie;
CREATE TABLE zadanie (
    id INTEGER PRIMARY KEY AUTOINCREMENT, -- unikalny identyfikator zadania
    user_id INTEGER, -- identyfikator użytkownika
    zadanie TEXT NOT NULL, -- opis zadania do wykonania
    zrobione BOOLEAN NOT NULL, -- informacja czy zadania zostało juz wykonane
    data_pub DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, -- data dodania zadania
    FOREIGN KEY (user_id) REFERENCES user(id) ON DELETE CASCADE -- wskazanie klucza obcego
);

-- początkowe dane
INSERT INTO zadanie VALUES (null, 1, 'Wyrzucić śmieci', 0, CURRENT_TIMESTAMP);
INSERT into zadanie VALUES (null, 1, 'Nakarmić psa', 0, CURRENT_TIMESTAMP);

Wykonanie klauzul SQL spowoduje utworzenie dwóch tabel i wypełnienie ich przykładowymi danymi. Tabele:

• user – zawierać będzie identyfikator, nazwę i hasło użytkownika,

• zadanie – zawierać będzie identyfikator zadania, identyfikator użytkownika, treść zadania, oznaczenie wykonania oraz datę dodania.

Funkcje potrzebne do obsługi bazy danych umieścimy w nowym pliku db.py, który zapisujemy w katalogu aplikacji.

plik db.py Kod nr

import sqlite3
from flask import g, current_app

def get_db():
    """Funkcja tworzy połączenie z bazą"""
    if 'db' not in g:
        g.db = sqlite3.connect(
            current_app.config['DATABASE'],
            detect_types = sqlite3.PARSE_DECLTYPES
        )
        g.db.row_factory = sqlite3.Row
    return g.db

def close_db(e=None):
    """Funkcja zamyka połączenia z bazą"""
    db = g.pop('db', None)
    if db is not None:
        db.close()

def init_app(app):
    """Funkcja rejestruje funkcję close_db() w aplikacji"""
    app.teardown_appcontext(close_db)

def query_db(query, args=(), one=False):
    """Funkcja wykonuje zapytania SQL i zwraca rezultaty"""
    cur = get_db().execute(query, args)
    rv = cur.fetchall()
    cur.close()
    return (rv[0] if rv else None) if one else rv

def init_db():
    """Funkcja tworzy bazę i tabele"""
    from werkzeug.security import generate_password_hash
    db = get_db()
    with current_app.open_resource('modele.sql') as f:
        db.executescript(f.read().decode('utf8'))

Informacja

Podczas działania aplikacji mamy dostęp do tzw. kontekstu, który zawiera ustawienia zapisane w słowniku config oraz dane w obiektach current_app i g.

Zadaniem funkcji get_db() będzie połączenie z bazą danych i zapisanie obiektu db reprezentującego bazę w kontekście aplikacji:

• if 'db' not in g: – sprawdzamy, czy w obiekcie g nie ma obiektu db;

• dalsza część kodu tworzy połączenie wywołując metodę sqlite3.connect() i zapisuje je w kontekście aplikacji.

Funkcja close_db() odpowiadać będzie za zamknięcie połączenia. Będzie ona wywoływana po obsłużeniu każdego żądania dzięki kolejnej funkcji init_app(), która rejestruje funkcję close_db() w kontekście aplikacji: app.teardown_appcontext(close_db).

Funkcja query_db() ułatwi wykonywanie zapytań SQL odczytujących dane z bazy. Pierwszy wymagany argument to zapytanie SELECT, drugi opcjonalny to lista wartości wstawianych do klauzuli WHERE. Domyślnie funkcja zwracała będzie wszystkie pobrane rekordy dzięki metodzie fetchall(). Jeżeli jednak w wywołaniu podamy trzeci argument w postaci one=True, zwrócony zostanie tylko pierwszy pobrany rekord.

Funkcja init_db() posłuży do utworzenia pliku bazy danych, a następnie tabel do przechowywania danych.

Pozostaje nam uzupełnienie kodu w pliku app.py:

Plik app.py Kod nr

import os
from flask import Flask, render_template, current_app
from db import init_app, init_db

app = Flask(__name__)

# konfiguracja aplikacji
app.config.update(dict(
    SECRET_KEY='bardzosekretnawartosc',
    SITE_NAME='Projekty Flask',
    DATABASE=os.path.join(app.root_path, 'db.sqlite')
))

init_app(app)

# rejestracja blueprintów


@app.route('/')
def index():
    # return 'Cześć, tu Python i Flask!'
    return render_template('index.html')

with app.app_context():
    if not os.path.exists(current_app.config['DATABASE']):
        init_db()
    if __name__ == "__main__":
        app.run(debug=True)

Przede wszystkim uzupełniamy importy. Następnie w słowniku konfiguracji dodajemy klucz DATABASE wskazujący na plik bazy danych db.sqlite.

Następnie umieszczamy wywołanie funkcji init_app(app), dzięki czemu jeżeli na dysku nie będzie pliku bazy danych, zostanie on utworzony, a wraz z nim tabele zdefiniowane w pliku todo.sql.

Po uruchomieniu serwera deweloperskiego i otwarciu adresu http://127.0.0.1:5000 powinniśmy zobaczyć stronę:

– a w katalogu aplikacji powinien zostać utworzony plik bazy danych db.sqlite.

Podpowiedź

Bazę danych można też utworzyć ręcznie za pomocą wiersza poleceń bazy Sqlite3. W terminalu w katalogu aplikacji możemy użyć następujących poleceń:

Terminal nr

~/projekty_flask/todo$ sqlite3 db.sqlite < modele.sql
~/projekty_flask/todo$ sqlite3 db.sqlite
sqlite> select * from zadanie;
sqlite> .quit

Pierwsze polecenie tworzy bazę danych w pliku db.sqlite. Drugie otwiera ją w interpreterze. Trzecie to zapytanie SQL, które pobiera wszystkie dane z tabeli zadanie. Interpreter zamykamy poleceniem .quit.

6.2.2. Użytkownicy

Informacja

Jedna aplikacja Flask może składać się z wielu modułów odpowiedzialnych np. za autoryzację użytkowników, system komentarzy, quiz czy listę zadań. Obsługę tych składników warto rozdzielić na osobne moduły, nazywane we Flasku blueprint, co ułatwi konstruowanie i rozszerzanie aplikacji.

Zadania do wykonania powiązane będą z użytkownikami, dlatego na początku zajmiemy się blueprintem, który pozwoli na logowanie, rejestrację i usuwanie użytkownika.

W katalogu aplikacji tworzymy plik users.py i dodajemy do niego poniższy kod:

Plik users.py Kod nr

import functools
from flask import (
    Blueprint, flash, g, redirect, render_template, request, session, url_for
)
from werkzeug.security import check_password_hash, generate_password_hash
from db import get_db, query_db

bp = Blueprint('users', __name__, template_folder='templates', url_prefix='/users')

Blueprint jest instancją klasy (obiektem typu) Blueprint. Do konstruktora przekazujemy:

• users – nazwę blueprinta,

• __name__ – nazwa pliku, w którym blueprint jest definiowany,

• template_folder – podkatalog katalogu aplikacji, w którym należy szukać szablonów,

• url_prefix – część adresu URL, który blueprint będzie obsługiwał, w tym przypadku będzie to adres http://nazwa_serwera/users/.

6.2.2.1. (Wy)Logowanie

W utworzonym blueprincie zdefiniujemy widok loguj() powiązany z adresem URL http://nazwa_serwera/users/loguj, który obsłuży żądania GET i POST:

Plik users.py Kod nr

@bp.route('/loguj', methods=['GET', 'POST'])
def loguj():
    if request.method == 'POST':
        login = request.form['login'].strip()
        haslo = request.form['haslo'].strip()

        error = None
        user = query_db('SELECT * FROM user WHERE login = ?', [login], one=True)

        if user is None:
            error = 'Błędny login.'
        elif not check_password_hash(user['haslo'], haslo):
            error = 'Błędne hasło.'

        if error is None:
            session.clear()
            session['user_id'] = user['id']
            flash(f'Zalogowano użytkownika {user['login']}!')
            return redirect(url_for('index'))
        flash(error)

    return render_template('users/user_loguj.html')

Jeżeli serwer otrzyma żądanie typu GET oraz w przypadku błędów logowania, funkcja zwróci szablon users/loguj.html. Natomiast kiedy serwer otrzyma dane z formularza, wykonamy następujące operacje:

• request.form[] – odczytanie loginu i hasłu z przesłanego formularza;

• query_db('SELECT...', lista) – wykonanie zapytania SQL pobierającego dane użytkownika o podanym loginie, znak zapytania zostanie zastąpiony wartością z listy;

• przygotowanie informacji o błędzie w zmiennej error, jeżeli w bazie nie ma użytkownika o podanym loginie (user is None) lub jeżeli podano błędne hasło (not check_password_hash(user['haslo'], haslo));

• session['user_id'] = user['id'] – zapisanie identyfikatora użytkownika w sesji (zob. sesja), jeżeli dane logowania są poprawne;

• redirect(url_for('index')) przekierowanie zalogowanego użytkownika na stronę główną;

• flash() – zapisanie komunikatów dla użytkownika, które będzie można później odczytać w szablonie.

Po poprawnym zalogowaniu identyfikator użytkownika będzie dostępny w sesji podczas przetwarzania kolejnych żądań. Będzie on odczytywany przez funkcję load_user(), którą umieszczamy w blueprincie:

Plik users.py Kod nr

@bp.before_app_request
def load_user():
    user_id = session.get('user_id')
    if user_id is None:
        g.user = None
    else:
        g.user = query_db('SELECT * FROM user WHERE id = ?', [user_id], one=True)

Funkcja wykonywana będzie przed każdym żądaniem, ponieważ poprzedzamy ją dekoratorem @bp.before_app_request. Zadaniem funkcji będzie pobranie danych zalogowanego użytkownika z bazy i zapisanie ich w kontekście g.user.

Adres http://nazwa_serwera/users/wyloguj będzie obsługiwany przez widok wyloguj():

Plik users.py Kod nr

@bp.route('/wyloguj')
def wyloguj():
    session.clear()
    flash(f'Wylogowano użytkownika {g.user['login']}.')
    return redirect(url_for('index'))

Wylogowanie polega na usunięciu danych użytkownika z sesji, po czym nastąpi przekierowanie na stronę główną.

Na koniec dodamy jeszcze jedną funkcję login_required(), której użyjemy do zabezpieczenia dostępu niektórych widoków:

Plik users.py Kod nr

def login_required(view):
    @functools.wraps(view)
    def wrapped_view(**kwargs):
        if g.user is None:
            return redirect(url_for('users.loguj'))
        return view(**kwargs)
    return wrapped_view

Dodana funkcja to dekorator, który jeżeli użytkownik nie będzie zalogowany, przekieruje go na stronę logowania, w przeciwnym razie zwróci żądany widok.

6.2.2.2. Rejestracja blueprinta

Użycie blueprinta wymaga zarejestrowania go w aplikacji.

Na początku pliku app.py importujemy moduł users, następnie poniżej komentarza dodajemy kod:

Plik app.py Kod nr

import users

...

# rejestracja blueprintów
app.register_blueprint(users.bp)

6.2.3. Szablony

W rozbudowanych aplikacjach zawierających wiele blueprintów i widoków zwracających szablony, część kodu HTML powtarza się na każdej stronie, co zapewnia spójność wyglądu. Tę wspólną część, aby jej nie powielać, umieścimy w szablonie bazowym. Użyjemy dotychczasowego pliku templates/index.html, w którym umieszczamy poniższy kod:

Plik index.html Kod nr

<!-- projekty_flask/todo/templates/index.html -->
<html>
  <head>
    <title>{{ config.SITE_NAME }}</title>
  </head>
<body>
  <h1>{% block h1 %} {{ config.SITE_NAME }} {% endblock %}</h1>

  <nav>
    <ul>
      <li><a href="{{ url_for('index') }}">Strona główna »</a></li>
    {% if g.user %}
      <li><a href="{{ url_for('users.wyloguj') }}">Wyloguj się »</a></li>
      <li><span>Zalogowany: {{ g.user['login'] }}</span></li>
    {% else %}
      <li><a href="{{ url_for('users.loguj') }}">Zaloguj się »</a></li>
    {% endif %}
    </ul>
  </nav>

  {% with komunikaty = get_flashed_messages() %}
    {% if komunikaty %}
      {% for komunikat in komunikaty %}
        <p> {{ komunikat }} </p>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {% block body %} {% endblock %}

</body>
</html>

W szablonach wykorzystujemy specjalne tagi dwóch rodzajów:

• {% instrukcja %} – pozwalają używać instrukcji sterujących, np. warunkowych lub pętli, oraz definiować bloki, które będą uzupełniane przez szablony dziedziczące,

• {{ zmienna }} – służą wyświetlaniu wartości zmiennych lub wywoływaniu metod obiektów przekazanych do szablonu.

Zastosowanie tagów w szablonach:

• {{ config.SITE_NAME }} – wstawienie nazwy serwisu zdefiniowanego w słowniku ustawień aplikacji config;

• {% block nazwa %} {% endblock %} – zdefiniowanie bloku o podanej nazwie, którego zawartość może zostać nadpisana w szablonach dziedziczących;

• {% if g.user %} ... {% else %} ... {% endif %} – jeżeli użytkownik jest zalogowany, wstawiamy odnośnik „Wyloguj się” oraz informację, kto jest zalogowany, w przeciwnym razie wstawiamy odnośnik „Zaloguj się”;

• {{ url_for('index') }} – funkcja url_for() zwraca adres URL powiązany z podanym jako argument widokiem, poprzedzonym ewentualna nazwą blueprintu, w którym został zdefiniowany, np. {{ url_for('users.loguj') }};

• {% with komunikaty = get_flashed_messages() %} {% endwith %} – odczytanie komunikatów dla użytkownika utworzonych w widokach, jeżeli zostały utworzone ({% if komunikaty %}), odczytujemy je w pętli ({% for komunikat in komunikaty %}) i wstawiamy do szablonu w osobnych akapitach <p> {{ komunikat }} </p>.

Szablony blueprintów mogą być zapisywane w osobnych podkatalogach. W katalogu projekty_flask/todo/templates tworzymy podkatalog o takiej samej nazwie jak nasz blueprint, tj. users, a w nim plik user_loguj.html. W utworzonym szablonie umieszczamy kod:

Plik user_loguj.html Kod nr

<!-- projekty_flask/todo/templates/users/loguj.html -->
{% extends "index.html" %}
{% block h1 %} Logowanie użytkownika {% endblock %}
{% block body %}
    <form method="POST" action="{{ url_for('users.loguj') }}">
      <label for="login">Login:</label>
      <input type="text" id="login" name="login" value="" required>
      <br>
      <label for="haslo">Hasło:</label>
      <input type="password" id="haslo" name="haslo" value="" required>
      <br>
      <button type="submit">Zaloguj</button>
    </form>
{% endblock %}

Tag {% extends "index.html" %} wskazuje szablon bazowy, z którego dziedziczymy kod. W tagach {% block nazwa %} {% endblock %} wstawiamy kod charakterystyczny dla bieżącego szablonu. W tym przypadku tworzymy formularz HTML pozwalający na wpisanie loginu i hasła i przesłanie tych danych na adres zdefiniowany w atrybucie action obsługiwany przez widok loguj() z blueprinta users.

Po uruchomieniu serwera deweloperskiego i wejściu na adres http://127.0.0.1:5000/users/loguj powinniśmy zobaczyć stronę logowania:

6.2.3.1. Ćwiczenie

Spróbuj zalogować się na konto użytkownika utworzonego podczas dodawania do bazy przykładowych danych. W formularzu podaj login adam i hasło zaq1@WSX. Po zalogowaniu powinieneś zobaczyć stronę główną z odpowiednim komunikatem:

Po wylogowaniu podobnie:

6.2.4. Dodawanie i usuwanie kont

W blueprincie users.py umieścimy jeszcze dwa widoki, które umożliwią zarejestrowanie się użytkownika oraz usuwanie konta:

@bp.route('/dodaj', methods=['GET', 'POST'])
def dodaj():
    if request.method == 'POST':
        login = request.form['login'].strip()
        haslo = request.form['haslo'].strip()
        db = get_db()
        try:
            db.execute('INSERT INTO user VALUES (?, ?, ?)',
                       [None, login, generate_password_hash(haslo)])
            db.commit()
        except db.IntegrityError:
            flash(f'Podany login {login} jest już używany.')
        else:
            flash(f'Dodano konto {login}')
            return redirect(url_for('index'))

    return render_template('users/user_dodaj.html')

@bp.route('/usun', methods=['GET', 'POST'])
@login_required
def usun():
    if request.method == 'POST':
        login = g.user['login']
        user_id = g.user['id']
        db = get_db()
        db.execute('DELETE FROM user WHERE id = ?', [user_id])
        db.commit()
        flash(f'Usunięto użytkownika {login}!')
        return redirect(url_for('index'))

    return render_template('users/user_usun.html')

Po wysłaniu żądania GET na adres http://nazwa_serwera/users/dodaj widok dodaj() zwróci szablon user_dodaj.html zawierający formularz. Po wypełnieniu i wysłaniu formularza, czyli w przypadku żądania typu POST odczytujemy login oraz hasło i próbujemy dodać do bazy nowego użytkownika wykonując klauzulę SQL INSERT INTO user .... Warto zwrócić uwagę, że hasło jest szyfrowane za pomocą funkcji skrótu generate_password_hash().

Jeżeli podany login istnieje w bazie, zwrócony zostanie wyjątek db.IntegrityError, tj. błąd integralności, wtedy przygotowujemy komunikat dla użytkownika i ponownie zawracamy szablon z formularzem. Pod udanym dodaniu konta użytkownik zostanie przekierowany na stronę główną z komunikatem potwierdzającym dodanie konta.

Zalogowany użytkownik będzie mógł usunąć konto po wejściu na stronę o adresie http://nazwa_serwera/users/usun. Widok usun() obsługujący ten adres zabezpieczamy dodanym wcześniej dekoratorem login_required. Jeżeli użytkownik potwierdzi chęć usunięcia konta oraz wszystkich jego zadań przesyłając formularz z szablonu user_usun.html, wykonamy klauzulę SQL DELETE FROM users ..., która usunie jego konto z bazy oraz kaskadowo wszystkie powiązane zadania. Na koniec przekierujemy użytkownika na stronę główną.

Pozostaje dodanie szablonów zwracanych przez omówione widoki. W katalogu projekty_flask/todo/templates/users:

• dodajemy plik user_dodaj.html:

  Plik user_dodaj.html Kod nr

  <!-- projekty_flask/todo/templates/users/dodaj.html -->
  {% extends "index.html" %}
  {% block h1 %} Dodawanie konta {% endblock %}
  {% block body %}
      <form method="POST" action="{{ url_for('users.dodaj') }}">
        <label for="login">Login:</label>
        <input type="text" id="login" name="login" required>
        <br>
        <label for="haslo">Hasło:</label>
        <input type="password" id="haslo" name="haslo" required>
        <br>
        <button type="submit">Dodaj</button>
      </form>
  {% endblock %}
  

– oraz plik user_usun.html:

<!-- projekty_flask/todo/templates/users/usun.html -->
{% extends "index.html" %}
{% block h1 %} Usuwanie użytkownika {% endblock %}
{% block body %}
    <form method="POST" action="{{ url_for('users.usun') }}">
      <p>Czy na pewno chcesz usunąć swoje konto oraz wszystkie zadania?</p>
      <br>
      <button type="submit">Usuń</button>
    </form>
{% endblock %}

6.2.4.1. Ćwiczenie

1. Dodaj do szablonu bazowego we właściwych sekcjach odnośniki pozwalające na dodawanie i usuwanie konta przez użytkownika.

2. Dodaj koto użytkownika ewa, a następnie je usuń.

6.2.5. Lista zadań

Obsługę zadań umieścimy w osobnym blueprincie. W katalogu aplikacji projekty_flask/todo tworzymy plik todo.py i wypełniamy kodem:

Plik todo.py Kod nr

from flask import (
    Blueprint, flash, g, render_template, request, redirect, url_for
)
from db import get_db, query_db
from users import login_required

bp = Blueprint('todo', __name__, template_folder='templates', url_prefix='/todo')

@bp.route('/')
@login_required
def index():
    sql = 'SELECT * FROM zadanie WHERE user_id=? ORDER BY data_pub DESC'
    zadania = query_db(sql, [g.user['id']])
    return render_template('todo/index.html', zadania=zadania)

Widok index() wywoływany będzie po wejściu na adres http://nazwa_serwera/todo. Jego zadaniem jest pobranie z bazy wszystkich zadań zalogowanego użytkownika i przekazanie ich do szablonu w zmiennej zadania.

Szablon tworzymy w pliku projekty_flask/todo/templates/todo/index.html:

Plik todo/index.html Kod nr

<!-- projekty_flask/todo/templates/todo/index.html -->
{% extends "index.html" %}
{% block h1 %} Lista zadań {% endblock %}
{% block body %}
    <ol>
      <!-- wypisujemy kolejno wszystkie zadania -->
      {% for zadanie in zadania %}
        <li>{{ zadanie.zadanie }} – <em>{{ zadanie.data_pub }}</em></li>
      {% endfor %}
    </ol>
{% endblock %}

W pętli {% for zadanie in zadania %} odczytujemy zadania z listy przekazanej do szablonu, wypisujemy treść zadania i datę dodania.

6.2.5.1. Ćwiczenie

1. W pliku app.py zaimportuj moduł todo i zarejestruj blueprint todo.bp w aplikacji.

2. Dodaj do szablonu bazowego odnośnik do listy zadań.

3. Zaloguj się podając login adam i hasło zaq1@WSX.

4. Wejdź na stronę z listą zadań.

6.2.6. Dodawanie zadań

W pliku todo.py dopisujemy widoki:

Plik todo.py Kod nr

@bp.route('/dodaj', methods=['GET', 'POST'])
@login_required
def dodaj():
    """Dodawanie nowego zadania"""
    error = None
    if request.method == 'POST':
        zadanie = request.form['zadanie'].strip()
        if len(zadanie):
            db = get_db()
            db.execute('INSERT INTO zadanie (user_id, zadanie, zrobione) VALUES (?, ?, ?)',
                       [g.user['id'], zadanie, 0])
            db.commit()
            flash('Dodano nowe zadanie.')
            return redirect(url_for('todo.index'))
        else:
            flash('Nie możesz dodać pustego zadania!')  # komunikat o błędzie

    return render_template('todo/zadanie_dodaj.html')

@bp.route('/zrobione', methods=['POST'])
def zrobione():
    """Zmiana statusu zadania na wykonane."""
    zadanie_id = request.form['id']
    db = get_db()
    db.execute('UPDATE zadanie SET zrobione=1 WHERE id=? AND user_id=?',
               [zadanie_id, g.user['id']])
    db.commit()
    flash('Zmieniono status zadania.')
    return redirect(url_for('todo.index'))

Widok dodaj() w odpowiedzi na żądanie typu GET zwróci szablon zadanie_dodaj.html, który będzie zawierał formularz pozwalający na wpisanie treści zadania.

Po przesłaniu formularza na serwer odczytamy treść zadania i sprawdzimy, czy zawiera jakieś znaki. Jeżeli tak, wykonamy zapytanie SQL INSERT INTO ..., które do tabeli zadanie doda nowy rekord zawierający identyfikator użytkownika, treść zadania oraz wartość 0 oznaczającą, że zadanie nie jest wykonane.

Warto zwrócić uwagę, że nie podajemy daty publikacji, ponieważ zostanie ona utworzona automatycznie przez bazę danych dzięki zdefiniowaniu wartości domyślnej pola data_pub w modelu danych: DEFAULT CURRENT_TIMESTAMP.

Widok zrobione() obsługiwał będzie tylko żądania typu POST. Po otrzymaniu identyfikatora zadania przesłanego z formularza wykonamy zapytanie SQL UPDATE, które oznaczy zadanie wskazane w klauzuli WHERE jako zrobione: SET zrobione=1.

W szablonie projekty_flask/todo/templates/todo/zadanie_dodaj.html umieszczamy kod HTML formularza pozwalającego dodać zadanie:

Plik zadanie_dodaj.html. Kod nr

<!-- projekty_flask/todo/templates/todo/zadanie_dodaj.html -->
{% extends "index.html" %}
{% block h1 %} Dodawanie zadań {% endblock %}
{% block body %}
    <form method="POST" action="{{ url_for('todo.dodaj') }}">
      <input name="zadanie" value=""> <br>
      <button type="submit">Dodaj zadanie</button>
    </form>
{% endblock %}

Szablon projekty_flask/todo/templates/todo/index.html uzupełniamy, tzn. kod w pętli {% for zadanie in zadania %} zmieniamy na:

Plik todo/index.html. Kod nr

      {% for zadanie in zadania %}
        <li>{{ zadanie.zadanie }} – <em>{{ zadanie.data_pub }}</em>

        <!-- formularz zmiany statusu zadania -->
        {% if not zadanie.zrobione %}
          <form method="POST" action="{{ url_for('todo.zrobione') }}">
            <!-- wysyłamy tylko id zadania -->
            <input type="hidden" name="id" value="{{ zadanie.id }}"/>
            <button type="submit">Zrobione</button>
          </form>
        {% else %}
          <!-- tu wstawisz kod formularza do usuwania zadania -->
        {% endif %}

        </li>
      {% endfor %}

• {% if not zadanie.zrobione %} – jeżeli zadanie nie jest wykonane, dodajemy formularz zmiany statusu zadania zawierający ukryte pole z identyfikatorem zadania. Jeżeli użytkownik kliknie przycisk Zrobione, do serwera zostanie wysłane żądanie POST z identyfikatorem zadania, które zostanie obsłużone przez widok zrobione().

6.2.6.1. Ćwiczenie

1. Do szablonu wyświetlającego listę zadań dodaj na końcu odnośnik umożliwiający dodawanie zadań.

2. Dodaj konto dla użytkownika o loginie ewa i zaloguj się na nie.

3. Dodaj dwa zadania i oznacz jedno z nich jako wykonane.

6.2.7. Style CSS

O wyglądzie aplikacji decydują arkusze stylów CSS. Tego typu zasoby, podobnie jak np. obrazy, nie zmieniają się zbyt często, dlatego umieszczamy je w specjalnym podkatalogu static w folderze aplikacji.

Tworzymy więc podkatalog projekty_flask/todo/static, a w nim plik style.css. W pliku umieszczamy przykładowe definicje:

Plik style.css Kod nr

/* todo/static/style.css */
body { margin-top: 20px; background-color: lightgreen; }
h1, p { margin-left: 20px; }
ol { text-align: left; }
form { display: inline-block; margin: 5px; }
input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box
  border-color: blue;
  border-radius: 5px;
}
input:focus {
  background-color: lightgray;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}
ul li { float: left; }
ul li a, ul li span{
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
ul li a:hover { background-color: #111111; }
li { margin-bottom: 5px; }
button {
  padding: 8px 16px;
  cursor: pointer;
  color: blue;
  font-size: 14px/1.5em;
  background: white;
  border: 1px solid grey;
}
.error { color: red; }
.success { color: green; }
.done { text-decoration: line-through; }

Arkusz CSS dołączamy do szablonu bazowego projekty_flask/todo/templates/index.html w sekcji head:

Plik index.html. Kod nr

<!-- projekty_flask/todo/templates/index.html -->
<html>
  <head>
    <title>{{ config.SITE_NAME }}</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
  </head>

6.2.7.1. Ćwiczenie

Uruchom aplikację lub odśwież stroną z listą zadań zalogowanego użytkownika po dołączeniu stylów CSS.

6.2.8. Zadania dodatkowe

Dodaj możliwość usuwania zadań, czyli:

• w szablonie listy zadań dodaj formularz podobny do formularza oznaczania zadań jako wykonane, z którego identyfikator zadania wysyłany jest do widoku usun,

• w blueprincie todo.py dodaj wymagający zalogowania się widok usun() obsługujący adres URL /usun, który przy użyciu klauzuli SQL DELETE FROM usuwa z bazy zadanie o odczytanym z formularza identyfikatorze należące do zalogowanego użytkownika,

• usuń pierwsze zadanie użytkownika ewa.

6.2.9. Materiały

• Strona główna SQLite

• Using SQLite 3 with Flask

Pojęcia

framework, HTTP, GET, POST, sesja, dekorator, widok, szablon, renderowanie szablonu

---

Materiały Python 101 udostępniane przez Centrum Edukacji Obywatelskiej na licencji Creative Commons Uznanie autorstwa-Na tych samych warunkach 4.0 Międzynarodowa.

Utworzony:

2026-04-19 o 17:42 w Sphinx 7.3.7

Autorzy:

Robert Bednarz