1. deo: html/css

Prvo se podsetiti kako se kreira forma i kako da sve to bude na sredini stranice sa css-om

Prvo html:

    Kreirati fajl index.php i u njemu osnovni html kod koji je povezan sa css fajlom koji se takođe kreira,

Postavke:

  • Nastavljamo da radimo direktno na web serveru - XAMPP - pa vam treba uključen Apache i MySql
  • Da ne bismo menjali postavke za Apache, radimo direktno u localhost direktorijumu - zato sve što radite treba da je unutar \xampp\htdocs foldera
  • Ne zaboravite da radite u novom folderu unutar vašeg foldera - npr d:\xampp\webAca\zadatakF1 (webAca je u ovom primeru naziv foldera onoga ko radi zadatak, a unutar htdocs-a, a zadatakZ1 je folder u kojem se radi ovaj zadatak) - vi unesite naziv koji god želite (dokle god nema razmaka, ćirilice, ili brojeva na početku...)

U body delu dodati formu kojom će korisnik da unosi u bazu podataka neke podatke:

  • Pošto će se koristiti baza podataka iz prethodne lekcije (prva grupa "Slonovi", druga grupa "Torte") postaviti polja za unos podataka i dugme na dnu.
  • Zbog preglednosti na vrhu vaše web stranice treba da se nalazi naslov i podnaslov
  • Kompletna web forma sa kojom se radi treba da se nalazi u na sredni ekrana, sa drugačijom bojom pozadine u odnosu na ostatak pozadine - ovo rešiti pomoću css-a

U nastavku je iza plavih dugmića prikazano kako smo radili u PRVOJ GRUPI (klik na dugme za prikaz/sakrivanj)

<!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>Skola za slonove</title>
    <link rel="stylesheet" href="stil.css">
</head>
<body>
    <div class = "container">
      <h1>Upis u skolu</h1>
      <h2>(za slonove)</h2>
    <h3>dodajemo u tabelu mladunce</h3>
    <form action="upis.php" method = "get">
    <label for="ime">Ime:</label>
    <input type="text" name="ime" id="ime">
<br><br>
    <label for="godiste">Godiste:</label>
    <input type="number" name="godiste" id="god">
<br><br>
    <button type="submit">Upisi</button>
    </form>
    </div>
</body>
</html>
.container
{
    background-color: aqua;
    width: 50%;
    min-height: 500px;
    margin: 10% auto;
    padding: 50px;
    font-size: 1.5em;
    border: 1px solid black;
    border-radius: 20%;
}

A iza žutih dugmića je prikazano kako smo radili DRUGOJ GRUPI

<!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">
    <link rel="stylesheet" href="stil.css">
    <title>Kolaci</title>
</head>
<body>
 <div class="container">
   <h1>KOLACI</h1>
   <h2>Unos novog kolaca</h2>
   <h3>(u bazu kolaca)</h3>
   <form action="upis.php" method="get">
    <label for="naziv">Naziv kolaca:</label>
    <input type="text" id="naziv" name="naziv">
    <br><br>
    <label for="tezina">Tezina:</label>
    <input type="number" name="tez" id="tezina">
    <br><br>
    <button type="submit">Unesi</button>
</form>
</div>
</body>
</html>

2. deo - php

Kreirati fajl u koji se iz forme šalju podaci: upis.php:

Na način kao na prethodnom času se povezati na bazu podataka i uneti podatke iz forme u posebne promenljive koje se onda unesu u tabelu

Prvo :

u formi je postavljen atribut action="upis.php" - To znači da će se svi podaci prilikom submit-a  poslati u fajl upis.php. Stoga prvo kreiramo fajl upis.php

Drugo:

postavljen je method="get" - ovo je oznaka načina na koji se šalju podaci.
            (Ovaj metod slanja manje je siguran nego metod post jer se kod get metode sve što se šalje ujedno vidi i u URL-u.)

 Za nas je bitno to što će se svi podaci koji stignu u fajl upis.php moći dobiti pomoću super globalne promenljive $_GET. - To je u stvari asocijativni niz u kojem se dobiju parovi ključeva i vrednosti: svaku ključ je name input elementa a njemu odgovarajuća vrednost je ono što je korisnik uneo. (Da smo koristili metod post, koristili bismo super globalnu promenljivu $_POST)

Da bi nam bilo lakše da radimo, mi na početku možemo da te vrednosti postavimo u promenljive.

Kako to izgleda u prethodnim zadacima:

prva grupa ( maldunci slonova ) druga grupa ( kolaci )
<?php
$imeSlona = $_GET["ime"];
$godisteSlona = $_GET["godiste"];
<?php
$nazivKolaca = $_GET['naziv'];
$tezinaKolaca = $_GET['tez'];

(Promenljive u PHP-u počinju sa znakom $, jer ako toga nema onda nije promenljiva već konstanta  )

Treće:

vezu sa bazom postavljemo koristeći obkektno orijentisani pristup:

$veza = new mysqli("naziv servera","ime korisnika","password","naziv baze");
U našem slučaju je naziv servera localhost, a pošto nismo ništa menjali iz početnih postavki, ime korisnika je root, a password je ostavljen prazan. Bez obzira što nemamo password, potrebno je to postaviti kao par dvostrukih navodnika između kojih nema ništa ! Na kraju unosimo naziv baze kojoj se pristupa.
 
Ako nema nikakvih grešaka prilikom kreiranja konekcije (koja se u našem slučaju zove $veza), kreiranjem objekta je kreirana i otvorena konekcija.
prva grupa ( mladunci slonova ) druga grupa ( kolaci ) 
$veza = new mysqli("localhost","root","","slonovi");
 
$veza = new mysqli("localhost", "root", "", "torte");
Objekat $veza predstavlja konekciju i kao objekat biće kreiran bez obzira da li je veza uspostavljena ili ne. Ako postoji neki problem i veza nije uspostavljena, povratna vrednost će biti false i možemo tražiti da se ispiše connect_error (sa ili bez zagrada na kraju - oboje je ispravno).
if($veza === false)
{
    die("Greska".$veza->connect_error);
}
Ako veza nije uspostavljena, ugrađena funkcija die će da ispiše poruku koja joj je data u zagradama i da izađe iz skripte!
 
( Umesto  if($veza === false), moglo je i da se koristi i if ($mysqli -> connect_errno) ....  )
 
Četvrto:
Koristimo upit nad bazom: nad objektom koji je konekcija izvršimo upit

$upit="ovde ide upit koji se koristi":

$veza->query($upit)
 Ako je upit takav da postoje rezultati, sa uspešnim izvršenjem se dobija skup rezultata. Ako ne postoje rezultati koji bi se vratili, a upit je izvršen uspešno, vratiće se true. Međutim, ako upit ne može da se izvrši kao rezultat će se dobiti se false.
 
Jedan od načina provere, ako se vrši upit koji ne vraća rezultate:
 
if($veza->query($upit)===true)
{
echo " Uspesno upisano";
}
else
{
    echo "Nije moguce izvrsiti $upit".$veza->error;
}

(U nekim slučajevima bi moglo da bude dovoljno ako bi se samo proverilo da li postoji greška i da se u tom slučaju izađe iz skripte)

U ovom delu zadatka se radi o upisu podataka u tabelu u bazi - nema vraćanja rezultata ka korisniku ali je potrebno znati da li se upit iizvršio uspešno ili ne!

U nastavku su zadaci, onako kako su rađeni na času u učionici:, iza dugmića kojim se prikazuju ili sakrivaju:

<?php
$imeSlona = $_GET["ime"];
$godisteSlona = $_GET["godiste"];
echo "Uneli ste slona sa imenom $imeSlona , i godistem $godisteSlona";
 
$veza = new mysqli("localhost","root","","slonovi");

if($veza === false)
{
    die("Greska".$veza->connect_error);
}

$upit = "insert into mladunci(ime,godiste) values('$imeSlona',$godisteSlona)";
if($veza->query($upit)===true)
{ echo " Uspesno upisano"; }
else
{ echo "Nije moguce izvrsiti $upit".$veza->error; }
$veza->close();
?>
<?php
$nazivKolaca = $_GET['naziv'];
$tezinaKolaca = $_GET['tez'];
 
$veza = new mysqli("localhost", "root", "", "torte");
 
if($veza === false)
{
    die("Veza ne valja. Problem:".$veza->connect_error);
}
 
$upit = "INSERT INTO tortice(naziv, tezina)
        VALUES('$nazivKolaca', $tezinaKolaca)";
 
if($veza->query($upit) === true)
{   echo "Uspesno upisano u bazu"; }
else
{   echo"Nije upisano. Upit ne valja ($upit)"; }
 
$veza->close();
?>

3. deo: ispis tabele - php

Na istoj stranici gde se vrši upis dodati nakon poruke o uspešnom upisu i ispis svega što imamo u tabeli (isti fajl upis.php)

Ispod staviti link ka povratku na prethodnu stranu !

Pošto već imamo vezu tabeli u bazi, jedino što nam treba je upit kojim se prikazuje sve iz te tabele. Kao rezultat se dobija onoliko redova koliko ih ima u traženoj tabeli. Rezultat upita ćemo postaviti u neku promenljivu ($rezultat na primer) sa kojom dalje radimo. Ako je sve ok, trebalo bi da dobijemo sve one podatke koje smo uneli prilikom dosadašnjih testiranja.

Jedan od načina:

if($rezultat = $veza->query($upit)) //ako je uspesno izvrsen upit
{
// onda se radi ono sto je izmedju ovih zagrada
}
else // u suprotnom se ispiše u čemu je greška
{
    echo "Nije moguce izvrsiti $upit".$veza->error;
}
A u okviru onog dela gde se radi, moguće je proveriti koliko je redova dobijeno u rezultatu:
if($rezultat->num_rows>0)
{
// ovde se radi ako ima više od 0 redova u rezultatu
 }
 else
  {
       echo "Nije pronadjen ni jedan podatak koji odgovara vasem upitu";
  }
Preuzimanje jednog po jednog reda podataka, koliko god da ih ima, se može vršiti na sledeći način:
while($red = $rezultat->fetch_array())
        {
// i za svaki red koristiti dobijene podatke
}
U nastavku su kompletni kodovi za upis.php za obe grupe, onako kako je rađeno u učionici:
<?php
$nazivKolaca = $_GET['naziv'];
$tezinaKolaca = $_GET['tez'];
 
$veza = new mysqli("localhost", "root", "", "torte");
 
if($veza === false)
{     die("Veza ne valja. Problem:".$veza->connect_error); }
 
$upit = "INSERT INTO tortice(naziv, tezina) VALUES('$nazivKolaca', $tezinaKolaca)";
 
if($veza->query($upit) === true)
{   echo "Uspesno upisano u bazu"; }
else
{   echo"Nije upisano. Upit ne valja ($upit)"; }
 
echo "<hr>Do sada imamo<br>";
$upit = "SELECT * FROM tortice";
if($rez = $veza->query($upit))
{
    if($rez->num_rows>0)
    {
        echo "<table>";
        echo "<tr>";
        echo "<th>ID</th><th>Naziv kolaca / torti</th><th>Tezina</th></tr>";
        while($red=$rez->fetch_array())
        {
            echo "<tr>";
            echo "<td>".$red['id']."</td>";
            echo "<td>".$red['naziv']."</td>";
            echo "<td>".$red['tezina']."</td>";
            echo "</tr>";
        }
        echo "</table>";
        $rez->free();
    }
    else
    {
        echo "Izvrsen upit. Nema nista unutra";
    }
}
else
{
    echo "Ne mogu izvrsiti upit".$upit;
}
$veza->close();
?>
<a href="index.html">Pocetna</a>
<?php
$imeSlona = $_GET["ime"];
$godisteSlona = $_GET["godiste"];

$veza = new mysqli("localhost","root","","slonovi");
 
if($veza === false)
{     die("Greska".$veza->connect_error); }

$upit = "insert into mladunci(ime,godiste) values('$imeSlona',$godisteSlona)";
 
if($veza->query($upit)===true)
{ echo " Uspesno upisano"; }
else
{   echo "Nije moguce izvrsiti $upit".$veza->error; }


echo "<br><hr><h2>Do sada imamo sledece mladunce</h2>";
$upit = "select * from mladunci";
if($rezultat = $veza->query($upit))
{
    if($rezultat->num_rows>0)
    {
        echo"<table>";
        echo"<tr>";
        echo"<th>id</th><th>ime</th><th>godiste</th><tr>";
        while($red = $rezultat->fetch_array())
        {
            echo "<tr>";
            echo "<td>".$red['id']."</td>";
            echo "<td>".$red['ime']."</td>";
            echo "<td>".$red['godiste']."</td>";
            echo "</tr>";
        }
        echo "</table>";
        $rezultat->free();
    }
    else
    {
        echo "Nije pronadjen ni jedan podatak koji odgovara vasem upitu";
    }
}
else
{
    echo "Nije moguce izvrsiti $upit".$veza->error;
}

$veza->close();

?>
<a href = "index.php">Povratak na pocetnu stranu</a>

Na kraju se zatvara konekcija sa:

$veza->close();

PHP kod se završava sa:

?>

Napomene:

  • Možete imati koliko god hoćete delova sa php kodom u jednom fajlu
  • deo gde je php počinje sa <?php i završava sa ?>
  • Ako pišete html kod fajl ima nastavak .html
  • Ako u okviru html koda imate makar jednu liniju u kojoj se nalazi php, tada fajl treba da ima nastavak .php
  • ako se fajl završava sa .html onda se izvršava na strani kod korisnika
  • Čak i ako nema ni jedna linija php koda, čak i ako je sve čist html, fajl i dalje može imati .php na kraju, ali ...
  • Ako se fajl završava sa .php, onda se izvršava NA STRANI SERVERA, a korisnik dobija rezultat nakon obrade sa strane servera - i vidi samo html kod ...
  • . . . .

Dodatak za kraj časa:

Dodati deo u kojem radi i brisanje iz baze :

Na početnoj strani se dodaje još jedna forma u kojoj treba da se nalazi input polje za unod ID-a reda koji se bruše:

Dodati deo u kojem radi samo prikaz iz baze :

Na dnu početne strane ugraditi način za biranje prikaza na sledećoj strani - može samo dugme ili link ili posebna forma za to:

Savet: Upotrebiti INCLUDE ili REQUIRE da se ne bi višestruko kucao isti kod

U nastavku su arhive zadataka sa časa (spakovano): iz ucionice --- arhiva zadataka - it41.7z

Last modified: Sunday, 2 November 2025, 5:24 PM