JU MJEŠOVITA SREDNJA ELEKTROTEHNIČKA

ŠKOLSKA GODINA
ŠKOLA TUZLA 2020./2021.

MATURSKI RAD
Predmet: Web programiranje
Tema: Web aplikacija za vođenje kladionice

MENTOR: UČENIK:
Tokić Samir, dipl. ing. Đurić Srđan
Razred: 4T1

TUZLA, maj, 2021.god.

Sadržaj
1. Uvod........................................................................................................................................1
2. Tehnologije..................................................................................................................................2
2.1. HTML...................................................................................................................................2
2.2. CSS.......................................................................................................................................3
2.3. JavaScript..............................................................................................................................3
2.3.1. JavaScript biblioteka......................................................................................................4
2.4. Laragon.................................................................................................................................6
2.5. MySQL.................................................................................................................................7
2.5.1. HeidiSQL.......................................................................................................................8
2.6. PHP.......................................................................................................................................9
3. Izrada web aplikacije(sajta).......................................................................................................10
3.1. Ime i logo............................................................................................................................10
3.2. Baza podataka.....................................................................................................................10
3.3. Traka za meni.....................................................................................................................12
3.3. Početna stranica..................................................................................................................12
3.3.1. Baner............................................................................................................................12
3.3.2. Ponuda.........................................................................................................................13
3.3.3. Vaš lisitć......................................................................................................................15
3.4. O nama................................................................................................................................16
3.5. Novosti................................................................................................................................17
3.6. Registracija.........................................................................................................................17
3.7. Login...................................................................................................................................20
3.8. Admin.................................................................................................................................21
3.9. Footer..................................................................................................................................22
4. Zaključak...................................................................................................................................24
5. Literatura....................................................................................................................................25
 1. Uvod
Maturski rad je stručni rad koji učenik četvorogodišnjeg srednjeg obrazovanja izrađuje na
izabranu temu uz pomoć nastavnika – mentora. Tema mog maturskog rada, web aplikacija za
vođenje kladionice je jedan od težih problema sa kojim se programer može susresti. Moja web
aplikacija nije urađena kao što su ostale web aplikacije za kladionicu. Sve web aplikacije za
kladionce svoje podatke u ponudama dobijaju iz „vana“. Spajaju se na online servise i dobijaju
ponude sa svim vrijednostima. Servisi se plaćaju i za povezivanje sa njima i adaptaciju web
aplikacije na taj način treba mnogo znanja što se tiče PHP i MySQL-a. Moja web aplikacija se ne
spaja na online servise već čita ponudu iz moje baze podataka koju admin stranice unosi putem
forme zadužene za to. Tehnologije koje sam korstio su HTML, CSS, JavaScript, Laragon, PHP,
MySQL. U daljenjem objašnjavanju posvetiti ću se izgledu stranice i tehnologijama u kojima
sam radio.

1
2. Tehnologije

2.1. HTML

HTML je kratica za HyperText Markup Language, što znači prezentacijski jezik za izradu web
stranica. Hipertekst dokument stvara se pomoću HTML jezika. HTML jezikom oblikuje se
sadržaj i stvaraju se hiperveze hipertext dokumenta. HTML je jednostavan za uporabu i lako se
uči, što je jedan od razloga njegove opće prihvaćenosti i popularnosti. Svoju raširenost
zahvaljuje jednostavnosti i tome što je od početka bio zamišljen kao besplatan i tako dostupan
svima. Prikaz hipertekst dokumenta omogućuje web preglednik. Temeljna zadaća HTML jezika
jest uputiti web preglednik kako prikazati hipertext dokument. Pri tome se nastoji da taj
dokument izgleda jednako bez obzira o kojemu je web pregledniku, računalu i operacijskom
sistemu riječ. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne
možemo izvršiti nikakvu zadaću, pa čak ni najjednostavniju operaciju zbrajanja ili oduzimanja
dvaju cijelih brojeva. On služi samo za opis naših hipertekstualnih dokumenata. Html datoteke
su zapravo obične tekstualne datoteke, ekstenzija im je .html ili .htm. Osnovni građevni element
svake stranice su znakovi (tags) koji opisuju kako će se nešto prikazati u web pregledniku.
Povezice unutar HTML dokumenata povezuju dokumente u uređenu hijerarhijsku strukturu i
time određuju način na koji posjetitelj doživljava sadržaj stranica. Najjednostavnim riječima,
HTML file je web stranica. Kada sačuvamo HTML file njegova ikonica je neki web preglednik
kao što je na slici 2.1.1. chrome preglednik. Tu može biti bilo koji preglednik ako što je Opera,
Mozila, Thor... Pokretanjem „index.html“ otvorit će nam se web preglednik na kome će biti ono
što „index.html“ sadrži.

Slika 2.1.0.0.1. Prikaz ikonice html file-a.

HTML5 prva je nova revizija standarda nastala nakon HTML 4.01, objavljene 1999. godine u
suradnji World Wide Web Consortium-a (W3C) i Web Hypertext Application Technology
Working Group (WHATWG). Do 2006. godine su ove dvije grupe radile odvojeno, WHATWG
je radio sa web formama i aplikacijama, a W3C sa XHTML 2.0. Na svu sreću odlučili su udružiti
snage i kreirati novu verziju HTML-a. Izdavanje konačnih specifikacija standarda HTML5 u
suprotnosti je s inicijativom Web Hypertext Application Technology Working Group
(WHATWG) prema kojoj bi HTML trebao biti "živi" standard koji se stalno nadograđuje, bez
oznake verzije specifikacija. HTML5 standard nalazi se u statusu radnog dokumenta (draft).
HTML5 je prema riječima osnivača posljednja HTML verzija koja će se konstatno nadograđivati
ali neće bit HTML6 verzije. To nikad nije zvanično potvrđeno ali svi smatraju da će biti tako.
<!DOCTYPE html> je sintaksa kojim otvaramo, a </html> sintaksa formu. Svaki HTML file
započinjemo i završavamo navedenom sintaksom.

2
2.2. CSS

CSS je kratica od (eng.) Cascading Style Sheets. Radi se o stilskom jeziku, koji se koristi za opis
prezentacije dokumenta napisanog pomoću markup (HTML) jezika. Kako se web razvijao,
prvobitno su u HTML ubacivani elementi za definiciju prezentacije (npr. tag <font>), ali je
dovoljno brzo uočena potreba za stilskim jezikom koji će HTML osloboditi potrebe prikazivanja
sadržaja (što je prvenstvena namjena HTML-a) i njegovog oblikovanja (čemu danas služi CSS).
Drugim riječima, CSS nema zasebnu namjenu već ga HTML koristi za uređivanje svog sadržaja,
CSS daje izgled našoj web aplikaciji.
U našem CSS file-u kreiramo klasu i dodjelimo joj vrijednosti kao na slici 2.2.1. Nakon toga
implemetiramo CSS file u nas HTML file. Ako se naš CSS file zove “prviCSS”, sintaksa za
implemetiranje je <link href="prviCSS.css" rel="stylesheet">. U ovom slučaju klasa je “body”
što znači da je necemo pozvati jer u html korstimo <body> </body>, kao što mu ime kaže to je
tijelo naše stranice. “Body” takodjer korstimo u svakom HTML file.

Slika 2.2.0.0.1. Primjer jedne klase u CSS-u.

2.3. JavaScript

JavaScript je jednostavan, interpretiran programski jezik namijenjen razvoju interaktivnih

HTML-stranica. Jezgra JavaScripta uključena je u većinu današnjih preglednika (Internet
Explorer, Google Chrome, Mozilla Firefox, Opera, Safari i drugi). JavaScript omogućuje
izvršavanje određenih radnji u inače statičnim HTML-dokumentima, npr. interakciju s
korisnikom, promjenu sastava preglednika ili dinamičko stvaranje HTML-sadržaja. JavaScript
nije pojednostavljena inačica programskog jezika Java. Povezuje ih jedino slična sintaksa i to što
se koriste za izvršavanje određenih radnji unutar preglednika. Izvorno se JavaScript trebao zvati
LiveScript, ali da bi se potakla uporaba novog skriptnog jezika, nazvan je slično jeziku Java, od
kojeg se u tadašnje vrijeme dosta očekivalo. JavaScript razlikuje velika i mala slova, to znači da
se ključne riječi, varijable, funkcije i drugi nazivi moraju pisati dosljedno s obzirom na velika i
mala slova. Tako se, na primjer, ključna riječ mora pisati while, a ne While ili WHILE.

3
Također, varijable stranaa, stranaA, StranaA i STRANAA četiri su različite varijable. Radi
izbjegavanja greški, preporučuje se ispravnost prilikom korištenja malih i velikih slova u
nazivima. Dobra praksa je slijediti način imenovanja koji se već koristi za nazive postojećih
funkcija u JavaScriptu, a to je tzv. camelCasing. Nazivi se pišu malim slovima, a ako naziv
sadrži dvije ili više riječi, druga i svaka sljedeća riječ počinju velikim slovom (npr.
getElementById). JavaScript file možemo napisati sami pa ga implemetirati i korsitit klase onako
kako sam ih mi nazvali, ili korsiti neke od već napisanih skirpti. Kad god se programi (kao što su
skripte JavaScripta, Java-programi ili makronaredbe programa Microsoft Word) nalaze u
odijeljenim dokumentima, posebno u dokumentima koji se šalju Internetom, prisutna je opasnost
od virusa i drugih zloćudnih programa. Tvorci JavaScripta bili su svjesni tih sigurnosnih
problema i onemogućili su programima JavaScripta postupke koji bi za posljedicu imali brisanje
ili izmjenu podataka na korisnikovu računalu. Kao što je već naglašeno, programi JavaScripta ne
mogu pristupati lokalnim datotekama, tj. ne mogu zaraziti druge datoteke ili brisati postojeće.
Isto tako, programi JavaScripta ne mogu obavljati mrežne radnje, tj. JavaScript može učitavati
adrese web-sadržaja (URL) i slati podatke iz HTML-obrazaca poslužiteljskim skriptama, ali ne
može ostvarivati neposredne veze s drugim računalima i tako pokušati pogoditi lozinku na
nekom lokalnom poslužitelju. Međutim, budući da su preglednici složeni programi, u početku
implementacija interpretera JavaScripta nije uvijek poštovala propisane standarde. Na primjer,
preglednik Netscape 2 (objavljen 1995. godine) omogućavao je pisanje programa JavaScript koji
je automatski dohvatio adresu elektronske pošte bilo kojeg posjetitelja određene stranice i u
njegovo ime, bez njegove potvrde, poslao e-mail. Taj je propust, uz niz drugih, manje opasnih,
popravljen. Međutim, ne postoji sigurnost da se neće otkriti novi propusti u implementaciji
JavaScripta i tako omogućiti zlonamjernicima iskorištavanje tih propusta.

Slika 2.3.0.0.1. JavaScript logo.

2.3.1. JavaScript biblioteka

JavaScript biblioteka je ustvari skripta koja sadrži klase potrebne programerima za

funkcionalnost jedne web aplikacije. U upotrebi postoji preko 1.000.000+ napisanih skripti. Za
većinu skrpti postoje detaljno objašnjene i definisane klase od strane osoba koji su ih pisali, a za
ostale često to neko od korsnika istraži i detaljno objasni. Neke od najpopularnih biblioteka su:
Angular, jQuery, React, Node...

4
2.3.1.1. Angular

Trenutno jedna od najpopularnijih JavaScript biblioteka, prvi put se pojavila 2014. Napisana je
od strane kompanije Google, domah se znalo da će biti jedan od najpopularnijih s obzirom na to
da je napisana od strane Google-a.

Slika 2.3.1.1.1. Primjer koda u kome se koristi Angular.

2.3.1.2. jQuery

jQuery jedna je od prvih skripti nastala 2006 godine, napisana od strane Johna Resiga. Do maja
2019 godine 73% stranica svijeta koristilo je jQuery. U 2021. godini 95.3% koristi jQuery. Skoro
svaki mjesec dolaze nova ažuriranja sa detaljnim objašnjenjem. U mojoj web aplikaciji je
korišten jQuery kao što možemo vidjeti na slici 2.3.1.2.1.

5
 Slika 2.3.1.2.1. Primjer koda u kome se koristi jQuery.

2.4. Laragon

Laragon je besplatan web server koji omogućava našoj stranici rad sa PHP i MYSQL
tehnologijama. Ove godine je postao popularan jer je zvanično postao nasljenik njegovog
prethodnika Larvela. Napravljen je 2018. godine od strane Larvel komapije i novi je u upotrebi.
Za razliku od najpopularnijeg web servera XAMPP-a ne moramo ništa dodatno podešavati. Vrlo
jednostavno ga skinemo besplatno sa laragon oficijane stranice i instaliramo ga. Isntalacijom
laragona instaliraju se MySQL, Apache i sve verzije PHP-a. Možemo bilo koju verziju koja nam
treba koristiti u svakom trenutku.

Slika 2.4.0.0.1. Izgled laragona.

Bitno je naglasiti da kada radimo sa bazom korstimo port 3302 jer na tom portu radi laragon. Ne
spajamo se na localhost koji je 127.0.0.1:3306 već na 127.0.0.1:3302. Naš projekat ubacimo u
laragon file gdje smo ga instalirali(po defaultu je to C:/Laragon/www), stopiramo i ponovno
startamo i možemo otvoriti našu web stranicu ili raditi sa bazom, naravno uz uslov da smo
napravili bazu.

6
2.5. MySQL

MySQL je open source sistem za upravljanje relacionim bazama (RDBMS). To je najpopularniji

open source sistem za upravljanje bazama podataka na svijetu i trenutno je rangiran kao drugi
najpopularniji sistem za upravljanje bazama podataka na svojetu (poslje Oracle Database).
MySQL je dostupan i za besplatno preuzimanje, međutim dostupno je i nekoliko plaćenih verzija
koja nude dodatne funkcionalnosti. Kao što ime govori, MySQL je zasnovan na SQL-u -
standardnom jeziku za upis podataka unutar sistema za upravljanje relacionim bazama podataka.
Dio "My" nazvan je po kćerci suosnivača Majkla Videnius-a. Kao što je gore navedeno, MySQL
je relaciona baza podataka. To znači da su podaci smješteni unutar strukture sposobni da
prepoznaju odnose između sačuvanih informacija. Svaka baza podataka sadrži tabele. Svaka
tabela (koja se takođe naziva relacija) sadrži jednu ili više kategorija podataka pohranjenih
u kolonama (koji se takođe nazivaju atributima). Svaki red (koji se takođe naziva zapis ili zbirka)
sadrži jedinstven podatak (koji se inače naziva ključ) za kategorije definisane u kolonama.
MySQL koriste neke od najvećih organizacija na svijetu, uključujući Facebook, Google, Twitter,
Adobe, Flickr, Alcatel, Zappos, YouTube i mnoge druge. Međutim, koristi se i za manje
projekte, poput ličnih web sajtova ili blogova. MySQL je podrazumjevana baza podataka
za WordPress platformu - sistem za upravljanje sadržajem (CMS), u kome je napravljeno više od
60 miliona web sajtova. Ostali sistemi za upravljanje sadržajem koji koriste MySQL
uključuju TYPO3, MODx, Joomla, phpBB, MyBB, i Drupal. Najčešća upotreba MySQL-a je u
svrsi za web baze podataka. Može se koristiti za smještanje bilo čega, od jednog zapisa podataka
do cijelog popisa dostupnih proizvoda za Internet prodavnicu. U kombinaciji sa skriptnim
jezikom kao što su PHP ili Perl, moguće je kreirati web koje će u realnom vremenu komunicirati
sa MySQL bazom podataka kako bi se korisniku web sajta brzo prikazale kategorisane i
informacije koje se mogu pretraživati. Koristeći samo HTML, CSS, JavaScript naša web stranica
je statička. Svaka stranica na internetu je dinamička stranica, što znači da podatke sprema i čita
iz neke baze podataka.

7
 Slika 2.5.0.0.1. MySQL logo.

2.5.1. HeidiSQL

Postoji mnogo MySQL alata i klijenata. Napopularniji je MySQL Wokrbench. On se koristi za

razradu baze i prvobitno povezivanje i funkcinisanje. Ja sam se odlucio za rad za HeidiSQL jer je
kompatabilan sa laragonom i ima vrlo jednostavno pristup.

Slika 2.5.1.0.1. HeidiSQL logo.

Kada u laragonu kliknemo na database, otvori nam se HeidiSQL gdje unesemo lokaciju naše
baze, to jest port, korisničko ime(root), ime konekcije i sheme i kreiramo bazu podataka ili
ovom slučaju je otvorimo jer smo je već napravili. Ako želimo da napravimo novu bazu
kliknemo na new i napravi nam se novi Session name u koji mi unosimo lokaciju naše baze kao
što je gore navedeno.

8
 Slika 2.5.1.0.2. Pristup bazi podataka korsiteći laragon i HeidiSQL.

2.6. PHP

PHP je  programski jezik koji se zasniva na C i Perl sintaksi, namijenjen prvenstveno

programiranju dinamičnih web stranica. PHP je kao slobodni softver distribuiran pod PHP
licencnim uvjetima. PHP se ističe širokom podrškom raznih baza podataka i internet
protokola kao i raspoloživosti brojnih programerskih biblioteka. Prvu verziju PHP-a razvio je
Danski programer Rasmus Lerdorf 1995. godine. Danas je PHP jedan od najzastupljenijih
programskih jezika za programiranje web aplikacija.

Slika 2.6.0.0.1. PHP logo.

9
PHP file je ustvari naš HTML file kojem smo promjenili eksteziju i umjesto „index.html“ on je
sad „index.php“. PHP započinjemo sa <?php a zatvarmo ga sa ?>. PHP je dio tehnologije koji se
nalazi na strani servera a ne na strani korsinika.

Slika 2.6.0.0.2. PHP kod za spajanje na bazu.

3. Izrada web aplikacije(sajta)

3.1. Ime i logo

Do ime web stranice sam došao jednostvano. “Srx” je moj nadimak a “BET” je engleska riječ što
znači klađenje.
Logo je grafički znak, simbol ili ikona, koji označuje proizvod ili preduzeće. Može se sastojati
od slova, grafike i drugih kombinacija. Uloga loga je trenutno prepoznavanje proizvoda. Potpuni
logo sastoji se od logotipa, ikone i slogana. Pošto je logo vizuelni entitet označavanja
organizacije, dizajn logoa je važno područje grafičkog dizajna. Logo sam napravio u photoshop
programu.

Slika 3.1.0.1. Logo moje web stranice.

3.2. Baza podataka

Kao što sam to već naglasio bazu podataka sam pravio u HeidiSQL i ona se satoji od tri tabele a
to su: „korsinici“, „listic“, „ponuda“.

10
Nijedan atribut osim id nije NOT NULL jer sam to riješio na strani klijenta i ne dozvoljavam
izvršavanje bilo kakve radne ako je neka forma ostala prazna a ja zahtjevam suprotno.
Tabela korisnici sadrži sedam kolona:
 id – INT, PRIMARY , NOT NULL(ne smije biti prazan),
AUTO_INCREMENT(automatski se inkrementira kada nešto upišemo u bazu)
 ime – VARCHAR
 prezime – VARCHAR
 brojtelefona – VARCHAR
 email – VARCHAR
 password – VARCHAR
 username – VARCHAR

Slika 3.2.0.1. Prikaz tabele korisnici.

Tabela listic sadrži 5 kolona:

 id – INT, PRIMARY , NOT NULL(ne smije biti prazan),
AUTO_INCREMENT(automatski se inkrementira kada nešto upišemo u bazu)
 vrijeme – VARCHAR
 uplata – VARCHAR
 ukupna_kvota – VARCHAR
 dobitak – VARCHAR

Slika 3.2.0.2. Prikaz tabele listic.

Tabela ponuda sadrži 11 kolona:

 id – INT, PRIMARY , NOT NULL(ne smije biti prazan),
AUTO_INCREMENT(automatski se inkrementira kada nešto upišemo u bazu)
 sportovi1 – VARCHAR
 utakmica – VARCHAR
 vrijeme – VARCHAR
 domacin – VARCHAR

11
  remi – VARCHAR
 gost – VARCHAR
 fudbalkvota – VARCHAR
 kosarkakvota – VARCHAR
 teniskvota – VARCHAR
 rukometkvota – VARCHAR

Slika 3.2.0.3. Prikaz tabele ponuda.

3.3. Traka za meni

Svaka forma ima traku za meni i ona je fiksna i sadrži logo stranice koji je linkovan na početak
stranice. Početna forma sadrži 4 odabira menija a to su „pocetna“ koji je linkovan na početnu
formu, „O nama“ koji je linkovan na formu gdje se sadrži informacije vezane za stranicu,
„Novosti“ koji je linkovan na formu koja sadrži sportske novosti, „Registracija“ koja je
linkovana na formu za registraciju i „Login“ koji je linkova na formu za logovanje. Na desnoj
strani nalaze se 2 dugmeta „Login“ i „Singup“ koji su također linkovani na login i register
formu.

Slika 3.3.0.1. Izgled meni trake.

3.3. Početna stranica

Početna stranica se sastoji od 3 dijela.

3.3.1. Baner

Prvi dio je „baner“ to jest dvije slike sa slajderom koja služi sa neki promotivni materijal i
obavještenja.

12
 Slika 3.3.1.1. Izgled banera.

Možemo staviti onoliko slika koliko želimo i svaka slika može sadržati drugi sadržaj.

Slika 3.3.1.2. Kod vezan za baner.

3.3.2. Ponuda

Kao što sam već naglasio ostale web stranice kompletnu ponudu sa svim vrijednostima uzimaju
iz vana. Kod mene to nije slučaj. Ja sam se ograničio na četiri sporta i i ponudu implemtiram
preko posebne forme. Vrijednosti se sačuvaju u bazu i onda se automatski čitaju iz baze i
prikazuju ovdje. Svaka od ovih kartica „fudbal“, „kosarka“, „tenis“, „rukomet“ na slici 3.3.2.1
ima različito vrijednost koja zavisi od toga šta je unijeto u bazu.

Slika 3.3.2.1. Prikaz ponude.

13
Kao što možemo vidjet na slici 3.2.2.2. U našoj tabeli su upisane sve utakmice sa ovim
vrijednostima.

Slika 3.3.2.2. Prikaz tabele ponuda.

To sam uradio na način da četiri puta kupim podatke iz redova u zavisnosti koji je sport. U
kolonu „sportovi1“ se unse sport, ja pokupim red sa vrijenostima u ovisnoti od toga koji je sport i
dodjeljujem ih u varijable.

Slika 3.3.2.3. Prikaz PHP koda za uzimanje podataka iz baze.

Nakon što sam dodjelio vrijednosti u varijable, stavio sam while da bi se konstantno ažurirala
ponuda kada je implementiram ili obiršem. Nakon toga jednostavno u zavisnosti od sporta
koristim određenu varijablu u određenoj kartici i ispisujem vrijednosti iz tabele.

14
 Slika 3.3.2.4. Prikaz koda za ispis podataka iz baze.

3.3.3. Vaš lisitć

15
Napravio sam poseban dio gdje se klikom na vrijednost neke kvote ispiše utakmica i vrijednost
te kvote. Ukoliko kliknemo na više kvota kvote se množe i ispisuju se kao što možemo vidjeti na
slici 3.3.3.1.

Slika 3.3.3.1. Prikaz Vašeg lisitića

Ovaj dio stranice je napravljen u JavaScript. Kod vezan za ovaj prikaz listića je na slici 2.3.1.2.1.
Ako bi unijeli neku vrijednost i uplatili ne bi se ništa desilo se moramo registrovat da bi odigrali
tiket. Kada se registrujemo, unesemo neku vrijednost, kliknemo uplati i dobijemo obavještenje
da smo uspješno uplatili lisitć. Sve vrijednosti listića se spremaju u bazu podataka u tabelu listić
kao što možemo vidjeti na slici 3.3.3.2.

Slika 3.3.3.2. Prikaz tabele listić nakon uplate.

Kao što možemo vidjeti vrijeme nigdje ne unosimo već smo napravili varijablu koja kupi
trenutno vrijeme i datum „Real-DATATIME“ i upisuje se u bazu. Ukupno imamo 3 in inputa

16
prvi je „name='value'“ i to je onaj input u koji unosim vrijednost uplate. Pored njega imamo jos
dva inputa koji su sakriveni. Jedan je „name='total'“ i to njemu se ispiše ukupna kvota, a drugi je
„name='sum-total'“ i u njemu se ispisuju „value*sum-total“. Nakon dodjele vrijednosti upisšemo
podatke ubazu kao što možemo vidjeti na slici 3.3.3.3.

Slika 3.3.3.3. PHP kod za upisivanje podataka u bazu.

3.4. O nama

Forma „O nama“ nema ništa posebno, kao što joj i ime kaže sadrži tekst koji pobliže opisuje i
objašnjava rad i funkcionisanje web aplikacije kao i pravila.

Slika 3.4.0.1. Prikaz forme „O nama“.

17
3.5. Novosti

Forma novosti sadrži neke sportske novosti. Trenutno je napisano u HTML-u i linkovano na neki
sportski blog. Ova forma je prema mom mišnjenju jako korisna i u budućnosti se možemo
udružiti sa nekim sportskim blogom, gdje ćemo dobijat sve informacije vezane za sport ili u
nekoj daljnoj budućnosti napraviti svoj sportski blog pa ga i ovdje iskorstiti ali mislim da je prva
opcija mnogo realnija.

Slika 3.5.0.1. Izgled forme „Novosti“.

3.6. Registracija

Registracija je forma kao što joj i samo ime kaže, forma koja služi za registraciju. Kao što smo
mogli vidjet u tabeli „korisnici“, unosimo ime, prezime, broj telefona, email, username,
password.

18
 Slika 3.6.0.1. Izgled forme „Registracija“.

Korsio sam „sweetalet2“ skirptu kojom obavještavam korsinika da li se uspješno registrovao, da

li je koristio email ili password koji se već koristi ili oboje.

Slika 3.6.0.2. Prikaz sweetalert2 pop-upa ako je registracija uspješna.

Ako se username ili email ponavlja, umjesto „Uspješna registracija“ ispisat će se odgovarajuća
poruka i vrijednosti se neće upisati u bazu podataka.

Kako sam naglasio u dijelu gdje opisujem bazu podataka, svaki od ovih polja za unos nosi
svojstvo „required“. To znači da to polje mora biti popunjemo inače se neće ništa dogoditi i
pojavit će se mali pop-up koji će od nas zahtjevati da popunimo to polje koje nismo. Kao što sam
naglasio taj problem sam riješio na klijentskoj strani i smatra da je tako jednostavnije i program
nema potreba da provjera u bazi kada se ništa ne može desiti dok se to ne popuni.

19
Kao što sam naglasio „sweetalert2“ je JS skprita koju sam includao i radio sa njom. Dodijelio
sam virijednosti varijablama i preko ajax tehnologije pozivam „process.php“. U „proces.php“ se
skoro indetičan kod koji sam korstio za čuvanje podataka iz odigranog listića u bazu podataka.
Jedina razlika je što imam jedan uslov u kome provjeravam da li se username ili email ponavanja
i ispisujem odgovarajuću poruku. Ako se ne ponavlja onda udje u dio koda gdje sačuva podatke
u bazu podataka.

Slika 3.6.0.3. Prikaz koda vezanog za sweetalert2.

20
3.7. Login

Login forma služi za logovanje korsnika na postojeći nalog, koji je prethodno napravio.

Slika 3.7.0.1. Prikaz „Login“ forme.

Login forma zahtjeva od korsnika da unese username i šifru. Naravno da bi se uspješno logovao
taj username i šifra se moraju nalaziti u bazi podataka.

Preuzmemo vrijednosti koje korisnik unese i provjerimo da li se poklapaju sa vrijednostima iz

baze.

Slika 3.7.0.2. Prikaz PHP koda vezanog za login.

21
3.8. Admin

Admin forma služi za manipulaciju sa ponudom. Tačnije za implementiranje i brisanje ponude.

Slika 3.8.0.1. Izgled „Admin“ forme.

Na dugme „implementiraj“ upisuje se ponuda u bazu podataka, kao što se to radi i kod upisivanja
podataka odigranog listića.

22
Na dugme „Obriši utakmicu“ brišemo posljednju unijetu utakmicu, to jeste utakmicu čiji id ima
najveću vrijednost

Kao što možemo vidjeti na slici 3.8.0.2. da bi obrisali posljednju unijetu utakmicu korsitimu
jednostavnu SQL naredbu kojom dohvatmo id sa nvećom vrijednosti i brišemo podatke u istom
redu sa tim id-om.

Slika 3.8.0.2. PHP kod koji se korsiti za brisanje posljednje utakmice.

3.9. Footer

Footer je sastavni dio skoro svakog web sajta. U njemu se obično nalaze informacije vezane za
socijalne mreže i kontakt. Footer moje web stranice sadrži upravo to, kontakt telefon i email,
socijane mreže i lokacije, slike admina koje na klik otvaraju slider i pobliže pokazaju slike.
Ostale poveznice su poveznice na forme koje sam prethodno objasnio.

Slika 3.9.0.1. PHP kod koji se korsiti za brisanje posljednje utakmice.

„Pozovi“ i „Posalji Mail“ su u potpunosti funkcionlani. Ako bi usli na web sajt preko telefona i
kliknuli na „Pozovi“ prikazao bi nam se automatski broj telefona i mogli bi smo pozvati taj broj.

23
 Slika 3.9.0.2. Kod vezan za footer.

Kada kliknemo na „Posalji mail“ otvori nam se pošta na našem računaru i automatski je
podešeno da se mail šalje na „srdjan.djuric003mail.com“ kao što možemo vidjeti na slici 3.8.0.3.

Slika 3.9.0.3. Pošta.

24
4. Zaključak
Kroz ovaj projekat korstio sam HTML, CSS, JavaScript, Laragon, PHP i MySQL, poboljšao
sam i unaprijedio svoje znanje i poznavanje svih navednih tehnologija. Predmet web
programiranje kao i predmet baze podataka su predmeti koje dobijamo u četvrtom razredu. Zbog
situacije uzrokovane pandemijom nismo bili u mogućnosti da u potpunosti iskoristimo znanje
profesora i steknemo osjećaje, a takođe profesori nisu bili u mogućnosti da to znanje prenesu
nama na dosadašnje lakše načine. Smatram da odabirom predmet web programiranje za izradu
maturskog rada nisam pogriješio i da sam stekao osjećaj i dobio predstavu na koji način
funkcioniše web stranica. Zaključio sam da je web programiranje mnogo traženo i unosno
zanimanje i ima veoma širok spektar djelovanja. Naučio sam se koristit internetom i besplatnim
objašnjenima od strane samih kreatora programskih jezika ali i ostalih „kolega“ koji se bave
ovim zanimanjem. Svoj web aplikaciju ću nastavitit dorađivati do trenutka kada će biti u
potpunosti funkcionalna i spremana za rad. Uočio sam da ne postoje granice kada je u pitanju
kreiranje jedne web aplikacije. Naša mašta je granica, sve što zamislio možemo kreirati i
napraviti. Smatram da je ovaj ova tema odličan temlj za moje buduće projekte.

25
5. Literatura

 http://www.mathos.unios.hr/wp/wp2009-10/P13_PHP4.pdf
 https://cubes.edu.rs/sr/37/obuke-i-kursevi/sta-je-mysql
 https://hackr.io/blog/best-javascript-frameworks
 https://hr.wikipedia.org/wiki/Laravel
 https://www.heidisql.com/help.php
 https://www.srce.unizg.hr/files/srce/docs/edu/osnovni-tecajevi/c501_polaznik.pdf
 https://www.php.net/support
 https://bib.irb.hr/datoteka/532594.Skripta_-_Uvod_u_xhtml_html_i_css.pdf

26
 Mišljenje mentora o radu:

______________________________________________________________________________

______________________________________________________________________________

______________________________________________________________________________

______________________________________________________________________________

______________________________________________________________________________

______________________________________________________________________________

______________________________________________________________________________

Predložena ocjena: _________________ ( _ )

Ispitivač: _________________________

Članovi komisije:
1. _______________________________
2. _______________________________

Izdvojeno mišljenje:

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

Datum odbrane: __.__.____.

27