✦ Razvoj veb aplikacija uz Django Započni razvoj veb aplikacija

L3 · Koncept 01 · Osnove veba

Šta se dešava kada
pritisneš Enter?

Veb stranica je rezultat razgovora između tvog pregledača i servera. Upoznaj taj put pre nego što počneš da praviš aplikacije uz Django.

Cilj učenjaObjasni kako pregledač pronalazi server, šalje HTTP zahtev, prima odgovor i prikazuje stranicu — uključujući mesto na kom Django može da radi na serverskoj strani.

01 Uči02 Istraži u pregledaču03 Proveri razumevanje

Pogledaj dva odvojena zadatka

Od URL-a do prikazane stranice

Najpre pregledač pronalazi server. Tek zatim HTTP prenosi zahtev tom serveru i vraća odgovor.

PregledačUnosiš URL.

Pronađi domen

DNSPronalazi odgovarajuću IP adresu.

Vraća IP adresu

HTTP komunikacija sa serverom

PregledačŠalje zahtev za resurs.

HTTP zahtev

Server / DjangoObrađuje zahtev i priprema sadržaj.

HTTP odgovor

PregledačČita HTML i učitava povezane resurse.

Ovo je nastavni dijagram, a ne doslovna mapa mreže. Stvarna učitavanja stranice mogu uključiti TLS povezivanje, keširanje i mnogo dodatnih zahteva.

01 Uči

URL započinje razgovor

Zamisli da u pregledač uneseš adresu veb sajta i pritisneš Enter. Pregledač unapred ne zna gde se taj sajt nalazi. Najpre mu je potrebna adresa servera, a zatim može da pošalje zahtev i obradi odgovor.

GET /learn HTTP/1.1
Host: example.com

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

<html>…</html>

Pregledač je klijent: on traži stranicu. Veb server prima taj zahtev i šalje odgovor. Mnogo različitih klijenata može u isto vreme da traži stranice od istog servera.

Domen kao što je example.com je lako pamtljivo ime. DNS pomaže da se pronađe odgovarajuća IP adresa, koja prepoznaje server na mreži. Ovo je pojednostavljeno: DNS odgovori mogu biti keširani, a DNS ne prenosi svaki kasniji HTTP zahtev.

↳

HTTP u jednoj rečenici: HTTP je veb protokol za zahteve i odgovore. Pregledač obično šalje GET kada traži stranicu. Status 200 znači uspeh; 404 znači da traženi resurs nije pronađen. Zaglavlja daju dodatne informacije, na primer o tipu sadržaja odgovora.

Nakon prvog HTML odgovora

<link rel="stylesheet" href="site.css">
<script src="app.js"></script>
<img src="logo.png" alt="Logo">

Pregledač parsira HTML, a zatim traži povezane CSS datoteke, JavaScript, slike i druge resurse. Za jednu vidljivu stranicu često je potrebno mnogo mrežnih zahteva.

Gde se Django uklapa

browser → web server → Django URL routing → view → HTTP response

Django radi na serverskoj strani. Može da usmeri zahtev ka odgovarajućem view-u, po potrebi koristi bazu podataka i vrati HTTP odgovor — često HTML. Django je koristan backend framework, ali nije obavezan za svaki veb sajt.

Gde se Django uklapa u rad na serverskoj strani

Django radi iza veb servera nakon što HTTP zahtev stigne do tvoje aplikacije.

HTTP zahtevServer prosleđuje zahtev Djangu.
URL rutiranjeDjango bira koji view treba da obradi njegov URL.
ViewView određuje koji su rad i odgovor potrebni.
Template / podaciView može prikazati HTML pomoću template-a ili po potrebi koristiti modele i bazu podataka.
HTTP odgovorDjango vraća odgovor koji server šalje nazad pregledaču.

Django odgovoru nisu uvek potrebni template ni baza podataka. To su alati koje view može koristiti kada ih zahtev traži.

Jedan konkretan primer

Prati jedan zahtev

Ovo je ilustrativna priča, a ne stvarni endpoint koji treba da testiraš.

https://example.com/projects/

Unesi adresuPosetilac unosi URL u pregledač.
Pronađi serverDNS pomaže pregledaču da pronađe IP adresu za example.com.
Zatraži /projects/Pregledač šalje GET zahtev za putanju /projects/.
Prepusti Djangu da obradi zahtevZamišljena Django aplikacija rutira zahtev, dozvoljava view-u da pripremi stranicu i vraća HTML.
Prikaži odgovorPregledač prima HTML, traži sve povezane resurse i prikazuje stranicu projekata.

Kasnije će tvoj My Project Hub koristiti istu ideju: lokalno ćeš pokrenuti Django, definisati URL rute i napisati view-e koji vraćaju odgovore.

↳

Zašto je ovo važno za Django: Uskoro ćeš lokalno pokrenuti Django server, definisati URL rute i napisati view koji vraća odgovor. Poznavanje puta zahteva olakšava povezivanje tih koraka.

Put od URL-a do stranice

Pronađi serverDNS prevodi domen u IP adresu da bi pregledač znao gde da se poveže.
Pošalji zahtevPregledač šalje HTTP zahtev, često GET, i od servera traži resurs.
Pripremi odgovorServer — a ponekad i Django — priprema status, zaglavlja i sadržaj kao što je HTML.
Prikaži stranicu i preuzmi još resursaPregledač čita HTML, traži povezane fajlove i prikazuje završeni rezultat.

Važne razlike

DNS nije veb stranicaDNS pomaže da se pronađe adresa. HTTP prenosi zahtev i odgovor kada pregledač već zna gde treba da se poveže.
Odgovor je više od HTML-aOdgovor ima i statusni kod i zaglavlja. HTML zatim može da pokrene nove zahteve za CSS, JavaScript i slike.

02 Istraži u pregledaču

Vođena vežba — Istraži stvarni veb zahtev

Uradi ovo u pregledaču

Koristi Developer Tools pregledača da pregledaš jedan stvarni zahtev stranice. Za ovu vežbu ti nisu potrebni Python, VS Code ni spoljni servis.

Šta pregledaš

Pregledač
└── Developer Tools
    └── Network
        └── zahtev glavnog dokumenta

Panel Network prikazuje zahteve nastale tokom učitavanja stranice. Oznake interfejsa se malo razlikuju: Chrome i Edge koriste Network, Firefox koristi Network, a Safari možda prvo zahteva uključivanje razvojnih funkcija.

Pregledaj jedno učitavanje stranice

Otvori Developer ToolsOtvori bilo koju stranicu koju smeš da pregledaš. Upotrebi meni pregledača ili prečicu za Developer Tools, a zatim izaberi karticu Network.
Ponovo učitaj stranicuOsveži stranicu dok je panel Network otvoren da bi zabeležio novo učitavanje.
Pronađi glavni dokumentPotraži red čiji je tip document ili Doc. To je obično glavni HTML odgovor, a ne slika ili stylesheet.
Pročitaj podatke o zahtevuOtvori taj red i pronađi Request URL, Request Method, Status Code, Response Headers i Content-Type.
Objasni rezultatSvojim rečima poveži URL, odgovor servera i fajlove koje je pregledač zatim zatražio.

↳

Očekivani rezultat: Request URL: https://… Request Method: GET Status Code: 200 (ili drugi smislen status) Content-Type: text/html; … Treba da umeš da prepoznaš ova polja, a ne da namećeš određeni status. Stranica može sasvim opravdano vratiti status koji nije 200.

Ako je panel Network zbunjujući

Lista je praznaNajpre otvori Network, pa ponovo učitaj stranicu. Po potrebi obriši stare redove.
Ne vidiš HTML dokumentFiltriraj po document ili Doc i traži URL stranice, a ne CSS, JavaScript ili fajl slike.
Pregledač je koristio keširani odgovorPonovo učitaj stranicu. Developer Tools može imati i opciju za isključivanje keša dok je otvoren.
Ne možeš da pronađeš Developer ToolsPogledaj pomoć pregledača. U Safariju najpre uključi razvojne funkcije u njegovim podešavanjima.

↳

DevTools pregledača ti omogućava da posmatraš stvarne zahteve. Kasnije lekcije će mnogo detaljnije objasniti HTTP, URL-ove, HTML, CSS i Django.

03 Proveri razumevanje

Šta se dešava nakon što pregledač primi ovaj HTML?

Predvidi sledeću mrežnu aktivnost pre nego što proveriš odgovor.

<link rel="stylesheet" href="site.css">

Izgrađuj samopouzdanje samostalnim radom

Objasni jedan veb zahtev

Izaberi stranicu koju možeš da pregledaš i opiši put od pregledača do servera i nazad, bez prepisivanja definicije.

Vaš ciljNavedi klijenta, domen i DNS, server, HTTP zahtev, HTTP odgovor i prikaz u pregledaču. Dodaj jednu rečenicu o tome gde bi Django mogao da radi.

browser → DNS lookup → server → HTTP response → rendered page

Koristi pregledač i svoje beleške

Nagoveštaji korak po korak

Počni od pregledača: on je klijent koji traži resurs.
DNS koristi samo za pronalaženje adrese servera, a zatim opiši HTTP zahtev i odgovor.
Nakon što pregledač primi HTML, seti se povezanih CSS, JavaScript i slikovnih resursa.

Pitaj Slobyja jedno vodeće pitanje o DNS-u, HTTP-u ili ulozi Djanga na serverskoj strani. Nemoj tražiti da umesto tebe dovrši objašnjenje.

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.