Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
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
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 = podaci.json();
});
this.dataService.uzmiListuStatusa()
.subscribe((podaci) => {
this.statusi = podaci.json();
});
this.dataService.uzmiListuRizika()
.subscribe((podaci) => {
this.rizici = 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'))
.subscribe((podaci) => {
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/