You are on page 1of 28

Visoka tehnička mašinska škola strukovnih studija

Trstenik

ZAVRŠNI RAD
IZRADA INTERNET APLIKACIJE ZA PRIJAVU ISPITA

kandidat

profesor

Martinovid Ifet R-229/2007

Vladeta Jevremovid

Tutin, Oktobar 2011

Završni rad – Izrada internet aplikacije

|2

Sadržaj

Uvod ……………………………………………………………………………………………………. 3 Potreba za internet aplikacijom Potrebno znanje za izradu web aplikacije
HTML

4 4 5 6 7 7 8 9 12 15 16 17 20 22 24 26 28

PHP MySQL Adobe Dreamweaver Osnova aplikacije, baza podataka Kreiranje prvih strana i formulara Povezivanje na bazu i funkcije Rad u aplikaciji Konfiguracija Studenti Predmeti Prijava ispita Pregled prijava, ismena statusa Kontakt Literatura

Adresa je www. video konferencije obezbeđene za studente ili profesore koji su odsutni. Vrednost interneta kao alata za pomod u učenju ili samog skladišta nekog vrsta znanja je neprocenjiva. Internet aktivno koriste škole srednjeg i visokog obrazovanja kao podršku studentima. Od prvih web stranica. sa bazom podataka. lak za učenje i upotrebu.CGI. lako razumljiv. raznim prikazima podataka.ansoft. Osnivač modernog interneta i hipertekst procesiranjaje Tim Barners Lee . pa čak se organizuju i onlajn predavanja. Danas je Tim Barners Lee predsednik “World Wide Web Consortium” (W3C) internacionalne organizacije koja we bavi web standardima. Internet aplikaciju sam ved postavio na probni server moje firme i može mu se pristupiti. Cold Fusion. ove godine je predstavljena peta verzija HTML-a obogadena multimedijalnim alatkama i podrškom za takozvani “Web 2. koji je otvorenog koda ( Open Source ). Lee je 1980 godine osmislio “ENQUIRE” hipertekst processor. ved zadnju deceniju internet se cesto i aktivno koristi u edukativne svrhe. javlja se potreba za malo bogatijom i interaktivnijom komunikacijom u smeru klijent – server i ved nakon par godina javljaju se prvi programski jezici za web. Jedan od najpoznatijih i najpopularnijih platformi za razvinanje internet aplikacija je svakako PHP ( Php Hypertext Processor). . besplatan. sama razmena znanja ili postojanje baza sa milionima naučnih članaka ( primer Wikipedije ) na internetu čini ovaj medij neprocenjivo bogatim izvorom znanja i pomodi u učenju i sticanju znanja. preteču današnjeg HTML-a ( Hipertext Markup Language) i deset godina kasnije 1990 svetu predstavio prvi internet hipertekst transver protocol ( HTTP ). i stranice polako prelaze sa statičkih u dinamičke web stranice. Moj završni rad de biti izrađen u ovom programskom jeziku.Net. pretragom.rs/ifet .0”. PHP.Završni rad – Izrada internet aplikacije |3 UVOD Korišdenje internet tehnologija u školstvu nije nova stvar. razmenu iskustava i znanja. filtriranjem podataka. Tim programskim jezicima su izgrađene moderne web aplikacije. kasnije ASP. kao mesto za onlajn druženje studenata. jakom eknripcijom i zaštitom i tako dalje. Javascript. jezik za obradu i prikaz hiperteksta ( HTML) i prvi browser koji se zvao “WorldWideWeb” koji je ujedno bio i hipertekst editor.

Css . .Javascript . besplatna. otvorenog koda Programi za izradu web aplikacije su Adobeovi alati Dreamweaver i Photoshop. Ovakva aplikacija može biti veoma koristan dodatak školovanju i uvodi praktičan primer korišdenja modernih tehnologija u školstvu. odnosno da de dobiti odgovor da nije obavio predispitne obaveze i da ne može prijaviti ispit dok ih ne ispuni. lično sam osetio potrebu za ovakvom aplikacijom. Kaskadni opisi stilova. veoma bitni za dizajn internet strane .HTML . aplikacijom koja de biti dostupna studentu koji nije u svojoj matičnoj školi. ili je odsutan.Mysql . Potrebno znanje za izradu web aplikacije Za izradu ove aplikacije potrebno je poznavanje „arhitekture“ interneta. Baza podataka. da prijavi ispit za određeni rok i da ima uvid u to da je njegova prijava stigla uspešno i da je na spisku za polaganje ispita. Glavna tenologija za izradu palikacije. klijent – server komunikacija . Klijent – browser skriptni jezik koristan u interakciji sa stranicom . ved u izdvojenom odeljenju. njegovih osobina i mogudnosti.PHP . neodvojive modne aplikacije za razvoj internet aplikacija i uređivanje fotografija i grafike. kao i poznavanje slededih internet tehnologija: . Priroda interneta nam omoguduje da ovakvu aplikaciju učinimo dostupnim studentima 24 sata dnevno. a da studentu jedino treba priključak na internet da bi prijavio ispit i video status prijave. jezik za označavanje hiperteksta .Završni rad – Izrada internet aplikacije |4 Potreba za aplikacijom Kao student koji nije studirao u matičnoj školi.

tj. do sada su izašli neki dodaci:CSS ili Cascading Style Sheets za izgled i položaj prezentacijeSkriptni jezici (Javascript. skradenica od HyperText Markup Language. internet pretraživač mogao da prepozna strukturu dokumenta i ispravno je prikaže u prozoru internet pretraživača kojeg korisnik koristi. Kod se u tom slučaju izvršava na serverima i HTML koji je rezultat procesa biva serviran korisniku.Završni rad – Izrada internet aplikacije |5 HTML HTML. HTML standarizuje i održava World Wide Web Consortium (W3C). medija i ugrađenih objekata u web stranice i elektronsku poštu. ponekad se nazivaju DHTML ili Dinamični HTML. Primer HTML jezika i prikaz renderovanja sa desne strane . Pored HTML-a.DOM ili Document Object Model. Neki od ovih jezika su: ASP (Active Server Pages) i PHP (Hypertext Preprocessor). su potpuno ili djelomično označene HTML jezikom. Ova web stranica. je standarizovani jezik koji se koristi pri strukturiranju tekstova. Svrha HTML znakova je da se se struktura dokumenta "označi" tako da bi korisnikov agent (user agent). Iako se HTML znakovi (tags) često nazivaju kodom. na internetu danas postoje jezici koji se koriste da korisnikovom agentu serviraju HTML koji de zavisiti od toga šta je korisnik tražio. u paketu sa HTML jezikom. kao i mnoge druge. VBScript) za omogudavanje dinamičnosti i interaktivnosti na web prezentacijama. Kao modifikovanu i pojednostavljenu verziju SGML jezika. tehnički HTML nije kod jer kompjuterski kod su instrukcije koje od računara traže da izvrši određenu operaciju. koji označava vezu između skripte i elementa na stranici Gornji dodaci. Za dodatno modifikovanje web stranica.

1994. koje se zove Zend engine (strana www. Linuks. Izrael koja nadgleda unapređenje PHP-a. . Zahvaljujudi napretku jezika PHP može se koristiti kao GUI aplikacija (uz pomod PHP-GTK) i može se koristiti iz komand linije isto kao Perl ili Python. Zeev Suraski i Andi Gutman. Od verzije 4+ PHP je snadbevan Zendom. Posle nekoliko meseci rada. je izašao PHP4.Oracle. 13.zend. godine. Microsoft SQL Server. zvanično su objavili PHP/FI 2. 2004. PHP je alternativa komercijalnim programima kao sto su majskrosoftskom ASPu/VBScript/JScript. snabdeven Zend Enginom 2. novembra 1997. San majkrosistemu JSP/JAVA i nekomercijalnom CGI/PERL-u. Na početku. PHP dozvoljava interakciju u dosta poznatih baza podataka. sa fakulteta Tehnion su nastavili ledoolfov rad i napravili su jezgro PHP3 jezika.Završni rad – Izrada internet aplikacije |6 PHP PHP (PHP Hypertext Preprocessor) je projekat otvorenog koda (open source) i jedan je od najboljih i najpoznatijih server-side rešenja. PHP je lak za korišdenje i sličan je C-u i PERL-u (od verzije 5+ sličan je i JAVA-i).vikipedija PHP je licenciran BSD-style licencom i |PHP licencom.Dosta Operativnih sistema podržava PHP kao što je Unix. Zeev i Andi su počeli da pišu novo jezgro PHPa 1997. a samo mu ime kaže da se izvršava na serveru (suprotno od JavaScript-e koja se izvršava na klijentu (client-side) -. kao što je MySql. PHP je bio napisan Perl skriptama od strane Rasmusa Ledorfa za ličnu upotrebu. Oni su takođe osnovali Zend Technologies u Ramat Ganu. dva izraelca. PostgreSQL i SQLlite. Isto omogudava programeru da napravi dinamički web sadržaj bez znanja funkcija ili velikog iskustva. jula. je izašao PHP5.browseru). Vindovs i Mac OS. On je snabdeven Zend Enginom 1. i nazvao ga je PHP/FI (Personal Home Page Tools / Form Interpreter). 1997. Maja 2000. Makromediskom ColdFusion.com koja tvrdi da je PHP3 bio snabdeven sa Zend Engine 0. IBM DB2. Server side scripting predstavlja vid izvršavanja web skripti na web-u.5). Jedan od zanimljivih delova kod PHP-a jeste što on nije samo Skript jezik. Nekoliko poznatih projekta koji su napisani u PHP-u je phpBB pa čak kao i ovaj sajt .

poznata po čuvenoj flash tehnologiji koja je postala jako popularna u web dizajnu. Macromediu je 2005 godine kupila firma Adobe. višekorisnički SQL sistem za upravljanje bazama podataka. Procjenjuje se da postoji oko deset miliona instalacija MySQL-а. . koji se obično kombinuje sa MySQL-om. naročito u kombinaciji "LAMP" (LinuksApač-MySQL-PHP/Perl/Piton. Za administraciju baze podataka MySQL. administratori koriste ili interfejs u obliku komandne linije. Dreamweaver danas postoji u svojoj jedanaestoj verziji nazvanoj Adobe dreamweaver CS3. postoji i nekoliko komercijalnih i nekomercijalnih alata pristupačnih na tržištu. Javascripta. kaskadnih opisa stilova (CSS). Adobe Dreamweaver Adobe Dreamweaver je jedan ubedljivo najbolji alat za razvoj internet aplikacija. PHP. integrisanog FTP klijenta i podrške u radu sa PHP/MySQL. pa čak i ASP i VBScripta. uređivanje HTML stranica. Sistem radi kao server.My SQL koristi univeryalni SQL skriptni jezik za upravljanje bazom. Flashom i mnogim drugim aplikacijama koje je Macromedia proivodila. Alat PhpMyAdmin je slobodan softver čiji je interfejs u obliku veb stranice a koji je napisan u programskom jeziku PHP.Završni rad – Izrada internet aplikacije |7 My Sql MySQL je višenitni. Odabrao sam Dreamweaver zboj velikog broja podrzanih web formata. ili grafički interfejs "MySQL administrator" i druge. zajedno sa Dreamweaverom. Njegova popularnost se veže za popularnost PHP-а. Dreamweaver je 1997 godine proizvela firma Macromedia. obezbjeđujudi višekorisnički interfejs za pristup bazi podataka. MySQL je popularan u razvoju veb aplikacija. po čuvenom adobeovom paketu CS. Pored alata koje proizvodi firma MySQL AB.

Dakle. baza podataka Najpre treba opisati osobine aplikacije.Slanje e-maila administratoru Cilj aplikacije je da student prijavi ispit i dobije informaciju o tome da je ispit uspešno prijavljen. jednostavna i laka za korišdenje kako administratoru. aplikacija generalno treba da ima opcije za: . instalitao PHP verziju 5.Jednostavan i lak pregled i izmena . .Logovanje administratora po zadatim podacima. odnosno da ispit nije uspešno prijavljen i navedeni razlog zašto. tako i studentima. odradio potrebna podešavanja na PHP-u da se prilagodi mom načinu programiranja PHP-a. Za izradu ove aplikacije koristio sam „SQL Manager for MySQL“ program od firme „EMS database management solutions“ jedan od kvalitetnijih programa za upravljanje bazama podataka.Logovanje studenta po broju indeksa i JMBG .Unos predmeta / izmenu/ pretragu predmeta . . Web serer i Mysql bazu postavio sam na svom računaru. ostaje da se počne sa programiranjem i dizajnom. MySql koristi klasične SQL komande i ima veliki izbor aplikacija koje se mogu koristiti za upravljanjetim bazama.Unos studenata / izmenu/ pretragu studenata . Tako da su sve pripreme obavljene.Završni rad – Izrada internet aplikacije |8 Osnova aplikacije.Jednostavnu i laku prijavu . napravio lokalni web server sa bazom podataka. MySql Baza podataka koju aplikacija koristi je takođe otvorenog koda kao i programski jezik PHP. napraviti spisak potrebnih opcija i imati jasan cilj funkcionalnosti aplikacije. Aplikacije treba da bude logičnog dizajna.Slanje e-maila studentu . takođe je i besplatna pa je zato jako popularna na internetu i uglavnom se koristi zajedno sa PHP-om.

bez nepotrebnih dodataka i slično. a linkovi i opcije vidljivi i jasni. Interfejs razvojne platforme Dreamweaver . navigacija mora biti minimalna.Završni rad – Izrada internet aplikacije |9 Kreiranje prvih strana i formulara Dizajn aplikacije mora biti jednostavan. bez preterano mnogo boja. Studentu sajt mora biti jednostavan i logičan.

Završni rad – Izrada internet aplikacije | 10 Za raspored elemenata stranice koristio sam tabele i css sekcijama<div>koje daju puno više kontrole programeru u smislu manipulacije položajem i izgledom sekcije i njenog sadržaja. Izgled prve dizajnirane strane . Isprekidanom linijom su označene ivice tabele i sekcija.

Završni rad – Izrada internet aplikacije | 11 Formulari takođe moraju biti jednostavni.php“ i izgled strane sa formularom . čitki i laki za unos. Crvena isprekidana linija označava oblast formulara Dizajniranje formulara „unos_studenta.

php” Radi lakšeg podešavanja parametara za povezivanje na Mysql bazu.php’). jedan o prvih koraka je sigurno kreiranje konekcije na bazu. Zbog organizacije koda u aplikaciji i optimizacije koriste se funkcije. recimo funkcija za unos studenata : Programski kod – funkcija student_unos() U funkciji se mogu videti spisak varijabli.povezivanje sa bazom podataka. . slicnu C# programskom jeziku i formiranje funkcija i osnovnih naredbije prilicno lako naučiti ukoliko se poznaje bilo koji programski jezik. fajl “parametri. Ukoliko se aplikacija povezuje na bazu. Takođe su dodati komentari pored varijabli kao podsetnik ili eventualno objašnjenje kasnijem administratoru. Funkcije su skupovi komandi koje rade određenu proceduru sa varijablama koje su joj poslati.Završni rad – Izrada internet aplikacije | 12 Povezivanje na bazu i prve funkcije PHP koristi jednostvanu sintaksu. i poziva se komandom require(‘funkcije. U ovoj aplikaciji funkcije su iskorišdene uglavnom za SQL komande koje se ponavljaju često. Funkcije su smeštene u poseban fajl. Mysql komanda i php komanda za izvršenje queru-ija. Programski kod . parametri baze su dodeljeni odgovarajudim varijablama koji se kasnije iskoriste u funkciji mysql_connect(). takođe radi bolje organizacije.

Iz formulara koji popunjava administrator podaci se salju akripti koja poziva funkciju student_unos()i metodom POST šalje podatke skripti.Završni rad – Izrada internet aplikacije | 13 Ova funkcija se koristi pri unosu podataka o student. .

sortita ih i onda šalje strani sa funkcijama i samoj funkciji otprilike to izgleda ovako. Strana sa formularom za unos studenta Strana koja poziva funkciju. ispišu u formularu. .Završni rad – Izrada internet aplikacije | 14 Podaci se. pre nego što se pošalju funkciji. Programski kod – korišdenje funkcije student_unos() Podaci obrađeni u funkciji se skladište u bazu podataka koja se nalazi na samom serveru. šalju strani koja proverava ispravnost podataka. daje joj podatke i izvršava je Strana za proveru i sortiranje Prikaz unosa podatka za funkciju I na kraju podaci stižu do fajla sa funkcijama koji na osnovu poslatih podataka poziva funkciju za unos i unosi podatke. Podaci se lako mogu pozvati po potrebi za prikaz. izmenu ili brisanje.

Administracija sadrži dve stranice.php”. U poljima se unose broj indeksa i matični broj. Najpre treba odraditi administrativni deo. Na stranici Administracija obavljaju se sve glavne funkcije. tu se nalaye grupe linkova :  Prijave ispita  Studenti  Predmeti Sadrže podatke o prijavama ispita Pregled i izmena podataka o studentima Pregled i izmena podataka o predmetima . obe strane su smeštene u fajl “admin. ostavljena je mogucnost da se sa istog mesta uloguje i administrator. Potrebno je samo oznaciti ‘checkbox’ „Administrator“ .Završni rad – Izrada internet aplikacije | 15 Rad u aplikaciji Radi zaštite podataka i osiguranja od zloupotrebe. Ulogovati se kao Administrator. za pristup aplikaciji koristi se zaštitni modul koji zahteva unošenje ličnih podataka za pristup. browser vas vodi na pocetnu administratorsku stranu. ubaciti podatke o studentima i podatke o predmetima. A. Nakon logovanja. Administracija i Konfiguracija.

. Podešavanje parametara MySql baze Podešavanja administratorskih parametara Podatke je dosta lako i logično uneti. password i email. Iz administratorskog dela aplikacije se izlazi jednostavnim klikom na link izlaz koji se nalazi na vrhu strane. obavezno paziti na ispravnost podataka kao i na tačno unošenje lozinke.Završni rad – Izrada internet aplikacije | 16 Konfiguracija Na stranici Konfiguracija se podešavaju administrativni parametri aplikacije. podešavaju se MySQL parametri i podaci o administratoru: Username.

grupi linkova Studenti nalaze se linkovi za upravljanje podacima o studentima. . pogotovu o poljima označenim crvenom zvezdicom. Najpre administrator treba uneti podatke o studentima klikom na link Novi Student gde se otvara stranica sa formularom za unos podataka Pri unošenju treba voditi računa o ispravnosti podataka.Završni rad – Izrada internet aplikacije | 17 Studenti Na stranici Administrator.

ako su ispravni. broj indeksa. Nakon tog procesa koji vremenski traje nekoliko sekundi browser otvara stranicu sa spiskom studenata na kojem se moze videti da je podatak uspešno unet. ime ili broj indeksa. takođe postoji opcija za pretragu. Ovaj zaštitni modul je postavljen da bi sprečio slučajno brisanje podataka . Pritiskom na sličicu u koloni izbriši vrši se operacija brisanja podataka o student sa dodatnom javaScript zaštitomGde se za potvrdu brisanja mora upisati “da”. ime i prezime. Spisak studenata se može sortirati na više načina. pretvaraju u SQL komande i šalju MySql bazi koja ih. Na spisku su od podataka ostavljeni. U polje za pretragu možete upisati ključnu reč koja de pretraživati kolone ime . prezime i broj indeksa i prikazati samo rezultate koji sadrže upisanu ključnu reč.Završni rad – Izrada internet aplikacije | 18 Nakon što se unesu podaci i pritisne dugme unesi podatkepodaci se šalju kontrolnom fajlu process. email i kontrolni linkovi edit i delete za izmenu i brisanje podataka. pritiskom na link prezime.php gde se obrađuju. smešta u odrešenu tabelu.

Stranica za izmenu podataka je ista kao i stranica za unos. koričdenje javascripta Ukoliko postoji potreba da se podaci o studentu izmene potrebno je kliknuti na slicicu u koloni izmeni i otvoride se stranica sa izmenu podataka o studentu. samo su podaci ved uneseni i čekaju na izmenu. Izmena podataka o studentu .Završni rad – Izrada internet aplikacije | 19 Zaštita od slučajnog brisanja. Klikom na Ime studenta otovride se odobrene prijave ispita tog studenta ili prijave koje čekaju na odobravanje.

potrebno je uneti i podatke o predmetima. otvoride se strana za unos podataka o predmetima. Formular za unos predmeta .Završni rad – Izrada internet aplikacije | 20 Predmeti Kada su podaci o studentima uspešno uneseni. neko obaveštenje ili upustvo. predmetni profesor.U navigacionom panelu u odeljku Predmeti klikne se link Novi predmet. broj bodova. Unose se podaci – Naziv predmeta. sifra predmeta. status predmeta i komentar u kome administrator može da postavi dodatni tekst vezan za predmet.

. Polje za pretragu de pretraživati kolone naziv predmeta i kolonu profesor. Klikom na naziv predmeta otovride se prijave ispita za taj predmet. Spisak predmeta Podaci se mogu sortirati po nazivu predmeta i profesoru klikom na naziv kolone.Završni rad – Izrada internet aplikacije | 21 Iako aplikacija ne koristi sve podatke vezane za predmet. Rezultat pretrage na osnovu ključne reči “stanimir” Kao i kod podataka o studentima. namerno je ostavljeno da se unese što više informacija i podataka u tabelu da bi se po potrebi kasnije mogli dodavati razni moduli vezani za predmete i ispite. postavlja je skripta za zaštitu od slučajnog brisanja i ostavljena je mogudnostizmene podataka o predmetu.

Spisak prijavljenih ispita Student može obrisati svoju prijavu klikom na crvenu ikonicu u koloni poništi . Student prijavljujeispit pritiskom na dugme prijavi ispit koje se nalazi na levoj strani ispod navigacije.Završni rad – Izrada internet aplikacije | 22 Prijava ispita Nakon što student unese broj indeksa i matični broj na stranici za logovanje. Na početnoj strani se prikazuje spisak prijavljenih ispita i ispita koji čekaju potvrdu od strane administratora. otvara se početna strana namenjena studentima na kojoj se vide satusi ispita koje su prijavili.

Javascript prozor za obaveštenje . klikom na ikonicu pored ispita može videti status prijave. skrpta vraca studenta na stranu sa spiskom prijava gde se vidi status prijave.Završni rad – Izrada internet aplikacije | 23 prijava ispista Nakon unesenih podataka i klikom na dugme prijavi ispit.

prijava se uklanja sa osnovne strane i dobija status prijavljenog ispita. Administrator odobrava ispit tako što klikom na plavu ikonicu u koloni status i u zavisnosti od odobravanja prijave unese da ili ne. otvoride se prijave koje su prijavljene samo za taj rok. . prikazade se prijave za taj predmet. a ako se unese ne prijava de biti obrisana. Ako se unese da ispit de biti prijavljen. otvara se strana sa prijavama ispita koji čekaju na odobravanje administratora. Ako se klikne na naziv predmeta. a ako se klikne na rok. Kada se odobri (ili ne odobri) prijava ispita.Završni rad – Izrada internet aplikacije | 24 Pregled prijava i izmena statusa Kada se administrator uloguje. Prijave ispita se radi pregleda mogu filtrirati. podaci de se filtritati i prikazade se samo prijave tog studenta. Klikom na ime studenta.

Završni rad – Izrada internet aplikacije | 25 Filtriranje po studentu Filtriranje po predmetu filtriranje po roku za prijavu .

pritiskom na link otvara se stranica sa mestom za naslov. Poruka se šalje na predefinisanu email adresu administratora. Skripta za slanje maila je tako podešena da mail koji stiže administratoru izgleda tako da je adresa na koju se odgovara mailom. adresa studenta. Izgled maila koji stiže administratoru Naslov poruke je zadebljan i ispod teksta poruke se generiše tekst „S poštovanjem. a adresa za odgovor je email adresa studenta.Završni rad – Izrada internet aplikacije | 26 Kontakt Na stranici za studente nalazi se link kontakt. broj indeksa“. sadržaj poruke i dugme za slanje. pa tako administrator može jednostavno odabrati opciju replay da bi odgovorio direktno na mail studenta. Ime Studenta. .

može da pošalje mail studentu tako što na spisku studenata klikne na vrednost u koloni email i otvara se prozor za slanje poruke .Završni rad – Izrada internet aplikacije | 27 Administrator. upisuju se naslov i tekst poruke i stisne se dugme pošalji. Klikom na email studenta otvara se prozor za slanje maila .takođe.

V.Završni rad – Izrada internet aplikacije | 28 Literatura  PHP i MySQL: Od početnika do profesionalca III izdanje. Stephens  http://www. Steve Johnson  SQL . Ryan K.w3schools. Džejson Gilmore  Dreamweaver CS3 na dlanu.php.net/manual/en/zvanični sajt PHP programskog jezika  http://www.Naučite za 21 dan.com/Online učenje i trening internet tehnologija .