Vežbe za 23/24.02
Kliknite na sledeće dugme, radi demonstracije:
Sve delove koda ( ili objašnjenja koja su malo duža ) sakrivamo iza dugmića, radi preglednosti.
Kada završite sa čitanjem ovoga dela, ponovo kliknite na dugme da se opet sakrije
1.grupa - Zadatak - Užina:
Detalji:
- na vrhu treba da je naslov: Užina
- ispod njega treba da se nalazi slika nekog jela koje volite kao užinu
- slika treba da je na sredini ekraha i da njena širina ne prelazi pola širine ekrana!
- Ispod slike treba da se nalazi forma koja je podeljena na dva dela:
- U prvom delu se bira jedno od ponuđenih jela
- U drugom delu se biraju prilozi (nijedan, jedan ili više)
- Ispod ta dva dela, na dnu forme treba da su dva dugmeta:
- jedno za odustajanje od narudžbe (type="reset")
- drugo za poručivanje (type="submit")
- Postavljanjem porudžbine treba da se otvori akcija (poruci.php) gde se ispisuje šta je sve naručeno
- Podzadatak:
- Postaviti polje gde se unosi ime poručioca, tako da se u akciji prvo pozdravlja korisnik sa unetim imenom a tek onda da se ispisuje šta je naručeno
2. grupa - Zadatak - Palačinke:
Detalji:
- na vrhu treba da je naslov: Palačinkarnica Disney
- ispod njega treba da se nalazi slika palačinki
- slika treba da je na sredini ekraha i da njena širina ne prelazi pola širine ekrana!
- Ispod slike treba da se nalazi forma koja je podeljena na dva dela:
- U prvom delu se bira jedna od dve opcije: slatke ili slane palačinke
- U drugom delu se biraju prilozi (nijedan, jedan ili više)
- Ispod ta dva dela, na dnu forme treba da su dva dugmeta:
- jedno za odustajanje od narudžbe (type="reset")
- drugo za poručivanje (type="submit")
- Postavljanjem porudžbine treba da se otvori akcija (akcija.php) gde se ispisuje šta je sve naručeno
- Podzadatak:
- Postaviti polje gde se unosi ime poručioca, tako da se u akciji prvo pozdravlja korisnik sa unetim imenom a tek onda da se ispisuje šta je naručeno
Dodatak - osnove PHP-a:
- Pogledajte kod kuće plejlistu za PHP vašeg vršnjaka - kratki video snimci za pojedine pojmove
(do video snimka br 33 je za 3. razred)
DODATAK - ANALIZA:
Sledeći deo je postavljen nakon održanog časa u učionici:
U nastavku je, iza dugmeta, prikazan postupak rada prilikom kreiranja zadate web aplikacije
- kreirati folder unutar \XAMPP\htdocs (u ovom primeru je naziv foldera "gricko")
- u tom folderu kreirati dva fajla: index.html i obrada.php
- U index.html uneti osnovni html kod
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Moja WEB stranica za naručivanje užine</title></head><body>
<!-- a ovde ide glavni deo -->
</body></html>
Zatim:
Dalje se, naravno, radi u body delu gde:
<h1>Užina</h1>
<img src="slika.png" >
(Ako treba, koristi se CSS za menjanje pozicija, boja, ...)
<form action="obrada.php" method="get">
<label for="ime">Unesite vaše ime i prezime</label>
<input type="text" name="ime" >
<label for="uzina">Odaberite užinu:</label><br>
<input type="radio" name="hrana" value="Sendvič">Sendvič <br>
<input type="radio" name="hrana" value="Pljeskavica">Pljeskavica <br>
<input type="radio" name="hrana" value="Belo meso">Belo meso <br>
<input type="radio" name="hrana" value="Šiš ćevap">Šiš ćevap <br>
<input type="checkbox" name="salata">Salata <br>
<input type="checkbox" name="paradajz">Paradajz <br>
<input type="checkbox" name="luk">Luk <br>
<button type="reset"> Neću da jedem </button>
<button type="submit"> Naruči </button>
</form>
Primetimo da je samo ovaj put "zaboravljeno" postavljanje value za checkbox-ove - to je u cilju pokazivanja opcije isset.
U formi je postavljeno action="obrada.php", što znači, kada se klikne na dugme koje je tipa submit, podaci iz forme se šalju u taj fajl gde se vrši njihova obrada ako treba.
U formi je postavljem method="get" (ako se ne napiše method, tada je podrazumevano GET)
Nakon što je kreirana početna stranica, treba da se od WEB servera TRAŽI da je isporuči.
To se vrši tako što se u Browseru kuca web adresa servera.
Pošto se radi na lokalnom računaru, za web adresu servera je dovoljno kucati localhost
Web server isporučuje stranicu koja se nalazi u direktorijumu koji je podešen da bude web root - početak - i to je u ovom slučaju unutar XAMPP foldera, folder htdocs. To može da se promeni, ali se sada time ne bavimo.
... Ali, ako se nakon web adrese servera unese kosa crta (/) iza koje stoji naziv foldera unutar web root-a, u kojem je ova web aplikacija (localhost/gricko), tada se otvara web atranica koja se nalazi unutar tog foldera.
Pažnja: Ako postoji html ili php fajl sa nazivom index, onda će se otvoriti automatski, ali ako ne postoji, ako se naziv web stranice razlikuje, tada će se prikazati samo spisak svih fajlova u folderu !
Znači: kucanjem u URL sledeće web adrese localhost/gricko biće prikazana web stranica koja je upravo kreirana.
Ako se nešto unese u input polja i pokuša naručiti: desiće se ili otvaranje prazne stranice (jer još ništa nije upisano u fajl obrada.php) ili će se javiti greška ako taj fajl ne postoji.
U ovom primeru se podaci o narudžbi šalju ka web serveru u fajl obrada.php.
Način na koji se šalji podaci:
Pošto je u formi postavljeno da je method="get", u PHP super globalnu promenljivu $_GET se šalju parovi name=>value svih elemenata iz forme. Uvek je name ono što je upisano kao atribut name (unutar tagova). Value se postavlja kao atribut value kod radio ili checkbox-a, a ako je input polje text tipa, onda je value ono što je korisnik ukucao u polje.
Te vrednosti se mogu koristiti direktno poyivanjem npr $_GET['ime'], ili se mogu postaviti u php promenljivu pa d se kasnije koriste, kao npr $ime = $_GET['ime'];
Međutim, ako je u pitanju neko polje koje može da se "čekira", u tom slučaju se ne mora proveravati value, već može i da se proveri da li je neko polje "čekirano" - isset().Dodatno: i name i value su u stvari stringovi koji se pišu između navodnika - nebitno je da li su jednostruki ili dvostruki navodnici (za PHP) ....
Dodatak 2: PHP je CASE SENSITIVE - Ako ste pisali name='ime', morate pisati $_GET['ime'] , -> Ne radi ako stavite na jedno mesto sa velikim a na drugo mesto sa malim slovima !!!
<?php
if(!empty($_GET['hrana'])) // ako je bilo šta odabrano
{
echo "Pozdrav gospodine ".$_GET['ime']; // stringovi se "spajaju" sa tačkom
echo "<br>Izabrali ste ". $_GET['hrana'];
echo "<br>Dodaci:<br>";
if(isset($_GET['salata'])) // ako je "čekirana" salata
{
echo "<br>->Zelena salata";
}
if(isset($_GET['paradajz']))
{
echo "<br>->Kolutovi paradajza";
}
if(isset($_GET['luk']))
{
echo "<br>->Luk";
}
}
else // ako ništa nije odabrano, od ponuđenih opcija sa radio button-ima
{
echo "Niste izabrali užinu";
}
?>
Analiza zadatka druge grupe neće biti postavljana. Ostavlja se učenicima da ovaj zadatak urade kao vežbu.