Primenjene informacione tehnologije 3

1 – OSNOVE DINAMIČKIH STRANICA

Uvod u problem

Do sada su izrađivane web stranice koje su bile statične ili su imale ograničenu interaktivnost (forme, validacija). Međutim, savremene web aplikacije (npr. online prodavnice, društvene mreže) zahtevaju da se sadržaj menja u realnom vremenu.

Šta znači “dinamičko”?

Dinamička stranica reaguje na korisnika, menja sadržaj bez ponovnog učitavanja, može prikazivati različite podatke različitim korisnicima, ...

---

Osnovni mehanizam

Dinamičnost na klijentskoj strani se ostvaruje na primer pomoću:

• DOM manipulacije

• JavaScript-a

---

Primer 1 – osnovna dinamika

<input type="text" id="ime" placeholder="Unesite ime">
<button onclick="prikazi()">Prikaži</button>

<p id="rezultat"></p>

<script>
function prikazi() {
    var ime = document.getElementById("ime").value;
    document.getElementById("rezultat").innerHTML = "Zdravo, " + ime + "!";
}
</script>

Šta se ovde radi: prvo se vrši uzimanje vrednosti iz input polja, zatim se radi manipulacija DOM-a i na kraju prikaz bez reload-a.

---

Primer 2 – sa više elemenata

<input type="text" id="ime">
<input type="text" id="prezime">

<button onclick="ispisi()">Prikaži</button>

<p id="rez"></p>

<script>
function ispisi() {
    var ime = document.getElementById("ime").value;
    var prezime = document.getElementById("prezime").value;

    document.getElementById("rez").innerHTML =
        "Korisnik: " + ime + " " + prezime;
}
</script>

---

Primer 3 – uslovna dinamika

<input type="number" id="godine">
<button onclick="provera()">Proveri</button>

<p id="rez"></p>

<script>
function provera() {
    var g = document.getElementById("godine").value;

    if (g >= 18)
        document.getElementById("rez").innerHTML = "Punoletan";
    else
        document.getElementById("rez").innerHTML = "Maloletan";
}
</script>

---

Zadaci za vežbu (čas 1)

Zadatak 1: Uneti ime i grad → ispis:  "Zovem se [ime] i dolazim iz [grad]"

---

Zadatak 2: Uneti broj → ispisati: "Pozitivan" ili "Negativan" ili "Nula"

---

Zadatak 3:  Uneti dve vrednosti → prikazati veći broj

---

Rešenje (samo jedno) 

// Zadatak 2
if (broj > 0) rez="Pozitivan";
else if (broj < 0) rez="Negativan";
else rez="Nula";

---

2 – MALO NAPREDNIJA DINAMIKA 

Dinamičko generisanje sadržaja

👉 Mogućnost automatskog kreiranja HTML elemenata

---

Primer 1 – lista iz niza

<ul id="lista"></ul>

<script>
var proizvodi = ["Pizza", "Pasta", "Sok"];

for (var i = 0; i < proizvodi.length; i++) {
    document.getElementById("lista").innerHTML +=
        "<li>" + proizvodi[i] + "</li>";
}
</script>

---

Primer 2 – dodavanje elemenata iz input-a

<input type="text" id="proizvod">
<button onclick="dodaj()">Dodaj</button>

<ul id="lista"></ul>

<script>
function dodaj() {
    var p = document.getElementById("proizvod").value;

    document.getElementById("lista").innerHTML +=
        "<li>" + p + "</li>";
}
</script>

---

Primer 3 – brisanje elemenata

<ul id="lista">
    <li onclick="this.remove()">Pizza</li>
</ul>

➡ klik briše element

---

Primer 4 – jQuery pristup

<input type="text" id="txt">
<button id="btn">Dodaj</button>

<ul id="lista"></ul>

<script>
$("#btn").click(function() {
    var tekst = $("#txt").val();
    $("#lista").append("<li>" + tekst + "</li>");
});
</script>

---

Napomena :  Kod sa innerHTML += je jednostavan za početnike, ali je sporiji u realnim aplikacijama

---

Zadaci za vežbu

Zadatak 1:  Napraviti listu: unos proizvoda i dodavanje u listu

---

Zadatak 2: Dodati mogućnost: klik na element → briše ga

---

Zadatak 3: Napraviti listu brojeva od 1 do 10 (automatski)

---

Rešenje (samo jedno) 

for (var i = 1; i <= 10; i++) {
    lista.innerHTML += "<li>" + i + "</li>";
}

---

3 – DINAMIČKO UČITAVANJE PODATAKA (AJAX)

Problem koji rešavamo

Bez Ajax-a će svaka promena da izazove → reload cele web stranice.

Sa Ajax-om će podaci da se učitavaju u pozadini (bez reloada cele stranice)

---

Šta je Ajax?

Ajax omogućava komunikaciju sa serverom bez osvežavanja stranice

---

Primer 1 – učitavanje teksta

<button onclick="ucitaj()">Učitaj</button>
<p id="rez"></p>

<script>
function ucitaj() {
    fetch("tekst.txt")
    .then(r => r.text())
    .then(data => {
        document.getElementById("rez").innerHTML = data;
    });
}
</script>

---

Primer 2 – rad sa JSON podacima

fetch("podaci.json")
.then(r => r.json())
.then(data => {
    console.log(data);
});

---

Primer 3 – prikaz podataka

fetch("proizvodi.json")
.then(r => r.json())
.then(data => {
    var lista = document.getElementById("lista");

    for (var i = 0; i < data.length; i++) {
        lista.innerHTML += "<li>" + data[i].naziv + "</li>";
    }
});

---

Kako izgleda JSON

[
  { "naziv": "Pizza" },
  { "naziv": "Palačinka" }
]

---

Zadaci za vežbu (čas 3)

Zadatak 1: Učitati tekst iz fajla i prikazati ga

---

Zadatak 2: Učitati JSON i prikazati listu

---

Zadatak 3:  Napraviti dugme kojim se učitava meni picerije iz JSON fajla

---

Rešenje (samo jedno) 

fetch("meni.json")
.then(r => r.json())
.then(data => {
    for (var i = 0; i < data.length; i++) {
        lista.innerHTML += "<li>" + data[i].naziv + "</li>";
    }
});

---

Zadaci za vežbu kod kuće

Zadatak 1:  Forma:  ime, prezime, godine ....  na kraju treba izvesti ispis svih podataka

---

Zadatak 2:  Mini kalkulator: unos 2 broja i sabiranje

---

Zadatak 3:  Lista zadataka (ToDo): unos, dodavanje, brisanje

---

Zadatak 4: Mini picerija: učitavanje menija (JSON) i prikaz liste

---

Zadatak 5 (napredni): Sat: prikaz vremena, automatsko osvežavanje (setInterval)

---

---

...