Tyto stránky již nejsou udržovány. Obsah je postupně přesouván/aktualizován na adrese chytrosti.marrek.cz.

118/310

Počítačové sítě a komunikační technika:
Harmonická analýza
Harmonická analýza -- složky
Harmonická analýza -- cvičení
Amplitudová modulace
Frekvenční modulace
Vzorkování
Aliasing
Kvantování
Číslicové zpracování signálů
Komunikace pomocí optických vláken I
Komunikace pomocí optických vláken II
Komunikace pomocí optických vláken III
Komunikace pomocí optických vláken IV
Optické zdroje a detektory
Metalické vedení -- primární a sekundární parametry
Metalické vedení -- zakončovací impedance
Stojaté vlnění
Šíření elektromagnetických vln
Parametry antén
Antény
Zdrojové kódování
Ztrátová komprese
Běžně používané souborové formáty
Formát kontejner kodek
Kanálové kódování
Multiplexování
Komunikační model, vrstvy, TCP/IP I
Komunikační model, vrstvy, TCP/IP II
IP adresa
DNS a WHOIS
DNS a WHOIS -- videoukázka
Protokoly TCP a UDP
Vrstvy Internetu — videoukázka
Služby Internetu
E-mail
Šifrování a elektronický podpis I
Šifrování a elektronický podpis II
Šifrování a elektronický podpis — videoukázka
Kódování textu
Kódování čísel
Úvod do Linuxu
Zpracování příkazového řádku
Základní příkazy
Přístupová práva
Vstupy, výstupy, přesměrování
Procesy
Procesy bez přihlášení
Počáteční nastavení
Základy skriptování
Shell -- test
Instalace software a nastavení sítě
Secure Shell I
Secure Shell II
Webový server
Python jako motor webu -- CGI
Python jako motor webu -- formuláře
Python jako motor webu -- Bottle I
Python jako motor webu -- Bottle II
Bottle -- příklad
Malý poštovní server

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:

  1. Databáze
  2. URL
  3. Šablony
  4. Bottle
  5. Závěrečný úkol

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 INT s AUTO_INCREMENT a 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:

  1. seznam.tpl bude 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 s id a titulkem:

    <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

  2. poznamka.tpl bude 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

  3. edit.tpl bude 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 
![Alt text](/image/600px/svg_to_png/192053/remington_typewriter.png)

`--> 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

| navigace |

Licence Creative Commons Valid XHTML 1.0 Strict Valid CSS! Antispam.er.cz Blog: Tlapicka.net