118/312
PSK3-19
| Název školy: | Vyšší odborná škola a Střední průmyslová škola, Božetěchova 3 |
| Autor: | Ing. Marek Nožka |
| Anotace: | web framework Bottle.py |
| Vzdělávací oblast: | Informační a komunikační technologie |
| Předmět: | Počítačové sítě a komunikační technika (PSK) |
| Tematická oblast: | Operační systém Linux/Unix |
| Výsledky vzdělávání: | Žák vytvoří jednoduchou webovou aplikaci pomocí Bottle.py |
| Klíčová slova: | Linux, Unix, Apache, Python, Bottle.py, web framework |
| Druh učebního materiálu: | Online návod pro samostatnou práci |
| Typ vzdělávání: | Střední vzdělávání, 4. ročník, technické lyceum |
| Ověřeno: | VOŠ a SPŠE Olomouc; Třída: 4L |
| Zdroj: | Vlastní poznámky, Vilém Vychodil: Linux Příručka českého uživatele |
Bottle -- příklad
V tomto příkladu se pokusíme vytvořit malou aplikaci umožňující psát jednoduché poznámky.
Obsah:
Databáze
Nejprve je třeba vytvořit v databázovém serveru uživatele (pokud už není
vytvořen) a také databázi, do které budeme ukládat data. Já nazvu uživatele
marek a databázi notes.
-- uživatel
CREATE USER 'marek'@'localhost' IDENTIFIED BY 'tojetajny';
GRANT USAGE ON *.* TO 'marek'@'localhost' IDENTIFIED BY 'tojetajny'
WITH
MAX_QUERIES_PER_HOUR 0
MAX_CONNECTIONS_PER_HOUR 0
MAX_UPDATES_PER_HOUR 0
MAX_USER_CONNECTIONS 0;
-- databáze
CREATE DATABASE IF NOT EXISTS `notes`
CHARACTER SET utf8
COLLATE utf8_general_ci;
GRANT ALL PRIVILEGES ON `notes`.* TO 'marek'@'localhost';`--> stáhnout
Dále vytvoříme v databázi tabulku poznamky, do které budeme ukládat
jednotlivé záznamy. Tabulka bude obsahovat následující sloupce:
id-
Jedinečný identifikátor řádku: Bude typu
INTsAUTO_INCREMENTa nastavíme ho jako primární klíč titulek- Titulek poznámky:
obsah- Samotný obsah poznámky:
CREATE TABLE poznamky (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
titulek VARCHAR(100),
obsah VARCHAR(10000)
);`--> stáhnout
Testovací data
Dále by bylo vhodné vložit do tabulku dva řádky pro účely testování:
INSERT INTO notes.poznamky (`titulek`, `obsah`) VALUES
('Miluju Python',
'Python je nejlepší programovací jazyk na světě. Svůj život už si bez něj nedokážu představit.'
),
('To je jedno',
'Je úplně jedno, co sem napíšu.'
);`--> stáhnout
URL
Jednotlivé akce budou probíhat na jim přidělených URL adresách:
/- seznam poznámek
/poznamka/ID- jednotlivé poznámky (ID je její číselný identifikátor)
/edit/ID- editace poznámky
Jednotlivým adresám odpovídají také šablony, které se budou vykreslovat.
Šablony
Budeme potřebovat tři základní šablony: pro seznam poznámek, pro každou zobrazení poznámky a pro editaci poznámky. Kostra HTML stánky může vypadat asi takto:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Notes</title>
<style type="text/css">
body {
width: 80%;
margin-left:auto;
margin-right:auto;
}
#hlavni {
color: green;
}
</style>
</head>
<body>
{{sem budu dávat obsah stránky}}
</body>
</html>`--> stáhnout
Tato základní kostra by se měla rozpadnou na tři šablony:
seznam.tplbude vypisovat seznam poznámek. Myslím, že by bylo vhodné předat seznam poznámek do šablony opravdu jako seznam. Každá položka seznamu bude obsahovat další seznam sidatitulkem:<h1><a href="/">Moje poznámky</a></h1> <hr /> <ol> % for id,titulek in seznam_poznamek: <li> <a href="poznamka/{{id}}">{{titulek}}</a> :-_ <a href="edit/{{id}}">edituj</a> </li> % end </ol> <hr /> <h1>Přidej poznámku</h1> <form method="post"> <p> <input type="text" name="titulek" placeholder="Nový titulek" /> <input type="submit" name="odeslat" value="Odeslat" /> </p> </form>`--> stáhnout
poznamka.tplbude zobrazovat konkrétní poznámku:<h1><a href="/">Moje poznámky</a></h1> <hr /> <h1 id="hlavni">{{titulek}}</h1> <hr /> {{!obsah}} <hr /> <p><a href="/edit/{{id}}">edituj</a></p>`--> stáhnout
edit.tplbude sloužit k editaci poznámky:<h1><a href="/">Moje poznámky</a></h1> <hr /> <h1>{{titulek}}</h1> <hr /> <form method="post"> <p> <input type="hidden" name="id" value="{{id}}"> <textarea rows="30" cols="80" name="obsah">{{obsah}}</textarea> </p> <p> <input type="submit" value="odeslat"> </p> </form>`--> stáhnout
Bottle
Seznam poznámek
Základ pro náš zdrojový kód může vypadat například takto:
#!/usr/bin/python
# -*- coding: utf8 -*-
# Soubor: notes.py
# Datum: 23.03.2014 23:00
# Autor: Marek Nožka, nozka <@t> spseol <d.t> cz
# Licence: GNU/GPL
############################################################################
"""
Webový notýsek
"""
from __future__ import unicode_literals
from bottle import run, get, post, redirect, template
import MySQLdb
# passwd='eeK6eud1',
db = MySQLdb.connect(host='localhost',
user='marek',
passwd='tojetajny',
charset='utf8',
db='notes')
@get('/')
@get('/seznam')
def seznam():
cursor = db.cursor()
cursor.execute('SELECT id, titulek FROM poznamky')
data = cursor.fetchall()
cursor.close()
return template('seznam', seznam_poznamek=data)
##########################################################################
run(host='0.0.0.0', port=8090, reloader=True)
db.close()`--> stáhnout
Tím by měla být obstarán seznam poznámek.
V dolní části stránky je formulář pro vytvoření nové poznámky. Tento formulář
je třeba "obsloužit". Příjem dat pro vytvoření nové poznámky se děje pomocí
metody POST.
@post('/')
@post('/seznam')
def pridej():
titulek = request.forms.titulek
cursor = db.cursor()
cursor.execute('INSERT INTO poznamky (titulek, obsah) '
"VALUES ('{}','NOVE')".format(titulek))
db.commit()
cursor.close()
redirect('/')`--> stáhnout
Dále je třeba vytvořit kód pro zobrazení a editaci poznámky.
Zobrazení poznámky
Pro jednoduché vykreslení a editaci použijeme jazyk
Markdown, konkrétně tedy
python knihovnu markdown. Tento
jednoduchý značkovací jazyk umožňuje velice přehlednou editaci a převod do
HTML. Samotný převod se děje pomocí funkce markdown.markdown().
Ukázka značkovacího jazyka Markdown
Nadpis
==========
* toto
* je
* seznam
Menší naspis
------------
1. toto se
2. čísluje
Sem píšu tenějaká text
a prázdný řádek
udělá nový odstavec. Ještě odkaz na
[dokumentaci](http://daringfireball.net/projects/markdown/syntax)
<p>Dle libosti <em>můžu používat</em> html</p>
nebo obrázek
`--> stáhnout
O samotné vykreslení poznámek by se mohl starat následující kód:
import markdown
@get('/poznamka/<id:int>')
def ukaz(id):
cursor = db.cursor()
cursor.execute('SELECT titulek, obsah FROM poznamky '
'WHERE id = {}'.format(id)
)
titulek, obsah = cursor.fetchone()
cursor.close()
return template('poznamka', id=id, titulek=titulek,
obsah=markdown.markdown(obsah))`--> stáhnout
Úprava poznámky
Nejprve potřebujeme poznámku vytáhnou z databáze a vložit ji do šablony. Tento kód se tedy velice podobá kódu pro zobrazení poznámky.
@get('/edit/<id:int>')
def edit(id):
cursor = db.cursor()
cursor.execute('SELECT titulek, obsah FROM poznamky '
'WHERE id = {}'.format(id)
)
titulek, obsah = cursor.fetchone()
cursor.close()
return template('edit', id=id, titulek=titulek, obsah=obsah)`--> stáhnout
Editovaná poznámka přichází do naší aplikace metodou POST. Poté co
aktualizovaný text poznámky vložíme do databáze poznámku zobrazíme.
To se děje přesměrováním požadavku na stránku /poznamka/ID.
@post('/edit/<id:int>')
def update(id):
obsah = request.forms.obsah
cursor = db.cursor()
cursor.execute("UPDATE poznamky SET obsah='{0}' "
"WHERE id='{1}'".format(obsah, id))
db.commit()
cursor.close()
redirect('/poznamka/{}'.format(id))`--> stáhnout
Závěrečný úkol
Přidejte do šablon a do aplikace kód, který zajistí vymazání dané poznáky. SQL může vypadat asi takto:
DELETE FROM poznamky WHERE id='cislo';`--> stáhnout
