10.02. Uvod u programiranje dinamičkih stranica
Većina web stranica koje koristimo nisu statične, već se prilagođavaju korisnicima, prikazuju različite sadržaje i omogućavaju interakciju. Ovakve stranice nazivamo dinamičkim web stranicama, jer njihov sadržaj nije fiksan, već se menja u zavisnosti od unosa korisnika, vremena, baze podataka ili drugih faktora.
Šta su dinamičke stranice?
Dinamičke stranice su web stranice koje se menjaju u zavisnosti od korisnikovih akcija ili podataka.
Osnovna razlika između statičkih i dinamičkih stranica
Statičke web stranice su jednostavne i njihov sadržaj ostaje isti dok ga neko ručno ne izmeni. One se izrađuju pomoću jezika poput HTML-a i CSS-a. Sa druge strane, dinamičke web stranice koriste programske jezike i baze podataka kako bi automatski generisale sadržaj. Mogu da menjaju deo svog sadržaja u zavisnosti od korisničkih interakcija, bez potrebe za ponovnim učitavanjem cele stranice.
Primeri:
- Web formulari koji se popunjavaju i obrađuju bez osveženja stranice.
- Komentari koji se dodaju bez ponovnog učitavanja.
- Interaktivne tabele i meniji.
Kako funkcionišu dinamičke web stranice?
Kada korisnik pošalje zahtev (npr. klikne na dugme), njegov browser šalje zahtev serveru. Server obrađuje zahtev, možda dohvaća podatke iz baze, obrađuje ih i vraća rezultat u obliku HTML-a, koji se zatim prikazuje korisniku.
Na primer, kada pretražujemo proizvode na online prodavnici, sistem pretražuje bazu podataka i prikazuje rezultate koji odgovaraju našem upitu. Svaki korisnik može videti različite rezultate u zavisnosti od svojih preferencija i unosa.
Kako se postiže dinamika?
Pošto još nismo radili server-side, zasad je fokus samo na strani klijenta.
Za kreiranje dinamičkih stranica se sa klijentske strane koriste:
- JavaScript – za manipulaciju HTML elementima u pretraživaču
- (događaji, dinamičko menjanje teksta ili dodavanje i uklanjanje elemenata).
- JQuery – pojednostavljuje rad sa JavaScriptom (i AJAX pozive ) - sve se manje koristi ...
- AJAX ili Fetch API – za slanje i preuzimanje podataka sa servera bez osveženja stranice
- Fetch API se više koristi u poslednje vreme
- AJAX – (sve se manje koristi ... )
Dosad se u ovom predmetu koristio samo Java Script za dinamiku u web stranicama.
(Čak je i jQuery biblioteka gotovih JavaScript rešenja)
U nastavku su, iza dugmića, primeri u stilu onoga što je do sada korišćeno:
Primer dinamičkog menjanja teksta
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<title>Dinamička stranica</title>
<script>
function promeniTekst() {
document.getElementById("dinamickiTekst").innerText = "Tekst je promenjen!";
}
</script>
</head>
<body>
<h1 id="dinamickiTekst">Ovo je originalni tekst.</h1>
<button onclick="promeniTekst()">Klikni ovde</button>
</body>
</html>
U ovom primeru, kada korisnik klikne na dugme, tekst se menja.
Primer dodavanja novog elementa na stranicu
<script>
function dodajElement() {
var noviDiv = document.createElement("div");
noviDiv.innerText = "Ovo je novi element!";
document.body.appendChild(noviDiv);
}
</script>
<button onclick="dodajElement()">Dodaj novi element</button>
Ovaj kod dodaje novi div sa tekstom u telo stranice kada se dugme pritisne.
Primer obrade podataka iz forme
<form id="mojForma" onsubmit="return obradiFormu()">
Ime: <input type="text" id="ime" required><br>
<input type="submit" value="Pošalji">
</form>
<div id="poruka"></div>
<script>
function obradiFormu() {
var ime = document.getElementById("ime").value;
document.getElementById("poruka").innerText = "Zdravo, " + ime + "!";
return false; // Sprečava slanje forme
}
</script>
Ovaj primer prikuplja ime iz forme i prikazuje ga na stranici kada se forma pošalje.