УНИВЕРЗИТЕТ У КРАГУЈЕВЦУ

ФАКУЛТЕТ ТЕХНИЧКИХ НАУКА ЧАЧАК

ДИПЛОМСКИ РАД
ТЕМА: ВЕБ АПЛИКАЦИЈА ЗАЛИХЕ КОМПЈУТЕРСКЕ ОПРЕМЕ

Руководилац рада: Студент:

Др Марија Благојевић Лазар Марковић 524/2016

Чачак, 2018.
Садржај
1. Увод.........................................................................................................................................................1
1.1 Кориснички захтеви.............................................................................................................................2
2. Опис система...........................................................................................................................................3
2.1 Опис случајева коришћења..................................................................................................................3
2.2 Качење докумената...............................................................................................................................4
2.3 Брисање производа са залиха(стања)..................................................................................................6
2.4 Измена стања........................................................................................................................................9
3. Опис архитектуре апликације..................................................................................................................12
3.1 Дијаграм класа....................................................................................................................................12
3.2 Структура базе....................................................................................................................................13
3.3 Спецификација REST API-ja..............................................................................................................14
4. Опис технологија коришћених у апликацији.........................................................................................18
4.1.HTML...................................................................................................................................................18
4.2.PHP......................................................................................................................................................20
4.3. AJAX(Asynchronous JavaScript and XML)........................................................................................21
4.4.JSON....................................................................................................................................................23
4.5.JavaScript.............................................................................................................................................23
4.6.Jquery...................................................................................................................................................25
5. Корисничко упуство – Опис карактеристичних случајева коришћења преко screenshot-ова
апликације.....................................................................................................................................................26
5.1 Администратор...................................................................................................................................30
6. Приказ репрезентативних делова кода...................................................................................................34
6.1 Конекција са базом.............................................................................................................................34
6.2 Header секција.....................................................................................................................................35
6.3 Регистрација........................................................................................................................................36
6.4 Подаци о графику................................................................................................................................37
6.5 Галерија слика.....................................................................................................................................38
7. Тестирање апликације..............................................................................................................................39
7.1 Обичан корисник................................................................................................................................39
7.2 Регистровани корисници....................................................................................................................41
7.2 Панел за администратора (SuperUser)..............................................................................................44
8. Закључак................................................................................................................................................47
Литература....................................................................................................................................................48
 Веб апликација залихе компјутерске опреме

1. Увод
Може се рећи да је појава Интернета довела до револуције у многим сферама људског
деловања, међутим, вероватно највећи утицај интернет је имао у области развоја
глобалног пословног окружења. Информације, њихова доступност и брзина размене
представљају основу успешног пословања савремених предузећа, а интернет у том
контексту представља савршено средство за проналажење и дистрибуцију информација.
Сложене, дистрибуиране веб апликације постале су неопходне за опстанак и развој
савремених предузећа у условима глобалног, међународног тржишта.

У оквиру овог рада биће приказан развој веб апликације коришћењем интернет
технологија. У првом делу рада је приказан опис система, док је централни део поглавља
посвећен технологијама које су коришћене за израду саме апликације.

Други део рада обрађује архитектуру апликације. Будући да су релационе базе података
постале својеврсни стандард у домену перзистенције података, приказан је дијаграм класа
као и структуре коришћене базе података и њених табела.

У наставку рада приказана је спецификација коришћених API-ја и стављен фокус је на

технологије које су коришћене за израду апликације, као и приказ репрезентативног кода
уз објашњење.

1
 Веб апликација залихе компјутерске опреме

1.1 Кориснички захтеви

Потребно је пројектовати и имплементирати веб апликацију за залихе компјутерске
опреме. Систем треба да препознаје две врсте корисника: администратора система и
корисника система са обичним привилегијама. За корисника система је потребно
омогућити регистрацију на сајт и логовање. Ако корисник није регистрован, није могуће
да се пријави. Администратор система има приступ администраторском панелу.
Администраторски панел се састоји из дела који се односи на брисање или измену залиха,
додавање залиха на стање као и додавање производа. Затим је омогућена претрага
производа према категорији, визуелизација са приказом графикона где нам је
представљена количина по сваком производу, као и качење pdf фајлова (односе се на
рекламације корисника) на сајт.

2
 Веб апликација залихе компјутерске опреме

2. Опис система

2.1 Опис случајева коришћења

Карактеристични случаји коришћења:
1) Регистрација корисника
2) Пријава (login) корисника/админа
3) Преглед стања
4) Додај на стање
5) Додај производ
6) Измена залиха
7) Брисање залиха
8) Преглед слика
9) Претрага залиха производа
10) Качење докумената
11) Одјављивање корисника/администратора

Слика 1: Дијаграм случајева коришћења 2 – Администратор

3
 Веб апликација залихе компјутерске опреме

2.2 Качење докумената

Слика 2: Дијаграм случајева коришћења 3 – Качење докумената

Случај коришћења – Качење докумената

Назив СК: Качење документа

Актори СК: Администратор

Учесници СК: Администратор, систем

Предуслов: Систем је покренут.

Основни сценарио:

 Администратор се логује на систем.

 Корисник шаље захтев систему за логовање.
 Систем прихвата корисника.
 Администратор уноси документ
 Систем чува документ.

4
 Веб апликација залихе компјутерске опреме

Алтернативни сценарио:

1.1 Уколико систем не може да прихвати логовање, шаље поруку кориснику:

“Неуспешно логовање.“

Слика 3: УМЛ дијаграм 1 Качење докумената

5
 Веб апликација залихе компјутерске опреме

Слика 4: Дијаграм секвенци 1 Качење документа

2.3 Брисање производа са залиха(стања)

Случај коришћења – Брисање производа са залиха

Назив СК: Брисање производа са залиха

Актори СК: Администратор

Учесници СК: Администратор и систем

Предуслов: Систем је покренут

Основни сценарио:

 Администратор уноси податке за логовање

 Администратор позива систем да изврши логовање.
 Систем извршава логовање.
 Након успешног логовања администратор се налази на почетној страни.
 Администратор проналази производ који жели да уклони.
 Администратор притиском на x позива систем да обрише стање.

6
 Веб апликација залихе компјутерске опреме

Алтернативни сценарио

3.1 Уколико систем не може да улогује администратора, шаље поруку: “Неуспешно

логовање.”

Слика 5: УМЛ дијаграм 2 Брисање стања

7
Веб апликација залихе компјутерске опреме

Слика 6: Дијаграм секвенци 2 Брисање стања

8
 Веб апликација залихе компјутерске опреме

2.4 Измена стања

Случај коришћења – Измена стања

Назив СК: Измена стања

Актори СК: Администратор

Учесници СК: Администратор и систем

Предуслов: Систем је покренут.

Основни сценарио:

 Администратор уноси податке за логовање.

 Администратор позива систем да изврши логовање.
 Систем извршава логовање.
 Након успешног логовања администратор се налази на почетној страници.
 Администратор проналази стање који жели да измени.
 Администратор притиском на ознаку за измену позива систем да измени стање.

9
 Веб апликација залихе компјутерске опреме

Алтернативни сценарио:

3.1 Уколико систем не може да улогује администратора, шаље поруку кориснику:

“Неуспешно логовање.”

Слика 7: УМЛ дијаграм класа 2 Измена стања

10
Веб апликација залихе компјутерске опреме

Слика 8: Дијаграм секвенци 3 Измена стања

11
 Веб апликација залихе компјутерске опреме

3. Опис архитектуре апликације

3.1 Дијаграм класа

Слика 9: УМЛ дијаграм Архитектура система

12
 Веб апликација залихе компјутерске опреме

3.2 Структура базе

У раду је коришћена база података залихе.

База се састоји из пет табела: категорија, продавница, производ, стање, корисник.

Слика 10: ПМОВ за базу

Табела Продавница има следеће колоне: ProdavnicaID, nazivProdavnice, adresa. Atribut

ProdavnicaID је примарни кључ табеле. Табела Производ садржи: ProizvodID, naziv, cena,
opis, proizvodjac као и ProdavnicaID који представља спољни кључ ове табеле. ProizvodID
је примарни кључ. Категорију чине колоне: KategorijaID (примарни кључ),
nazivKategorije, minimalnaKolicina, optimalnaKolicia. Табела стање која је преставља
агрегацију између Продавнице и Производа садржи: StanjeID који је примарни кључ,
спољне кључеве ProdavnicaID и ProizvodID као и kolicina И vreme. Табела User има
следеће колоне: UserID која представља примарни кључ, imePrezime, username, password
И колону rola. Рола може узимати вредности 0 или 1, при чему на тај начин дефинише да
ли је приступ омогућен кориснику или администратор.

13
 Веб апликација залихе компјутерске опреме

3.3 Спецификација REST API-ja

Опис функције Прелед свих корисника

HTTP метода GET

URL api/корисници

URL параметри (нема)

HTTP параметри (нема)

Формат HTTP (нема)

body параметра

14
 Веб апликација залихе компјутерске опреме

Излазни Низ JSON објеката. Сваки елемент низа има атрибуте

парамтери idKorisnika[int], imePrezime[string], lozinka[string], rola[string],
email[string]

Пример:

[
{
"userID":"1",
"imePrezime":"Lazar Markovic",
"username":"lazar",
"password":"lazar",
"rola":"1"
},
{
"userID":"2",
"imePrezime":"Obican Korisnik",
"username":"korisnik",
"password":"korisnik",
"rola":"0"
},
{
"userID":"3",
"imePrezime":"test",
"username":"test",
"password":"test",
"rola":"0"
},

{
"userID":"4",
"imePrezime":"testapi",
"username":"api",
"password":"api",
"rola":"0"
},
{
"userID":"5",
"imePrezime":"testAPI2",
"username":"api2",
"password":"api2",
"rola":"0"
},
{
15
 Веб апликација залихе компјутерске опреме

"userID":"6",
"imePrezime":"testapi3",
"username":"api3",
"password":"api3",
"rola":"0"
},
{
"userID":"7",
"imePrezime":"proba",
"username":"asdfg",
"password":"7p@?AToZ1BWL6.z",
"rola":"0"
}
]

Формат излазних application/json

параметара

Опис функције Преглед стања

HTTP метода GET

URL api/стања

URL параметри (нема)

HTTP body параметри JSON објекат са атрибутима

username[string], password[string].

Пример:

[
{
"stanjeID":"4",
16
 Веб апликација залихе компјутерске опреме

"prodavnicaID":"2",
"proizvodID":"1",
"kolicina":"35",
"vreme":"2018-08-04 10:26:29",
"nazivProdavnice":"WinWIN",
"adresa":"Vojvode Stepe 125",
"naziv":"Laptop Acer Aspire A315 Crni
15.6",Ryzen QC
R5-2500U/4GB/500GB/Radeon Vega 8",
"cena":"49990",
"opis":"Uz Inovativni AMD Ryzen™ 5
2500U Processor i Radeon™ Vega 8
Integrated Graphics Vaše svakodnevne
aktivnosti ćete obavljati sa lakoćom!",
"proizvodjac":"Lenovo",
"kategorijaID":"1",
"nazivKategorije":"A",
"minimalnaKolicina":"10",
"optimalnaKolicina":"50"
},
]

Формат HTTP body параметри нема

Излазни параметри нема

Формат излазних параметра application/json

Opis funkcije Kategorije

HTTP metoda GET

URL api/kategorije

URL parametri (nema)

HTTP body parametri [

{
"kategorijaID":"1",
"nazivKategorije":"A",
"minimalnaKolicina":"10",
"optimalnaKolicina":"50"
},
{
17
 Веб апликација залихе компјутерске опреме

"kategorijaID":"2",
"nazivKategorije":"B",
"minimalnaKolicina":"5",
"optimalnaKolicina":"20"
},
{
"kategorijaID":"3",
"nazivKategorije":"C",
"minimalnaKolicina":"2",
"optimalnaKolicina":"10"
}
]

Format HTTP body parametara nema

Izlazni parametri nema

Format izlaznih parametara application/json

4. Опис технологија коришћених у апликацији

У раду су коришћене следеће технологије:

1. HTML
2. CSS
3. PHP
4. AJAX
5. JSON
6. JavaScript
7. XML
8. JQuery

4.1.HTML

HyperText Markup Language, је стандаризовани језик који се користи при структурирању

текстова, медија и уграђених објеката у веб странице и електронску пошту. Као
18
 Веб апликација залихе компјутерске опреме

модификовану и поједностављену верзију SGML језика, HTML стандаризује и одржава

World Wide Web Consortium (W3C).Оригиналну верзију HTML-а креирао је Tim Berners-
Lee, а прва званична верзија је изашла јуна 1993 године.

HTML језик је сачињен од обичног текста и тагова. Иако се HTML знакови (tags) често
називају кодом, технички HTML није код јер рачунарски код су инструкције које од
рачунара траже да изврши одређену операцију. Сврха HTML знакова је да се се структура
документа "означи" тако да би корисников агент (user agent), тј. интернет претраживач
могао да препозна структуру документа и исправно је прикаже у прозору интернет
претражевача којег корисник користи.

За додатно модификовање веб страница користе се следеће технологије:

• CSS или Cascading Style Sheets за изглед и положај презентације

• Скриптни језици (Javascript, VBScript) за омогућавање динамичности и

интерактивности на веб презентацијама,

• DOM или Document Object Model, који означава везу између скрипте и елемента на
страници

Горњи додаци, у пакету са HTML језиком, понекад се називају DHTML или Динамични
HTML.

Сваки HTML документ мора почети тагом <html> и завршити се тагом </html>. HTML
документ садржи уобичајено два различита дела, head и body. Head садржи информације о
документу које се не приказују на екрану. Body садржи све остало што се приказује као
део веб странице.

HTML5 је језик који се користи за структурирање и презентовање садржаја за Worl Wide

Web и представља основну технологију Интернета. HTML5 је пета ревизија HTML
стандарда која се и даље допуњује и развија. Основни циљеви развијања ове последње
верзије HTML-а су побољшање језика са подршком за мултимедије који ће бити разумљив
за људе, али исто тако и за компјутере и уређаје (веб претраживаче, парсере...). HTML5 је
потенцијални кандидат за „cross-platform“ мобилне апликације пошто су многе особине
HTML5 прављене тако да буду у могућности да се покрену на уређајима мале снаге као
што су смарт телефони и таблети.

19
 Веб апликација залихе компјутерске опреме

HTML5 је намењен да превазиђе не само HTML4, него XHTML1 и HTML DOM.

WHATWG је радио на веб формама и апликацијама, док је W3C радио на XHTML 2.0 .
2006. године су почели заједничку сарадњу. Тако да се HTML5 може сматрати мешавином
карактеристика и спецификација HTML-а и XHTML-а. Овоме је допринела заједничка
пракса, као и многе грешке у постојећим веб документима, ово је такође и покушај да се
дефинише јединствени markup језик, који се може писати и у HTML-у и у XHTML-у. Ово
укључује детаљне процесне моделе да би охрабрило још интероперабилних
имплементација. То проширује, унапређује и рационализује означавање докумената, као
што је омогућен и API (aplication programing interface), за комплексне веб апликације.
Тренутно постоје две паралелне верзије HTML 5, једна службена на којој ради W3C и
неслужбену на којој раде стручњаци из Apple-а, Mozzile, Opere и Google-a, који имају
велик утицај на развој Интернета, иако иза себе немају формалну организацију као што је
W3C. Ипак, уредници HTML 5 спецификације за оба тима су исти људи, што значи да
групе међусобно сарађују и да ћемо на крају ипак имати један стандард. Уредници HTML
5 спецификације су su Ian Hickson из Googlea и David Hyatt који ради за Apple.

HTML5 уводи многе нове синтаксне промене. Оне укључују нове <video>, <audio> и
<canvas> елементе, као и интеграцију SVG (Scalable Vector Graphics) садржаја (који
замењују коришћење <object> тагова). Ове карактеристике су дизајниране тако да лако
укључују и рукују мултимедијалним и графичким садржајем на веб-у без потребе
укључивања plug-in-ова и API-ја. Други нови елементи, као што су на пример <section>,
<article>, <header> и <nav> су креирани да обогате семантички садржај документа. Са
друге стране, неки елементи и атрибути су уклоњени, као на пример <font> и <center> који
су превазиђени коришћењем много моћнијег CSS-а. [6]

4.2.PHP

PHP је open source језик који се користи за развој server-sidе апликација, као и динамичког
веб садржаја. PHP дозвољава интеракцију са великим бројем релационих база података
као што су MySQL, Oracle, IBM D2, Microsoft SQL Server, PostgreSQL и SQLite. PHP ради
на већини оперативних система данашњице, као што су UNIX, Linux, Windows и Mac OS и
може да интерагује са већином Web сервера.

PHP је стекао популарност због своје једноставности и синтаксе наслеђене из програмског

језика C. Током времена језик се проширивао и стицао могућности за објектно
оријентисано програмирање, нарочито од верзије 5.0. Наликује језику C++ у смислу да
дозвољава и чисто-процедурално програмирање али омогућава и коришћење класа и
других концепата објектно оријентисаног програмирања (наслеђивање, апстрактне методе,
интерфејси итд.).

Неке од основних одредница PHP – а су:

20
 Веб апликација залихе компјутерске опреме

• PHP је акроним за Hypertext Preprocessor

• server – side скриптни програмски језик

• скрипте се извршавају на серверу

• подржава рад са различитим базама податама (MySQL, Informih, Oracle, Sybase,

Solid, PostgreSQL, Generic ODBC, итд.)

• open source software (OSS)

• ради на различитим платформама (Windows, Linux, Unix и тд.)

• компатибилан је са скоро свим серверима који се данас користе (Apace, IIS, итд. )

• лак је за учење и ефикасно функционише на страни сервера.

За PHP фајлове, битне су следеће чињенице:

• могу да садрже текст, HTML тагове и скрипте

• враћају се клијентском броwсер – у као HTML текст (плаин HTML)

• имају екстензију: “.PHP”, “.PHP3” или “.phtml”

Програм који се напише у PHP-у не захтева превођење (компајлирање), него се

интерпретира при сваком извршавању. PHP интерпретер може радити по CGI принципу,
односно тако што ће интерпретер постојати као екстерна апликација која се позива да
изврши дату скрипту сваки пут кад буде захтевана од неког корисника, а може бити
инсталиран и као модул веб-сервиса. Друга варијанта је данас у највећој употреби јер
пружа знатно већу брзину извршавања - интерпретер је на тај начин увек учитан у
меморију те се не мора позивати спољашњи програм.

Уобичајен сценарио по ком се извршавају PHP скрипте на веб серверу је следећи:

• клијент (корисник Интернета који користи неки браузер) захтева PHP страницу са
сервера

• сервер прослеђује захтев сервису за веб (програм веб-сервер на серверу)

• веб-сервер препознаје да се тражи PHP датотека

21
 Веб апликација залихе компјутерске опреме

• не шаље његов садржај клијенту, него га извршава као програм помоћу PHP
модула

• излазни текст програма (стандардни излаз) се шаље клијенту као резултат захтева

• клијент препознаје врсту резултата (HTML код, слика, PDF садржај, архива итд.)

резултат се приказују клијенту на одговарајући начин [4]

4.3. AJAX(Asynchronous JavaScript and XML)

AJAX је скраћеница од “Asynchronous JavaScript and XML”. Термин AJAX први пут је
употребљен у фебруару 2005. године, када је Џеси Џејмс Гарет (Jesse James Garret),
дизајнер информационих система и директор компаније Adaptive Path, покушао да нађе
одговарајућу скраћеницу за групу технологија коју је предлагао свом клијенту.
Технологије потребне за постојање AJAX -а су постојале и ранијих година али је главни
разлог за слабију употребу свих техника коришћених у AJAX-у, недостатак подршке од
стране веб читача. Многи су годинама пре ње користиле сличне принципе, попут
Microsoft-овог Remote Scriptinga или веома раширеног DHTML-а. Најбитнија ствар која је
утицала на брз развој AJAX-а јесте тренутак на тржишту у којем су велики играчи
Интернет индустрије желели да тежиште коришћења рачунара пренесу са десктопа на веб
странице, за шта им је била потребна управо технологија.

Веб апликације имају бројне предности у односу на десктоп апликације. Веб апликације
досежу до већег броја људи, лакше се развијају, имплементирају и одржавају.

Највећи недостатак Веб апликација у односу на десктоп апликације је тај што су десктоп
апликације „богатије” у смислу функција и информација које нуде. Међутим, тај
недостатак је у великој мери отклоњен уз помоћ AJAX технологије.

Веб апликације су оне апликације чијом функционалношћу се управља преко веб сервера
и достављају се корисницима преко мреже као што је интернет или интранет. И поред
многоструких предности, класичне веб апликације имају одређене неостатке, када је у
питању интеракција са корисницима:

• Спор одговор на захтеве

22
 Веб апликација залихе компјутерске опреме

• Губитак садржаја приликом поновног учитавања странице

• Губитак информација на екрану

• Губитак позиције скроловања

• Без тренутног одговора на корисничке акције

• Корисник мора да чека на учитавање следеће стране

• Кликни, чекај, рефреш принцип рада на страници

• Страница се поновно учитаца са сервера за све акције корисника

• Синхрони начин рада.

Пре свега, сваки пут када се учитава нова страница, постоји одређено време када
апликација «стоји». Веома често се приликом малих измена или захтева за деловима
странице, поново учитава цела страница, иако је највећи део нове странице у потпуности
идентичан са претходном.

Да би се схватио концепт AJAX технологија, неопходно је објаснити разлику измену

синхроног и асинхроног преноса података између клијента и сервера.

У синхроном начину рада процеси се изводе секвенцијално. Између два процеса постоји
јаз који је једнак времену извођења другог процеса. Дакле, основни процес комуникације
између клијената и сервера може се описати на следећи начин: клијент шаље захтев ка
серверу, подаци се преносе ка серверу, сервер обрађује податке И затим их враћа клијенту.
Оно што је приметно са слике доле је да постоји временски интервал између прављења
захтева и одговора на исти.

За време тог интервала клијент чека, без могућности да прави нове затеве или настави
своје коришћење веб апликације. Може се закључити да код синхроног преноса података
не постоји могућност за елиминисање чекања зато што се процеси обављају један за
другим, чак и уколико за то нема потребе.[2]

4.4.JSON

JSON (JavaScript Object Notation) представља текстуални формат за серијализацију

података. Изведен је од формата за запис објекта скриптног језика JavaScript, међутим
данас овај формат користи већина савремених програмских језика. Основна сврха JSON-а
је пренос података и може се рећи да представља својеврсну алтернативу XML-у. JSON је

23
 Веб апликација залихе компјутерске опреме

у меморијском смислу мање захтеван од XML-а, што значи да JSON фајл са одређеним
подацима заузима мање меморијског простора од XML фајла са истим подацима.

JSON је заснован на JavaScript стандарду Стандард ECMA-262 3рд Edition - December

1999. Иако је JSON уско повезан са JavaScript програмским језиком, данас практично сви
програмски језици подржавају JSON запис података. Међу њима су JavaScript, PHP, Java,
C, C++, Python, Ruby и други.

JSON се заснива на две структуре:

• Збирка парова име / вредност. На разним језицима, то је реализовано као објекат,

запис, структура, речник, хеш табела, листа са кључевима или асоцијативни низ.

• Уређена листа вредности. У већини језика, ово је реализована као низ, вектор,
листа или секвенца.

JSON формат разликује више типова података. Променљиве се у JSON-у називају

вредности. Од простих типова података, то су string, number, boolean и null, а од сложених
типова у питању су object и array.

4.5.JavaScript

JavaScript је објектно заснован скриптни језик. Укључујемо га у веб страницу да би је

учинили динамичнијом. HTML (основни код веб страница) се користи само за обликовање
и уређивање елемената странице (текст, форме, линкове и табеле), али нема шансе да
диктирамо како ће се ти елементи понашати. Могућност укључења JavaScript скрипте даје
нам много већу контролу како се веб страница понаша. Комбинован са HTML-ом и CSS-
ом JavaScript чини DHTML (Dinamic HTML).

Објектно је заснован јер програмер не дефинише само тип података, него и врсту
операција (функција) које се могу примјенити на структуре података. На овај начин,
структура података постаје објекат који укључује и податке и функције. Поред тога,
програмери могу да креирају односе између једног и другог објекта. На пример, објекти
могу да придобију карактеристике од других објеката.

Скриптни је језик јер се састоји од серије команди које се очитавају у интерпретеру

(програм преводиоц), а да се предходно не компајлира садржај (compiler- програм
преводиоц). Односно не преводи се у машински језик (бинарни код 1 и 0) из кога никада
нећемо сазнати оригинални језик, него се команде директно "читају" из кода (source code
или bytecode). Због ове карактеристике JavaScript се извршава на страни корисника (client
side), тј. на рачунару на којем је покренут садржај са JavaScript-ом. Сам по себи, HTML
24
 Веб апликација залихе компјутерске опреме

дозвољава посетоцу да пошаље податке ка серверу на обраду. Нажалост ако ти подаци

нису валидни цели процес се мора поновити све док се не унесу валидни подаци. Ово је
један од основних разлога настанка JavaScript-а који проверава веродостојност података
на клијентовом претраживачу (browser-у) и тако олакшава посао на веб-у.

Рани скрипт језици су се често називали batch језици. Ово су неки скрип језици : ASP, JSP,
PHP, Perl, Tcl, Python итд.

JavaScript је најпопуларнији скриптни језик на Интернету којег подржавају сви познатији

прегледачи (Internet Explorer, Mozilla Firefox, Netscape, Opera). Ево неколико ствари које је
сваки просечан сурфер на интернету видео: падајући мени, необични показивач миша,
искачући прозор, сат ... Међутим постоје озбиљније примене JavaScript-а као што су:

Детекција прегледача -Одређује се тип прегледача који се користи при прегледу ваше веб
странице. Зависно од прегледача, може се приказати другачија страница посебно
дизајнирана за тај прегледник.

Контрола прозора -могу се контролисати димензије, мени, дугмад, време приказа итд.

Веб колачићи (cookies) -похрањени подаци на корисниковом рачунару, који се

аутоматски преузимају следећи пут када корисник посети вашу веб страницу

Провера садржаја -добар пример за ово је проверавање да ли је корисник уписао знак @ у

поље за упис еmail адресе.[1]

4.6.Jquery

Jquery је библиотека чија је сврха да олакша употребу JavaScript-а на вашим веб

страницама.

Jquery слоган „write less, do more“ доста говори – са једном линијом Jquery кода можете
позвати функционалности за које би вам требало много више рада и труда, ако би
користили класични JavaScript метод кодирања.

Jquery обухвата многе задатке који захтевају велики број линија JavaScript-а и омотава их
у методе које можете позвати са само једном линијом.

Jquery такође поједностављује и друге компликоване ствари у JavaScript-у као што су

АЈАX и DOM манипулација.

25
 Веб апликација залихе компјутерске опреме

JQUERY БИБЛИОТЕКА САДРЖИ СЛЕДЕЋЕ ФУНКЦИОНАЛНОСТИ:

• HTML/DOM манипулација

• CSS манипулација

• HTML евент методи

• Ефекти и анимације

• АЈАX

Додатно: Jquery поседује plugin-ovе са којима можете постићи готово сваки захтев који
замислите.

Најважнији разлог толике поуларности Jquery библиотеке је екстезивност. Велики број

највећих светских компанија као што су Google, Microsofr, IBM га користе.

Три ствари су значајне и издвојиле су Jquery у односу на друге конкуренте:

• коришћење CSS селектора

• unobtrusive (ненаметљив) JavaScript

• једноставност употребе

Jquery се појавио у време када су се front-end developer-и навикавали на креирање веб

страница са бољим семантичким обележавањем, а учење CSS-а је било заступљено широм
веб-а. Jquery користи потпуно исте CSS селекторе које девелопери користе за стилизовање
веб страница да би додали понашање и нема потребе за променом контекста када се
референцира на исте елементе. „Unobtrusive JavaScript“ је методологија која дефинише
напредан начин инплементирања JavaScript кода на веб страницама. Суштина
презентације. На овај начин избегавају се стандардни проблеми JavaScript кодирања као
што су неконзистентност на browser-има и недостатак скалабилности.

Jquery је направљен тако да буде крајње једноставан за девелопере који га користе.

5. Корисничко упуство – Опис карактеристичних случајева

коришћења преко screenshot-ова апликације

26
 Веб апликација залихе компјутерске опреме

Слика 11: Почетна

Слика 12: Регистрација

Кликом на картицу Регистрација корисник се региструје. Уноси Ime I prezime, username и

password помоћу. Корисник има могућност да му се лозинка сама изгенерише. Генерисана
лозинка се добија притиском на дугме “Generisi lozinku” И појављује се у виду алерт
прозора.
27
 Веб апликација залихе компјутерске опреме

Слика 13: Изгенерисана лозинка

Након успешне регистрације корисник иде на картицу „Log in“ где уноси username и
password и пријављује се.

Слика 14: Login forma

Након успешне пријаве корисника формира се нови мени.

28
 Веб апликација залихе компјутерске опреме

Слика 15: Мени корисника

Приликом клика ка на картицу „Galerija“ кориснику је омогућена претрага слика

произвођача. Идеја је континуирано праћење произвођача. Корисник име произвођача или
претражује по одређеној категорији и кликом на дугме “Pretrazi“ добијамо приказ слика са
сајта Flickr преко његовог API-ија.

Слика 16: Форма за претрагу

Слика 17: Претрага

Кликом на картицу „Fajlovi“ корисник може преузети неки од корисних фајлова.

29
 Веб апликација залихе компјутерске опреме

Слика 18: Фајлови

Корисник може да дода производ на стање. Приликом додавања потребно је да изабере

продавницу, да одабере производ који желе да унесе као и количину.

30
 Веб апликација залихе компјутерске опреме

Слика 19: Додавање производа на стање

5.1 Администратор

Мени након што се корисник улогује као админ. Омогућена му је измена и брисање
производа на стању као и додавање новог производа

Слика 20: Мени админ

Кликом на карицу “Dodaj proizvod” приказује се следећа форма.

Слика 21: Додај производ

31
 Веб апликација залихе компјутерске опреме

Картица „Izmena I brisanje “ је најзначајнија. Администратор врши измену, брисање,

претрагу производа на стању као и качење фајлова.

Слика 22: Измена и брисање

32
 Веб апликација залихе компјутерске опреме

Вредности означене црвеном бојом указују да је за тај производ количина мања од

минималне количине за ту категорију док зелена боја означава да је количина већа од
оптималне количине за ту категорију. Такође постоји поље за претрагу производа на
залихама.

Слика 23: Преглед стања

Поред наведених функционалности у овој картици је приказ графикона који представља

количину по сваком производу.

33
 Веб апликација залихе компјутерске опреме

Слика 24: График – Количина по производу

6. Приказ репрезентативних делова кода

На следећих неколико слика биће приказани делови кода и објашњење његових
функционалности.

6.1 Конекција са базом

Слика 25: Конекција са базом

34
 Веб апликација залихе компјутерске опреме

Обзиром да се ради са базом података неопходно је извшити конекцију са истом.

Конекција се врши тако што се инстанцира DBBroker и унесу се одговарајући параметри

за конекцију при чему је обезбеђено управљање грешкама које се чувају у фајлу
„greskeFajl.log“.

6.2 Header секција

Слика 26: Header секција

Овај део кода представља формирање менија. Коришћена је глобална променљива

SESSION која даје информацију да ли је улоговани корисник обичан корисник или
администратор. У зависности о ком типу корисника се ради приказаће се другачији мени
као и приступ различитим функционалностима. Уколико је реч о обичном кориснику мени
ће садржати следећа поља: Pocetna, Pregled stanja, Galerija, Dodaj na stanje, Fajlovi I
Logout. Администратор поред наведених поља садржи и: Izmena и Brisanje I Dodaj
proizvod.
35
 Веб апликација залихе компјутерске опреме

6.3 Регистрација

Слика 27:Регистрација 1

Формира се нови корисника и позива се функција registracija() класе User. Уколико

корисник зa било коју од вредности које треба да попуни унесе празан стринг или
вредност која је одговора вредностима за наведено поље функција враћа false. Унете
вредност се преко API-ја чувају у JSON фајлу.

Слика 28: Регистрација 2

36
 Веб апликација залихе компјутерске опреме

6.4 Подаци о графику

Слика 29: Подаци о графику

Формиран је график у облику пите. График приказује количину за сваки произвид.

Подаци се добијају спајањем табеле Proizvod и табеле Stanje преко спољног кључа
proizvodID.

Слика 30: MySql упит

37
 Веб апликација залихе компјутерске опреме

6.5 Галерија слика

Код који приказује како вршимо претрагу слика у галерији помоћу Flickr-овог апија.

Слика 31: Галерија слика

7. Тестирање апликације
7.1 Обичан корисник
Стартовањем апликације отвара се почетна страна, где корисник има приступ прегледу
производа. Чекирањем категорије производи се сортирају по категорији.

38
 Веб апликација залихе компјутерске опреме

Слика 32: Почетна страна

Кликом на картицу преглед стања корисник добија инфромације о производима у којој

продавници се налазе, о категорији, као и тренутна количина производа на стању на том
продајном месту.

Слика 33: Преглед стања

Картица Galerija коринику даје могућност, да уносом имена одређеног модела добије
приказ изгледа одређеног производа. Кликом на дугме претражи корисник добија
резултате претраге.

39
 Веб апликација залихе компјутерске опреме

Слика 34: Галерија

7.2 Регистровани корисници

Поред поменутих функционалности, постоје опције за регистрацију и пријаву. Картице
Registracija и Login. Кликом на картицу регистрација, корисник се може регистровати
уносом тражених података. Након тога потребно је да се пријави. Корисник се редиректује
на почетну страну, пријавом корисник добија више могућности и може додавати
производе на стање у оквиру картице Dodaj na stanje.

40
Веб апликација залихе компјутерске опреме

Слика 35: Регистрација корисника

Слика 36: Логин форма

41
 Веб апликација залихе компјутерске опреме

Слика 37: Nav Bar за регистроване кориснике

Потребно је да корисник унесе жељене параметре и да дода производ на стање.

Слика 38: Додавање производа на стање

42
Веб апликација залихе компјутерске опреме

Слика 39: Успешно додат производ

43
 Веб апликација залихе компјутерске опреме

7.2 Панел за администратора (SuperUser)

Администрaтор странице има панел са посебним привилегијама, све што је потребно је да
приликом пријаве унесе своје креденцијале. Пријавом добија приступ карицама, Izmena i
brisanje и Dodaj priozvod. На слици 40 је приказан панел на ком администратор може
брисати производе из базе, као и вршити измене стања.

Слика 40: Измена и брисање

Слика 41: Дијаграм стања

44
 Веб апликација залихе компјутерске опреме

Процес додавања производа је једноставан, кликом на картицу Dodaj proizvod, отвара се

форма са слике 42. Потребно је попунити поља и кликом на додај производ, додали смо
нови производ. Следећи корак је додавање производа на стање, кликом на картицу Dodaj
na stanje чекирамо претходно додати производ и додајемо производ са жељеном
количином.

Слика 42: Додавање производа

Слика 43: Додавање производа на стање

45
Веб апликација залихе компјутерске опреме

Слика 41: Приказ додатог производа

46
 Веб апликација залихе компјутерске опреме

8. Закључак
Услед све више корисника присутних на Интернету расте потражња за веб платформама
које ће корисницима омогућити лакши присуп информацијама. Применом веб технологија
омогућен је бржи и једноставнији приступ информацијама, боља комуникација са
корисницима и прикупљање повратних информација од корисника.

Интернет платформе бришу баријере традиционалног начина трговине, презентације,

трансакције разних садржаја, што скраћује време потраге за одређеним аритклом, или
обављање одређеног посла. Могућност куповине без посете физичком објекту омогућила
је брже и лакше обављање пословних трансакција без употребе традиционалне
папирологије.

Тему овог рада изабрао сам желећи на неки начин да заокружим раније стечена
програмерска знања и искуства, али и у жељи да савладам неке нове технологије. Свакако
је данас највећи изазов свакоме ко се на било који начин бави информационим
технологијама да прати корак њиховог развоја и да се усавршава и усваја нове
технологије. Из тог разлога, изабрао сам технологије које се користе за развој веб
апликација, како би унапредио и проширио знања везана за веб технологије.

47
 Веб апликација залихе компјутерске опреме

Литература
[1] Srđan Pantić: Uvod u Java Script, Beograd, 1997.

[2] Vladica Savić: AJAX – Asychronous JavaScript And XML (WEB 2.0 standarda)

[3] Marija Zeman: Sigurnost Web Aplikacija, Zagreb, 2007.

[4] Ivica Kartelo : PHP5 MySQL, Split 2008.

[5] Bakardjieva, M:Internet Society. The Internet in Everyday Life, Sage, London, 2005.

[6] HTML5 dokumenti, 09.09.2018. www.mikroknjiga.rs/Knjige/HT5/01_HT5.pdf

48