Kako deluje splet¶

Velika slika¶

Ko uporabnik v brskalnik vnese spletni naslov ali klikne povezavo, se zgodi precej več kot samo “odpre se stran”. Na najbolj uporabni začetni ravni si lahko stvar predstavljamo takole:

uporabnik -> brskalnik -> HTTP zahteva -> strežnik -> aplikacija -> baza
                                                   <- HTTP odgovor <-

Ta poenostavljen model ni popoln, je pa odličen za pouk, ker pokaže, da spletna aplikacija ni ena sama datoteka, ampak sodelovanje več delov.

Osnovni pojmi¶

Brskalnik¶

Brskalnik je program, ki zna:

poslati zahtevo strežniku,
prejeti odgovor,
razstaviti HTML,
uporabiti CSS,
naložiti dodatne vire,
prikazati rezultat uporabniku.

Začetnik pogosto misli, da je “stran” samo to, kar vidi na zaslonu. V resnici brskalnik ves čas sestavlja prikaz iz več virov in več korakov.

Strežnik¶

Strežnik je sistem ali program, ki posluša zahteve in nanje odgovarja. V našem učnem primeru bo strežniški del aplikacije izdelan s Flaskom.

Aplikacija¶

Aplikacija vsebuje pravila: katera pot pomeni prikaz seznama, katera pomeni obrazec, kdaj se podatki shranijo in kako se berejo iz baze.

Baza podatkov¶

Baza podatkov je prostor za trajno shranjevanje podatkov. Če uporabnik danes vnese knjigo in jo jutri še vedno vidi, se je nekaj moralo shraniti trajno. Za ta predmet bomo uporabili SQLite.

Spletni naslov in URL¶

Osnovna razčlemba URL-ja je nujna, ker se kasneje povsod pojavlja ista logika.

Primer:

https://primer.si/knjige?q=python&page=2

Razlaga:

https je protokol,
primer.si je domena,
/knjige je pot,
q=python&page=2 so parametri poizvedbe.

To je dovolj za prvo resno razumevanje.

Kaj je domena, kaj je DNS in kaj je pot¶

Za začetni nivo ni treba predavati celotnega omrežnega sveta, je pa koristno povedati:

človek si zapomni domene,
računalnik za komunikacijo potrebuje naslov,
sistem DNS pomaga najti pravi strežnik,
pot pove, kateri vir ali funkcionalnost želimo.

S tem dijak dobi malo širšo sliko, ne da bi se predmet preveč razlil v omrežja.

HTTP kot osnovni dogovor¶

HTTP je dogovor, kako si odjemalec in strežnik izmenjujeta zahteve in odgovore. Za ta predmet je pomembno razumeti predvsem:

da zahteva vsebuje metodo in pot,
da odgovor vsebuje statusno kodo in vsebino,
da različne metode pomenijo različne namene.

Najpomembnejše metode¶

`GET`¶

Metoda GET se uporablja, kadar:

želimo stran prikazati,
beremo podatke,
iščemo,
filtriramo,
navigiramo po vsebini.

Primeri:

GET /
GET /knjige
GET /knjige?q=python

GET naj ne bi spreminjal stanja sistema. To je pomembno, ker uporabnik, brskalnik in vmesni sistemi GET zahteve obravnavajo drugače kot zahtevke, ki spreminjajo podatke.

`POST`¶

Metoda POST se uporablja, kadar pošiljamo podatke strežniku:

dodajanje novega zapisa,
oddaja obrazca,
prijava,
pošiljanje sporočila.

Primer:

POST /knjige/dodaj

Začetniku je koristno povedati, da POST ni “boljši GET”, ampak preprosto drugačen namen.

Zahteva in odgovor¶

Poenostavljeno lahko HTTP komunikacijo vidiš tako:

ZAHTEVA:
- metoda: GET
- pot: /knjige
- glave: ...
- telo: včasih

ODGOVOR:
- status: 200 OK
- glave: ...
- telo: HTML / JSON / datoteka ...

Ni treba iti v vse glave in protokolarne podrobnosti. Pomembno je, da dijak dojame, da spletna komunikacija ni mistika, ampak strukturirano sporočanje.

Statusne kode¶

Statusna koda pove, kako se je zahteva končala.

Za ta predmet so najbolj uporabne:

200 OK – uspešno,
301 ali 302 – preusmeritev,
303 See Other – po oddaji obrazca preusmeri drugam,
404 Not Found – poti ali vira ni,
405 Method Not Allowed – route obstaja, ampak ne podpira metode,
500 Internal Server Error – napaka v aplikaciji.

Ta nabor je dovolj majhen, da si ga dijaki zapomnijo, in dovolj uporaben, da začnejo brati DevTools brez panike.

Statična in dinamična vsebina¶

Statična stran¶

Statična stran vrne isto vsebino ne glede na uporabnika. Primer je predstavitvena stran brez logike in brez podatkovne baze.

Dinamična stran¶

Dinamična stran pripravi odgovor glede na:

vsebino baze,
uporabniški vnos,
trenutno stanje aplikacije.

Primer: seznam knjig, iskanje po bazi, prijava, oddaja obrazca.

Začetnik mora razumeti, da razlika ni nujno v videzu strani, ampak v procesu nastanka odgovora.

Kaj se zgodi, ko odpremo stran¶

Dober razlagalni tok:

uporabnik klikne povezavo ali vnese naslov,
brskalnik pripravi zahtevo,
zahteva pride do strežnika,
aplikacija preveri pot in metodo,
po potrebi prebere podatke iz baze,
pripravi HTML odgovor,
brskalnik naloži še CSS, slike in druge vire,
uporabnik vidi rezultat.

To je resničen hrbet celotnega predmeta.

Kaj se zgodi, ko oddamo obrazec¶

To je eden najboljših mostov med teorijo in prakso:

uporabnik izpolni polja,
klikne gumb za oddajo,
brskalnik pošlje podatke strežniku,
Flask jih prebere,
aplikacija jih preveri,
podatke shrani v bazo,
uporabnika preusmeri ali mu vrne odgovor.

Ko dijak enkrat vidi ta tok, Flask in SQL ne izgledata več kot dva ločena predmeta.

Piškotki in seja – samo osnovna ideja¶

Za začetni predmet je dovolj, da omeniš koncept:

strežnik si mora včasih zapomniti, kdo je uporabnik,
za to se uporabljajo mehanizmi, kot so piškotki in seja,
to postane pomembno pri prijavah in personalizaciji.

Ni treba v implementacijske podrobnosti, a dobro je, da dijak sliši, da “spletna aplikacija” ni vedno samo en statičen odgovor.

DevTools kot razkritje čarovnije¶

Ko v brskalniku odpreš Network, lahko skoraj v živo pokažeš teorijo:

kateri URL je bil zahtevan,
katera metoda je bila uporabljena,
kakšen status se je vrnil,
ali se je zgodila preusmeritev,
koliko dodatnih datotek se je naložilo.

To je eden najboljših trenutkov v predmetu, ker se “splet” iz abstraktne ideje spremeni v nekaj opaznega.

Tipične napačne predstave¶

Najpogostejše začetniške zmede so:

da je HTML isto kot “cela spletna stran”,
da je baza isto kot strežnik,
da GET in POST nimata prave razlike,
da 500 pomeni “internet ne dela”,
da brskalnik “nekako ve”, kaj mora narediti, brez dogovorov in pravil.

Kontrolna vprašanja za konec poglavja¶

Po tem poglavju naj dijak zna s svojimi besedami razložiti:

kaj dela brskalnik,
kaj dela strežnik,
kaj dela aplikacija,
zakaj obstaja baza,
kaj pomeni URL,
kdaj uporabiš GET in kdaj POST,
kaj pomenijo 200, 404, 405 in 500.

Ključna didaktična točka

Če dijaki ne razumejo tega poglavja, bodo pri Flasku pogosto samo mehansko prepisovali kodo. Ko pa razumejo osnovni spletni tok, začne vse ostalo nenadoma delovati logično.