Transcript Web_programiranje_(1)

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
 Petlje i uvjeti
 FOR, WHILE i ostale petlje
 IF i SWITCH uvjeti
 Polja (skupovi vrijednosti)
 Inicijalizacija polja
 Imenovana polja
 Podaci u polju
 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
JAVASCRIPT
<?php
<script>
// Svi primjeri u varijablu $tekst
// Svi primjeri u varijablu tekst
// upisuju niz "Novi program"
// upisuju niz „Novi program“
$tekst = "Novi " . "program";
var tekst = "Novi " + "program";
// Rezultat je "Novi program"
// Rezultat je "Novi program"
$tekst = "Novi ";
tekst = "Novi ";
$tekst .= „program“;
tekst += "program";
// Rezultat je "Novi program"
// Rezultat je "Novi program"
$tekst = "Novi ";
tekst = "Novi ";
$tekst = $tekst . "program";
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 programiranje
http://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!