✦ Razvoj veb aplikacija uz Django Veb komunikacija

L3 · Koncept 02 · Osnove veba

Nauči da čitaš
Veb poruke.

HTTP daje pregledačima i serverima zajednički jezik. Nauči da prepoznaš zahtev, odgovor i podatke koje svaka poruka sadrži.

Cilj učenjaPročitaj ključne delove HTTP zahteva i odgovora, razlikuj GET i POST, prepoznaj grupe statusnih kodova i poveži zahtev sa budućim Django view-om.

01 Uči02 Pregledaj u pregledaču03 Proveri razumevanje

Jedan razgovor, dva smera

Zahtev i odgovor

Strelice prikazuju dve različite HTTP poruke između pregledača i servera.

Pregledač

HTTP zahtevGET /projects/

Server

HTTP odgovor200 OK + HTML

GET zahtev može tražiti HTML, JSON, sliku ili drugi resurs. Status odgovora i Content-Type pomažu pregledaču da razume rezultat.

01 Uči

HTTP je jezik veba

U prethodnoj lekciji pregledač je pronašao server. HTTP je protokol kojim ga najčešće nešto pita i prima odgovor. HTTPS je HTTP zaštićen tokom prenosa pomoću TLS-a; sam POST ne šifruje podatke. HTTPS šifruje komunikaciju tokom prenosa, ali sam po sebi ne garantuje da je sajt pouzdan.

GET /projects/ HTTP/1.1
Host: example.com
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html

<html>...</html>

Zahtev ima metodu, ciljnu putanju, verziju protokola, zaglavlja, a ponekad i telo. Odgovor ima statusni kod, zaglavlja i obično telo. HTTP/2 i HTTP/3 poruke na mreži predstavljaju drugačije, ali ove ideje i dalje pomažu pri čitanju DevTools-a.

GET obično pribavlja resurs i ne bi trebalo da menja stanje servera. Njegovi parametri se često nalaze u URL-u. POST obično šalje podatke na obradu i često ima telo zahteva, na primer kada forma pravi projekat. POST nije jedina metoda koja može menjati stanje.

↳

Zaglavlja i tela poruka: Zaglavlja opisuju poruku. Content-Type: text/html kaže da je telo HTML; Content-Type: application/json kaže da je JSON. HTTP sam po sebi ne pamti prethodne zahteve, pa cookies i sessions mogu pomoći aplikaciji da zapamti kontekst; vratićemo im se u Modulu 5.

Građa zahteva i odgovora

GET /projects/ HTTP/1.1
Host: example.com
Accept: text/html

HTTP/1.1 200 OK
Content-Type: text/html

<html>...</html>

U GET /projects/ HTTP/1.1, GET je metoda, a /projects/ je putanja. Host i Accept su zaglavlja zahteva. U odgovoru je 200 statusni kod, Content-Type je zaglavlje odgovora, a HTML je telo odgovora.

Statusni kodovi su grupisani

1xx  information
2xx  success
3xx  redirection
4xx  client error
5xx  server error

Ne moraš da pamtiš svaki kod. Nauči kategorije, a zatim koristi DevTools i dokumentaciju za detalje. Česti primeri su 200 OK, 201 Created, 301 Moved Permanently, 302 Found, 400 Bad Request, 403 Forbidden, 404 Not Found i 500 Internal Server Error.

Veza sa Django okruženjem

request → URL route → view → response

Kasnije će Django URL rutiranje izabrati view. View može vratiti HTML stranicu za GET zahtev ili obraditi podatke forme poslate POST metodom.

GET i POST imaju različite zadatke

GET

Čitanje ili pribavljanje

Traži resurs bez namere da promeni stanje servera.

GET /projects/?page=2

Mesto podataka: Često parametri upita u URL-u; obično bez tela zahteva.
Moguć efekat na server: Ne bi trebalo da menja stanje.
Tipična Django upotreba: Prikaz stranice ili liste projekata.

POST

Slanje podataka na obradu

Šalje podatke koji mogu napraviti resurs ili na drugi način promeniti stanje.

POST /projects/

Mesto podataka: Često telo zahteva, kao što su polja forme.
Moguć efekat na server: Može promeniti stanje; nije automatski bezbedan ni šifrovan.
Tipična Django upotreba: Obrada forme koja pravi projekat.

Metoda opisuje namenu, a ne komandu nad bazom podataka

HTTP metoda označava namenu zahteva, a ne direktnu operaciju nad bazom podataka. GET /projects/ traži listu projekata. POST /projects/ šalje podatke koji mogu da naprave projekat. POST /login/ šalje podatke za prijavu, ali ne mora da napravi zapis u bazi podataka. GET treba da služi za čitanje; POST može promeniti stanje aplikacije, ali ne znači automatski da se upisuje novi zapis u bazu.

HTTPS štiti podatke dok putuju. Nemoj GET posmatrati samo kao HTML, POST kao automatski bezbedan niti POST podatke kao trajno skrivene.

Grupe statusnih kodova

Prva cifra daje korisnu kategoriju. Kada ti treba više detalja, pročitaj određeni kod.

1xx
InformativnoZahtev se obrađuje; početnicima će ovi kodovi retko biti potrebni.
2xx
UspehZahtev je uspeo, kao 200 OK ili 201 Created.
3xx
PreusmerenjePregledač se usmerava na drugo mesto, kao kod 301 ili 302.
4xx
Greška klijentaZahtev ima problem, kao kod 400, 403 ili 404.
5xx
Greška serveraServer nije mogao da dovrši ispravan zahtev, kao kod 500.

Statusni kod je informacija, a ne presuda o osobi. Kada kasnije budeš debagovao aplikaciju, pregledaj zahtev, odgovor i server logove.

HTTP u My Project Hub-u

Ovo su tipične situacije u budućoj Django aplikaciji, a ne obavezni odgovori za svaku implementaciju.

200 OKOtvaranje liste projekata.
201 CreatedKreiranje projekta preko API-ja.
302 FoundPreusmeravanje nakon uspešne obrade forme.
404 Not FoundOtvaranje projekta koji ne postoji.
403 ForbiddenPokušaj pristupa nečemu bez dovoljnog ovlašćenja.
500 Internal Server ErrorNeočekivan problem na strani servera.

Uobičajen Django obrazac za forme je POST → Redirect → GET: obradi formu, preusmeri pregledač, zatim prikaži stranicu. Koristićeš ga kasnije u modulu Forms i CRUD.

HTTP detektiv

Šta će pregledač najverovatnije uraditi nakon ovog odgovora?

Pročitaj ovaj odgovor pre nego što otkriješ rešenje.

HTTP/1.1 302 Found
Location: /projects/

A. Prikazaće grešku jer stranica ne postoji.
B. Poslaće novi zahtev na /projects/.
C. Automatski će obrisati prethodni projekat.

Otkrij odgovor

B je najverovatnije. Status 302 označava preusmerenje, a pregledač će obično pratiti zaglavlje Location tako što će poslati novi zahtev na /projects/.

Pročitaj HTTP poruku korak po korak

Pročitaj metodu i putanjuOne pokazuju šta pregledač traži i kako to traži.
Čitaj zaglavlja kao kontekstZaglavlja mogu navesti host, prihvaćeni sadržaj, tip sadržaja, keširanje i drugo.
Prvo pročitaj status odgovoraStatus ti govori da li da očekuješ uspeh, preusmerenje, problem klijenta ili problem servera.

Izbegni ova pojednostavljenja

POST znači šifrovanoŠifrovanje dolazi od HTTPS-a i TLS-a, a ne od izbora POST metode.
Svaki status koji nije 200 je neuspehPreusmerenje može biti očekivano, a 201 može značiti da je resurs uspešno napravljen.

02 Pregledaj u pregledaču

Vođena vežba — Istraži HTTP u DevTools-u

Uradi ovo u pregledaču

Nadogradi Concept 01: pregledaj detalje dva zahteva bez deljenja privatnih podataka, cookies-a, Authorization zaglavlja ili session tokena.

Kontrolna lista panela Network

Pregledač
└── Developer Tools
    └── Network
        ├── glavni dokument
        └── CSS ili JavaScript resurs

Chrome, Edge i Firefox ovaj panel zovu Network. Oznake se malo razlikuju. Stranica može prikazati keširane odgovore, preusmerenja ili status koji nije 200.

Uporedi dva bezbedna zahteva

Zabeleži novo učitavanje straniceOtvori Network, ponovo učitaj stranicu i izaberi njen glavni dokument.
Pregledaj zahtev dokumentaPronađi Request Method, Status Code, Request Headers, Response Headers, Content-Type i karticu Response ili Preview.
Pregledaj jedan povezani resursIzaberi CSS ili JavaScript zahtev i uporedi njegovu metodu, status i Content-Type sa dokumentom.
Sačuvaj privatnost zaglavljaNe kopiraj cookies, Authorization zaglavlja, session tokene ni privatne podatke forme u beleške ili Slobyju.

↳

Očekivana zapažanja: dokument: GET · status · Content-Type CSS ili JavaScript: GET · status · drugačiji Content-Type Svojim rečima opiši šta si zapazio. Različite stranice mogu imati različite statuse, preusmerenja ili ponašanje keša.

Kada detalji zahteva izgledaju drugačije

Vidiš preusmerenjeOtvori oba zahteva i uporedi njihove statusne kodove i Location zaglavlje bez kopiranja privatnih zaglavlja.
Odgovor je keširanPonovo učitaj stranicu dok je Network otvoren; DevTools može imati i opciju za isključivanje keša.
Ne možeš da pronađeš telo porukeKoristi Response ili Preview. Neki resursi nemaju korisno tekstualno telo, a neki odgovori su namerno prazni.

↳

U narednim Django lekcijama, isti detalji zahteva pomoći će ti da razumeš URL rutiranje, view-ove, forme, preusmeravanja i JSON API-je.

03 Proveri razumevanje

Pregledač šalje GET /missing-page/, ali server ne može da pronađe taj resurs. Koji je odgovor najprikladniji?

Izaberi status koji označava nedostajući resurs.

GET /missing-page/ HTTP/1.1

Izgrađuj samopouzdanje samostalnim radom

Uporedi listu projekata i formu projekta

Objasni kako se otvaranje liste projekata razlikuje od slanja forme za novi projekat.

Vaš ciljOpiši tipičan GET zahtev za listu i tipičan POST zahtev za formu. Navedi metodu, putanju, zaglavlja ili telo, moguć odgovor i ulogu servera.

GET /projects/
POST /projects/

Koristi pregledač i svoje beleške

Nagoveštaji korak po korak

Počni tako što ćeš odlučiti da li svaki zahtev čita resurs ili šalje podatke na obradu.
Za POST razmisli o podacima forme u telu zahteva; za GET o putanji i mogućim parametrima upita.
Uključi statusni kod koji bi pregledaču pomogao da razume da li je rezultat uspeo ili zahteva pažnju.

Pitaj Slobyja jedno vodeće pitanje o GET-u, POST-u ili statusnim kodovima. Ne lepi privatna zaglavlja, tokene, cookies ni podatke forme.

Tvoj mentor za učenje

Napravite besplatan nalog ili se prijavite za AI smernice tokom učenja.

Napravite besplatan nalog Prijavi se

04 Provera razumevanja

Napravite besplatan nalog ili se prijavite da biste dobili AI povratnu informaciju i sačuvali napredak u učenju.