jesenji semestar, 2020/21 · 2021. 1. 27. · testovi koji će se raditi: testiranje...

Jesenji semestar, 2020/21

PREDMET:

CS324 SKRIPTING JEZICI

Projektni zadatak

Ime i prezime: Mladen Simeonović

Broj indeksa: 3668

Datum izrade: 25.1.2021.

Profesor: Nemanja Zdravković

CS324 – Skripting jezici Mladen Simeonović– 3668

2

1. Sadržaj

1. Sadržaj ........................................................................................................................................... 2

2. Uvod i teoretska postavka izabrane teme ..................................................................................... 3

2.1. Funkcionalni zahtevi .............................................................................................................. 3

2.2. Nefunkcionalni zahtevi ........................................................................................................... 3

2.3. Slučaj korišćenja(Use case)..................................................................................................... 3

3. Primer/studija slučaja primene izabrane teme ............................................................................. 8

3.1. Dijagrami web aplikacije ........................................................................................................ 8

3.1.1. Dijagram arhitekture ..................................................................................................... 11

3.1.2. Modeli baze podataka ................................................................................................... 11

3.1.3 Dijagram infrastrukture .................................................................................................. 11

3.2. Tehnologije i alati za razvoj web aplikacije .......................................................................... 12

3.3. Testiranje(Šta) ...................................................................................................................... 12

3.4. Struktura web aplikacije(datoteke) ...................................................................................... 13

3.5. GUI - Grafički korisnički interfejs .......................................................................................... 25

3.6. Testiranje Web Aplikacije ..................................................................................................... 28

4. Zaključak ..................................................................................................................................... 32

5. Spisak literature ........................................................................................................................... 33


3

2. Uvod i teoretska postavka izabrane teme

Cilj projektnog zadatka je napraviti Web aplikaciju(CarApp) koja je bazirana na Python skripting

jeziku i Flask “framework-u”(radni okvir).

Web aplikacija omogućava korisniku(autorizovanom) da unosi informacije/podatke u vezi određenih

automobila, pregleda postojeće/unete/memorisane automobile(zapisi iz baze podataka), ažurira

podatke/informacije i brisanje samih zapisa(automobila).

2.1. Funkcionalni zahtevi Funkcionalni zahtevi omogućavaju prikaz i objašnjenje zahteva/mogućnosti koje mora pružati sama

Web aplikacija(CarApp).

Funkcionalni zahtevi su sledeći:

Unos podataka/informacija o automobilu od strane autorizovanog/prijavljenog korisnika;

Pregled svih zapisa(automobila) iz baze podataka od strane autorizovanog korisnika;

Ažuriranje zapisa(automobila) od strane autorizovanog korisnika(ne svi, samo kreator

zapisa);

Brisanje zapisa(automobila) od strane autorizovanog korisnika(ne svi, samo kreator zapisa).

2.2. Nefunkcionalni zahtevi Nefunkcionalni zahtevi omogućavaju prikaz i objašnjenje zahteva koji se odnose na same osobine

web aplikacije i sistema.

Nefunkcionalni zahtevi su sledeći:

Bezbednost aplikacije(zaštita od SQLinj., XSS-a, CSRF-a, Brute Force, Mitm-a, bar neki srednji

nivo bezbednosti);

Solidna raspoloživost(bez dodatnih servera i sl.);

Solidne performanse aplikacije(min. 500 korisnika/zahteva u istom trenutku);

Jednostavan UI(maks. 3 boje, bez suvišnih detalja);

Što manje klikova od strane korisnika;

Responsive.

2.3. Slučaj korišćenja(Use case) Dijagram “slučaj korišćenja”(Use case) služi da prikaže “komunikaciju” između korisnika i funkcija

aplikacije.


4

Slika 1 (Prikaz Use case-a)

Na dijagramu možemo primetiti kako autorizovani korisnik pristupa samoj aplikaciji, i kako su

funkcije aplikacije međusobno povezane.

Korisnik se mora prvo prijaviti(log in), ukoliko je autorizovan i ima dozvolu, može izvršavati određene

akcije poput: kreiranja novog zapisa, ažuriranje postojećeg zapisa, brisanje postojećeg zapisa,

pregled svih zapisa.

Kratak opis Provera autorizacije korisnika

Učesnici Korisnik

Preduslov Korisnik je uspešno uneo podatke za

autentifikaciju(korisničko ime i lozinka).

Osnovni scenario 1. Korisnik je uspešno uneo podatke za

autentifikaciju;

2. Deo skripting koda proverava da li se

radi o korisniku sa dozvolom.

Izuzeci Korisnik nije uneo tačne podatke za

autentifikaciju;

Korisnik nije autorizovan/nema

dozvolu.


5

Rezultat Omogućava izvršavanje određenih

akcija(prikaz, unos, brisanje, ažuriranje).

Tabela 1(Prikaz Use case-a za autorizaciju)

Kratak opis Autorizovani korisnik unosi novi

zapis(automobil)

Učesnici Korisnik

Preduslov Korisnik je autorizovan.

Osnovni scenario 1. Korisnik ima dozvolu/autorizovan je;

2. Korisnik bira opciju unosa novog

automobila;

3. Korisnik popunjava tražena polja sa

validnim podacima

4. Podaci su validni i šalju se u bazu

podataka.

Izuzeci Korisnik nije autorizovan/nema

dozvolu;

Korisnik nije popunio sva tražena polja;

Korisnik nije uneo validne podatke;

Baza podataka ima grešku.

Rezultat Uspešno kreiran novi automobil u bazu

podataka.

Tabela 2(Prikaz Use case-a za kreiranje novog automobila)

Kratak opis Autorizovani korisnik(autor) ažurira postojeći

zapis(automobil)

Učesnici Korisnik

Preduslov 1. Korisnik je uspešno uneo podatke za

autentifikaciju(korisničko ime i

lozinka);

2. Korisnik je autor zapisa.

Osnovni scenario 1. Korisnik ima dozvolu/autorizovan je;

2. Korisnik bira postojeći automobil;

3. Korisnik bira opciju ažuriranje;

4. Korisnik unosi nove validne podatke

5. Podaci su validni i šalju se bazi.


6


dozvolu;

Ne postoj nijedan zapis(automobil);

Korisnik nije uneo validne podatke;


Rezultat Uspešno ažuriran zapis(automobil)

Tabela 3(Prikaz Use case-a za ažuriranje postojećeg zapisa)

Kratak opis Autorizovani korisnik(autor) briše postojeći

zapis(automobil)

Učesnici Korisnik



lozinka);

2. Korisnik je autor zapisa.

Osnovni scenario 1. Korisnik ima dozvolu;

2. Korisnik bira postojeći automobil;

3. Korisnik bira opciju brisanja;

4. Zapis se briše iz baze podataka.


dozvolu;

Ne postoj nijedan zapis(automobil);


Rezultat Uspešno brisanje zapisa

Tabela 4(Prikaz Use case-a za brisanje postojećeg zapisa)

Kratak opis Prikaz zapisa(automobila) autorizovanom

korisniku

Učesnici Korisnik



lozinka);

2. Postoj bar 1 zapis(automobil).

Osnovni scenario 1. Korisnik je autorizovan;

2. Korisnik bira zapis(automobil) za

detaljno prikazivanje;

3. Prikaz zapisa.


7

Izuzeci Korisnik nije uneo tačne podatke za

autentifikaciju;

Ne postoj zapis(automobil);


Rezultat Prikaz zapisa(automobila)

Tabela 5(Prikaz Use case-a za prikaz zapisa)


8

3. Primer/studija slučaja primene izabrane teme

Definisan je dijagram slučaja korišćenja(Use case) i pomoćne tabela(koje prikazuju detaljnije

funkcije). Potrebno je napraviti dijagram arhitekture/infrastrukture, model baze podataka.

3.1. Dijagrami web aplikacije Dijagram arhitekture omogućava prikaz komponenti i njihovih međusobnih veza. Ukratko možemo

videti strukturu i organizaciju web aplikacije.

Sama web aplikacija je bazirana na “3 layer” arhitekturi, na Klijent-Server arhitekturi i na

jednostavnom MVC-u .

3 layer arhitektura:

o U prvom sloju postoj prezentacija, tj. HTML stranica sa CSS-om i JS-om;

o U drugom sloju postoj logika, tj. Python skript kodovi koji izvršavaju određene

operacije;

o U trećem sloju postoje podaci(data), tj. baza podataka koja čuva određene podatke

na neodređeno vreme.

Klijent-Server arhitektura:

o Klijent(korisnik) komunicira sa serverom(računar gde se izvršava web aplikacija)

pomoću HTTPS protokola.

MVC arhitektura:

o Model: python datoteka u kojoj se nalaze klase Korisnik i Automobil. Ove klase su u

relaciji sa modelom baze podataka;

o View: prikazivanje podataka/informacija korisniku(kroz html stranica);

o Controller: omogućava izvršavanje korisničkih zahteva i komunicira sa Model-om i

View-om.


9

Slika 2(Prikaz osnovne arhitekture web aplikacije CarApp)

Konceptualni dijagram baze podataka služi da prikaže strukturu baze podataka.

Slika 3(Prikaz kon. Dijagrama baze podataka)


10

Logički model baze podataka služi za prikazivanje detaljnije strukture baze podataka.

Slika 4(Prikaz logičkog modela baze podataka)

Dijagram infrastrukture služi za prikazivanje komponenti(računari,serveri,ruteri i sl.) i njihovih

međusobnih veza, ali na nivou infrastrukture.

Slika 5(Prikaz dijagram inf.)


11

3.1.1. Dijagram arhitekture Dijagram arhitekture aplikacije možete pogledati na slici 2. Dijagram prikazuje sledeće komponente i

elemente:

CarApp aplikacija:

o Komponenta predstavlja samu web aplikaciju.

Prijava:

o Komponenta predstavlja funkciju web aplikacije, omogućava korisniku unos

podataka za autentifikaciju(username i lozinka).

Unos automobila:

o Komponenta predstavlja funkciju web aplikacije, omogućava korisniku unos novog

zapisa.

Ažuriranje automobila:

o Komponenta predstavlja funkcije web aplikacije, omogućava autorizovanom

korisniku ažuriranje postojećih podataka.

Brisnaje automobila:

o Komponenta predstavlja funkciju web aplikacije, omogućava autorizovanom

korisniku brisanje postojećih zapisa(automobila).

Pregled automobila:

o Komponenta predstavlja funkciju web aplikacije, omogućava pregled automobila.

Lista automobila:

o Komponenta predstavlja funkciju web aplikacije, omogućava pregled liste svih

unetih automobila.

SqlLite3:

o Model baze podataka u python-u.

Car.db:

o Db datoteka(fajl) u kojoj se nalazi: tabele, zapisi i sl.

prijavaForma:

o Predstavlja formu za unos korisničkih podataka(korisničko ime i lozinka).

automobilForma:

o Predstavlja formu za unos podataka u vezi automobila.

3.1.2. Modeli baze podataka

Modeli baze podataka služe da prikažu strukturu, organizaciju, granice same baze podataka.

Kon. model. baze podataka možete pogledati na slici 3.

Modeli prikazuju dve tabele, Korisnik i Automobil kao i relaciju između njih(one-many). Logički

model prikazuje malo detaljniju strukturu(slika 4).

3.1.3 Dijagram infrastrukture Dijagram infrastrukture služi za prikazivanje komponenti, elemenata i veza između njih, na nivou cele

infra. Dijagram možete videti na slici 5.


12

Server:

o Fizički server na kome se nalazi ESXi.

DNS1:

o Fizički server sa DNS uslugom.

Svic1:

o Svič - mrežni uređaj.

Firewall:

o Fizički server sa Firewall-om i definisanim pravilima.

Ruter1:

o Ruter - mrežni uređaj.

Network1:

o Link ka “izlasku” na internet.

Ubuntu Server:

o VM sa OS-om: Ubuntu Server.

Flask WSGI:

o “Web/App server” za Flask web aplikaciju

Sqlite3:

o Model baze podataka za python

Cars.db:

o Datoteka .db

CarApp:

o Aplikacija

3.2. Tehnologije i alati za razvoj web aplikacije Tehnologije koje se koriste za razvoj web aplikacije su sledeće:

Python 3 (skriptning jezik, logika aplikacije);

Flask (radni okvir za web aplikaciju);

SqlLite3 (model baze podataka);

Bootstrap;

Virtualno okruženje (okruženje za razvoj web aplikacije);

VS Code (IDE za razvoj web aplikacije);

PowerDesign (Kreiranje UML dijagrama i modela);

Microsoft Office Word Web (dokumentacija).

Ubuntu Server (OS za izvršavanje web aplikacije);

3.3. Testiranje(Šta) Kada se web aplikacija završi, treba odraditi testiranje aplikacije, pre stavljanja u produkciju. Neki

testovi koji će se raditi:

Testiranje funkcionalnosti web aplikacije (da li sve funkcioniše kako treba i kako je

zahtevano);

Responsive (da li je web aplikacija pregledna na većinu uređaja, tj. desktop računari sa 4k, 2k

, FHD, HD rezolucijama, laptop uređaji, mobilni telefoni i tableti.);

Testiranje stresa i opterećenja (koji su limiti aplikacije, odziv, pouzdanost i stabilnost);


13

Testiranje bezbednosti i sigurnosti (pentesting. tj. Provera zaštite od XSS-a, SQL injection-a,

CSRF, Mitm-a i sl.).

3.4. Struktura web aplikacije(datoteke) Struktura datoteke web aplikacije predstavlja organizaciju i podelu foldera i datoteka, bitno je imati

dobru i što jednostavniju strukturu zbog lakšeg razumevanje, čitanja i održavanja aplikacije od strane

programera. Što je aplikacija veća i ima više mogućnosti, to je struktura složenija i teža za

razumevanje.

Struktura CarApp-a:

Main(folder)

o templates(folder)

automobil.html

automobili.html

index.html

layout.html

unos.html

o __init__.py

o forme.py

o models.py

o routes.py

o run.py

o cars.db

Main folder je glavni folder za CarApp web aplikaciju i unutar njega se nalaze ostali folderi i

datoteke.

templates je podfolder(nalazi se unutar Main foldera), unutar njega se nalaze .html datoteke.

automobil.html je datoteka u kojoj se nalaze HTML tagovi i Jinja notacije. Ova html stranica

prikazuje detaljne informacije/podatke o izabranom automobilu i navbar.

automobili.html je datoteka u kojoj se nalaze HTML tagovi i Jinja notacije. Ova html stranica

prikazuje navigaciju(nav-bar) i listu svih unetih automobila.

index.html je datoteka u kojoj se nalaze HTML tagovi i Jinja notacije. Ova html stranica prikazuje

login formu.

layout.html je datoteka u kojoj se nalaze HTML tagovi i Jinja notacije(naravno...). Ova html stranica

je “layout” za ostale .html stranice, ovo može uprostiti razvoj i održavanje .html stranica. Ovde je

ubačen k0d bootstrap-a, i zbog toga svaka .html stranica poseduje bootstrap.

unos.html je datoteka koja omogućava unos podataka o automobilu(kreiranje novog ili ažuriranje

postojećeg).

__init__.py je python datoteka u kojoj se nalazi python kod za inicializaciju Flask aplikacije, baze

podataka, bcrypt-a i login_manager modela. Takođe poseduje i razne potrebne import-e klasa i

modela(Flask, SQLAlchemy, Bcrypt, LoginManager, routes).


14

forme.py je python datoteka u kojoj se nalazi python kod i klase LoginForm(nasleđuje FlaskForm) i

AutomobilForm(nasleđuje FlaskForm). Takođe poseduje i razne potrebne import-e za flask_wtf i

wtforms... Klasa LoginForma poseduje atribute: username i dodat mu je StringField, password i

dodat mu je PasswordField, remember i dodat mu je BooleanField i submit i dodat mu je

SubmitField. Klasa AutomobilForm poseduje listu TIP_VOZILA, TIP_VUCE, TIP_GORIVA sa “tuples” i

nekoliko dodatnih atributa...

models.py je python datoteka u kojoj se nalazi python kod i klase Korisnik koji nasleđuje db.model i

UserMixin i Automobil koji nasleđuje db.model. Import-i za main, flask_login...

routes.py je python datoteka u kojoj se nalazi python kod, dekoratori app.route, login_required,

import-i i sl.

run.py import-uje app iz main-a.

cars.db datoteka baze podataka.

Slika 6.1 (automobil.html)


15



16



17

Slika 7.1 (automobili.html)


18

Slika 7.2 (automobili.html)


19

Slika 8 (index.html)


20

Slika 9 (layout.html)


21

Slika 10.1 (unos.html)


22



23



24



25


3.5. GUI - Grafički korisnički interfejs Web aplikacija CarApp poseduje veoma jednostavan i lak GUI(nema nepotrebnih elemenata, nema

previše boja, nema animacija i sl.).


26

Slika 11 (login stranica, tj. index.html)

Slika 12 (lista automobila, tj. automobili.html)

Slika 13.1 (unos novog automobila, tj. unos.html)


27

Slika 13.2 (unos novog automobila)

Slika 14 (prikaz odabranog automobila, tj. automobil.html)

Slika 15 (prikaz ažuriranja)


28

Slika 16 (prikaz upozorenja za brisanje)

3.6. Testiranje Web Aplikacije Testiranje funkcionalnosti Web aplikacije je prošlo veoma dobro, sve funkcije poput unosa novog

automobila, ažuriranje post. automobila, brisanje automobila, detaljniji pregled automobila,

izlistavanje automobila, prijavljivanje i odjavljivanje korisnika rade ispravno i nema bagova.

Testiranje responsive dizajna je prošlo veoma dobro, dobra većina uređaja(pametni telefoni, tableti,

laptop-ovi, desktop računari i sl.) podržava web aplikaciju(pregledna je)

Slike testa:

Slika 17 (prikaz Liste automobila)


29

Slika 18 (prikaz Automobila)

Slika 19 (prikaz Ažuriranja)


30

Slika 20(prikaz unosa novog automobila, Iphone 6)

Slika 21 (prikaz određenog automobila, Iphone 6)


31

Testiranje stabilnosti je prošlo dobro, aplikacija se izvršavala na VM sa Ubuntu Server 20.4 OS-om.

Procesor je AMD Ryzen R5 1600x (2 jezgra), 4GB RAM-a, VHD od 30GB (na SSD-u), 100Mb/20Mb/s

brzine interneta.

Web aplikacija može podržati više od 500 korisnika/zahteva u istom vremenu.

Testiranje bezbednosti i sigurnosti je prošlo veoma dobro, web aplikacija ima srednji nivo

bezbednosti i sigurnosti. Web aplikacija koristi heširanje lozinki(bcrypt), poseduje secret key. Da bi se

izvršavale operacije brisanja i ažuriranja postojećih automobila, korisnik mora biti prijavljen i

autorizovan za to(mora on biti vlasnik, tj. autor tih zapisa). Unos novog automobila može raditi

korisnik koji je uspešno prijavljen.


32

4. Zaključak

Python je veoma moćan skripting jezik, šta više, možda možemo ga tretirati i kao programski jezik, tj.

Python 3 poseduje neke od “struktura podataka” kao što su liste, rečnik, skup i sl. Takođe

omogućava i o.o. programiranje. Python poseduje veliki broj modula i radnih okvira(freamwork). I

zbog toga možemo koristiti Python u sledećim oblastima:

Desktop aplikacije;

Web aplikacije;

Data sc.;

AI;

Network programiranje itd.

Što se tiče Web aplikacije CarApp, veoma je jednostavna i laka za korišćenje, ima srednji nivo

bezbednosti, ima responsive dizajn.

Moguća unapređivanja web aplikacije:

Implementacija baze podataka poput MySQL na poseban server;

Implementacija i integracija funkcija na samu web aplikaciju za sortiranje i filtriranje(cene,

kubikaža, konjaža, marke i sl.);

Održavanje i poboljšavanje bezbednosti i sigurnosti.


33

5. Spisak literature

1) CS324 – Skriptin jezici Univerzitet Metropolitan 2020/2021 LAMS

2) SE201 – Osnovi Softverskog inž. 2019/2020 LAMS

3) https://www.youtube.com/results?search_query=flask

4) https://flask.palletsprojects.com/en/1.1.x/

5) https://stackoverflow.com/

6) https://realpython.com/tutorials/flask/

https://www.youtube.com/results?search_query=flask

https://flask.palletsprojects.com/en/1.1.x/

https://stackoverflow.com/

jesenji semestar, 2020/21 · 2021. 1. 27. · testovi koji će se raditi: testiranje...

Documents