TEMA : WEB APLIKACIJA ZA EVIDENTIRANJE … · FUNKCIJA I PROFILI KORISNIKA: Profil korisnika – root: ... Troskovi – nema troskova Kvalitet – kvalitet softvera (baze podataka,

Univerziteti u Novom Sadu

Tehnički fakultet „Mihajlo Pupin“

Zrenjanin

Seminarski rad

Predmet: Softversko Inženjerstvo 2

TEMA : WEB APLIKACIJA ZA EVIDENTIRANJE

SOFTVERSKIH ZAHTEVA

Profesor: doc. dr Ljubica Kazi

Asistent: doc. dr Ljubica Kazi

Student: Hrćan Jan

Indeks: IT 3/14

Smer: Informacione tehnologije

Zrenjanin, 2018. godina

1

CONTENTS

1. PREDMETNI CILJ ........................................................................................................... 1

2. PRIJAVA STUDENTSKOG PROJEKTA ............................................................................... 2

3. UVOD ........................................................................................................................... 6

4. KORIŠTENE TEHNOLOGIJE ............................................................................................. 7

4.1. MYSQL....................................................................................................................... 7 4.2. WEB SERVERI ............................................................................................................... 7 4.3. HTML ........................................................................................................................ 7 4.4. CSS ............................................................................................................................ 7 4.5. PHP SYMFONY ............................................................................................................. 7 4.6. NODEJS ...................................................................................................................... 7 4.7. ANGULAR 2/4/5 ........................................................................................................... 8 4.8. IDE ............................................................................................................................ 8

5. IMPLEMENTACIJA WEB APLIKACIJE ............................................................................... 9

5.1. UML DIJAGRAMI .......................................................................................................... 9 5.1.1. USE CASE DIJAGRAM ............................................................................................................. 9 5.1.2. DIJAGRAM KOMPONENTI ..................................................................................................... 10 5.1.3. DIJAGRAM RAZMEŠTAJA ....................................................................................................... 10 5.1.4. DIJAGRAM KLASA ................................................................................................................ 11 5.1.5. DIJAGRAM SEKVENCI ........................................................................................................... 11 5.2. TABELARNI PRIKAZ VIŠESLOJNE ARHITEKTURE SOFTVERA ........................................................ 12 5.3. OPIS BAZE PODATAKA ................................................................................................... 14 5.4. REST SERVIS .............................................................................................................. 16 5.4.1. INSTALACIJA SYMFONY PROJEKTA .......................................................................................... 16 5.5. PHP SYMFONY RESTFULL SERVIS .................................................................................... 18 5.5.1. PRIMER KLASE POSLOVNE LOGIKE CLSPOSLOVNALOGIKA ............................................................ 18 5.5.2. PRIMER KODA IZ KONFIGURACIONOG FAJLA CONFIG.YML ........................................................... 19 5.5.3. PRIMER KODA ZA KONTROLER „KORISNIKCONTROLLER“ – PRIMER HTTP POST METODE NAD

KORISNIKOM – LOGIN ....................................................................................................................... 20 5.6. ANGULAR .................................................................................................................. 21 5.6.1. INSTALACIJA ANGULAR ........................................................................................................ 21 5.6.2. RUTIRANJE U ANGULAR-U .................................................................................................... 21 5.6.3. NGMODUL – GLAVNA PODEŠAVANJA U OKVIRU GLAVNE „KLASE“ ............................................... 22 5.6.4. SERVIS PODATAKA – SERVICE.TS ............................................................................................ 23 5.6.5. PRIMER KODA KOMPONENTE „SOFTVERSKI ZAHTEV“ ................................................................ 24

6. PRIKAZ RAZVIJENE WEB APLIKACIJE ZA EVIDENCIJU SOFTVERSKIH ZAHTEVA ................ 27

6.1. LOGIN FORMA ......................................................................................................... 27

6.2. HOMEPAGE FORMA................................................................................................. 28

2

6.3. LISTA PROJEKATA - FORMA ...................................................................................... 28

6.4. LISTA ZAHTEVA - FORMA ......................................................................................... 29

6.5. FORMA ŠTAMPANJE ................................................................................................ 31

7. ZAKLJUČAK ................................................................................................................. 32

LITERATURA...................................................................................................................... 33

INDEKS SLIKA .................................................................................................................... 33

INDEKS LISTINGA .............................................................................................................. 33

1

1. PREDMETNI CILJ

Predmet Internet alati i servisi pruža osnovna znanja i veštine iz oblasti Interneta, alata i

servisa, kao jedan od aspekata izučavanja informacionih tehnologija i programiranja.

Cilj ovog predmeta je upoznavanje sa vrstama Internet alata i servisa i njihovom

upotrebom, kao i upoznavanje sa različitim aspektima programiranja projektovanja,

kreiranja i održavanja web baziranih aplikacija.

Predmet Internet alati i servisi treba da omogući efikasno korišćenje internet i intranet

tehnološke infrastrukture, standarda i internet alata. Ishod ovog obrazovnog predmeta

jeste da se steknu i znanja potrebna za kreiranje multimedijalnih internet prezentacija.

Na predavanjima se obrađuju teorijski aspekti internet i intranet tehnologija. Poseban

akcenat je stavljen na upoznavanje sa tehnološkom infrastrukturom interneta i intraneta,

osnovnim konceptima razvoja aplikacija u web okruženju. Poseban akcenat je stavljen

na PHP programski jezik, gde se na predavanjima obrađuju osnovni koncepti

programiranja u PHP programskom jeziku: operacije, stringovi, petlje, funkcije, klase,

nizovi, povezivanje sa bazom, online forme, skripte i Symfony PHP framework.

Na vežbama iz predmeta Interneta alati i servisi se upoznaje sa osnovnim konceptima

izrade Internet aplikacija u PHP okruženju.

2

2. PRIJAVA STUDENTSKOG PROJEKTA

TEMA: Evidentiranje softverskih zahteva

TIP: pojedinacni / timski

KATEGORIJA: unapredjenje / nov

VREME IZRADE: (datum od, datum do): 11.11.2017 – 20.01.2018

UCESNICI: a) RUKOVODILAC - Jan Hrćan

b) UCESNIK - Jan Hrćan

c) ZAINTERESOVANA STRANA - Razvijači softvera

d) KORISNIK – Analitičar, Developer

OPIS POSLA (tok

poslovnih procesa):

Na početku softverskog projekta, u toku prvog sastanka,

analitičar priča sa klijentom o gruboj priči koja se tiče

budućeg softvera koji se izrađuje za klijenta. Moguća

scenarija kao i celokupan dijalog sa klijentom se upisuju

u softver. Kasnije, analitičar ili čak developer razglabaju

priču i zajedno ili pojedinačno osmišljavaju i upisuju

same zahteve u softver koji su prikazani kao jedan

entitet ili lista više entiteta.

SNIMAK STANJA: Ceo tok se odvija tako što se svi podaci upisuju u softver,

tj. U bazu podataka koja se nalazi iza softvera.

ANALIZA

DOKUMENTACIJE:

Pravna regulativa: /

Obrasci dokumenata: Ne postoje obrasci.

Standardi: međunarodni standardi PMBOK I SWEBOK

ANALIZA POSTOJEĆIH

REŠENJA U SVETU U

OVOJ OBLASTI:

1. Requirements Model (PowerDesigner)

Postoji dakle softver koji ima zaseban model koji se

zove Requirements model i na osnovu ovog modela je

pravljen model i za ovu aplikaciju.

ZAHTEVI KORISNIKA: Aplikacija za evidentiranje softverskih zahteva upotrebom

MVC modela.

POTREBE KORISNIKA: Uvid u zahteve klijenta.

INTERESI

ZAINTERESOVANIH

STRANA:

Lakše sprovođenje planiranja kod izrade softvera.

PREDNOSTI OVOG

RESENJA U ODNOSU

Lakša realizacija u oblasti planiranja izrade softvera.

3

NA RANIJA RESENJA:

OCEKIVANI REZULTATI 1. UML - use case, dijagram komponenti, dijagram

razmestaja

2. baza podataka – SQL skript

3. program – web aplikacija i izvorni kod

4. dokumentacija – korisnicko uputstvo programa (ekrani i

nacin koriscenja), kratak opis tehnologije i alata, SQL

skript i shema baze podataka, modeli implementacije

sistema (dijagram klasa, dijagram sekvenci za jedan slucaj

koriscenja), tabelarni prikaz viseslojne arhitekture i

elemenata softvera uz kljucne delove koda po slojevima, sa

objasnjenjima

PLANIRANI OBUHVAT

FUNKCIJA I PROFILI

KORISNIKA:

Profil korisnika – root:

Unos i/ili brisanje korisnika programa

Odobravanje novih korisnika

Ostale funkcije podešavanja softvera

Profil korisnika – analitičar:

Kreiranje novog projekta

Brisanje/izmena (svog) projekta

Brisanje/izmena scenarija

Brisanje/izmena softverskih zahteva

Unos scenarija

Unos softverskih zahteva

Prikaz scenarija

Tabelarni prikaz softverskih zahteva

Prikaz jednog entita iz liste softverskih zahteva

Profil korisnika – developer:

Kreiranje novog projekta

Brisanje/izmena (svog) projekta

Brisanje/izmena scenarija

Brisanje/izmena softverskih zahteva

Unos scenarija

Unos softverskih zahteva

Prikaz scenarija

Tabelarni prikaz softverskih zahteva

Prikaz jednog entita iz liste softverskih zahteva

OGRANICENJA

PROJEKTA I PROCENA

RIZIKA:

- vreme izrade – kratko vreme izrade (RIZIK)

- broj ljudi na projektu – samo jedan učesnik (RIZIK)

- raspolozivi alati – na raspolaganju su, nema rizika

4

- raspolozivi finansijski resursi – nema, ali nema potrebe

ni rizika

INTEGRACIJA SA

POSTOJECIM I NOVIM

SISTEMOM:

Trenutno nema postojeće web aplikacije.

METRIKE KVALITETA

PROJEKTA:

karakteristike projekta:

Troskovi – nema troskova

Kvalitet – kvalitet softvera (baze podataka,

programa, dokumentacije)

Vreme – realizovan projekat na vreme

karakteristike programa:

Usklađenost rešenja sa strateškim ciljevima

organizacije, potrebama i zahtevima korisnika i

interesima zainteresovanih strana

o Dizajn korisničkog interfejsa – funkcionalni

(intuitivni, jednostavan za korišćenje,

minimizacija napora i broja akcija za zeljeni cilj,

interaktivan sa obaveštenjima, automatizmi

kojima se ubrzava i skraćuje rad (uz korišćenje

transakcija), vizualni (pregledan, prijatne boje)

o Performanse – brzina rada

o Pouzdanost – da ne puca, testiran na greske,

ima kontrolu grešaka

o Bezbednost podataka – bekap, kriptografija

o Pogodnost za integraciju u postojeći sistem,

pogodnost za održavanje (složenost rešenja,

raspoloživost alata, otvoreni kod, raspoloživost

osoblja za uslugu održavanja)

NACIN REALIZACIJE PROJEKTA:

Nacin komunikacije

ucesnika

e-mail

Rizici, SWOT analiza SWOT:

- Strength (snaga): prethodno razrađivana problematika

- Weakness (slabost): samo 1 učesnik, ne mnogo

iskustva u symfony framework-u

- Opportunity: iskustvo

- Treat: ako ne uspe realizacija web aplikacije, ne može

se izaći na ispit

RIZICI REŠENJA

Nema zabrinjavajućih rizika po završetku ovog projekta.

Potrebna sredstva Operativni sistem: Windows 10, Home Edition

5

(alati, materijal) DBMS: MYSQL

Vizualni alat za rad sa bazom podataka: MYSQL

Workbench

Jezik programiranja: PHP

Alat za programiranje: NetBeans IDE 8.2.

Framework: Symfony framework za PHP

Troskovi (alat,

materijal, transport)

Sopstvena sredstva

Aktivnosti (ko, kad, sta

radi)

Sve aktivnosti radi Jan Hrćan.

Aktivnosti uključuju: ukupno 10 nedelja

1. Proučavanje „Masterbook”-a za Symfony

framework – učenje načina na koji funkcioniše – 2

nedelje

2. Konstruisanje svih modela na osnovu kojih će se

praviti web aplikacija – 2 nedelje

3. Modelovanje i kreiranje baze podataka, kao i

implementiranje iste u aplikaciju – 1 nedelja

4. Kodiranje PHP aplikacije – 4 nedelje

5. Pisanje završne dokumentacije – 1 nedelja

6

3. UVOD

Ovaj seminarski rad je rađen na temu Web aplikacije, kod kojeg se koriste dve glavne

tehnologije. Jedan framework se koristi za front end – Angular 5, koji je pisan u

TypeScript jeziku (JavaScript jezik uz dodatu mogućnost dodavanja tipova podacima –

odatle type), i drugi framework koji se koristi za back end, odnosno kao web servis,

odnosno REST servis, a to je Symfony framework baziran na php jeziku.

Angular framework se pokazao kao jako dobar i robusni jezik za pisanje front end

aplikacija. Jedan od razloga korišćenja ovog framework-a jeste što su njegove zavisnosti

od spoljašnjih entiteta jako male (sve sadrži u svom jezgru). Razlog za upotrebu

Symfony framework-a kao osnovu RESTfull servisa jeste što se pokazao kao složen i

funkcionalan framework, s obzirom da puno stručnjaka smatra da je PHP loš jezik jer

dozvoljava promenljive bez tipova. Kombinacija ova dva framework-a se pokazalo kao

dobro profesionalno rešenje za pravljenje modernih web aplikacija.

Server baze podatak koji je korišćen tokom izrade seminarskog rada je aktuelna verzija

MySQL Server-a, a to je 5.7.

7

4. KORIŠTENE TEHNOLOGIJE

4.1. MySQL

MySQL je jedan od najpopularnijih “open source” SQL baza podataka koje postoje [7].

Razlog korišćenja MySQL baze podatak jeste zbog toga što je jako brza, skalabilna i

jako lako se koristi. MySQL se nalazi pod GPL licencom (GNU General Public

Licence). MySQL server je prvobitno bio kreiran da bi se rešili problemi oko same

brzine rada baze (kod velikih baza), što ostali serveri za rad sa bazom podataka nisu do

tad pružali.

4.2. Web Serveri

U ovom projektu su korišćena dva web servera. Oba web servera se nalaze interno u

okviru svog projekta. Dakle, prvi server, koji predstavlja neku vrstu nativnog PHP

servera za razvoj aplikacija se nalazi unutar samog Symfony projekta. Taj server radi na

localhost-u na portu 8000. Drugi web server, dakle takođe interni, se nalazi unutar

Angular 5 projekta, gde je instaliran pomoću Angular CLI-ja. Ovaj web server takođe

radi na localhost-u na portu 4200.

4.3. HTML

HTML je direktno skinut sa sajta Bootstrap-a [6], koji nudi nekoliko opcija kao osnovne

teme. Skinuta su dva posebna HTML fajla na kojima je dalje rađena modifikacija. Prvi

deo je deo sa navbar-om, dok je drugi deo, deo sa uređenim listama kasnije skinut.

4.4. CSS

Što se tiče CSS-a, u okviru HTML-a se koristi link [5] prema CDN sajtu koji sadrži sav

potreban CSS za prethodno pomenute HTML stranice. Kada se HTML kod izvršava, sa

pomenutog linka se preuzima CSS fajl koji služi sa uređivanje HTML stranice.

4.5. PHP Symfony

Symfony je framework u PHP jeziku napravljen radi pravljenja lepših i boljih web

aplikacija. Symfony sadrži jako puno PHP biblioteka, ili u ovom slučaju Bundle-ova.

Symfony je bio pušten u javnost pod MIT licencom kao besplatan softver još davne

2005. Godine. Glavni cilj Symfonija jeste da ubrza razvoj robusnih web aplikacija ali

takođe i da održi kvalitet istih. Kao inspiracija za stvaranje Symfony framework-a

poslužio je još jedan web framework baziran na Java programskom jeziku – Spring

framework. Symfony takođe koristi i razne besplatne, open-source framework-ove radi

lakšeg rešavanja raznih problema, kao što je PHPUnit za testiranje ili Propel ili Doctrine

za mapiranje slojeva, kao ORM framework.

4.6. NodeJS

NodeJS kao i NPM su bili neophodan download pre samog početka razvoja Angular

aplikacije, jer se pomoću Node Packet Manager-a bio instalirao sam Angular projekat

kao i neke od zavisnih biblioteka korišćenih u okviru istog[7].

8

4.7. Angular 2/4/5

Angular je popularna i platforma za razvoj web aplikacija. Unutar Angular projekta su

integrisane najbolje prakse za rešavanje razvojnih problema. Sa Angular framework-om

može se razvijati kako web, tako i mobilna ili desktop aplikacija. Trenutna verzija

Angular framework-a jeste verzija 5, a prethode joj verzije 4 i 2. Broj 3 je preskočen

zbog nekih ozbiljnijih problema tokom razvoja, pa posle popravljenih problema

razvojni tim je odlučio da odmah pređu na Angular 4. Što se tiče samim verzija,

Angular ima nešto što se zove Backward compatibility što znači da aplikacije razvijene

na novijim verzijama će takođe raditi i na starijim. Angular koristi typescript kao jezik,

što je „napredniji“ JavaScript. Trenutno se Angular smatra kao najbolji open-source

web framework koji trenutno postoji na tržištu.

4.8. IDE

Editori koji su bili korišćeni u izradi aplikacija su NetBeans 8.2 kao i VisualStudio

Code. NetBeans je korišćen radi izrade RESTfull servisa, kao grafički interfejs za izradu

PHP aplikacija, dok je za izradu Angular aplikacije korišćen VSCode, kod kojeg je

instaliran plugin za kompatibilnost sa Angular sintaksom.

9

5. IMPLEMENTACIJA WEB APLIKACIJE

5.1. UML Dijagrami

5.1.1. Use Case dijagram

Slika 1. Prikaz Use Case dijagrama

10

5.1.2. Dijagram komponenti

Slika 2. Prikaz dijagrama komponenti

5.1.3. Dijagram razmeštaja

Slika 3. Prikaz dijagrama razmeštaja

11

5.1.4. Dijagram klasa

Slika 4. Prikaz dijagrama klasa

5.1.5. Dijagram sekvenci

Slika 5. Prikaz dijagrama sekvenci

12

5.2. Tabelarni prikaz višeslojne arhitekture softvera

GLAVNI SLOJ MVC

dizajn

patern

PODSLOJ TEHNOLOŠKA

IMPLEMENTACIJA

PREZANTACIONI

SLOJ

VIEW Korisnički

interfejs

AngularTemplating

CONTROL Klase prezentacione

logike

Angular components

SERVISNI SLOJ Web servis Symfony RESTfull servis –

Kontroleri u okviru Symfony

projekta koje uslužuju AJAX

zahteve od strane Angular-a.

SLOJ POSLOVNE

LOGIKE

Klase za mapiranje

slojeva

Angular components

Radni tokovi Engine

za upravljanje radnim

tokovima,

Angular components

MODEL Poslovni

objekti

Biblioteke klasa sa klasama

koje predstavljaju poslovne

objekte (entitete pojmova

realnog sveta, dokumente) koji

se po nazivu razlikuju od naziva

tabela iz baze podataka

Master-detail odnosi podataka

Poslovna

pravila

- Klasa sa algoritmom za

proveru poslovnog pravila

SLOJ ZA RAD SA

PODACIMA

Rad sa

relacionom

bazom podataka

Symfony Bundles – biblioteke

- Symfony framework

- FOSRestBundle

13

-

Klase modela

i repository

za rad sa

podacima iz

tabela

relacione

baze

podataka

-

DBMS sa

bazom

podataka

- Doctrine ORM framework

- Relaciona baza podataka

sa tabelama i relacijama.

Rad sa drugim

formatima podataka

–

XML, XLS, JSON

Dodatne Bundles za rad sa JSON

podacima izdefinisane u okviru

config fajla.

14

5.3. Opis baze podataka

Opis baze podataka i skripta za formiranje iste je prikazana u nastavku ovog poglavlja.

Slika 6. Fizički model baze podataka

U ovom projektu se koristi MySQL baza podataka a kao server se koristi MySQL

community server verzije 5.7. Dalje sledi SQL skripta kao i statični podaci u određenim

tabelama.

CREATE TABLE KORISNIK ( KORISNIK_ID INT NOT NULL, ULOGA_KORISNIKA_ID INT, IME_KORISNIKA VARCHAR(20), PREZIME_KORISNIKA VARCHAR(30), KORISNICKO_IME VARCHAR(35), LOZINKA VARCHAR(35), PRIMARY KEY (KORISNIK_ID) ); CREATE TABLE PROJEKAT ( PROJEKAT_ID INT NOT NULL, KORISNIK_ID INT, NAZIV_PROJEKTA VARCHAR(50), OPIS_PROJEKTA VARCHAR(255), DATUM_KREIRANJA_PROJEKTA DATETIME, PRIMARY KEY (PROJEKAT_ID) );

15

CREATE TABLE RIZIKZAHTEVA ( RIZIK_ZAHTEVA_ID INT NOT NULL, NAZIV_RIZIKA VARCHAR(30), PRIMARY KEY (RIZIK_ZAHTEVA_ID) ); CREATE TABLE SOFTVERSKIZAHTEV ( SOFTVERSKI_ZAHTEV_ID INT NOT NULL, STATUS_ZAHTEVA_ID INT, RIZIK_ZAHTEVA_ID INT, PROJEKAT_ID INT, NAZIV_SOFTVERSKOG_ZAHTEVA VARCHAR(50), RADNO_OPTERECENJE_ZAHTEVA FLOAT, FUNKCIONALAN_ZAHTEV BOOLEAN, PRIMARY KEY (SOFTVERSKI_ZAHTEV_ID) ); CREATE TABLE STATUSZAHTEVA ( STATUS_ZAHTEVA_ID INT NOT NULL, NAZIV_STATUSA VARCHAR(30), PRIMARY KEY (STATUS_ZAHTEVA_ID) ); CREATE TABLE ULOGAKORISNIKA ( ULOGA_KORISNIKA_ID INT NOT NULL, NAZIV_ULOGE VARCHAR(50), PRIMARY KEY (ULOGA_KORISNIKA_ID) ); ALTER TABLE KORISNIK ADD CONSTRAINT FK_REFERENCE_1 FOREIGN KEY (ULOGA_KORISNIKA_ID) REFERENCES ULOGAKORISNIKA (ULOGA_KORISNIKA_ID) ON DELETE RESTRICT ON UPDATE RESTRICT; ALTER TABLE PROJEKAT ADD CONSTRAINT FK_REFERENCE_2 FOREIGN KEY (KORISNIK_ID) REFERENCES KORISNIK (KORISNIK_ID) ON DELETE RESTRICT ON UPDATE RESTRICT; ALTER TABLE SOFTVERSKIZAHTEV ADD CONSTRAINT FK_REFERENCE_5 FOREIGN KEY (STATUS_ZAHTEVA_ID) REFERENCES STATUSZAHTEVA (STATUS_ZAHTEVA_ID) ON DELETE RESTRICT ON UPDATE RESTRICT; ALTER TABLE SOFTVERSKIZAHTEV ADD CONSTRAINT FK_REFERENCE_6 FOREIGN KEY (RIZIK_ZAHTEVA_ID) REFERENCES RIZIKZAHTEVA (RIZIK_ZAHTEVA_ID) ON DELETE RESTRICT ON UPDATE RESTRICT; ALTER TABLE SOFTVERSKIZAHTEV ADD CONSTRAINT FK_REFERENCE_7 FOREIGN KEY (PROJEKAT_ID) REFERENCES PROJEKAT (PROJEKAT_ID) ON DELETE RESTRICT ON UPDATE RESTRICT; /*==============================================================*/ INSERT INTO rizikzahteva

16

VALUES (1, 'Mali rizik'); INSERT INTO rizikzahteva VALUES (2, 'Srednji rizik'); INSERT INTO rizikzahteva VALUES (3, 'Visoki rizik'); INSERT INTO statuszahteva VALUES (1, 'Draft'); INSERT INTO statuszahteva VALUES (2, 'Definisan'); INSERT INTO statuszahteva VALUES (3, 'Verifikovan'); INSERT INTO statuszahteva VALUES (4, 'Izvršiti reviziju'); INSERT INTO statuszahteva VALUES (5, 'Odobren');

Listing 1. Skripta za formiranje i popunjavanje baze podataka

5.4. REST Servis

5.4.1. Instalacija Symfony projekta

5.4.1.1. Kreiranje Symfony projekta Na samom početku (Slika 7Error! Reference source not found.), instaliran je

composer i to na globalan način da bi se moglo pristupiti installeru od bilo gde u

sistemu. Dalje kao što je prikazano na slici (Slika 8) se koristi komande composera koje

omogućavaju da se instalira Symfony projekat (project skeleton) na određenu lokaciju.

(U ovom slučaju se koristi verzija 3.1. dok je aktuelna verzija 4.0)

Slika 7. Prikaz instalacije composer-a

17

Slika 8. Prikaz instalacije Symfony projekta na određenu lokaciju

5.4.1.2. Dodavanje zahtevanih bundle-ova Da bi Symfony radio kao RESTFull web servis, potrebno je da se dodaju još neke

biblioteke za rad sa REST-om. Sa composer-om mora da se instaliraju biblioteke unutar

projekta inače će da ih instalira globalno gde projekat neće moći da ih nađe. Treba da se

nalaze u vendor direktorijumu unutar projekta.

composer require friendsofsymfony/rest-bundle

composer require jms/serializer-bundle

composer require nelmio/cors-bundle

5.4.1.3. Podešavanje parametara ka MySQL bazi podataka Posle instalacije samog projekta kao i zavisnih paketa koji su potrebni radi

funkcionisanja RESTfull servisa, unutar projekta se nalazi fajl parameters.yaml u koji se

navode parametri potrebni da bi se uspostavila veza sa MySQL bazom podataka.

18

Slika 9. Prikaz parameters.yaml fajla

5.4.1.4. Povezivanje Doctrine ORM frameworka sa bazom Sledeći korak jeste povezivanje Doctrine framework-a koji se nalazi u Symfony-ju kao

zavisan paket kako bi aplikacija mogla da funkcioniše.

Slika 10. Prikaz povezivanja Doctrine framework-a

U okviru ovog koraka nalazi se i sledeći korak – validacija, da je sve u redu sa bazom i

sa izmapiranim klasama i da li mapirane klase poslovne logike odgovaraju tabelama u

bazi.

Slika 11. Validacija mapiranih klasa

5.5. PHP Symfony RESTfull servis

5.5.1. Primer klase poslovne logike clsPoslovnaLogika Na sledećoj slici se može videti klasa poslovne logike koja primenjuje poslovno pravilo

koje ograničava korisnika da može istovremeno imati i učestvovati u samo maksimum 3

projekata.

19

import { Injectable } from '@angular/core';

import { DataService } from './services/data.service';

@Injectable()

export class PoslovnaLogikaService {

brojac:number = 0;

constructor(private dataService:DataService) {

}

proveriBrojProjekataZaKorisnika(projekti:Projekat[])

{

this.brojac = 0;

projekti.forEach(element => {

this.brojac++;

console.log("Brojac: " + this.brojac);

});

if (this.brojac > 2)

{

return false;

}

else

{

return true;

}

}

}

interface Projekat {

projekat_i_d:number;

naziv_projekta:string;

opis_projekta:string;

datum_kreiranja_projekta:Date;

} Listing 2. Primer primene pravila poslovne logike

5.5.2. Primer koda iz konfiguracionog fajla config.yml Symfony projekat sadrži razne fajlove koje AppKernel.php koristi da bi povezao ceo

projekat u celinu i obezbedio besprekoran rad istog. Postoje fajlovi kao što su

routing.yml – koristi se za rutiranje, security.yml – naravno, za bezbednost, i npr.

Parameters.yml, fajl koji je bio predstavljen na početku. Na sledećoj slici se može videti

primer koda iz config.yml fajla.

20

# Nelmio CORS Configuration

nelmio_cors:

defaults:

allow_credentials: false

allow_origin: ['*']

allow_headers: ['*']

allow_methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']

max_age: 3600

hosts: []

origin_regex: false

# FOSRest Configuration

fos_rest:

body_listener: true

format_listener:

rules:

- { path: '^/', priorities: [json], fallback_format: json,

prefer_extension: false }

param_fetcher_listener: true

view:

view_response_listener: 'force'

formats:

json: true

Listing 3. Prikaz primera koda iz konfiguracionog fajla config.yml

5.5.3. Primer koda za kontroler „KorisnikController“ – primer http post metode nad Korisnikom – login

Dakle, u sledećem primeru se detaljno može videti prava upotreba ovog framework-a

kao RESTfull servisa gde putem anotacija je zabeležena putanja, tj. na kojoj adresi će se

naći podaci koje će Angular (u ovom slučaju), da koristi za proveru logina.

/**

* @Rest\Post("/login/")

*/

public function loginAction(Request $request)

{

$session = $request->getSession();

$session->clear();

$params = json_decode($request->getContent(), true);

$username = $params['username'];

$password = $params['password'];

$res = $this->getDoctrine()->getRepository('AppBundle:Korisnik')-

>findAll();

$em = $this->getDoctrine()->getEntityManager();

$repo = $em->getRepository('AppBundle:Korisnik');

$korisnik = $repo->findOneBy(array('korisnickoIme' => $username,

'lozinka' => $password));

if ($korisnik)

{

21

if (($korisnik->getUlogaKorisnika()->getNazivUloge() ==

'Developer') ||

($korisnik->getUlogaKorisnika()->getNazivUloge() ==

'Analista'))

{

$login = new Login($korisnik);

$session->set('login', $login);

return new JsonResponse('korisnik');

}

else if ($korisnik->getUlogaKorisnika()->getNazivUloge() ==

'Admin') {

$login = new Login($korisnik);

$session->set('login', $login);

return new JsonResponse('admin');

}

}

else {

return new JsonResponse('404');

}

}

Listing 4. Prikaz primera koda za kontroler „KorisnikController“

5.6. Angular

5.6.1. Instalacija Angular Za početak, da bi se mogao instalirati Angular projekat, potrebno je skinuti Node.js kao

i NPM (eng. Node Packet Manager) uz pomoć kojih će se instalirati AngularCLI (eng.

Angular Command Line Interface).

Slika 12. Prikaz instalacije Angular projekta

Nakon jednostavne instalacije Angular projekta, kompletan projekat koji se sastoji od

dva framework-a je spreman za dalji razvoj.

5.6.2. Rutiranje u Angular-u Da bi se aplikacijom lakše rukovalo, stvorena je potreba da se stranice dinamički

menjaju kao i sadržaj na njima. Rutiranje je dosta pojednostavljeno u najnovijoj verziji

Angular-a. Primer rutiranja ove aplikacije se može videti na sledećoj slici.

const routes: Routes = [

{

path: 'default',

component: DefaultComponent,

children:[{

path: 'homepage',

22

component: HomepageComponent

},

{

path: 'projects',

component: ProjekatComponent

},

{

path: 'projects/softreq',

component: SoftverskiZahtevComponent

}

]

},

{

path: 'print',

component: PrintComponent

},

{

path: 'admin',

component: AdminComponent

},

{

path: '',

component: LoginComponent

},

];

Listing 5. Prikaz rutiranja Angular-a

5.6.3. NgModul – glavna podešavanja u okviru glavne „klase“ U fajlu app.module.ts i samoj app komponenti se skuplja cela aplikacija i ta

komponenta služi kao čvorište za sve ostale komponente koje se nalaze u projektu. To

se može videti na sledećoj slici.

@NgModule({

declarations: [

AppComponent,

LoginComponent,

HomepageComponent,

DefaultComponent,

AdminComponent,

PrintComponent,

SoftverskiZahtevComponent,

ProjekatComponent

],

imports: [

BrowserModule,

HttpModule,

FormsModule,

ReactiveFormsModule,

HttpClientModule,

23

RouterModule.forRoot(routes)

],

providers: [DataService],

bootstrap: [AppComponent]

})

export class AppModule { }

Listing 6. Prikaz glavnih podešavanja u okviru glavne "klase" - NgModul

5.6.4. Servis podataka – service.ts Kao što se može videti na prethodnoj slici, kao provajder je navedena komponenta pod

nazivom DataService koja služi da bi putem HTTP protokola komunicirali sa prethodno

napravljenim RESTfull servisom.

// Softverski zahtevi

uzmiListuSoftZahteva()

{

return

this.http.get('http://localhost:8000/listasoftverskihzahteva/'+localStora

ge.getItem('projekat'));

}

dodajSoftZahtev(podaci:any)

{

console.log(JSON.stringify(podaci));

return

this.http.post('http://localhost:8000/softverskizahtev/'+localStorage.get

Item('projekat'),

JSON.stringify(podaci)).map(res => res.json());

}

obrisiSoftZahtev(id:number)

{

return this.http.delete('http://localhost:8000/softverskizahtev/'+id)

.map(res => res.json());

}

izmeniSoftZahtev(podaci:any, id)

{

return

this.http.put('http://localhost:8000/softverskizahtev/'+localStorage.getI

tem('projekat')

+"/"+id,

JSON.stringify(podaci)).map(res => res.json());

} Listing 7. Prikaz http zahteva prema Symfony RESTfull servisu

24

5.6.5. Primer koda komponente „Softverski Zahtev“ Na sledećoj slici je naveden primer koda komponente koja se bavi softverskim

zahtevima, dakle, atributi ove export klase, kao i korišćenje prethodno navedenih HTTP

protokola kroz metodu inicijalizacije.

import { Component, OnInit } from '@angular/core';

import { DataService } from '../services/data.service';

import { Router } from '@angular/router';

@Component({

selector: 'app-softverski-zahtev',

templateUrl: './softverski-zahtev.component.html',

styleUrls: ['./softverski-zahtev.component.css']

})

export class SoftverskiZahtevComponent implements OnInit {

softverskiZahtevi:SoftverskiZahtev[];

softverskiZahteviTemp:SoftverskiZahtev[];

statusi:StatusZahteva[];

rizici:RizikZahteva[];

inputNaziv:string;

inputRadnoOpterecenje:number;

inputFunkcionalan:boolean;

inputStatus:string;

inputRizik:string;

izmeniKliknuto:boolean;

filter:string;

constructor(private dataService:DataService, private router:Router) { }

ngOnInit() {

this.dataService.uzmiListuSoftZahteva()

.subscribe((podaci) => {

this.softverskiZahtevi = <SoftverskiZahtev[]>podaci.json();

});

this.dataService.uzmiListuStatusa()


this.statusi = <StatusZahteva[]>podaci.json();

});

this.dataService.uzmiListuRizika()


this.rizici = <RizikZahteva[]>podaci.json();

});

this.inputFunkcionalan = false;

this.inputNaziv = "";

this.inputRadnoOpterecenje = 0;

this.izmeniKliknuto = false;

}

25

dodaj()

{

let selektRizik;

let selektStatus

this.statusi.forEach(element => {

if (element.naziv_statusa == this.inputStatus)

{

selektStatus = element.status_zahteva_i_d;

}

});

this.rizici.forEach(element => {

if (element.naziv_rizika == this.inputRizik)

{

selektRizik = element.rizik_zahteva_i_d;

}

});

if (this.izmeniKliknuto)

{

this.dataService.izmeniSoftZahtev({

naziv : this.inputNaziv,

opterecenje : this.inputRadnoOpterecenje,

funkcionalan : this.inputFunkcionalan,

status : selektStatus,

rizik : selektRizik

} , localStorage.getItem('softZaht'))


if (podaci == 'Zahtev uspešno update-ovan!')

{

this.ngOnInit();

}

});

}

else

{

this.dataService.dodajSoftZahtev({

naziv : this.inputNaziv,

opterecenje : this.inputRadnoOpterecenje,

funkcionalan : this.inputFunkcionalan,

status : selektStatus,

rizik : selektRizik

}).subscribe((podaci) => {

if (podaci == 'Zahtev uspešno kreiran!')

{

this.ngOnInit();

}

})

}

26

}

obrisi(zahtev)

{

let index = this.softverskiZahtevi.indexOf(zahtev);

this.dataService.obrisiSoftZahtev(zahtev.softverski_zahtev_i_d)

.subscribe((status) => {

if (status == 'Zahtev uspešno obrisan!')

{

this.softverskiZahtevi.splice(index, 1);

}

});

}

izmeni(zahtev)

{

this.izmeniKliknuto = true;

let index = this.softverskiZahtevi.indexOf(zahtev);

this.inputNaziv = zahtev.naziv_softverskog_zahteva;

this.inputRadnoOpterecenje = zahtev.radno_opterecenje_zahteva;

this.inputFunkcionalan = zahtev.funkcionalan_zahtev;

this.inputStatus = zahtev.status_zahteva.naziv_statusa;

this.inputRizik = zahtev.rizik_zahteva.naziv_rizika;

localStorage.setItem('softZaht', zahtev.softverski_zahtev_i_d);

}

stampaj()

{

this.router.navigate(['print']);

}

proveriPodudarnosti()

{

this.softverskiZahteviTemp = this.softverskiZahtevi;

this.softverskiZahtevi.forEach(element => {

if (!element.naziv_softverskog_zahteva.match(this.filter))

{

this.softverskiZahtevi.splice(this.softverskiZahtevi.indexOf(element),

1);

}

});

}

vratiStaruListu()

{

this.ngOnInit();

}

27

}

interface SoftverskiZahtev

{

softverski_zahtev_i_d:number;

naziv_softverskog_zahteva:string;

radno_opterecenje_zahteva:number;

funkcionalan_zahtev:boolean;

status_zahteva:StatusZahteva;

rizik_zahteva:RizikZahteva;

}

interface StatusZahteva

{

status_zahteva_i_d:number;

naziv_statusa:string;

}

interface RizikZahteva

{

rizik_zahteva_i_d:number;

naziv_rizika:string;

}

Listing 8. Prikaz primera koda komponente „Softverski Zahtev“

6. PRIKAZ RAZVIJENE WEB APLIKACIJE ZA EVIDENCIJU

SOFTVERSKIH ZAHTEVA

6.1. LOGIN FORMA

Na prvoj stranici korisnika očekuje „login“ forma gde se mora ulogovati da bi nastavio

dalje. Unesu se najpre podaci korisničko ime, lozinka i pritisne dugme „Uloguj se!“.

28

Slika 13. Prikaz "login" forme

6.2. HOMEPAGE FORMA

Ako se korisnik uspešno ulogovao, dočekuje ga „homepage“ ili početna stranica. Na

početnoj stranici korisnik ima mogućnost da pritisne na meniju gore da ode u listu

projekata za tog korisnika, da se odloguje iz aplikacije, ili da se vrati na početnu

„homepage“ stranicu.

Slika 14. Hompage strana

6.3. LISTA PROJEKATA - FORMA

Na klik na stavku menija „Lista mojih projekata“ korisniku se otvara nova stranica sa

listom projekata koje taj korisnik ima.

29

Slika 15. Prikaz liste projekata i opcija dodavanjanovih projekata

Ovde postoje opcije dodavanja novih, izmene kao i brisanje projekata koje je taj

korisnik prethodno napravio. Kolona „Naziv projekta“ jeste zapravo hiperlink koji dalje

otvara sve softverske zahteve vezane za odabrani projekat.

6.4. LISTA ZAHTEVA - FORMA

Slika 16. Prikaz funkcionalnosti na stranici sa listom softverskih zahteva

Na stranici sa listom softverskih zahteva ima nekoliko funkcionalnosti. Dodavanje,

izmena, brisanje zahteva, kao i filtriranje po nazivu i dugme za štampu koje vodi do

stranice za podešavanje štampe.

Slika 17. Prikaz dodatnih funkcionalnosti na stranici sa listom zahteva

30

Dalje slede primeri dodavanja, izmene i štampe.

Slika 18. Prikaz dodavanja zahteva

Kao što se može videti na slici (Slika 18), dodat je nov zahtev koji se nalazi pod brojem

5.

Slika 19. Prikaz izmene zahteva

Sada je zahtev pod brojem 5 izmenjen i dodate su mu neke nove vrednosti najpre

klikom na dugme izmeni, pa posle izvršenih izmena na dugme Dodaj/izmeni.

31

Slika 20. Prikaz funkcionalnosti fintriranja zahteva

Takođe, jedna od glavnih funkcionalnosti jeste filtriranje liste softverskih zahteva kao

što se može videti na slici (Slika 20).

6.5. FORMA ŠTAMPANJE

Slika 21. Prikaz filtriranih zahteva i izgleda stranice za štampu

Na kraju (Slika 21) imamo i primer izgleda stranice za štampu softverskih zahteva.

32

7. ZAKLJUČAK

U ovom seminarskom radu je korišćena kombinacija dva frameworka. Upotrebnom

Google Angular 4 frameworka razvijen je front end prikazane web aplikacije, dok je za

razvoj back enda iste korišćen Symfony framework, razvijen od francuske kompanije

SensioLabs

Symfony se jako lepo pokazao kao RESTfull servis kako sa brzinom tako i sa

pouzdanošću. Tema seminarskog rada je evidentiranje softverskih zahteva. Tema je

odabrana sa ciljem da se prikažu osnovne funkcije jedne web aplikacije kao što su

dodavanje, izmena, brisanje, filtriranje štampa, itd. Pravljenje kombinacije ovih

framework-ova se pokazalo kao dosta veliki izazov, međutim sama aplikacija se

pokazala kao robusno i profesionalno rešenje za moderne web aplikacije.

Prednosti korišćenja ovih tehnologija jeste pojednostavljen i lepo uređen pristup MVC

tematici kao i sama robusnost i kvalitet dobijenog softvera.

Kao glavnu manu razvoja ovakvog projekta jeste upotreba i konstantni rad dva web

servera koji znatno usporavaju rad u bilo kojem razvojnom okruženju kao i samo

testiranje softvera.

Jedna od mogućih smernica daljeg razvoja ovog softvera jeste implementacija

funkcionalnosti kolaboracija na projektima sa nekim drugim korisnikom, što dalje

dovodi do toga da ovaj softver više nije samo softver za evidenciju već i softver za

timski rad.

33

LITERATURA

Knjige i naučni radovi

[1] Murray, N., Coury, F., Lerner, A., Taborda, C.(2017) Ng-Book The Complete

Guide to Angular 4. Fullstack.io. San Francisco, California.

[2] SensioLabs. (2016) Symfony The Book, Version:master. SensioLabs.

Linkovi ka stranicama sajtova

[3] https://angular.io/, Poslednji put posećeno: 12.01.2018

[4] https://symfony.com/, Poslednji put posećeno: 12.01.2018

[5] https://www.bootstrapcdn.com/, Poslednji put posećeno: 15.01.2018

[6] https://getbootstrap.com/, Poslednji put posećeno: 15.01.2018

[7] https://www.mysql.com/about/, Poslednji put posećeno: 15.01.2018

[8] https://nodejs.org/en/about/, Poslednji put posećeno: 15.01.2018

INDEKS SLIKA

Slika 1. Prikaz Use Case dijagrama ................................................................................. 9 Slika 2. Prikaz dijagrama komponenti ............................................................................ 10

Slika 3. Prikaz dijagrama razmeštaja ............................................................................. 10 Slika 4. Prikaz dijagrama klasa ...................................................................................... 11

Slika 5. Prikaz dijagrama sekvenci ................................................................................. 11 Slika 6. Fizički model baze podataka.............................................................................. 14 Slika 7. Prikaz instalacije composer-a ........................................................................... 16

Slika 8. Prikaz instalacije Symfony projekta na određenu lokaciju ............................... 17 Slika 9. Prikaz parameters.yaml fajla ............................................................................. 18

Slika 10. Prikaz povezivanja Doctrine framework-a ...................................................... 18 Slika 11. Validacija mapiranih klasa .............................................................................. 18

Slika 12. Prikaz instalacije Angular projekta ................................................................. 21 Slika 13. Prikaz "login" forme ........................................................................................ 28 Slika 14. Hompage strana ............................................................................................... 28 Slika 15. Prikaz liste projekata i opcija dodavanjanovih projekata ............................... 29

Slika 16. Prikaz funkcionalnosti na stranici sa listom softverskih zahteva .................... 29 Slika 17. Prikaz dodatnih funkcionalnosti na stranici sa listom zahteva ....................... 29 Slika 18. Prikaz dodavanja zahteva ................................................................................ 30 Slika 19. Prikaz izmene zahteva ...................................................................................... 30 Slika 20. Prikaz funkcionalnosti fintriranja zahteva ...................................................... 31

Slika 21. Prikaz filtriranih zahteva i izgleda stranice za štampu ................................... 31

INDEKS LISTINGA

Listing 1. Skripta za formiranje i popunjavanje baze podataka ..................................... 16 Listing 2. Primer primene pravila poslovne logike ........................................................ 19

Listing 3. Prikaz primera koda iz konfiguracionog fajla config.yml .............................. 20 Listing 4. Prikaz primera koda za kontroler „KorisnikController“ ............................... 21 Listing 5. Prikaz rutiranja Angular-a ............................................................................. 22 Listing 6. Prikaz glavnih podešavanja u okviru glavne "klase" - NgModul ................... 23 Listing 7. Prikaz http zahteva prema Symfony RESTfull servisu .................................... 23 Listing 8. Prikaz primera koda komponente „Softverski Zahtev“ .................................. 27

https://angular.io/

https://symfony.com/

https://www.bootstrapcdn.com/

https://getbootstrap.com/

https://www.mysql.com/about/

https://nodejs.org/en/about/

TEMA : WEB APLIKACIJA ZA EVIDENTIRANJE … · FUNKCIJA I PROFILI KORISNIKA: Profil korisnika – root: ... Troskovi – nema troskova Kvalitet – kvalitet softvera (baze podataka,

Documents