Универзитет „Св.

Климент Охридски“ –

Битола

ФАКУЛТЕТ ЗА ИНФОРМАТИЧКИ И

КОМУНИКАЦИСКИ ТЕХНОЛОГИИ

студиска програма по

Информатички Науки и Комуникациско Инженерство

-ДИПЛОМСКИ ТРУД-
по предметот

Бази на Податоци

ИЗРАБОТКА НА ВЕБ АПЛИКАЦИЈА ЗА

КОМПАНИЈА ОД ИТ СЕКТОР

Изработил : Ментор :

Александар Карапанчевски Проф. Д-р. Виолета Маневска

ИНКИ708

Битола, октомври, 2023

2
Апстракт

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

софтверска фирма, со користење на различни техники од софтверското инженерство,
односно технологии наменети за развивање на корисничкиот интерфејс, како и
технологии за развивање на серверскиот дел на една апликација. Имплементиран е
пријателски – ориентиран кориснички интерфејс, кој што со посебни методи, комуницира
со корисничкиот интерфејс, овозможувајќи полесна навигација низ веб апликацијата на
еден корисник. Во овој труд, изграден е и серверски дел, кој што овозможува конекција со
базата на податоци за веб апликацијата, и со соодветни алгоритми, направена е поделба на
веб апликацијата, односно, апликацијата содржи и администраторски дел, како и дел за
останатите корисници. Креирана е база на податоци, која што содржи табели, како и
релација помеѓу табелите. Во овој труд, во рамките на серверскиот дел, креирани се и
прашалници, од категоријата на база на податоци – јазик за манипулирање со податоците,
кој што ги модифицира податоците, што е и клулниот дел во овој труд. Сите техники и
технологии се употребени во овој труд, со цел да се индицира на важноста на сите
компоненти во рамките на софтвер инженерството, со посебен акцент кон базите на
податоци.

3
 1. ВОВЕД

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

базите на податоци во програмски код, како и нивно визуелно прикажување на
пребарувач. Инспирацијата за креирање на дипломскиот труд на темата „Веб апликација
за компанија од ИТ сектор“ е значителното и конзистентно подобрување на ИТ во
индустријата од една страна, од друга страна, технологиите кои се клучни за софтверско
инженерство, но, најважно од сè – податокот. Податокот, како некој факт од кој што со
негова модификација, може да се извлечат голем број на информации. Податокот е битен,
а можеби и најбитен фактор за успешно имплементирање на апликација, и за таа цел,
„срцето“ на секоја апликација е базата на податоци.

Кога прецизно би се објаснала дефиницијата за бази на податоци, на начин кој што

секој може да разбере, тоа е место, каде што се чуваат податоците во еден систем. Тој
систем, кој што овозможува конзистентост, изолација, трајност и атомичност, овозможува
и соодветна употреба на тие податоци. За еден податок да биде корисен и да се извлечат
корисни информации од самиот податок, потребна е негова модификација. Системот за
управување на бази на податоци, овозможуваат извршување на разни операции на
податоците, а најважните се : креирање, читање, ажурирање и бришење на податоците.
Важно е да се напомене дека една база на податоци, може да содржи ентитети, кои имаат
атрибути со соодветни податочни типови и соодветни вредност, а ентитетите, имаат
релација меѓусебно. За таа цел, за една база на податоци да биде успешно имплементирана
и оддржлива, клучно е креирањето на дијаграмот кој што прави релација помеѓу тие
ентитети, односно Ентитет-Релација дијаграм (Entity Relationship Diagram).

За соодветен приказ на модифицираните податоци и информации на пребарувач,

потребна е конекцијата помеѓу базата на податоци и корисничкиот интерфејс. За тоа,
важни фактори се објектно ориентираното програмирање и алгоритмите и структурите на
податоци. Во овој дипломски труд, примената на објектно ориентираното програмирање е
клучна, затоа што тој го прави серверскиот дел, односно, овозможува конекција до базата
на податоци, преку соодветни прашалници и користење на алгоритми, значително ги

4
модифицира податоците, и посакуваните резултати ги испраќа на пребарувачот.
Серверскиот дел е „мостот“ помеѓу базата на податоци и корисничкиот интерфејс.

Корисничкиот интерфејс е она што го гледаат корисниците. Корисниците, визуелно ги

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

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

Кориснички Интерфејс – креиран со HTML, CSS и JavaScript;

Серверски дел – креиран со програмскиот јазик PHP;
Базите на податоци – MySQL систем за управување со релациони бази на
податоци.

2. Кориснички Интерфејс

Корисничкиот интерфејс се состои од заглавие (header), главен дел (main) и подножје

(footer).

2.1. Заглавие (Header)

Заглавието се состои од мени, кое што ги има следните содржини :

Почетна;
За нас;
Технологија;
Изработени проекти;
Ценовник;
Контакт;
CV за пополнување (овозможува спуштање на документ).

5
 Слика 1 – Заглавие

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

Слика 2 – Почетна

6
 Слика 3 – Видео

2.1.2. За Нас
Овој дел, ја прикажува компанијата во кратки црти, во најдобро светло. Овој дел е
поделен во три дела. Првиот дел е краток текст за тоа што е целта на компанијата, вториот
дел е прикажан со кратки информации за тим лидерот, а во третиот дел се прикажани
често поставувани прашања, со нивните одговори.

Слика 4 – Цел

Слика 5 – Тим Лидер

7
 Слика 6 – Често поставувани прашања

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

Слика 7 – Технологии

8
 Слика 8 – Пример за опис на технологија при кликнување на одредена технологија

Важно е да се напомене, дека за овој процес, потполно се користат податоците од

табела од базата на податоци, каде што се сместени податоци за технологијата, како што е
за сликата или за кратката содржина.

Се селектира целата содржина од технологиите, табеларно се листаат податоците, и

за секои три податоци се додава нов ред. Тоа е направено со користење со алгоритам за
примена/користење на бројач и на броеви деливи со 3.

Слика 8 – Алгоритам за приказ на технолгии

2.1.4. Изработени Проекти

Слично како алгоритмот за технологии, така и за изработени проекти, податоците,
како сликите, кратката содржина за проектите и слично, се преземени од база на податоци.
Единствената разлика е тоа што табеларниот приказ го користи алгоритмот за броеви
деливи со 2.
9
Слика 9 – Алгоритам за изработени проекти

Слика 10 – Приказ на изработени проекти

10
 Слика 11 – Подетален приказ за еден од изработените проекти

2.1.5. Ценовник
Во делот за ценовник, прикажани се цените за проектите. Еден проект може да
биде помал, наменет за помали фирми и е задоволителен, односно ги исполнува основните
потреби и услови на едно помало претпријатие, додека другиот тип е целосен, каде што
станува збор за значително поголеми и целосно функционални системи. Детално се
опишани карактеристиките со неподредна листа.

Слика 12 – Ценовник

11
 2.1.6. Контакт
Делот за контакт е најважен, односно, клучен контакт, каде што корисникот тука
може да се регистрира доколку нема профил, и да се најави доколку нема профил.
Корисниците кои што немаат администраторски права, имаат право на пребарување на
корисници, технологии и проекти, а корисниците со администраторски права, имаат
можност за пребарување, бришење, ажурирање, додавање на нови корисници, проекти и
технологии. Користени се форми, кои што со помош на PHP методата $_POST,
податоците се пренесуваат до соодветната скрипта/датотека со екстензија „ .php“ и се
додаваат корисниците во базата на податоци, доколку ги нема, а доколку ги има, се
најавуваат и веб апликацијата ги носи до друго окно.

Слика 13 – Форма за регистрација

Слика 14 – Форма за најавување

12
 2.2. Главен дел (Main)
Сите веќе дефинирани компоненти од корисничкиот интерфејс кои што беа од
менито на заглавието и беа подетално дефинирани нивните функционалности, се наоѓаат
во главниот дел. Имено, корисникот влегува во веб апликацијата за софтверската
компанија, и веб апликацијата му овозможува прецизна и детална навигација низ веб
апликацијата.

Слика 15 – Навигација низ веб апликацијата

2.3. Подножје (Footer)

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

13
страната. Има приказ на услугите кои ги овозможува компанијата на клиентот, како и е-
адресата на компанијата. На крајот на веб апликацијата, овозможени се социјалните
мрежи на кои е достапна компанијата.

Слика 16 – Подножје

3. База на Податоци
Во рамките на овој дипломски труд, креирана е база на податоци, со име „itexpress“ –
по името на компанијата за која е наменета оваа дипломска работа. Креирана е со
прашалник за креирање на база на податоци :

Слика 17 – Прашалник за креирање на База на Податоци

Оваа база на податоци се состои од 4 ентитети :

14
  Ентитет „klient“;
 Ентитет „proekti“;
 Ентитет „proekttehnologii“;
 Ентитет „tehnologii“.

Овие 4 ентитети имаат релации помеѓу себе. Помеѓу ентитетите „klient“ и „proekti“,
има релација 1:М (еден – спрема – многу), од причини што еден проект може да припаѓа
на повеќе клиенти, меѓутоа во рамките на успешноста на имплементирање на
покомплексните проекти, клиентот може да работи на еден проект во дадено време.

Ентитетот „proekttehnologii“ е релациона (помошна) табела, која што има релации

со ентитетите „proekti“ и „tehnologii“. Со двата ентитети, оваа релациона табела има
релација М:М (многу – спрема – многу), бидејќи повеќе проекти можат да бидат
изработени со повеќе технологии, како и повеќе технологии може да бидат изработени во
рамките на повеќе проекти.

15
 Слика 18 – ЕР модел/дијаграм на ентитетите

3.1. Структура на ентитети

Секој од наведените ентитети, имаат свои атрибути, односно променливи кои што
имаат слични карактеристики/својства со цел да го опишат ентитетот. Секој атрибут има
вредност од одреден податочен тип, како и клуч.

3.1.1. Ентитетот Клиент

Овој ентитет содржи атрибути за :

 Идентификационен број на клиентот (ID);

 Името на клиентот;
 Презимето на клиентот;
 Е-адресата на клиентот;
 Корисничкото име на клиентот;
 Лозинката на клиентот;
 Дознавање, односно од каде се здобил со знаење за компанијата;
 Идентификациониот број на проектот на кој работи клиентот;

Слика 19 – Прашалник за креирање на ентитетот „klient“

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

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

16
 Слика 20 – Структура на табелата „klient“

За да бидат атрибутите за е-адреса, корисничко име и лозинка уникатни клучеви,

употребен е алгоритам, кој што овозможува внес на корисник, ако и само ако неговата е-
адреса, неговото корисничко име или неговата лозинка се уникатни, односно доколку тие
атрибути не се вчитани во базата на податоци. Алгоритамот е изработен со користење на
бројач, со условување дека бројачот брои доколку е-адресата или корисничкото име или
лозинката се еквивалентни со вредностите на атрибутите од табелата. Корисникот е
валиден, односно, се внесува во базата на податоци, доколку вредноста на бројачот е 0.

Слика 21 – Алгоритам за уникатна е-адреса

17
 3.1.2. Ентитетот Проект
Ентитетот „proekti“ се содржи од 5 атрибути, односно :

 Идентификациониот број на проектот;

 Име на проектот;
 Основните технологии кои што се користат во проектот;
 Слика на проектот;
 Опис на проектот.

Во оваа табела, идентификациски број на проектот е примарниот клуч. Основните

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

Слика 22 – Прашалник за креирање на табелата проекти

Слика 23 – Структура на ентитетот „proekti“

3.1.3. Ентитетот Проект – Технологии

Овој ентитет е т.н. релациона/помошна табела, односно табела која што се
сочинува од композитни клучеви – 2 надворешни клучеви кои што се примарни клучеви
во други ентитети/табели.

18
 Слика 24 – Прашалник за креирање на релационата табела

Овој ентитет се состои од три атрибути и тоа :

 Идентификациониот број на проектот и технологиите;

 Идентификациониот број на проектот (надворешен/композитен клуч);
 Идентификациониот број на технологијата (надворешен/композитен клуч).

Овој ентитет ја овозможува релацијата помеѓу табелата проекти и табелата

технологии, така што n-број на проекти може да изработат со n-број технологии.

Слика 25 – Прашалник за креирање на релационата табела

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

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

Слика 26 – Прашалник за приказ на технологиите користени во проектот

19
 Слика 27 – Резултат од извршениот прашалник

3.1.4. Ентитет Технологии

Ентитетот „tehnologii“ содржи 4 атрибути кои што се со нивниот соодветен
податочен тип и врз основа на тој податочен тип, содржат вредности. Тие атрибути се :

 Идентификациониот број на технологијата;

 Име на технологијата;
 Слика од технологијата;
 Страна на технологијата.

Слика 28 – Прашалник за креирање на табелата технологии

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

Слика 29 – Структура на ентитетот „tehnologii“

21