Web programiranje PHP + JavaScript

1. Web programiranjePHP + JavaScript Srđan Srđenović (KODER d.o.o.) - PHP Nikica Tarandek (TRIA d.o.o.) - JavaScript CodeWeek / TIC / Čakovec

2. Web aplikacije? • troslojna arhitektura • client-side – što radi preglednik? • server-side – što radi server? • baza podataka - gdje su podaci?

3. Web aplikacije?

4. php programski jezici Javascript • 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 • 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

5. Kreiranje web stranica korištenjem PHP skripte • osnovni preduvjeti i okolina – Apache Web server + PHP • kreiranje početke skripte – index.php

6. PRAKTIČAN RADspajanje na server • pokrenite Notepad++ • aktivirajte FTP prozor • kliknite na plavu ikonicu za (Dis)Connect • napravite dupli-klik na "www" mapu kako biste je otvorili

7. 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:<?phpecho "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)

8. Dodavanje JavaScript-e na postojeću stranicu (kreiranu u PHP-u) • u datoteku jednostavno upišite slijedeće (u žutoj boji):<?phpecho "RADI";?><hr/> <script> alert("TEST"); </script> • vratite se na preglednik i osvježite stranicu

9. Sastavni dijelovi programskog jezika • Funkcije • Definiranje funkcije • Pozivanje funkcija • Vidljivost varijabli • Polja (skupovi vrijednosti) • Inicijalizacija polja • Imenovana polja • Podaci u polju • Osnovne funkcije nad poljima • Vrste podataka • varijable • tipovi varijabli • konstante • Izrazi i operatori • Petlje i uvjeti • FOR, WHILE i ostale petlje • IF i SWITCH uvjeti

10. php Vrste podataka :: Varijable i tipovi Javascript // znakovni niz - string $ime = "Srđan"; // cijeli broj - integer $starost = 37; // decimalni broj – float $visina = 177,5 // logička vrijednost - boolean $mlad = false; // znakovni niz– string var ime = "Nikica"; // cijeli broj - integer var starost = 37; // decimalni broj – float var visina = 176,2 // logička vrijednost - boolean var mlad = false;

11. PHP Izrazi i operatori Javascript <?php $rezultat = 0; // Uvećavanje vrijednosti varijable // $rezultat za 1 $rezultat = $rezultat + 1; $rezultat += 1; $rezultat++; ++$rezultat; ?> <script> var rezultat = 1; // Uvećavanje vrijednosti varijable // rezultat za 1 rezultat = rezultat + 1; rezultat += 1; rezultat++; ++rezultat; </script>

12. PHP Izrazi i operatori JAVASCRIPT <?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"; ?> <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>

13. php Uvjeti :: if Javascript <?php if ($uvjet) { // Blok koji se izvršava // ako je $uvjet ispunjen } else if ($uvjet2) { // Blok koji se izvršava // ako $uvjet nije ispunjen, a $uvjet2 je } else if ($uvjet3) { // Blok koji se izvršava // ako nisu ispunjeni $uvjet i $uvjet2, // a $uvjet3 jest } else { // Blok koji se izvršava ako niti // $uvjet niti $uvjet2 niti $uvjet 3 // nisu ispunjeni } ?> <script> if (uvjet) { // Blok koji se izvršava // ako je uvjet ispunjen } else if (uvjet2) { // Blok koji se izvršava // ako uvjet nije ispunjen, a uvjet2 je } else if (uvjet3) { // Blok koji se izvršava // ako nisu ispunjeni uvjet i uvjet2, // a uvjet3 jest } else { // Blok koji se izvršava ako niti // uvjet niti uvjet2 niti uvjet 3 // nisu ispunjeni } <script>

14. php Uvjeti :: switch-case Javascript <?php $odabir = "da"; switch ($odabir) { case "da": // $odabir == "da" echo "DA! To je to!"; break; case "ne": // $odabir == "ne" echo "NE, to nije to!"; break; case "mozda": // $odabir == "mozda" echo "MOŽDA je a možda i nije"; break; default: // niti jedno od navedenog echo "NIJEDNO"; break; } ?> <script> var odabir = "da"; switch(odabir) { case "da": // $odabir == "da" alert("DA! To je to!"); break; case "ne": // $odabir == "ne" alert("NE, to nije to"); break; case "mozda": // $odabir == "mozda" alert("MOŽDA je a možda i nije"); break; default: // niti jedno od navedenog alert("NIJEDNO"); break; } </script>

15. php Petlje :: while Javascript <?php $i = 1; while ($i <= 10) { echo $i , "<br/>"; $i++; } ?> <script> var i = 1; while (i <= 10) { document.write(i + "<br/>"); i++; } </script>

16. php Petlje :: do - while Javascript <?php $i = 0; do { echo $i, "<br/>"; } while ($i > 0); ?> <script> var i = 0; do { document.write(i + "<br/>"); } while (i > 0); </script>

17. php Petlje :: for Javascript <?php for ($i = 1; $i <= 10; $i++) { echo $i, "<br/>"; } ?> <script> for ($i = 1; $i <= 10; $i++) { document.write($i, "<br/>"); } </script>

18. php Funkcije :: Definiranje i pozivanje Javascript <?php // definiranje funkcije function naslov($tekst = "Moj naslov") { // tijelo funkcije echo "<h1>" . $tekst . "</h1>"; } // pozivanje (pokretanje) funkcije naslov(); naslov("Moj novi naslov"); naslov("Moj drugi naslov"); ?> <script> // definiranje funkcije function naslov(tekst = "Moj naslov") { // tijelo funkcije document.write("<h1>" + tekst + "</h1>"); } // pozivanje (pokretanje) funkcije naslov(); naslov("Moj novi naslov"); naslov("Moj drugi naslov"); </script>

19. php Polja :: Priprema i korištenje Javascript <?php // polje sa numeričkim vrijednostima $posta = array( 10000, 51000, 21000, 31000 ); // polje sa znakovnim nizovima $grad = array( "Zagreb", "Rijeka", "Split", "Osijek" ); // ispis vrijednosti polja for ($i=0; $i<4; $i++) { echo $posta[$i] . "-" . $grad[$i] . "<br/>"; } ?> <script> // polje sa numeričkim vrijednostima var posta = [ 10000, 51000, 21000, 31000 ]; // polje sa znakovnim nizovima var grad = [ "Zagreb", "Rijeka", "Split", "Osijek" ]; // ispis vrijednosti polja for (var i=0; i<4; i++) { document.write(posta[i] + "-" + grad[i]+ "<br/>"); } <script>

20. php Polja :: Imenovana polja Javascript <?php $gradovi = array( "Zagreb" => 10000, "Rijeka" => 51000, "Split" => 21000 ); $gradovi["Dubrovnik"] = 20000; echo $gradovi["Zagreb"] . "<br/>"; echo $gradovi["Dubrovnik"] . "<br/>"; ?> <script> var gradovi = { "Zagreb": 10000, "Rijeka": 51000, "Split": 21000 }; gradovi["Dubrovnik"] = 20000; document.write(gradovi["Zagreb"] + "<br/>"); document.write(gradovi["Dubrovnik"] + "<br/>"); </script>

21. 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 ...

22. Primjeri :: Snaga JavaScript-a • Interakcija na stranici:http://journey.lifeofpimovie.com/#!/richard-parkerhttp://fontwalk.de/ • Znanstvena uporabahttp://jsxgraph.uni-bayreuth.de/wiki/index.php/Data_plot_of_live_data_via_AJAXhttp://jsxgraph.uni-bayreuth.de/wiki/index.php/Trigonometric_functionshttp://jsxgraph.uni-bayreuth.de/wiki/index.php/Sierpinski_trianglehttp://www.amplifon.co.uk/interactive-ear/index.html • 3D programiranjehttp://threejs.org/examples/#canvas_geometry_earthhttp://threejs.org/examples/#css3d_periodictable • Igrehttp://chrome.angrybirds.com/http://www.unrealengine.com/html5/

23. Hvala na pažnji!