Pravljenje proste forme pomoću PHP i MySQL

1.deo

U današnjem tutorijalu, pokazaću vam neke osnovne stvari koje se tiču HTML formi, pomoću PHP-a i MySQL-a.

Dosta od ovoga sam naučio od Tania Rascia-e, tako da će dosta stvari biti slično, samo što ću se ja dodatno baviti i podešavanjem lokalnog servera, phpMyAdmin-om, slikama, kao i loginom i registracijom.

Za ovaj tutorijal je potrebno osnovno znanje HTML-a i CSS-a.


1. Podešavanje lokalnog servera i phpMyAdmina


Pre nego što uopšte krenemo sa kuckanjem, potrebno je da preuzmete WampServer kako biste mogli da napravite server lokalno na računaru. Nakon instalacije, potrebno je samo pokrenuti program koji će sve podići automatski za vas.

Dalje, u pretraživaču ukucajte localhost/phpmyadmin što će vas odvesti na login stranicu phpMyAdmin-a. Username je root, bez šifre. Kada se ulogujete, videćete vertikalni meni sa leve strane sa listom svih baza, a na vrhu će pisati New. Za ime baze stavite realestate, pošto će baza koju ćemo praviti, pa samim tim i forma, biti vezane za nekretnine. Ime baze je naravno proizvoljno, ja sam izabrao ovako zbog primera. Kliknite na Create i nakon učitavanja novog ekrana, napravite tabelu houses koja ima 4 kolone. Kolone će biti za lokaciju, cenu, kvadraturu i ID kuće.

Na novom ekranu, popunite prvi red ovako:
Name -> id, Type-> INT, Length/Values -> 10 i štiklirajte A_I field (A_I znači Auto_Increment, tj. ID će se automatski povećavati sa svakim novim unosom kuće u bazu). Kada kliknete na A_I, iskočiće vam prozorčić, kliknite Go
Drugi red popunite:
Name -> location, Type->VARCHAR, Length/Values -> 20
Treći red popunite:
Name -> price, Type->VARCHAR, Length/Values -> 20
Četvrti red popunite:
Name -> size, Type->VARCHAR, Length/Values -> 20

Nakon ovoga, kliknite Save i tabela houses će biti napravljena.

Sada, u levom vertikalnom meniju, kliknite na houses, potom na vrhu ekrana ćete videti Insert, kliknite na to. Ovde u Value polja unećemo: 1, New York, 500, 60 kao id, location, price, size, redom. Nakon toga, kliknite Go i spremni smo. :)

Ako vam je ovo bilo mnogo do sada, kratak rezime šta smo uradili:
- podigli lokalni server pokretanjem programa WampServer
- pokrenuli phpMyAdmin koji će nam služiti kao pregled baze podataka
- kreirali novu bazu podataka pod nazivom realestate
- kreirali novu tabelu u toj bazi, pod nazivom houses
- definisali kolone u toj tabeli, pod nazivom id, location, price, size
- uneli podatak u tu tabelu


2. Kodiranje

Počećemo pravljenjem fajla: index.php. U ovom fajlu, napravićemo formu sa 3 polja i 3 labele za ta polja. Forma koju pravimo je vezana za nekretnine, tako da će ta 3 polja biti lokacija(location), cena(price) and kvadratura(size) nekretnine.

U index.php imaćemo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<title>Basic form</title>
</head>
<body>

<h2>Simple PHP form</h2>    

<form method="post">
    <label for="location">Location:</label>
    <input type="text" name="location" id="location"> <br>

    <label for="price">Price:</label>
    <input type="text" name="price" id="price"><br>

    <label for="size">Size:</label>
    <input type="text" name="size" id="size"><br>

    <input type="submit" name="submit" value="Submit">

</form>

</body>
</html>

Opcija method="post" govori serveru kako ćemo slati podatke iz forme. Postoje dva načina slanja podataka, metodom POST ili metodom GET.

POST metodom podaci nisu vidljivi u url-u, dok sa GET metodom možemo videti podatke u url-u. Korišćenje GET metode generalno nije preporučeno kada se radi sa privatnim podacima. U nekim tutorijalima možete videti action="something" u formi i to se koristi kada želimo da prikažemo rezultate na drugoj stranici ili da zovemo neku funkciju. Ovde nam to neće biti potrebno, jer ćemo rezultate prikazivati na istoj stranici, bez pozivanja funkcije.

Input tag se uvek sastoji od 3 atributa: type, name i id. Type zavisi od tipa opcija koje dajemo korisniku; type="text" dozvoljava korisniku da unese tekst, type="radio" pravi radio dugme, type="checkbox" pravi opciju za štikliranje, itd. Tip inputa se može menjati u zavisnosti od onoga šta vam treba.

Koristimo 3 tekstualna inputa i jedan submit input. Submit input će poslati podatke iz forme serveru. Value opcija definiše šta će pisati u tom dugmetu.

Sada kada smo podesili HTML stranu, možemo preći na PHP i MySQL.

Iznad HTML koda, otvaramo PHP kod: 

1
2
3
<?php
?>

Ovo je sintaksa PHP-a i između ovih 'ograda' pišemo PHP kod. Prvo ćemo proveriti da li su podaci uopšte poslati, tj. da li su sva polja forme popunjena. To radimo pomoću isset() funkcije koja proverava da li je globalna promenljiva $_POST['ime_inputa'] podešeno. Inputima smo dali imena kada smo ih definisali, tako da proveravamo $_POST['submit'].

Ovako će izgledati kod:

1
2
3
4
5
<?php 
if(isset($_POST['submit'])){
//next code goes here
}
?>

Sav kod vezan za formu će ići u if deo. Počinjemo sa try-catch blokom. Try-catch blok radi ono što mu naziv kaže: pokušava da izvrši neki deo koda i ukoliko nešto pođe po zlu šalje Error koji se hvata u catch bloku.

Prvo definišemo promenljivu $connection koja će nam davati informacije o bazi. Dodaću config.php fajl kasnije, pa će stvari biti jasnije. (slučajna rima) Za sada, prekucajte kao i ja:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<?php
    if(isset($_POST['submit'])){
        try{
            $connection = new PDO($dsn, $username, $password, $options);
            
        }catch(PDOException  $error){
            echo $error->getMessage();
        }
    }

?>

Kao što vidite, naš catch blok će hvatati PDOException, staviti ga u promenljivu $error i zatim ćemo echo(štampati) ovu poruku. Zapamtite, sav ovaj PHP kod je u index.php fajlu, iznad HTML koda.

Sledeće, dodajemo MySQL.

Za sada, naši podaci su upisani u formu i sada želimo da ih ubacimo u upit i pošaljemo bazi na koju smo se povezali pomoću $connection promenljive. Ispod promenljive, pišemo SQL upit: $sql = "SELECT * FROM houses WHERE location = :location AND price = :price AND size = :size;"

Ovi :location, :price and :size parametri predstavljaju parametre kojima će biti pridružene vrednosti, pa ih možemo posmatrati kao nekakvog 'džokera' s obzirom da njihova vrednost zavisi od vrednosti koja je prosleđena u formi.

Sledeće, podatke koje smo primili u formi upisujemo u promenljive. Imaćemo
$location = $_POST['location'];
$price = $_POST['price'];
$size = $_POST['size'];
 Location, price i size koji su u $_POST[''] su u stvari imena inputa koje smo definisali. Na primer da smo imali input sa imenom nekiInput, stavili bismo $nekiInput = $_POST['nekiInput'].

Za sada imamo ovo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
    if(isset($_POST['submit'])){
        try{
            $connection = new PDO($dsn, $username, $password, $options);
            
            $sql = "SELECT *
                    FROM houses
                    WHERE location = :location
                    AND price = :price
                    AND size = :size";
            
            $location = $_POST['location'];
            $price = $_POST['price'];
            $size = $_POST['size'];
            
            
            
        }catch(PDOException $error){
            echo $error->getMessage();
        }
    }

?>

<!DOCTYPE html>
<html>
<head>
<title>Basic form</title>
</head>
<body>

<h2>Simple PHP form</h2>    

<form method="post">
    <label for="location">Location:</label>
    <input type="text" name="location" id="location"> <br>

    <label for="price">Price:</label>
    <input type="text" name="price" id="price"><br>

    <label for="size">Size:</label>
    <input type="text" name="size" id="size"><br>

    <input type="submit" name="submit" value="Submit">

</form>

</body>
</html>

Pošto smo vrednosti iz forme upisali u promenljive, možemo te vrednosti pridružiti parametrima iz upita. Kada vrednosti pridružujemo parametrima, koristimo pripremljene naredbe.

Prvo, pripremićemo SQL upit: $statement = $connection->prepare($sql);

Zatim, pridružićemo parametre, jedan po jedan:
$statement->bindParam(":location", $location, PDO::PARAM_STR);
$statement->bindParam(":price", $price, PDO::PARAM_STR);
$statement->bindParam(":size", $size, PDO::PARAM_STR);
Funkcija bindParam() pridružuje vrednost iz promenljive parametru iz upita. Treći parametar, PDO::PARAM_STR radi baš to, pridružuje PARAMetar STRingu.

Nakon pridruživanja, sve što treba da uradimo je da izvršimo naredbu:
$statement->execute();

Nakon izvršene naredbe, dohvatamo rezultate:
$result = $statement->fetchAll();

Ovim završavamo PHP kod koji je na vrhu strane i prelazimo na HTML u koji ćemo ugraditi još PHP-a.
Za sada nam kod izgleda ovako:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?php
    if(isset($_POST['submit'])){
        try{
            require "config2.php";
            
            $connection = new PDO($dsn, $username, $password, $options);
            
            $sql = "SELECT *
                    FROM houses
                    WHERE location = :location
                    AND price = :price
                    AND size = :size";
                        
            
            
            $location = $_POST['location'];
            $price = $_POST['price'];
            $size = $_POST['size'];
            
            
            $statement = $connection->prepare($sql);
            
            $statement->bindParam(":location", $location, PDO::PARAM_STR);
            $statement->bindParam(":price", $price, PDO::PARAM_STR);
            $statement->bindParam(":size", $size, PDO::PARAM_STR);
            
            $statement->execute();
            
            $result = $statement->fetchAll();
            
            
            
        }catch(PDOException $error){
            echo $error->getMessage();
        }
    }

?>

<!DOCTYPE html>
<html>
<head>
<title>Basic form</title>
</head>
<body>

<h2>Simple PHP form</h2>    

<form method="post">
    <label for="location">Location:</label>
    <input type="text" name="location" id="location"> <br>

    <label for="price">Price:</label>
    <input type="text" name="price" id="price"><br>

    <label for="size">Size:</label>
    <input type="text" name="size" id="size"><br>

    <input type="submit" name="submit" value="Submit">

</form>

</body>
</html>

Sada ću vam pokazati kako da prikažete rezultat upita. Šta smo uradili do sad? Uneli smo neke podatke u formu, pitali bazu za te podatke i baza je vratila nekakav rezultat (da podaci postoje u bazi ili da ne postoje).

Ispod HTML forme, ugradićemo PHP:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?php
        if(isset($_POST['submit'])){
            if($result && $statement->rowCount() > 0){?>
                <h2>Available houses:</h2>
        <?php 
            foreach($result as $row){
                echo "Location: " . $row['location'] . "<br>";
                echo "Price: " . $row['price'] . "<br>";
                echo "Size: " . $row['size'] . "<br>";
            }
        
            }
        }
    ?>

Ovde proveravamo da li je rezultat koji je vratila baza veći od 0 ili ne. Ako jeste, znači da smo pronašli podatke u bazi, a ako nije, znači da u bazi ne postoji ono što nam treba.
To radimo kodom: $statement->rowCount() > 0.

Ako je to tačno, štampamo rezultat. Pošto je $result niz, ulazimo u foreach petlju koja ide kroz taj niz i zatim štampamo kolone iz tabele houses. Ovde nisam ištampao ID kolonu, ali naravno da može i to.

Pre nego što konačno pritisnemo Submit, vraćamo se na config.php fajl i stavljamo require "config.php" iznad try-catch bloka.

3. Pisanje config.php fajla

Namerno sam ovo ostavio za kraj jer je najkraći deo, ali možete ovo raditi kad god u toku pravljenja forme.

Napravite novi fajl pod nazivom config.php. U ovom fajlu će se nalaziti parametri za povezivanje sa bazom:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php

$host = "localhost";
$username = "root";
$password = "";
$dbname = "realestate";
$dsn = "mysql:host=$host;dbname=$dbname";
$options = array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION);

?>

Verujem da nema nejasnoća ovde, osim za $options, a ono što ta promenljiva radi je da kaže da svaki error tretiramo kao exception i hvatamo ga u catch bloku.

Konačno, naš kod izgleda ovako:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?php
    if(isset($_POST['submit'])){
        try{
            require "config2.php";
            
            $connection = new PDO($dsn, $username, $password, $options);
            
            $sql = "SELECT *
                    FROM houses
                    WHERE location = :location
                    AND price = :price
                    AND size = :size";
                        
            
            
            $location = $_POST['location'];
            $price = $_POST['price'];
            $size = $_POST['size'];
            
            
            $statement = $connection->prepare($sql);
            
            $statement->bindParam(":location", $location, PDO::PARAM_STR);
            $statement->bindParam(":price", $price, PDO::PARAM_STR);
            $statement->bindParam(":size", $size, PDO::PARAM_STR);
            
            $statement->execute();
            
            $result = $statement->fetchAll();
            
            
            
        }catch(PDOException $error){
            echo $error->getMessage();
        }
    }

?>

<!DOCTYPE html>
<html>
<head>
<title>Basic form</title>
</head>
<body>

<h2>Simple PHP form</h2>    

<form method="post">
    <label for="location">Location:</label>
    <input type="text" name="location" id="location"> <br>

    <label for="price">Price:</label>
    <input type="text" name="price" id="price"><br>

    <label for="size">Size:</label>
    <input type="text" name="size" id="size"><br>

    <input type="submit" name="submit" value="Submit">

</form>
    
    <?php
        if(isset($_POST['submit'])){
            if($result && $statement->rowCount() > 0){?>
                <h2>Available houses:</h2>
        <?php 
            foreach($result as $row){
                echo "Location: " . $row['location'] . "<br>";
                echo "Price: " . $row['price'] . "<br>";
                echo "Size: " . $row['size'] . "<br>";
            }
        
            }
        }
    ?>

</body>
</html>

Za sada smo uradili samo osnovne stvari. Formu možemo popuniti vrednostima iz baze, s obzirom da imamo samo jednu kolonu u bazi, a to su: Location -> New York, Price -> 500, Size -> 50. Nakon što pritisnete Submit, trebalo bi da dobijete nešto poput ovoga:

Ako formu popunimo nekim drugim podacima, neće nam dati rezultate, jer u bazi u tabeli imamo samo ovu jednu kuću. U sledećem delu, proći ćemo kroz obradu grešaka i popunjavanje forme bez da smo popunili sve inpute (npr. zanima nas samo cena kuće, ne lokacija).




Hvala što ste čitali, nadam se da je bilo korisno. :)

Lazar Ristić