Frontend i backend: kako zajedno rade web aplikacije

Lekcija 5 od 8 · Osnove weba

Svaka web aplikacija ima dva dela koja rade na različitim mestima: frontend u pregledaču korisnika i backend na serveru. Ova lekcija pokazuje šta radi koji deo, kako razmenjuju podatke i šta se dešava kada se korisnik prijavi.

Pre nego što počneš: potrebno predznanje – uvod u web, HTTP protokol.
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.

Frontend: ono što korisnik vidi

Jezik	Uloga	Poređenje sa kućom
HTML	struktura i sadržaj: naslovi, tekst, slike, forme, dugmad	zidovi i prostorije
CSS	izgled: boje, fontovi, raspored, prilagođavanje telefonu	fasada, boje, nameštaj
JavaScript	ponašanje: reakcija na klik, provera forme, menjanje stranice bez osvežavanja	struja, vodovod, prekidači

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="utf-8">
  <title>Brojač</title>
  <style>
    button { font-size: 20px; padding: 8px 16px; }   /* CSS: izgled */
  </style>
</head>
<body>
  <h1>Brojač klikova</h1>                               <!-- HTML: struktura -->
  <button id="dugme">Klikni</button>
  <p>Kliknuto: <span id="broj">0</span> puta</p>
  <script>
    let n = 0;                                            // JavaScript: ponašanje
    document.getElementById("dugme").addEventListener("click", () => {
      n++;
      document.getElementById("broj").textContent = n;
    });
  </script>
</body>
</html>

Sačuvaj kod kao brojac.html i otvori ga dvoklikom – radi bez servera, jer je sve u pregledaču. Ali ako osvežiš stranicu, broj se vraća na 0: frontend ne pamti podatke trajno.

Za veće aplikacije koriste se frontend biblioteke i framework-ovi: React, Vue, Angular, Svelte; za sajtove sa mnogo sadržaja – Astro, na kome je napravljen i ovaj sajt.

Backend: logika i podaci

Backend radi na serveru i korisnik ga ne vidi. Njegovi poslovi:

čuvanje podataka u bazi (korisnici, rezultati, poruke);
pravila aplikacije (ko sme šta da vidi i menja);
prijava i provera korisnika;
API preko koga frontend (i mobilna aplikacija) traži i šalje podatke.

Jezik	Popularni framework-ovi
Python	Django, Flask, FastAPI
C#	ASP.NET Core
JavaScript / TypeScript	Node.js + Express, NestJS
Java	Spring Boot
PHP	Laravel, WordPress

Važno pravilo: sve što je u frontendu, korisnik može da vidi i promeni (F12). Zato se lozinke, cene, bodovi i prava pristupa uvek proveravaju na backendu. Frontend nikada ne pristupa bazi direktno.

Kako sarađuju: primer prijave

Korak	Gde	Šta se dešava
1	frontend	korisnik upiše ime i lozinku i klikne „Prijavi se“; JavaScript proveri da polja nisu prazna
2	mreža	pregledač pošalje `POST /api/prijava` sa podacima (preko HTTPS-a)
3	backend	pronađe korisnika u bazi i uporedi heš lozinke
4	backend	ako je ispravno: napravi sesiju i vrati `200` i kolačić; ako nije: vrati `401`
5	frontend	prikaže početnu stranu korisnika ili poruku o grešci

Korisnik → Frontend → (HTTP) → Backend → Baza → Backend → (HTTP) → Frontend → Korisnik

Gde nastaje HTML: server ili pregledač

Pristup	Kako radi	Primer
na serveru (SSR)	backend napravi ceo HTML i pošalje ga	Django šabloni, ASP.NET Razor, PHP
unapred (statički)	HTML se napravi jednom, pri izgradnji sajta	Astro, Hugo – ovaj sajt
u pregledaču (SPA)	server pošalje praznu stranicu i JavaScript, koji traži podatke preko API-ja i sam pravi HTML	React aplikacije, Gmail

Moderne aplikacije često kombinuju sva tri pristupa.

Video: prva web stranica

U videu se pravi naslovna strana sajta pomoću HTML-a i CSS-a – to je čist frontend. Nastavak: Kreiranje web sajta.

Ko šta radi

Uloga	Bavi se
frontend programer	HTML, CSS, JavaScript, izgled i upotrebljivost
backend programer	server, baze, API, bezbednost
full-stack programer	i jedno i drugo
dizajner (UI/UX)	kako aplikacija izgleda i koliko je laka za upotrebu

Česte greške i saveti

Frontend radi kod korisnika – sve u njemu je vidljivo i promenljivo.
Proveru podataka radi i frontend (zbog udobnosti) i backend (zbog bezbednosti).
Ako podaci treba da ostanu posle osvežavanja ili da ih vide drugi korisnici – potreban je backend sa bazom.

Proveri znanje

Otvori kviz