Embed Size (px)
Citation preview
UNIVERZA V MARIBORU
FAKULTETA ZA ELEKTROTEHNIKO,
RAČUNALNIŠTVO IN INFORMATIKO
VISOKOŠOLSKI STROKOVNI ŠTUDIJ
Računalništvo in informacijske tehnologije
POROČILO PRAKTIČNEGA IZOBRAŽEVANJAv
Tom88 d.o.o. – Poljčane
Čas opravljanja od 22.4.2014 do 30.6.2014
Mentor Tomaž Kokot, univ. dipl. ekon.
Študent Mihael Polanec
Vpisna številka E1056187
E pošta [email protected]
Telefon 040 819 664
i
ii
KAZALO
UVOD..................................................................................................................................................1
1 OPIS GOSPODARSKE DRUŽBE IN PRODUKTOV.....................................................................2
1.1 LifeSal........................................................................................................................................2
1.2 ŠOU Ljubljana...........................................................................................................................2
1.3 Maribor Live..............................................................................................................................3
1.4 Borut Pahor................................................................................................................................3
1.5 Pinatio........................................................................................................................................3
2 OPIS PRAKTIČNEGA IZOBRAŽEVANJA....................................................................................4
3 STROKOVNO PODROČJE ALI PROJEKT....................................................................................5
3.1 Seznanitev z orodji in tehnologijami.........................................................................................5
3.1.1 XAMPP .............................................................................................................................5
3.1.2 FileZilla Client...................................................................................................................5
3.1.3 CodeIgniter.........................................................................................................................5
3.1.4 Bootstrap............................................................................................................................6
3.2 Projekt - spletna stran modro za študente..................................................................................6
3.2.1 Načrtovanje spletne strani..................................................................................................6
3.2.2 Pregled novic......................................................................................................................8
3.2.3 Prikaz ostalih strani..........................................................................................................11
3.2.4 Prijava v nadzorno ploščo................................................................................................13
3.2.5 Bannerji............................................................................................................................14
3.2.6 Kategorije.........................................................................................................................16
3.2.7 Nastavitve.........................................................................................................................18
3.2.8 Novice..............................................................................................................................19
3.2.9 Socialna omrežja..............................................................................................................19
3.3 Projekt - spletna stran FlawlessCode.......................................................................................20
3.3.1 Načrtovanje......................................................................................................................20
3.3.2 Implementacija strani.......................................................................................................21
3.3.3 Sprememba jezika............................................................................................................22
3.3.4 Vsebina, ki se prilagaja širini okna..................................................................................23
4 SKLEP.............................................................................................................................................25
iii
KAZALO SLIK
Slika 3.1: delovanje aplikacije z uporabo ogrodja CodeIgniter............................................................6
Slika 3.2: podatkovna baza spletne strani.............................................................................................7
Slika 3.3: Postavitev vsebine na spletni strani......................................................................................7
Slika 3.4: hierarhična zgradba administracijske strani.........................................................................8
Slika 3.5: hierarhična zgradba strani za uporabnika.............................................................................8
Slika 3.6: Metoda index........................................................................................................................9
Slika 3.7: metoda stran.......................................................................................................................10
Slika 3.8: prikaz datuma novice..........................................................................................................11
Slika 3.9: zgeneriran glavni meni.......................................................................................................12
Slika 3.10: metoda prikazi..................................................................................................................13
Slika 3.11: Prijavni obrazec................................................................................................................14
Slika 3.12: seznam bannerjev.............................................................................................................15
Slika 3.13: obrazec za urejanje bannerjev..........................................................................................15
Slika 3.14: izvorna koda za dodajanje, brisanje in urejanje bannerjev...............................................16
Slika 3.15: urejevalnik CKEditor.......................................................................................................17
Slika 3.16: inicializacija CKEditorja..................................................................................................17
Slika 3.17: AJAX zahteva za preverjanje pravilnosti url - ja.............................................................18
Slika 3.18: PHP skripta za preverjanje unikatnosti url - ja.................................................................18
Slika 3.19: seznam nastavitev.............................................................................................................19
Slika 3.20: preverjanje unikatnosti url naslova novic........................................................................19
Slika 3.21: koda za vdelavo za Facebook..........................................................................................20
Slika 3.22: začetna stran spletne strani flawless-code.com................................................................20
Slika 3.23: shema podatkovne baze....................................................................................................21
Slika 3.24: inicializacija knjižnice fullPage.js...................................................................................22
Slika 3.25: kontrolnik glavne strani....................................................................................................23
Slika 3.26: preprost media query........................................................................................................24
Slika 3.27: prikaz spletne strani na pametnem telefonu.....................................................................24
iv
UVOD
V tretjem letniku je kot del 6. semestra visokošolskega študijskega programa Računalništvo in
informacijske tehnologije potrebno opraviti obvezno praktično usposabljanje. Svoje praktično
usposabljanje sem opravljal v podjetju TOM88 d.o.o., ki ima sedež v Spodnji Brežnici v občini
Poljčane. Usposabljanje je potekalo od 15.4.2014 pa do 30.6.2014.
V podjetju so mi zaupali načrtovanje in razvoj dveh spletnih strani. Za samo implementacijo sem
uporabljal jezike HTML, javascript, PHP ter ogrodje CodeIgniter, ki je napisano v tem jeziku in
nam olajša razvoj spletnih strani z vzpostavitvijo arhitekture model-view-controller (MVC),
semantičnimi oziroma iskalnikom prijaznimi URL – ji ter številnimi pripravljenimi knjižnicami in
funkcijami.
1
1 OPIS GOSPODARSKE DRUŽBE IN PRODUKTOV
TOM88, d.o.o. je mlado podjetje, ki se ukvarja z razvojem informacijsih rešitev. Ustanovljeno je bilo
leta 2012. Podjetje se natančneje ukvarja z razvojem mobilnih, spletnih in namiznih aplikacij ter z
grafičnim oblikovanjem. V podjetju smo se zbrali študentje iz Maribora, kateri študiramo na treh
različnih fakultetah. Tomaž Kokot, študent druge stopnje Ekonomsko - poslovne fakultete v
Mariboru in direktor ter lastnik podjetja skrbi za vodenje.
1.1 LifeSal
Brezplačen farmacevtsko-zdravstveni pripomoček, namenjen uporabnikom pametnih telefonov s
platformami iOS, Android in Windows Phone 8.
Aplikacija uporabniku omogoča:
• prihranek ob nakupu izdelkov, ki jih ponujajo lekarne,
• pregled vpliva vremena na počutje,
• nastavitev opomnikov za zdravila ter kontracepcijo,
• prikaz najbližjih lekarn v uporabnikovi okolici s podrobnimi podatki,
• menstrualni koledar,
• beleženje dnevnega vnosa kalorij s pomočjo števca kalorij,
• izračun indeksa telesne mase (ITM).
1.2 ŠOU Ljubljana
Aplikacija omogoča študentom interaktivno povezavo z organizacijo ŠOU v Ljubljani.
Uporabniki lahko spremljajo:
• dogodke,
• novice,
• razpise,
• poslušajo študentski radio,
• pregledajo lahko zemljevid s fakultetami, študentskimi domovi ter knjižnjicami.
Na voljo pa so jim tudi podatki o organizaciji in njihovih zaposlenih.
2
1.3 Maribor Live
Maribor Live je aplikacija izdelana za mestno občino Maribor.
Uporabniku omogoča spremljanje dogajanja skozi spletne kamere, postavljene na različnih mestih
v Mariboru.
Aplikacija je na voljo za uporabnike operacijskih sistemov iOS in Android.
1.4 Borut Pahor
Aplikacija je bila izdelana za predvolilno kampanjo predsednika Republike Slovenije. Naročnik je bil
Borut Pahor saj je želel vzpostaviti stik z mlajšo populacijo preko sodobnih tehnologij. Izdelana je
bila mobilna aplikacija preko katere je obveščal uporabnike o najnovejših novicah in dogodkih na
katerih je sodeloval.
1.5 Pinatio
Pinatio je informacijski sistem, namenjen organizacijam za interaktivno komunikacijo z gledalci oz.
uporabniki. Za komunikacijo obsega mobilni,spletni odjemalec ter strežnik. Komunikacija in
obdelava podatkov poteka realno časovno.
3
2 OPIS PRAKTIČNEGA IZOBRAŽEVANJA
Obvezna študijska praksa v podjetju TOM88, d.o.o. je bila razdeljena v tri dele.
V prvem delu je bila moja naloga vzpostavitev delovnega okolja za razvoj spletnih strani ter
seznanitev z ogrodjem CodeIgniter. Kot uporabniku Microsoftovega operacijskega sistema
Windows 7 sem lahko izbiral med večimi programskimi paketi (npr. WAMP, XAMPP), na koncu pa
sem za razvoj uporabljal XAMPP, ki nam ponuja Apache HTTP strežnik, MySQL podatkovno bazo
ter prevajalnike za interpretiranje PHP in Perl skript. Prav tako sem si moral namestiti FTP
odjemalca FileZilla, da sem lahko končano spletno stran naložil na pravi strežnik.
V drugem delu je sledil razvoj spletne strani modro za študente (modrozastudente.si), v tretjem pa
razvoj predstavitvene strani ekipe FlawlessCode (flawless-code.com).
4
3 STROKOVNO PODROČJE ALI PROJEKT
3.1 Seznanitev z orodji in tehnologijami
V tem poglavju bodo na kratko predstavljena vsa orodja in uporabljene tehnologije uporabljene pri
praktičnem izobraževanju, programska jezika PHP in javascript, označevalni jezik HTML in
kaskadne stilske predloge CSS niso opisane.
3.1.1 XAMPP
XAMPP je brezplačen programski paket za razvoj spletnih rešitev sestavljen v glavnem iz Apache
HTTP strežnika, podatkovne baze MySQL ter programov za interpretiranje jezikov PHP in Perl.
Namen paketa je v osnovi ta da lahko razvijalci lokalno razvijajo in testirajo spletne rešitve brez
dostopa do svetovnega spleta, čeprav je mogoče paket uporabiti tako, da dejansko služi kot spletni
strežnik.
3.1.2 FileZilla Client
FileZilla Client je brezplačen FTP odjemalec, ki nam omogoča da se povežemo s spletnim
strežnikom preko File Transfer Protokola (FTP) in še nekaterih. Služi nam da ko končamo z
razvojem spletne strani lokalno spletno stran prenesemo na pravi strežnik.
3.1.3 CodeIgniter
Ker sem osnovno znanje o programskem jeziku PHP že imel iz fakultete je bila moja prva naloga
seznanitev z php ogrodjem CodeIgniter. CodeIgniter je odprto kodno ogrodje, ki služi razvoju
dinamičnih spletnih vsebin s programskim jezikom PHP. CodeIgniter delno temelji na priljubljeni
arhitekturi Model-View-Controller. Programer mora obvezno implementirati razrede za kontrolerje
(Controller) in poglede (View) medtem ko so modeli (Model) opcijski. Prikaz delovanja spletne
aplikacije z ogrodjem CodeIgniter prikazuje slika 3.1 na kateri lahko vidimo kako uporabnik dobi
zahtevano spletno stran. Uporabnik najprej s pomočjo ustreznega odjemalca (brskalnika) pošlje
zahtevo na naš strežnik, kjer se v datoteki index.php pogkliče usmerjevalnik routes.php ki pregleda
če smo definirali razne preusmeritve za zahtevano spletno stran, ter nato izbere želen kontroler.
Kontroler komunicira z ustreznimi modeli, s pomočjo katerih pridobi želene podatke recimo iz
podatkovne baze, ko kontroler pridobi vse podatke naloži ustrezen pogled in pogledu poda
pridobljene podatke. Pogled nato zgradi ustrezno HTML kodo, ki jo potem brskalnik interpretira ter
prikaže končnemu uporabniku. Privzeta zgradba url naslova pri aplikacijah ki temeljijo na ogrodju
CodeIgniter je sledeča: protokol://domena/index.php/kontroler/funkcija/[dodatni parametri]. Protokol
je ponavadi HTTP ali HTTPS, domena je domena naše strani recimo primer.si, index.php je
privzeta skripta, ki jo lahko skrijemo tako, da ustrezno spremenimo .httaccess datoteko, kontroler
(Controller) je razred v aplikaciji, funkcija je funkcija znotraj kontrolerja, dodatni parametri pa so
opcijski.
5
3.1.4 Bootstrap
Bootstrap je brezplačna zbirka orodij in gradnikov za izdelavo spletnih strani. Vsebuje HTML in
CSS predloge za pisave, obrazce, navigacijo po strani, ter nam opcijsko ponudi možnost javascript
razširitve, kjer lahko naredimo spletno stran ki se bo prilagajala velikosti okna odjemalca.
3.2 Projekt - spletna stran modro za študente
Izdelati sem moram spletno stran modro za študente, s pomočjo katere izvemo zadnje novice
združenja študentov, ter podatke o združenju (kdo sodeluje, cilji, načrti) in njihov kontakt.
3.2.1 Načrtovanje spletne strani
Pred implementacijo je bilo potrebno pregledati želje ter zahteve naročnika, ki so bile da spletna
stran omogoča:
• prikaz novic
• prikaz strani o združenju
• kontakt
• prikaz aktivnosti na socialnem omrežju Facebook
• prikaz aktivnosti na socialnem omrežju Twitter
• dodajanje / urejanje novic
• dodajanje / urejanje strani (kontaktov)
• dodajanje / urejanje socialnih omrežij
Sliki 3.2 in 3.3 nam prikazujeta zgradbi podatkovne baze za spletno stran, ter kako bodo
postavljeni vizualni elementi spletne strani, ki bo vidna končnemu uporabniku oz. obiskovalcu.
6
Slika 3.1: delovanje aplikacije z uporabo ogrodja CodeIgniter
Na slikah 3.4 in 3.5 je mogoče videti hierarhično podobo administrativne strani, ter strani
namenjene končnemu uporabniku.
7
Slika 3.2: podatkovna baza spletne strani
Slika 3.3: Postavitev vsebine na spletni strani
3.2.2 Pregled novic
Gledanje, ter branje novic je namenjeno vsem uporabnikom spletne strani. Uporabniki lahko novice
zgolj pregledujejo v seznamu, kjer je viden naslov novice, slika in kratek opis novice. Ker je
ponavadi na spletni strani več novic, se novice razdelijo na več pod strani, saj je tako stran bolj
pregledna ter se prav tako hitreje prikaže (zgenerira). Novice se sortirajo po datumu in sicer
najnovejše najprej.
Novice se prikazujejo s pomočjo krmilnika „Novice“, ta krmilnik ima naslednje metode:
• index, je privzeta metoda, in se pokliče takrat ko ne navedemo metode v url naslovu, v
našem primeru pa pokliče metodo stran, kjer naloži prvo stran z novicami, kar lahko vidimo
na sliki 3.6.
• stran, je metoda, ki preveri katera je zahtevana stran iz seznama novic (ta podatek pridobi
8
Slika 3.4: hierarhična zgradba administracijske strani
Slika 3.5: hierarhična zgradba strani za uporabnika
iz url naslova), nato pa od ustreznega modela zahteva, da prebere v bazi seznam novic,
nato pa zgradi končni pogled za uporabnika, prikaz metode se vidi na sliki 3.7.
• prikazi, je metoda, ki se pokliče vedno ko uporabnik želi prebrati celotno novico, takrat s
pomočjo ustreznega modela, pridobi podrobnosti o novici, in pošlje te podatke ustreznemu
pogledu, ki zgradi ustrezen pogled za končnega uporabnika.
9
Slika 3.6: Metoda index
Z prikaz strani je strani je bil uporabljen HTML5 in CSS3, kar je razvidno iz slik, kjer lahko vidimo
na sliki 3.8, kjer je zgoraj levo pripadajoča HTML koda, sledi ji CSS koda za stil rezultat pa je viden
desno spodaj.
10
Slika 3.7: metoda stran
3.2.3 Prikaz ostalih strani
Ostale strani so v podatkovni bazi poimenovane kategorije. Pod ostale strani štejemo vse strani,
do katerih dostopamo preko glavnega menija (desno zgoraj). Ta meni se generira na podlagi
kategorij, katere imamo v podatkovni bazi. Kategorije lahko imajo podkategorije, podkategorije, pa
ne morejo imeti podkategorij, torej gre so lahko razdeljene zgolj v dva nivoja. Prikaz zgeneriranega
menija (spodaj) ter pripadajočo HTML (zgoraj levo) in CSS (zgoraj desno) kodo lahko vidimo na
sliki 3.9. Za prikaz posameznih strani skrbi krmilnik Stran, ki ima sledeče metode:
• index – privzeta metoda, pokliče se ko ne navedemo želene metode, metoda nas
11
Slika 3.8: prikaz datuma novice
preusmeri na osnovno stran z novicami.
• prikazi – metoda ki preko parametra ki ga dobimo iz url naslova poišče ustrezno kategorijo
v podatkovni bazi s pomočjo ustreznega modela „kategorije_model“ pridobi vse podatke in
naloži ustrezen pogled, če pa kategorija (stran) ne obstaja v podatkovni bazi pa sledi
preusmeritev na domačo stran z novicami, metoda je vidna na sliki 3.10.
• posljiMail($mojEmail), metoda ki preko ustrezne knjižnice pošlje email lastniku strani.
12
Slika 3.9: zgeneriran glavni meni
3.2.4 Prijava v nadzorno ploščo
Za urejanje vsebin na spletni strani se je potrebno prijaviti v sistem, to lahko administrator stori
preko obrazca prikazanega na sliki 3.11, kjer vpiše svoje uporabniško ime ter geslo, ter kline gumb
prijava. Ko administrator klikne gumb prijava se pošljejo podatki ustreznemu kontrolniku, ki preveri
prijavne podatke, ter v primeru če so podatki pravilni dodeli sejo uporabniku in ga preusmeri na
začetno stran nadzorne plošče, kjer lahko administrator ureja bannerje, kategorije, novice,
nastavitve, socialna omrežja ter ureja svoj račun oz. lahko doda novega administratorja ali pa ga
izbriše, če pa so prijavni podatki napačni pa mu izpiše sporočilo o napaki.
13
Slika 3.10: metoda prikazi
3.2.5 Bannerji
Bannerji se ponavadi na spletnih mestih uporabljajo za namene spletnega oglaševanja ter
promocije. Administrator lahko na spletni strani uporabi poljubno število bannerjev, za njihovo
dinamično premikanje na uporabniški strani pa skrbi gradnik Carousel, katerega dobimo z knjižnico
Bootstrap. Administrator mora za urejanje bannerja klikniti na moder gumb v ustrezni vrstici v
seznamu bannerjev (slika 3.12), za dodajanje novega bannerja pa mora klikniti zelen gumb dodaj
banner, ki se nahaja pod obrazcem. Ko klikne na enega od gumbov se odpre obrazec prikazan na
sliki 3.13. V primeru ko klikne na gumb uredi, so polja že izpolnjena s starimi podatki, prav tako je
prikazana tudi trenutna slika. Če pa administrator klikne na gumb briši, pa se banner izbriše,
implementacija metod za urejanje ter brisanje je vidna na sliki 3.14.
14
Slika 3.11: Prijavni obrazec
15
Slika 3.12: seznam bannerjev
Slika 3.13: obrazec za urejanje bannerjev
3.2.6 Kategorije
Kot že omenjeno so kategorije ostale strani, ki so na voljo končnemu uporabniku preko glavnega
menija. Zaradi uporabe zgolj ene tabele v podatkovni bazi, je v tej tabeli uporabljen stolpec
id_kategorije, kateri nam pove katera kategorija je „starš“ trenutni kategoriji, če pa je ta kategorija
glavna, pa ima polje vrednost -1. Če še enkrat pogledamo zgradbo kategorije ima naslednje
lastnosti:
• id – zaporedna številka kategorije,
• ime – prikazno ime kategorije,
• tip – dve možni vrednosti, dinamičen ali statičen
• prikazi_podkategorije – če ima kategorija podkategorije ali jih prikažemo na dnu vsebine.
• vsebina – HTML koda oz. urejeno besedilo, ki se bo prikazovalo na spletni strani,
• url – zadnji del url – ja npr: http://modrozastudente.si/stran/prikazi/o-nas
• zaporedna_stevilka – katera po vrsti se bo prikazala kategorija.
Zaradi velike podobnosti v grafični podobi seznama, ter implementacije brisanja, urejanja, ter
dodajanja kategorij, bo tukaj predstavljena zgolj novosti pri vsebini, ki jo urejamo z urejevalnikom
ckeditor, primer grafičnega urejevalnika je viden na sliki 3.15. Za urejanje je sicer uporabljen
element <textarea>, ki ga z ustrezno Javascript kodo spremenimo da postane bogat urejevalnik
vsebine, primer inicializacije CKEditorja prikazuje slika 3.16.
16
Slika 3.14: izvorna koda za dodajanje, brisanje in urejanje bannerjev
Kot že omenjeno mora biti url vedno različen oz. unikaten, zato da lahko kontrolnik poišče ustrezno
kategorijo (novico) v podatkovni bazi, pri izbiri želenega url naslova moramo biti pozorni na
naslednja pravila:
• naslov vsebuje samo znake angleške abecede, ter števke (0 – 9),
• zaželena je uporaba malih črk,
• naslovi se v podatkovni bazi ne smejo podvajati.
Da bi preprečili podvajanje naslovov se le ti sprotno preverjajo ko uporabnik tipka želeni url naslov
s pomočjo Javascript funkcije prikazane na sliki , kjer preko AJAX - a pokliče PHP skript(slika
3.18), ki preveri ali je naslov veljaven in ga uporabnik lahko uporabi.
17
Slika 3.15: urejevalnik CKEditor
Slika 3.16: inicializacija CKEditorja
3.2.7 Nastavitve
Administrator ima možnost urejanje nekaterih nastavitev, kot so denimo ključne besede, copyright
besedilo, opis spletne strani, vklop napisa pri bannerjih, prikaz pik na bannerjih (takrat ko jih je več)
ter email na katerega jim lahko uporabniki pišejo. Seznam nastavitev je viden na sliki 3.19.
Administrator želeno vrednost spremeni tako da spremeni vrednost v polju za urejanje (sredinski
stolpec) ter klikne na moder gumb uredi, ki ustreznemu kontrolniku pove katero nastavitev mora
posodobiti.
18
Slika 3.17: AJAX zahteva za preverjanje pravilnosti url - ja
Slika 3.18: PHP skripta za preverjanje unikatnosti url - ja
3.2.8 Novice
Način upravljanja novic je podoben načinu upravljanja kategorij, ključna razlika je ta, da novic ne
moramo gnezditi (jih kategorizirati, določiti „starša“). Za upravljanje url naslovov skrbi ista
Javascript funkcija kot je vidna na sliki 3.17, skripta ki preveri unikatnost url naslova novic pa je
prikazana na sliki 3.20.
3.2.9 Socialna omrežja
Pri socialnih omrežjih mora administrator vnesti ime socialnega omrežja (Facebook, Twitter) in
ustrezno embed kodo, ki jo pridobi od izbranega ponudnika storitev. Ta embed koda se potem na
spletni strani prikaže desno pod bannerji kjer se nahajajo vsa socialna omrežja, primer embed
kode za Facebook stran za združenje modro za študente je viden na sliki 3.21.
19
Slika 3.19: seznam nastavitev
Slika 3.20: preverjanje unikatnosti url naslova novic.
3.3 Projekt - spletna stran FlawlessCode
Predstavitvena spletna stran skupine FlawlessCode služi predstavitvi skupine, ki deluje znotraj
podjetja TOM88 d.o.o. Končni izgled strani je viden na sliki 3.22 oz. na naslovu http://flawless-
code.com/site.
3.3.1 Načrtovanje
Skupaj z ekipo smo najprej določili zahteve spletne strani, ki so sledeče:
• vsa vsebina je vidna na enem naslovu,
• vsebina se prikazuje po straneh/sekcijah, pri čemer je lahko vidna samo ena sekcija na
enkrat, vsaka sekcija zavzame celotno stran oz. vidno polje brskalnika,
• pomikanje po spletni strani s smernimi tipkami na tipkovnici,
• pomikanje po spletni strani z miškinim koleščkom,
• pomikanje po strani z uporabo glavnega menija,
• vsebina strani (sekcije):
20
Slika 3.21: koda za vdelavo za Facebook
Slika 3.22: začetna stran spletne strani flawless-code.com
◦ domov,
◦ kaj delamo,
◦ kako delamo,
◦ projekti:
▪ projekt 1,
▪ …,
▪ projekt n,
◦ kontakt
• podpora večim jezikom (slovenščina, angleščina, nemščina, …)
• vsebina, ki se prilagaja širini okna (web responsive design).
Ko smo določili vsebino in osnovni izgled je grafični oblikovalec pripravil izgled posameznih strani,
sledilo je načrtovanje podatkovne baze, shema le te je vidna na sliki 3.23.
3.3.2 Implementacija strani
Sedaj je sledila implementacija, da ni bilo potrebno vsega pisat na novo sem uporabil jQuery
knjižnico fullPage.js kjer z uporabo ustreznih css razredov v HTML kodi ter ustrezno inicializacijo
knjižnice sama pripravi celotno stran primer inicializacije je viden na sliki 3.24. Knjižnico fullPage.js
je razvil Alvaro Trigo. Za implementacijo je bil prav tako ponovno uporabljen programski jezik PHP
ter ogrodje CodeIgniter.
21
Slika 3.23: shema podatkovne baze
3.3.3 Sprememba jezika
V glavnem meniju je uporabniku na voljo meni z jeziki, ki jih spletna stran ponuja. Ko uporabnik
klikne na želen jezik se v ustreznem kontrolerju pokliče metoda, ki nastavi želen jezik, v primeru da
uporabnik prvič pride na stran pa isti kontrolnik najprej preveri, kakšen jezik uporablja njegov
spletni brskalnik in če njegovega jezika ni na voljo se nastavi privzeti jezik, ki je uporabljen v
podatkovni bazi. Odločitev o uporabi želenega jezika se shrani v poseben piškotek, tako spletna
stran naslednjič ve, v katerem jeziku bi uporabnik želel pregledati spletno stran. Postopek
shranjevanja v piškotek ter postopek izbire jezika je viden na sliki 3.25.
22
Slika 3.24: inicializacija knjižnice fullPage.js
3.3.4 Vsebina, ki se prilagaja širini okna
Da se je vsebina spletne strani prilagajala širini okna klienta so bili uporabljeni tako imenovani
media query – ji s pomočjo katerih se velikost elementov spreminja glede na interval, ki je določen
v posameznem media query – ju. Prav tako kot širino elementov moramo tudi spremeniti velikost
pisave, da ohranimo lepši izgled spletne strani, preprost primer media query – ja je viden na sliki
3.26, če je širina okna manjša ali enaka 1290px potem elementu z id – jem „glava“ spremeni
notranji odmik levo in desno na 6% in zgoraj na 18px. S spreminjanjem velikostim elementom in
načinom prikaza le teh lahko popolnoma spremenimo izgled spletne strani na mobilnih telefonih,
tablicah ter osebnih računalnikih. Na sliki 3.22 je viden primer kako izgleda spletna stran na
osebnih računalnik, medtem ko slika 3.27 prikazuje izgled aplikacije na pametnem telefonu, kjer je
ekran ozek. Desno zgoraj se pojavi poseben gumb, s pomočjo katerega dostopamo do glavnega
menija, ki se zapelje iz desne strani, kot v nekaterih mobilnih aplikacijah.
23
Slika 3.25: kontrolnik glavne strani
24
Slika 3.26: preprost media query
Slika 3.27: prikaz spletne strani na pametnem
telefonu
4 SKLEP
Praktično izobraževanje v podjetju TOM88 d.o.o. je bilo dinamično in zanimivo, vključen sem bil v
načrtovanje in razvoj dveh spletnih strani, tako sem nadgradil osnovno znanje o jezikih PHP,
Javascript, HTML, CSS ter na novo spoznal ogrodja za PHP, podrobneje CodeIgniter, katerega
predhodno nisem poznal.
Spoznal sem da lahko pride do odstopanj pri končani spletni strani, ki jo naložimo na strežnik,
zaradi recimo različnih verzij PHP ki jih podpira Apache strežnik tako da pride do napak v
delovanju spletne strani.
Prav tako sem pridobil izkušnje v komunikaciji pri delu v ekipi in sodelovanju med člani le te, za kar
se moram zahvaliti celotni ekipi TOM88 d.o.o.
25
