Na tomto příkladu si vyzkoušíme použít knihovnu Flask na vytvoření jednoduché webové aplikace.
Předpokládáme základní znalost Pythonu. Měli byste mít počítač s nainstalovaným interpretem jazyka Python ve verzi aspoň 3.6. Pro začátek si také vytvořte nové virtuální prostředí.
Dále se vám bude hodit základní přehled o tom, jak funguje internet, co je to URL a podobné drobnosti. Pokud si nejste jistí, začněte tímto shrnutím pro začátečníky.
Pro tento příklad si vystačíme s jedním zdrojovým souborem pro Python, ale bude potřebovat i několik dalších souborů se šablonami.
Zkopírujte si tyto soubory do libovolného adresáře. Šablona musí být v
podadresáři templates/. Zkuste program spustit pomocí flask run
(nezapomeňte nejdřív nastavit proměnnou FLASK_APP=kalk.py).
Výsledkem by měl být jednoduchý formulář, kam můžeme zadat dvě čísla a potom vybrat jednu ze čtyř operací.
# kalk.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("kalkulacka.html")
# templates/kalkulacka.html
<html>
<head>
<title>Kalkulačka</title>
</head>
<body>
<h1>Kalkulačka</h1>
<form method="POST" action="{{ url_for("index") }}">
<label for="prvni">První číslo</label>
<input type="text" name="prvni">
<label for="druhe">Druhé číslo</label>
<input type="text" name="druhe">
<input type="submit" name="operace" value="plus">
<input type="submit" name="operace" value="minus">
<input type="submit" name="operace" value="krat">
<input type="submit" name="operace" value="deleno">
</form>
</body>
</html>
Pokud teď vybereme některou z operací, dostaneme chybu. Naše kalkulačka zatím
nevím, že by měla zpracovávat i požadavky metodou POST (která se používá pro
odeslání formuláře). Napravíme to přidáním argumentu do dekorátor, kde
nastavíme methods na seznam s hodnotami GET a POST.
Teď už formulář umíme přijmout, ale zatím se kalkulačka pořád chová, jako by
uživatel chtěl jenom zobrazit formulář. Která metoda byla použitá,
poznáme z atributu method objektu request, který potřeba nejdříve
naimportovat.
Přidejte tento import, a upravte funkci, tak, aby při metodě POST vypsala
nějakou informativní hlášku. Také si můžeme vypsat atribut form, který
obsahuje data z formuláře.
request.form se chová jako slovník, ze kterého můžeme vytáhnout hodnoty. Naše
šablona definuje klíče prvni, druhe a operace. První dva jsou čísla,
poslední je jméno požadované operace. Všechna data ale dostaneme jako řetězce.
Spočítejte výsledek požadované operace a zobrazte ho v prohlížeči. Návratová hodnota z funkce musí být řetězec nebo komplikovanější objekt.
Teď už bychom měli mít téměř funkční kalkulačku.
Dlouhá řada podmínek sice funguje, ale je to docela ukecané řešení. Můžeme ho
zkusit zkrátit. Python nemá konstrukci typu switch nebo case. Můžeme ale
trochu podvádět a použít slovník. Klíči budou názvy operací, hodnotami funkce,
které danou operaci provádí.
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "GET":
return render_template("kalkulacka.html")
elif request.method == "POST":
vsechny_operace = {
"plus": lambda x, y: x + y,
"minus": lambda x, y: x - y,
"krat": lambda x, y: x * y,
"deleno": lambda x, y: x / y,
}
prvni = int(request.form["prvni"])
druhe = int(request.form["druhe"])
operace = request.form["operace"]
fce = vsechny_operace[operace]
vysledek = fce(prvni, druhe)
return str(vysledek)
Pro další pokračování příkladu můžete použít libovolnou variantu.
Jako další krok by bylo fajn zobrazit výsledek pomocí šablony v pěkně čitelném formátu.
Zkopírujte si šablonu kalkulacka.html do souboru vysledek.html a upravte ho
tak, aby zobrazoval obě zpracovaná čísla, použitou operaci a výsledek.
Další drobná potíž s naší kalkulačkou je v tom, že se těžko vrací na zadání dalšího výpočtu ze stránky s výsledky. To můžeme opravit přidáním odkazu na stránku s výsledkem. Přidejte ještě jeden odstavec, ve kterém bude odkaz na formulář.
Místo zadávání adresy natvrdo jako "/" je lepší použít funkci
url_for("index"), která bude fungovat i tehdy, až se rozhodneme adresu
změnit. Potom nám bude stačit změnit dekorátor na jednom místě.
Zkuste si, co se stane při zadání vstupů, které nejsou čísla. Měli bychom dostat
dlouhou chybovou stránku, která obsahuje příliš mnoho detailů, které určitě
nechceme ukazovat uživatelům. Upravte program tak, aby zachytil výjimku, a
zavolal funkci abort s argumentem 400. Tím prohlížeči (nebo jinému
programu) řekneme, že zadal nesprávná data.
Teď dostaneme kratší chybovou stránku. Co kdybychom ji ale chtěli změnit?
Můžeme na to použít nový dekorátor: errorhandler. Takto označená funkce bude
zavolaná vždycky, když dojde dojde k zavolání abort(400). Stejně dobře bychom
ale mohli ošetřit jakoukoli jinou výjimku. Z této funkce můžeme třeba vrátit
hezky naformátovanou chybu.
@app.errorhandler(400)
def spatny_pozadavek(chyba):
return "Tohle nejde počítat", 400
Zkuste si přidat další chybovou stránku pro chybu 404: vyzkoušet ji můžete zadáním nesmyslné adresy do prohlížeče. Třeba http://127.0.0.1:5000/neexistuju.
Momentálně naše aplikace používá dvě šablony. Obě mají velmi podobnou strukturu, liší se pouze několika málo detaily uvnitř.
Této duplicity by bylo dobré se zbavit.
K tomu můžeme použít systém založený na dědičnosti šablon.
Vytvoříme si novou šablonu, která obsahuje společné části.
# templates/base.html
<!DOCTYPE html>
<html>
<head>
<title>Kalkulačka</title>
</head>
<body>
<h1>{% block titulek %}Kalkulačka{% endblock titulek %}</h1>
{% block obsah %}
{% endblock %}
</body>
</html>
Další šablony potom budou definovat blok pojmenovaný obsah. Ten se vloží na
příslušné místo. Stejně tak můžeme nadefinovat titulek. Pro ten ale máme
výchozí hodnotu.
# templates/kalkulacka.html
{% extends "base.html" %}
{% block titulek %}
Moje kalkulačka
{% endblock %}
{% block obsah %}
<form method="POST" action="{{ url_for("index") }}">
<label for="prvni">První číslo</label>
<input type="text" name="prvni">
<label for="druhe">Druhé číslo</label>
<input type="text" name="druhe">
<input type="submit" name="operace" value="plus">
<input type="submit" name="operace" value="minus">
<input type="submit" name="operace" value="krat">
<input type="submit" name="operace" value="deleno">
</form>
{% endblock %}
Na začátku nadefinujeme, že tato šablona rozšiřuje šablonu jménem base. Potom
nadefinujeme vlastní titulek a nakonec samotný blok s obsahem stránky.
Zkuste podle stejného vzoru zjednodušit šablonu pro výsledek.
{
"data": {
"sessionMaterial": {
"id": "session-material:2019/brno-jaro-knihovny:flask:1",
"title": "Webová kalkulačka",
"html": "\n \n \n\n <h1>Webová kalkulačka</h1>\n<h2>Co je cílem tohoto cvičení?</h2>\n<p>Na tomto příkladu si vyzkoušíme použít knihovnu Flask na vytvoření jednoduché\nwebové aplikace.</p>\n<h2>Předpoklady</h2>\n<p>Předpokládáme základní znalost Pythonu. Měli byste mít počítač s nainstalovaným\ninterpretem jazyka Python ve verzi aspoň 3.6. Pro začátek si také vytvořte nové\nvirtuální prostředí.</p>\n<p>Dále se vám bude hodit základní přehled o tom, jak funguje internet, co je to\nURL a podobné drobnosti. Pokud si nejste jistí, začněte <a href=\"/2019/brno-jaro-knihovny/fast-track/http/\">tímto shrnutím pro\nzačátečníky</a>.</p>\n<h2>Krok 0 – kostra programu</h2>\n<p>Pro tento příklad si vystačíme s jedním zdrojovým souborem pro Python, ale bude\npotřebovat i několik dalších souborů se šablonami.</p>\n<p>Zkopírujte si tyto soubory do libovolného adresáře. Šablona musí být v\npodadresáři <code>templates/</code>. Zkuste program spustit pomocí <code>flask run</code>\n(nezapomeňte nejdřív nastavit proměnnou <code>FLASK_APP=kalk.py</code>).</p>\n<p>Výsledkem by měl být jednoduchý formulář, kam můžeme zadat dvě čísla a potom\nvybrat jednu ze čtyř operací.</p>\n<div class=\"highlight\"><pre><span></span><span class=\"c1\"># kalk.py</span>\n<span class=\"kn\">from</span> <span class=\"nn\">flask</span> <span class=\"kn\">import</span> <span class=\"n\">Flask</span><span class=\"p\">,</span> <span class=\"n\">render_template</span>\n\n\n<span class=\"n\">app</span> <span class=\"o\">=</span> <span class=\"n\">Flask</span><span class=\"p\">(</span><span class=\"vm\">__name__</span><span class=\"p\">)</span>\n\n\n<span class=\"nd\">@app.route</span><span class=\"p\">(</span><span class=\"s2\">"/"</span><span class=\"p\">)</span>\n<span class=\"k\">def</span> <span class=\"nf\">index</span><span class=\"p\">():</span>\n <span class=\"k\">return</span> <span class=\"n\">render_template</span><span class=\"p\">(</span><span class=\"s2\">"kalkulacka.html"</span><span class=\"p\">)</span>\n</pre></div><div class=\"highlight\"><pre><span></span># templates/kalkulacka.html\n<span class=\"p\"><</span><span class=\"nt\">html</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">head</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">title</span><span class=\"p\">></span>Kalkulačka<span class=\"p\"></</span><span class=\"nt\">title</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">head</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">body</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">h1</span><span class=\"p\">></span>Kalkulačka<span class=\"p\"></</span><span class=\"nt\">h1</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">form</span> <span class=\"na\">method</span><span class=\"o\">=</span><span class=\"s\">"POST"</span> <span class=\"na\">action</span><span class=\"o\">=</span><span class=\"s\">"</span><span class=\"cp\">{{</span> <span class=\"nv\">url_for</span><span class=\"o\">(</span><span class=\"s2\">"index"</span><span class=\"o\">)</span> <span class=\"cp\">}}</span><span class=\"s\">"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">"prvni"</span><span class=\"p\">></span>První číslo<span class=\"p\"></</span><span class=\"nt\">label</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"text"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"prvni"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">"druhe"</span><span class=\"p\">></span>Druhé číslo<span class=\"p\"></</span><span class=\"nt\">label</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"text"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"druhe"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"submit"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"operace"</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">"plus"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"submit"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"operace"</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">"minus"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"submit"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"operace"</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">"krat"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"submit"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"operace"</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">"deleno"</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">form</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">body</span><span class=\"p\">></span>\n<span class=\"p\"></</span><span class=\"nt\">html</span><span class=\"p\">></span>\n</pre></div><h2>Zpracování formuláře</h2>\n<p>Pokud teď vybereme některou z operací, dostaneme chybu. Naše kalkulačka zatím\nnevím, že by měla zpracovávat i požadavky metodou <code>POST</code> (která se používá pro\nodeslání formuláře). Napravíme to přidáním argumentu do dekorátor, kde\nnastavíme <code>methods</code> na seznam s hodnotami <code>GET</code> a <code>POST</code>.</p>\n<div class=\"solution\" id=\"solution-0\">\n <h3>Řešení</h3>\n <div class=\"solution-cover\">\n <a href=\"/2019/brno-jaro-knihovny/beginners/webova-kalkulacka/index/solutions/0/\"><span class=\"link-text\">Ukázat řešení</span></a>\n </div>\n <div class=\"solution-body\" aria-hidden=\"true\">\n <div class=\"highlight\"><pre><span></span><span class=\"nd\">@app.route</span><span class=\"p\">(</span><span class=\"s2\">"/"</span><span class=\"p\">,</span> <span class=\"n\">methods</span><span class=\"o\">=</span><span class=\"p\">[</span><span class=\"s2\">"GET"</span><span class=\"p\">,</span> <span class=\"s2\">"POST"</span><span class=\"p\">])</span>\n<span class=\"k\">def</span> <span class=\"nf\">index</span><span class=\"p\">():</span>\n <span class=\"err\">…</span>\n</pre></div>\n </div>\n</div><p>Teď už formulář umíme přijmout, ale zatím se kalkulačka pořád chová, jako by\nuživatel chtěl jenom zobrazit formulář. Která metoda byla použitá,\npoznáme z atributu <code>method</code> objektu <code>request</code>, který potřeba nejdříve\nnaimportovat.</p>\n<p>Přidejte tento import, a upravte funkci, tak, aby při metodě <code>POST</code> vypsala\nnějakou informativní hlášku. Také si můžeme vypsat atribut <code>form</code>, který\nobsahuje data z formuláře.</p>\n<div class=\"solution\" id=\"solution-1\">\n <h3>Řešení</h3>\n <div class=\"solution-cover\">\n <a href=\"/2019/brno-jaro-knihovny/beginners/webova-kalkulacka/index/solutions/1/\"><span class=\"link-text\">Ukázat řešení</span></a>\n </div>\n <div class=\"solution-body\" aria-hidden=\"true\">\n <div class=\"highlight\"><pre><span></span><span class=\"nd\">@app.route</span><span class=\"p\">(</span><span class=\"s2\">"/"</span><span class=\"p\">,</span> <span class=\"n\">methods</span><span class=\"o\">=</span><span class=\"p\">[</span><span class=\"s2\">"GET"</span><span class=\"p\">,</span> <span class=\"s2\">"POST"</span><span class=\"p\">])</span>\n<span class=\"k\">def</span> <span class=\"nf\">index</span><span class=\"p\">():</span>\n <span class=\"k\">if</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">method</span> <span class=\"o\">==</span> <span class=\"s2\">"GET"</span><span class=\"p\">:</span>\n <span class=\"k\">return</span> <span class=\"n\">render_template</span><span class=\"p\">(</span><span class=\"s2\">"kalkulacka.html"</span><span class=\"p\">)</span>\n <span class=\"k\">elif</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">method</span> <span class=\"o\">==</span> <span class=\"s2\">"POST"</span><span class=\"p\">:</span>\n <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"s2\">"Dostali jsme data"</span>\n</pre></div>\n </div>\n</div><p><code>request.form</code> se chová jako slovník, ze kterého můžeme vytáhnout hodnoty. Naše\nšablona definuje klíče <code>prvni</code>, <code>druhe</code> a <code>operace</code>. První dva jsou čísla,\nposlední je jméno požadované operace. Všechna data ale dostaneme jako řetězce.</p>\n<p>Spočítejte výsledek požadované operace a zobrazte ho v prohlížeči. Návratová\nhodnota z funkce musí být řetězec nebo komplikovanější objekt.</p>\n<div class=\"solution\" id=\"solution-2\">\n <h3>Řešení</h3>\n <div class=\"solution-cover\">\n <a href=\"/2019/brno-jaro-knihovny/beginners/webova-kalkulacka/index/solutions/2/\"><span class=\"link-text\">Ukázat řešení</span></a>\n </div>\n <div class=\"solution-body\" aria-hidden=\"true\">\n <div class=\"highlight\"><pre><span></span><span class=\"nd\">@app.route</span><span class=\"p\">(</span><span class=\"s2\">"/"</span><span class=\"p\">,</span> <span class=\"n\">methods</span><span class=\"o\">=</span><span class=\"p\">[</span><span class=\"s2\">"GET"</span><span class=\"p\">,</span> <span class=\"s2\">"POST"</span><span class=\"p\">])</span>\n<span class=\"k\">def</span> <span class=\"nf\">index</span><span class=\"p\">():</span>\n <span class=\"k\">if</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">method</span> <span class=\"o\">==</span> <span class=\"s2\">"GET"</span><span class=\"p\">:</span>\n <span class=\"k\">return</span> <span class=\"n\">render_template</span><span class=\"p\">(</span><span class=\"s2\">"kalkulacka.html"</span><span class=\"p\">)</span>\n <span class=\"k\">elif</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">method</span> <span class=\"o\">==</span> <span class=\"s2\">"POST"</span><span class=\"p\">:</span>\n <span class=\"n\">prvni</span> <span class=\"o\">=</span> <span class=\"nb\">int</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"prvni"</span><span class=\"p\">])</span>\n <span class=\"n\">druhe</span> <span class=\"o\">=</span> <span class=\"nb\">int</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"druhe"</span><span class=\"p\">])</span>\n <span class=\"n\">operace</span> <span class=\"o\">=</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"operace"</span><span class=\"p\">]</span>\n\n <span class=\"k\">if</span> <span class=\"n\">operace</span> <span class=\"o\">==</span> <span class=\"s2\">"plus"</span><span class=\"p\">:</span>\n <span class=\"n\">vysledek</span> <span class=\"o\">=</span> <span class=\"n\">prvni</span> <span class=\"o\">+</span> <span class=\"n\">druhe</span>\n <span class=\"k\">elif</span> <span class=\"n\">operace</span> <span class=\"o\">==</span> <span class=\"s2\">"minus"</span><span class=\"p\">:</span>\n <span class=\"n\">vysledek</span> <span class=\"o\">=</span> <span class=\"n\">prvni</span> <span class=\"o\">-</span> <span class=\"n\">druhe</span>\n <span class=\"o\">...</span>\n\n <span class=\"k\">return</span> <span class=\"nb\">str</span><span class=\"p\">(</span><span class=\"n\">vysledek</span><span class=\"p\">)</span>\n</pre></div>\n </div>\n</div><p>Teď už bychom měli mít téměř funkční kalkulačku.</p>\n<p>Dlouhá řada podmínek sice funguje, ale je to docela ukecané řešení. Můžeme ho\nzkusit zkrátit. Python nemá konstrukci typu <code>switch</code> nebo <code>case</code>. Můžeme ale\ntrochu podvádět a použít slovník. Klíči budou názvy operací, hodnotami funkce,\nkteré danou operaci provádí.</p>\n<div class=\"highlight\"><pre><span></span><span class=\"nd\">@app.route</span><span class=\"p\">(</span><span class=\"s2\">"/"</span><span class=\"p\">,</span> <span class=\"n\">methods</span><span class=\"o\">=</span><span class=\"p\">[</span><span class=\"s2\">"GET"</span><span class=\"p\">,</span> <span class=\"s2\">"POST"</span><span class=\"p\">])</span>\n<span class=\"k\">def</span> <span class=\"nf\">index</span><span class=\"p\">():</span>\n <span class=\"k\">if</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">method</span> <span class=\"o\">==</span> <span class=\"s2\">"GET"</span><span class=\"p\">:</span>\n <span class=\"k\">return</span> <span class=\"n\">render_template</span><span class=\"p\">(</span><span class=\"s2\">"kalkulacka.html"</span><span class=\"p\">)</span>\n <span class=\"k\">elif</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">method</span> <span class=\"o\">==</span> <span class=\"s2\">"POST"</span><span class=\"p\">:</span>\n <span class=\"n\">vsechny_operace</span> <span class=\"o\">=</span> <span class=\"p\">{</span>\n <span class=\"s2\">"plus"</span><span class=\"p\">:</span> <span class=\"k\">lambda</span> <span class=\"n\">x</span><span class=\"p\">,</span> <span class=\"n\">y</span><span class=\"p\">:</span> <span class=\"n\">x</span> <span class=\"o\">+</span> <span class=\"n\">y</span><span class=\"p\">,</span>\n <span class=\"s2\">"minus"</span><span class=\"p\">:</span> <span class=\"k\">lambda</span> <span class=\"n\">x</span><span class=\"p\">,</span> <span class=\"n\">y</span><span class=\"p\">:</span> <span class=\"n\">x</span> <span class=\"o\">-</span> <span class=\"n\">y</span><span class=\"p\">,</span>\n <span class=\"s2\">"krat"</span><span class=\"p\">:</span> <span class=\"k\">lambda</span> <span class=\"n\">x</span><span class=\"p\">,</span> <span class=\"n\">y</span><span class=\"p\">:</span> <span class=\"n\">x</span> <span class=\"o\">*</span> <span class=\"n\">y</span><span class=\"p\">,</span>\n <span class=\"s2\">"deleno"</span><span class=\"p\">:</span> <span class=\"k\">lambda</span> <span class=\"n\">x</span><span class=\"p\">,</span> <span class=\"n\">y</span><span class=\"p\">:</span> <span class=\"n\">x</span> <span class=\"o\">/</span> <span class=\"n\">y</span><span class=\"p\">,</span>\n <span class=\"p\">}</span>\n <span class=\"n\">prvni</span> <span class=\"o\">=</span> <span class=\"nb\">int</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"prvni"</span><span class=\"p\">])</span>\n <span class=\"n\">druhe</span> <span class=\"o\">=</span> <span class=\"nb\">int</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"druhe"</span><span class=\"p\">])</span>\n <span class=\"n\">operace</span> <span class=\"o\">=</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"operace"</span><span class=\"p\">]</span>\n\n <span class=\"n\">fce</span> <span class=\"o\">=</span> <span class=\"n\">vsechny_operace</span><span class=\"p\">[</span><span class=\"n\">operace</span><span class=\"p\">]</span>\n <span class=\"n\">vysledek</span> <span class=\"o\">=</span> <span class=\"n\">fce</span><span class=\"p\">(</span><span class=\"n\">prvni</span><span class=\"p\">,</span> <span class=\"n\">druhe</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"nb\">str</span><span class=\"p\">(</span><span class=\"n\">vysledek</span><span class=\"p\">)</span>\n</pre></div><p>Pro další pokračování příkladu můžete použít libovolnou variantu.</p>\n<p>Jako další krok by bylo fajn zobrazit výsledek pomocí šablony v pěkně čitelném\nformátu.</p>\n<p>Zkopírujte si šablonu <code>kalkulacka.html</code> do souboru <code>vysledek.html</code> a upravte ho\ntak, aby zobrazoval obě zpracovaná čísla, použitou operaci a výsledek.</p>\n<div class=\"solution\" id=\"solution-3\">\n <h3>Řešení</h3>\n <div class=\"solution-cover\">\n <a href=\"/2019/brno-jaro-knihovny/beginners/webova-kalkulacka/index/solutions/3/\"><span class=\"link-text\">Ukázat řešení</span></a>\n </div>\n <div class=\"solution-body\" aria-hidden=\"true\">\n <div class=\"highlight\"><pre><span></span><span class=\"c1\"># kalk.py</span>\n<span class=\"nd\">@app.route</span><span class=\"p\">(</span><span class=\"s2\">"/"</span><span class=\"p\">,</span> <span class=\"n\">methods</span><span class=\"o\">=</span><span class=\"p\">[</span><span class=\"s2\">"GET"</span><span class=\"p\">,</span> <span class=\"s2\">"POST"</span><span class=\"p\">])</span>\n<span class=\"k\">def</span> <span class=\"nf\">index</span><span class=\"p\">():</span>\n <span class=\"n\">vsechny_operace</span> <span class=\"o\">=</span> <span class=\"p\">{</span>\n <span class=\"s2\">"plus"</span><span class=\"p\">:</span> <span class=\"p\">(</span><span class=\"s2\">"+"</span><span class=\"p\">,</span> <span class=\"k\">lambda</span> <span class=\"n\">x</span><span class=\"p\">,</span> <span class=\"n\">y</span><span class=\"p\">:</span> <span class=\"n\">x</span> <span class=\"o\">+</span> <span class=\"n\">y</span><span class=\"p\">),</span>\n <span class=\"s2\">"minus"</span><span class=\"p\">:</span> <span class=\"p\">(</span><span class=\"s2\">"-"</span><span class=\"p\">,</span> <span class=\"k\">lambda</span> <span class=\"n\">x</span><span class=\"p\">,</span> <span class=\"n\">y</span><span class=\"p\">:</span> <span class=\"n\">x</span> <span class=\"o\">-</span> <span class=\"n\">y</span><span class=\"p\">),</span>\n <span class=\"s2\">"krat"</span><span class=\"p\">:</span> <span class=\"p\">(</span><span class=\"s2\">"×"</span><span class=\"p\">,</span> <span class=\"k\">lambda</span> <span class=\"n\">x</span><span class=\"p\">,</span> <span class=\"n\">y</span><span class=\"p\">:</span> <span class=\"n\">x</span> <span class=\"o\">*</span> <span class=\"n\">y</span><span class=\"p\">),</span>\n <span class=\"s2\">"deleno"</span><span class=\"p\">:</span> <span class=\"p\">(</span><span class=\"s2\">"÷"</span><span class=\"p\">,</span> <span class=\"k\">lambda</span> <span class=\"n\">x</span><span class=\"p\">,</span> <span class=\"n\">y</span><span class=\"p\">:</span> <span class=\"n\">x</span> <span class=\"o\">/</span> <span class=\"n\">y</span><span class=\"p\">),</span>\n <span class=\"p\">}</span>\n <span class=\"n\">prvni</span> <span class=\"o\">=</span> <span class=\"nb\">int</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"prvni"</span><span class=\"p\">])</span>\n <span class=\"n\">druhe</span> <span class=\"o\">=</span> <span class=\"nb\">int</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"druhe"</span><span class=\"p\">])</span>\n <span class=\"n\">operace</span> <span class=\"o\">=</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"operace"</span><span class=\"p\">]</span>\n <span class=\"n\">op</span><span class=\"p\">,</span> <span class=\"n\">fce</span> <span class=\"o\">=</span> <span class=\"n\">vsechny_operace</span><span class=\"p\">[</span><span class=\"n\">operace</span><span class=\"p\">]</span>\n <span class=\"n\">vysledek</span> <span class=\"o\">=</span> <span class=\"n\">fce</span><span class=\"p\">(</span><span class=\"n\">prvni</span><span class=\"p\">,</span> <span class=\"n\">druhe</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"nb\">str</span><span class=\"p\">(</span><span class=\"n\">vysledek</span><span class=\"p\">)</span>\n</pre></div><div class=\"highlight\"><pre><span></span># templates/vysledek.html\n<span class=\"p\"><</span><span class=\"nt\">html</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">head</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">title</span><span class=\"p\">></span>Kalkulačka<span class=\"p\"></</span><span class=\"nt\">title</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">head</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">body</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">h1</span><span class=\"p\">></span>Kalkulačka<span class=\"p\"></</span><span class=\"nt\">h1</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">p</span><span class=\"p\">></span>\n <span class=\"cp\">{{</span> <span class=\"nv\">prvni</span> <span class=\"cp\">}}</span> <span class=\"cp\">{{</span> <span class=\"nv\">symbol</span> <span class=\"cp\">}}</span> <span class=\"cp\">{{</span> <span class=\"nv\">druhe</span> <span class=\"cp\">}}</span> = <span class=\"cp\">{{</span> <span class=\"nv\">vysledek</span> <span class=\"cp\">}}</span>\n <span class=\"p\"></</span><span class=\"nt\">p</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">body</span><span class=\"p\">></span>\n<span class=\"p\"></</span><span class=\"nt\">html</span><span class=\"p\">></span>\n</pre></div>\n </div>\n</div><p>Další drobná potíž s naší kalkulačkou je v tom, že se těžko vrací na zadání\ndalšího výpočtu ze stránky s výsledky. To můžeme opravit přidáním odkazu na\nstránku s výsledkem. Přidejte ještě jeden odstavec, ve kterém bude odkaz na\nformulář.</p>\n<p>Místo zadávání adresy natvrdo jako <code>"/"</code> je lepší použít funkci\n<code>url_for("index")</code>, která bude fungovat i tehdy, až se rozhodneme adresu\nzměnit. Potom nám bude stačit změnit dekorátor na jednom místě.</p>\n<div class=\"solution\" id=\"solution-4\">\n <h3>Řešení</h3>\n <div class=\"solution-cover\">\n <a href=\"/2019/brno-jaro-knihovny/beginners/webova-kalkulacka/index/solutions/4/\"><span class=\"link-text\">Ukázat řešení</span></a>\n </div>\n <div class=\"solution-body\" aria-hidden=\"true\">\n <div class=\"highlight\"><pre><span></span># templates/vysledek.html\n<span class=\"p\"><</span><span class=\"nt\">html</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">head</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">title</span><span class=\"p\">></span>Kalkulačka<span class=\"p\"></</span><span class=\"nt\">title</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">head</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">body</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">h1</span><span class=\"p\">></span>Kalkulačka<span class=\"p\"></</span><span class=\"nt\">h1</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">p</span><span class=\"p\">></span>\n <span class=\"cp\">{{</span> <span class=\"nv\">prvni</span> <span class=\"cp\">}}</span> <span class=\"cp\">{{</span> <span class=\"nv\">symbol</span> <span class=\"cp\">}}</span> <span class=\"cp\">{{</span> <span class=\"nv\">druhe</span> <span class=\"cp\">}}</span> = <span class=\"cp\">{{</span> <span class=\"nv\">vysledek</span> <span class=\"cp\">}}</span>\n <span class=\"p\"></</span><span class=\"nt\">p</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">p</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">a</span> <span class=\"na\">href</span><span class=\"o\">=</span><span class=\"s\">"</span><span class=\"cp\">{{</span> <span class=\"nv\">url_for</span><span class=\"o\">(</span><span class=\"s1\">'index'</span><span class=\"o\">)</span> <span class=\"cp\">}}</span><span class=\"s\">"</span><span class=\"p\">></span>Další výpočet<span class=\"p\"></</span><span class=\"nt\">a</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">p</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">body</span><span class=\"p\">></span>\n<span class=\"p\"></</span><span class=\"nt\">html</span><span class=\"p\">></span>\n</pre></div>\n </div>\n</div><h2>Ošetření chyb</h2>\n<p>Zkuste si, co se stane při zadání vstupů, které nejsou čísla. Měli bychom dostat\ndlouhou chybovou stránku, která obsahuje příliš mnoho detailů, které určitě\nnechceme ukazovat uživatelům. Upravte program tak, aby zachytil výjimku, a\nzavolal funkci <code>abort</code> s argumentem <code>400</code>. Tím prohlížeči (nebo jinému\nprogramu) řekneme, že zadal nesprávná data.</p>\n<div class=\"solution\" id=\"solution-5\">\n <h3>Řešení</h3>\n <div class=\"solution-cover\">\n <a href=\"/2019/brno-jaro-knihovny/beginners/webova-kalkulacka/index/solutions/5/\"><span class=\"link-text\">Ukázat řešení</span></a>\n </div>\n <div class=\"solution-body\" aria-hidden=\"true\">\n <div class=\"highlight\"><pre><span></span> <span class=\"o\">...</span>\n <span class=\"k\">try</span><span class=\"p\">:</span>\n <span class=\"n\">prvni</span> <span class=\"o\">=</span> <span class=\"nb\">int</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"prvni"</span><span class=\"p\">])</span>\n <span class=\"n\">druhe</span> <span class=\"o\">=</span> <span class=\"nb\">int</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"druhe"</span><span class=\"p\">])</span>\n <span class=\"k\">except</span> <span class=\"ne\">ValueError</span><span class=\"p\">:</span>\n <span class=\"n\">abort</span><span class=\"p\">(</span><span class=\"mi\">400</span><span class=\"p\">)</span>\n <span class=\"n\">operace</span> <span class=\"o\">=</span> <span class=\"n\">request</span><span class=\"o\">.</span><span class=\"n\">form</span><span class=\"p\">[</span><span class=\"s2\">"operace"</span><span class=\"p\">]</span>\n <span class=\"o\">...</span>\n</pre></div>\n </div>\n</div><p>Teď dostaneme kratší chybovou stránku. Co kdybychom ji ale chtěli změnit?</p>\n<p>Můžeme na to použít nový dekorátor: <code>errorhandler</code>. Takto označená funkce bude\nzavolaná vždycky, když dojde dojde k zavolání <code>abort(400)</code>. Stejně dobře bychom\nale mohli ošetřit jakoukoli jinou výjimku. Z této funkce můžeme třeba vrátit\nhezky naformátovanou chybu.</p>\n<div class=\"highlight\"><pre><span></span><span class=\"nd\">@app.errorhandler</span><span class=\"p\">(</span><span class=\"mi\">400</span><span class=\"p\">)</span>\n<span class=\"k\">def</span> <span class=\"nf\">spatny_pozadavek</span><span class=\"p\">(</span><span class=\"n\">chyba</span><span class=\"p\">):</span>\n <span class=\"k\">return</span> <span class=\"s2\">"Tohle nejde počítat"</span><span class=\"p\">,</span> <span class=\"mi\">400</span>\n</pre></div><p>Zkuste si přidat další chybovou stránku pro chybu 404: vyzkoušet ji můžete\nzadáním nesmyslné adresy do prohlížeče. Třeba\n<a href=\"http://127.0.0.1:5000/neexistuju\">http://127.0.0.1:5000/neexistuju</a>.</p>\n<h2>Zjednodušení šablon</h2>\n<p>Momentálně naše aplikace používá dvě šablony. Obě mají velmi podobnou\nstrukturu, liší se pouze několika málo detaily uvnitř.</p>\n<p>Této duplicity by bylo dobré se zbavit.</p>\n<p>K tomu můžeme použít systém založený na dědičnosti šablon.</p>\n<p>Vytvoříme si novou šablonu, která obsahuje společné části.</p>\n<div class=\"highlight\"><pre><span></span># templates/base.html\n<span class=\"cp\"><!DOCTYPE html></span>\n<span class=\"p\"><</span><span class=\"nt\">html</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">head</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">title</span><span class=\"p\">></span>Kalkulačka<span class=\"p\"></</span><span class=\"nt\">title</span><span class=\"p\">></span>\n <span class=\"p\"></</span><span class=\"nt\">head</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">body</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">h1</span><span class=\"p\">></span><span class=\"cp\">{%</span> <span class=\"k\">block</span> <span class=\"nv\">titulek</span> <span class=\"cp\">%}</span>Kalkulačka<span class=\"cp\">{%</span> <span class=\"k\">endblock</span> <span class=\"nv\">titulek</span> <span class=\"cp\">%}</span><span class=\"p\"></</span><span class=\"nt\">h1</span><span class=\"p\">></span>\n <span class=\"cp\">{%</span> <span class=\"k\">block</span> <span class=\"nv\">obsah</span> <span class=\"cp\">%}</span>\n <span class=\"cp\">{%</span> <span class=\"k\">endblock</span> <span class=\"cp\">%}</span>\n <span class=\"p\"></</span><span class=\"nt\">body</span><span class=\"p\">></span>\n<span class=\"p\"></</span><span class=\"nt\">html</span><span class=\"p\">></span>\n</pre></div><p>Další šablony potom budou definovat blok pojmenovaný <code>obsah</code>. Ten se vloží na\npříslušné místo. Stejně tak můžeme nadefinovat <code>titulek</code>. Pro ten ale máme\nvýchozí hodnotu.</p>\n<div class=\"highlight\"><pre><span></span># templates/kalkulacka.html\n<span class=\"cp\">{%</span> <span class=\"k\">extends</span> <span class=\"s2\">"base.html"</span> <span class=\"cp\">%}</span>\n\n<span class=\"cp\">{%</span> <span class=\"k\">block</span> <span class=\"nv\">titulek</span> <span class=\"cp\">%}</span>\nMoje kalkulačka\n<span class=\"cp\">{%</span> <span class=\"k\">endblock</span> <span class=\"cp\">%}</span>\n\n<span class=\"cp\">{%</span> <span class=\"k\">block</span> <span class=\"nv\">obsah</span> <span class=\"cp\">%}</span>\n<span class=\"p\"><</span><span class=\"nt\">form</span> <span class=\"na\">method</span><span class=\"o\">=</span><span class=\"s\">"POST"</span> <span class=\"na\">action</span><span class=\"o\">=</span><span class=\"s\">"</span><span class=\"cp\">{{</span> <span class=\"nv\">url_for</span><span class=\"o\">(</span><span class=\"s2\">"index"</span><span class=\"o\">)</span> <span class=\"cp\">}}</span><span class=\"s\">"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">"prvni"</span><span class=\"p\">></span>První číslo<span class=\"p\"></</span><span class=\"nt\">label</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"text"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"prvni"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">label</span> <span class=\"na\">for</span><span class=\"o\">=</span><span class=\"s\">"druhe"</span><span class=\"p\">></span>Druhé číslo<span class=\"p\"></</span><span class=\"nt\">label</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"text"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"druhe"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"submit"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"operace"</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">"plus"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"submit"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"operace"</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">"minus"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"submit"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"operace"</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">"krat"</span><span class=\"p\">></span>\n <span class=\"p\"><</span><span class=\"nt\">input</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">"submit"</span> <span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s\">"operace"</span> <span class=\"na\">value</span><span class=\"o\">=</span><span class=\"s\">"deleno"</span><span class=\"p\">></span>\n<span class=\"p\"></</span><span class=\"nt\">form</span><span class=\"p\">></span>\n<span class=\"cp\">{%</span> <span class=\"k\">endblock</span> <span class=\"cp\">%}</span>\n</pre></div><p>Na začátku nadefinujeme, že tato šablona rozšiřuje šablonu jménem <code>base</code>. Potom\nnadefinujeme vlastní titulek a nakonec samotný blok s obsahem stránky.</p>\n<p>Zkuste podle stejného vzoru zjednodušit šablonu pro výsledek.</p>\n\n\n "
}
}
}