WEB PROGRAMIRANJE

PHP + JavaScript

Srđan Srđenović (KODER d.o.o.) - PHP

Nikica Tarandek (TRIA d.o.o.) - JavaScript

CODEWEEK / TIC / ČAKOVEC

WEB APLIKACIJE?
 troslojna arhitektura
• client-side – što radi preglednik?
• server-side – što radi server?
• baza podataka - gdje su podaci?
WEB APLIKACIJE?
PROGRAMSKI JEZICI
PHP
 Upotreba otvorenog kôda – PHP programski jezik ima
u potpunosti otvoren kôd
 Vrlo visoka razina integracije s HTML-om i
potrebama Weba danas
 Mogućnost upotrebe i u najsloženijim sustavima
 Vrlo dobra prenosivost – može se bez ikakvih
preinaka koristiti i pod Linux, Windows, Solaris i
ostalim platformama
 Brzo izvršavanje – uz sve danas raspoložive
optimizacije programi pisani u programskom jeziku
PHP mogu se vrlo brzo izvršavati
 Dobra podrška zajednice – na razvoju i upotrebi
programskog jezika PHP radi vrlo velik broj
pojedinaca čime se osigurava njegova budućnost i
ažurnost
JAVASCRIPT
 Prvi se puta pojavio u starom pregledniku Netscape
(prije 18 godina) kako bi se omogućila interakcija s
elementima na web stranici na strani preglednika
 Do danas je stekao izuzetnu popularnost pošto je
dostupan u svakom pregledniku i programeri su ga u
potpunosti prihvatili
 Kako je sam jezik napredovao tako su preglednici
postajali sve bolji u njegovom pokretanju i s
vremenom je postao izuzetno brz te time omogućava
vrlo široku uporabu
 Postoji zaista ogroman broj raznih dodataka (tzv.
biblioteka odnosno library) koji programerima
olakšavaju rad i znatno ubrzavaju razvoj rješenja –
jedan od primjera je izuzetno popularan jQuery koji je
donio malu revoluciju u načinu korištenja JavaScripta
zbog olakšavanja i pojednostavljivanja vrlo čestih
operacija
Kreiranje web stranica korištenjem PHP
skripte
 osnovni preduvjeti i okolina – Apache Web server + PHP
 kreiranje početke skripte – index.php
PRAKTIČAN RAD
SPAJANJE NA SERVER
 pokrenite Notepad++
 aktivirajte FTP prozor
 kliknite na plavu ikonicu za (Dis)Connect
 napravite dupli-klik na "www" mapu kako biste je otvorili
KREIRANJE I POKRETANJE SKRIPTE
 napravite desni-klik na "www" mapi, odaberite Create new file i upišite "index.php" (bez
navodnika)
 nakon što se datoteka pojavi s desne strane, napravite dupli-klik na njoj kako biste je
otvorili
 upišite slijedeći tekst u datoteku:

<?php
echo "RADI";
?>
 otvorite Internet preglednik i u adresu upišite:

http://dev.tria.hr/project/cw01

(umjesto cw01 upišite svoju osobnu adresu koju imate na listiću ispred vas)
Dodavanje JavaScript-e na postojeću
stranicu (kreiranu u PHP-u)
 u datoteku jednostavno upišite slijedeće (u žutoj boji):

<?php
echo "RADI";
?>
<hr/>
<script>
alert("TEST");
</script>
 vratite se na preglednik i osvježite stranicu
Sastavni dijelovi programskog jezika
 Vrste podataka  Funkcije
 varijable  Definiranje funkcije
 tipovi varijabli  Pozivanje funkcija
 konstante  Vidljivost varijabli
 Izrazi i operatori  Polja (skupovi vrijednosti)

 Petlje i uvjeti  Inicijalizacija polja

 Imenovana polja
 FOR, WHILE i ostale petlje
 Podaci u polju
 IF i SWITCH uvjeti
 Osnovne funkcije nad poljima
Vrste podataka :: Varijable i tipovi
PHP JAVASCRIPT
// znakovni niz - string // znakovni niz – string
$ime = "Srđan"; var ime = "Nikica";

// cijeli broj - integer // cijeli broj - integer

$starost = 37; var starost = 37;

// decimalni broj – float // decimalni broj – float

$visina = 177,5 var visina = 176,2

// logička vrijednost - boolean // logička vrijednost - boolean

$mlad = false; var mlad = false;
Izrazi i operatori
PHP JAVASCRIPT
<?php <script>
$rezultat = 0; var rezultat = 1;
// Uvećavanje vrijednosti varijable // Uvećavanje vrijednosti varijable
// $rezultat za 1 // rezultat za 1
$rezultat = $rezultat + 1; rezultat = rezultat + 1;
$rezultat += 1; rezultat += 1;
$rezultat++; rezultat++;
++$rezultat; ++rezultat;
?> </script>
Izrazi i operatori
PHP
<?php
// Svi primjeri u varijablu $tekst
// upisuju niz "Novi program"
$tekst = "Novi " . "program";
// Rezultat je "Novi program"
$tekst = "Novi ";
$tekst .= „program“;
// Rezultat je "Novi program"
$tekst = "Novi ";
$tekst = $tekst . "program";
?>
JAVASCRIPT
<script>
// Svi primjeri u varijablu tekst
// upisuju niz „Novi program“
var tekst = "Novi " + "program";
// Rezultat je "Novi program"
tekst = "Novi ";
tekst += "program";
// Rezultat je "Novi program"
tekst = "Novi ";
tekst = tekst + "program";
</script>
Uvjeti :: if
PHP JAVASCRIPT
<?php <script>
if ($uvjet) { if (uvjet) {
// Blok koji se izvršava // Blok koji se izvršava
// ako je $uvjet ispunjen // ako je uvjet ispunjen
} else if ($uvjet2) { } else if (uvjet2) {
// Blok koji se izvršava // Blok koji se izvršava
// ako $uvjet nije ispunjen, a $uvjet2 je // ako uvjet nije ispunjen, a uvjet2 je
} else if ($uvjet3) { } else if (uvjet3) {
// Blok koji se izvršava // Blok koji se izvršava
// ako nisu ispunjeni $uvjet i $uvjet2, // ako nisu ispunjeni uvjet i uvjet2,
// a $uvjet3 jest // a uvjet3 jest
} else { } else {
// Blok koji se izvršava ako niti // Blok koji se izvršava ako niti
// $uvjet niti $uvjet2 niti $uvjet 3 // uvjet niti uvjet2 niti uvjet 3
// nisu ispunjeni // nisu ispunjeni
} }
?> <script>
Uvjeti :: switch-case
PHP JAVASCRIPT
<?php <script>
$odabir = "da"; var odabir = "da";
switch ($odabir) { switch (odabir) {
case "da": // $odabir == "da" case "da": // $odabir == "da"
echo "DA! To je to!"; alert("DA! To je to!");
break; break;
case "ne": // $odabir == "ne" case "ne": // $odabir == "ne"
echo "NE, to nije to!"; alert("NE, to nije to");
break; break;
case "mozda": // $odabir == "mozda" case "mozda": // $odabir == "mozda"
echo "MOŽDA je a možda i nije"; alert("MOŽDA je a možda i nije");
break; break;
default: // niti jedno od navedenog default: // niti jedno od navedenog
echo "NIJEDNO"; alert("NIJEDNO");
break; break;
} }
?> </script>
Petlje :: while
PHP JAVASCRIPT
<?php <script>
$i = 1; var i = 1;
while ($i <= 10) { while (i <= 10) {
echo $i , "<br/>"; document.write(i + "<br/>");
$i++; i++;
} }
?> </script>
Petlje :: do - while
PHP JAVASCRIPT
<?php <script>
$i = 0; var i = 0;
do { do {
echo $i, "<br/>"; document.write(i + "<br/>");
} while ($i > 0); } while (i > 0);
?> </script>
Petlje :: for
PHP JAVASCRIPT
<?php <script>
for ($i = 1; $i <= 10; $i++) { for ($i = 1; $i <= 10; $i++) {
echo $i, "<br/>"; document.write($i, "<br/>");
} }
?> </script>
Funkcije :: Definiranje i pozivanje
PHP JAVASCRIPT
<?php <script>
// definiranje funkcije // definiranje funkcije
function naslov($tekst = "Moj naslov") { function naslov(tekst = "Moj naslov") {
// tijelo funkcije // tijelo funkcije
echo "<h1>" . $tekst . "</h1>"; document.write("<h1>" + tekst + "</h1>");
} }

// pozivanje (pokretanje) funkcije // pozivanje (pokretanje) funkcije

naslov(); naslov();
naslov("Moj novi naslov"); naslov("Moj novi naslov");
naslov("Moj drugi naslov"); naslov("Moj drugi naslov");
?> </script>
Polja :: Priprema i korištenje
PHP JAVASCRIPT
<?php <script>
// polje sa numeričkim vrijednostima // polje sa numeričkim vrijednostima
$posta = array( var posta = [
10000, 51000, 21000, 31000 10000, 51000, 21000, 31000
); ];

// polje sa znakovnim nizovima // polje sa znakovnim nizovima

$grad = array( var grad = [
"Zagreb", "Rijeka", "Split", "Osijek" "Zagreb", "Rijeka", "Split", "Osijek"
); ];

// ispis vrijednosti polja // ispis vrijednosti polja

for ($i=0; $i<4; $i++) { for (var i=0; i<4; i++) {
echo $posta[$i] . "-" . $grad[$i] . "<br/>"; document.write(posta[i] + "-" + grad[i] +
"<br/>");
}
}
?>
<script>
Polja :: Imenovana polja
PHP JAVASCRIPT
<?php <script>
$gradovi = array( var gradovi = {
"Zagreb" => 10000, "Zagreb": 10000,
"Rijeka" => 51000, "Rijeka": 51000,
"Split" => 21000 "Split": 21000
); };

$gradovi["Dubrovnik"] = 20000; gradovi["Dubrovnik"] = 20000;

echo $gradovi["Zagreb"] . "<br/>"; document.write(gradovi["Zagreb"] + "<br/>");

echo $gradovi["Dubrovnik"] . "<br/>"; document.write(gradovi["Dubrovnik"] +
"<br/>");
?>
</script>
PRIMJERI :: Stranice rađene u PHP-u
 Facebook - mislimo da ne treba objašnjenje ...
 Wikipedia – online enciklopedija
 Flickr – stranica za dijeljenje fotografija
 Vimeo – stranica za dijeljenje video materijala
 WordPress (vrlo popularan CMS – Content Management System)
 i mnogi drugi ...
PRIMJERI :: Snaga JavaScript-a
 Interakcija na stranici:
http://journey.lifeofpimovie.com/#!/richard-parker
http://fontwalk.de/

 Znanstvena uporaba
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Data_plot_of_live_data_via_AJAX
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Trigonometric_functions
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Sierpinski_triangle
http://www.amplifon.co.uk/interactive-ear/index.html

 3D programiranjehttp://threejs.org/examples/#canvas_geometry_earth
http://threejs.org/examples/#css3d_periodictable

 Igre
http://chrome.angrybirds.com/
http://www.unrealengine.com/html5/
HVALA NA PAŽNJI!