4. diel - Kalkulačka v Django frameworku

V minulej lekcii, Predstavenie MVC a MVT architektúry v Django , sme si popísali MVT (MVC) architektúru. Už vieme, že naše aplikácie v Django budú rozdelené na komponenty 3 typov:

• Modely obsahujúce logiku ako Python kód
• Templates obsahujúce šablóny ako HTML kód
• Views, ktorá sa zavolajú podľa URL adresy a fungujú ako prostredník medzi modelmi a templates

V dnešnej lekcii si MVC architektúru prvýkrát vyskúšame, vytvoríme si totiž prvý plnohodnotnú webovú aplikáciu.

Kalkulačka

Bude sa jednať o jednoduchú kalkulačku, ktorá vykonáva nasledujúce matematické operácie:

• súčet
• rozdiel
• súčin
• podiel

Naša kalkulačka bude mať 2 vstupné políčka <input> na čísla, 1 tlačidlo <input type="submit"> na odoslanie formulára a <select> na výber operácie s možnosťami +, -, /, *. V prehliadači bude vyzerať asi takto:

Pusťme sa do toho.

Vytvorenie projektu

Webová aplikácia v podaní Django frameworku bude projekt s jednou aplikáciou s názvom "calculator". V druhej lekcii sme si už vytvorili projekt mysite a to príkazom:

py -m django startproject mysite

Už vieme, že projekt môže obsahovať viac aplikácií a tak môžeme kalkulačku pridať pokojne do tohto istého projektu. Pokiaľ tento projekt vytvorený nemáte, spustite kód vyššie. Ak áno, vypíše vám chybovú hlášku, že už existuje.

Vytvorenie aplikácie

Presunieme sa do priečinka C:\Users\<VaseJmeno>\AppData\Local\Programs\Python\ a pre zložku mysite otvoríme príkazový riadok. V ceste vyššie si samozrejme nahraďte <VaseJmeno> za názov vašej užívateľskej zložky. Ako zložku s Django projektmi otvoriť a ako v nej otvoriť príkazový riadok sme si podrobne ukazovali v lekcii Zoznámenie s Django frameworkom pre Python. V príkazovom riadku spustíme príkaz pre vytvorenie novej aplikácie calculator v tomto projekte:

C:\Users\<VaseJmeno>\AppData\Local\Programs\Python\>py manage.py startapp calculator

Keďže po vykonaní príkazu sa nič nevypíše, môžete si jeho úspešnosť overiť tým, že sa pozriete, či sa v priečinku mysite vytvorila nová zložka calculator.

Inštalácia aplikácie

Postupujeme úplne rovnako ako vtedy s našou prvou aplikáciou. Aplikáciu je teraz potrebné nainštalovať a preto v súbore / module (ak napíšem modul, myslím tým súbor, pretože v Pythone sa každému súboru hovorí modul) /mysite/mysite/setting.py aplikáciu do zoznamu aplikácií pridáme:

INSTALLED_APPS = [
    'calculator',
    'ahoj_svete',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Routovanie

Prejdime k routovanie, teda nadväzovanie URL adries na jednotlivé view.

Ruty projektu

Teraz je potrebné "importovať" všetky URL adresy z aplikácie do hlavného schémy URL adries, ktoré sa vždy nachádza v /nazev_projektu/nazev_projektu/urls.py, čo je u nás /mysite/mysite/urls.py. Ak pracujete s novým projektom, nezabudnite naimportovať funkciu include() z modulu django.urls.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("ahoj_svete.urls")),
    path("calculator_aplikace/", include("calculator.urls")),
]

Všimnite si, že teraz do calculator.urls nenapojujeme koreňovú adresu projektu localhost:8000 ako u hello world, ale kalkulačka pobeží na adrese localhost:8000/calculator_aplikace. Jednotlivé aplikácie nášho projektu budeme teraz dávať do zložiek, aby sa všetky nehádali o jednu URL adresu.

Ruty aplikácie

Ruty projektu máme napojené na ruty aplikácie. Teraz ich musíme vytvoriť. Vytvorme teda súbor mysite\calculator\urls.py odkazujúce na view, ktorý bude URL adresu kalkulačky obsluhovať. Toto view vytvoríme neskôr.

from django.urls import path
from . import views

urlpatterns = [
    path("", views.kalkulacka, name="kalkulacka"),
]

Šablóna

Pred tým, ako začneme písať logiku aplikácie, si vytvoríme template. Bude sa nachádzať v mysite/calculator/templates/calculator/kalkulacka.html. Vytvorte si teda zložku templates, v nej podpriečinok calculator a v nej súbor kalkulacka.html. Dajte si pozor, aby bol súbor vytvorený v UTF-8 kódovanie! To platí pre všetky súbory, ktoré budeme vytvárať. Vložte do neho nasledujúci obsah:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webová kalkulačka v Pythonu</title>
</head>
<body>
    <form method="POST">
        {% csrf_token %}
        <input type="text" name="a">
        <select name="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text"><br>
        <input type="submit">
    </form>
</body>
</html>

CSRF útok

Pravdepodobne vás v kóde formulára zaujala direktíva {% csrf_token %}. V každom formulári Django vyžaduje tzv. CSRF "žetón", ktorý slúži proti útoku podvrhnuté formulára.

Predstavte si situáciu, kedy sme vytvorili nejaký populárny blog a niekto by vytvoril úplne inú stránku, kam by dal formulár nabádajúce na vkladanie vulgárnych príspevkov. Tento formulár by však nenechal odosielať dáta na jeho stránku, ale na view nášho blogu. Nič netušiaci užívatelia by razom písali príspevky na náš blog, aj keď by sa na tejto stránke vôbec nenachádzali a nevedeli, že tam niečo posielajú.

CSRF token opatrí formulár "žetónom", pomocou ktorého sa overuje, že bol odoslaný cez našu stránku a nie cez stránku cudzie. Tento spomínaný útok by bol ešte pomerne neškodný, skúste si predstaviť taký falošný formulár na odosielanie peňazí. jaj

Model

Teraz vytvoríme logiku aplikácie, teda funkcie, ktoré nám budú vracať výsledky. Takú logiku nikdy nepíšeme priamo do view, ale do modelov. Predstavte si, ako by inak vyzerali väčšie aplikácie, náš súbor s views by bol dlhý a neprehľadný. Toto rozdelenie sme si už vysvetľovali pri opise MVC architektúry v minulej lekcii. Vytvorte si modul /mysite/calculator/nas_modul.py s nasledujúcim obsahom.

def secti(a, b):
    return float(a) + float(b)

def odecti(a, b):
    return float(a) - float(b)

def podil(a, b):
    return float(a) / float(b)

def soucin(a, b):
    return float(a) * float(b)

Padli tu termíny "model" a "modul", tie nezamieňajte. Model je súčasť MVC architektúry, modul je Python súbor. Každý náš model bude modulom, ale nie každý náš modul bude modelom

Vytvorenie view

Docielili sme toho, že po zadaní URL adresy localhost:8000/calculator_aplikace sa spustí view kalkulacka(). To je metóda v súbore views.py, kde užívateľský požiadavka obslúžime. Samozrejme k tomu použijeme model a template

Náš view bude určite využívať funkciu render(), pretože bude vracať HTML šablónu s formulárom. Ďalej prijme POST požiadavka, teda dáta odoslané týmto formulárom, vykoná vyžadovanú operáciu a vráti výsledok.

V module /mysite/calculator/views.py si vytvoríme funkciu kalkulacka(), na ktorú už odkazujeme zo súboru mysite\calculator\urls.py. Ako už vieme, každá funkcia view má povinný parameter request, kam sa odovzdá užívateľský požiadavku.

from django.shortcuts import render

def kalkulacka(request):
    error_msg = None
    vysledek = None

Validácia

Ďalej potrebujeme zistiť, či boli vyplnené obe číslice, či sú to číslice, a či bol odoslaný operátor. V našich aplikáciách by sme mali predpokladať, že sa užívateľ môže pomýliť alebo že do nich schválne niekto pošle nejaký nezmysel. Formulár teda najprv zvaliduje. Ak nastane výnimka, vrátime náš HTML template s chybovým hlásením

from django.shortcuts import render

def kalkulacka(request):
    error_msg = None
    vysledek = None
    if request.method == "POST":
            try:
                float(request.POST["a"])
                float(request.POST["b"])
            except:
                error_msg = "A nebo B není číslo!"
                return render(request, "calculator/kalkulacka.html", dict(error_msg=error_msg, vysledek=vysledek))

Všetko je ošetrené.

Zostáva nám naimportovať náš model, odovzdať mu dáta a výsledok odovzdať šablóne. Presne toto je účelom view:

from django.shortcuts import render

from . import nas_modul

def kalkulacka(request):
    error_msg = None
    vysledek = None
    if request.method == "POST":
            try:
                float(request.POST["a"])
                float(request.POST["b"])
            except:
                error_msg = "A nebo B není číslo!"
                return render(request, "calculator/kalkulacka.html", dict(error_msg=error_msg, vysledek=vysledek))

            if (float(request.POST["b"]) == 0 and request.POST["operator"] == "/"):
                    error_msg = "Chyba dělení nulou"
                    return render(request, "calculator/kalkulacka.html", dict(error_msg=error_msg, vysledek=vysledek))
            if (request.POST["operator"] == "+"):
                vysledek = nas_modul.secti(request.POST["a"], request.POST["b"])
            elif (request.POST["operator"] == "-"):
                vysledek = nas_modul.odecti(request.POST["a"], request.POST["b"])
            elif (request.POST["operator"] == "/"):
                vysledek = nas_modul.podil(request.POST["a"], request.POST["b"])
            elif (request.POST["operator"] == "*"):
                vysledek = nas_modul.soucin(request.POST["a"], request.POST["b"])
            else:
                error_msg = "Něco se pokazilo :("
                return render(request, "calculator/kalkulacka.html", dict(error_msg=error_msg, vysledek=vysledek))
    return render(request, "calculator/kalkulacka.html", dict(error_msg=error_msg, vysledek=vysledek))

Úprava šablóny

Aby v šablóne zostávala vyplnená dáta a zobrazovala chybové hlášky, je potrebné v nej vypísať obsah error_msg, ktorú sme si vo view pripravili. Tiež aplikujeme vylepšováky, ktorý nám po odoslaní bude zobrazovať v input políčkach čísla, ktoré sme zadali, a ponechá vybraný operátor.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webová kalkulačka v Pythonu</title>
</head>
<body>
    <form method="POST">
        {% csrf_token %}
        <span style="color: red;">{{error_msg}}</span>
        <br>
        <input type="text" name="a" value={{request.POST.a}}>
        <select name="operator">
            <option value="+" {% if request.POST.operator == "+" %} selected {% endif %}>+</option>
            <option value="-" {% if request.POST.operator == "-" %} selected {% endif %}>-</option>
            <option value="*" {% if request.POST.operator == "*" %} selected {% endif %}>*</option>
            <option value="/" {% if request.POST.operator == "/" %} selected {% endif %}>/</option>
        </select>
        <input type="text" name="b" value={{request.POST.b}}><br>
        <input type="submit"><br>
        {{vysledek}}
    </form>
</body>
</html>

Spustenie

Kalkulačku nájdete na adrese http://localhost:8000/calculator_aplikace/. Samozrejme musíte prvýkrát spustiť server príkazom py manage.py runserver a to zo zložky so súborom manage.py, robili sme v minulých lekciách.

výsledok:

Dúfam, že ste princíp MVC modelu pochopili a utvrdili svoje doterajšie znalosti Django frameworku. V budúcej lekcii, Databázy filmov v Django - Vytvorenie projektu a static files , začneme pracovať na väčšej aplikáciu, ktorá bude využívať aj databázu.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.