UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO

David Gojković

UPORABA IN PODPORA JAVASCRIPT KNJIŽNIC V SISTEMU ZA UPRAVLJANJE VSEBIN WORDPRESS

Diplomsko delo

Maribor, september 2018

UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO

David Gojković

UPORABA IN PODPORA JAVASCRIPT KNJIŽNIC V SISTEMU ZA UPRAVLJANJE VSEBIN WORDPRESS

Diplomsko delo

Maribor, september 2018

i

UPORABA IN PODPORA JAVASCRIPT KNJIŽNIC V SISTEMU ZA UPRAVLJANJE VSEBIN

WORDPRESS

Diplomsko delo

Študent: David Gojković

Študijski program: Univerzitetni študijski program 1. stopnje

Informatika in tehnologije komuniciranja

Smer: Informacijski sistemi

Mentor: doc. dr. Marko Hölbl

Somentor: asist. Luka Hrgarek, mag. inž. inf. in tehnol. kom.

Lektorica: mag. Petra Kunc

ii

ZAHVALA Iskreno se zahvaljujem mentorju doc. dr. Marku Hölblu in somentorju asist. Luki Hrgareku za strokovno pomoč in vodenje pri izdelavi diplomske naloge. Še posebej se zahvaljujem moji družini, ki mi je omogočila študij in me pri tem nenehno podpirala. Zahvaljujem se tudi sošolcem, ki so mi pomagali tekom študija.

iii

Uporaba in podpora JavaScript knjižnic v sistemu za

upravljanje vsebin Wordpress

Ključne besede: WordPress, Javascript knjižnice, oblikovanje spletnih strani, sistem za

upravljanje vsebin

UDK: 004.774.6(043.2)

Povzetek

Večina spletnih strani danes stremi k čim večji funkcionalnosti in hkrati k dobremu

estetskemu videzu. Pri zmanjševanju količine programiranja le-teh nam pripomorejo

sistemi za upravljanje vsebin in knjižnice programskih jezikov. V diplomskem delu so

opisani takšni sistemi in posamezne knjižnice ter ogrodja v programskem jeziku JavaScript.

S pomočjo statističnih podatkov je prikazano, katere knjižnice se najbolj uporabljajo in

podano je, kako se lahko te integrirajo v sistem za upravljanje vsebin WordPress. Na

praktičnem primeru je prikazano, da lahko aplikacija, spisana s pomočjo ogrodja Angular,

prikaže podatke iz sistema WordPress, ki jih pridobimo prek formata JSON. Podan je sklep,

da JavaScript in knjižnice predstavljajo koristen dodatek sistemu, vendar za namenske

spletne strani obstajajo boljše rešitve.

iv

Use and support of JavaScript libraries in WordPress

content management system

Key words: WordPress, Javascript libraries, website design, content management

system

UDK: 004.774.6(043.2)

Abstract

Most of the websites today are aiming to have better functionality and at the same time a

better aesthetic look. To reduce the amount of programming we use the help of content

management systems and libraries of various programming languages. In this diploma

thesis we describe such systems, individual libraries and frameworks of the programming

language JavaScript. With the help of statistical data we view which libraries are used the

most and we show how they can be integrated into the content management system,

WordPress. On a straightforward practical example we demonstrate that an application

written in Angular can show data from the system WordPress, acquired with the JSON

data format. We conclude that JavaScript and it’s libraries represent a useful addition to

the system, although there are better solutions to purposive web sites.

v

KAZALO 1 UVOD .......................................................................................................................... 1

2 SISTEMI ZA UPRAVLJANJE VSEBIN .............................................................................. 3

2.1 Sistemi za upravljanje vsebin .................................................................................. 4

2.2 Izbira primernega CMS ........................................................................................... 5

2.3 WORDPRESS ............................................................................................................ 7

3 JAVASCRIPT KNJIŽNICE ............................................................................................. 10

3.1 jQuery .................................................................................................................... 10

3.2 Razlika med knjižnico in ogrodjem ....................................................................... 12

3.3 Ogrodje Angular .................................................................................................... 13

3.4 React ..................................................................................................................... 14

3.5 Ember.js ................................................................................................................ 16

3.6 Vue.js ..................................................................................................................... 17

3.7 Podpora JavaScript knjižnic v sistemu WordPress ................................................ 19

3.7.1 WordPress REST API .......................................................................................................... 20

4 UPORABA JAVASCRIPT KNJIŽNIC .............................................................................. 21

4.1 Razvijalsko okolje .................................................................................................. 21

4.1.1 Vgrajeni urejevalnik v sistemu WordPress ........................................................................ 22

4.2 Spletne aplikacije .................................................................................................. 22

4.3 Predloga ali ustvarjanje nove ................................................................................ 23

4.4 Javascript in smernice oblikovanja ....................................................................... 26

4.5 Primer uporabe REST API ...................................................................................... 27

5 SKLEP ......................................................................................................................... 32

VIRI IN LITERATURA ............................................................................................................. 34

vi

KAZALO SLIK IN TABEL

Slika 2.1: Porazdeljenost uporabe CMS (v %) za prvih 1 000 000 strani ............................... 5

Slika 3.1: Primer arhitekture z REST API .............................................................................. 12

Slika 3.2: Delovanje Angular aplikacije ................................................................................ 14

Slika 3.3: Primer MVC arhitekture z dodatkom ReactJS ...................................................... 15

Slika 3.4: Diagram delovanja Ember.js aplikacije ............................................................... 17

Slika 3.5: Hitrosti knjižnic v primerjavi z navadnim JavaScript (manjše število pomeni večjo

hitrost) ................................................................................................................................. 18

Slika 3.6: Število prostih mest za razvijalce JavaScript knjižnic ........................................... 19

Slika 4.1: Primerjava med »tradicionalnim« in sodobnim spletnim modelom ................... 23

Slika 4.2: Mnogim dobro znan izgled Material Designa ...................................................... 27

Slika 4.3: Vtičnik za generiranje vsebine ............................................................................. 28

Slika 4.4: Vmesnik z ukazno vrstico ..................................................................................... 29

Slika 4.5: Ustvarjena Angular aplikacija, ki nam prikaže prispevke s strani WordPress...... 31

Tabela 2.1 : Primerjava nekaterih najbolj priljubljenih sistemov .......................................... 6

1

1 UVOD

Ustvarjanje spletnih strani je časovno zahteven postopek, ki zahteva tudi tehnično znanje.

Čas pa lahko prihranimo s programsko kodo, ki je že ustvarjena in jo lahko znova

uporabimo. Skupek takšnih funkcij in virov imenujemo knjižnice (ang. libraries). Prav tako

so pri ustvarjanju in urejanju spletnih strani vedno bolj priljubljeni sistemi za upravljanje

vsebin (ang. content management system, CMS), ki omogočajo spreminjanje elementov

(besedilo, slike ipd.) brez znanja programskih in označevalnih jezikov, kot je HTML (ang.

Hyper Text Markup Language). Takšni sistemi se osredotočajo predvsem na vsebino in

manj na oblikovanje. Zaradi tega se uporabljajo oblikovne predloge (ang. template), ki so

pogosto napisane v programskem jeziku JavaScript, enem od najpopularnejših

programskih jezikov, ko gre za obdelavo informacij s strani odjemalca (ang. client-side).

Namen diplomske naloge je raziskava korelacije med sistemom za upravljanje vsebin

WordPress (temelji na programskem jeziku PHP) in JavaScript knjižnicami, ki so

namenjene ustvarjanju t. i. čelnega dela (ang. front-end) spletnih strani. Glavni cilji, ki smo

jih želeli doseči, so naslednji:

− ustvarjanje aplikacije s pomočjo sistema WordPress in knjižnic, ki bodo najbolj

ustrezale po uporabnosti in podprtosti ter dostopnosti dokumentacije;

− analiza, kako se takšen sodoben pristop primerja s klasičnim ustvarjanjem strani;

− opredelitev tega, kaj so sistemi za upravljanje vsebin in katere vrste JavaScript knjižnic

poznamo;

− analiza načina, s pomočjo katerega WordPress podpira JavaScript knjižnice (React,

jQuery … ) in ogrodja (Angular, Ember, Vue.js …).

2

Obstaja več popularnih sistemov za upravljanje vsebin, kot sta Joomla in WordPress,

vendar slednji poganja več kot 60 milijonov spletnih strani in ima največji delež

uporabnikov ter ima precej obsežnejšo dokumentacijo, zato smo se omejili na sistem za

upravljanje vsebin WordPress in peščico določenih odprtokodnih knjižnic JavaScript, ki so

najpopularnejše glede na statistične podatke. Kljub določenim razlikam smo v pojem

knjižnic vključili tudi ogrodja. V diplomski nalogi in praktičnem primeru smo zato pod

terminom knjižnice razumeli vsa ogrodja in knjižnice, spisane z namenom oblikovanja

spletnih strani. V analizo programske kode odprtokodnih rešitev se nismo poglabljali, saj

to ni osrednja tema te diplomske naloge. Uporabili smo tudi vnaprej postavljene predloge

in primerjali njihovo uporabo z ustvarjanjem rešitev »iz nič«. Predpostavili smo, da

WordPress podpira JavaScript in knjižnice v določeni meri, vendar ne v popolnosti.

Predpostavili smo tudi to, da obstaja boljši način uporabe le-teh, ter da v zasnovi spletne

strani ne igrajo ključne vloge.

Pri izdelavi diplomske naloge in spletne strani smo pregledali spletno literaturo oziroma

dokumentacijo posameznih programskih rešitev in knjižnic. Pregledali smo tudi forume za

razvijalce v skupnostih za WordPress in JavaScript knjižnice. Na podlagi pridobljenega

znanja smo izbrali primerne knjižnice in jih v skladu s smernicami oblikovanja uporabili za

izdelavo aplikacije, ki uporablja podatke iz sistema WordPress. Metode dela, ki smo jih

uporabili so: zbiranje in pregled/analiza podatkov, analiza obstoječih rešitev in delo na

praktičnem primeru.

3

2 SISTEMI ZA UPRAVLJANJE VSEBIN

Sistemi za upravljanje vsebin (ang. Content Management Systems, CMS) so vrsta

programske opreme, ki pomaga uporabnikom ustvarjati, upravljati in urejati vsebine (na

spletnih straneh) brez potrebe po posebnemu tehničnemu znanju (Rouse, 2016).

Namesto grajenja lastnega sistema za ustvarjanje spletnih strani, shranjevanje datotek in

ostalih funkcij sistem za upravljanje vsebin poskrbi za osnovno infrastrukturo, tako da se

lahko osredotočimo na tako imenovani čelni del naše spletne strani (ang. front end).

Poleg sistemov, namenjenih spletnim stranem, obstajajo tudi takšni, ki se osredotočajo na

druge funkcionalnosti, kot je upravljanje z dokumenti (Pick-a-web, 2018).

Kot primer si poglejmo, kako se ustvari stran v izbranem CMS (WordPress).

Brez podobnega sistema bi morali napisati HTML dokument in ga prenesti na strežnik.

Namesto nas sistem opravi ta prenos s pomočjo vmesnika, ki je bolj uporabniško prijazen

kot namenska orodja za FTP. V sistemu za upravljanje vsebin, kot je WordPress,

uporabimo vmesnik in vnesemo želeno vsebino. Zelo podoben vmesnik najdemo pri

vstavljanju datotek, kjer lahko uporabimo že naložene datoteke, ki se prikažejo v knjižnici

medijev (ang. media library). V osnovi je sistem za upravljanje vsebin razdeljen na dva

ključna dela:

− aplikacija za upravljanje z vsebino (ang. content management application, CMA ) –

del, kjer dejansko dodajamo in upravljamo vsebinski del z vmesniki, kot smo videli

prej;

− aplikacija za dostavo vsebine (ang. content delivery application, CDA) –

del, kjer se v ozadju zgodijo procesi, ki poskrbijo za prenos in hrambo vsebine

naložene v CMA (GoodRich, 2013).

4

2.1 Sistemi za upravljanje vsebin

Sistem WordPress, ki smo ga delno že prikazali, je eden od primerov popularnega sistema

za upravljanje vsebin. Najpogostejši tipi CMS sistemov so namenjeni izgradnji blogov in

spletnih trgovin. WordPress ima približno 60 odstotkov tržnega deleža na spletnih straneh

z znanim sistemom za upravljanje vsebin (W3Techs, 2018). Poleg programskih rešitev, ki

izvirajo iz WordPressa, med priljubljenimi sistemi za upravljanje vsebin najdemo še

(Mening, 2017):

− Joomla,

− Drupal,

− Magento,

− Squarespace.

Obstaja še mnogo drugih podobnih komercialnih sistemov, ki se ponujajo večjim

podjetjem (posledično je cena temu primerna) (Sudhir, 2016).

Sistemi za upravljanje vsebin so danes zelo prilagodljivi. Nekateri so osredotočeni na

določeno področje (npr. Magento in področje spletnih trgovin), vendar večina tovrstnih

sistemov omogoča izgradnjo številnih vrst spletnih strani. Na primer WordPress se

uporablja za:

− statične spletne strani,

− bloge,

− spletne trgovine,

− forume,

− portfelj (najpogosteje umetniki).

5

2.2 Izbira primernega CMS

Tako kot pri mnogo programskih rešitvah, ne obstaja vsesplošna rešitev, ki je primerna za

vsa okolja in situacije. Večina ljudi ima svojo subjektivno preferenco, vendar je težko najti

objektivni razlog, ki nam pove, zakaj je določena rešitev najboljša. Pokazatelj kakovosti je

lahko število uporabnikov in tržni delež.

Omenili smo že, da na področju sistemov za upravljanje kakovosti prevladuje WordPress,

kar je tudi vidno na sliki 2.1. Za večino vrst spletnih strani ponuja uporabniško prijazen

vmesnik, ki se ga lahko prilagodi z vtičniki. Ni vedno najboljša rešitev, vendar je najboljša

rešitev v večini primerov, saj najdemo za vsak namen primerno že ustvarjeno podlago.

Slika 2.1: Porazdeljenost uporabe CMS (v %) za prvih 1 000 000 strani

(BuiltWith, 2018)

5141

5 3

Porazdeljenost uporabe CMS

WordPress

Ostali

Drupal

Joomla

6

Tabela 2.1 : Primerjava nekaterih najbolj priljubljenih sistemov

WordPress TYPO3 Joomla! Drupal Contao

Licenca GNU

GPLv2+

GPL GNU GPL v2 GPL LGPL

Operacijski

sistem

Cross-

platform

Cross-

platform

Cross-

platform

Cross-

platform

Cross-

platform

Podprti spletni

strežniki

Strežnik s

PHP in

MySQL

podporo

Apache,

NGINX, MS IIS

Apache,

Nginx, MS IIS

Strežnik s

PHP podporo

Strežnik s

PHP in

MySQL

podporo

Podprte

podatkovne

baze

MySQL,

MariaDB

MySQL,

PostgreSQL,

Oracle,

Firebird, MS

SQL Server

MySQL, MS

SQL Server,

PostgreSQL,

MariaDB

MySQL,

MariaDB,

PostgreSQL,

SQLite

MySQL

Vmesni

sistemi

PHP PHP, SQL,

JavaScript

PHP PHP PHP

Dodatni

vtičniki in

razširitve

✔ ✔ ✔ ✔ ✔

Back-end na

osnovi

spletnega

brskalnika

✔ ✔ ✔ ✔ ✔

7

Funkcije

poročanja

(npr. za

podatkovno

rudarjenje)

Potreben je

vtičnik

Potreben je

vtičnik

✔ ✔ Potreben

je vtičnik

XML vmesnik Potreben je

vtičnik

Potreben je

vtičnik

Potreben je

vtičnik

Potreben je

vtičnik

Potreben

je vtičnik

Integracija

lastnih skript

✔ ✔ Potreben je

vtičnik

✔ ✔

Upoštevanje

standardov

(W3C)

✔ ✔ ✔ ✔ ✔

2.3 WORDPRESS

WordPress je odprtokodna programska oprema, s pomočjo katere se ustvarjajo spletne

strani, namenjene različnih uporabnikom (blog, spletna trgovina ipd.). Zaradi preproste

uporabe in prilagodljivosti je z razlogom najbolj priljubljen sistem za upravljanje vsebin.

Najpogosteje je asociiran z blogi, čeprav podpira tudi ostale tipe spletnih strani.

Prva izdaja WordPress sistema je bila na voljo 27. maja 2003 kot nadaljevanje

b2/cafeloga, kjer sta bila glavna razvijalca Matt Mullenweg in Mike Little. Preveden je v

več kot 50 jezikov, med katerimi je tudi slovenščina. Za delovanje potrebujemo strežnik, ki

vsebuje podatkovno bazo (MySQL ali MariaDB), PHP in podpira HTTPS in na katerem je

nameščen programski paket WordPress.org (WordPress, 2018).

8

Eden od glavnih razlogov, da se mnogi odločajo za uporabo WordPress sistema, je

odprtokodnost, kar pomeni, da poleg glavnih razvijalcev lahko pri razvoju tega sodeluje

kdor koli. Zaradi tega, ker je odprtokodni projekt, je sistem WordPress brezplačen.

WordPress je prilagodljiv in razširljiv. Trenutno obstaja 56 tisoč vtičnikov, ki omogočajo

preprosto spreminjanje izgleda spletne strani in dodajanje novih funkcionalnosti, kot so

galerije slik in spletne trgovine (WordPress.org, 2018).

Za ustvarjanje spletne strani z WordPressom ne potrebujemo tehničnega znanja, ker ima

uporabniško prijazen vmesnik. Vmesnik za dodajanje nove vsebine je podoben

urejevalnikom besedil, kot je Microsoft Word, ki je del programskega paketa Office,

katerega uporablja več kot milijarda uporabnikov (Callaham, 2016). Zaradi priljubljenosti

in razširjenosti lahko lažje poiščemo odgovore na vprašanja v povezavi s tem sistemom za

upravljanje vsebin, ker obstaja ogromno število vodičev in dokumentacije. V pomoč so

tudi forumi, na katerih sodeluje veliko število razvijalcev in oblikovalcev. Obstajajo tudi

uradni forumi, ki jih najdemo na spletnem naslovu https://wordpress.org/support/.

Poleg zgoraj naštetih razlogov je treba upoštevati tudi SEO (Search Engine Optimization).

Ob namestitvi imamo že možnost optimizacije naše spletne strani, tako da nas spletni

iskalniki lažje najdejo. Matt Cutts, nekdanji glavni vodja Google ekipe za spam, je javno

hvalil, kako je WordPress učinkovit pri prej omenjeni optimizaciji za spletne iskalnike

(Cutts, 2013). Poleg razlogov, podanih v poglavju 3.1, bomo opredelili še nekaj prednosti,

ki jih ponuja sistem WordPress, in sicer:

− Stroškovna učinkovitost

Nižja cena urejanja in vzdrževanja spletne strani. Zaradi preprostosti uporabe se lahko

odločimo, da stran ustvarimo sami in brez razvijalca.

− Dostopnost

Stran lahko spreminjamo kjer koli smo, dokler imamo dostop do spleta.

− Lažja optimizacija za spletne iskalnike

Poleg že dane optimizacije lahko dodamo še vtičnike, ki ponujajo dodatno

funkcionalnost za ta namen. Primer takšnega vtičnika je Yoast SEO.

9

− Predloge in odzivna spletna stran (ang. Responsive web design)

Število mobilnih naprav in njihov promet je presegel število namiznih, zato je danes

odzivna spletna stran skoraj že nujna. Že vključene predloge so primer odzivne spletne

strani.

− Preprosta integracija z družbenimi mediji

Obstaja veliko število vtičnikov, ki skrbijo, da so naše objave vidne tudi na vedno bolj

popularnih družbenih medijih.

− Varnost

Pogoste posodobitve pomenijo manjšo možnost vdora.

− Lažji prehod

Novi razvijalci lažje nadomestijo stare, ker je dosti manj programske kode.

Čeprav je sistem WordPress najbolj priljubljen, ima tudi nekaj napak:

− Hrošči

Zaradi posodobitev tako v WordPress sistemu kot v vtičnikih pride do neželenih težav.

− Zmogljivost

WordPress sam po sebi ni počasen, vendar lahko pride do upočasnitve, ko dodamo

večje število vtičnikov. To se lahko omili s pomočjo vtičnikov za predpomnilnik, ampak

to ni trajna rešitev.

− Ni primerno za vsakogar

Slabost odprtokodnih sistemov je v tem, da podpora ni zagotovljena. Večja podjetja se

zaradi tega odločajo za plačljive rešitve, ker lahko pričakujejo pomoč, ko pride do

težav.

− Priljubljenost

Zaradi popularnosti pride posledično do največ poskusov vdora.

10

3 JAVASCRIPT KNJIŽNICE

»Knjižnica (ang. library) ali tudi programska knjižnica je v računalništvu zbirka

podprogramov (oziroma funkcij) za pomoč pri izdelavi oziroma razvoju programske

opreme. Knjižnice vsebujejo kodo in podatke, ki se jih da uporabiti v neodvisnih

programih. Zaradi tega se programi izmenjujejo in spreminjajo modularno. Nekatere

izvršne datoteke so lahko oboje, samostojni programi ali knjižnice, vendar večina knjižnic

ni izvršljivih« (Khan Academy, 2018).

Obstaja več razlogov, zakaj bi želeli dodati JavaScript v WordPress spletno stran in prav

tako več načinov implementacije, vendar moramo biti pri tem pozorni, saj lahko pride do

ranljivosti sistema samega. Obstaja možnost, da ne najdemo WordPress vtičnika za želeno

funkcionalnost (npr. predvajanje specifičnih videoposnetkov) in to lahko vključimo s

pomočjo JavaScripta.

JavaScript knjižnic je mnogo in vsaka ima svoj namen. V naslednjih poglavjih si bomo

ogledali najbolj priljubljene in njihovo uporabo.

3.1 jQuery

jQuery je preprosta odprtokodna JavaScript knjižnica, katere glavni namen je »pisati manj,

narediti več«. Trenutno podpira naslednje brskalnike (jQuery, 2018):

− Chrome: (trenutna verzija – 1) in trenutna verzija,

− Edge: (trenutna verzija – 1) in trenutna verzija,

− Firefox: (trenutna verzija – 1) in trenutna verzija, ESR,

− Internet Explorer: 9+,

− Safari: (trenutna verzija – 1) in trenutna verzija,

− Opera: trenutna verzija.

Uporabna je za preproste naloge, ki ponavadi zahtevajo več vrstic programske kode in

metod, ker jih poenostavi in zaradi tega jih lahko kličemo v eni sami vrstici. Poenostavi

11

tudi zahtevnejše stvari, za katere se uporablja JavaScript, kot so AJAX in DOM

manipulacija (W3schools, 2018).

V sodobnem spletnem razvoju igra veliko vlogo v dodajanju funkcionalnosti, ki delujejo s

strani odjemalca, kar posledično zmanjša količino prenosa podatkov in izboljša

uporabniško izkušnjo.

Med primeri uporabe jQuery najdemo tudi drsnike, pojavna okna, animacije ipd. Tukaj je

mišljena možnost dinamičnega prikazovanja le-teh in ne ustvarjanje.

Razvijalci lahko z uporabo jQuery izvajajo nekatere dejavnosti brez vnovičnega nalaganja

spletne strani, kot so premikanje po spletni strani, klici AJAX skript in upravljanje z

dogodki, ko uporabnik klikne na določeni element.

jQuery je že v vključen v WordPress in vsebuje tudi nekaj ključnih pomožnih knjižnic.

Razvijalci tem in vtičnikov lahko preprosto kličejo jQuery metode in jih vključijo v lastne

jQuery skripte.

Če želimo uporabiti to knjižnico v naši temi, moramo dodati lastno skripto v čakalno vrsto

(WordPress queue). Dodamo lahko kateri koli del jQuery Core ali kateri koli vtičnik, ki je že

vključen v WordPress.

Primer programske kode, kjer smo dodali JavaScript po meri:

Izsek programske kode 3.1 : Primer uporabe jQuery v WordPress

<?php

wp_enqueue_script('nasa_skripta', get_stylesheet_directory_uri() .

'/js/nasa_skripta.js', array( 'jquery' ));

?>

12

3.2 Razlika med knjižnico in ogrodjem

Pogosto pride do zmede, ko se govori o JavaScript knjižnicah, ker so pogosto narobno

označene kot ogrodja (ang. frameworks), čeprav obstajajo razlike. Ogrodje je vrsta

knjižnice, vendar deluje nekoliko drugače. Ogrodja uporabimo za izgradnjo aplikacij ali

spletnih strani v celoti. Tukaj lahko povlečemo vzporednico in lahko rečemo, da so

ogrodja glede na namen podobna sistemu WordPress, ker ponujajo podlago za izgradnjo

danega projekta. V primerjavi s klasičnimi knjižnicami so ogrodja dosti bolj strukturirana.

Ogrodja lahko razdelimo v več kategorij: ogrodja za čelni del (ang. front-end), ogrodja za

hrbtni del (ang. back-end) in ogrodja za polno izgradnjo (ang. full-stack). Čelni del skrbi za

interakcijo z uporabnikom, hrbtni del skrbi za stvari v ozadju in full-stack kombinira oba

dela.

Ogrodja se lahko v sistemu WordPress uporabijo kot dodatek, kjer se CMS uporabi kot

podlaga in aplikacija se nato gradi »povrhu« (slika 3.1).

Slika 3.1: Primer arhitekture z REST API

(Arunesh, 2015)

13

3.3 Ogrodje Angular

Angular (pogosto znan pod imenom Angular 2+) je odprtokodna platforma za izgradnjo

čelnega dela spletnih aplikacij in temelji na TypeScriptu (Microsoftova nadgradnja

JavaScripta). Razvoj Angular vodi namenska ekipa pri Googlu in skupnost posameznikov

ter podjetij. Platforma je popolna prenova produkta od ekipe, ki je razvila AngularJS.

Razvijalci vidijo v Angular platformo, s katero preprosto gradimo aplikacije znotraj spleta

in vsebuje integrirane prakse za reševanje težav pri razvoju (Angular, 2018). Na sliki 3.2

vidimo delovanje takšne aplikacije. Ko govorimo o platformi Angular, govorimo o

JavaScript ogrodju, kot smo že omenili v prejšnjem poglavju. Uporablja se za izgradnjo t. i.

aplikacij na eni strani (ang. Single Page Applications, SPA). SPA aplikacije navadno

uporabljajo JavaScript okolje v brskalniku, da lahko oponašajo vedenje klasičnih spletnih

strani. Ker niso popolnoma odvisne od strežnika, lahko počnejo stvari, ki jih običajno

vidimo le v »native« aplikacijah. Poleg tega je komunikacija s strežnikom minimalna, kar

posledično pomeni odzivnejšo aplikacijo. S pomočjo tehnologij, kot je Googlov

Lighthouse, lahko te aplikacije postanejo skoraj nerazpoznavne v primerjavi z mobilnimi

aplikacijami (npr. na Android sistemih). Odzivne aplikacije oziroma spletne strani so nuja,

kajti 53 odstotkov uporabnikov bo zapustilo stran, če traja več kot 3 sekunde, da se naloži.

Poleg tega pričakujejo, da bo premikanje gladko in brez upočasnitev (Google, 2018).

Angular je bil prvotno namenjen za uporabo s programskimi jeziki JavaScript, TypeScript

in Dart. Skozi čas je najbolj priljubljen jezik postal TypeScript. Ne samo zaradi boljše

dokumentacije, ampak tudi zaradi pogostejših posodobitev.

Sčasoma so razvijalci tega ogrodja izdelali orodja, ki skupaj delujejo kot dobro

organizirana celota. Orodja, kot sta Angular-Cli in Angular Material, dodajo

funkcionalnost, ki olajšajo delo. Primer takšnih funkcionalnosti so hitra generacija

projektov, upodabljanje na strani strežnika in lepše komponente uporabniškega

vmesnika. Zaradi tega lahko obravnavamo Angular ne le kot ogrodje, temveč tudi kot

platformo.

14

Slika 3.2: Delovanje Angular aplikacije

(Presa, 2015)

3.4 React

React je JavaScript knjižnica, namenjena izgradnji uporabniških vmesnikov. Avtor je

Jordan Walke, vendar razvoj nadaljuje ekipa pri Facebooku in skupnost individualnih

razvijalcev ter podjetij. Uporabi se lahko tudi kot osnova za izgradnjo prej omenjenih SPA

ali mobilnih aplikacij. Lastnosti, ki to knjižnico razlikuje od podobnih, so:

− Deklarativen jezik

Ustvarimo lahko dizajn za posamezna stanja in zaradi tega se ob spremembi podatkov

spremenijo le specifične komponente vmesnika. Posledica tega je programska koda, ki

je lažja za branje in razumevanje.

− Osnove so komponente

Gradimo gnezdene komponente, ki nadzorujejo lastna stanja, in jih združimo, da lahko

ustvarimo kompleksnejše uporabniške vmesnike. Logika komponent bazira na

JavaScriptu in posledično pride do lažjega prehoda informacij skozi aplikacijo oziroma

spletno stran.

− Obširnost

React je pogosto le del večjega sklopa knjižnic, ki gradijo spletno stran oziroma

aplikacijo, zato je pomembno, da obstaja možnost dodajanja novih funkcionalnosti

15

brez vnovičnega pisanja že obstoječe programske kode. React se lahko tudi izvaja na

strani strežnika s pomočjo Node.js okolja ali pa poganja mobilne aplikacije, kar se

doseže s pomočjo React Native (Facebook-Github, 2018).

React lahko opišemo kot pogled v arhitekturi Model-Pogled-Kontroler (ang. Model-View-

Controller, MVC), kar je vidno tudi na sliki 3.3. Ogrodja, kot je Angular, že imajo lastne

strukture za pogled v takšni arhitekturi, zato zamenjava ni potrebna. React ni nujno

zamenjava, ampak le nadgradnja določenih delov uporabniškega vmesnika, ki se lahko

znova uporabijo (ang. refactoring oziroma reusing).

Slika 3.3: Primer MVC arhitekture z dodatkom ReactJS

(Deutcsh, 2017)

16

3.5 Ember.js

Ember.js je MVC (Model-View-Controller) JavaScript ogrodje, ki ga vzdržuje ekipa Ember

Core (Yehuda Katz, Tom Dale in ostali). Razvijalcem omogoča razvoj SPA aplikacij, ki se

grajene na osnovi REST arhitekture.

Ember se uporablja na mnogih popularnih spletnih mestih, kot so LinkedIn, Vine,

Nordstrom in Twitch.tv. Poleg tega da omogoča razvoj SMA, je možno s pomočjo Ember

ustvariti tudi namizne in mobilne aplikacije. Primer namizne aplikacije, grajene s tem

ogrodjem, je Apple Music.

Elementi, ki jih najdemo v ogrodju Ember (slika 3.4), so:

− Route

Route objekt predstavlja stanje aplikacije in je vezan na URL.

− Model

Vsak route objekt ima na sebe vezan Model, ki vsebuje podatke, asociirane s

trenutnim stanjem aplikacije.

− View

View se uporabi za upravljanje z uporabniško sproženimi dogodki ali pa za dodajanje

elementov v predlogo oziroma vnovično uporabo le-teh.

− Component

Posebna oblika View je namenjena ustvarjanju elementov, ki se nato lahko znova

uporabijo.

17

Slika 3.4: Diagram delovanja Ember.js aplikacije

(Sehgal, 2018)

3.6 Vue.js

Vue.js (v nadaljevanju Vue) je odprtokodno JavaScript ogrodje, ki je namenjeno izgradnji

uporabniških vmesnikov. Integracija v projekte, ki vsebujejo ostale JavaScript knjižnice,

naj bi bila lažja, saj je Vue ustvarjen z namero preproste integracije. Vue lahko funkcionira

tudi kot ogrodje za izgradnjo Single Page aplikacij (SPA), vendar za to obstajajo boljše in

hitrejše rešitve.

Vue kot ogrodje ni najbolj priljubljeno, saj se številčno ne more primerjati s knjižnicami,

kot je jQuery, vendar je definitivno v vzponu. Vzrokov za to je več. Mnogi za to ogrodje

niso niti slišali in Vue ni bil uporabljan pri razvoju aplikacij širšega obsega. Čeprav za sabo

nima velike korporacije kot npr. Angular, se vseeno pojavi med najbolj obiskanimi

repozitoriji na spletnem mestu GitHub (Motroc, 2018).

18

Razlogov za izbiro tega ogrodja je več, vendar so najpogostejši naslednji:

− Preprostost učenja

Za začetek dela s tem ogrodjem potrebujemo le osnovno znanje HTML in JavaScripta.

Pomaga tudi, da prevajalnik (ang. compiler) ni obvezen. Mnogi priporočajo to ogrodje

kot začetno točko začetnikom pri delu z JavaScript ogrodji (Vue, 2018).

− Hitrost

Vsa novejša ogrodja in knjižnice so hitre, saj je hitrost danes skoraj že pogoj, kar smo

že omenili. V primerjavi z ostalimi ogrodji, kot je npr. React, se izkaže, da je Vue

hitrejši, kar vidimo tudi na sliki 3.5 (Krause, 2018).

− Skupnost

Ko delamo na projektu s pomočjo ogrodij, lahko naletimo na težavo in potrebujemo

pomoč. Omenili smo že, da je repozitorij Vue zelo priljubljen in posledično lahko

najdemo veliko skupnost razvijalcev, med katerimi je še vedno aktiven kreator tega

ogrodja Evan You.

Slika 3.5: Hitrosti knjižnic v primerjavi z navadnim JavaScript (manjše število pomeni večjo hitrost)

(You, 2016)

0

0,5

1

1,5

2

2,5

NavadenJavascript

Vue 2.0 React 15.3 Angular2.0.0

Vue 1.0.26

19

3.7 Podpora JavaScript knjižnic v sistemu WordPress

Določene JavaScript knjižnice niso direktno podprte in jih pogostokrat niti ne

potrebujemo. Ne potrebujemo back-end knjižnic oziroma ogrodij, saj za to poskrbi

osnovna struktura WordPressa. Knjižnice, ki se mnogo bolj uporabljajo, so knjižnice,

namenjene front-end delu naše spletne rešitve. Tukaj lahko tudi štejemo knjižnice za

DOM (ang. Document Object Model) manipulacijo. Jezik, v katerem je sistem WordPress

napisan, je PHP, ki je sam po sebi kompleksen in zmožen mnogih funkcionalnosti.

JavaScript in knjižnice PHP kodo s strežnika prikažejo na vizualno privlačnejši način, saj je

to pogosto tudi namen JavaScripta. Razvijalci vmesnikov delujejo na več področjih, med

katerimi so tudi sistemi za upravljanje vsebin in število delovnih mest je temu primerno,

kar vidimo tudi na sliki 3.6.

Slika 3.6: Število prostih mest za razvijalce JavaScript knjižnic

(Paul, 2018)

20

3.7.1 WordPress REST API

Od različice 4.7 naprej je v WordPress vključen aplikacijski programski vmesnik (ang.

application programming interface, API) za REST storitve (ang. Representational State

Transfer). To pomeni, da nismo več odvisni od vtičnikov in ne potrebujemo zahtev prek

PHP, temveč jih lahko pošiljamo skozi JavaScript. Praktično to pomeni, da lahko

dostopamo do podatkov v back-end delu skozi zahtevke v čelnem delu, kar izboljšuje

odzivni čas in povečuje funkcionalnost. Če želimo podatke o npr. člankih, preprosto

pošljemo GET zahtevek (WordPress REST Doc, 2018).

Izsek programske kode 3.2: Primer zahtevka po podatkih

$response = wp_remote_get( 'http://spletna-stran/wp-json/wp/v2/posts')

Za določene knjižnice obstajajo tudi vtičniki za lažje povezovanje, kar nam prihrani čas, ki

bi ga potrebovali za pisanje programske kode. Dokumentacija je včasih pomanjkljiva in se

zgodi, da moramo pregledati skozi repozitorij ter preizkusiti, na kakšen način deluje

določena metoda.

21

4 UPORABA JAVASCRIPT KNJIŽNIC

4.1 Razvijalsko okolje

Ko pride do potrebe po urejanju WordPress datotek, kot so na primer podlage, imamo na

voljo dva različna načina spreminjanja. WordPress ima vgrajen urejevalnik (ang. built-in

editor), ki nam omogoča urejanje prek spleta, v katerem koli spletnem brskalniku. Druga

možnost je lokalno spreminjanje datotek, ki jih nato naložimo na našo spletno stran s

pomočja FTP klienta (ang. File Transfer Protocol) (WordPress.org, 2018).

WordPress urejevalnik je dovolj dober za osnovno spreminjanje, vendar je lažje in bolj

smiselno, da uporabimo orodja, ki nam omogočajo več. Veliko razvijalcev uporablja

integrirana razvojna okolja (ang. Integrated Development Enviroment, IDE). Najprej se

moramo vprašati, za kateri programski jezik potrebujemo IDE. V našem primeru je to PHP

zaradi sistema WordPress ter seveda JavaScript zaradi knjižnic. Vprašati se moramo tudi

po namenu uporabe, ceni in funkcionalnostih. Najpomembnejša pa je seveda osebna

preferenca. IDE programska oprema ima veliko zmožnosti, ampak včasih ne potrebujemo

vseh. Takrat se odločimo za uporabo urejevalnikov, ki jih po izbiri nadgradimo.

22

4.1.1 Vgrajeni urejevalnik v sistemu WordPress

WordPress vsebuje dva vgrajena urejevalnika, ki omogočata urejanje datotek direktno

prek spletnega brskalnika. Imenujeta se Theme editor in Plugin editor. Do njiju dostopamo

prek menija Administration:

Za Theme editor: Administration – Appearence – Editor.

Za Plugin editor: Administration – Plugins – Editor.

Vrste datotek, ki jih lahko urejamo s pomočjo urejevalnika v WordPress, so

(WordPress.org, 2018):

− HTML,

− PHP,

− CSS in TXT.

Urejevalnika, ki sta vključena v WordPress, sta zelo osnovna po funkcijah in zato je

priporočena uporaba drugih. Manjkajo funkcionalnosti, ki so za nekatere nepogrešljive.

Primeri takšnih so iskanje oziroma zamenjava, označevanje sintakse in samodejno

dokončevanje.

4.2 Spletne aplikacije

Z izbranim sistemov za upravljanje vsebin WordPress lahko preprosto ustvarjamo spletne

strani in v večini primerov, kjer želimo dodati ogrodje, kot je Angular, preidemo v razvoj

spletne aplikacije. Zaradi povečanja števila mobilnih naprav, ki dostopajo do spleta, so v

zadnjem času postale priljubljene spletne aplikacije. Spletne strani predstavljajo klasični

razvoj, medtem ko spletne aplikacije predstavljajo sodobnejši pristop (slika 4.1). V času,

preden so obstajale trgovine za aplikacije, je pojem aplikacije predstavljal programsko

opremo z interaktivnim uporabniškim vmesnikom, vendar smo to programsko opremo

morali posebej namestiti. V primerjavi s klasičnim spletom, kot so na primer blogi, spletne

aplikacije predstavljajo bogatejšo uporabniško izkušnjo (ang. user experience, UX) in

dostop do naprednih zmogljivosti spletnega brskalnika (Borodescu, 2013).

23

Za večino uporabnikov pojem spletne strani vključuje tudi spletne aplikacije, kar je tudi

smiselno. Do obeh dostopamo s pomočjo spletnega brskalnika in potrebujemo le URL

naslov. Kljub temu lahko razlikujemo spletne strani od aplikacij po interaktivnosti. Če

spletno mesto vsebuje le statične podatke, tedaj lahko govorimo o spletni strani.

Slika 4.1: Primerjava med »tradicionalnim« in sodobnim spletnim modelom (Techsith.com, 2018)

4.3 Predloga ali ustvarjanje nove

Spletne strani, ustvarjene v sistemu WordPress oziroma s pomočjo katerega drugega

sistema za upravljanje vsebin, so lahko grajene po meri, kjer je stran zgrajena iz ničesar za

določeno stranko/podjetje, da odgovarja njihovim potrebam. Obstaja pa tudi možnost

uporabe že vnaprej narejene predloge oziroma »teme« kupljene s spleta ali pridobljene s

spleta. Podobno velja za gradnjo aplikacij v ogrodju, kot je Googlov Angular. Obe metodi

imata svoje prednosti in slabosti, vendar je v veliki meri odvisno od ciljev, potreb in

seveda razpoložljivih sredstev. Spletna stran, grajena s predlogo (ang. template), je

pogosto dobra izbira za manjše in preproste projekte. Prednosti so lahko naslednje:

− Cenovno ugodnejše

Uporaba predloge pomeni, da je večina spletne strani že napisana in razvijalec ima

posledično manj dela. Zaradi tega so strani s predlogami cenejše, čeprav mora

razvijalec vseeno vložiti nekaj časa, da predlogo prilagodi.

24

− Hitrejša implementacija

Večina kode spletne strani je že napisane. Odvisno od vsebine je lahko spletna stran

hitro pripravljena za uporabo. Glede na kompleksnost potrebujemo dosti več časa za

izgradnjo strani po meri.

− Sodobnost predlog

Najboljše predloge so tiste, ki so dobro zasnovane, omogočajo prilagajanje in sledijo

sodobnim smernicam razvoja.

Število slabosti je lahko večje, če razvijalec nima dovolj znanja oziroma izkušenj na

tem področju.

− Generičnost

Preprosto povedano, lahko pride do tega, da spletna stran izgleda preveč podobna

drugi, kar lahko odvrne uporabnike. Dober razvijalec lahko to prepreči s kreativno

uporabo grafičnih elementov in prilagajanjem predloge vsebini.

− Omejenost

Določena mera prilagodljivosti obstaja, še posebej pri dražjih komercialnih predlogah,

vendar smo vseeno omejeni pri parametrih znotraj predloge same. Težave pri

parametrih so lahko preproste narave, kot je omejena izbira ikon, ali pa bolj

kompleksne, kar nam otežuje dodajanje funkcionalnosti, ki si jih želimo.

− Redke posodobitve

Večina predlog danes je odzivnih (ang. responsive design), kar pomeni, da se

prilagodijo napravi in velikosti zaslona. WordPress se pogosto posodablja, kar ne

moremo reči za nekatere predloge. Zna se zgoditi, da predloga ne deluje z najnovejšo

verzijo sistema in smo prisiljeni uporabiti starejšo, kar lahko pomeni ranljivost spletne

strani.

− Varnost

Ljudje, ki pišejo škodljivo kodo, vidijo v spletnih mestih s predlogami dobro priložnost

za vdor, ker lahko vdrejo v več strani naenkrat z manj truda, kajti napaka je lahko v

predlogi sami.

25

Strani grajene po meri ali vsaj tiste, ki imajo po meri izdelano predlogo, večinoma nimajo

nekaterih od slabosti, ki smo jih navedli za vnaprej pripravljene predloge.

Najpomembnejše pri izdelavi takšnih strani je, da se dizajn prilagodi nam in ne obratno,

kjer se moramo prilagoditi izbrani predlogi. Ostale prednosti vključujejo:

− manj omejitev – kar si zamislimo, se lahko tudi realizira; pogoj je seveda cena;

− prilagodljivost in možnost sprememb – skozi čas lahko ugotovimo, da ne

potrebujemo le nov dizajn, ampak tudi nove funkcionalnosti; za razliko od strani s

pripravljenimi predlogami, nimamo potrebe po tem, da bi začeli vse znova;

− lažje posodobitve – ker imamo razvijalca za našo spletno stran, je spreminjanje lažje,

ker že pozna način, kako je stran postavljena;

− boljši SEO – optimizacija za spletne iskalnike je pogosto ena izmed znanj, ki jih imajo

razvijalci rešitev za splet.

26

4.4 Javascript in smernice oblikovanja

Oblikovanje in posledično izgled spletne strani je subjektiven. Vsaka spletna stran oziroma

informacijska rešitev nasploh je posledica odločitev, ki so jo sprejeli razvijalci, in ena

izmed pomembnejših je seveda izgled. Te odločitve ne moremo soditi in definitivno ločiti

med napačnimi in pravilnimi. Obstajajo smernice, ki nam te odločitve olajšajo, vendar na

njih ne smemo gledati kot na pravila. Seveda obstajajo načela, ki so do neke mere

objektivna, ker temeljijo na človeškem dojemanju umetnosti. Primer tega je pravilo

tretjin, ki ga pogosto videvamo v fotografiji. Razvijalci se ne ukvarjajo pogosto z

načrtovanjem oblikovanja, vendar iščejo zgled v že obstoječih rešitvah. Veliko smernic nas

opozarja, da mora oblikovanje biti povsod isto. Čas lahko prihranimo s pomočjo tako

imenovanih sistemov za oblikovanje (ang. design systems), ki nam povedo, na kakšen

način moramo implementirati določene gradnike. Predstavljajo enotno zalogo virov, ki so

isti na vseh platformah.

Google je razvil svoj lastni dizajn sistem, ki so ga poimenovali Material Design (slika 4.2).

Opisali so ga kot »enotni sistem, ki združuje teorije, vire in orodja za izdelavo digitalnih

izkušenj« (Karthikeyan, 2018). Z uporabo Material Designa, izkoristimo skupek znanja in

izkušenj korporacije, kot je Google. Na takšen način je možnost za napake manjša in

pomeni, da prihranimo ogromno časa, ker nam ni treba razvijati lastne vizualne izkušnje.

Večji razlog za uporabo je za mnoge subtilen. Uporabniki podzavestno asociirajo našo

spletno mesto z Googlom, kar lahko pomeni večji nivo zaupanja ter občutka varnosti.

Nekateri seveda tega ne želijo, saj je dizajn subjektiven, kar smo že omenili na začetku

poglavja.

Uporaba sistemov za oblikovanje je odvisna od programskega jezika oziroma ogrodij.

Implementacija vseh pravil dizajn sistema, kot je Material Design, je dolgotrajen

postopek, zato se odločimo za že ustvarjene rešitve. To je seveda odvisno od ogrodja, ki

smo ga izbrali. Za ogrodje Angular obstaja rešitev Angular Material, kar ni presenetljivo,

saj je produkt razvoja pri Googlu. Ostala ogrodja pa imajo komponente za Material Design

27

v rešitvah, ki jih je ustvarila skupnost. Primer priljubljene rešitve je Material-UI za

knjižnico React.

Slika 4.2: Mnogim dobro znan izgled Material Designa

4.5 Primer uporabe REST API

Na praktičnem primeru želimo prikazati, kako deluje aplikacija (ustvarjena s pomočjo

JavaScript ogrodja/knjižnice) v povezavi s sistemom za upravljanje vsebin WordPress.

Želimo se osredotočiti na prenos podatkov prek REST API-ja in ne toliko na aplikacijo

samo.

Uporabili smo odprtokodne rešitve in z njimi ustvarili preprost projekt.

Za strežnik in delovno okolje smo uporabili WAMP, ki je sposoben gostiti dinamične

strani.

Sistem za upravljanje vsebin je seveda WordPress in izbrano JavaScript ogrodje je Angular.

Ustvarili smo spletno aplikacijo, ki prikazuje prispevke s spletne strani, napisane v

WordPress.

Najprej smo vzpostavili strežnik in sistem za upravljanje vsebin. Nato smo skozi NPM, ki je

upravitelj paketov (ang. package manager) za JavaScript, zgradili našo aplikacijo.

Ker nas zanima interakcija med sistemom WordPress in izbrano Angular aplikacijo, smo

skozi REST API oziroma JSON pridobili podatke o vsebini.

Za začetek smo potrebovali strežnik in delovno okolje. Tukaj smo se odločili za

WampServer. V namestitev strežnika in sistema za upravljanje vsebin nismo podrobneje

28

posegali, saj to ni osrednja tema te diplomske naloge. Namestitev ni težavna, ker skozi to

vodi namestitveni čarovnik.

Preden namestimo WordPress, najprej potrebujemo novo zbirko podatkov v podatkovni

bazi MySQL.

Pri praktičnem primeru bomo v Angular aplikaciji prikazali prispevke, ki jih bomo ustvarili

v sistemu WordPress s pomočjo vtičnika (slika 4.3).

Slika 4.3: Vtičnik za generiranje vsebine

Za tem smo ustvarili novo aplikacijo v Angular, ki uporablja Sass za oblikovanje. Uporabili

smo Angular Command Line Interface in z ukazom, vidnim na sliki 4.4, ustvarimo novo

aplikacijo.

29

Slika 4.4: Vmesnik z ukazno vrstico

V aplikacijo smo dodali še Angular Material.

S pomočjo Sublime Text smo ustvarili nov modul, kjer smo uporabili elemente Angular

Materiala. Moduli so sestavljeni iz več komponent, ki smo jih omenili v poglavju 3.3.

Izsek programske kode 4.1: Modul za Material Design

const materialModules = [

MatToolbarModule,

MatCardModule,

MatButtonModule,

];

@NgModule({

imports: materialModules,

exports: materialModules

})

Urediti moramo še datoteko app.module.ts in dodati prejšnji modul v imports sekcijo.

Omenjeni modul je krovni modul, kjer moramo dodati vse ostale module, ki jih želimo

uporabiti.

30

Če želimo pridobiti podatke iz WordPressa, moramo najprej implementirati

funkcionalnost za http, kar dosežemo z dodajanjem modula Angular HttpClient.

V glavnem modulu dodamo naslednje in podobno kot prej dodamo izbrani modul v

imports.

Izsek programske kode 4.3: Uvoz modula za HTTP

import { HttpClientModule } from '@angular/common/http'

S pomočjo Angular Command Line Interface dodamo novo service datoteko za

WordPress, ki ji dodamo naslov za JSON podatke. S pomočjo metode getPosts

pridobimo JSON podatke iz naslova, ki ga podamo kot parameter.

Izsek programske kode 4.4: Metoda getPosts

getPosts(): Observable<any[]> {

return this.http.get<any[]>('http://localhost/wordpress/wp-

json/wp/v2/posts?_embed', {

params: {

per_page: '6'

}

Za tem moramo urediti še html datoteko za prikaz. Tukaj smo uporabili element mat-

card za prikaz naslova prispevkov in vsebine.

Izsek programske kode 4.5: HTML komponente za mat-card

<mat-card-header>

<mat-card-title>{{ post.title.rendered }}</mat-card-title>

<mat-card-subtitle>{{ post.date_gmt | date }}</mat-card-subtitle>

</mat-card-header>

<img matCardImage

Izsek programske kode 4.2: Import sekcija v app.module

imports: [

BrowserModule,

BrowserAnimationsModule,

AppMaterialModule

],

31

[src]="post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['m

edium'].source_url">

<mat-card-content [innerHTML]="post.excerpt.rendered"></mat-card-

content>

<mat-card-actions align="start">

<a mat-button [href]="post.link">Ogled</a>

</mat-card-actions>

</mat-card>

Na sliki 4.5 vidimo, da so na strežniku z Angular aplikacijo prikazani prispevki s spletne

strani, ustvarjene z WordPress.

Slika 4.5: Ustvarjena Angular aplikacija, ki nam prikaže prispevke s strani WordPress

32

5 SKLEP

Število uporabnikov na spletu vsak dan narašča. Vprašati se moramo, na kakšen način

lahko največ uporabnikov privabimo s pomočjo vizualnih elementov. Videli smo, da je

veliko število spletnih strani ustvarjenih s pomočjo sistemov za upravljanje vsebine, kjer

prevladuje WordPress. V podobnih sistemih smo omejeni, ko pride do vizualnega

oblikovanja spletnega mesta. Tedaj nastopijo JavaScript in razne knjižnice. Knjižnice in

ogrodja so v veliki večini odprtokodne narave, kar je prednost, ko pride do pridobivanja

znanja. S pomočjo privlačne spletne strani uporabnika privabimo, vendar je na koncu

najpomembnejša vsebina.

Diplomsko delo smo razdelili na dva dela, na teoretični in praktični del. V teoretičnem

delu smo opisali izbrani sistem za upravljanje vsebin ter zapisali, zakaj ima na tržišču

prevladujoč delež. Pogledali smo si tudi najbolj priljubljene JavaScript knjižnice, kjer smo

vključili tudi ogrodja, ki smo jih tudi opisali ter primerjali z ostalimi. Ugotovili smo, da

obstaja mnogo knjižnic, ki imajo vsaka svoj namen. Pogledali smo si tudi razlike med

knjižnicami in ogrodji, ker jih mnogokrat napačno enačijo. Nato smo opisali način, s

pomočjo katerega se lahko enostranske aplikacije povezujejo z izbranim sistemom za

upravljanje vsebin. Podali smo tudi opis urejevalnikov, katere smo uporabili pri

praktičnem delu, ter primerjali sodobni način razvijanja spletnih strani s klasičnim. Pri

praktičnem delu smo vzpostavili delovno okolje s pomočjo programske opreme

WampServer in namestili sistem za upravljanje vsebin, kjer smo s pomočjo vtičnika dodali

vsebino. Ustvarili smo Angular aplikacijo ter jo prilagodili za prikaz vsebine, ki smo jo

pridobili skozi WordPressov REST API. Uporabili smo Angular CLI (Command Line

Interface), s pomočjo katerega smo ustvarili novo aplikacijo. Zaradi oblikovanja smo

dodali tudi Angular Material. Komponente le-tega smo uvozili v aplikacijo samo. Za

podatke smo dodali Angular modul za HTTP – HTTPClient. Za tem smo ustvarili nov

service, kjer smo ustvarili metodo getPosts, v kateri smo dodali naslov, kjer se

nahajajo JSON podatki. Za konec smo prilagodili HTML datoteko zaradi boljšega

oblikovanja.

33

Ugotovili smo, da je generiranje aplikacij dokaj preprosto, saj imamo na voljo ogromno

orodij in moramo le vnesti ukaze v ukazno vrstico. Čeprav nismo imeli strokovnega znanja

iz ogrodja Angular, smo lahko zlahka našli koristne informacije v skupnosti ostalih

razvijalcev in v uradni dokumentaciji.

Težava, s katero smo se pogosto srečevali, je zastarelost podatkov, kajti uporabljene

programske rešitve se pogosto posodabljajo in temu se je bilo treba prilagoditi. Težava je

tudi v količini podatkov, kajti knjižnic je ogromno in s tem tudi dokumentacije. Pri

podatkih smo pogosto naleteli na subjektivna mnenja, kot so opisi »najboljših« knjižnic.

Objektivno ne moremo podati, katera knjižnica je najboljša, saj imajo različne cilje in

različne metode za dosego le-teh.

Področje spletnega razvoja se nenehno spreminja in s tem tudi sistemi za upravljanje

vsebin. Če želimo biti konkurenčni, se moramo nenehno izobraževati. Čeprav je ogromno

tehničnega dela, spoznamo, da je izdelava spletnih mest do določene mere tudi

umetnost. WordPress in nekatere JavaScript knjižnice, kot je ogrodje Angular, bodo na

tržišču verjetno še nekaj časa, ker za njimi stojijo ogromne skupnosti razvijalcev, ki bodo

te rešitve tudi posodabljali.

Vprašanje, ki se bo pojavilo v prihodnosti, je zmogljivost oziroma sposobnost umetne

inteligence, ki bi lahko nadomestila razvijalce spletnih strani. Kot smo videli v diplomski

nalogi, je oblikovanje spletnih mest do neke mere tudi subjektivno. Obstaja že nekoliko

rešitev, ki s pomočjo umetne inteligence posnemajo priljubljene spletne strani in s tem

tudi njihovo oblikovanje.

Za nadaljnje delo bi se morda lahko osredotočili na pridobivanje izkušenj in znanja na

področju knjižnic, omenjenih v tem diplomskem delu. Kot smo videli, je povpraševanje po

takšnih razvijalcih veliko. Pogledali bi si lahko, kako deluje skupinski razvoj aplikacije v

izbrani knjižnici in na kakšen način se uporabljajo sistemi za nadzor verzij.

34

VIRI IN LITERATURA

[1] 1&1 Digital Guide. 1 & 1 Digital Guide, 2018. Dostopno na:

https://www.1and1.com/digitalguide/hosting/cms/cms-comparison-a-review-of-

the-five-best-platforms/ [6. 5. 2018].

[2] Alsudani, F. in Casey, M., The Effect of Aesthetics on Web Credibility. People and

Computers XXIII,(2009), str. 512–519.

[3] Angular. Angular docs, 2018. Dostopno na: https://angular.io/docs [9. 8. 2018].

[4] Arunesh, P. wisdmlabs, 2015. Dostopno na:

https://wisdmlabs.com/blog/demystifying-project-calypso-and-wordpress-coms-

new-architecture/ [21. 8. 2018].

[5] Atom Discuss. Atom Discuss Forum, 2018. Dostopno na:

https://discuss.atom.io/t/why-is-atom-so-slow/11376 [5. 8. 2018].

[6] Atom. Atom.io, 2018. Dostopno na: https://atom.io/packages [14. 8. 2018].

[7] Be.Mydo. bemydo.com, 2018. Dostopno na: https://www.bemydo.com/taking-

control/wordpress-theme/ [24. 8. 2018].

[8] Borodescu, C. Slash Data, 2013. Dostopno na:

https://www.slashdata.co/blog/2013/07/web-sites-vs-web-apps-what-the-

experts-think [18. 8. 2018].

[9] BuiltWith. Trend BuiltWith, 2018. Dostopno na: https://trends.builtwith.com/cms

[24. 8. 2018].

[10] Callaham, J. Windows Central, 2016. Dostopno na:

https://www.windowscentral.com/there-are-now-12-billion-office-users-60-

million-office-365-commercial-customers [27. 8. 2018].

35

[11] Cutts, M. WordPress & CEO, 2013. Dostopno na :

https://www.youtube.com/watch?v=3P-m2cBCJSk [1.9.2018]

[12] Deutcsh, D. Medium.com, 2017. Dostopno na: https://medium.com/of-all-things-

tech-progress/understanding-mvc-architecture-with-react-6cd38e91fefd [25. 8.

2018].

[13] Facebook-Github. GitHub, 2018. Dostopno na: https://github.com/facebook/react

[13. 8. 2018].

[14] GoodRich, R. Business News Daily, 2013. Dostopno na:

https://www.businessnewsdaily.com/5148-content-management-systems.html

[22. 8. 2018].

[15] Google. Developers Google, 2018. Dostopno na:

https://developers.google.com/web/progressive-web-apps/ [4. 8. 2018].

[16] jQuery. jQuery.com, 2018. Dostopno na: https://jquery.com/browser-support/

[24. 8. 2018].

[17] Kang, Y. in Kim, Y. Designing emotionally evocative homepages: an empirical study

of the quantitative relations between design factors and emotional dimensions..

International Journal of Human-Computer Studies, (2003), str. 899–940.

[18] Karthikeyan. Medium.com, 2018. Dostopno na: https://medium.com/beginners-

guide-to-mobile-web-development/a-guide-to-google-material-design-

977315149ea5 [24. 7. 2018].

[19] Khan Academy. Khan Academy, 2018. Dostopno na:

https://www.khanacademy.org/computing/computer-programming/html-css-

js/using-js-libraries-in-your-webpage/a/whats-a-js-library [4. 9. 2018].

[20] Krause, S.. StefanKrause, 2018. Dostopno na: https://stefankrause.net/js-

frameworks-benchmark4/webdriver-ts/table.html [11. 8. 2018].

36

[21] Mcfarlin, T. TomMcfarlin Practical WordPress development, 2016. Dostopno na:

https://tommcfarlin.com/atom-packages-for-wordpress/ [8. 8. 2018].

[22] Mening, R. WebsiteSetup.org, 2017. Dostopno na:

https://websitesetup.org/popular-cms/ [7. 8. 2018].

[23] Motroc, G.. JaxEnter, 2018. Dostopno na: https://jaxenter.com/github-trending-

tensorflow-vuejs-142382.html [9. 8. 2018].

[24] Paul, A.. CubetTech, 2018. Dostopno na: https://www.cubettech.com/blog/are-

you-using-javascript-technologies-top-5-things-to-expect-in-2018/[13. 8. 2018].

[25] Pick-a-web. Pick A Web, 2018. Dostopno na:

https://www.pickaweb.co.uk/kb/what-is-a-content-management-system/ [4. 5.

2018].

[26] Presa, A. AlfonsoPresa, 2015. Dostopno na:

https://alfonsopresa.wordpress.com/2015/08/29/creating-angular-2-applications-

with-plain-old-javascript-es5/ [10. 8. 2018].

[27] Rouse, M. WhatIs.com, 2016. Dostopno na:

https://searchcontentmanagement.techtarget.com/definition/content-

management-system-CMS [5. 8. 2018].

[28] Sehgal, K.. Medium.com, 2018. Dostopno na: https://medium.com/karuna-

sehgal/discovering-ember-js-2e92e8d32e36 [3. 8. 2018].

[29] Sudhir, N. PixelMatic, 2016. Dostopno na:

https://www.pixelmattic.com/blog/commercial-cms-for-publishers/

[11. 8. 2018].

[30] Techsith.com. TECHSITH = Technology Simple Intuitive Tutorial Home, 2018.

Dostopno na: http://techsith.com/what-is-the-difference-between-a-website-and-

a-web-application/ [30. 5. 2018].

[31] Vue. Vue.js docs, 2018. Dostopno na: https://vuejs.org/v2/guide/ [11. 8. 2018].

37

[32] W3schools. W3Schools, 2018. Dostopno na:

https://www.w3schools.com/jquery/jquery_intro.asp [12. 8. 2018].

[33] W3Techs. W3Techs - Web Technology Surveys, 2018. Dostopno na:

https://w3techs.com/technologies/details/cm-wordpress/all/all [4. 8. 2018].

[34] wbond. Package Control, 2018. Dostopno na: https://packagecontrol.io/about

[13. 8. 2018].

[35] WordPress REST Doc. WP REST API, 2018. Dostopno na: http://v2.wp-api.org/

[13. 8. 2018].

[36] WordPress.org. WordPress Codex, 2018. Dostopno na:

https://codex.wordpress.org/ [16. 8. 2018].

[37] WordPress.org. Wordpress.org Plugins, 2018. Dostopno na:

https://wordpress.org/plugins/ [24. 8. 2018].

[38] WordPress. WordPress.org, 2018. Dostopno na:

https://wordpress.org/about/requirements/ [24. 8. 2018].

[39] You, E. Medium.com, 2016. Dostopno na: https://medium.com/the-vue-

point/vue-2-0-is-here-ef1f26acf4b8 [11. 8. 2018].