Jesenji semestar, 2020/21 · 2021. 1. 27. · testovi koji će se raditi: Testiranje...
Transcript of 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
CS324 – Skripting jezici Mladen Simeonović– 3668
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.
CS324 – Skripting jezici Mladen Simeonović– 3668
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.
CS324 – Skripting jezici Mladen Simeonović– 3668
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.
CS324 – Skripting jezici Mladen Simeonović– 3668
6
Izuzeci Korisnik nije autorizovan/nema
dozvolu;
Ne postoj nijedan zapis(automobil);
Korisnik nije uneo validne podatke;
Baza podataka ima grešku.
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
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;
2. Korisnik bira postojeći automobil;
3. Korisnik bira opciju brisanja;
4. Zapis se briše iz baze podataka.
Izuzeci Korisnik nije autorizovan/nema
dozvolu;
Ne postoj nijedan zapis(automobil);
Baza podataka ima grešku.
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
Preduslov 1. Korisnik je uspešno uneo podatke za
autentifikaciju(korisničko ime i
lozinka);
2. Postoj bar 1 zapis(automobil).
Osnovni scenario 1. Korisnik je autorizovan;
2. Korisnik bira zapis(automobil) za
detaljno prikazivanje;
3. Prikaz zapisa.
CS324 – Skripting jezici Mladen Simeonović– 3668
7
Izuzeci Korisnik nije uneo tačne podatke za
autentifikaciju;
Ne postoj zapis(automobil);
Baza podataka ima grešku.
Rezultat Prikaz zapisa(automobila)
Tabela 5(Prikaz Use case-a za prikaz zapisa)
CS324 – Skripting jezici Mladen Simeonović– 3668
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.
CS324 – Skripting jezici Mladen Simeonović– 3668
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)
CS324 – Skripting jezici Mladen Simeonović– 3668
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.)
CS324 – Skripting jezici Mladen Simeonović– 3668
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.
CS324 – Skripting jezici Mladen Simeonović– 3668
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);
CS324 – Skripting jezici Mladen Simeonović– 3668
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).
CS324 – Skripting jezici Mladen Simeonović– 3668
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)
CS324 – Skripting jezici Mladen Simeonović– 3668
15
Slika 6.2 (automobil.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
16
Slika 6.3 (automobil.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
17
Slika 7.1 (automobili.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
18
Slika 7.2 (automobili.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
19
Slika 8 (index.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
20
Slika 9 (layout.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
21
Slika 10.1 (unos.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
22
Slika 10.2 (unos.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
23
Slika 10.3 (unos.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
24
Slika 10.4 (unos.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
25
Slika 10.5 (unos.html)
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.).
CS324 – Skripting jezici Mladen Simeonović– 3668
26
Slika 11 (login stranica, tj. index.html)
Slika 12 (lista automobila, tj. automobili.html)
Slika 13.1 (unos novog automobila, tj. unos.html)
CS324 – Skripting jezici Mladen Simeonović– 3668
27
Slika 13.2 (unos novog automobila)
Slika 14 (prikaz odabranog automobila, tj. automobil.html)
Slika 15 (prikaz ažuriranja)
CS324 – Skripting jezici Mladen Simeonović– 3668
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)
CS324 – Skripting jezici Mladen Simeonović– 3668
29
Slika 18 (prikaz Automobila)
Slika 19 (prikaz Ažuriranja)
CS324 – Skripting jezici Mladen Simeonović– 3668
30
Slika 20(prikaz unosa novog automobila, Iphone 6)
Slika 21 (prikaz određenog automobila, Iphone 6)
CS324 – Skripting jezici Mladen Simeonović– 3668
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.
CS324 – Skripting jezici Mladen Simeonović– 3668
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.
CS324 – Skripting jezici Mladen Simeonović– 3668
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/