Laboratorijske vježbe za IV razrede_.pdf

Laboratorijske vježbe za IV razred Školska 2015/2016 godina Razred: IV1, IV2

profesor: Admir DEMIR, M.Sc EE&CS email: [email protected] Srednja elektrotehnička škola u Sarajevu

1

Pravila i uputstva za rad i ponašanje na predmetu Laboratorijski rad

1. Ućenik je dužan po ulasku u kabinet da odloži jaknu i ruksak na mjesto predviđeno za to.

2. Ulazak u kabinet nakon školskog zvona za početak časa i biče sankcionisano kao neopravdani čas.

3. Korištenje mobilnih telefona, tableta ili sličnih uređaja je STROGO ZABRANJENO i kažnjava se.

4. Bilo koji pokušaj spajanja USB uređaja na školske računare kao što su: USB Flash Drive memory uređaji, punjaći za mobilne telefone, eksterne HD, itd. je STROGO ZABRANJENO i kažnjava se.

5. Profesor će Vam obezbijediti potreban materijal za uspiješno izvođenje nastave i bilo kakav oblik odbijanja rada u toku časa se kažnjava. Ocjenjuje se produktivnost ućenika i svaki ućenik je dužan na kraju časa snimiti urađeno.

6. Predmetni profesor je dostupan na mail naveden na početku i tu je da uvijek pomogne ako je nešto nejasno i treba dodatnih informacija. Profesor svakog ućenika trerita jednako tako da pojam “miljenik” ili bilo koji oblik “gotivljenja” je misaona imenica koju ako koristite bez adekvatnih argumenata povlaći konsekvence.

7. Svi smo ljudi i profesor kao ućenik može da pogriješi, ali na fin i pristojan naćin sve se može riješiti.

8. Povredu prava ućenik može tražiti samo onda ko je dobro upoznao i naučio koje su OBAVEZE ućenika. Ne argumentovano tužakanje ili bilo kakav oblik kolektivnih žalbi povlaći konsekvence.

2

9. Predmetni profesor Vam toplo preporućuje da obaveze i pravila ponašanja navedene u ovom dokumentu pokažete i upoznate Vaše razrednike, pedagogicu i ostale.

10.Predmetni profesor ocjenjuje sve: Vaše znanje, ponašanje, produktivnost, trud i rad i na osnovu toga donosi odluku i ocjenjuje ućenika.

11.Svaka tema koja nema veze sa predmetom ili temama koje su predviđene nastavim planom i programom je STROGO ZABRANJENA za bilo kakav oblik diskusije. Sva ukrštavanje i sukobljavanja bilo kakvih ideja i misli u kabinetu izvođenja nastave su STROGO ZABRANJENA.

12.Predmetni profesor Vas iskreno savjetuje da Vašu snagu i energiju usmjerite u ućenje i proširivanje znanja. Predmetni profesor je tu da Vam pomogne.

13. Predmetnog nastavnika možete uvijek kontaktirati na navedeni email. Bilo kakav pokušaj kontaktiranja profesora preko društvenih mreža je zabranjen.

14. Korištenje hrana i pića je u kabinetu je STROGO ZABRANJEN i kažnjava se.

15. Napuštanje časa ili traženje od predmetnog profesora da se izađe u WC, po hranu, obavljanje molitvi ili slično je ZABRANJENO. Ako argumentovano ili napismeno dokažete da postoji razlog za ostupanje od pravila onda možete napustiti čas.

16. Svaki oblik fleksibilnog ponašanja je moguć samo onda ako postoji volja sa obje strane, inaće u protivnom besmislena je bilo kakva diskusija.

Misli velikih ljudi:

1. “Znanje je tek onda znanje kad je stečeno naporom vlastite misli, a ne pamćenjem”. L. N. Tolstoj

2. “Učiti bez razmišljanja bezvrijedno je. Razmišljati i ništa ne naučiti opasno je”. Konfucije

3. “ Ne učimo za školu nego za život”. L.A. Seneka 4. “Obrazovanje nije samo ograničeno na školu; neumoljivo se nastavlja do

kraja života”. Peter Ustinov

3

4

Uvod Teme koje će biti obrađene na ovom predmetu:

Plan i program

1. HTML i struktura web stranice 2. CSS 3. JavaScript 4. jQuery 5. CMS & WordPress 6. Responsive Design 7. PHP 8. MySQL baze podataka 9. API 10. Mobilne aplikacije

5

Motivacija za rad

6

1. HTML i struktura web stranice

<!DOCTYPE> je deklaracija koja omogučuje web browseru da prikaže ispravno web stranicu.

Tag Opis

<html> Definiše HTML dokument

<body> Definiše “tijelo” dokumenata

<head> Definiše početak dokumenta

http://www.w3schools.com/tags/tag_html.asp

http://www.w3schools.com/tags/tag_body.asp

http://www.w3schools.com/tags/tag_head.asp

7

<h1> to <h6> Definiše HTML headings

<hr> Definiše horizontalnu liniju

<p> Definiše paragraf

Primjer 1: Korištenje <p> elementa u u HTML kodu:

<!DOCTYPE html>

<html>

<body>

<p>

Mješovita

srednja

elektrotehnička

škola

</p>

<p>

Laboratorijska vjezba iz HTMLa

</p>

<p>

Bez uredno zavrsene vjezbe

i uredno poslanog izvestaja ucenik

nece biti ocijenjen.

</p>

http://www.w3schools.com/tags/tag_hn.asp

http://www.w3schools.com/tags/tag_hr.asp

8

</body>

</html>

Primjer 2: Tag <br> za unos jednog praznog reda. Ovaj tag nema end tag.

<!DOCTYPE html>

<html>

<body>

<p>

Za novi red koristite <br />tag, <br>u tekstu.

</p>

</body>

</html>

Primjer 3: Tag <hr> horizontalna linija .

<!DOCTYPE html>

<html>

<body>

<h1>HTML</h1>

<p>HTML je skriptni jezik za opis web stranica.</p>

<hr>

<h1>CSS</h1>

<p>CSS definise stilove prikaza HTMLa.</p>

</body>

</html>

9

Primjer 4: Tagovi <u>, <strong>, <strike>, <em> za formatiranje teksta

<!DOCTYPE html>

<html>

<body>

<h1>Laboratorijska vjezba</h1> <p>Ovo je neki tekst koji ce biti prikazan<br />u dva reda.</p>

<p>Ovo je drugi paragraf iza kojeg slijedi horizontalna linija.</p>

<hr>

<p>Ovaj paragraf sadrzi <strong>bold</strong>, <em>italic</em>, <u>underlined</u> and <strike>stilove u </strike> tekstu.</p>

</body>

</html>

Primjer 5: <ul> nesortirane liste:

<!DOCTYPE html>

<html>

<body>

<h2>Lista najdrazijih predmeta:</h2>

<ul>

<li>Predemt1</li>

<li>Predemt2</li>

<li>Predemt3</li>

10

</ul>

</body>

</html>

Primjer 6: <ol> sortirane liste:

<!DOCTYPE html>

<html>

<body>

<h2>Lista najdrazijih klubova:</h2>

<ul>

<li>Zeljeznicar</li>

<li>Manchester United</li>

<li>Borussia Dortmund</li>

</ul>

</body>

</html>

Primjer 7: <img> ubacivanje slike u html:

<!DOCTYPE html>

<html>

<body> <img

src=”https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcSQlEHj7pvJbOYnj5eyK5TDQU0ia_PbmZV00r_eEnroP6J7AJwlTMyOr8”>

<hr>

11

img

src=”https://encryptedtbn0.gstatic.com/images?q=tbn:ANd9GcSQlEHj7pvJbOYnj5eyK5TDQU

0ia_PbmZV00r_eEnroP6J7AJwlTMyOr8” align=left width=300>

</body>

</html>

Primjer 8: Tag <a> se koristi za linkove (povezivanje) u HTMLu:

<a href="url">link tekst</a>

<!DOCTYPE html>

<html>

<body>

<p><a href="http://www.facebook.com">VMozete nas naci i na Facebooku</a></p>

</body>

</html>

Primjer 9: Tag <table> se koristi za kreiranje tabela:

<!DOCTYPE html>

<html>

<body>

<hr> <table>

<tr><th>Prezime</th><th>Ime</th><th>Ocjena</th></tr>

<tr><td>Meho</td>Mehic<td></td><td>5</td></tr> <tr><td>Nekic</td><td>Neko</td><td>4</td></tr> <tr><td>Markic</td><td>Marko</td><td>5</td></tr>

</table>

http://www.facebook.com/html/

12

<hr>

</body>

</html>

Primjer 10: <iframe> tag se koristi za prikaz web stranice unutar web stranice:

<!DOCTYPE html>

<html>

<body>

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

<hr>

<iframe src="demo_iframe.htm" style="border:none"></iframe> <hr> <iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe> </body>

</html>

13

1.1 HTML Forme

Element <form> se koristi da se “pokupe” korisnički unosi. Element <input> je najvažniji

elemenat formi i zavisi od tipa (type) atributa.

Type Opis

text Tekstualni unos

radio Definiše radio button za unos

submit Definiše submit button (Submitovanje formi)

Primjer 11: Tag <input type="text"> definiše jednu liniju za unos tekstualnog polja:

<!DOCTYPE html>

<html>

<body>

<form>

Ime:<br>

<input type="text" name="ime">

<br>

Prezime:<br>

14

<input type="text" name="prezime">

</form>

<p>Forma sama po sebi nije vidljiva.</p>

<p> Maksimalna širina (width) tekstualnih polja je 20 karaktera.</p>

</body>

</html>

Primjer 12: Tag <input type="radio"> definiše radio button:

<!DOCTYPE html>

<html>

<body>

<form>

<input type="radio" name="spol" value="muško" checked> Musko

<br>

<input type="radio" name="spol" value="zensko"> Zensko

</form>

</body>

</html>

15

Primjer 13: Tag <input type="submit"> definiše dugme za submitting form i prema

formhandleru. Formhandler je tipična server stranica with sa scriptom za procesiranje ulaznih

podataka. Formhandler se specifica u atributu forme, tj. action attribute:

<!DOCTYPE html>

<html>

<body>

<form action="action_page.php">

Ime:<br>

<input type="text" name="ime" value="Asmir">

<br>

Prezime:<br>

<input type="text" name="prezime" value="Begovic">

<br><br>

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

</form>

<p>Ako kliknemo na "Submit" dugme, formapodataka će biti poslan starnici

"action_page.php".</p>

</body>

Primjer 13: Primjena formi

Uradit cemo ga zajedno!

16

1.2 HTML Stilovi

Primjer 15: Promjene stajlova u HTMLu vrsimo pomocu style attribute:

<!DOCTYPE html>

<html>

<body style="backgroundcolor:lightgrey">

<h1>Ovo je naslov!</h1>

<p>Ovo je paragraf!.</p>

</body>

</html>

Primjer 16: Promjenu fontova u HTMLu vrsimo pomocu fontsize:

<!DOCTYPE html>

<html>

<body>

<h1 style="fontsize:300%">Ovo je naslov</h1>

<p style="fontsize:160%">Ovo je paragraf.</p>

</body>

</html>

Primjer 17 textalign svojstvo definise horizontalno poravnanje teksta u HTMLu:

<!DOCTYPE html>

<html>

<body>

<h1 style="textalign:center">Naslov u centru</h1>

<p>Ovo je neki tekst.</p>

17

</body>

</html>

Primjer 17 otvaranje novog taba kad se klikne na button u HTMLu:

<!DOCTYPE html>

<html>

<body>

button(type="button", onclick="window.open('auth/google', '_blank');")

</body>

</html>

18

2. CSS (Cascading Style Sheets) CSS je skracenica za Cascading Style Sheets:

Stilovi pomicu HTML elemenata se mogu dodati na 3 nacina:

Inline upotrebom style attribute u HTMLu

Internal upotrebom <style> element u HTML <head> dijelu

External upotrebom jednog ili vise external CSS fileova

CSS stilovi imaju sljedecu sintaksu:

element property:value; property:value

Primjer 18 : Inline CSS

<!doctype html>

<html>

19

<head>

<title>Laboratorijska vjezba<title>

</head>

<body>

<div>

<h1>Inline CSS primjena</h1>

<p style="color:blue;fontsize:200%">Ovo je neki tekst.</p>

<p></p>

</div>

</body>

</html>

Primjer 19 : Internal CSS

Kada se koristi? Koristi se kada se definiše stil unutar same web stranice.

Internal styling definiše se u <head> dijelu unutar HTML stranice, korištenjem <style>

elementa:

<!DOCTYPE html> <html>

<head> <style>

body backgroundcolor:lightgrey

20

h1 color:blue

p

color:green

</style> </head> <body>

<h1>Ovo je naslov</h1> <p>Neki tekst.</p>

</body>

</html>

Primjer 20 : External CSS

Kad se koristi? Kad se jedan stil primjenjuje na vise stranica.

External styles definise se u odvojenom CSS fajlu, i onda se poveze sa <head> sekcijom

unutar HTML stranice:

External style sheet are ideal when the style is applied to many pages.

<!DOCTYPE html> <html> <head>

<link rel="stylesheet" href="styles.css"> </head> <body>

<h1>Ovo je naslov</h1>

21

<p>Neki tekst.</p>

</body>

</html>

Primjer 21: Klase i IDovi:

<!DOCTYPE html>

<html> <head> <style>

.velikaSlova fontsize:300%;

#zeleno color:green;

.podvuceno textdecoration:underline; .bold fontweight:bold;


<p class=" velikaSlova">Ovo je neki tekst.</p>

<hr> <p id=" zeleno">Neki tekst.</p>

<hr>

22

<p >Treca rijec u <span class=" podvuceno">ovom</span> tekstu je podvućena.</p>

<hr>

<p >Treca rijec u <span class=" podvuceno velikaSlova">ovom</span> tekstu je podvućena.</p>

<hr>

<p >Treca rijec u <span class=" podvuceno velikaSlova bold">ovom</span> tekstu je podvućena.</p>

</body>

</html>

Primjer 22: DIVovi sa CSS stilovima:

<!DOCTYPE html>




.podvuceno textdecoration:underline; .plaviKvadrat backgroundcolor:blue; width:200px; height:200px;

23

.crveniKvadrat backgroundcolor:red; width:300px; height:100px;


<div class=" plaviKvadrat"> <p class=" velikaSlova">Ovo je neki tekst.</p>

</div>

<hr>

<div class=" crveniKvadrat"> <p id=" zeleno">Neki tekst.</p>

</div> </body>

</html>

2.1 HTML kodovi boj

24

Web stranica HTML Color Codes ( http://htmlcolorcodes.info/ ) nudi besplatne alate za pronalazenje odgovarajuce HTML boje. Veliki broj alata kao sto su HTML color chart i HTML color picker ce Vam omoguciti da sto brze i lakse nadjete odgovarajucu HTML boju.

2.1.1 HTML Color Chart

Sa HTML color chartom mozete dobiti HTML kodove za osnovne boje.

HTML Color Picker

Mozete poceti sa odabirom zeljene boje tako sto ce te upisati kod u polja:

http://html-color-codes.info/

http://html-color-codes.info/#Html_Color_Chart

http://html-color-codes.info/#HTML_Color_Picker

http://html-color-codes.info/#HTML_Color_Picker

25

Kako koristiti kodove HTML boja?

Sa HTML color codes mozete postaviti boju za pozadinu web stranice, boju teksta, celija i tabela, i jos mnogo toga.

Upotreba HTML color codes za background color web sajta:

<body style="background:#80BFFF">

Upotreba HTML color codes za font/text boju:

<span style="color:#80BFFF">

Upotreba HTML color codes za boju pozadine tabele:

<table style="background:#80BFFF">

Upotreba HTML color codes za boju linka:

26

<a style="color:#80BFFF">

Primjer 23: Floating:

<!DOCTYPE html>




.podvuceno textdecoration:underline; .plaviKvadrat backgroundcolor:blue; width:200px; height:200px; float:left; .crveniKvadrat backgroundcolor:red; width:300px; height:100px; float:right;

27



</div>

<hr>


</div>

<p>Ovo je neki tekst, i jos neki tekst!</p> </body>

</html>

Primjer 24: Floating sa clear:

<!DOCTYPE html>




.podvuceno textdecoration:underline; .plaviKvadrat backgroundcolor:blue;

28

width:200px; height:200px; float:left; .crveniKvadrat backgroundcolor:red; width:300px; height:100px; float:right; .ocisti

clear:both;



</div>

<hr>


</div>

<div class=" ocistit"> </div>

<p>Ovo je neki tekst, i jos neki tekst!</p> </body>

</html>

29

Primjer 25: Pozicioniranje:

CSS position Property Svojstvo position definise tip metode koja se koristi za pozicioniranje

elemenata. Metode static, relative, absolute ili fixed.

CSS Syntax:

position: static|absolute|fixed|relative|initial|inherit;

Vrijednosti svojstava

Vrijednost Opis

static Default vrijednost. Elementi se rendaju redom, kao sto su HTML

fajlu poredani

absolute Elemenat je pozicioniran relativno na svoju prvu poziciju i nije

statican.

fixed Elemenat je pozicioniran relativno u browser prozoru.

relative Elemant je pozicioniran relativno na svoju normalnu poziciju,

tako da "left:20" dodaje 20 pixels i pomjera elmenat u LEFT

position

initial Postavlja svojstvo na default vrijednosti.

inherit Naslijedjuje svojstvo od parent element.

30

<!doctype html> <html>

<head>

<title>Pozicioniranje pomocu CSS</title>

<meta charset="utf8" />

<meta httpequiv="Contenttype" content="text/html; charset=utf8" />

<meta name="viewport" content="width=devicewidth, initialscale=1" />

<style type="text/css">

.velikaSlova

fontsize:200%;

#zeleno

color:green;

.podvuceno

textdecoration:underline;

31

.bold

fontweight:bold;

.ljubicastiKvadrat

backgroundcolor:#B404AE;

width:200px;

height:200px:

position:relative;

left:100px;

top:200px;

.zeleniKvadrat

backgroundcolor:#295715;

width:300px;

height:500px;

</head>

<body>

<div class="ljubicastiKvadrat">

</style>

<p class="velikaSlova">Ovo je neki tekst.</p>

32

</div>

<div class="zeleniKvadrat">

<p id="zeleno" class="VelikaSlova">Ovo je neki tekst.</p>

</div>


<p id="zeleno" class="velikaSlova">Ovo je neki tekst i on je zelen.</p>

</div>


<p id="zeleno" class="velikaSlova">Ovdje je jos malo nekog teksta.</p>

</div>

<p>Treca rijec u <span class="podvuceno velikaSlova bold">tekstu</span> je

podvucena.</p>

</body>

</html>

33

Primjer 26: Pozicioniranje i zindex:

CSS Syntax:

zindex: auto|number|initial|inherit;

Z-index svojstvo specificira stack redoslijeda elemenata. Elementi sa vecim indexom u stacku idu naprijed ispred elmenata sa nizim stack vrijednostima.

Napomena: zindex se samo koristi sa elementima za pozicioniranje elemenata (position:absolute, position:relative, or position:fixed).

Vrijednosti svojstava

Vrijednost Opis

auto Postavlja stack vrijednosti jednake vrijednostima parent

elemenata. Ovo je default

number Postavlja stack vrijednosti u redoslijedu elmenata.

Dozvoljeni su i negativni brojevi.

initial Postavlja vrijednosti svojstava na default vrijednosti.

inherit Naslijedjuje svojstva od parent elementa.


34

<head>






.velikaSlova

fontsize:200%;

#zeleno

color:green;

.podvuceno

textdecoration:underline;

.bold

fontweight:bold;

.ljubicastiKvadrat


width:200px;

35

height:200px:

position:relative;

left:100px;

top:50px;

zindex:1;

.zeleniKvadrat


width:300px;

height:500px;

position:relative;

zindex:2;

</head>

<body>


</style>


36

</div>



</div>



</div>



</div>


podvucena.</p>

</body>

</html>

Primjer 27: Dodavanje margina:


37

<head>






.ljubicastiKvadrat


width:300px;

height:200px:

margin:50px 100px 230px 100px;

.zeleniKvadrat


width:300px;

height:500px;

position:relative;

</head>

<body>


38

</style>


</div>



</div>



</div>



</div>


podvucena.</p>

39

</body>

</html>

Primjer 28: Dodavanje bordera (okvira):

Vrijednosti koje mozemo zadati u borderstyle property :

dotted Definise tackasti okvir

dashed Definise isprekidani okvir

solid Definise puni okvir

double Definise dupli okvir

groove Definise 3D izdubljeni. Efekat zavisi od vrijednosti boje

bordercolor value

ridge Definise 3D naboranu ivicu. Efekat zavisi od vrijednosti boje

bordercolor value

inset Definise 3D inset okvir. Efekat zavisi od vrijednosti boje

bordercolor value

outset Definise 3D outset okvir. Efekat zavisi od vrijednosti boje

bordercolor value

none bez okvira

hidden Definise skriveni okvir


<head> <title>Dodavanje okvira</title>

<meta charset="utf8" /> <meta httpequiv="Contenttype" content="text/html; charset=utf8" /> <meta name="viewport" content="width=devicewidth, initialscale=1" />

40


div width:100px;

height:100px; float:left; margin:20px;

.crveno backgroundcolor:red;

border:2px yellow ridge;

.plavo backgroundcolor:blue;

borderstyle: ridge solid dotted dashed; borderwidth:10px 5px 3px 1px; bordercolor:green yellow blue black;

.zeleno backgroundcolor:green;

borderradius:50px;

</style>

</head>

<body>

<div class="crveno"> </div>

<div class="plavo"> </div>

<div class="zeleno"> </div>

</body> </html>

41

3. JavaScript JavaScript je programski jezik HTMLa i weba.

Jedna od najcesce koristenih HTML metoda je getElementById().

JavaScript Functions and Events

JavaScript function (funkcija) je blok JavaScript koda, i obicno se pravi kao odgovor na neki event.

Npr., funkcija se moze izvrsiti kada se desi neki event, kao sto je klik na dugme.

42

Primjer 29: Prvi primjer JavaScripta, ali ovako nikad ne raditi. Ovo se koristilo u starijim

verzijama HTMLa:

<!DOCTYPE html>

<html>

<body>

<h1> JavaScript primjer</h1>

<button type="button" onclick="alert('Laboratorijski rad')">Klikni me</button>

</body>

</html>

Primjer 30: Internal JavaScript

<!DOCTYPE html>

<html>

<head>

<title>JavaScript primjer!</title>

<script type=”text/javascript”>

alert(“Sta radite?”);

</script>

</head>

<body>


</body>

</html>

Primjer 31: Citanje iz nekog HTML elementa i prikaz sadrzaja.

<html>

<body>


43

<p id="prikazi">Glory glory Man united,

Glory glory Man united,


As the reds go marching on on on!

</p>


alert(document.getElementById(“text”).innerHTML);

</script>

</body>

</html>

Primjer 32: Promjena vrijednosti HTML elementa pomocu JavaScripta:

<!DOCTYPE html>

<html>

<body>


<p id="prikazi">Glory glory Man united,



As the reds go marching on on on!

</p>


// Ovo je komentar

/*

I ja sam komentar

*/

document.getElementById(“text”).innerHTML=”Manchester United je najbolji!”;

</script>

44

</body>

</html>

Primjer 33: Funkcije i odgovor

<!DOCTYPE html>

<html>

<body>


<button id="klikni">Klikni i otkriji koje je najbolji!

</button>

<script type="text/javascript">

document.getElementById("klikni").onclick=function()

alert("Man United naravno!");

</script>

</body>

</html>

Primjer 34: Promijeniti sadrzaj HTML elementa, u ovom slucaju teksta elementa pomocu

JavaScripta:

<!DOCTYPE html>

<html>

<body>


45

<div id="prviDiv"> Neki tekst</div>

<div id="drugiDiv"> Zamisli svijet bez Turbo Folka.....</div>


document.getElementById("prviDiv").innerHTML="Turbo folk je stetan za mozak i mozdane celije!";

document.getElementById("drugiDiv").innerHTML=document.getElementById("drugiDiv").innerHTML+ ".......Zivio svijet bez Turbo Folka!";

</script>

</body>

</html>

Primjer 35: Napraviti JavaScript program koji ce kad kliknem na sijalicu upaliti sijalicu, a na

ponovni klik ugasiti sijalicu i obratno.

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript u akciji!</h1>

<img id="sijalica" onclick="upaliSvjetlo()" src="pic_bulboff.gif" width="100" height="180">

<p>Klikni na sijalicu da upalis/ugasis svjetlo.</p>

<script>

46

function upaliSvjetlo()

var slika = document.getElementById('sijalica');

if (slika.src.match("bulbon"))

slika.src = "pic_bulboff.gif";

else

slika.src = "pic_bulbon.gif";

</script>

</body>

</html>

JavaScript Variables

JavaScript varijable su spremnici za cuvanje vrijednosti podataka.

JavaScript Identifiers

Sve varijable u JavaScriptu moraju imati jedinstvena imena. Jedinstvena inema se zovu identifiers.

Opste pravilo za imenovanje varijabli (unique identifiers) su:

Imena mogu da sadrze slova, brojeve, underscores, i dolar znal. Imena moraju poceti sa slovom Imena mogu poceti i sa $ mala i velika slova se ne tretiraju kao isto (y i Y su razlicite varijable) Rezervisane rijeci ( JavaScript keywords) ne mogu se koristiti kao imena varijabli

Primjer 35: U ovom primjeru imamo varijable broj1, broj2, i suma:

<!DOCTYPE html>

<html>

47

<body>

<h1>JavaScript Varijable</h1>

<p id="prikaziRezultat"></p>

<script>

var broj1 = 10;

var broj2 = 7;

var suma = broj1 + broj2;

document.getElementById("prikaziRezultat").innerHTML = "Suma=" +suma;

</script>

</body>

</html>

Primjer 35: Koristenje varijabli za promjenu teksta u divu:

<!doctype html>

<html>

<head>

<title>Laboratorijska vjezba</title>




</head>

<body>

<input id="unos" type="text" value="test" />

<button id="promijeniTekst">Promijeni!</button>

<div id="prikazDiv">Prikazi ovdje</div>


48

var noviTekst=document.getElementById("unos").value;

document.getElementById("promijeniTekst").onclick=function()

noviTekst=document.getElementById("unos").value;

document.getElementById("prikazDiv").innerHTML=noviTekst;

</script>

</body>

</html>

JavaScript prikaz

JavaScript moze prikazati" podatke na vise nacina:

pisanjem u alert box, koristenjem window.alert().

pisanjem u HTML izlazu koristeci document.write().

pisanjem u HTML elementu, koristeci innerHTML.

pisanjem u browser console, koristeci console.log().

Nizovi u JavaScriptu:

Nizovi u JavaScriptu se koriste za cuvanje visestrukih vrijednosti u jednoj varijabli.

Kreiranje nizova: Syntax:

var imeniza = [item1, item2, ...];

primjer:

var predmeti = ["informatika", "matematika", "programiranje"];

Pristupanje elementima u nizu:

49

Svakom elementu u nizu moze se pristupiti referenciranjem pomocu index number.

Ovako pristupamo vrijednosti prvog elementa u nizu predmeti:

var ime = predmeti[0];

Promijeniti cemo vrijednost prvog elementa u nizu predmeti:

predmeti[0] = "baze_podatakal";

[0] je prvi element u nizu. [1] je drugi element. Indeksi nizova pocinju sa 0.

Metode nizova u JavaScriptu:

join() funkcija sekoristi za spajanje svih elemenata niza u jedan string.

Primjer 35: join() metoda za spajanje nizova u javaScriptu:

<!DOCTYPE html>

<html>

<body>

<p>Laboratorijski rad</p>

<p id="prikazi"></p>

<script>

var predmeti = ["matematika", "programiranje", "tjelesni_odgoj", "sociologija"];

document.getElementById("prikazi").innerHTML = predmeti.join(" * ");

</script>

</body>

</html>

Popping and Pushing

U radu sa nizovima cesto imamo potrebu za dodavanjem ili uklanjanjem elemenata u nizu.

50

Popping znaci uklanjanje elemenata iz niza, dok pushing predstavlja dodavanje novih elemenata u niz.

Primjer 36: Uklanjanje zadnjeg elementa u nizu:

<!DOCTYPE html>

<html>

<body>

<p>Uklanjanje zadnjeg elementa u nizu.</p>

<button onclick="ukloni()">Ukloni</button>


<script>


document.getElementById("prikazi").innerHTML = predmeti;

function ukloni()

predmeti.pop();


</script>

</body>

</html>

Primjer 37: Dodavanje novog elementa u niz:

<!DOCTYPE html>

<html>

<body>

<p>Dodavanje novog elementa u niz</p>

<button onclick="dodaj()">Dodaj</button>


<script>

51



function dodaj()

predmeti.push("engleski_jezik");


</script>

</body>

</html>

Primjer 38: Nizovi u javaScriptu:

Metoda splice() se takodje moze koristiti za dodavanje n

<!doctype html>

<html>

<head>

<title>Laboratorijski rad</title>



<meta name="viewport" content="width=devicewidth,

initialscale=1" />

</head>

<body>

<button id="promijeniTekst">Promijeni tekst!</button>

52

<div id="prikazDiv">Ovo je neki tekst</div>


var prviNiz=new Array();

prviNiz[0]="informatika";

prviNiz[1]="matematika";

prviNiz=["mozak","frontalnikorteks"];

prviNiz.push("mozdana celija");

prviNiz.splice(2, 0, "sebicni gen", "racio");

console.log(prviNiz.length);

document.getElementById("promijeniTekst").onclick=function()

document.getElementById("prikazDiv").innerHTML=prviNiz[1];

</script>

</body>

</html>

Primjer 39: Ifelse:

Kondicionalni uvjeti se koriste da se izvrse razlicite akcije na osnovu razlicitih uslova.

Sintaksa:

if (condition)

block of code to be executed if the condition is true

53

<!doctype html>

<html>

<head>

<title>Learning Javascript</title>




</head>

<body>

<p>kakvo je vrijeme?</p>

<input id="vrijeme" />

<button id="mojeDugme">Potvrdi</button>


document.getElementById("mojeDugme").onclick=function()

if (document.getElementById("vrijeme").value=="kisa")

alert ("Kisa pada");

else

alert("Kisa ne pada!");

</script>

</body>

</html>

Primjer 40: Napraviti igricu “Pogoditi koliko je prstiju podignuto”:

koristene metode:

random() generisanje random brojeva floor() zaokruzuje broj na prvi najblizi cijeli broj

54


<head>





</head>

<body>

<p>Koliko je prstiju podignuto?</p>

<input id="odgovor" />

<button id="dugme">Potvrdi</button>


document.getElementById("dugme").onclick=function()

var x=Math.random();

x=6*x;

x=Math.floor(x);

if (x==document.getElementById("odgovor").value)

alert("Tacan odgovor!");

else

alert("Odgovor nije tacan! Moj broj je: "+x);

</script>

</body>

</html>

Primjer 41: For petlja se moze koristiti kada zelimo da se blok nekog koda izvrsi vise puta:

Sintaksa:

for (statement 1; statement 2; statement 3)

55

code block to be executed

<!doctype html>

<html>

<head>





</head>

<body>

<p id="niz"></p>


var niz=" ";

var predmeti=["informatika", "matematika", "programiranje"];

for (var i=0; i<predmeti.length; i++)

niz=niz+predmeti[i]+" ";

document.getElementById("niz").innerHTML=niz;

</script>

</body>

</html>

Primjer 42: While petlja

<!DOCTYPE html>

<html>

<body>

56


<script>

var predmeti = ["programiranje", "matematika", "sociologija", "tjelesni_odgoj"];

var i = 0;

var tekst = "";

for (;predmeti[i];)

tekst += predmeti[i] + "<br>";

i++;

document.getElementById("prikazi").innerHTML = tekst;

</script>

</body>

</html>

Primjer 42: Funkcije

<!doctype html>

<html>

<head>





</head>

57

<body>

<div>

<h1>Laboratorijska vjezba</h1>


function saberi(a,b)

alert(a+b);

saberi(3,4);

</script>

</div>

</body>

</html>

Primjer 43: Funkcije

<!doctype html>

<html>

<head>





</head>

58

<body>

<div>



function saberi(a,b)

return(a+b);

document.getElementById("prikazi").innerHTML=saberi(3,4);

</script>

</div>

</body>

</html>

59

4. jQuery

60

Definicija preuzeta sa: https://jquery.com/

jQuery is a fast, small, and featurerich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easytouse API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery je JavaScript Library (biblioteka) koja olaksava JavaScript programiranje.

Postoje dva nacina dodavanja biblioteka u Vas kod:

1. Download biblioteke sa https://jquery.com/download/ i dodavanjem u kodu linije <script type="text/javascript" src="jquery1.11.3.js"> </script>

2. Pristupom na stranicu : http://code.jquery.com/jquerylatest.js . Ako koristite ovaj naci onda ce te uvijek imati zadnju verziju jQueryja dostupnu. U kod dodati:

<script type="text/javascript" src=": http://code.jquery.com/jquerylatest.js"> </script>

Primjer 44: Provjera da li je jQuery uspjesno instaliran.

<!doctype html>

<html>

<head>

<title>JQuery biblioteka</title>




<script type="text/javascript" src="jquery1.11.3.js"> </script>

</head>

<body>

<h1>JQuery biblioteka</h1>

<script>

https://jquery.com/

https://jquery.com/download/

https://jquery.com/download/

http://code.jquery.com/jquery-latest.js


















61

if (jQuery)

alert ('JQuery je uspjesno instaliran!')

</script>

</body>

</html>

Primjer 45: Napraviti jedan krug i dva kvadrata i koristeci jQuery napraviti da kad korisnik klikne na krug ispise se poruka: “Korisnik je kliknuo na krug!”, a kad klinke na kvadrat ispise se poruka: “Korisnik je kliknuo na kvadrat!”.

<!doctype html>

<html>

<head>






<style>

#krug

width: 200px;

height: 200px;

backgroundcolor: green;

borderradius: 100px;

.kvadrat

width: 200px;

62

height: 200px;

backgroundcolor: red;

margintop: 10px;

</style>

</head>

<body>

<div id="krug"></div>

<div class="kvadrat"></div>


<script>

$("#krug").click(function()

alert("Korisnik je klinuo na krug!")

);

$(".kvadrat").click(function()

alert("Korisnik je klinuo na kvadrat!")

);

</script>

</body>

</html>

63

Primjer 45: Klikom na krug promijeniti sadrzaj paragrafa.

<!doctype html>

<html>

<head>






<style>

#krug

width: 200px;

height: 200px;



</style>

</head>

<body>


<p id="ispisi">Kakvo je vrijeme u Sarajevu?</p>

<script>

64

$("#krug").click(function()

$("#ispisi").html("Jaka i gusta magla, nista se ne vidi!");

);



);

</script>

</body>

</html>

Primjer 46: Prelaskom preko kruga promijeniti sadrzaj paragrafa.

<!doctype html>

<html>

<head>






<style>

#krug

65

width: 200px;

height: 200px;



</style>

</head>

<body>


<p id="ispisi">Kakvo je vrijeme u Sarajevu?</p>

<script>

$("#krug").hover(function()

$("#ispisi").html("Jaka i gusta magla, nista se ne vidi!");

);



);

</script>

</body>

</html>

66

Primjer 47: Napraviti da kad korisnik klikne na neki od elemenata promijeni se sirina tog elementa:

<!doctype html>

<html>

<head>






<style>

#krug

width: 200px;

height: 200px;



.kvadrat

width: 200px;

height: 200px;


margintop: 10px;

</style>

67

</head>

<body>




<script>

$("div").click(function()

$(this).css("width", "400px");

);

</script>

</body>

</html>

Primjer 48: Napraviti da kad korisnik klikne na neki od elemenata taj elemenat nestane:

<!doctype html>

<html>

<head>






<style>

68

#krug

width: 200px;

height: 200px;



.kvadrat

width: 200px;

height: 200px;


margintop: 10px;

</style>

</head>

<body>




<script>


$(this).hide();

);

</script>

</body>

</html>

69

Primjer 49: Napraviti da kad korisnik klikne na neki od elemenata taj element fade ou (postepeno nestaje):

<!doctype html>

<html>

<head>






<style>

#krug

width: 200px;

height: 200px;



.kvadrat

width: 200px;

height: 200px;


margintop: 10px;

</style>

</head>

70

<body>




<script>


$(this).fadeOut();

);

</script>

</body>

</html>

Primjer 50: Napraviti dva dugmeta i jedan paragraf; klikom na “Izbrisi” tekst u paragrafu treba postepeno nestati, a klikom na “Vrati” tekst treba postepeno da se vrati.

<!doctype html>

<html>

<head>






71

</head>

<body>

<p id="prikazi">Sarajevo je zadnjih dana u velikog i gustoj magli!</p>

<button id="ukloniTekst">Izbrisi</button>

<button id="vratiTekst">Vrati</button>

<script>

$("#ukloniTekst").click(function()

$("#prikazi").fadeOut();

);

$("#vratiTekst").click(function()

$("#prikazi").fadeIn();

);

</script>

</body>

</html>

jQuery animate() method animate() metoda izvrsava prilagodjen skup CSS. Ovaj metod mijenja element iz jednog stanja u drugo stanje sa CSS stilom.

Samo numericke vrijednosti mogu biti animiranje (npr. "margin:30px"). Stringovne vrijednosti ne mogu biti animirane (npr. "backgroundcolor:red").

Sintaksa:

(selector).animate(styles,speed,easing,callback)

Primjer 51:

72

<!doctype html>

<html>

<head>







#kvadrat

width: 200px;

height: 200px;


</style>

</head>

<body>

<div id="kvadrat"></div>

<script>

$("#kvadrat").click(function()

$(this).animate(

width:"300px",

height: "300px",

73

borderRadius:"150px",

marginLeft:"100px",

marginTop:"150px",

, 1500);

);

</script>

</body>

</html>

jQuery UI

Definicija preuzeta sa stranice: jqueryui.com

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Primjer 52: Napraviti kvadrat koji se moze micati koristeci jQuery biblioteku

<!doctype html>

<html lang="en">

<head>

<meta charset="utf8">

<title>jQuery UI Kvadrat koji se mice</title>

74

<link rel="stylesheet" href="jqueryui.min.css">

<script src="external/jquery/jquery.js"></script>

<script src="jqueryui.min.js"></script>


#kvadrat

width: 200px;

height: 200px;

backgroundcolor: grey;

</style>

</head>

<body>

<div id="kvadrat"></div>

<script>

$("#kvadrat").draggable();

</script>

</body>

</html>

Primjer 53: Napraviti Date Picker koristeci jQuery UI biblioteku

<!doctype html>

<html lang="en">

<head>

<meta charset="utf8">

75

<title>jQuery UI Datepicker primjer</title>

<link rel="stylesheet" href="jqueryui.min.css">

<script src="external/jquery/jquery.js"></script>

<script src="jqueryui.min.js"></script>

<script>

$(function()

$( "#datepicker" ).datepicker();

);

</script>

</head>

<body>

<p>Date: <input type="text" id="datepicker"></p>

</body>

</html>

Dodatak: OS.js je novi Javascript bazirani open source operativni sistem koji se pokrece u browser

76

Opis (preuzeto sa os.js.org): OS.js is a free and open source operating system that runs in your web browser. Based on Javascript, this operating system comes with a fully-fledged window manager, ability to install applications, access to virtual filesystems and a lot more. Read more to know about the OS in detail.

Web stranica za pristup: http://os.js.org/

OS.js je Javascript web desktop implementacija za web browser na Vasem racunaru.

Operativni sistem dolazi sa kompletnim window manager, GUI toolkits, filesystem

abstraction, and Application APIs.

OS.js dolazi sa velikim brojem aplikacija za pisanje, crtanje, slusanje muzike, gledanje video

sadrzaja i poznatim aplikacija poput PDF viewer, XMPP Chat, Google Mail, Google Contacts,

Tetris, and Wolfenstein3D.

OS.js potpuno besplatan i open source. Ovo znaci da mozete i sami doprinijeti tako sto ce te napraviti ili doraditi nesto prepa Vasim potrebama. Upotrebom Virtual Filesystem, uploading, downloading, i modifikovanja fajlova koriscenjem Google Drive, Dropbox i OneDrive mozete raditi na sistemu. Operativni sistem takodjer dolazi sa podrskom za Google API Javascript i Windows Live API.

http://os.js.org/

77

78

I. MySQL Instalacija MySQL servera na Windows

Instalaciju mozete preuzeti sa

https://dev.mysql.com/downloads/installer/, scroll down do opcije MySQL

database server & standard clients sekcije i odaberite najnoviju verziju.

Instalacija

Raspakujte setup file i izvrsni MSI fajl. Slijedite instrukcije za uspijesni instalaciju

MySQL Servera:

kliknite na "setup"

https://dev.mysql.com/downloads/installer/

79

Odaberite typical installation

80

81

Potvrdite Check box to configure MySQL Server

82

Ako ste izabrali Configure the MySQL Server sad odaberite check box on

the na zadnjem dijalogu MySQL Server installation, i onda ce se MySQL

Server Instance Configuration Wizard automatski pokrenuti.

Slijedite pazljivo instrukcije da konfigurisete instrukcije MySQL Server i da

se pokrene ispravno.

Odaberite Detailed Configuration

83

Ja sam instalirao na lokalnu masinu gdje se nalaze applications & toolsi

odabrao sam sam "developer machine", ali se preporucuje da se koristi

Dedicated MySQL Server Machine for your MySQL database, ako nema te

opcije onda selektujte "Server Machine".

Ako selektujete Dedicated MySQL Server Machine i Vas MySQL service se

ne pokrene, pokusajte ponovo pokrenuti wizard (ili reinstalirati) MySQL,

ali ovog puta selektujte Server Machine opciju.

84

Ja sam selektovao "Multifunctional databases" jer sam zelio MyISAM da

bude osnovni storage engine, ali ako zelite mozete selektovati

"Transactional Database Only", ovo ce ukljuciti InnoDB kao main storage

engine. Ako ste selektovali trecu opciju onda ce samo myISAM engine biti

dostupan

85

Selektovati particiju na kojoj ce biti smjesteni fajlovi baze podataka.

r

86

Nemojte mijenjati port 3306

87

preporucuje se da se MySQL Server pokrene kao Windows

service(ovo se moze iskljuciti, ali ce te svaki put morati pokrenuti service

rucno).

Specificirajte root password,

88

fro

Ako dobijete “Error message” poslije klika na Next button, onda

trebate ukljuciti port 3306 in the Windows Firewall Settings .

89

Podesavanje razvojnog okruzenja okruženje za PHP/mySQL na Windows računarima PHP je tzv. skriptini jezik koji je posebno pogodan za razvoj web aplikacija, a može se ubaciti direktno u HTML kod.

Ako ste dosad radili staticke web stranice u HTMLu, bio vam je dovoljan web browser u kojemu ste upisali putanju do vaše HTML datoteke i stvar je radila. No, sa PHPom nije tako. Da bi Vaš browser mogao prikazati izlaz neke PHP skripte, treba mu Server. Najčešće je to Apache.

Dakle, da ne bismo sada ručno skidali Apache, PHP i mySQL, te prošli kroz dosta složen proces konfiguracije, pametni ljudi su za Windows okruženje stvorili paket koji jednostavno instaliramo na nas racunar. Najjednostavniji od tih paketa zove se WAMP (što bi bilo Windows, Apache, mySQL i PHP).

WAMP mozete preuzeti sa stranice http://www.wampserver.com/en/ .

Nakon downloada, pokrenite instalaciju. Pitat će Vas gdje želite da se instalira. Pa evo par

preporuka:

Prvo, instalirajte ga na C disk, drugo, najjednostavnije za kasnije je putanja C:\wamp.

Kad instalacija završi, možete provjeriti da li sve funkcionira ako u Vaš browser upišete

http://localhost . Trebali biste vidjeti nešto slično ovoj slici:

http://www.wampserver.com/en/

90

I to je to. Radno okruzenje je spremno. Možete se malo poigrati i pogledati šta sve ima na

tom ekranu, no o tome ćemo drugom prilikom.

Pa idemo sada isprobati da li sve zaista radi. E da, sad smo došli do još jednog problema, u

čemu pisati PHP kod? Nije strašno, mozemokoristiti besplatni NotePad++, Sublime text

editor, itd.

Kreirajte novu datoteku i snimite je kao index.php u folder c:\wamp\www\lab_vjezba

(folder ne postoji, pa ga kreirajte – pretpostavljam da Vam se wamp nalazi na c:\wamp).

Sad u tu datoteku upišite sljedeći kod:

1

echo "1921, Zeljo sampion!";

otvorite web browser i ukucajte http://localhost/proba/ i na ekranu bi se trebala ispisati

rečenica “1921, Zeljo sampion!”.

PhpMyAdmin – kreiranje baze i tabele Kada instalirate WAMP server, automatski ste dobili i phpMyAdmin koji Vam služi za lakše administriranje sa mySQL bazom podataka.

http://notepad-plus.sourceforge.net/uk/download.php

91

U browseru upisite nahttp://localhost/phpmyadmin . Trebali biste vidjeti nešto slično donjoj

slici:

phpmyadmin

Ukoliko vam tako više odgovara, možete promijeniti jezik interfejsa na BHS (potražite

Language i iz padajućeg menija odaberite koji Vam odgovara).

Kako je zamišljena organizacija mySQLa?

Osnova je baza podataka, a ona sadrži tabele. Tabele sadrze polja i redove (slogove).

Tabela u bazi podataka se ne razlikuje puno od tabele u Excelu.

Kada budete pravili aplikacije aplikacije, bilo bi dobro da svaka aplikacija koju razvijate

koristi posebnu bazu podataka.U prilogu slijedi kreiranje baze podataka.

U phpMyAdminu, Create new database :

92

Kreiranje baze u phpMyAdminu

Znači, u prazno polje upisati ime nove baze i iz padajućeg menija odabrati

utf8_unicode_ci, a pod mySQL Connection Collation smo stavili utf8_general_ci. utf8 je

bitna ako želimo u našu bazu upisivati i iz nje čitati i naša famozna kvakasta slova, pa da bi

to sve skupa funkcionisalo, ova nam je postavka vrlo bitna. Uvijek kad kreirate novu bazu,

postavite stvari ovako.

Dakle, kliknite na Create (Izradi) i kreirali ste svoju prvu bazu podataka.

Nakon toga unutar naše novokreirane baze imate opciju da kreirate novu tabelu. Kod za

kreiranje tabele:

CREATE TABLE users` (

ÙserID` INT(25) NOT NULL AUTO_INCREMENT PRIMARY KEY ,

Ùsername` VARCHAR(65) NOT NULL ,

`Password` VARCHAR(32) NOT NULL ,

ÈmailAddress` VARCHAR(255) NOT NULL

)

Postoje najmanje 2 načina da kreirate svoje tabele. Prvi je da jednostavno kopirate ovaj

gornji kod, i odete na tab SQL i u veliki bijeli prostor napravite paste istog, te nakon toga

93

kliknete Go. Na taj način ćete kreirati tabelu direktnim unosom SQL upita. No, postoji i drugi

način, dosta zgodniji za početnike.

Ako ste lutali po interfaceu, vratite se u tab Structure. Pod Create new table napisat ćemo

users kao naziv i da želimo da ima 4 polja (ne brinite ako ovdje pogriješite, polja možete i

naknadno dodavati). To ustvari znači da će naša tabela users imati 4 kolone. Kliknite na Go.

Zatim pokušajte ispuniti polja prema donjoj slici:

Kreiranje tablice u phpmyadminu

Šta smo upravo napravili? Ručno smo upisali nazive polja u tabeli, te za svako polje odredili

tip i još neke detalje. Polje UserID je tako numericko (INT), ujedno je to Primarni ključ u

tabeli (samim time je jedinstveno, pomaže da nam pretraživanje tabele bude brže i ustvari

je znak dobre prakse da imate bar primarni ključ definiran). A_I znači Auto increment (to

znači da će se baza brinuti koje brojeve će ovdje upisivati kada unosimo podatke). Ostala

polja su tekstualna tipa VARCHAR sa određenom duzinom znakova u zagradi.

MySQL podržava mnogo tipova podataka sa raznim modifikatorima, ali za nas su dovoljni

samo sljedeći tipovi:

INT – cijeli broj

FLOAT, DOUBLE – decimalni broj

VARCHAR(n) – string maksimalne duljine n ≤ 255

TEXT – string maksimalne duljine 65535 znakova

BLOB – za spremanje binarnih podataka (datoteka)

DATE, TIME, DATETIME – datum, vrijeme, oboje

Jako bi nam trebalo puno vremena da objašnjavam sve tipove polja u mySQLu, pa

predlažem da to sami proučite na http://dev.mysql.com/doc/refman/5.7/en/datatypes.html

Modeliranje i dizajn baza podataka

http://dev.mysql.com/doc/refman/5.0/en/data-types.html

94

Dobar dizajn baza podataka počinje sa listom podataka koju želite da uključite u bazi podataka i šta želite da bude u stanju da uradi sa bazom podataka kasnije. Ovo sve se moze napisati napisati na nasem jeziku, bez ikakvog SQLa. U ovoj fazi morate pokušati da ne mislim na tabele ili kolone, vec samo na: “Šta treba da znam?” Nemojte ovo previše olako shvatiti, jer ako kasnije vidite da ste nešto zaboravili, obično morate da počnete sve ispocetka.

Identifikacija entiteta Topovi informacija koje se čuvaju u bazi podataka nazivaju entiteti. Ovi entiteti postoje u četiri vrste: ljudi, stvari, događaja i lokacije. Sve što ste poželjeli stavite u bazu podataka spada u jednu od ovih kategorija. Ako su informacije koje želite da uključite ne spadaju u ove kategorije, onda to nije entitet već dio entiteta, tj. atribut.

Da bi se bolje shvatilo uzeti cemo jedan primjer. Zamislite da pravite web sajt za eshop, kakve informacije treba imati? U shopu možete prodavati svoje proizvode kupcima. “Radnja” je lokacija, “Prodaja” je događaj, “Proizvodi” su stvari i “Kupci” su ljudi. To su svi subjekti koji treba da budu uključeni u bazu podataka.

Identifikacija veza izmedju entiteta Slijedeći korak je da se utvrde veze između entiteta i da se utvrdi kardinalnost svake veze. Veza između entiteta je veza baš kao u stvarnom svijetu: šta jedan entitet radi sa drugim , kako se oni odnose jedni prema drugima? Na primjer, kupci kupuju proizvode, proizvodi se prodaju kupcima, kompanija prodaje proizvode i prodaja se dešava u prodavnici.

95

Kardinalnosti pokazuje koliko jedna strana veze pripada drugoj strani veze i obratno. Prvo, treba da se navede za svaku vezu, koliko jedna strana veze pripada tačno 1na drugoj strani. Na primjer: Koliko mušterija pripada 1 kupovini? Koliko prodaje pripada 1 klijentu? Koliko prodaje se napravilo u 1 radnji?

Trebali bi dobiti slijedecu listu: (napomena 'proizvod' predstavlja tip proizvoda, a ne broj

proizvoda)

Kupci > Prodaja; 1 kupac moze nesto kupiti vise puta

Prodaja > Kupci; 1 kupovina je uvijek napravljena od 1 kupca

Kupci> Proizvodi; 1 kupac moze kupiti vise proizvoda

Proizvodi >Kupci; 1 proizvod moze biti kupljen od vise kupaca

Kupci > Radnje; 1 kupac moze kupovati u vise radnji

Radnje > Kupci, 1 radnja moze usluziti vise kupaca

Radnje > Proizvodi; u 1 radnji ima vise proizvoda

Proizvodi > Radnje; 1 proizvod (tip proizvoda) se moze prodavati u vise radnji

Radnja > Prodaja; u 1 radnji moze se napraviti vise prodaja

Prodaja > Radnje; 1 prodaja moze biti napravljena u 1 radnji

Proizvodi > Prodaja; 1 proizvod (tip) moze se kupiti u vise prodaja

Prodaja > Proizvodi; 1 prodaja se moze napraviti od vise proizvoda

Da li smo pomenuti sve veze? Postoje četiri entiteta i svaki entitet ima vezu sa svakim drugim entitetom, tako da svaki entitet mora imati tri veze, a takođe se pojavljuju na lijevom kraju odnosa tri puta. Iznad, 12 veza se pominje, što je 4 * 3, pa se može zaključiti da su pomenute sve veze.

Sada ćemo sastaviti podatke zajedno da bi pronasli kardinalnost cjelokupne veze. Da bi se to napravilo, prvo se napravi kardinalnost po jednoj vezi. To se lahko moze napraviti, tako sto cemo malo prilagoditi notaciju, oznacavajuci suporotne veze:

Kupci > Kupovine; 1 kupac moze nesto kupiti vise puta

Kupovine > Kupci; 1 prodaja je uvijek napravljena od 1 kupca

96

Drugi veza koji će se okrenuti tako da ima isti poredak entiteta kao prvi. Obratite pažnju na

strijelicu koja je sada okrenuta na drugu stranu stranu!

Kupci < prodaje; 1 prodaja je uvijek napravljena od 1 kupca

Kardinalnost postoji u četiri tipa: jedannajedan, jedanpremaviše, visenajedan, i

visepremaviše. U dizajnu baze podataka to je naznačeno kao: 1: 1, 1: N, M: 1, i M: N. Da biste

pronašli pravi pokazatelj samo stavite 1. Ako postoji ‘vise’ na lijevoj strani, to će biti označeno sa

‘M’, ukoliko postoji ‘vise’ na desnoj strani onda je označeno sa ‘N’.

Kupci > Prodaje; 1 kupac moze nesto kupiti vise puta; 1:N.

Kupci < Prodaje; 1 prodaja je uvijek napravljena od 1 kupca; 1:1.

Puna kardinalnost može se izračunati kroz dodeljivanje najveće vrijednosti za lijevu i desnu, za

koju ‘N’ ili ‘M’ su veći od 1. U ovom primjeru, u oba slučaja postoji ‘1’ na lijevoj strani. Na desnoj

strani, postoji ‘N’ i ‘1’, ‘N’ je najveća vrijednost. Ukupna kardinalnost je stoga ‘1:N’. Kupac može

napravi vise ‘prodaja’, ali svaka ‘prodaja’ ima samo jednog kupca.

Ako ovo primijeni i na ostale veze, dobiti cemo:

Kupci > Prodaje; > 1:N

Kupci > Proizvodi; > M:N

Kupci > Radnje; > M:N

Prodaje > Proizvodi; > M:N

Radnje > Prodaje; > 1:N

Radnje > Proizvodi; > M:N

To znaci da imamo dvije '1navise' veze i cetiri visenavise' veze.

Nastavak slijedi u srijedu……………….

JSON JSON ili JavaScript Object Notation je je sintaksa za čuvanje i razmjenu podataka. JSON je lakša alternativa za korištenje od XMLa.

XML znaći EXtensible Markup Language i dizajniran je za čuvanje i transport podataka.

Ekstenzija fajlova je .json.

97

Upotreba JSONa:

Primjer: Ovdje imamo jednostavan primjer za demonstraciju korištenja JSONa za čuvanje podataka o knjigama na osnovu naslova i izdanja:

"knjiga": [

"id":"01", "naslov": "Poduzetništvo i ostale ćari biznisa", "izdanje": "treće", "autor": "Džindo Nedžad" ,

"id":"07", "naslov": "Ana Karenjina", "izdanje": "drugo", "autor": "L.A. Tolstoj" ]

Primjer: u ovom XML primjeru imamo definisan učenici objekat sa 3 učenika zapisa:

<ucenici>

<ucenik>

<ime>Amir</ime> <prezime>Amiric</prezime>

</ucenik>

98

<ucenik>

<ime>Martina</ime> <prezime>Martinic</prezime>

</ucenik>

<ucenik>

<ime>Sofija</ime> <prezime>Sofijic</prezime>

</ucenik>

</ucenici>

Primjer: Kreiranje JSON objekta u JavaScriptu:

<!DOCTYPE html>

<html>

<body>

<h2>Kreiranje JSON objekata u JavaScriptu</h2>


<script>

var text = '"ime":"Martina Martinic","ulica":"Safeta Zajke 2","tel":"1234567"';

var obj = JSON.parse(text);

document.getElementById("prikazi").innerHTML =

obj.ime + "<br>" +

obj.ulica + "<br>" +

obj.tel;

</script>

99

</body>

</html>

JSON Sintaksa JSON sintaksa je podskup JavaScript sintakse. JSON sintaksa je izvedena iz JavaScript objektne notacije:

Podaci su u ime/vrijednost paru: "ime":"Martina" Podaci su razdvojeni zarezima U vitičastim zagradama se čuva objekat U uglastim zagrada se čuvaju nizovi:

"ucenici":[

"ime":"Martina", "prezime":"Martinic",

"ime":"Alma", "prezime":”Almic",

"ime":"Maida","prezime":"Maidic"

]

Primjer: Kreiranje JavaScript objektnog niza.

<!DOCTYPE html>

<html>

<body>

<p>Kreiranje JavaScript objektnog niza.</p>


<script>

var ucenici = [

"ime":"Maida",

"prezime":"Maidic"

100

,

"ime":"Martina",

"prezime":"Martinic"

,

"ime":"Natasa",

"prezime":"Natasic"

];


ucenici[0]["ime"] + " " + ucenici[0]["prezime"];

</script>

</body>

</html>

Primjer: Promjena vrijednosti elementu niza.

<!DOCTYPE html>

<html>

<body>

<p>Promjena vrijednosti elementu niza.</p>


<script>

var ucenici = [

101

"ime":"Martina",

"prezime":"Martinic"

,

"ime":"Maida",

"prezime":"Maidic"

,

"ime":"Natasa",

"prezime":"Natasic"

];

ucenici[0].ime="Ajla";


ucenici[0].ime + " " + ucenici[0].prezime;

</script>

</body>

</html>

Upotreba JSONa: Osnovna upotreba JSONa je za čitanje podataka sa web servera i prikaz istih u web stranici. Na primjeru ćemo vidjeti string kao input (umjesto fajla):

Kreiranje objekta iz stringa:

var text = ' "ucenici" : [' +

102

' "ime":"Martina","prezime":"Martinic",' +

'"ime":"Maida","prezime":"Maidic",' +

' "ime":"Natasa","prezime":"Natasic" ]';

JavaScript funkcija JSON.parse(text) se koristi za konvertovanje JSON texta u JavaScript objekat :

var obj = JSON.parse(text);

Primjer: Kreiranje objekta iz JSON stinga

<!DOCTYPE html>

<html>

<body>

<h2>Kreiranje objekta iz JSON stinga</h2>


<script>

var text = ' "ucenici" : [' +

' "ime":"Martina","prezime":"Martinic",' +

'"ime":"Maida","prezime":"Maidic",' +

' "ime":"Natasa","prezime":"Natasic" ]';

obj = JSON.parse(text);


obj.ucenici[1].ime + " " + obj.ucenici[1].prezime;

</script>

</body>

</html>

CMS: WordPress alat

103

WordPress je web softver koji se koristi za kreiranje web stranica, bloga, ili aplikacija. Instalaciju mozete preuzeti sa https://wordpress.org/ .

Instalacija

Kreiranje postova Prvo se logujte i otvorite Posts -> Add New.

Otvoriti ce se WordPress posts editor. Unesite:

Post Title - naslov Vaseg posta. Post Content - mozete koristiti WordPress WYSIWYG editor da dodate sadrzaj na Vas

post. Note that it has two tabs - Visual (formatiranje teksta) i Text ( da dodate HTML kod direktno).

https://wordpress.org/

104

Nakon sto ste unijeli sadrzaj u Vas post, onda kliknite Publish. Post je objavljen na web starnici.

Provjerite na web stranici, da li ste uspijesno objavili post.

Dodavanje multimedijalnog sadrzaja

105

Dodavanje fotografija, video klipova i muzike u post je veoma jednostavan postupak u

WordPress-u. Kliknite gdje zelite dodati sadrzaj i onda kliknite na Add Media dugme u

gornjem lijevom uglu editora.

WordPress Insert Media pop-up prozor ce se pojaviti. Kliknite na Select files dugme.

Nakon sto ste izabrali fajl WordPress ce automatski uplodovati. U primjeru je dodana

slika. Kad dodajete slike trebate obratiti paznju na dvije stvari. Prvo je da dodate opis

slike -unesite Alt tag, naslov za link, itd.

106

Kad ste dodali sliku, postavite:

Alignment - Kako ce te poravnati sliku u sadrzaju. Link To - Odredite gdje se slika nalazi. Size - Odredite velicinu slike.

Nakon sto ste unijeli sve informacije za sliku, kliknite na Insert into post dugme.Slika je

nakon ovog dodana na Vas post..

107

Sad mozete azurirati Vas post i slika ce biti dodana front end Vaseg web sajta.

Na isti nacin se moze dodati muzika i video sadrzaj na Vas post.

108

Koristenje kategorija

WordPress categories su veoma korsini za organizovanje sadrzaja na Vasem web sajtu.

Mozete imati parent i child kategorije, sto pravi hijerahijsku strukturu. Jedan post moze

pripadati vise kategorija.

Da napravite kategoriju kliknite na Posts > Catgories stranicu prvo.

Na lijevoj strani stranice nalazi se tab za kreiranje kategorija. Unesite ime kategorije i kliknite na

Add New Category dugme. U ovom primjeru je napravljena kategorija Family posts.

109

Kategorija je napravljena i sad cemo napraviti podkategoriju. Family posts i jedna

podkategorija namedNephews (imenovaniNecaci ili na nasem, amidzici, dajdzici, tetkici).

Unesite ime za podkategoriju koja je dijete Family posts kategorije. kliknite na Add New Category jos jednom da sacuvate novu podkategoriju.

Kako dodijeliti post kategoriji

Nakon sto ste napravili strukturu, mozete dodati post kategoriji. Postoje dva nacina da se to

uradi. Prvi je da se otvori post ili kreira novi i selektuje checkbox u kategoriji kojoj zelimo dodati

post.

110

Drugi nacin je da se dodata grupa postova kategoriji. Odite na Posts > All Posts. Slijedece je

da selektujete postove koje zelite dodati u kategoriju,i kliknite na Bulk Actions tab, odaberite

Edit ai na kraju kliknite na Apply dugme.

Nakon sto ste uradili to imate opcije da prilagodite postove kategorijama. Otvorite Categories sekciju. Selektujte kategoriju kojoj zelite dodati post i kliknite Update dugme.

111

Sad vidite da post koji ste kreirali pripada kategoriji koju ste izabrali.

112

Instalacija themea Prva stvar koju trebate napraviti je da se logujete na admin page Vaseg web sajta i nakon toga otvorite Appearance -> Themes.

Ovdje mozete vidjeti sve trenutno instalirane theme. Da dodate neku od njih, jednostavno

samo kliknite na Install Themes tab.

Na ovoj stranici postoje dva nacina da se doda nova theme-a. Mozete koristiti polje za pretragu koje ce Vam kao rezultat vratiti neku od theme-a sa WordPress.org theme ili mozete direktno pokupiti theme-u sa Vaseg racunara.

113

Dodavanje i instalacija theme sa oficijelnog WordPress theme directory

Najlaksi nacin da instalirate novu theme-u na Vas WordPress sajt je da uzmete neku koja se

nalazi u oficijalnom direktoriujmu theme-a. ovo Vam omogucuje da theme-u trazite dikrektno iz

Vaseg admin page-a

Ako znate ime theme, mozete jednostavno preko imena traziti.

To nije uvijek tako jednostavno i zato se koristi Feature Filter. Npr. mozete traziti Black iWhite,

Two columns theme koja ima Flexible Width. Jednostavno provjerite tagove i kliknite na

Apply Filters dugme.

114

Vidjet cete theme koje trazite. I sad imate dvije opcije:

da vidite demo theme

da instalirate themeu

Jednom kad odaberete themeu kliknite na plavo dugme Install.

Vasa WordPress aplikacija ce skinuti themeu za Vas. Sad kliknite Acticate link na slijedecoj

stranici da otvorite novu themeu.

115

Sad mozete ici na front end page da vidite stranicu.

Dodavanje theme koju ste vec skinuli

Ako imate themeu koja se ne nalazi u WordPress.org directory, jednostavno dodate tako sto odete

na Themes > Install Themes sekciju u WordPressu. Kliknite na Upload link na vrhu stranice.

116

Sad kliknite naChoose Filedugme , odaberite themeu sa Vaseg racunara i kliknite naInstall Now

dugme.

Za nekoliko sekundi WordPress ce dodati themeu. Sve sto trebate je da kliknete na Activate link

za instalaciju..

Sad mozete otvoriti themeu na front end da vidite web sajt sa novom themeom .

117

Prilagodjavanje theme

Da bi prilagodili WordPress themeu, otvorite Appearance > Themes page..

Na ovoj stranici, nadjite aktivne theme (Twenty Fourteen u ovom primjeru) i kliknite na Customize

dugme.

Na slijedecem screenu mozete modifikovati WordPress theme u realnom vremenu.

Modifikovanje WordPress Naslova i Taglinea

Unesite sadrzaj u polja Site Title & Tagline i na kraju kliknite na Save & Publish dugme.

118

Modifikovanje WordPress Front Pagea

WordPress dozvoljava da izaberete izmedju dvije opcije static page i lista postova. Pogledajte

Static Front Page tab da vidite dostupne opcije.

WordPress ce prikazivati najnovije postove na front end stranici. Npr., ovo mozete promijeniti da

bude Static page. Ako odaberete imate dodatne opcije da odaberete stranicu koja ce biti

prikazana i slicno.

Dodatne WordPress Theme modifikacije

119

Npr. ovdje mozete promijeniti boju pozadine, dodati sliku i puno jos toga. Kada zavrsite klinkite na

Save & Publish dugme da spasite promjene.

Prilagodjavanje Dashboarda

Prvo sto ce te vidjeti kada otvorite WordPress admin panel je Dashboard. To je kolekcija gadgeta koji Vam pruzaju informacije kako se kretati kroz stranice. Npr. mozete vidjeti nove komentare, napraviti post, itd..

Da konfigurisete sta zelite vidjeti na Vasem WordPress Dashboard, kliknite na Screen Options. Otvoriti ce se panel koji ce Vam omoguciti check i uncheck koje zelite vidjeti ili ukloniti.

120

Nakon promjena prikaz na ekranu ce se azurirati.

Kada instalirate neki novi plugin, moze doci do promjene u prikazu nekih informacija na Dashboardu.

121

Azuriranje WordPressa iz admin konzole WordPress se jednostavno azurira direktno iz Admin konzole . Na vrhu ce te vidjeti poruku za azuriranje.

Prije svakog azuriranja obavezno napraviti backup WordPress web sajta.

122

Kliknite Update da ocne proces azuriranja.Imate dvije opcije ruco ili automatski.

Kliknite Upgrade Automatically. WordPress web sajt ce biti azuriran.

Instalacija plugina u WordPressu Plugini su moduli koji nam omogucuju dodatnu funkcionalnost u web sajtu To install a plugin you generally just need to put the plugin file into your 'wpcontent/plugins' directory. Once a plugin is installed, you may activate it or deactivate it from the Plugins menu in your WP administration.

123

Generally the Plugin installation is a straightforward process. In most cases it is enough to upload the plugin under the 'wpcontent/plugins' directory for the WordPress installation and activate it from the administrator backend.

In WordPress 2.7 and above you can install plugins directly from the admin area. Download the plugin to your computer, then log in to your WP admin area and go to Plugins > Add New. Browse to the plugin archive and select it. Then click Install Now and the plugin will be installed shortly.

124

The removal is also straightforward in most cases. Simply remove the directory for the plugin you would like to uninstall and it will be automatically deactivated.

Still always bear in mind that not all plugins are easy to install, so always refer to their documentation and installation instructions first.

You can check our detailed articles on the following WP plugins:

WordPress Shopping cart WordPress Lightbox by Foo Plugins WordPress Images Recent comments plugin Wordpress Spelling checker plugin BuddyPress as a Community Website Wordpress Classifieds Plugin: WP Classified; Another WordPress Classifieds Plugin

(AWPCP); Your Classified Ads

Kako deinstalirati plugin u WordPressu

Postoje hiljade WordPress plugina dostupani za instalaciju svom sajtu. Međutim, važno je da deinstalirate sve WordPress plugine koje ne želite da koristite. WordPress plugini su kao aplikacija koje mozete izvršavati na svom sajtu. To im daje ogromnu kontrolu Vašeg sajta. Dok plugin developeri daju sve od sebe da bi plugini bili sigurni i bezbijedni, historija nam pokazuje da se greške dešavaju s vremena na vrijeme. To znači da svaki plugin koji ne koristite na Vašem sajtu obavezno deinstalirate je mogu predstavljati potencijalnu opasnost.

Deinstalacija plugina je jako jednostavna u Admin panela.

https://www.siteground.com/tutorials/wordpress/wordpress_shopping_cart.htm

https://www.siteground.com/tutorials/wordpress/foobox-lightbox-plugin.htm

https://www.siteground.com/tutorials/wordpress/wordpress_images.htm

https://www.siteground.com/tutorials/wordpress/wordpress_recent_comments.htm

https://www.siteground.com/tutorials/wordpress/wordpress_spelling_checker.htm

https://www.siteground.com/tutorials/wordpress/wordpress_buddypress.htm

https://www.siteground.com/tutorials/wordpress/wordpress_classifieds_plugin.htm

https://www.siteground.com/tutorials/wordpress/wp_classified.htm

https://www.siteground.com/tutorials/wordpress/wp_classified.htm

https://www.siteground.com/tutorials/wordpress/awpcp.htm



https://www.siteground.com/tutorials/wordpress/wordpress/your_classified_ads.htm

https://www.siteground.com/tutorials/wordpress/wordpress/your_classified_ads.htm

125

Kad kliknete na plugin tab, dobijete listu svih instaliranih plugina. Aktivni plugini imaju plavu pozadinsku boju. Kada kliknete na “Delete” dobijete popup prozor da potvrdite akciju.

126

Da uspijesno izbrisete plugin kliknite na “Yes, delete these files” dugme.

Razlika izmedju deaktivacije i deinstalacije WordPress plugina

Mnogi korisnici imaju naviku jednostavno jednostavno deaktiviraju plugine koje ne zele koristiti. Deaktiviranje plugina bez trajnog brisanja je vrlo korisno za otklanjanje grešaka i ispravki grešaka jer drži svoje postavke i konfiguraciju gdje se ponovo aktivira. Međutim često korisnici završe tako što nađu neko drugo rešenje i nikada više ne koristeći ovaj plugin.

Samo deaktiviranje plugina moze biti potencijalna opasnost za Vas web sajt, jer moze u sebi sadrzavati maliciozni kod. Ako neki plugin ne zelite koristiti u skorijem vremenu bolje da ga izbrisete. Sto je jako vazno napomenuti brisanjem plugina cuvate I bazu podataka od “junk data” koje obicno plagin ostavi za sobom. Sto je vazno reci da uvijek mozete skinuti I reinstalirati plugin.

Ciscenje WordPress baze podataka

127

Neki WordPress plugini kreiraju sopstvene tabele u WordPress bazi podataka. Ako tabele imaju jako puno podataka to odmah povecava i samu WordPress bazu.

Tabele iz baze mozete izbrisati koristeci phpMyadmin. Ali imajte na umu da sve prvo bakapujete pa tek onda cistice bazu.

Otvorite Vasu bazu I selektujte tabele koje zelite izbrisati.

Sad ce te vidjeti upozerenje prije izvrsavanja same akcije brisanja tabela.

128

phpMyadmin ce azurirati tabele i izbrisati podatke iz tih tabela.

Preporuceni WordPress plugini

BackupBuddy

BackupBuddy is a premium WordPress plugin that provides you a stable and easy way to backup and transfer your sites with multiple options to store your archives including Dropbox, Amazon, etc.

Author: iThemes.com

129

FooBox Media Lightbox

This plugin creates a fully responsive image, video and HTML lightbox with builtin social sharing and slideshow functionality. FooBox now gives custom 20% discount to SiteGround clients and visitors!

Author: FooPlugins

Akismet

Akismet stops the spammessages in your blog comments. Any messages recognized as blog spam get recorded in the Akismet web service and blogs all over the world become immune against it.

Author: Akismet.com

Jetpack

130

This is a comprehensive plugin that contains a wide range of features: notifications in your toolbar, connect site to social networks and automatically share, view concise stats, allow subscriptions to your posts to receive notifications, share content with Facebook, Twitter and more.

Author: Jetpack.me

Contact Form 7

With Contact Form 7 you can easily create instant drop in forms for the visitors of your WordPress blog. This way you will be able to stay in touch with them without providing your email address. Your readers can contact you any time and your email remains spamfree.

Author: Widget Factory Limited

All In One SEO Pack

This is a plugin that helps you optimize your WordPress for SEO and generates meta tags automatically, optimizes titles, avoids duplicate content, includes Google Analytics support. It is the only plugin to provide SEO integration for ecommerce.

Author: Michael Torbert

131

WP Security Audit Log

This plugin enables you to keep track of all the WordPress users activity and everything else that is happening under the hood of your WordPress to ensure user productivity and to help you identify WordPress security issues before they become a security problem. With WP Security Audit Log you can also configure specific monitoring rules so when a specific change happens you are instantly alerted via email of such change.

Author: WP White Security

WordPress sigurnost

WordPress je najpopularniji blogging i CMS alat na internet, a samim tim je i meta velikog broja crackera (zlonamjernih hackera).

Vazno je ograniciti pristup Vasem WordPress admin panelu na osobe kojima samo treba pristup. Ako Vas sajt ne podrzava registraciju, posjetioci Vaseg web sajta ce moci pristupiti Vasem /wpadmin/ folderu ili wplogin.php fajlu. Najbolje sto mozete uraditi da da dobijete Vasu IP adersu (mozete koristiti www.whatismyip.com da dobijete tu informaciju) I dodate ove linije u .htaccess fajl u Vasem WordPress admin folderu zamijenjujuci xx.xxx.xxx.xxx sa Vasom IP adresom.

<Files wplogin.php> order deny,allow Deny from all Allow from xx.xxx.xxx.xxx </Files>

U slucaju da zelite omoguciti za vise racunara (npr. Racunar u office, kucni racunar, alptop, itd.) jednostavno dodajte jos jedan Allow i xx.xxx.xxx.xxx iskaz u novu liniju.

http://www.whatismyip.com/

http://www.whatismyip.com/

132

Zastita od spamova

1. Provjerite da je Vasa WordPress scripta azurirana na poslijednju stabilnu verziju. 2. Instalirajte captcha plugin. Dobar izbor je WOrdPress ReCaptcha plugin. 3. WordPress doalzi sa instaliranim antispam pluginom Akismet.

Kako aktivirati Akismet plugin u WordPress web sajt

1.Odite na Plugins > Installed.

Aksimet plugin ce biti aktiviran.

133

1. Kliknite na "enter your WordPress.com API key" (ili mozete kliknuti na Akismet

Configuration u Plugins sekciji).

1. Kliknite na Update.

134

2. Ako ste unijeli ispravan API kljuc, onda ce sve biti uredno verifikovano.

Sad je Vas web sajt zasticen od spamova. Mozete pratiti komenatre u sekciji > Comments.

135

Kako promijeniti WordPress username

Ako imate postojeci WordPress web sajt i zelite da promijenite Vas username mozete uraditi na slijedeci nacin:

Otvorite bazu:

Ako niste sigurni, mozete uvijek provjeriti wpconfig.php root folder:

define('DB_NAME', 'user_wp448');

Nadjite u bazi tabelu _users

Nadjite admin username i kliknite na Edit dugme na toj liniji.

136

Pronadjite user_login polje i zamijenite vrijednsot, i onda kliknite Go dugme.

WooCommerce plugin

E-Commerce (E-trgovina) je ogromna globalna prodaja i trgovina (e-trgovinu) sa budžetom $ 1.25 triliona do 2013. Tokom proteklih nekoliko godina postalo je lakše da započnete svoj e-commerce prodavnicu, nego "stvarnu" sa proizvodima. WordPress ima nekoliko opcija za elektronsku trgovinu.

137

WooCommerce full opensource ecommerce plugin za WordPress napravljen odstarne WooThemes. Pruža stabilni i sigurnu platformu It offers a stable and secure platform.

Instalacija i postavke WordPress Dashboard

1. Logujte se na Dashboard. 2. Plugins > Add New. 3. Ukucajte u pretragu "WooCommerce". 4. Odaberite prvi "WooCommerce excelling eCommerce". Klinkite na Install now.

http://www.woothemes.com/woocommerce/

http://www.woothemes.com/

138

Pisanje dokumentacije za WordPress Theme Framework Za uspiješno završen web sajt neophodna je dokumentacija. Šta je važno dokumentovati je svaka izmjena u kodu, funkcije, filtere i korištenje scih APIjeva.

Dokumentuje se :

Komentari u kodu Pravi se readme file Napravi se wiki Napravi se website Napravi se tutorials ili snimi video

Pisanje kvalitetnih komentara

Komentari su jako važni kad neki drugi developer radi sa kodom koji ste Vi napisali.

/**

* Template Name: sidebarproducts.php

*

* The include file used for the sidebar on pages using the singleproduct.php template. Displays a gallery of product images (omitting the featured image which is displayed in the content).

*

* @package wpptlthemeframework

* @since version 1.0

*/

139

Pisanje Readme File

readme.txt file je viši nivo komentiranja. To je jedan fajl koji sadrži sve theme, informacije o themi, itd.

140

Pisanje Wiki ili Websajta sa instrukcijama Ovo je opcija koja je važna kad se proširuje baza korisnika. Veliki broj broj thema se nudi u više paketa, npr. premium, pro, basic i ovom dokumentacijom tražite od korisnika da se loguju da bi i oni dokumentovali i doprinijeli proširenju dokumentacije.

141

Pisanje tutoriala i snimanje video klipova Tutoriali pomažu novim korisnicima, tačnije onima koji ne znaju kodirati da brže nauće neke stvari. Video klipovi pružaju jako dobar vizuelni priručnik, a i marketiški je jako dobro sredstvo za promociju.

Video klipovi:

142

Dodavanje banera u Vaš sidebar

Jako često vidimo bannere na skoro svakom web sajtu. Najjednostavnije dodati banner je pomoći Text widget sa banner code in it, i to se direktno doda u sidebar.php fajl Vaše theme.

Ako Vaša thema podržava widgete odite na Appearance > Widgets. Onda prevucite Text widget u odgivarajuće podrućije. U ovom primjeru je "Main Sidebar".Ubacite banner kod, stavite naslov i kliknite na Save dugme

Prikaz bannera na frontendu Vaše web stranice:

143

PHP

PHP ili Personal Home Page (ili PHP: Hypertext Preprocessor) je jedno od serverside open

source rješenja. PHP je reflektivni programski jezik prvobitno dizajniran za pravljenje dinamičkih

web stranica. PHP se uglavnom koristi za izvršavanje skripti na serverskoj strani (serverside

scripting), ali se može koristiti sa komandnog linijskog interfejsa ili preko samostalne grafičke

aplikacije.

Server side scripting predstavlja vid izvršavanja web skripti na webu, a samo mu ime kaže da se

izvršava na serveru (suprotno od JavaScripta koji se izvršava na klijentskoj strani browseru).

Ustvari trebate biti u mogucnosti da izvrsite 4 osnovne akcije koje se zovu CRUD Create, Read, Update, and Delete. Da bi ovo implementirali mozete koristiti jezike kao sto PHP, ASP, Python, Rails, NodeJS koji se izvrsavaju na Vasem serveru.

Da bi mogli koristiti aplikaciju treba Vam korisnicki interface koji se kreira sa which is HTML + JS (ili jQuery) + CSS.

https://bs.wikipedia.org/w/index.php?title=JavaScript&action=edit&redlink=1

144

Ukratko:

client side = kod se izvrsava na korisnikovoj strani najcesce u web browseru

server side = kod se izvrsava na serveru, output se salje klijentu

Danas je vecina web sajtova razvijena u PHPu a najpoznatija je Facebook. Vise informacija moze se naci na http://php.net/manual/en/index.php

http://php.net/manual/en/index.php

145

Sta je PHP framework

PHP frameworks omogucava nam laksi razvoj web stranica. PHP Framework je

najjednostavnije receno platforma napravljena od PHP jezika koja omogucava web

razvoj. Drugim rijecima receno omogucava strukturu za jednostavan razvoj..

Ovo je najboljih 5 PHP frameworka u 2015 godini:

1. CodeIgniter

2. Laravel

3. Cake PHP

4. Symphony

5. Zend

Primjer: Test PHPa (fajl treba da se nalazi na serverside)

<?php

echo "Ovo je PHP!";

?>

Primjer: Test PHPa kroz frontend:

<!DOCTYPE html>

<html>

<body>

<h1>Moja prva PHP stranica</h1>

<?php

echo "Vidjeti Grbavicu juce bilo je stvarno posebno. 1921 zauvijek!";

?>

146

</body>

</html>

Primjer: Komentari u PHPu

<!DOCTYPE html>

<html>

<body>

<?php

// Ovo je komentar u jednoj liniji

# Ovo je komentar u jednoj liniji

/*

Ovo je komentar u vise linija

koji se moze pisati u

vise linija

*/

// Mozete koristiti i ove komentare

$x = 5 /* + 15 */ + 5;

echo $x;

?>

</body>

</html>

Primjer: Varijable u PHPu pocinju sa $ znakom

147

<!DOCTYPE html>

<html>

<body>

<?php

$sampion = "1921";

echo "Ime sampiona se zna $sampion!";

?>

</body>

</html>

Primjer: Varijable u PHPu

<!DOCTYPE html>

<html>

<body>

<?php

$x = 5;

$y = 4;

echo $x + $y;

?>

</body>

</html>

148

PHP echo iskaz Moze se koristiti sa zagradama i bez zagrada: echo or echo().

Primjer: Koristenje echo iskaza bez zagrada

<!DOCTYPE html>

<html>

<body>

<?php

echo "<h2>Zeljo je sampion!</h2>";

echo "1921 forever!<br>";

echo "Grbavice rano ljuta!<br>";

echo "Mi ", "smo ", "Zeljini ", "Zeljo ", "1921 forever.";

?>

</body>

</html>

Primjer: Ispis varijabli

<!DOCTYPE html>

<html>

<body>

<?php

$txt1 = "Zeljo je sampion";

$txt2 = "1921";

$x = 5;

$y = 4;

echo "<h2>" . $txt1 . "</h2>";

echo "Ime sampiona je" . $txt2 . "<br>";

echo $x + $y;

?>

149

</body>

</html>

PHP print iskaz Moze se koristiti sa zagradama i bez zagrada: print or print(). Primjer: Ispis varijabli

<!DOCTYPE html>

<html>

<body>

<?php

print "<h2>Zeljo je sampion!</h2>";

print "1921 forever!<br>";

print "Grbavice rano ljuta!<br>";

print "Mi ", "smo ", "Zeljini ", "Zeljo ", "1921 forever.";

?>

</body>

</html>

Primjer: Ispis varijabli

<!DOCTYPE html>

<html>

<body>

<?php

$txt1 = "Zeljo je sampion";

$txt2 = "1921";

$x = 5;

150

$y = 4;

print "<h2>" . $txt1 . "</h2>";

print "Ime sampiona je" . $txt2 . "<br>";

print $x + $y;

?>

</body>

</html>

Tipovi u PHPu Integers Doubles Booleans NULL Strings Arrays Objects Resources

PHP string Primjer: Primjer upotrebe stringa u PHPu:

<!DOCTYPE html>

<html>

<body>

<?php

$x = "Hej Grbavice!";

$y = 'rano ljuta!';

151

echo $x;

echo "<br>";

echo $y;

?>

</body>

</html>

PHP nizovi

<!DOCTYPE html>

<html>

<body>

<?php

$timovi = array("Zeljeznicar","Man United","BVB09");

var_dump($timovi);

?>

</body>

</html>

PHP objekti <!DOCTYPE html>

<html>

<body>

<?php

class Automobil

function Automobil()

$this>model = "BMW";

152

// napravite objekat

$auto = new Car();

echo $auto>model;

?>

</body>

</html>

……………………………….

Documents

Laboratorijske vježbe za IV razrede_.pdf