Univerza v Ljubljani
Fakulteta za elektrotehniko
DOMEN OCEPEK
SPLETNA APLIKACIJA ZA VPOGLED V
TELEKOMUNIKACIJSKE STORITVE NAROČNIKOV
Diplomsko delo
Visokošolski strokovni študijski program prve stopnje Aplikativna elektrotehnika
Mentor: doc. dr. Urban Burnik
Ljubljana, 2021
iii
Zahvala
Zahvaljujem se svojemu fakultetnemu mentorju doc. dr. Urbanu Burniku za vložen čas in trud med nastajanjem mojega zaključnega dela. Posebno zahvalo bi namenil tudi Simonu Gajskemu, mojemu mentorju v podjetju Softnet d.o.o., ki mi je v času razvoja aplikacije nudil strokovno pomoč, predloge in komentarje. Zahvalil bi se tudi direktorju podjetja Softnet d.o.o.
Andreju Boštjančiču, ki mi je v podjetju Softnet omogočil opravljanje delovne prakse in nadaljnji razvoj projekta, ki je opisan v tem zaključnem delu.
Zahvalil bi se tudi družini, ki me podpira in spodbuja tekom celotnega študija.
v
Povzetek
V diplomskem delu je predstavljen potek razvoja spletne aplikacije od začetka pa vse do implementacije v obliki spletne storitve, ki naročnikom storitev podjetja Softnet omogoča enoten in celovit vpogled v tekočo porabo storitev tako mobilnega omrežja kot tudi storitev Centrex, SIP in Toll-free. Komunikacija aplikacije z različnimi podatkovnimi tabelami omogoča, da uporabniki v aplikaciji vidijo vsa svoja naročniška razmerja, trenutno porabo, zgodovino oziroma dnevnike porabljenih enot in lahko urejajo kontaktne informacije.
Diplomsko delo sestavljajo trije ključni deli. Na začetku je opisan razvoj čelnega dela, kjer opisujem razvoj spletne aplikacije z uporabo odprtokodnega programskega orodja Vue.js, ki temelji na Javascript ogrodju. Opisane so tudi glavne uporabljene knjižnice ter primeri rabe posameznih funkcionalnosti teh knjižnic. Med izstopajočimi knjižnicami so Bootstrap, Vue- Router, Axios, i18n, itd. Opisana je tudi uporaba paketnega upravljalnika NPM in razvojnega okolja NodeJS.
V drugem delu je opisan razvoj zalednega dela z uporabo programskega ogrodja Laravel, ki temelji na programskem jeziku PHP. Podrobneje je predstavljeno preverjanje pristnosti z uporabo ogrodja Laravel in vtičnika Laravel Sanctum. Razložen je tudi princip delovanja podatkovne baze MySQL in urejevalnika podatkovne baze MySQL Workbench.
Na koncu je prikazan tudi postopek ustvarjanja in nastavitve spletnega strežnika z uporabo virtualnega okolja VMware in operacijskega sistema CentOS Stream. Prikazana je tudi uporabnost uporabniškega vmesnika Cockpit in urejevalnika podatkovne baze PhpMyAdmin.
Opisana je tudi uporaba spletnega strežnika Apache in nastavitev požarnega zida v procesu razvoja. Predstavljen je tudi sistem GIT in njegova uporaba. Za konec je opisan postopek namestitve knjižnic, izgradnja aplikacije ter zagon in strežba z uporabo MariaDB podatkovne baze.
Ključne besede: Vue.js, Laravel, CentOS, Apache, Javascript, HTML, CSS, Bootstrap
vii
Abstract
The diploma thesis presents the development of web application development from the very beginning to the service deployment in World Wide Web, which provides subscribers of Softnet services with a unified and comprehensive insight into the current consumption of mobile network services as well as centrex, SIP trunk and tollfree services.Communication of the application with various data tables allows users to monitor all their subscriptions, current consumption, history or logs of consumed units in the application and to edit their contact information.
The diploma thesis is divided into 3 key parts. In the beginning, the development of the front end is presented, where the development of a web application using the open source software tool Vue.js, based on the Javascript framework is described. The main libraries used and examples of the use of individual functionalities of these libraries are also described.
Outstanding libraries include Bootstrap, Vue-Router, Axios, i18n, etc. The use of the NPM package manager and the NodeJS development environment is also shown.
The second part presents the development of the back end using the Laravel programming framework, which is based on the PHP programming language. The use of Laravel authentication and the Laravel Sanctum plug-in is delineated in detail. The principle of operation of the MySQL database and MySQL Workbench base editor is also described.
Finally, the process of deploying and setting up a web server using the VMware virtual environment and the CentOS Stream operating system is described. The usability of the Cockpit user interface and the PhpMyAdmin database editor is also shown. It also describes how to deploy the Apache web server and how to set up a firewall during the development process. The GIT system and its use are also depicts. Finally, the process of installing libraries, building the application, starting and serving using the MariaDB database is described.
Key word: Vue.js, Laravel, CentOS, Apache, Javascript, HTML, CSS, Bootstrap
ix
Vsebina
1 Uvod ... 1
2 Razvoj čelnega dela aplikacije ... 2
2.1 Ogrodje Vue.js ... 3
2.2 Dodajanje knjižnic v ogrodje Vue.js ... 7
2.3 Uporaba knjižnic v ogrodju Vue.js ... 8
2.4 Knjižnica Bootstrap ... 10
2.5 Koledar V-Calendar ... 11
2.6 Progresivna krožnica Vue ellipse progress ... 12
2.7 Usmerjevalnik Vue Router ... 13
2.8 Internacionalizacija in lokalizacija i18n ... 15
2.9 Odjemalec Axios ... 16
2.10 Varnostna storitev Google reCAPTCHA ... 17
3 Razvoj zalednega dela aplikacije ... 19
3.1 Programski jezik PHP ... 20
3.2 Paketni upravljalnik Composer... 20
3.3 Ogrodje Laravel ... 21
3.4 Krmilniki API ... 24
3.5 Vtičnik Laravel Sanctum ... 25
3.6 Preverjanje pristnosti uporabnikov ... 26
3.7 Vpisna stran in začasna blokada vpisa ... 28
3.8 Datotečna struktura projekta ... 30
3.9 Podatkovna baza MySQL ... 31
3.10 Upravljalnik podatkovne baze MySQL Workbench ... 31
4 Postavitev in zagon aplikacije na strežniku ... 32
4.1 Ustvarjanje novega virtualnega strežnika ... 32
4.2 Namestitev operacijskega sistema ... 32
4.3 Namestitev programskih paketov ... 33
4.4 Požarni zid ... 35
4.5 Skrbniški strežnik/grafični vmesnik Cockpit ... 36
4.6 Spletni strežnik Apache ... 38
4.7 Registracija IP-naslova na DNS-strežnik ... 40
4.8 Sistem Git ... 40
4.9 Podatkovna baza MariaDB ... 41
x
4.10 Podatkovni urejevalnik PhpMyAdmin ... 42
4.11 Izgradnja aplikacije in strežba ... 44
5 Sklep ... 46
Literatura, viri ... 47
xi
Seznam slik
Slika 1: Struktura enostranske strani ... 3
Slika 2: Arhitektura MVVM ... 4
Slika 3: Bootstrap grid system [4] ... 10
Slika 4: Izbira obdobja z uporabo V-Calendar ... 11
Slika 5: Krožnica Vue-ellipse-progress ... 12
Slika 6: Značka reCAPTCHA... 17
Slika 7: Google reCAPTCHA analiza ... 18
Slika 8: Priljubljenost ogrodji jezika PHP [8] ... 21
Slika 9: Arhitektura MVC ... 22
Slika 10: Pristnost uporabnika ni potrjena ... 27
Slika 11: Odobreno preverjanje pristnosti uporabnika ... 27
Slika 12: Opozorilo ob napačno vpisanih podatkih ... 28
Slika 13: Blokada možnosti vpisa ... 29
Slika 14: Požarni zid in odprta vrata ... 35
Slika 15: Cockpit - prikaz nadzorne plošče ... 36
Slika 16: Prikaz storitev strežnika ... 37
Slika 17: Testna stran Apache ... 39
Slika 18: Vmesnik PhpMyAdmin ... 43
Slika 19: Velikost izgrajene aplikacije ... 45
xii
xiii
Seznam uporabljenih simbolov
Okrajšava Slovenski pomen Angleški pomen
IP Internetni protokol Internet protocol
SPA Spletna aplikacija z eno glavno postavitvijo Single page application
API Vmesnik za programiranje aplikacij Application Programming Interface
HTML Jezik za označevanje nadbesedila HyperText Markup Language REST Arhitektura za izmenjavo podatkov med spletnimi
storitvami
Representational State Transfer
CSV Vrednosti, ločene z vejico Comma-separated values
JSON Objektni zapis JavaScript JavaScript Object Notation
URL Enolični krajevnik vira Uniform, resource locator
URI Naslov, ki prepozna lokacijo spletne strani na svetovni spletni mreži
Uniform resource identifier
SQL Strukturiran skriptni jezik za delo s podatkovnimi bazami
Structured query language
SMS Sistem kratkih sporočil Short Message Service
DNS Sistem domenskih imen Domain Name System
xiv
1
1 Uvod
Dandanes imamo ljudje zelo radi, da so nam informacije na dosegu rok. Uporaba informacijsko-komunikacijskih tehnologij ter uporaba programskih orodij nam omogočata, da do želenih informacij pridemo hitreje in enostavneje. Večletni neprekinjeni razvoj priljubljenih programskih jezikov, knjižnic, dobra dokumentacija tehnologij ter vsestranska uporabnost odprtokodnih projektov nam omogočajo hiter razvoj najrazličnejših aplikacij, ki pripomorejo k enostavnejšemu načinu pridobitve želenih informacij in njihovemu vizualnemu prikazu.
Poslovni in fizični uporabniki storitev Softnet d.o.o. imajo sklenjeno čedalje večje število različnih naročniških storitev. Ponudniki telekomunikacijskih storitev morajo beležiti zgodovino porabljenih enot njihovih storitev, na primer minute klicev, poslane SMS-e, porabo prenosa podatkov itd. Ti podatki se hranijo na velikih in zmogljivih podatkovnih bazah, v katerih se izvajajo različne programske skripte, ki omogočajo zaračunavanje storitev. Ta proces se imenuje »billing«. Obračunavanje telekomunikacijskih storitev je pomemben sestavni del katerega koli ponudnika komercialnih komunikacijskih storitev, ne glede na specializacijo. Na podlagi zbranih podatkov lahko ponudnik na mesečni ravni strankam izdaja račune.
V sklopu diplomske naloge sem želel razviti enovito platformo, kjer lahko naročniki in podjetja na enem mestu spremljajo vsa svoja sklenjena razmerja tako mobilnih storitev kot tudi storitev Centrex, SIP trunk in Tollfree. Poleg sklenjenih razmerij pa imajo lahko tudi vpogled v svojo trenutno porabo ter zgodovino oziroma dnevnik porabe storitev.
Pojavila se je potreba po enotnem, večjezičnem portalu, namenjenem uporabnikom naročniških storitev, ki jih nudi podjetje. Želeno je bilo tudi, da bi lahko stranke preko portala samostojno upravljale določene funkcije naročniških razmerij, kar do sedaj ni bilo mogoče.
Doslej je bil mogoč vpogled v dotične storitve za stranke le po ločenih kanalih in je bil funkcijsko omejen. V novi spletni aplikaciji bodo lahko naročniki videli svoje naročniške pakete, tekočo porabo, zgodovino klicev za izbrana obdobja in prenos zgodovine v CSV-datoteko.
Omogočene jim bodo tudi nekatere druge nove funkcije naročniških razmerij, kot so preusmeritev klicev, urejanje kontaktnih informacij, pošiljanje SMS-ov iz brskalnika itd.
V razvoj projekta sem se podal samostojno z nekaj priporočili sodelavcev, ki so mi svetovali pri izbiri programskih jezikov, nekaterih ogrodij ter primerne podatkovne baze. Diplomsko delo bom ločil na 3 dele, in sicer na razvoj čelnega dela aplikacije (ang. front end), kjer bom govoril o zasnovi uporabniškega vmesnika, na zaledni del aplikacije (ang. back end), kjer bom govoril o ozadju delovanja aplikacije, ki uporabniku ni vidno, o podatkovni bazi in računski logiki.
Nazadnje bom govoril še o namestitvi in zagonu spletne aplikacije na strežnik (ang.
deployment) ter strežbi preko javnega spleta.
2
2 Razvoj čelnega dela aplikacije
Del aplikacije ali spletnega mesta, s katerim uporabnik neposredno komunicira, se imenuje čelni del (ang. front-end). Imenujemo ga tudi stran odjemalca. Vključuje vse, kar uporabniki neposredno izkusijo: barve in sloge besedila, slike, grafe in tabele, gumbe, navigacijski meni itd.
Za razvoj programske opreme čelnega dela se uporabljajo jeziki HTML, CSS in JavaScript. V čelnem delu je zajeta struktura, zasnova, vedenje in vsebina vsega, kar se vidi na zaslonih brskalnika, ko se odprejo spletna mesta, spletne aplikacije ali mobilne aplikacije.
Glavni cilji čelnega dela aplikacije so odzivnost, prilagodljivost in zmogljivost. Razvijalec mora zagotoviti, da se spletno mesto odziva in prilagaja, na primer da se pravilno prikazuje v napravah vseh velikosti, noben del spletnega mesta se ne sme obnašati neobičajno ne glede na velikost zaslona.
Pri razvoju čelnega dela oziroma uporabniškega vmesnika sem se odločil za strukturo enostranskih aplikacij SPA (ang. single page application), kar pomeni, da bo stran sestavljena iz enotnega razporeda in se bo ob prehodu na drugo stran spremenil le glavni oziroma vsebinski del strani. V navedenem primeru se bo zgornji del strani oziroma navigacijska vrstica prenesla le ob prvem vstopu na stran in se ob prehodu na drugo stran ne bo ponovno prenašala. Prav tako bo ostala naložena tudi navigacijska vrstica pod glavno navigacijsko vrstico ter noga strani. S tem postopkom zmanjšamo velikost prenesenih podatkov ter izboljšamo uporabniško izkušnjo in hitrost aplikacije.
Spodnja slika prikazuje, kateri deli aplikacije so statični in se ob prehodu na drugo stran ne nalagajo ponovno ter kateri so dinamični in se ob prehodu na drugo stran prenesejo s strežnika.
3 Slika 1: Struktura enostranske strani
V projekt sem uvedel tudi animacijo prehoda. Ker je aplikacija narejena po principu SPA, sem animacijo uvedel tako, da se ob prehodu na drugo stran izvede animacija, tako da stara stran pobledi, nato pa se pojavi nova. Ker je aplikacija SPA, pri tem prehodu med stranmi ne vidimo običajnega nalaganja strani, ampak le prehod. Določitev prehoda lahko spreminjamo pod oznako <transition>:
1. <template>
2. <div id="app">
3. <transition name="fade" mode="out-in">
4. <router-view></router-view>
5. </transition>
6. </div>
7. </template>
2.1 Ogrodje Vue.js
Za razvoj čelnega dela aplikacije sem uporabil odprtokodni model Vue.js, ki je odličen za razvijanje SPA. Vue.js je odprtokodni progresivni okvir za gradnjo uporabniških vmesnikov in interaktivnih spletnih vmesnikov. Ustvaril ga je Googlov razvijalec Evan You. Prva verzija je izšla februarja leta 2014 in se še vedno aktivno razvija. Zadnja stabilna verzija je izšla 7. junija 2021. Večja podjetja, katerih spletne aplikacije temeljijo na Vue.js-strukturi, so Adobe, Grammarly, Alibaba, Gitlab …
Vue.js uporablja za razvoj uporabniških vmesnikov in enostranskih aplikacij JavaScript programski jezik. Okvir Vue.js deluje na arhitekturnem vzorcu model-pogled-pogledModel (MVVM), ki olajša ločevanje razvoja grafičnega vmesnika v označevalnem jeziku (HTML) od razvojne zaledne logike, tako da ta ni odvisna od specifičnega modela platforme. Okvir
4
povezuje pogled in model z dvosmerno vezavo podatkov. MVVM-model je pretvornik vrednosti, kar pomeni, da je pogledModel odgovoren za pretvorbo podatkovnih objektov iz modela na način, da je podatkovne objekte enostavno upravljati in prikazovati.
V modelu se nahajajo podatki, spremenljivke in informacije, s katerimi upravlja aplikacija.
Pogled predstavlja najbolj sprednji del arhitekture, namenjen je vizualni plati aplikacije, predstavitvi in interakciji podatkov z uporabnikom. Uporabnikom omogoča aktivacijo funkcij, vnos podatkov, pritiske na gumbe ..., s čimer spreminja stanja podatkov v modelu.
PogledModel je v MVVM-arhitekturi ključnega pomena, saj nam omogoča ločitev pogleda od modela. Deluje kot posrednik, tako da pogledu in modelu ni treba neposredno komunicirati.
Posebnost MVVM-arhitekture je ta, da pogled deluje aktivno, kar pomeni, da se zaveda dogajanja v modelu in pogledModelu. Podatki na modelu se preko pogledModela vežejo na pogled dvosmerno, kar omogoča, da se ob spremembi modela sprememba takoj pozna tudi na pogledu.
Slika 2: Arhitektura MVVM
Uporaba MVVM nam omogoča enostavno povezavo vmesnikov aplikacijskega programiranja (API) s komponentami vizualnega vmesnika. Glavni cilj uporabe je, da je naša koda čim bolj pregledna in fleksibilna. Uporabljamo lahko osnovno kodo ali pa jo lahko kombiniramo z uporabo knjižnic tretjih oseb. [1]
Prav tako je Vue.js primeren za razvoj storitev brez zaledja, kot je na primer Firebase. Vue.js API-ji so močno zaznamovani od ogrodij, kot so AngularJS, Ractive.js in KnockoutJS. Kljub podobnostim ostalim knjižnicam Vue.js ponuja pravšnje ravnovesje med preprostostjo in funkcionalnostjo. Arhitektura se osredotoča na deklarativno uporabljanje in sestavo komponent.
Nekatere bolj uporabne in napredne funkcije in knjižnice, ki nam omogočajo dinamično usmerjanje, upravljanje stanj in ki nam nudijo orodja za gradnjo in razhroščevanje, so na voljo v uradno vzdrževanih podpornih knjižnicah in paketih.
{{ storitev }}
Pogled
Centrex
Pogledmodel
Model data = {
storitev: "centrex"
}
5 Spodnji primer kode prikazuje osnovno strukturo komponent Vue.js-a:
1. <template>
2. <div>
3. <p>{{ podatek }}</p>
4. </div>
5. </template>
6.
7. <script>
8. export default { 9. data() {
10. return {
11. podatek: 'Danes je lep dan.' 12. },
13. } 14. },
15. watch: {
16. stevilo(StaraVrednost, NovaVrednost) {
17. console.log(`Vrednost se je povečala iz ${StaraVrednost} na ${NovaVrednost}.`);
18. } 19. }, 20. }
21. methods: { 22. onClick() {
23. this.stevilo += 1;
24. } 25. }, 26. computed: {
27. SteviloZnakov() {
28. return this.newItem.lenght;
29. }
30. mounted() {
31. this.stevilo = this.initialCount;
32. } 33. });
34. </script>
35.
36. <style scoped>
37. h2 {
38. font-family: inherit;
39. }
40. </style>
Vsako komponento lahko ločimo na 3 pregledne glavne dele: <template>, <script> in <style>.
V prvem delu (<template>) je vstavljena osnovna HTML-koda. Posebnost Vue.js sta dvojna znaka {{ in }}, znotraj katerih lahko povežemo spremenljivke iz odstavka <script>, katere želimo prikazati uporabniku.
Pod oznako <script> definiramo podatkovne spremenljivke, vso računsko logiko in povezave z zalednim delom aplikacije. Ta del kode lahko ločimo na nekaj predhodno definiranih delov, kot so return{data()}, computed:, methods:, watch: in mounted().
V delu data() definiramo spremenljivke in njihove začetne vrednosti.
V delu computed: lahko definiramo logiko, ki se izvaja v realnem času. Na primer, ko uporabnik vnaša besedilo, lahko aplikacija sočasno računa dolžino vnesenega besedila in uporabniku v realnem času sporoča, koliko znakov ima njegovo besedilo.
6
Pod oznako methods: spadajo vse funkcije, ki jih lahko uporabljamo in kličemo iz katerega koli dela aplikacije.
Ko se aplikacija prvič zažene, se zaženejo tudi vse funkcije znotraj dela mounted(), ki se izvedejo, preden uporabnik vidi prikazano stran.
Metode watch: pa so le mehanizmi, ki zaznajo spremembe lastnosti oziroma spremembe podatkov in nam omogočajo, da ob spremembi izvedejo želeno logiko.
V tretjem glavnem delu pa najdemo oznako <style>, v kateri definiramo vse spremenljivke v povezavi s kaskadnimi slogovnimi predlogami (CSS). Oznaki <style> lahko dodamo še oznako scoped, ki pa definiran CSS omeji le na komponento, v kateri se nahaja. Če želimo na primer v nogi strani spremeniti barvo pisave, se bo ta lastnost upoštevala le v nogi, ki se nahaja v ločeni komponenti oziroma datoteki in ne na celotni aplikaciji.
Kot vidimo, je struktura Vue.js zelo razčlenjena, pregledna in enostavna za uporabo. Njena priljubljenost in število knjižnic iz dneva v dan raseta, kar me je spodbudilo, da sem se v navedenem projektu odločil za uporabo tega ogrodja. Prepričala me je tudi preprostost in dobra dokumentacija orodja, kar mi je omogočilo hitro spoznavanje te tehnologije.
7
2.2 Dodajanje knjižnic v ogrodje Vue.js
Knjižnice v programskih jezikih so zbirke vnaprej napisane kode, ki jih uporabniki lahko uporabijo za optimizacijo nalog. Je zbirka delov programa, ki programerju prihranijo čas, da pri pisanju programske opreme ne razvija ponovno že obstoječe kode.
S pomočjo paketnega upravljalnika NPM sem v svoj projekt dodal še nekaj zelo priročnih in uporabnih knjižnic, ki olajšajo in pohitrijo postopke nekaterih funkcij aplikacije Vue.js. Vse uporabljene knjižnice in njihove verzije lahko najdemo v datoteki package.json. Če želimo določeno knjižnico dodati ali jo odstraniti, lahko to storimo na več načinov. Knjižnice lahko dodamo tako, da v terminal NPM vnesemo ukaz za uvoz izbrane knjižnice, ali pa tako, da v datoteki package.json izbrišemo ali dodamo določeno vrstico, ki določa knjižnico in njeno verzijo.
Med pomembnejše knjižnice, ki so uporabljene v projektu uporabljene, spadajo: Bootstrap, i18n, JQuery, Vue, Vue-Router, Axios in Laravel mix.
Knjižnice bom v nadaljevanju kratko opisal ter podal primer uporabe v navedenem projektu.
Primer ukaza za uvoz knjižnice »i18n« [2]:
1. npm install vue-i18n
Vse dodane knjižnice lahko najdemo v datoteki package.json:
1. {"dependencies": {
2. "@vue/cli-shared-utils": "^4.5.13", 3. "bootstrap-vue": "^2.21.2",
4. "chart.js": "^2.9.4", 5. "jquery": "^3.6.0", 6. "v-calendar": "^2.3.2", 7. "vue": "^2.6.14", 8. "vue-axios": "^3.2.5", 9. "vue-cookie-law": "^1.13.3", 10. "vue-ellipse-progress": "^1.3.0", 11. "vue-i18n": "^8.25.0",
12. "vue-material": "^1.0.0-beta-15", 13. "vue-pagination-2": "^3.0.91", 14. "vue-router": "^3.5.2"
15. },"devDependencies": {
16. "@types/vuelidate": "^0.7.15", 17. "axios": "^0.21",
18. "bootstrap": "^4.6.0", 19. "cross-env": "^7.0.3", 20. "laravel-mix": "^6.0.27", 21. "lodash": "^4.17.19", 22. "postcss": "^8.3.6",
23. "resolve-url-loader": "^3.1.4", 24. "vue-cli-plugin-i18n": "^2.1.2", 25. "vue-loader": "^15.9.7",
26. "vue-template-compiler": "^2.6.14"}
V primeru, da projekt premikamo na drug računalnik, strežnik ali pa če želimo določene knjižnice ponovno namestiti, uporabimo ukaz »npm install«, ki s spleta prenese in namesti vse knjižnice, ki so določene v datoteki package.json.
8
2.3 Uporaba knjižnic v ogrodju Vue.js
Za uporabo knjižnic ni dovolj le, da v ogrodje uvozimo in namestimo knjižnico, ampak je njeno uporabo treba tudi definirati. Določeno knjižnico lahko uporabimo globalno, le na določeni strani ali pa le v določeni komponenti strani. Za globalno uporabo moramo v datoteki /resources/App.js: vnesti določen del kode.
Za knjižnico Vue-router, ki jo želimo uporabiti globalno, napišemo:
1. import VueRouter from 'vue-router' 2. Vue.use(VueRouter)
Za knjižnico Vue-Material, ki jo želimo uporabiti le v določenih komponentah, lahko le-to uvozimo le v določeni komponenti in s tem ne smetimo drugih strani ali komponent. Tako se izognemo zelo motečim in nadležnim spremembam pri oblikovanju oziroma kodi CSS. Za uvoz knjižnic le v določeno komponento se premaknemo v želeno komponento (na primer MobilniPregled.vue) in v njej v odstavku <script></script> definiramo izbrano knjižnico.
Primer za uvoz knjižnice VueEllipseProgress v komponenti MobilniPregled.vue:
1. <script>
2. import VueEllipseProgress from 'vue-ellipse-progress';
3. Vue.use(VueEllipseProgress);
4. </script>
Obstajata še dve pomembni možnosti pri uvažanju knjižnic. Če ima določena knjižnica veliko različnih komponent, lahko uvozimo le točno določene komponente knjižnice, ki jih potrebujemo.
Primer za uvoz celotne knjižnice Vue Material, ki zajema izredno veliko komponent:
1. <script>
2. import VueMaterial from 'vue-material'
3. import 'vue-material/dist/vue-material.min.css' 4. import 'vue-material/dist/theme/default.css' 5. Vue.use(VueMaterial)
6. </script>
9 V primeru, da bi potrebovali le določene komponente, lahko to storimo tako, da uvozimo le izbrane:
1. <script>
2. import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components' 3. import 'vue-material/dist/vue-material.min.css'
4. import 'vue-material/dist/theme/default.css' 5. Vue.use(MdButton)
6. Vue.use(MdContent) 7. Vue.use(MdTabs) 8. </script>
[3]
V tem primeru sem uvozil le 3 komponente knjižnice.
10
2.4 Knjižnica Bootstrap
Velik del izgleda aplikacije temelji na knjižnici Bootstrap. Ta se uporablja za oblikovanje dela kode HTML. Knjižnica vsebuje vrsto stilov za oblikovanje elementov HTML v spletni aplikaciji.
Ena izmed večjih prednosti uporabe Bootstrap knjižnice pri razvoju aplikacije je, da omogoča oblikovanje strani za različne širine zaslonov. Kodo lahko pišemo in razvijamo na računalniku, če pa spletno stran odpremo na telefonu, se stran v večini primerov avtomatsko prilagodi velikosti zaslona telefona oziroma drugih naprav. Za pravilno delovanje je potrebno nekoliko prilagoditi kodo, vendar veliko manj, kot če bi morali aplikacijo razvijati za vsako velikost zaslona posebej.
Knjižnica Bootstrap nam omogoča dve bolj izrazito uporabni lastnosti.
Prva se imenuje »Bootstrap grid system«, s katero lahko spletno vsebino oblikujemo v stolpce, ki se prilagajajo širini zaslona. V kodi uporabljamo razred »col« (class='col'). Če poenostavim, zaslon razdelimo na 12 enakih stolpcev, nato pa določeni vsebini dodelimo, koliko stolpcev v širino naj zavzame. V mojem primeru sem za levi navigacijski meni izbral razred velikosti »col- 3« in za vsebino razred velikosti »col-9« in tako razporedil vsebino po strani.
Slika 3: Bootstrap grid system [4]
Druga pomembna lastnost Bootstrap-a je njegovo privzeto oblikovanje elementov HTML.
Knjižnica nam olajša oblikovanje posameznih elementov na strani, kot so na primer barve črk in ozadja, gumbi, tabele, ...
Primer uporabe oblikovanja Bootstrap:
1. <h4 class="text-center text-warning">Opozorilo</h4>
Ta vrstica kode bo na zaslonu izpisala besedo »Opozorilo«, ga obarvala v opozorilno rdečo barvo ter ga postavila na sredino vrstice. V tej vrstici sta uporabljena dva razreda knjižnice Bootstrap. To je »text-center« in »text-warning«.
11
2.5 Koledar V-Calendar
Na strani, kjer stranka izbere želeno obdobje, za katero želi izpis zgodovine klicev, sem se odločil za uporabo knjižnice V-Calendar, ki ima zelo lične in dobro dokumentirane koledarje in polja za izbor datumov. V spodnji kodi sta na začetku najprej uvoženi 2 komponenti knjižnice, in sicer Calendar in DatePicker, nato pa definiran aktualni datum ter izračunan mesec, ki je bil pred 3 meseci od današnjega, saj želimo, da stranka vidi zgodovino le za 3 mesece nazaj in ne več.
1. <script>
2. import {Calendar, DatePicker} from 'v-calendar';
3. export default { 4. data() {
5. return { 6. FullDate: "",
7. MinMonth: "", 8. };},
9. mounted() {
10. const today = new Date();
11. const date = today.getFullYear() + '-' + "0" + (today.getMonth() + 1);
12. const MinMonth = today.getFullYear() + '-' + "0" + (today.getMonth() - 2);
13. const dateTime = date;
14. this.FullDate = dateTime;
15. this.MinMonth = MinMonth;
16. }}
17. </script>
Na spodnji sliki je prikazano okno za izbiro obdobja datuma. Stranka lahko izbere cel mesec ali le določene dneve ali obdobje znotraj enega meseca. Datumov v prihodnosti stranka ne more izbrati.
Slika 4: Izbira obdobja z uporabo V-Calendar
12
2.6 Progresivna krožnica Vue ellipse progress
Za prikaz trenutne porabe sem se odločil za izbiro animiranih progresivnih krožnic, ki se prilagodijo glede na količino porabljenih podatkov. Knjižnica ima ogromno funkcij in omogoča veliko oblik, barv, velikosti in funkcionalnosti, kot so animacija pri pridobivanju podatkov, pri nalaganju strani, barvna progresivna animacija glede na odstotek porabljenih podatkov itd.
V spodnji kodi je primer, kjer prikažem trenutno porabo uporabnikovih prenesenih podatkov v Sloveniji in območju EU in EEA. Stran prejme vrednosti preko klica API iz zalednega dela aplikacije. Ob nalaganju strani in v času prejemanja podatkov klica API se na krožnici izvaja animacija, ki ob prejetju podatkov preide na drugo animacijo, ki na koncu pokaže točno vrednost spremenljivke.
1. <div class="col-lg-4 col-sm-6 text-center">
2. <vue-ellipse-progress :progress="UsedDataSloEUEEApercent" :legend="false"
3. animation="default 1000 900" :loading="loading" dot="15 #3f79ff">
4. <p slot="legend-caption">{{ UsedDataSloEUEEA }} / {{ DataSloEUEEA }}GB</p>
5. </vue-ellipse-progress>
6. </div>
Slika 5: Krožnica Vue-ellipse-progress
13
2.7 Usmerjevalnik Vue Router
Vue Router je uradni usmerjevalnik ogrodja Vue.js. Usmerjevalnik se globoko prepleta z jedrom ogrodja Vue.js, tako da je izdelava aplikacij z eno stranjo (SPA) enostavnejša. Osnovne funkcionalnosti, ki jih Vue Router omogoča, so:
- vgnezdena preslikava poti/pogleda,
- modularna konfiguracija usmerjevalnika na osnovi komponent, - parametri poti URI, poizvedba, nadomestni znaki,
- vizualni učinki prehoda med stranmi, ki jih poganja Vue.js-ov sistem prehoda, - drobno navigacijsko krmiljenje,
- povezave s samodejnimi aktivnimi razredi CSS,
- način zgodovine HTML5 ali način razpršitve s samodejno vrnitvijo v IE9, - prilagodljivo vedenje drsenja. [5]
Vue Router ponuja vmesnik za spreminjanje prikaza na strani glede na trenutno pot URL-ja.
Poleg tega uporaba usmerjevalnika na čelni strani aplikacije omogoča namerni vizualni učinek prehoda med potmi brskalnika, ko se pojavijo določeni dogodki brskalnika, na primer kliki na povezavo do druge strani. Vue v osnovi ne vsebuje vgrajenega usmerjevalnika. Toda odprtokodni paket Vue Router ponuja posodabljanje URL-ja aplikacije, podpira gumb za nazaj (navigacija po zgodovini) in ponastavitev gesla za e-pošto ali povezave za preverjanje e-pošte s parametri URL-ja za preverjanje pristnosti. Z dodajanjem Vue-usmerjevalnika v mešanico uporabljenih tehnologij je treba uporabljene komponente le preslikati na specifične poti, ki jim pripadajo, nadrejene/korenske poti pa morajo navesti, kje naj se podrejene komponente uporabljajo.
V svoji kodi imam v datoteki /routes/routes.js definirano, da v primeru, da uporabnik pride na URL-povezavo brez podrejenih poti, kot je na primer www.mojastran.si, Vue Router uporabnika preusmeri na www.mojastran.si/en/ in pri tem določi uporabljeni jezik na strani.
O večjezičnosti aplikacije bom govoril v nadaljevanju. Primer kode za preusmeritev uporabnika:
1. export const routes = [ 2. {
3. path: '/', 4. redirect: '/en', 5. },
6. ]
Ostale komponente pa povežemo s točno določeno potjo URL in povezavam določimo tudi ime, na katerega se lahko kasneje sklicujemo. Vsako komponento in njeno datotečno pot je treba v datoteki /routes/routes.js predhodno definirati.
14
1. const Login = () => import('./components/other/Login.vue' /* webpackChunkName: "reso- urce/js/components/other/Login" */ )
2.
3. export const routes = [ 4. {
5. name: 'Login', 6. path: '/login',
7. component: Login 8. },
9. ]
Če uporabnik želi priti na URL-povezavo, ki ni definirana oziroma ne obstaja, ga preusmerimo na komponento »Not found 404«, kar naredimo s sledečo kodo:
1. const NotFound = () => import('./components/other/NotFound.vue' /* webpackChunkName: "re- source/js/components/other/NotFound" */ )
2.
3. export const routes = [ 4. {
5. name: 'NotFound', 6. path: '*',
7. component: NotFound 8. }
9. ]
Vue Router nam omogoča tudi uporabo URL-parametrov ter uporabo opcijskih parametrov. V aplikaciji sem na nekaj primerih uporabil omenjeno metodo. Primer uporabe parametrov je, ko sem pri izpisu zgodovine klicev želel, da se stranki izpišejo klici glede na uporabnikovo telefonsko številko, glede na začetni in končni datum želenega izpisa in smer klica oziroma opcije storitev. V spodnjem primeru Vue Routerja vidimo, da so vse te spremenljivke definirane kot URL-parametri.
1. const MobileHistory = () => import('./components/category/MobileHistory.vue' /* web- packChunkName: "resource/js/components/category/MobileHistory" */ )
2.
3. export const routes = [ 4. {
5. name: 'MobileHistory',
6. path: '/mobile-overview/:number/history/:SelectedMonth/:start?/:end?', 7. component: MobileHistory
8. }, 9. ]
Na parametre poti se lahko na čelni strani sklicujem preko spremenljivk, kot je na primer
»this.$route.params.start«. Nekatere spremenljivke so opcijske in imajo na koncu imena znak
»?«, kot na primer »:start?«. V zalednem delu pa do URL-spremenljivk dostopam preko posebno definiranih URL-poti, o katerih bom govoril v nadaljevanju v poglavju o zalednem delu aplikacije.
15
2.8 Internacionalizacija in lokalizacija i18n
V aplikacijo sem želel dodati tudi večjezično podporo, saj bodo uporabniki strani dostopali iz različnih držav sveta. V ta namen sem v svoj projekt dodal Vue-i18n vtičnik za aplikacije Vue.js.
Vtičnik prilagodi prevod strani glede na parameter v povezavi URL. Vsak URL ima na začetku parameter »/:lang« (npr. www.mojastran.si/:lang), ki določa želeni jezik strani. Če ta ni določen, vtičnik najprej pogleda, kateri jezik ima uporabnik izbran na svojem brskalniku, in preveri, če je v aplikaciji ta jezik na voljo. Če le-ta ni na voljo, aplikacija avtomatsko določi jezik na angleščino tako, da spremeni parameter /:lang/ na /en/. Uporabnik ima na vrhu strani na voljo izbirni meni, v katerem lahko izbira med več jeziki. V primeru, da uporabnik spremeni jezik, se stran prevede v trenutku, ne da bi pri tem potekala komunikacija s strežnikom ali da bi se stran ponovno nalagala. Prevodi besed in besedil so shranjeni v datotekah JSON, ki jih najdemo v mapi /src/locales.
└───src
├───locales │ ├───en.json │ ├───si.json │ ├───hr.json │ ├───ch.json └───i18n.json
V vsaki datoteki so definirane istoimenske spremenljivke, njihove vrednosti pa so različne glede na jezik prevoda.
Spodnji primer prikazuje primer za besedo »vpis« v angleščini in slovenščini.
/src/locales/si.json:
1. {
2. "si": { 3. "Login": "Vpis", 4. }
5. }
/src/locales/en.json:
1. {
2. "en": { 3. "Login": "Login", 4. }
5. }
Vse prevode uporabnik prejme ob prvem prenosu strani in se hranijo v lokalni shrambi brskalnika. Prenos vseh jezikov se zgodi le ob prvem vstopu na katerokoli stran, saj je aplikacija dinamični oziroma aplikacija z eno stranjo SPA in se ob prehodih na druge strani prenaša le dinamičen del strani. Če v brskalniku odpremo orodja za razvijalce, lahko v meniju »Network«
najdemo prenos »App.js« in v njem odsek, v katerem so shranjeni vsi prevodi v zapisu JSON.
16
2.9 Odjemalec Axios
V aplikacijo sem želel vgraditi vmesnike aplikacijskega programiranja API, da bi omogočil komunikacijo z zalednim delom in omogočil pridobivanje podatkov iz podatkovnih baz.
Odločil sem se za priljubljen pristop z uporabo vtičnika Axios. Axios je HTTP-odjemalec, ki temelji na obljubah. Za komunikacijo uporablja zapis v JSON-obliki. Axios uporablja arhitekturni vzorec za izmenjavo podatkov med spletnimi storitvami REST. REST je arhitektura, kjer je vsak vir predstavljen kot spletna storitev z enotnim naslovom URL. REST-arhitektura ni standardiziran protokol, ampak je vrsta dobre prakse razvijalcev in način, kako dobro izkoristiti že obstoječe standarde in standardne metode, kot so HTTP: GET, POST, DELETE itd.
V spodnjem primeru je enostaven REST API-klic, ki uporabniku vrne IP-naslov naprave, s katere dostopa do strežnika in ga na uporabnikovi strani shrani pod spremenljivko ip. Če se v komunikaciji pojavi napaka, le-to izpiše v konzoli.
1. axios.get('/api/getip') 2. .then(response.ip =>this.ip)
3. .catch(error => console.log(error));
Spremenljivka get (kot na primer axios.get, axios.post…) definira uporabljeno metodo REST API-ja. V naslednjem delu kode ('/api/getip') definiramo, na katero API-pot naj gre zahtevek.
Kaj se zgodi, ko odjemalec dobi odziv, je definirano v koraku .then(). V opisanem primeru odjemalec vzame spremenljivko »response.ip« iz odziva in jo shrani pod spremenljivko
»this.ip«. Če pride pri postopku do kakršne koli napake, se ta v koraku .catch() izpiše v konzolo.
V naslednjem primeru bom prikazal uporabo metode axios.get na nekoliko bolj kompleksen način, ki sem ga zgradil za svojo aplikacijo.
1. async PrikazMobilnihKlicev() {
2. this.axios.get(`/api/MobileOdhodni/${this.$route.params.number}&${this.$route.pa- rams.SelectedMonth}&${this.$route.params.start?}&${this.$route.params.end?}`
3. ).then(response => {
4. this.Mobile_List = response.Mobile_List 5. }).catch(error => {
6. console.log(error) 7. })
V zgornjem primeru sem oblikoval API-klic tako, da če uporabnik želi poiskati zgodovino odhodnih klicev za mobilne storitve, se v API-klicu upoštevajo še nekateri parametri URL-poti, kot so na primer telefonska številka uporabnika, izbrani mesec ter opcijski spremenljivki, ki določata začetni in končni datum izbranega obdobja. Ko želimo dostopati do parametrov v dinamični URL-poti, lahko do njih dostopamo preko spremenljivk $route.params, ki so ena izmed spremenljivk Vue Router knjižnice. Primer za dostop do spremenljivke telefonske številke v poti http://mojastran.si/en/031321321/history/mobile/2021-07/0/0:
${this.$route.params.Stevilka}, katere vrednost je v tem primeru enaka 031321321.
17
2.10 Varnostna storitev Google reCAPTCHA
Da bi navedeno aplikacijo zaščitil pred avtomatiziranimi spletnimi boti, sem v projekt dodal tudi Googlovo varnostno storitev Google reCAPTCHA. Internetni bot je programska aplikacija, ki opravlja avtomatizirane naloge prek spleta. Te naloge so običajno preproste in se ponavljajo, boti pa jih opravljajo hitreje, kot bi to lahko počel človek. Namen omenjenih botov je velikokrat zlonameren in se jih želimo znebiti z uporabo varnostnih storitev. Posebno pozornost sem posvetil kontaktni formi, ki jo boti lahko izpolnjujejo in avtomatsko pošiljajo in s tem ustvarjajo neželeno pošto (ang. SPAM).
CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) je sistem, ki loči resnične ljudi od računalniških botov. Storitev CAPTCHA ponuja izzive, ki jih računalniški boti težko izvajajo, za ljudi pa so razmeroma enostavni. Na primer prepoznavanje raztegnjenih črk ali številk ali klik na določenem področju ali izbira določenih slik iz zbirke.
V dotičen projekt sem implementiral tretjo verzijo Googlove storitve reCAPTHA. Pri tej verziji deluje storitev v ozadju in je uporabniku nevidna. Uporabnik vidi le značko, da stran uporablja storitev reCAPTCHA. Storitev opazuje uporabnikovo delovanje in ko uporabnik pošlje formo, storitev ustvari žeton, ki ga pošlje skupaj s formo. V primeru, če storitev oceni, da uporabnik ni resničen, žetona ne izda in uporabniku onemogoči pošiljanje forme. V tej verziji storitev poda tudi nivo resničnosti. Uporabnika oceni z oceno med 0 in 1. Glede na to oceno lahko ročno spremeni nivo dopustnosti.
Da bi storitev še izboljšali, jo lahko nadgradimo tako, da na strežniški strani preverimo pristnost prejetega žetona.
Aplikacija uporablja 2 predhodno ustvarjena ključa. Enega uporablja aplikacija in je uporabniku viden, drugega pa pozna le strežnik in lahko z njegovo pomočjo preveri pristnost uporabnikovega žetona. Oba ključa definiramo v datoteki .env:
1. RECAPTCHA_SITE_KEY = [Ključ_aplikacije]
2. RECAPTCHA_SECRET_KEY = [Ključ_ki_ga_ve_le_strežnik]
Ko strežnik prejme formo in uporabnikov žeton, le-tega s pomočjo svojega ključa preveri pri ponudniku storitve Google. Postopek preverjanja se lahko zgodi le enkrat, saj se veljavnost uporabnikovega ključa v postopku preverjanja prekine. S tem preprečimo, da bi uporabnik generiral lažne žetone.
Slika 6: Značka reCAPTCHA
18
Googlova storitev nam nudi tudi vpogled v analitiko prometa oddanih form. Na spletnem grafičnem vmesniku lahko vidimo, koliko je bilo vseh oddanih form na določen dan, kolikšno oceno resničnosti so prejeli uporabniki in kolikšen odstotek vseh je bilo sumljivih.
Slika 7: Google reCAPTCHA analiza
19
3 Razvoj zalednega dela aplikacije
V računalniškem svetu se zaledni del (ang. Back-end) nanaša na kateri koli del spletnega mesta ali programske opreme, ki ga uporabniki ne vidijo. V terminologiji programiranja je zaledni del
"nivo dostopa do podatkov", medtem ko je čelni del "predstavitvena plast".
Večina sodobnih spletnih mest je dinamičnih, kar pomeni, da se vsebina spletnih strani ustvarja sproti. Dinamična stran vsebuje eno ali več skript, ki se zaženejo na spletnem strežniku ob vsakem dostopu do strani. Te skripte ustvarijo vsebino strani, ki se pošlje v uporabnikov spletni brskalnik. Vse, kar se zgodi, preden se stran prikaže v spletnem brskalniku, je del zaledja.
Zaledni procesi vključujejo:
- obdelavo dohodnih zahtevkov spletnih strani,
- izvajanje skript (PHP, ASP, JSP itd.) za ustvarjanje HTML-ja,
- dostop do podatkov, na primer zapisov iz baze podatkov z uporabo poizvedb SQL, - shranjevanje ali posodabljanje zapisov v zbirki podatkov,
- šifriranje in dešifriranje podatkov,
- ravnanje z nalaganjem in prenosom datotek, - obdelavo uporabniških vnosov preko JavaScripta.
Vsi zgornji primeri so poleg zadnjega tudi procesi na strani strežnika, ki se izvajajo na spletnem strežniku. JavaScript se izvaja na strani odjemalca, kar pomeni, da se izvaja v spletnem brskalniku. Podatki, ustvarjeni v zaledju, se posredujejo v vmesnik in predstavijo uporabniku.
[6]
Pri razvoju zalednega dela aplikacije sem se odločil za uporabo programskega jezika PHP, saj je eden izmed široko uporabljenih skriptnih jezikov in spada med najbolj priljubljene jezike za razvoj spletnih aplikacij in strežniških skript. Ker sem aplikacijo razvijal na novo od popolnega začetka, sem se odločil za uporabo zadnje stabilne verzije PHP 8.0.x, ki mi omogoča uporabo najnovejših funkcionalnosti.
PHP je skriptni jezik za splošno uporabo, ki vsebuje vse potrebne vidike za učinkovito reševanje izzivov. Ima robustna ogrodja, kot so Laravel, Symfony, Joomla itd., ki pomagajo poenostaviti in skrajšati čas razvoja. PHP je prilagodljiv in združljiv s številnimi neodvisnimi tehnologijami.
Odločil sem se tudi za uporabo sklada LAMP. Sklad je sestavljen iz operacijskega sistema Linux, spletnega strežnika Apache, baze podatkov MySQL in skriptnega jezika PHP.
LAMP zagotavlja varno infrastrukturo za razvoj spletnih aplikacij. Ko razvijalci izberejo sklad LAMP, gre razvojni postopek hitreje, saj vsak gostitelj in večina zalednih sistemov podpira zaledne tehnologije sklada LAMP.
20
Da sem si olajšal delo s programskim jezikom PHP, sem v svoj projekt vključil ogrodje Laravel za razvoj spletnih aplikacij. Laravel prispeva k učinkovitemu programskemu procesu, saj se lahko ogrodje Laravel uporablja za ustvarjanje polnopravnih spletnih aplikacij in mikrostoritev.
Laravel pomaga tudi pospešiti razvojni proces. To ogrodje mi je omogočilo hitrejši in veliko bolj pregleden razvoj.
Namestil sem tudi paketni upravljalnik Composer, ki je program za nameščanje dodatnih PHP- knjižnic.
Dodal sem tudi NodeJS, ki je odprtokodno okolje za razvoj aplikacij v okolju Javascript in lahko deluje na različnih platformah, kot sta v mojem primeru v času razvoja operacijski sistem Windows in nato na produkcijskem strežniku operacijski sistem CentOS Stream (Linux).
Pri namestitvi NodeJS sem v sklopu programskih orodij namestil tudi paketni upravljalnik NPM (Node Package Manager), ki je aplikacija, ki skrbi za dodatne knjižnice in pakete kod oz.
vtičnika za JavaScript v okolju NodeJS.
3.1 Programski jezik PHP
PHP - Hypertext Preprocessor - je odprtokodni programski jezik, ki se uporablja za razvoj dinamičnih spletnih vsebin. Je strežniški programski jezik, kar pomeni, da se izvaja na strežniku, za njegovo delovanje pa potrebujemo spletni strežnik. Spada v skupino interpretacijskih programskih jezikov, kar pomeni, da se na začetku ne prevede celotna izvorna koda, ampak se sproti interpretira. Spletni strežnik ima to funkcijo, da interpretirano izvorno kodo pošlje brskalniku v obliki HTML-kode. Tako uporabnik ne more videti izvorne kode. [7]
3.2 Paketni upravljalnik Composer
Composer je program za upravljanje PHP-odvisnosti in knjižnic PHP. Za delovanje Laravela najprej potrebujemo Composer. Ta nam omogoča dodajanje in naknadno posodabljanje knjižnic.
V datoteki composer.json najdemo vse knjižnice, ki so vključene v projekt, ter njihove verzije.
S sledečim ukazom lahko ustvarimo nov projekt Laravel, ki že vsebuje vse pomembnejše komponente, kjer so vse datoteke že pregledno razporejene v mapah.
1. composer create-project --prefer-dist laravel/laravel Ime_novega_projekta
21
3.3 Ogrodje Laravel
V opisanem projektu sem uporabil ogrodje Laravel za programski jezik PHP, saj vsebuje ogromno uporabnih funkcij, ki naredijo kodo veliko bolj pregledno, lažje razumljivo in uporabno. Laravel je tudi daleč najbolj uporabljeno PHP-ogrodje.
Slika 8: Priljubljenost ogrodji jezika PHP [8]
Laravel Framework je odprtokodno spletno ogrodje za PHP. Uporablja se za razvoj zapletenih spletnih aplikacij. Temelji na »Model-View-Controller« (MVC) vzorcu.
MVC je vzorec arhitekturnega oblikovanja, ki omogoča hitrejše razvijanje spletnih aplikacij.
Model (M) – model obravnava podatke, ki jih uporablja spletna aplikacija.
Pogled (V) – pogled pomaga uporabniku prikazati podatke.
Krmilnik (C) - krmilnik sodeluje z modelom, da ustvari podatke za pogled. [8]
22
Model definira podatkovne
strukture
Pogled uporabniški vmesnik
Krmilnik krmilna logika
Obdela Posodobi
Pošlje uporabnikov vnos
Avtomatske posodobitve
Slika 9: Arhitektura MVC
Laravel ima vgrajeno preverjanje pristnosti in avtorizacijo. Ponuja izbirno konfiguracijo sistema za preverjanje pristnosti in avtorizacijo. To pomeni, da bo aplikacija v samo nekaj preprostejših ukazih opremljena z zaščito pristnosti in avtorizacijo.
Paketni sistem zajema podporo večjemu številu programskih knjižnic in opreme, ki pomagajo spletni aplikaciji avtomatizirati postopek. Laravel uporablja tako imenovanega skladatelja
»Composer« kot upravitelja odvisnosti in knjižnic, ki upravlja vse informacije, potrebne za upravljanje paketov. Vrstica za odpravljanje napak Laravel in pomočnik Laravel IDE so nekateri najbolj priljubljeni paketi Laravel.
Laravel ima svoj vmesnik ukazne vrstice, imenovan Artisan. Običajne uporabe Artisana vključujejo objavljanje sredstev paketov, upravljanje migracij zbirk podatkov, ustvarjanje osnovne kode za nove krmilnike, modele in migracije. Funkcionalnost in zmožnosti Artisana lahko razširimo z uvajanjem novih ukazov po meri.
Ko gre za testiranje aplikacije, Laravel sam po sebi ponuja testno enoto za testiranje aplikacij.
Testna enota vsebuje teste, ki zaznajo in preprečijo regresije v ogrodju Laravel. Poleg testiranja z orodjem za testiranje lahko delovanje ogrodja preizkusimo tudi s pomočjo prirejenega pripomočka za ukazno vrstico.
Za namen hitrega zagona strežbe aplikacije lahko kot razvijalci uporabimo Laravelov PHP spletni strežnik. Ukaz »Laravel PHP artisan serve« pomaga pri zagonu aplikacij na razvojnem strežniku PHP. Sprejema tudi dve dodatni možnosti. Gostitelja lahko uporabite za spreminjanje naslova in vrat aplikacije. Medtem lahko z možnostjo vrat spremenite tudi vrata aplikacije.
Za hitro strežbo na lokalnem naslovu IP 127.0.0.1 in vratih 8080 vnesemo naslednji ukaz:
1. php artisan serve
23 Za strežbo na določenem IP-naslovu in vratih pa:
1. php artisan serve --host=mojaaplikacija.si --port=8080
Poleg teh funkcij ima Laravel tudi uradne pakete, ki so priročni pri integraciji različnih funkcij v aplikacijo. Tudi v navedenem projektu sem uporabil kar nekaj uradnih paketov, med drugim Laravel Sanctum.
24
3.4 Krmilniki API
Aplikacija na čelnem delu za komunikacijo z uporabo HTTP API-klicev uporablja knjižnico Axios.
V ta namen je bilo tudi v zalednem delu aplikacije treba razviti funkcionalno logiko. Laravel omogoča enostavnejši in preglednejši razvoj API-storitev. Ogrodje Laravel uporablja tako imenovane krmilnike, v katerih določimo, kaj se zgodi ob klicu nanje. Ogrodje omogoča tudi uporabo uradnih dodatnih vtičnikov, ki jih enostavno dodam v želen krmilnik.
Med uporabljanimi vtičniki sem uporabil Illuminate\Http\Request, ki ponuja objektno usmerjen način interakcije s trenutno zahtevo HTTP, ki jo obravnava aplikacija, ter pridobivanje vhodnih podatkov, piškotkov in datotek, ki so bile predložene z zahtevo. Za komunikacijo s podatkovno bazo sem uporabil vtičnik Illuminate\Support\Facades\DB, ki ponuja metode za vsako vrsto poizvedbe SQL: SELECT, UPDATE, INSERT, DELETE.
Pri različnih poizvedbah SQL v podatkovno bazo bi morebitni zlonamerni napadalec lahko dostopal do podatkov drugih uporabnikov. Zato je bilo treba v aplikacijo dodati postopke avtorizacije. Med pomembnejše dodatke za avtorizacijo spada dodatek overjanja pristnosti Illuminate\Support\Facades\Auth, ki omogoča dostop do podatkov trenutnega uporabnika. Z njegovo uporabo lahko dostopamo do overjenih podatkov trenutnega uporabnika, s pomočjo katerih sem razvil zaščiteno avtorizacijo aplikacije.
Delovanje API-klica bom predstavil na primeru poziva, ko uporabnik želi pridobiti podatke odhodnih klicev mobilne številke za določeno časovno obdobje.
Vse se začne na čelnem delu, ko aplikacija z uporabo knjižnice Axios na zaledni del aplikacije pošlje poziv na API-pot z določenimi URL-parametri:
»/api/mobileout/031123123&07-2021&10-07-2021&21-07-2021«
Datoteka /routes/api.php:
1. Route::middleware(['auth:sanctum'])->group(function () {
2. Route::get('mobileout/{number}&{SelectedMonth}&{SelectedStartDate?}&{SelectedEndDate?}', 'App\Http\Controllers\MobileOutController@list');});
Kot vidimo, imajo nekatere spremenljivke na koncu znak »?«, kar določa, da je ta spremenljivka opcijska, kar pomeni, da se bo klic izvedel, tudi če spremenljivka ni določena. V zgornjem primeru se to zgodi, če uporabnik želi izpis celega meseca in ne obdobja med dvema datumoma.
Preden se poziv preusmeri na željeno API-pot, se opravi preverjanje pristnosti, kjer se zagotovi avtentičnost uporabnika. Nato se podatki posredujejo na želen krmilnik ter določeno funkcijo znotraj njega, v tem primeru je to krmilnik MobileOutController in funkcija list.
V krmilniku App/http/Controllers/MobileOutController.php je na začetku potrebna še avtorizacija, nato pa se lahko izvedejo želene operacije. V tem primeru se najprej sestavi
25 poizvedbeni stavek SQL, ki iz podatkovne baze pridobi želene podatke. Pridobljene podatke je potrebno še nekoliko obdelati. Dobljeni seznam klicev namreč vsebuje seznam klicanih številk, katerih pa uporabnik zaradi zagotavljanja zasebnosti ne sme videti v celoti. V ta namen sem ustvaril funkcijo, ki zadnji del številke nadomesti z znaki »x«. Na koncu z ukazom »return«
določim, katere spremenljivke krmilnik vrne. Pri odzivu je treba biti pozoren, saj je sestavljen v obliki zapisa JSON, kar je treba upoštevati pri implementaciji v čelnem delu aplikacije.
3.5 Vtičnik Laravel Sanctum
V aplikacijo sem želel implementirati API-kontrolo in sistem za preverjanje pristnosti uporabnika z uporabo žetona (token). V sklopu Laraveloh uradnih paketov sem naletel na Laravel Sanctum.
Laravel Sanctum ponuja lahkoten sistem za preverjanje avtentičnosti za SPA, mobilne aplikacije in preproste API-je, ki temeljijo na žetonih. Sanctum omogoča vsakemu uporabniku aplikacije, da ustvari več žetonov za svoj račun. Tem žetonom se lahko podelijo sposobnosti in obsegi, ki določajo, katera dejanja smejo žetoni oziroma uporabniki izvajati.
Paket lahko uporabimo za izdajo žetonov API svojim uporabnikom brez zapletov OAuth. Ta funkcija je narejena po zgledu GitHuba in drugih aplikacij, ki izdajajo žetone za osebni dostop.
Za ustvarjanje in upravljanje teh žetonov lahko uporabimo Sanctum. Ti žetoni imajo običajno zelo dolg čas poteka (več let), lahko pa jim dodelimo določeno dolžino veljavnosti. Žetone lahko uporabnik kadar koli ročno prekliče.
Laravel Sanctum ponuja to funkcijo s shranjevanjem uporabniških žetonov API v tabelo v bazi podatkov in z overjanjem dohodnih zahtev HTTP prek glave »Authorization«, ki mora vsebovati veljaven žeton API.
Sanctum ponuja tudi preprost način za preverjanje pristnosti enostranskih aplikacij SPA, ki morajo komunicirati z API-ji, ki jih poganja Laravel. V te namene Sanctum ne uporablja nobenih žetonov. Namesto tega Sanctum uporablja vgrajene storitve avtentifikacije sej, ki temeljijo na piškotkih. Sanctum v ta namen uporablja tako imenovan »web authentication guard«. Ta zagotavlja prednosti zaščite CSRF (»Cross site request forgery«), preverjanja pristnosti seje in ščiti pred uhajanjem poverilnic za preverjanje pristnosti prek »Cross-site scripting« XSS. [9]
Sanctum bo poskušal preveriti pristnost s pomočjo piškotkov le, če dohodna zahteva izvira iz vašega lastnega vmesnika SPA. Ko Sanctum preuči dohodno zahtevo HTTP, bo najprej preveril piškotek za preverjanje avtentičnosti in če ga ni, bo Sanctum nato pregledal glavo pooblastila za veljaven žeton API.
26
3.6 Preverjanje pristnosti uporabnikov
V aplikacijo sem želel uvesti varnostno zaščito tako, da uporabniki ne morejo dostopati do določenih strani, če niso prijavljeni.
S pomočjo Vue Routerja sem ustvaril logiko, ki preverja prisotnost avtentikacijskega piškotka, ki ga uporabnik prejme ob prijavi. Ko uporabnik želi dostopati do katerega koli spletnega mesta, ki zahteva, da je uporabnik prijavljen, Vue Router najprej preveri, če je uporabnik vpisan oziroma avtenticiran. Če uporabnik ni vpisan, le-tega preusmeri na vpisno stran.
Ta postopek prikazuje spodnja koda:
1. router.beforeEach((to, from, next) => {
2. if (to.path == '/:lang/login' || to.path == '/:lang/legal-notes') { 3. next()
4. } else {
5. axios.get('/api/athenticated').then(() => { 6. next()
7. }).catch(() => { 8. return next({
9. path: '/:lang/login', 10. })
11. }) 12. } 13. });
V zgornjem odseku kode vidimo, da preden dobi uporabnik dostop do določene strani, Vue Router preveri njegovo pristnost. Pristnost preveri s pomočjo API-klica na naslov
»/api/athenticated/«. Če je uporabnik pristen, ga spusti na želeno lokacijo. Če pa ni, ga preusmeri na vpisno stran »/:lang/login«. Preden program preveri pristnost uporabnika, preveri tudi, če uporabnik želi dostopati do vpisne strani ali pa strani, kjer se nahaja dokumentacija strani glede politike piškotkov. Do teh dveh strani mora uporabnik imeti dostop, tudi če ni vpisan. V vseh primerih je upoštevan tudi izbran jezik strani, do katerih uporabnik dostopa.
V kolikor uporabnik prvič dostopa do spletne aplikacije ali pa se je iz aplikacije odjavil, je avtomatsko preusmerjen na vpisno stran. Če uporabnik ni vpisan, mu Vue Router preko API- klica le-to sporoči.
27 Slika 10: Pristnost uporabnika ni potrjena
V kolikor pa je uporabnik vpisan in ima shranjen svoj vpisni žeton, pa sistem preko API-ja za preverjanje pristnosti sporoči »1« ali »true«. Postopek preverjanja se zgodi ob vsakem prehodu na katerokoli stran.
Slika 11: Odobreno preverjanje pristnosti uporabnika
28
3.7 Vpisna stran in začasna blokada vpisa
V aplikacijo sem dodal tudi funkcijo, ki uporabniku ob večkratnem napačnem vnosu vpisnih podatkov onemogoči vpis za določen čas. V ta namen sem uporabil vtičnik Laravel Sanctum Auth throttleslogins. Laravelova funkcija throttleslogins v seji beleži število vpisov glede na IP- naslov pošiljatelja. Ko pošiljatelj doseže določeno število napačnih vpisov, Laravel avtomatsko blokira njegov IP-naslov in uporabniku avtomatsko zavrne vse zahteve. Implementiral sem tudi dodatno logiko s funkcijo, ki beleži število vpisov glede na e-mail naslove, tako da če morebitni napadalec želi narediti proxy napad z različnih IP-naslovov, vendar z uporabo istega e-maila, funkcija throttleslogins avtomatsko blokira možnost vpisa z uporabo dotičnega e-mail naslova.
Krmilnik vpisa »App\Http\Controllers\Auth\LoginController.php« vsebuje dve spremenljivki, in sicer »protected $maxAttempts = 5;« in »protected $decayMinutes = 1;« s katerima določimo število možnih vpisov ter čas, v katerem uporabnik ne bo mogel pošiljati novih prijavnih pozivov oziroma čas blokade uporabnika. Če želimo uporabiti funkcionalnosti throttleslogins na različnih API-poteh, lahko to storimo tako, da v datoteki api.php za določeno API-pot določimo posrednika (ang. middleware) »throttle« in mu določimo število dovoljenih zahtev in čas blokade. Spodnji primer prikazuje uporabo throttleslogins na API-poti »login«, ki je odgovorna za vpis. Posrednik bo uporabnika po petih neuspelih poskusih vpisa blokiral za 1 minuto.
1. Route::post('login', 'App\Http\Controllers\LoginController@login')->middleware("throt- tle:5,1");
Spodnji sliki prikazujeta delovanje posrednika. Prva slika prikazuje opozorilo ob napačno vpisanih vpisnih podatkih, druga slika pa prikazuje obvestilo, ki ga uporabnik prejme ob petih napačnih poskusih vpisa.
Slika 12: Opozorilo ob napačno vpisanih podatkih
29 Slika 13: Blokada možnosti vpisa
