Sveučilište u Zagrebu

Fakultet elektrotehnike i računarstva

Zavod za elektroniku, mikroelektroniku, računalne i

inteligentne sustave

Oblikovanje programske potpore

Izradili:
Nikolina Frid, mag. ing. comp.
prof. dr. sc. Vlado Sruk

Kratke upute za izradu projektnog zadatka

(interni materijal)

Ver. 1.0 (rujan 2013)

Sadržaj

Uvod ........................................................................................................................... 3
1. Postavljanje radnog okruženja ............................................................................. 4
1.1. Instalacija XAMPP paketa ....................................................................................... 4
1.2. Konfiguracija poslužitelja ......................................................................................... 5
2. Izrada web aplikacije ............................................................................................ 8
2.1. Osnove programskog jezika PHP ............................................................................ 8
2.2. Izrada web sučelja................................................................................................... 9
2.3. Komunikacija s bazom podataka ............................................................................10
2.4. Aplikacijska logika ..................................................................................................12
Reference ................................................................................................................. 15

2
Uvod

Pri realizaciji projektnog zadatka studentima se ostavlja slobodan izbor programske platforme
na kojoj će izgraditi svoje rješenje uz uvjet da se mora koristiti jedan od objektno-orijentiranih
jezika prilagođenih webu (Java, PHP 5.0+, ASP.NET). U ovoj skripti opisan je jedan od
mogućih pristupa koji koristi jezik PHP te postojeće poslužitelje – Apache za web sučelje i
aplikacijsku logiku te MySQL za bazu podatak. To nije jedini mogući način realizacije web
aplikacije za projektni zadatak i bilo koji drugi pristup koji rezultira valjanim rješenjem
jednako se vrednuje.

Namjena ovih uputa jest usmjeriti studente koji se na ovom predmetu po prvi puta sreću s
problematikom realizacije malo složenije web aplikacije. Opisan je način kako pomoću
postojećih rješenja (XAMPP) na računalu s Windows 7 operacijskim sustavom upogoniti
sustav web poslužitelja s pripadajućom bazom podataka. Prikazani su osnovni principi rada s
poslužiteljem baze podataka i kratki uvod u korištenje programskog jezika PHP za izradu
aplikacijske logike. Tehnologije za izradu web korisničkog sučelja HTML, CSS i sl. nisu
obrađene u ovoj skripti budući da se smatra da savladavanje njihove uporabe nije pretjerano
složeno te studenti mogu to područje savladati samostalnim istraživanjem. Upute dane u ovoj
skripti služe samo kao polazište i za uspješnu izradu aplikacije potrebno je detaljnije proučiti
korištene tehnologije koristeći predloženu literaturu.

3
1. Postavljanje radnog okruženja

U ovom poglavlju opisan je proces instalacije i konfiguracije XAMPP paketa koji u sebi,
između ostalog, sadrži web-poslužitelj Apache, MySQL poslužitelj baze podataka i PHP
interpreter. Sve ove komponente instaliraju se kod instalacije XAMPP paketa. Navedeni
poslužitelji pokreću se na lokalnom računalu (localhost).

1.1. Instalacija XAMPP paketa

XAMPP paket koji sadrži web-poslužitelj Apache i poslužitelj baze podataka MySQL za
Win7 OS moguće je skinuti sa sljedeće adrese: http://www.apachefriends.org/en/xampp-
windows.html (preuzeti posljednju stabilnu verziju). Paket se mora instalirati s
administratorskim ovlastima, ali osim toga instalacija je klasična i nije potrebna nikakva
dodatna konfiguracija.

Nakon instalacije potrebno je pokrenuti XAMPP upravljačku ploču: Start
Programs

XAMPP. Pomoću ove upravljačke ploče moguće je upravljati radom poslužitelja te pratiti
trenutno stanje. Za rad web aplikacije potrebni su minimalno Apache i MySQL poslužitelji.
Ukoliko se radi složenija arhitektura u kojoj se aplikacijska logika razdvaja od korisničkog
web sučelja iz ovog paketa moguće je iskoristiti i Tomcat poslužitelj za Java servlete no ovo
je samo moguće proširenje i nije nužno.

Izgled upravljačke ploče prikazan je na slici 1.

4
 Slika 1. XAMPP upravljačka ploča

1.2. Konfiguracija poslužitelja

Sve aktivne poslužitelje može se konfigurirati preko web administracijskog sučelja kojemu se
pristupa na adresi: localhost/xampp/ (uz uvjet da je minimalno Apache poslužitelj aktivan).
Na slici 2 prikazan je izgled početne stranice administracijskog sučelja.

Apache i MySQL poslužitelji konfiguriraju se preko phpMyAdmin web upravljačkog sučelja

(slika 3).

Napomena: prema unaprijed zadanim postavkama administratorski račun je root bez lozinke.

5
Slika 2. Web administracijsko sučelje

6
Slika 3. phpMyAdmin upravljačko sučelje

7
2. Izrada web aplikacije

Najjednostavniji mogući pristup izradi srednje složene web aplikacije je smještanje web
sučelja te kompletne aplikacijske logike na poslužitelj Apache uz komunikaciju s
poslužiteljskom aplikacijom za bazu podataka (MySQL). Ovakvo rješenje podrazumijeva
pisanje kompletne programske podrške u PHP-u kojeg podržava Apache. U stvarnoj
poslovnoj okolini, gdje više korisnika paralelno koristi aplikaciju, svaki bi od ovih
poslužitelja trebao biti na zasebnom računalu radi ujednačavanja opterećenja i povećanja
dostupnosti. No za potrebe ovog projekta moguće je sve poslužitelje pokrenuti na istom
računalu jer je opterećenje vrlo malo.

U nastavku poglavlja dan je kratki uvod u osnove korištenja programskog jezika PHP,
njegovu ugradnju u HTML kod, komunikaciju s bazom podataka i smjernice za izradu
aplikacijske logike na temeljima objektno orijentirane paradigme. Za detaljnije proučavanje
tematike, koje je nužno za uspješno izradu web aplikacije, čitatelj se upućuje na dodatnu
literaturu čiji je popis dan u Referencama.

2.1. Osnove programskog jezika PHP

PHP (PHP: Hypertext Preprocessor) je skriptni programski jezik posebno pogodan za brzu i
jednostavniju izradu web sjedišta. Programski kod ugrađuje se u HTML dokument unutar
<?php ?> tag-a te takav dokument mora imati .php ekstenziju (umjesto .html) kako bi ga
interpreter prepoznao i obradio. Primjer jednostavne HelloWorld.php skripte dan je u
nastavku.

<!DOCTYPE html>
<html>
<head>
<title> Hello World </title>
</head>
<body>
<?php
$var1 = 'Hello';
function test()
{
return 'World';
}
$var2 = test();
echo "$var1 $var2"; //ispisuje “Hello World”
?>
</body>
</html>

Kako bi se skripta iz primjera mogla pokrenuti i testirati datoteku HelloWorld.php mora se

spremiti u direktorij C:\xampp\htdocs\ (ako se instaliralo po predefiniranoj konfiguraciji).

8
Zatim se u web pregledniku upiše za adresu http://localhost/helloWorld.php i ako je sve u
redu ispisat će se „Hello World“ na praznoj stranici (slika 4).

Slika 4. Ispis skripte Helloworld.php

U ovim uputama neće se ulaziti u detalje programiranja u PHP-u koji se mogu pronaći u on-
line uputama [1] koje se smatraju kanonom za PHP.

Iako je PHP u početku nastao kao proširenje statičkih HTML stranica kako bi mogle „nešto
napraviti“, do danas je dovoljno razrađen da se može smatrati ozbiljnim programskim
jezikom. Od verzije PHP 5, podržana je i objektno orijentirana paradigma o čemu će više
riječi biti u daljnjem tekstu.

2.2. Izrada web sučelja

Izrada web korisničkog sučelja koristeći osnovne tehnologije HTML i CSS jest područje s
kojim se većina studenata već susrela i nije zahtjevno za savladavanje stoga se neće ulaziti u
detalje. Polazište za proučavanje bili bi tutoriali [3] i [4] uz koje na internetu postoje i mnogi
drugi s detaljnijom razradom pojedinih problema.

No važno je istaknuti nekoliko napomena kako bi se postiglo preglednije rješenje:

1. Kod stiliziranja HTML dokumenta pomoću CSS-a preporučuje se odvojiti sve stilove
u zasebnu CSS datoteku koja se u HTML dokumentu samo referencira u zaglavlju:

9
 <html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
…
<html>

2. U svakom HTML dokumentu koji sadržava PHP kôd treba razdvojiti HTML i PHP
gdje god je to moguće tj. treba izbjeći ubavicanje naredbe echo HTML-a gdje god to
nije nužno (uvjeti, petlje i sl.). Primjer pogreške i ispravnog načina dan je u nastavku.

…
<?php
<table>

<tr>
<td> Neki tekst </td>
</tr>

</table>
…
?>

Ispravniji način je:

…
<table>


<tr>
<td><?php echo 'Neki tekst'; ?></td>

</tr>

</table>
…

2.3. Komunikacija s bazom podataka

Jedan od načina upravljanja bazama podataka na MySQL poslužitelju jest preko

phpMyAdmin sučelja (slika 3). Takav pristup dobar je kod uklanjanja pogrešaka no pri
pisanju programske podrške za web aplikaciju sva komunikacija s bazom podataka (stvaranje
baze, tablica, dodavanje i modificiranje unosa) odvija se kroz programski kod.

10
U nastavku poglavlja nalazi se kratki primjer u kojem se najprije uspostavlja sjednica, zatim
se stvara baza podataka my_db, u kojoj se kreira tablica Osobe sa stupcima: Ime, Prezime i
Dob. Dodaju se dva unosa u bazu (Petar Perić 35 i Goran Kovač 33). Periću se zatim mijenja
dob u 36, a u sljedećoj transakciji se Kovač briše. Nakon izvršenja svake transakcije s bazom,
ispisuje se sadržaj tablice Osobe ako postoji.

<!DOCTYPE html>
<html>
<title> PHP script - MySQL communication demo </title>
<body>
<h1> PHP skripta: MySQL komunikacija - demo...</h1></br></br>

<?php
//spajanje na mysqld
$con = mysql_connect("localhost", "root", "");

//provjera veze
if (mysqli_connect_errno($con))
echo "Nemoguce spajanje na MySQL: " . mysqli_connect_error();

//stvaranje baze podataka my_db

$sql="CREATE DATABASE my_db";
if (mysql_query($sql)) echo "Baza my_db uspješno stvorena</br>";
else echo "Pogreška kod stvaranja baze: " . mysql_error($con);

//odabir baze
mysql_select_db("my_db");

//stvaranje tablice Osobe

$sql="CREATE TABLE osobe(PID INT NOT NULL AUTO_INCREMENT,PRIMARY KEY(PID),Ime
CHAR(15), Prezime CHAR(15), Dob INT)";
if (mysql_query($sql)) echo "Uspješno stvorena tablica Osobe. </br>";
else echo "Pogreška pri stvaranju tablice: " . mysql_error($con);
echo "</br></br>";

//dodavanje unosa u tablicu

mysql_query("INSERT INTO Osobe (Ime, Prezime, Dob) VALUES ('Petar', 'Perić',35)");
mysql_query("INSERT INTO Osobe (Ime, Prezime, Dob) VALUES ('Goran', 'Kovač',33)");

//dohvat podataka iz tablice

print_table($result)

//izmjena podataka
mysql_query("UPDATE Osobe SET Age=36 WHERE Ime='Petar' AND Prezime='Perić'");
print_table($result)

//brisanje podataka
mysql_query("DELETE FROM Osobe WHERE Prezime='Perić'");
print_table($result)

//zatvaranje sjednice
mysql_close($con);

function print_table() {
$result = mysql_query("SELECT * FROM osobe");
while($row = mysql_fetch_array($result))
{

11
 echo $row['Ime'] . " " . $row['Prezime']." ".$row['Dob']. "</br>";
}
echo "</br></br>";
}
?>

</body>
</html>
Za daljnje upoznavanje s radom s bazom podataka preporuča se koristiti [5], a osobito obratiti
pažnju na poglavlja 3 (Tutorial) i 13 (SQL Statement Syntax).

2.4. Aplikacijska logika

U XAMPP paket uključena je verzija PHP 5.x što znači da je podržan objektni dizajn pa nije
potrebno koristiti druge tehnologije (.NET, Java….) za realizaciju aplikacijske logike.

Bez obzira na veliku fleksibilnost načina programiranja koju pruža programski jezik PHP,
aplikacijsku logiku potrebno je što je više moguće razdvojiti od samog web sučelja
(prezentacije) radi preglednosti, jednostavnijeg testiranja i otkrivanja pogrešaka te lakše
naknadne modifikacije. To znači da unutar <?php?> odsječka u dokumentu koji primarno
služi kao prikaz web stranice u HTML-u ne treba opisivati i funkciju za izračun npr. prosječne
visine snijega u godini. Također, treba voditi računa o poštivanju načela objektno
orijentiranog dizajna koja se teorijski obrađuju na predavanjima. Posebno obratiti pozornost
na enkapsulaciju specifičnih atributa i funkcija unutar odgovarajućeg razreda te apstrakciju
specifičnih svojstava prema van.

Osim logičkog razdvajanja programskih cjelina potrebno je ponekad i „fizički“ razdvojiti

pojedine komponente programa, poput razreda, u zasebne datoteke koje kasnije po potrebi
uključujemo u druge datoteke koje se koriste njihovim funkcijama. U PHP-u se to vrlo
jednostavno postiže. Npr. ako se u datoteci HelloWorld.php želi imati pristup funkcijama iz
datoteke funkcije.php, u HelloWorld.php treba na početku <?php?> bloka dodati dodati
naredbu:
include 'funkcije.php';

Pri tome treba imati na umu da se u PHP-u na taj način mogu dohvaćati i varijable iz
uključene datoteke pa to treba imati na umu kod davanja imena jer će inače doći do
prekrivanja „starije“ s „novijom“ varijablom. Također, include liniju koda može se dodati na
bilo kojem mjestu u kodu, no pri tome treba paziti na doseg vidljivosti (scope). Npr. ako se
include nalazi unutar neke funkcije tada će varijable i funkcije uključene datoteke biti
vidljive samo unutar tog funkcijskog bloka, što ponekad može biti i poželjno.
Ova situacija objašnjena je u sljedeća dva primjera:
1. vidljivost varijabli ovisno o mjestu uključivanja vanjske datoteke:
vars.php
<?php

$color = 'green';
$fruit = 'apple';

12
 ?>

test.php
<?php

echo "A $color $fruit"; // A

include 'vars.php';
echo "A $color $fruit"; // A green apple

?>

2. vidljivost sadržaja uključene datoteke ovisno o dosegu

<?php

function foo()
{
include 'vars.php';
echo "A $color $fruit";
}

/* vars.php vidljiva je samo unutar dosega foo() */

foo(); // A green apple

echo "A $color $fruit"; // A

?>

Rad s razredima i objektima vrlo je sličan radu s istima u drugim programskim jezicima poput
Jave i C#. Vrlo detaljne upute s primjerima mogu se pronaći u [2]. Jednostavan primjer dan je
u nastavku.

<?php
class SimpleClass
{
// property declaration
public $var = 'a default value';

// method declaration
public function displayVar() {
echo $this->var;
}
}

$a = new SimpleClass();
$a-> displayVar (); // ispisuje: “a default value”

$a-> var= 'a new value';

$a-> displayVar (); // ispisuje: “a new value”

13
?>

14
Reference

[1] PHP Manual, http://www.php.net/manual/en/index.php, kolovoz 2013.

[2] PHP: Classes and Objects Manual, http://php.net/manual/en/language.oop5.php,
kolovoz 2013.
[3] W3Schools, HTML Tutorial, http://www.w3schools.com/html/default.asp, kolovoz
2013.
[4] W3Schools, CSS Tutorial, http://www.w3schools.com/css/default.asp, kolovoz 2013.
[5] MySQL, MySQL 5.5 Reference Manual, http://dev.mysql.com/doc/refman/5.5/en/,
kolovoz 2013.
[6] FER, Predavanja i materijali iz Oblikovanja programske podrške,
http://www.fer.unizg.hr/predmet/opp.

15