Web programiranje → Osnove weba → Šta je web i kako rade web aplikacije

Šta je web i kako rade web aplikacije

Lekcija 1 od 8 · Osnove weba

Svaki put kada otvoriš sajt, gledaš video ili šalješ poruku u pregledaču, koristiš web. Ova lekcija objašnjava osnovnu ideju: pregledač (klijent) traži, server odgovara – i iz toga nastaje sve, od jednostavne stranice do aplikacija kao što su YouTube i Gmail.

Pre nego što počneš: potrebno predznanje – alati za programiranje.
Kako da učiš: svaki primer isprobaj u pregledaču ili komandnoj liniji i uradi vežbe iz lekcije. Primeri su u HTML-u, JavaScript-u i Python-u; za većinu je dovoljan pregledač, a za Python primere instaliran Python 3.

Internet i web nisu isto

InternetWeb (World Wide Web)
Šta jemreža koja povezuje računare celog svetaskup stranica i aplikacija koje se otvaraju u pregledaču
Primeri upotrebeemail, video pozivi, igre, web, IoT uređajisajtovi, online prodavnice, društvene mreže
Nastao1969 (ARPANET), današnji oblik 19831989–1991, Tim Berners-Lee (CERN)
Osnovni protokolTCP/IPHTTP / HTTPS

Web je, dakle, jedna od usluga koje rade preko interneta. Kako internet pronalazi računare objašnjava sledeća lekcija, Kako radi internet.

Klijent i server

Svaka komunikacija na webu ima dve strane:

UlogaKo je toŠta radi
klijentpregledač (Chrome, Firefox, Edge, Safari) ili mobilna aplikacijašalje zahtev (request) i prikazuje odgovor
serverprogram na računaru koji je stalno uključen i povezan na internetprima zahtev, obrađuje ga i vraća odgovor (response)
 
  PREGLEDAČ (klijent)                          SERVER
  ┌─────────────────┐  zahtev: daj /index.html   ┌──────────────┐
  │                 │ ─────────────────────────▶ │              │
  │  prikazuje      │                            │  pronađe ili │
  │  stranicu       │ ◀───────────────────────── │  napravi     │
  └─────────────────┘  odgovor: HTML stranica    │  odgovor     │
                                                 └──────────────┘

Poređenje sa restoranom: ti (klijent) naručuješ, konobar odnosi narudžbinu u kuhinju (server), kuhinja pripremi jelo i konobar ga donese. Ti ne ulaziš u kuhinju – dobijaš samo gotovo jelo.

Statički sajt, dinamički sajt, web aplikacija

VrstaKako nastaje stranicaPrimer
statički sajtserver šalje gotove HTML fajlove – svako dobija istolični sajt, dokumentacija, ovaj sajt sa lekcijama
dinamički sajtserver pravi stranicu za svaki zahtev (često iz baze podataka)vesti, forum, rezultati takmičenja
web aplikacijastranica se ponaša kao program: prijava, unos, čuvanje podataka, rad u realnom vremenuGmail, Google Docs, online učionica, Petlja

Granica nije oštra: i statički sajt može imati JavaScript koji ga čini interaktivnim, a web aplikacija može imati i statičke delove.

Od čega se sastoji web aplikacija

DeoGde radiTehnologije
frontend – ono što korisnik vidiu pregledačuHTML (struktura), CSS (izgled), JavaScript (ponašanje)
backend – logika i podacina serveruPython (Django, Flask), C# (ASP.NET Core), JavaScript (Node.js), Java, PHP
baza podatakana serveruSQL baze (PostgreSQL, MySQL, SQLite), druge baze
API – dogovor kako frontend i backend razmenjuju podatkeizmeđu njihHTTP + JSON

Svaki od ovih delova ima svoju lekciju: Frontend i backend, Šta je API.

Šta se dešava kada ukucaš adresu – kratko

  1. Pregledač iz adrese (https://svetprogramiranja.com/uvod_u_web) pročita ime servera.
  2. Preko DNS-a sazna IP adresu tog servera.
  3. Uspostavi vezu i pošalje HTTP zahtev.
  4. Server vrati HTTP odgovor – HTML stranicu.
  5. Pregledač pročita HTML, zatraži i CSS, JavaScript i slike, pa iscrta stranicu.

Sve to traje delić sekunde. Svaki korak je detaljno objašnjen u lekcijama Kako radi internet i HTTP protokol.

Vežba: pogledaj šta pregledač radi

Alat pregledača (DevTools): u Chrome-u, Edge-u i Firefox-u otvara se tasterom F12 (ili desni klik → Inspect / Pregledaj). Najvažniji tabovi su Elements (HTML i CSS stranice), Console (poruke i greške JavaScript-a) i Network (svi zahtevi koje stranica šalje).

  1. Otvori bilo koju stranicu ovog sajta i pritisni F12.
  2. Izaberi tab Network i osveži stranicu (F5).
  3. Pogledaj listu: koliko je zahteva poslato? Koji su HTML, koji CSS, JS, slike (kolona Type)?
  4. Klikni na prvi zahtev (sam dokument) i pogledaj Status – trebalo bi da piše 200.

Jedna „obična“ stranica obično pošalje desetine zahteva – za svaki fajl po jedan.

Česte greške i saveti
  • „Web“ i „internet“ nisu sinonimi – web je usluga koja radi preko interneta.
  • Pregledač ne „ima“ sajt – svaki put ga traži od servera (ili iz svoje privremene memorije, keša).
  • Frontend radi kod korisnika, backend na serveru – lozinke i važna pravila nikada se ne proveravaju samo u frontendu.

Proveri znanje

Otvori kviz

Uvod u web

1. Šta je klijent u web komunikaciji?




2. Koja je razlika između statičkog i dinamičkog sajta?




3. Koji jezik određuje strukturu web stranice?




4. Ko je osmislio web?