7.2. ToDo¶

Realizacja aplikacji internetowej ToDo (lista zadań do zrobienia) w oparciu o framework Flask 0.12.x. Aplikacja umożliwia dodawanie z określoną datą, przeglądanie i oznaczanie jako wykonane różnych zadań, które zapisywane będą w bazie danych SQLite.

Model danych i baza
Połączenie z bazą
Lista zadań
Dodawanie zadań
Style CSS
Zadania wykonane
Zadania dodatkowe
Materiały

Początek pracy jest taki sam, jak w przypadku aplikacji Quiz. Wykonujemy dwa pierwsze punkty “Projekt i aplikacja” oraz “Strona główna”, tylko katalog aplikacji nazywamy todo, a kod zapisujemy w pliku todo.py.

Po wykonaniu wszystkich kroków i uruchomieniu serwera testowego powinniśmy w przeglądarce zobaczyć stronę główną:

7.2.1. Model danych i baza ¶

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

Model danych: w katalogu aplikacji tworzymy plik schema.sql, który zawiera instrukcje języka SQL tworzące tabelę z zadaniami i dodające przykładowe dane.

plik schema.pl Kod nr

-- todo/schema.sql

-- tabela z zadaniami
DROP TABLE IF EXISTS zadania;
CREATE TABLE zadania (
    id integer primary key autoincrement, -- unikalny indentyfikator
    zadanie text not null, -- opis zadania do wykonania
    zrobione boolean not null, -- informacja czy zadania zostalo juz wykonane
    data_pub datetime not null -- data dodania zadania
);

-- pierwsze dane
INSERT INTO zadania (id, zadanie, zrobione, data_pub)
VALUES (null, 'Wyrzucić śmieci', 0, datetime(current_timestamp));
INSERT into zadania (id, zadanie, zrobione, data_pub)
VALUES (null, 'Nakarmić psa', 0, datetime(current_timestamp));

W terminalu wydajemy teraz następujące polecenia:

Terminal nr

~/todo$ sqlite3 db.sqlite < schema.sql
~/todo$ sqlite3 db.sqlite
sqlite> select * from zadania;
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 zadania. Interpreter zamykamy poleceniem .quit.

7.2.2. Połączenie z bazą ¶

Bazę danych już mamy, teraz pora napisać funkcje umożiwiające łączenie się z nią z poziomu naszej aplikacji. W pliku todo.py dodajemy importy:

Plik todo.py Kod nr

from flask import Flask, g
from flask import render_template
import os
import sqlite3

– następnie wstawiamy kod:

Plik todo.py Kod nr

app.config.update(dict(
    SECRET_KEY='bardzosekretnawartosc',
    DATABASE=os.path.join(app.root_path, 'db.sqlite'),
    SITE_NAME='Moje zadania'
))


def get_db():
    """Funkcja tworząca połączenie z bazą danych"""
    if not g.get('db'):  # jeżeli brak połączenia, to je tworzymy
        con = sqlite3.connect(app.config['DATABASE'])
        con.row_factory = sqlite3.Row
        g.db = con  # zapisujemy połączenie w kontekście aplikacji
    return g.db  # zwracamy połączenie z bazą


@app.teardown_appcontext
def close_db(error):
    """Zamykanie połączenia z bazą"""
    if g.get('db'):
        g.db.close()

Konfiguracja aplikacji przechowywana jest w obiekcie config, który jest podklasą słownika i w naszym przypadku zawiera:

SECRET_KEY – sekretna wartość wykorzystywana do obsługi sesji;
DATABSE – ścieżka do pliku bazy;
SITE_NAME – nazwa aplikacji.

Funkcja get_db():

if not g.get('db'): – sprawdzamy, czy obiekt g aplikacji, służący do przechowywania danych kontekstowych, nie zawiera właściwości db, czyli połączenia z bazą;
dalsza część kodu tworzy połączenie w zmiennej con i zapisuje w kontekście (obiekcie g) aplikacji.

Funkcja close_db():

@app.teardown_appcontext – dekorator, który rejestruje funkcję zamykającą połączenie z bazą do wykonania po zakończeniu obsługi żądania;
g.db.close() – zamknięcie połączenia z bazą.

7.2.3. Lista zadań ¶

Dodajemy widok, czyli funkcję zadania() powiązaną z adresem URL /zadania:

Plik todo.py Kod nr

@app.route('/zadania')
def zadania():
    db = get_db()
    kursor = db.execute('SELECT * FROM zadania ORDER BY data_pub DESC;')
    zadania = kursor.fetchall()
    return render_template('zadania_lista.html', zadania=zadania)

db = get_db() – utworzenie obiektu bazy danych ();
db.execute('select...') – wykonanie podanego zapytania SQL, czyli pobranie wszystkich zadań z bazy;
fetchall() – metoda zwraca pobrane dane w formie listy;

Szablon tworzymy w pliku todo/templates/zadania_lista.html:

Plik zadania_lista.html. Kod nr

<!-- todo/templates/zadania_lista.html -->
<html>
  <head>
  <!-- nazwa aplikacji pobrana z ustawień -->
    <title>{{ config.SITE_NAME }}</title>
  </head>
  <body>
    <h1>{{ config.SITE_NAME }}:</h1>

    <ol>
      <!-- wypisujemy kolejno wszystkie zadania -->
      {% for zadanie in zadania %}
        <li>{{ zadanie.zadanie }} – <em>{{ zadanie.data_pub }}</em></li>
      {% endfor %}
    </ol>

  </body>
</html>

{% %} – tagi używane w szablonach do instrukcji sterujących;
{{ }} – tagi używane do wstawiania wartości zmiennych;
{{ config.SITE_NAME }} – w szablonie mamy dostęp do obiektu ustawień config;
{% for zadanie in zadania %} – pętla odczytująca zadania z listy przekazanej do szablonu w zmiennej zadania;

7.2.3.1. Odnośniki¶

W szablonie index.html warto wstawić link do strony z listą zadań, czyli kod:

Kod nr

<p><a href="{{ url_for('zadania') }}">Lista zadań</a></p>

url_for('zadania') – funkcja dostępna w szablonach, generuje adres powiązany z podaną nazwą funkcji.

Ćwiczenie

Wstaw link do strony głównej w szablonie listy zadań. Po odwiedzeniu strony 127.0.0.1:5000/zadania powinniśmy zobaczyć listę zadań.

7.2.4. Dodawanie zadań ¶

Wpisując adres w polu adresu przeglądarki, wysyłamy do serwera żądanie typu GET, które obsługujemy zwracając klientowi odpowiednie dane (listę zadań). Dodawanie zadań wymaga przesłania danych z formularza na serwer – są to żądania typu POST, które modyfikują dane aplikacji.

Na początku pliku todo.py trzeba, jak zwykle, zaimportować wymagane funkcje:

Kod nr

from datetime import datetime
from flask import flash, redirect, url_for, request

Następnie rozbudujemy widok listy zadań:

Kod nr

@app.route('/zadania', methods=['GET', 'POST'])
def zadania():
    error = None
    if request.method == 'POST':
        zadanie = request.form['zadanie'].strip()
        if len(zadanie) > 0:
            zrobione = '0'
            data_pub = datetime.now()
            db = get_db()
            db.execute('INSERT INTO zadania VALUES (?, ?, ?, ?);',
                       [None, zadanie, zrobione, data_pub])
            db.commit()
            flash('Dodano nowe zadanie.')
            return redirect(url_for('zadania'))

        error = 'Nie możesz dodać pustego zadania!'  # komunikat o błędzie

    db = get_db()
    kursor = db.execute('SELECT * FROM zadania ORDER BY data_pub DESC;')
    zadania = kursor.fetchall()
    return render_template('zadania_lista.html', zadania=zadania, error=error)

methods=['GET', 'POST'] – w liście wymieniamy typy obsługiwanych żądań;
request.form['zadanie'] – dane przesyłane w żądaniach POST odczytujemy ze słownika form;
db.execute(...) – wykonujemy zapytanie, które dodaje nowe zadanie, w miejsce symboli zastępczych (?, ?, ?, ?) wstawione zostaną dane z listy podanej jako drugi parametr;
flash() – funkcja pozwala przygotować komunikaty dla użytkownika, które można będzie wstawić w szablonie;
redirect(url_for('zadanie')) – przekierowanie użytkownika na adres związany z podanym widokiem – żądanie typu GET.

Warto zauważyć, że do szablonu przekazujemy dodatkową zmienną error.

W szablonie zadania_lista.html po znaczniku <h1> umieszczamy kod:

Plik zadania_lista.html. Kod nr

    <!-- formularz dodawania zadania -->
    <form class="add-form" method="POST" action="{{ url_for('zadania') }}">
      <input name="zadanie" value=""/>
      <button type="submit">Dodaj zadanie</button>
    </form>

    <!-- informacje o sukcesie lub błędzie -->
    <p>
      {% if error %}
        <strong class="error">Błąd: {{ error }}</strong>
      {% endif %}

      {% for message in get_flashed_messages() %}
        <strong class="success">{{ message }}</strong>
      {% endfor %}
    </p>

{% if error %} – sprawdzamy, czy zmienna error cokolwiek zawiera;
{% for message in get_flashed_messages() %} – pętla odczytująca komunikaty;

7.2.5. Style CSS ¶

O wyglądzie aplikacji decydują arkusze stylów CSS. Umieszczamy je w podkatalogu static folderu aplikacji. Tworzymy więc plik ~/todo/static/style.css z przykładowymi definicjami:

Plik style.css. Kod nr

/* todo/static/style.css */

body { margin-top: 20px; background-color: lightgreen; }
h1, p { margin-left: 20px; }
.add-form { margin-left: 20px; }
ol { text-align: left; }
em { font-size: 11px; margin-left: 10px; }
form { display: inline-block; margin-bottom: 0;}
input[name="zadanie"] { width: 300px; }
input[name="zadanie"]:focus {
  border-color: blue;
  border-radius: 5px;
}
li { margin-bottom: 5px; }
button {
  padding: 3px 5px;
  cursor: pointer;
  color: blue;
  font-size: 12px/1.5em;
  background: white;
  border: 1px solid grey;
}
.error { color: red; }
.success { color: green; }
.done { text-decoration: line-through; }

Arkusz CSS dołączamy do pliku zadania_lista.html w sekcji head:

Plik zadania_lista.html. Kod nr

  <head>
  <!-- nazwa aplikacji pobrana z ustawień -->
    <title>{{ config.SITE_NAME }}</title>
  <!-- dołączamy arkusz CSS -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
  </head>

Ćwiczenie

Dołącz arkusz stylów CSS również do szablonu index.html. Odśwież aplikację w przeglądarce.

7.2.6. Zadania wykonane ¶

Do każdego zadania dodamy formularz, którego wysłanie będzie oznaczało, że wykonaliśmy dane zadanie, czyli zmienimy atrybut zrobione wpisu z 0 (niewykonane) na 1 (wykonane). Odpowiednie żądanie typu POST obsłuży nowy widok w pliku todo.py, który wstawiamy przed kodem uruchamiającym aplikację (if __name__ == '__main__':):

Plik todo.py Kod nr

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

zadanie_id = request.form['id'] – odczytujemy przesłany identyfikator zadania;
db.execute('UPDATE zadania SET zrobione=1 WHERE id=?', [zadanie_id]) – wykonujemy zapytanie aktualizujące staus zadania.

W szablonie zadania_lista.html modyfikujemy fragment wyświetlający listę zadań i dodajemy formularz:

Plik zadania_lista.html. Kod nr

    <ol>
      <!-- wypisujemy kolejno wszystkie zdania -->
      {% for zadanie in zadania %}
        <li>
          <!-- wyróżnienie zadań zakończonych -->
          {% if zadanie.zrobione %}
            <span class="done">{{ zadanie.zadanie }} – <em>{{ zadanie.data_pub }}</em></span>
          {% else %}
            {{ zadanie.zadanie }} – <em>{{ zadanie.data_pub }}</em>
          {% endif %}

          <!-- formularz zmiany statusu zadania -->
          {% if not zadanie.zrobione %}
            <form method="POST" action="{{ url_for('zrobione') }}">
              <!-- wysyłamy jedynie informacje o id zadania -->
              <input type="hidden" name="id" value="{{ zadanie.id }}"/>
              <button type="submit">Wykonane</button>
            </form>
          {% endif %}
        </li>
      {% endfor %}
    </ol>