HTML

Zatiaľ sme vracali z Flasku len čistý text. Zatiaľčo existujú čisto textové stránky, dnes je to všetko o pekne naformátovanom texte, layoute, grafike a žiarivých efektoch. Našťastie, to všetko Flask zvláda.

HTML bábo

Najjednoduchšie je vrátiť HTML priamo z funkcie v textovom reťazci.

@app.route('/')
def hello_world():
    return '<strong>strong</strong> <em>italic</em> <strong><em>strongitalic</em></strong>'

Vráti nám "strong italic strongitalic". Samozrejme, nie sme obmedzení len na <strong> či <em>. Môžeme používať ľubovoľné HTML tagy.

Úloha:

Zmeň hello_world() tak, aby stránka vypísala nejaké dáta v tabuľke.
Napríklad vypíš zoznam tvojich obľúbených NHL hráčov. Pekne to naformátuj :)

Ukážkový program opäť nájdeš na Githube [table].

Šablóny

Ak máme kombinovať premenné s HTML kódom vo funkcii, pythoňácky format() sa rýchlo stane otravným (božechráň aby sme používali + na spájanie reťazcov). Flask prináša zjednodušenie vo forme šablón. Vo Flasku môžeme používať viacero tzv. template engines, ale Flask má v sebe už zabudovanú Jinja2, ktorú budeme používať.

Ale pekne po poriadku.

HTML súbor

Najprv presuniemie náš HTML do osobitného súboru. Treba si však dať pozor, aby sme ho vytvorili na správnej ceste. Ak lietajuci_koberec je názov nášho projektu, index.html vytvoríme na ceste lietajuci_koberec/lietajuci_koberec/templates/index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Ahoj svet!</title>
  </head>
  <body>
    Ahoj svet!
  </body>
</html>

Pozor: Aby nám program správne fungoval, náš hlavný súbor main.py musí byť umiestený na adrese lietajuci_koberec/lietajuci_koberec/main.py.

render_template

Vytvorený súbor zobrazíme pomocou funkcie render_template. Najprv ju importujeme.

from flask import Flask, render_template

Následne použijeme.

@app.route('/')
def hello_world():
    return render_template('hello-world.html')

Kombo premené + šablóny

render_template dokáže toho viac než len vrátiť čisté HTML. Napríklad nás ušetrí od spájania reťazcov. Zmeňme si šablónu tak, aby nám príjmala premenné.

<!DOCTYPE html>
<head>
  <title>Playlist</title>
</head>
<body>
  <h1>Môj playlist - {{ name }}</h1>
</body>

{{ name }} sa nám vo funkcii render_template() zmení na hodnotu, ktorú vložíme do argumentu name.

@app.route('/')
def hello_world():
    return render_template('index.html', name="Dobré texty")

Stránka by mala teraz vypísať Môj playlist - Dobré texty.

V každom playliste, čo za niečo stojí, sú nejaké pesničky. Pridáme si teda do poľa niekde v main.py nejaké pesničky, ktoré potom pošleme do render_template() na vypísanie.

songs = [
    "Trivium - Thrown Into Fire",
    "Finntroll - Ett Norrskensdåd",
    "Nightwish - Endless Forms Most Beautiful",
    "Bersærk - Trældom"
]

@app.route('/')
def hello_world():
    return render_template('index.html', name="Dobré texty", songs=songs)

Ešte musíme šablóne povedať, kam má songs vypísať. Niekde pod názov do tela teda hoď:

{{ songs }}

Ale nie, takto playlisty nevyzerajú: ['Trivium - Thrown in The Fire', 'Finntroll - Ett Norrskensdåd', 'Nightwish - Endless Forms Most Beautiful', 'Bersærk - Trældom']. Náš playlist protrebujeme pekne naformátovať!

Flask, ako sme si už zvykli, má riešenie aj na to. A dokonca nemusíme ani meniť náš Python súbor. jediné, čo je nutné zmeniť je šablóna. Použijeme v nej niečo, čo vyzerá a funguje skoro ako klasický Pythoňácky for - {% for %}.
{{ songs }} nahradíme týmto:

  <ul>
  {% for song in songs %}
    <li>{{ song }}</li>
  {% endfor %}
  </ul>

Môj playlist - Dobré texty

  • Trivium - Thrown Into The Fire
  • Finntroll - Ett Norrskensdåd
  • Nightwish - Endless Forms Most Beautiful
  • Bersærk - Trældom

Nóó, hneď to vyzerá ináč. Tiež si všimni tú podobnosť s reálnym Python kódom. Ak odstránime {% %}, {{ }} a endfor, je s ním identický, akurát že ho môžeme písať rovno do HTML. Ain't that cool?

Okrem for môžeme používať v šablónách aj if:

{% if condition %}
  áno
{% else %}
  nie
{% endif %}

Šablóny a slovníky

Čo by to bolo za playlist, ak by sa na ňom nedala pustiť hudba? Youtube našťastie má na to pre nás predpripravený kód, ktorý do šablóny len vložíme. Najprv potrebujeme URL Youtube videa niekde uložiť spôsobom, ktorý danú URL spojí s jej názvom a umelcom. Slovníky sú najjednoduchšia cesta.

Prepíšeme dáta do tejto formy:

songs = [
    {'artist': "Trivium", 'title': 'Thrown Into The Fire', 'yt_slug': "MnjZqQhZYiY"},
    {'artist': "Finntroll", 'title': "Ett Norrskensdåd", 'yt_slug': "VuBRMrLey9c"},
    {'artist': "Nightwish" , 'title': "Endless Forms Most Beautiful", 'yt_slug': "VUb1p8fm7Ag"},
    {'artist': "Bersærk" , 'title': "Trældom", 'yt_slug': "RsFss0EB3uk"}
]

kde 'yt_slug' je posledná časť Youtube URL v https://www.youtube.com/watch?v=yt_slug.

V takejto forme nám to náš pôvodný HTML súbor nezožerie, pretože song už nie je reťazec, ale slovník. Ku členom v slovníku sa dá pristupovať presne ako priamo v Pythone: Trivium z prvého slovníku získame pomocou song.title. Upravme si náš HTML súbor, aby vyzeral k svetu, konkrétne stačí upraviť riadok, v ktorom máme odrážku li.

<li><strong>{{ song.title }}</strong> by <em>{{ song.artist }}</em></li>

Výborne. A teraz videá. Pod každým Youtube videom sa dá stiahnuť tento kód:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/MnjZqQhZYiY?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

ktorý môžeme v šablóne pretransformovať na:

<iframe width="112" height="63" src="{{ 'https://www.youtube-nocookie.com/embed/{0}?rel=0&amp;showinfo=0'.format(song.yt_slug) }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

aby šablóna ukazovala vždy správne video.

Playlist screenshot

Teraz je to playlist ako má byť!

Celý kód HTML súboru sa nachádza tu a Python súboru tu.

Úloha:

Predchádzajúcu úlohu table.py prerob tak, že pri tom použiješ premenné v kombinácii so šablónami.

Ukážkový program opäť nájdeš na Githube [table_template].

results matching ""

    No results matching ""