Web applications development with Bootstrap 3 and Laravel 5

Full text

(1) . Ozren Blanuša . IZDELAVA SPLETNIH APLIKACIJ S POMOČJO OGRODIJ BOOTSTRAP 3 IN LARAVEL 5 . Diplomsko delo . Celje, avgust 2016 .

(2) . IZDELAVA SPLETNIH APLIKACIJ S POMOČJO OGRODIJ BOOTSTRAP 3 IN LARAVEL 5 Diplomsko delo Študent:  . Ozren Blanuša  . Študijski program:  . Univerzitetni študijski program Medijske komunikacije . Smer: . Interaktivna grafična komunikacija  . Mentor:  . Doc. dr. Marko Höbl, univ. dipl. ing.  . Lektorica: . Mateja Renko, univ. dipl. prof. slov. jez. s knjiž. in filozofije . . . . . .

(3) Izdelava spletnih aplikacij v ogrodjih Bootstrap 3 in Laravel 5 . Ključne besede: HTML5, CSS3, Bootstrap, Laravel, HTTP, WAMP UDK: Povzetek . Spletne aplikacije imajo podobno strukturo, kar je njihove razvijalce v preteklosti vodilo v razvoj različnih spletnih ogrodij, s katerimi so želeli doseči hitrejši razvoj aplikacij. V ta namen so nastala številna ogrodja, od katerih sta trenutno najbolj popularna Bootstrap 3 in Laravel 5. Slednji sta bili v diplomskem delu podrobno preučeni in praktično uporabljeni na primeru razvoja lastne spletne aplikacije, imenovane ''Dogodko''. Potrjeno je bilo, da je razvoj aplikacije bistveno hitrejši in lažji kot brez uporabe ogrodij, saj sta raziskani in uporabljeni ogrodji zasnovani tako, da omogočata uporabo že napisane kode oziroma modulov. . .

(4) Web applications development with Bootstrap 3 and Laravel 5 frameworks . Key words: HTML5, CSS3, Bootstrap, Laravel, HTTP, WAMP UDK: Abstract Web applications have a similar structure, which in the past lead their developers to speed up the development process by developing different web frameworks. Numerous of different frameworks were developed, from which most popular are currently Bootstrap 3 and Laravel 5. In our thesis we researched both of this frameworks and practically applied them in developing our own web application called ''Dogodko''. It was confirmed that web application development is much faster and easier than without the use of frameworks, since both of the frameworks that were researched and used, are designed to allow the use of already written code and modules. . .

(5) KAZALO VSEBINE 1 UVOD. . 2 TEHNOLOGIJE ZA RAVZOJ SPLETNIH APLIKACIJ. . 2.1 Kratek pregled uporabljenih spletnih tehnologij. . 2.2 Potek komunikacije med brskalnikom in strežnikom. . 2.3. . Strežniški skriptni jezik PHP. 3 ODZIVNI NAČIN OBLIKOVANJA SPLETNIH STRANI. . 3.1 Ogrodje Bootstrap. . 3.2 Odprtokodno PHP ogrodje Laravel 5. . 4 IZDELAVA SPLETNE APLIKACIJE Z RAZLIČNIMI PRISTOPI. . 4.1 Grafični vmesnik spletne aplikacije. . 4.2 Strežniški vmesnik spletne aplikacije. . 4.3. . Primerjava načinov izdelave spletne aplikacije. 5 SKLEP. . 6 VIRI IN LITERATURA. . . .

(6) KAZALO SLIK Slika 2.1: Diagram osnovne HTTP komunikacije. . Slika 2.2: Diagram dinamične komunikacije.. . Slika 3.1: Menijska vrstica.. . Slika 3.2: Menijska vrstica na manjšem zaslonu. . Slika 3.3: Številčna vrstica.. . Slika 3.4: Osnovna komponenta za manjše slike.. . Slika 3.5: Opozorila Alert komponente.. . Slika 3.6: Diagram MVC arhitekture.. . Slika 4.1: Postopno izboljševanje.. . Slika 4.2: Osnovna komunikacija med odjemalcem in strežnikom.. . Slika 4.3: Komunikacija med odjemalcem in strežnikom z AJAX pristopom.. . . KAZALO PROGRAMSKE KODE Programska koda 2.1: Definicija HTML 4 dokumenta.. . Programska koda 2.2: Definicija HTML 5 dokumenta.. . Programska koda 2.3:HTML koda za vstavljanje slik.. . Programska koda 2.4: HTML 5 koda za vstavljanje slik.. . Programska koda 2.5: Primer uporabe atributa <placeholder>.. . Programska koda 2.6: HTML 5 koda za vstavljanje avdio datotek.. . Programska koda 2.7: HTML 5 koda za vključitev video datoteke.. . Programska koda 2.8: CSS koda za spremembo velikosti in barve pisave za element <h1>.. . Programska koda 2.9: Sintaksa Php kode.. . Programska koda 3.1: Primer pravilne vključitve Bootstrap ogrodja v HTML dokument.. . Programska koda 3.2: Primer uporabe odzivnega Bootstrap stolpca.. . Programska koda 3.3: Ustvarjanje novega Kontrolerja v terminalni vrstici. [2]. . KAZALO TABEL Tabela 4.1: Bootstrap mrežnega sistema.. . .

(7) . .

(8) UPORABLJENE KRATICE HTML – Hypertext Markup Language (označevalni jezik hiperbesedila) CSS – Cascade Styling Sheet (nabor kaskadnih slogov) MP3 – MPEG Audio Layer III PHP – Hypertext Preprocessor (dinamični skriptni jezik) WAMP – Windows, Apache, MySQL, Php (paket programske opreme za okolje Windows) HTTP – HyperText Transfer Protocol (glavna metoda za prenos informacij na spletu) . 1 UVOD Začetki svetovnega spleta segajo v devetdeseta leta dvajsetega stoletja. V nekaj več kot tridesetih letih je svetovni splet doživel bliskovit razvoj od preprostih in predstavitvenih spletnih strani do bolj kompleksnih spletnih aplikacij, prilagojenih za uporabo naprav različnih velikosti. Spletne aplikacije kot nadgradnja spletnih strani danes omogočajo interakcijo med uporabnikom in aplikacijo. Razvoj spletnih aplikacij tudi danes pogojuje razvoj različnih spletnih tehnologij, med katere uvrščamo tako imenovana ogrodja (angl. Frameworks), ki jih razvijalci spletnih aplikacij ter druge programske opreme uporabljajo za lažje, hitrejše in bolj pregledno pisanje ter vzdrževanje kode.   Vzporedno z razvojem tehnologije, ki se uporablja v svetovnem spletu, se je razvijala tudi tehnologija naprav, s pomočjo katerih uporabniki dostopajo do svetovnega spleta. V tem diplomskem delu smo se osredotočili na težave pri razvijanju spletnih aplikacij, ki se pojavljajo zaradi različnih velikosti zaslonov naprav, na katerih uporabniki te aplikacije uporabljajo. Prav tako smo se osredotočili na strežniški del spletne aplikacije, brez katerega ne more delovati nobena spletna aplikacija. V diplomskem delu smo preučili in predstavili spletni ogrodji za razvoj spletnih aplikacij. V ta namen smo za grafični vmesnik uporabili ogrodje Bootstrap 3 in za strežniški vmesnik . .

(9) ogrodje Laravel ter skozi njuno uporabo spoznali označevalni jezik HTML in HTML 5, stilski jezik CSS in CSS 3 ter skriptni jezik PHP. Na strežniški strani smo na kratko preučili tudi komunikacijski protokol http, strežniški sistem WAMP in podatkovno bazo MySQL.  . Opredelitev oziroma opis problema Izdelovalcem spletnih aplikacij so danes na razpolago številna orodja oziroma programski jeziki, s katerimi je mogoče izdelati bodisi enostavne bodisi kompleksne spletne aplikacije. Eno izmed takšnih orodij so tako imenovani »Frameworki« oziroma ogrodja, katerih uporaba izdelovalcu, programerju, omogočajo hitrejši in enostavnejši način izdelovanja spletnih aplikacij.   Osrednji problem, ki ga bomo preučevali v diplomski nalogi, so prednosti in slabosti uporabe programskih ogrodij Bootstrap 3 in Laravel 5. Preko praktičnega primera izdelave všečne in atraktivne spletne strani bomo analizirali omenjeni ogrodji ter tako poskušali dokazati, da lahko z uporabo ogrodij precej prihranimo pri času izdelave, kar vodi do manjšega števila vrstic kode, to pa posledično pomeni tudi manj možnosti za napake.   Cilji in namen naloge Glavni cilji, ki jih želimo doseči so: 1. Dokazati, da je uporaba ogrodij Bootstrap 3 in Laravel 5 za razvoj spletne strani hitrejša in natančnejša v primerjavi z razvojem brez uporabe ogrodij. 2. Z uporabo različnih spletnih jezikov postaviti spletno aplikacijo, ki bo obiskovalcu nudila iskane informacije, skrbniku pa omogočila čim bolj enostavno upravljanje vsebin, in sicer brez znanja programiranja. .

(10) Namen diplomske naloge je preučitev prednosti uporabe Bootstrap 3 in Laravel 5 ogrodij za razvoj, hkrati pa njuna predstavitev in primerjava z ročnim pisanjem programske kode, pri čemer bo končni rezultat odzivna ter prilagodljiva spletna aplikacija, ki bo skrbniku omogočila enostavno upravljanje, in to brez potrebnega programerskega znanja.   Metode dela Metode, ki jih nameravamo uporabiti so: ●. študij virov in literature, . ●. preučitev in primerjava različnih spletnih jezikov in ogrodij ter . ●. vzpostavitev spletne strani.  . Predpostavke in omejitve diplomskega dela Poudarek diplomskega dela je na razvoju interaktivne odzivne (angl. responsive) spletne aplikacije, katere grafični vmesnik bo povezan s strežniškim delom aplikacije. Za postavitev grafičnega vmesnika bomo uporabili ogrodje Bootstrap 3, ki temelji na jeziku HTML in CSS ter ga funkcionalno povezali s strežniškim delom, za katerega bomo uporabili ogrodje Laravel, ki temelji na programskem jeziku PHP.   Omejitve diplomskega dela so naslednje: ●. Za interaktivnost elementov ni dovolj samo uporaba ogrodja Bootstrap, temveč je potrebno vključiti tudi različne Javascript knjižnice. . ●. Za pravilno in funkcionalno delovanje spletne aplikacije je potrebno vzpostaviti strežnik s podatkovno bazo, na katerem se bo aplikacija izvajala. . ●. Za pravilno postavitev elementov na grafičnem vmesniku je potrebno upoštevati različne velikosti zaslonov ter tako prilagoditi samo postavitev elementov. . Pregled poglavij V drugem poglavju bomo naredili kratek pregled uporabljenih spletnih tehnologij, s katerimi bomo zgradili spletno stran ter raziskali razliko med HTML in HTML 5 jezikom oziroma ugotovili, kaj je novega v HTML 5 in katere značke se več ne uporabljajo v primerjavi s . .

(11) HTML 4 jezikom. Enako bomo naredili s primerjavo med CSS 3 in CSS 2. Sledila bo opredelitev prvega od dveh ogrodij, ki jih bomo uporabljali, in sicer ogrodje Bootstrap 3 ter skupaj z njim predelali še odzivni (angl. responsive) dizajn. V naslednjih korakih bo sledil pregled tehnologij, uporabljenih za backend razvoj. Pogledali bomo, kaj pomeni PHP in za kaj se uporablja ter kaj je ogrodje Laravel 5 in kako ga uporabiti za lažje in bolj efektivno pisanje kode v PHPju.   Ker PHP za svoje delovanje potrebuje strežnik, bomo vzpostavili lokalni strežnik, kljub temu da ima ogrodje Laravel svoj strežnik in lahko deluje na njem. Za demonstracijo strani in ker opravljamo diplomsko delo v Windows okolju, bomo postavili lokalni strežnik v delovnem okolju WAMP, pri čemer kratica pomeni Windows, Apache, MySql in PHP. Z namestitvijo WAMP paketa torej dobimo vse, kar potrebujemo za pravilno in funkcionalno delovanje spletne strani. Večina spletnih strani, tudi od najbolj osnovnih fotografskih galerij pa do zapletenih spletnih trgovin. za svoje delovanje uporablja tudi podatkovne baze. Ena izmed najbolj priljubljenih podatkovnih baz je podatkovna baza MySql, katere pomen in uporaba bo tudi podrobneje predstavljena.   Tretje poglavje bomo namenili vidnemu, torej »frontendu« spletne strani. S pomočjo HTMLja bomo postavili osnovo spletne strani, nato pa primerjali standardni CSS z Bootstrap 3 ogrodjem. Za konec poglavja bomo ugotavljali, kako lahko s pomočjo Bootstrapa 3 hitro in efektivno naredimo odzivni dizajn. Četrto poglavje bo predstavilo zadnji del (angl. backend) spletne strani, kjer si bomo podrobneje pogledali, kako poteka komunikacija s strežnikom, ter primerjali standardni PHP z ogrodjem Laravel 5. V petem poglavju bomo povzeli celotno vsebino diplomske naloge in predstavili, do kakšnih zaključkov smo prišli oziroma ali smo dosegli zastavljene cilje naloge. Zadnje poglavje diplomskega dela je namenjeno predstavitvi virov in literature.   .

(12) . . .

(13) 2 TEHNOLOGIJE ZA RAVZOJ SPLETNIH APLIKACIJ Za razvoj spletnih aplikacij je na voljo veliko različnih spletnih programskih jezikov in tehnologij. Za potrebe diplomskega dela smo izbrali za začetnike najbolj popularne jezike in sicer:   . označevalni jezik HTML . . stilski jezik CSS . . skriptni jezik PHP . . komunikacijski protokol http . . 2.1 Kratek pregled uporabljenih spletnih tehnologij V tem poglavju bomo predstavili jezike in tehnologije, uporabljene za prikaz in delovanje spletne strani. Izhajajoč iz ciljev ter namena naloge, kjer bomo podrobneje predstavili in uporabili pri izdelavi spletne aplikacije ogrodji Laravel 5 in Bootstrap 3, bomo v tem poglavju opredelili osnovne pojme uporabljenih tehnologij in spletnih jezikov teh dveh ogrodij, in sicer HTML, HTTP ter CSS. HTML in HTTP HTML, ki predstavlja okrajšavo za HyperText Markup Language, je od pojava svetovnega spleta v začetku 90. let 20. stoletja postal eden vodilnih spletnih jezikov. HTML ni programerski oziroma skriptni jezik, temveč označevalni jezik, kar pomeni, da gre za nabor oznak oziroma značk (angl. tags), preko katerih se opiše in posledično tudi prikaže vsebina spletne strani [1]. Spada v skupino Client Side jezikov, kar pomeni, da se njegovo delovanje izvaja v uporabnikovem brskalniku in preko HTTP protokola komunicira s strežnikom.   HTTP je komunikacijski standard, ki se uporablja za komunikacijo oziroma za izvajanje zahtev in odzivov, ki se pojavijo med spletnim brskalnikom, nameščenim na uporabnikovem računalniku in spletnem strežniku, na katerem so shranjene datoteke, potrebne za prikaz in delovanje spletne strani [17]. Naloga spletnega strežnika je sprejemanje uporabnikove zahteve .

(14) preko spletnega brskalnika in odzivanje na zahtevo na način, da preko uporabnikovega spletnega brskalnika prikaže želeno vsebino spletne strani [17].   Zelo pomembno vlogo tako pri oblikovanju spletnih strani kot pri spletnih aplikacijah ima jezik CSS, katerega kratica pomeni Cascading Style Sheets. CSS se uporablja za stilsko oblikovanje spletnih aplikacij oziroma strani, v HTML kodo pa ga vključimo preko značk, ki jim definiramo razrede (angl. Class) [5]. Tem značkam v datoteki s končnico .css določimo lastnosti oziroma atribute, kako naj se obnašajo, katere lastnosti (barva, velikost pisave itd.) naj imajo elementi, na katere se značke nanašajo. HTML 5 HTML je preprost tekstovni dokument, kateremu so dodane določene značke (tags), ki omogočajo oziroma določajo, kako naj se določen element prikaže na spletni strani oziroma v spletnem brskalniku. Značilnost značk je, da se pojavljajo v oglatih oklepajih ter da vsaj večina njih nastopa v parih [17]. Vsak HTML dokument se začne z deklaracijo oziroma definicijo dokumenta, ki spletnemu brskalniku pove, za kateri tip dokumenta gre, z namenom da bo leta uporabniku znal pravilno prikazati vsebino dokumenta. V prejšnjih verzijah je v deklaraciji dokumenta bilo potrebno opredeliti, za kakšen tip HTML dokumenta gre, in sicer so bile na voljo tri opredelitve. Za čisto označevalno kodo brez nepotrebnega označevanja, ki se uporablja skupaj s CSSjem, se je uporabljala definicija Strict, definicija Transitional se je uporabljala, kadar so koristile predstavitvene možnosti HTMLja in definicija Frameset za uporabo HTML okvirjev v samem dokumentu.   V nadaljevanju bomo, izhajajoč iz zgornjega opisa strukture HTML dokumenta, prikazali ključne razlike med HTML 4 in HTML 5, ki je nadgradnja HTML 4, in tako posledično tudi nadgradnja vseh prejšnjih verzij HTML jezika. Razlike bomo prikazali na spodnjem primeru, kjer si bomo ogledali definicijo za Transitional tip HTML dokumenta: <!DOCTYPE . HTML . PUBLIC . "//W3C//DTD . HTML . 4.01 . Transitional//EN" . "http://www.w3.org/TR/html4/loose.dtd"   . Programska koda 2.1: Definicija HTML 4 dokumenta. .

(15) HTML 5 je zgornjo definicijo zelo poenostavil in vse skupaj strnil v dve besedi: [3] <!DOCTYPE HTML> . Programska koda 2.2: Definicija HTML 5 dokumenta. Nato sledita znački <html></html>, med katere damo vse ostale značke in spletnemu brskalniku pove, da naj pričakuje HTML zapis. Tej znački sledita znački <head></head>, med katere damo informacije o dokumentu, kot so naslov spletne strani <title>Ime spletne aplikacije</title>, . ki se bo pojavil v zavihku strani. Iskalniki, kot je npr. Google, pa . naslove uporabljajo za indeksiranje spletnih strani. Metadata podatke, s katerimi lahko brskalniku podamo še dodatne informacije, npr. če želimo, da po nekem času uporabniku prikaže . neko . drugo . spletno . mesto . <meta . content="10;url=http:// nekadrugastran.com">, . httpequiv . = . "refresh" . kar bo uporabnika čez deset sekund . prestavilo na drugo stran. Podatke o povezavah do zunanjih datotek kot so CSS <link rel="stylesheet" type="text/css" href="css.css"> in . JavaScript datoteke <script . type="text/javascript" src="javascript. js"></script>. V HTML5 . pri dodajanju . zunanjih datotek ni več potrebno pisati type atributa, tako lahko povezavo do zunanje datoteke napišemo . tako: . <link rel="stylesheet" href="css. css"> in <script . src="javascript.js"></script>. . Nato sledita znački <body></body>, med kateri damo vse ostale značke, s katerimi želimo oblikovati vsebino spletne strani. HTML 5 se v veliki meri izogiba uporabi značke <div>, saj leta nima nobene semantične strukture. Za njeno nadomestilo je uvedel nove semantične elemente, kot so <header>, <footer>, <section>, <article>, <aside> itd., kar sicer ne pomeni, da je uporaba značk <div> popolnoma opuščena, le njena uporaba se je nekoliko zmanjšala oziroma naj bi se . značka <div> uporabljala le takrat, ko ni boljšega elementa za določen namen. Primer slednjega je, ko želimo blok kode zaviti v določen element z namenom postavitve elementa na točno določeno pozicijo na strani in pri tem ni boljše rešitve, kot je uporaba <div> značke [4]. .

(16) Naslednja novost pri HTML5 je <figure> značka, ki olajša dodajanje teksta k slikam oziroma napisa na slike, kjer prej ni bilo nobene semantične povezave med sliko in pripadajočim tekstom. V prejšnjih verzijah je koda takšna: <img src="pot/do/slike" alt="O sliki (v primeru, da se slika ne prikaže, se napiše tekst, ki opiše vsebino slike)" /> <p>Slika Maribora</p>  to je tekst, ki se izpiše na sliki. . Programska koda 2.3:HTML koda za vstavljanje slik. HTML 5 je značko <figure> v povezavi s <figcaption> semantično povezal v smiselno celoto: <figure>     <img src="pot/do/slike" alt="O sliki" />     <figcaption>         <p>Slika Maribora</p>     </figcaption> </figure> . Programska koda 2.4: HTML 5 koda za vstavljanje slik. Naslednji gradnik je <placeholder>, ki najbolje deluje v povezavi z značko <input>, ki se uporablja pri obrazcih. Sintaksa kode, ki zahteva (oziroma kjer je) prostor za vpis email naslova, bi bila napisana tako: <input name="email" type="email" placeholder="Vpišite vaš naslov…" /> . Programska koda 2.5: Primer uporabe atributa <placeholder>. V okencu, kjer je možen vpis, bo tako z rahlo sivo barvo pisalo: Vpišite vaš naslov … Ta napis bo tam ostal ne glede na to, ali bo uporabnik izbrisal ta tekst izbrisal. V prejšnjih verzijah HTMLja se je za to uporabljal atribut <value>, vendar je napis izginil, če je . .

(17) uporabnik kliknil vstran ali izbrisal tekst. Tako je za enako rešitev, kot je v HTML 5, bilo potrebno nekaj vrstic JavaScript kode.   V izogib pisanju JavaScript kode pa je poskrbel tudi atribut <required>, ki prav tako najbolje deluje v povezavi z <input> značko pri izpolnjevanju obrazcev. Če na koncu zgornje vrstice dodamo atribut <required>, to lahko storimo na dva načina, in sicer napišemo samo <required> ali pa ga napišemo bolj strukturirano: <required="required">, bo uporabnik . opozorjen, da mora izpolniti določeno polje, v nasprotnem primeru ne bo mogel poslati oziroma zaključiti obrazca. Prav tako je HTML 5 velik napredek prinesel na področju avdio in video datotek. V prejšnjih verzijah so za poslušanje avdio vsebin in prikaz video vsebin bili potrebni t.i. vtičniki (angl. third party plugins), HTML 5 pa je uvedel <audio> oziroma <video> značko ter se tako znebil uporabe vtičnikov. Različni brskalniki nudijo različno podporo za obe omenjeni datoteki. Tako moramo za enako avdio oziroma video datoteko uporabiti dve povezavi z različnima končnicama. Primer bomo pokazali za avdio datoteko: <audio autoplay="autoplay" controls="controls">     <source src="file.ogg" />     <source src="file.mp3" />       <a>Download this file.</a> </audio> . Programska koda 2.6: HTML 5 koda za vstavljanje avdio datotek. Medtem, ko bodo ostali brskalniki znali prebrati mp3 končnico, Firefox zahteva končnico .ogg. Podobno je tudi pri video datotekah, kjer brskalniki berejo mp4 končnico, medtem ko Firefox zahteva .ogv končnico. Pri video znački pa je HTML 5 postregel še z eno novostjo, in sicer s <preload> atributom. S tem atributom lahko uporabniku prihranimo nekaj časa, saj z njim prednaložimo video vsebino na strani, ki je, na primer, posebej namenjena predvajanju video vsebin. Zraven <preload> atributa moramo dodati tudi atribut <controls>, saj se drugače video vsebina pojavi le kot slika, z atributom <controls> pa uporabniku omogočimo, da si ogleda video vsebino. Koda je sledeča: .

(18) <video preload controls> . Programska koda 2.7: HTML 5 koda za vključitev video datoteke. HTML 5 standard naj bi bil dokončan in dokončno sprejet šele leta 2022. Predvidevamo lahko, da bo HTML 5 postregel s še več koristnimi funkcionalnostmi ter še v večji meri nadomestil JavaScript kodo, ki zahteva veliko več vrstic za svoje delovanje kot HTML 5.   Vsem različicam jezika HTML je skupno, da gre le za označevalni jezik, kar pomeni, da gre samo za osnovni prikaz elementov na spletni strani. Na primer velikost pisave in njena barva sta določeni z lastnostmi brskalnika, pri čemer gre največkrat za velikost 16 pikslov in črno barvo. Z namenom doseganja razlikovanja strani, npr. da lahko uporabljamo različne pisave, različne barve, velikosti in oblike ter pozicije elementov, pa uporabljamo CSS (Cascading Style Sheets), o katerih bomo govorili v naslednjem podpoglavju. CSS in CSS 3 Cascading Style Sheets oziroma bolj poznano kot kratica CSS bi v prevodu pomenilo nabor kaskadnih stilov. CSS je bil narejen z namenom strogega ločevanja vsebine in predstavitve dokumenta. To ne pomeni, da CSS kode ne moremo pisati direktno v HTML dokument, vendar je bolje, če to storimo v ločenem dokumentu in v HTML dokumentu preko <link> značke pokažemo le pot, kje se nahaja CSS dokument [5]. Namen CSSja je torej oblikovanje, dodajanje lastnosti in postavitev HTML elementov. Kljub temu da je delovanje CSSja pogojeno s HTML jezikom, se njegova sintaksa razlikuje od HTML jezika. V CSSju kličemo elemente, ki smo jih določili v HTMLju, preko idjev, classov ali samo preko standardnih HTML značk, kot je npr. <h1>.   .

(19) h1 {          fontsize: 20px;          color: red;   } . Programska koda 2.8: CSS koda za spremembo velikosti in barve pisave za element <h1>. Tako kot se je razvijal jezik HTML, se je razvijal tudi jezik CSS. Najnovejša različica CSS jezika je CSS 3, ki je nadgradil prejšnje različice tako, da jim je dodal veliko novih funkcij, selektorjev in psevdo razredov. CSS 3 je uvedel nove atribute za HTML elemente, za katere je prej bilo potrebno uporabljati JavaScript, JQuery ali podobne skriptne jezike, kar pomeni manj kode ter posledično lažje in hitrejše prikazovanje v brskalnikih [6]. V nadaljevanju si bomo pogledali nekatere novosti, ki jih je uvedel CSS 3. Ena izmed poglavitnih izboljšav, ki skrajša čas kodiranja kot tudi čas nalaganja spletne strani v brskalniku je, da se ozadja (slike) ne nalagajo več kot structural enhancements (kot je npr. PNGji za zaobljene robove in gradiente [7], temveč z atributom backgroundsize in borderradius lahko določimo potrebne parametre [6]. Novost je tudi atribut opacity oziroma prosojnost, ki mu s parametri med 0 in 1 lahko določimo stopnjo prosojnosti. Na atribut lahko damo slike ali pa na same elemente. Prav tako mu lahko določimo tudi barvo [6]. V prejšnjih različicah CSS so se programerji soočali s težavo senčenja, saj je elemente, ki so vsebovali senco, bilo najlažje narediti v kakšnem grafičnem programu in jih nato uvoziti ali pa so za senčenje uporabljali različne skriptne jezike. V prvem primeru je to pomenilo, da je senca takšna kot je, če pa se je hotelo kaj spremeniti, je moralo biti narejeno na originalu v grafičnem programu. V drugem primeru pa je to pomenilo veliko vrstic kode, kar je seveda bilo zamudno in neprijazno do brskalnika. CSS 3 je to težavo rešil z uvedbo boxshadow atributa, kjer senco, barvo ter moč sence lahko določimo s piksli v eni sami vrstici kode [8]. HTML 5 je uvedel značko <canvas> oziroma platno za 2D animacijo elementov, CSS 3 pa je temu dodal še svoj doprinos in sicer tako, da z različnimi atributi in parametri ustvarjamo . .

(20) animacije, ki ne samo da so izpodrinile FLASH animacije, temveč so v večini primerov izpodrinile tudi JavaScript in JQuery, ki sta se uporabljala za prikaz in delovanje animacij [8]. Kot uporabne novosti v CSS 3 velja omeniti tudi Zebrastripnig in Boxsizing. ZebraStriping se uporablja za poudarjanje vsakega drugega elementa v seriji, za kar se je prej uporabljal JavaScript. To poteka s pomočjo psevdo razreda »nthchild«, ki omogoča izbiro in manipulacijo vsakega lihega elementa. Na primer, v tabeli vsako liho vrstico obarvamo modro, medtem ko sode vrstice ostanejo bele. Boxsizing pa nekoliko olajša samo definicijo postavitve spletne strani in nadomešča oziroma izpodbija prej uporabljani float atribut [8]. CSS 3 je torej prinesel veliko novosti, ki ne samo da skrajšajo čas pisanja kode, temveč tudi skrajšajo čas, ki ga brskalnik potrebuje za nalaganje spletne strani, in sicer tako, da je izpodrinil veliko JavaScript in JQUERY kode ter tako zmanjšal število vrstic kode, kar posledično pomeni tudi manjše datoteke, ki jih mora brskalnik obdelati, da pravilno prikaže spletno stran.   . 2.2 Potek komunikacije med brskalnikom in strežnikom Komunikacija med brskalnikom, ki je upravljan s strani uporabnika in spletnim strežnikom, na katerem so shranjene datoteke, potrebne za prikaz in delovanje spletne strani, poteka preko HTTP protokola.   Potek komunikacije lahko razdelimo na sedem korakov. V prvem koraku uporabnik v svoj spletni brskalnik vnese želeni spletni naslov, poznan kot URL, ki je sestavljen iz več delov: http://www.mojnaslov.com (uporabnik lahko pri pisanju naslova vnese samo mojnaslov.com). Ta spletni naslov imenujemo tudi domena. S tem ukazom je uporabnikov brskalnik prejel zahtevo, da naj poišče IP naslov želene spletne strani. V drugem koraku spletni brskalnik prevede vneseni naslov v IP naslov, ki je sestavljen iz štirih parov številk, ločenih s pikami. Npr. IP naslov za Googlovo spletno stran je http://74.125.224.72. V tretjem koraku spletni brskalnik s pomočjo tehnologije DNS poveže vnesen naslov z odgovarjajočim IP naslovom, kar omogoči, da v četrtem koraku želena zahteva pride na točno določeno mesto, ki vsebuje točno določene datoteke za to spletno stran. V petem koraku se zahteva preseli iz spletnega .

(21) brskalnika na spletni strežnik, kjer ta na svojih trdih diskih poišče potrebne datoteke ter jih v šestem koraku vrne v spletni brskalnik, ki jih v sedmem koraku prikaže uporabniku. Slika 2.1 prikazuje potek osnovne http komunikacije [17]. . Slika 2.1: Diagram osnovne HTTP komunikacije [17]. . .

(22) . . .

(23) 2.3Strežniški skriptni jezik PHP PHP ali Hypertext Preprocessor je zelo razširjen skriptni programski jezik, namenjen za razvoj dinamičnih spletnih strani. Za njegovo delovanje potrebujemo strežnik, na katerem se izvajajo določene zahteve oziroma interakcija z uporabnikom [1]. PHP je leta 1994 razvil Rasmus Lerdorf z namenom, da bi lahko spremljal, kdo vse si je oziroma koliko uporabnikov si je ogledalo njegovo domačo spletno stran. Tako je originalna kratica PHPja »Personal Home Page«. Jezik je kmalu postal zelo priljubljen med razvijalci spletnih strani, saj je precej enostaven za učenje [1]. Priljubljenost PHPja je vodila do tega, da so za njegovo lažjo uporabo oziroma bolj enostavno pisanje PHP kode nastala številna ogrodja (angl. Framework), kot so npr. CodeIgniter, Symphony, Phalcon in danes najbolj priljubljeno ogrodje Laravel. PHP jezik uporabljamo za dinamične spletne strani, npr. za oddajo obrazca, medtem ko HTML uporabljamo za prikaz vsebine spletne strani v brskalniku. Sintaksa PHP jezika je naslednja:   <?php echo »Pozdravljen svet!« ?> . Programska koda 2.9: Sintaksa PHP kode. Prvi par <?php pove, da bo znotraj tega okvirja PHP koda. Urejanje PHP kode zaključimo s ?>. Beseda echo je funkcija, ki nekaj izpiše v brskalniku, v tem primeru se v brskalniku . pokaže izpis »Pozdravljen svet!«.   PHP omogoča interakcijo med uporabnikom in »računalnikom«. To je npr. vidno pri izpolnjevanju obrazca na spletni strani. Vidni del obrazca oblikujemo v HTMLju in CSSju. Uporabnik izpolni določena polja in s pritiskom na gumb »pošlji« pošlje obrazec na strežnik, ki razume PHP jezik. Obrazec se nato na strežniku sprocesira. Izpolnjeni podatki se shranijo v podatkovno bazo za nadaljnjo uporabo. Uporabnik pa je s pomočjo PHP funkcije header preusmerjen na drugo stran. Na primer: header(»Location: hvala_da_ste_izpolnili_ obrazec.php«). . .

(24) Dinamična komunikacija s strežnikom Ko v spletno stran vključimo skripti jezik, kot je npr. PHP, ki nam omogoča tudi povezavo s podatkovnimi bazami, postane komunikacija s strežnikom malo bolj zapletena, kot je komunikacija, ki je potrebna za enostavne HTML strani. V primeru, ko spletna stran vsebuje PHP kodo s povezavo do podatkovnih baz, je potrebnih enajst korakov za pravilen prikaz strani v spletnem brskalniku. Potek komunikacije se začne enako kot pri enostavnih spletnih straneh, in sicer tako, da uporabnik v svoj spletni brskalnik vnese želeni spletni naslov. S tem ukazom je uporabnikov brskalnik prejel zahtevo, da naj poišče IP naslov želene spletne strani. V drugem koraku spletni brskalnik prevede vneseni naslov v IP naslov. V tretjem koraku spletni brskalnik s pomočjo tehnologije DNS poveže vnesen naslov z odgovarjajočim IP naslovom. To omogoči, da v četrtem koraku, želena zahteva pride na točno določeno mesto, ki vsebuje točno določene datoteke za to spletno stran. V petem koraku se zahteva preseli iz spletnega brskalnika na spletni strežnik, kjer leta na svojih trdih diskih poišče potrebne datoteke. V šestem koraku in ima strežnik shranjeno spletno stran in ugotovi, da ta stran vsebuje PHP kodo. Zato jo pošlje v PHP prevajalnik. V sedmem koraku PHP prevajalnik izvrši PHP kodo. PHP prevajalnik ugotovi (v osmem koraku), da določeni deli PHP kode vsebujejo tudi zahteve za podatkovno bazo, zato te zahteve pošlje v orodje, namenjeno MySQL podatkovni bazi. To orodje nato v devetem koraku vrne rezultate zahtevkov nazaj v PHP prevajalnik. V desetem koraku PHP prevajalnik vrne rezultate izvedene PHP kode skupaj z rezultati MySQL podatkovne baze nazaj na spletni strežnik, da ta v enajstem koraku lahko prikaže celotno spletno stran v spletnem brskalniku [22]. Slika 4.1 prikazuje potek dinamične komunikacije med uporabnikom in strežnikom. .

(25) . Slika 2.2: Diagram dinamične komunikacije [22]. . . .

(26) 3 ODZIVNI NAČIN OBLIKOVANJA SPLETNIH STRANI   Razvoj različnih velikosti mobilnih naprav je vodil v razvoj odzivnega načina oblikovanja spletnih strani in aplikacij (angl. Responsive Design), kar pomeni, da se elementi na spletni strani pravilno prikažejo na napravah različnih velikosti oziroma se izgled spletne strani prilagodi velikosti zaslona, na katerem si jo uporabnik ogleduje. Zaradi vse večjih računalniških zaslonov in vse manjših mobilnih zaslonov se je pri oblikovanju spletne strani uveljavilo načelo, da najprej oblikujemo postavitev elementov za mobilne naprave, kot so telefoni in tablice, šele nato pa za večje zaslone, kot so prenosniki in osebni računalniki (angl. Mobile First) [4]. S pomočjo CSS kode lahko spletno stran naredimo odzivno na dva načina. Prvi način je preko medijske poizvedbe (angl. Media Queries), kjer določimo kakšna je postavitev pri točno določeni velikosti zaslona. Drugi način je preko uporabe BOOTSTRAP ogrodja [4], ki ga bomo natančneje opisali v nadaljevanju.   . 3.1 Ogrodje Bootstrap Ogrodje Bootstrap je namenjeno lažjemu in hitrejšemu razvijanju predstavitvenega dela spletnih strani in aplikacij. Je zastonjsko (odprtokodno) ogrodje, ki temelji na Mobile First načelu, njegova glavna lastnost pa je dvanajst stolpčna mreža, s pomočjo katere Bootstrap nudi podporo za odzivni dizajn, kar nam omogoča, da se spletna stran samodejno prilagaja resoluciji zaslona naprave, s katero brskamo po spletu. Bootstrap je sestavljen iz velikega nabora HTML komponent in CSS stilskih predlog, s pomočjo katerih na hiter in enostaven način oblikujemo izgled spletne strani [9]. Ogrodje je nastalo leta 2010 in se je sprva imenovalo Twitter Bootstrap. Razvila sta ga Mark Otoo in Jacob Thorton, takrat oba zaposlena pri podjetju Twitter z namenom, da se omogoči in spodbudi doslednost med razvijalci. Precej hitro je ogrodje postalo odprtokodno in dostopno vsem spletnim razvijalcem. V času pisanja diplomskega dela je na voljo tudi že . .

(27) tretja verzija, v kateri so razvijalci v samo jedro ogrodja vgradili funkcionalnost, ki omogoča ustvarjanje odzivnih spletnih strani [19]. Tehnologija in zgradba ogrodja Bootstrap V osnovi je ogrodje Bootstrap navadna CSS koda, ki je zgrajena s pomočjo predprocesorja, imenovanega Less, ki ponuja veliko večjo moč in fleksibilnost kot navaden CSS ter z uporabo katerega pridobimo širok nabor možnosti, kot so spremenljivke, barvne funkcije, gnezdene deklaracije in logične operacije [17]. Kot smo že izpostavili, je Bootstrap odprtokodno ogrodje, kar razen tega, da je brezplačno, pomeni tudi, da si lahko vsak uporabnik ustvari svojo različico. Želene spremembe zapišemo v priložene, še ne prevedene (angl. compiles) datoteke in jih prevedemo z enim od prevajalnikov.   Za opozorilne elemente, animirane gumbe, drseče pasice in druge vizualne elemente je v ogrodje potrebno vključiti tudi JavaScript datoteko, ter njeno funkcionalno bogato, majhno in hitro knjižnico jQuery, ki bistveno pohitri in poenostavi upravljanje z dogodki, animacije, AJAX klice ter manipuliranje s HTML kodo [18]. Datoteke, ki vsebujejo ogrodja in različne JavaScript knjižnice, lahko v spletno stran vključimo na dva načina. Prvi način je, da potrebne datoteke posnamemo na lokalni disk in nato določimo pot do njih, pri čemer moramo te datoteke potem tudi naložiti na strežnik, kjer gostuje naša spletna stran, drugi način pa določa pot do datoteke, ki je že shranjena nekje na spletu.   Za pravilno delovanje ogrodja Bootstrap potrebujemo tri datoteke, in sicer CSS datotek, JavaScript knjižnico jQuery ter JavaScript datoteko. Vse tri datoteke so dostopne v dveh različicah, ki se razlikujeta po velikosti. Zaradi bolj optimiziranega delovanja je priporočljivo, da se v spletno stran vključijo različice s končnico .min.css in .min.js. Te datoteke vsebujejo vse funkcionalnosti večjih datotek, vendar je njihova koda strnjena tako, da jo procesor lahko hitreje prebere.   . . .

(28) Spodnji primer kode prikazuje, kako pravilno vključiti Bootstrap ogrodje v glavo spletne strani. <!DOCTYPE html> <html lang= "en"> <head> <meta charset="UTF8"> <title>Primer vključitve Bootstrap ogrodja v spletno stran</title> <! CSS > <link rel="stylesheet" href="../bootstrap/bootstrap.min.css"> <! jQuery > <script src=".../ajax/jquery.min.js"> <! javaScript > <script src="../bootstrap/bootstrap.min.js"</script> </head> <body> </body> </html> . Programska koda 3.1: Primer pravilne vključitve Bootstrap ogrodja v HTML dokument. Omenili smo že, da je ogrodje Bootstrap najprej potrebno vključiti v osnovni HTML dokument. To lahko storimo na dva načina, in sicer tako, da v glavi HTML dokumenta določimo pot do ogrodja na oddaljenem strežniku. Slabost tega načina je, da če spletni strežnik, kjer je shranjeno ogrodje, ne deluje, potem tudi naša stran ne bo delovala. Drugi način, katerega se v veliki meri poslužujejo izdelovalci spletnih strani, je, da se ogrodje prenese na lokalni strežnik in se nato naloži na strežnik, kjer gostuje spletna stran. To najlažje naredimo tako, da ogrodje prenesemo z uradne spletne strani http://getbootstrap.com. Na voljo imamo dve različici, ki se med seboj razlikujeta po vsebini map in dokumentov, ki jih vsebujeta, in sicer različico z izvorno kodo in »precompiled« različico. »Precompiled« različica je sestavljena iz treh map, ki vsebujejo CSS in Javascript kodo, ter tipografije. Zraven osnovnih datotek pa so tudi minimizirane različice, ki niso prijazne za urejanje, vendar zmanjšajo čas nalaganja. Različica z izvorno kodo je obsežnejša in zraven datotek v minimizirani različici vsebuje tudi še vso dokumentacijo in izvorno kodo Less ter je . .

(29) sestavljena iz več map kot »precompiled« različica, ki je sestavljena le iz treh map. Različica z izvorno kodo prav tako vsebuje vse mape in datoteke, ki se nahajajo v »precompiled« različici, vendar je tukaj pot do njih drugačna, saj se nahajajo v mapi dist/. Izvorne datoteke se nahajajo znotraj map less/, js/ in fonts/. Tako znotraj less/ mape najdemo izvorne CSS datoteke, znotraj js/ izvorne Javascript datoteke, ter znotraj fonts/ izvorne datoteke s pisavami in simboli. Vso dokumentacijo ogrodja Bootstrap in njegove primere pa najdemo v mapi docs/ [16]. Kljub vse bolj hitrim internetnim povezavam izdelovalci spletnih aplikacij stremijo k uporabi čim manj vrstic kode. Tako si lahko Bootstrap ogrodje popolnoma prilagodimo svojim potrebam. Na spletni strani http://getbootstrap.com/customize/ lahko točno določimo, katere CSS in Javascript elemente želimo, ter tako prenesemo manjše število vrstic kode [16]. Odzivnost in ogrodje Bootstrap Ena izmed najbolj priljubljenih funkcionalnosti ogrodja Bootstrap je njegova uporaba za odzivne spletne strani. Ogrodje deluje na osnovi prilagodljive in na dvanajstine razdeljene mreže, kar omogoča, da elementi na spletni strani zavzamejo od enega do dvanajst stolpcev. Dodajanje elementov v mrežo je dokaj enostavno, saj je potrebno le poznavanje in uporaba vnaprej definiranih CSS razredov. Spodnja koda prikazuje vključitev oziroma uporabo preddefiniranega odzivnega stolpca Bootstrap ogrodja. <body> <! centriran okvir > <div class="container"> <! vrstica v katero vstavimo stolpce >    <div class="row"> <!  kombiniran stolpec > <div class="collg12 colsm6"> Vsebina stolpca je lahko tekst, slika, video... </div> </div> </div> </body> . .

(30) Programska koda 3.2: Primer uporabe odzivnega Bootstrap stolpca. Z razredom container določimo širino spletne strani (včasih se je za širino uporabljala širina 960 pikslov) ter jo centriramo, kar pomeni, da če za vsebino spletne strani postavimo v širino 960 pikslov, se bo leta tudi na zaslonih večjih od 960 pikslov pokazala na sredini. Razred row zavzame celotno širino zaslona in predstavlja vrstico, v katero vstavimo stolpce. V našem primeru je razred stolpca sestavljen iz kombinacij dveh oznak collg in colsm ter dveh cifer 12 in 6, kjer cifre določajo širino samega stolpa, oznake pa nam povedo, na kakšni širini zaslona razred velja. Kot smo že ugotovili, je razrede stolpca mogoče kombinirati, s čimer lahko natančno določimo pozicijo elementov na različnih velikostih zaslona. Komponente ogrodja Bootstrap Ogrodje Bootstrap vsebuje tudi veliko stilsko definiranih komponent, ki nam olajšajo in pohitrijo izdelavo spletne strani. Omenili bomo le nekatere. Prva je menijska vrstica, ki je prikazana na sliki 3.1 in jo lahko preprosto vstavimo v našo spletno stran, vključno z obliko, barvo in vso funkcionalnostjo, z uporabo že definiranih CSS razredov. . Slika 3.1: Menijska vrstica [16]. Uporaba vnaprej definiranih razredov nam zagotovi pravilno delovanje oziroma pravilen prikaz komponent tudi na manjših zaslonih, saj za pomanjševanje vsebine in pravilne prelome poskrbi ogrodje samo. Slika 3.2 prikazuje zgoraj uporabljeno menijsko vrstico prikazano na manjšem zaslonu. .

(31) Slika 3.2: Menijska vrstica na manjšem zaslonu [16]. Naslednja uporabna komponenta je paginacija oziroma številčenje strani. Na sliki 3.3 je primer uporabe Bootstrapovih razredov za dodajanje paginacij na spletno stran, kjer je z modro obarvana številka, na kateri strani se trenutno nahajamo.   . Slika 3.3: Številčna vrstica [16]. Nohtki Thumbnails omogočijo, da na spletno stran zelo enostavno vključimo slike, ki vsebujejo tudi povezave. Slika 3.4 prikazuje osnovno uporabo omenjene komponente.   .

No results found