PROGRAMUL DE STUDIU CALCULATOARE FORMA DE ÎNVĂȚĂMÂNT IF PROIECT DE DIPLOMĂ COORDONATOR ȘTIINȚIFIC CONF. DR. ING. GIANINA GABOR ABSOLVENT CĂTĂLIN… [617454]

ORADEA
2016
UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI
TEHNOLOGIA INFORMAȚIEI
PROGRAMUL DE STUDIU CALCULATOARE
FORMA DE ÎNVĂȚĂMÂNT IF

PROIECT DE DIPLOMĂ

COORDONATOR ȘTIINȚIFIC
CONF. DR. ING. GIANINA GABOR

ABSOLVENT: [anonimizat]_________

Lucrare de finalizare a studiilor a student: [anonimizat] – Cătălin Gabriel Hercuț
1). Tema lucrării de finalizare a studiilor:
IMPLEMENTAREA UNUI BLOG MULTISITE FOLOSIND WORDPRESS ȘI ANGULAR
2
2). Termenul pentru predarea lucrării: 09.09.2016
3). Elemente inițiale pentru elaborarea lucrării de finalizare a studiilor
HTML/HTML5, CSS, JavaScript/TypeScript, MySQL, PHP, WordPress, Angular 2, Docker,
Git.
4). Conținutul lucrării de finalizare a studiilor: Introducere, Limbaje utilizate – PHP,
JavaScript, TypeScript; Tehnologii folosite în realizarea aplicației – HTML, HTML5, CSS,
MySQL, Apache, Docker, Git, Sublime, Mac OS X; Proiectarea aplicației, Imp lementarea
aplicației, Concluzii , Bibliografie.
5). Material grafic:
6). Locul de docum entare pentru elaborarea lucrării: Internet
7). Data emiterii temei :01.10.2015

Coordonator științific
Conf. dr. ing. Gianina Gabor

ORADEA
2016
UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI
TEHNOLOGIA INFORMAȚIEI
PROGRAMUL DE STUDIU CALCULATOARE
FORMA DE ÎNVĂȚĂMÂNT IF

IMPLEMENTAREA UNUI
BLOG MULTISITE FOLOSIND
WORDPRESS ȘI ANGULAR 2

COORDONATOR ȘTIINȚIFIC
CONF. DR. ING. GIANINA GABOR

ABSOLVENT: [anonimizat] 5
Capitolul I. Limbaje utilizate ………………………….. ………………………….. ………………………….. … 7
I.1 PHP ………………………….. ………………………….. ………………………….. ………………………… 7
I.2 JavaScript ………………………….. ………………………….. ………………………….. ………………… 8
I.3 TypeScript ………………………….. ………………………….. ………………………….. ……………….. 9
Capitolul II. Tehnologii utilizate în realizarea aplicației ………………………….. ……………………. 10
II.1 HTML ………………………….. ………………………….. ………………………….. …………………… 10
II.2 HTML5 ………………………….. ………………………….. ………………………….. …………………. 13
II.3 CSS ………………………….. ………………………….. ………………………….. ……………………… 14
II.4 MySQL ………………………….. ………………………….. ………………………….. …………………. 16
II.5 HTTP Apache ………………………….. ………………………….. ………………………….. ………… 17
II.6 Docker ………………………….. ………………………….. ………………………….. ………………….. 18
II.7 Git ………………………….. ………………………….. ………………………….. ……………………….. 19
II.8 Sublime 3 ………………………….. ………………………….. ………………………….. ……………… 21
II.9 Mac OS X ………………………….. ………………………….. ………………………….. ……………… 22
Capitolul III. WordPress ………………………….. ………………………….. ………………………….. …… 22
III.1 Generalități WordPress ………………………….. ………………………….. ……………………….. 22
III.2 Cerințe pentru instalare ………………………….. ………………………….. ………………………. 25
III.3 Instalare WordPress ………………………….. ………………………….. ………………………….. . 25
Capitolul IV. Angular 2 ………………………….. ………………………….. ………………………….. …….. 27
IV.1 Generalități Angular 2 ………………………….. ………………………….. …………………………. 27
IV.2 Necesități pentru rulare ………………………….. ………………………….. ………………………. 27
IV.3 Structură modulară ………………………….. ………………………….. ………………………….. … 28
Capitolul V. Proiectarea aplicației ………………………….. ………………………….. …………………… 30
V.1 Integrare Angular 2 în WordPress ………………………….. ………………………….. …………. 30
Capitolul VI. Implementarea aplicației ………………………….. ………………………….. …………….. 34
VI.1 Structura aplicației ………………………….. ………………………….. ………………………….. …. 34
VI.2 WordPress ………………………….. ………………………….. ………………………….. …………… 34
VI.2.1 Instalare WordPress Multisite ………………………….. ………………………….. ………… 35
VI.2.2 Modificarea unei teme WordPress ………………………….. ………………………….. ….. 36
VI.2.3 Plugin -uri ………………………….. ………………………….. ………………………….. ……….. 37
VI.3 Angular 2 ………………………….. ………………………….. ………………………….. ……………… 37
VI.3.1 Necesități Angular 2 ………………………….. ………………………….. ……………………… 37
VI.3.2 Dezvoltarea aplicației Angular 2 ………………………….. ………………………….. ……… 38

VI.4 Integrare Angular în WordPress ………………………….. ………………………….. …………… 43
VI.5 Extinderea aplicației ………………………….. ………………………….. ………………………….. . 47
Conclu zii ………………………….. ………………………….. ………………………….. ……………………….. 49
Bibliografie ………………………….. ………………………….. ………………………….. …………………….. 50

5

Introducere

Această lucrare prezintă realizarea unui blog multisite cu funcționalități multiple bazat
pe CMS -ul (Content Management System/Sistem de administrare a conținutului) WordPress
și a framework -ului Angular 2, aplicație care oferă posibilitatea încapsulării în
container e(Docker) pentru a putea fi folosită direct , pe un server având deja toate
dependințele necesare în containerul respectiv.
WordPress este cel mai popular CMS la ora actuală, ultima versiune(versiunea 4.6)
având un număr de peste 6.000.000 de download -uri la momentul scrierii acestei lucrări, iar
25% din site -urile web la nivel mondial sunt realizate cu ajutorul acestei platforme. Acest
CMS este soluția preferată de marea majoritate a dezvoltatorilor web deoarece este un sistem
flexibil a cărui funcționalitate poate fi ușor extinsă.
Am realizat această aplicație deoarece sunt pasionat de WordPress și am vrut să îmi
extind cunoștințele legate de dezvoltarea funcționalităților existente și crearea unor noi
funcțio nalități. Aplicația este un blog multisite de prezentare și review tehnologii care conține
și aplicații externe, realizate în Angular 2. Pe parcursul elaborării acestei aplicații mi -am
îmbunătățit cunoștințele legate de : WordPress, IDE-ul Sublime, MySql, dar am dobândit de
asemenea cunoștințe noi: Apache, TypeScript, Angular 2, Docker, dar și Git.
Am ales WordPress drept CMS pentru realizarea aplicației și datorită comunității
online a dezvoltatorilor care vine în ajutor cu răspunsuri explicite la întrebăr i variate dar și cu
alternative care pot fi de cele mai multe ori mult mai eficiente decât abordarea inițială a
dezvoltatorului web. Funcționalitățile standard cu care WordPress vine preinstalat sunt de
cele mai multe ori suficiente pentru crearea un simplu site/blog, dar pot fi extinse dacă
dezvoltatorulul deține cunoștințe de PHP(recomandat versiunea 5.6), MySql(recomandat
versiunea 5.6), dar și cunoștințe pe partea de server Apache sau Nginx.
Motivația alegerii acestei teme pentru proiectul de diplomă este acela de a extinde
funcționalitatea unui simplu blog și de a îmbina două dintre cele mai populare tehnologii web
disponibile la ora actuală și anume WordPress(CMS) și Angular 2(Framework).

6
În momentul de față datorită varietății tehnologiei consumatorul de rând nu știe care
este cea mai potrivită alegere pentru el sau efectiv nu se poate hotărî, de aceea apar blogurile
de special itate sau canalele de Youtube pentru a ajuta clienții să aleagă produsul de care ei au
nevoie, la un preț acceptabil.
Obiectivul practic al acestei lucrări este acela de a ajuta clienții(consumatorii) să se
identifice cu produsele prezentate pe blog pent ru a facilita procesul de achiziție , iar obiectivul
tehnic este realizarea unui sistem care îmbină două tehnologii web extrem de importante:
WordPress și Angular 2 . Realizarea acestui sistem a fost o provocare deoarece framework -ul
Angular 2 nu este lansat oficia l, fiind încă în versiunea Beta, iar documentațiile găsite
prezentau căi ocolitoare pentru îmbinarea celor două tehnologii, care nu erau complete sau
necesitau programe adiționale.
Tehnologiile folosite de WordPress sunt actualizate, iar problemele apărute la
versiunile anterioare sunt raportate și rezolvate astfel CMS -ul fiind actualizat în perioade
scurte de timp, breșele de securitate din CMS sunt rezolvate în cel mai scurt timp de la
constatare. Deoarece Angular 2 se află încă în versiunea Beta, iar versiunea finală o sa apară
la sfârșitul acestui an, probleme legate de anumite funcționalități încă există, dar pot fi
rezolvate cu ajutorul comunității online.

7
Capitolul I. Limbaje utilizate

I.1 PHP
Lansarea oficială a PHP( Php: HypertextPreprocessor ) a fost făcută de Rasmus
Leodorf în iunie 1995 pentru a face ca task -urile comune din programarea web să fie mai
ușoare și cât mai puțin repetitive. Numele inițial facea referire la “Personal Home Page” dar a
devenit un acronim recursiv, care face referire la “ Php: HypertextPreprocessor ”. Scopul
acestei lansări a fost acela de a minimiza cantitatea de cod necesară pentru atingerea
rezultatelor, ceea ce a făcut ca PHP să fie integrat în codul HTML. [1].
Pe parcursul dezvoltării PHP a captat atenția a tot mai mulți dezvoltatori, lansările
ulterioare au rescris complet PHP, eliminând astfel problemele deja existente, dar au creat și
funcționalități ulterioare precum capacitatea de scriere a modulelor, care sunt necesare
explicit an umitor tipuri de aplicații, adăugând funcționalitate la nivelul nucleului. Alte
modificări importante ale acestui limbaj au fost trecerea pe motorul Zend, adăugarea părții de
tratare a erorilor și excepțiilor, try/catch, lucrul cu documentele Xml(Extensibl e Markup
Language/meta -limbaj de marcare) dar și adăugarea SqLite, o librărie care implementează un
motor de baze de date SQL încapsulat și care nu necesită configurare. [2].
PHP este unul dintre cele mai rapide limbaje de scripting, care rivalizează cu Pe rl și
ASP. Performanța fiind una dintre caracteristicile cheie ale PHP, foarte apreciată de
dezvoltatorii web . În cazul în care PHP este combinat cu cache pentru cod, performanța se
dublează deși în cazul unor scripturi performanța poate crește mai mult de atât.
Alt avantaj de care PHP dispune este integrarea ușoară cu o diversitate de baze de
date, inclusiv MySQL, PostgreSQL, Oracle și Microsoft SQL Server. Acest limbaj suportând
un număr mare de protocoale cum ar fi POP3, IMAP, LDAP. [3].
PHP deține de asemenea și funcții de sistem, lucrul cu fișiere: creare, deschidere,
citire, scriere, dar și închidere. Lucrul cu informația din fișiere poate merge și mai departe:
informația dintr -un fișier poate fi salvată în alt fișier. [4].

8
Limbajul PHP stă la baza C MS-ului WordPress, cu ajutorul lui au fost create
funcționalitățile și conexiunile cu baza de date.
La realizarea acestui proiect am folosit limbajul PHP pentru a realiza configurările de
bază wordpress, pentru a adăuga noi funcționalități prin crearea uno r pagini custom(template
pages) și pentru integrarea frameworkului Angular 2. Versiunea PHP folosită în cadrul
acestui proiect este: “PHP 5.6.19 (cli) (built: Mar 10 2016 14:12:41) ”.

I.2 JavaScript
JavaScript este un limbajul de progamare al Web -ului, fi ind orientat pe obiect și care
se bazează pe conceptul de prototip. Marea majoritate a site -urilor actuale folosesc JavaScript
și toate browserele moderne indiferent de platforma utilizată(desktop, console, tablete și
telefoane mobile), toate aceste platfo rme conțin interpretoare de JavaScript făcând acest
limbaj drept unul dintre cele mai populare limbaje de programare din istorie.
JavaScript face parte din triada pe care toți dezvoltatorii web sunt obligați să o
cunoască: HTML pentru a specifica conținutu l paginilor web, CSS pentru a asigura designul
paginilor web și JavaScript pentru a asigura comportamentul paginilor web.
Numele JavaScript este înșelător deoarece acest limbaj de programare este complet
diferit de Java. JavaScript a depășit demult scopul inițial și anume acela de limbaj de
scripting devenind un limbaj robust și eficient care poate îndeplini un scop general.
Fiind folosit mai ales pentru introducerea funcționalităților în paginile web, codul
JavaScript din aceste pagini este rulat de către browser. Fiind dezvoltat inițial de către
Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi
LiveScript și denumit în final JavaScript. Versiunea curentă a JavaScriptului respectă
normele ECMA 5( European Computer Manufacturers Association Script care este un limbaj
standard de scripting derivat din JavaScript și la dezvoltarea căruia participă și Microsoft ). De
asemenea pentru limbajele care respectă acest standard, există interpretori specializați sau
motoare de exemplu V8(Goo gle). [5].
Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un
standard W3C pentru DOM -ul pe care trebuie să îl pună la dispoziție un browser, ceea ce
oferă premiza scrierii de script -uri portabile, care să funcționeze pe toate br owserele.

9
La realizarea proiectului de diplomă am folosit JavaScript implicit, deoarece în cadrul
aplicațiilor realizate în Angular 2 există un compilator care transformă codul TypeScript în
cod JavaScript pentru asigurarea compatibilității cu browserele m ai vechi.

I.3 TypeScript

TypeScript nu este un limbaj complet nou ci este un superset al ECMA 6(2015).
Codul scris în ECMA 6 este perfect valid și compilabil în TypeScript. Relația dintre ECMA
5, 6 și TypeScript poate fi cel mai ușor înțeleasă din figura I.1:

Figura I.1 Relația dintre TypeScript și limbajele de script standard. [6].

ECMA 5 este clasicul JavaScript care rulează pe aproape orice browser. ECMA 6 este
JavaScript de generație următoare care conține clase și module, iar TypeScript înglobează
aceste concepte și vine în plus cu tipuri și adnotări. TypeScript este produsul colaborării
Microsoft cu Google, un alt produs al acestei colaborări este frameworkul Angular 2 al cărui
nucleu este scris în TypeScript. Numele acestui superset de ES 5/JavaS cript(orice cod scris în
JavaScript este valid în TypeScript) este sugestiv și face referire la unul dintre conceptele
cheie pe care le oferă și anume tipurile: lipsa tipurilor de exemplu în JavaScript duce de cele
mai multe ori la erori de compilare, de a ceea TypeScript rezolvă această problemă și nu
numai, codul devine mai clar. Pentru a mulțumi toate categoriile de dezvoltatori, tipurile sunt
opționale. [7].

10
TypeScript vine cu tipuri predefinite: string, array, number, boolean, enums, any,
void. Spre deo sebire de JavaScript, unde conceptul de programare orientată pe obiecte a fost
realizată folosind prototipuri, în TypeScript putem folosi clasele la fel ca în orice alt limbaj de
programare orientată pe obiecte (C#). Alte avantaje ale folosirii acestui sup erset sunt:
interfețele, importul și exportul modulelor, adnotările. Unul dintre dezvoltatorii acestui limbaj
este Anders Hejlsberg, care fost unul dintre cei mai importanți pioni și în dezvoltarea C# -ului
dar și a altor limbaje de programare precum Delphi și Turbo Pascal. [8].
TypeScript poate fi folosit pentru a dezvolta aplicații atât pe partea de client cât și pe
partea de server(folosind Node.js). TypeScript a fost folosit pentru implementarea
modulelor(componentelor) necesare realizării aplicațiilor î n Angular 2. Versiunea folosită
pentru TypeScript în cadrul proiectului este: “1.9”.

Capitolul II. Tehnologii utilizate în realizarea aplicației

II.1 HTML

HTML( Hyper Text Markup Language ) este un limbaj de marcare utilizat pentru crearea
paginilor web ce pot fi afișate într -un browser. Un limbaj de marcare este format dintr -o serie
de tag -uri de markup; la rândul lor documentele HTML sunt descrise de tag -urile HTML
prezente, fiecare tag descrie un anumit tip de conținut.
Scopul HTML este mai degrabă ace la de a prezenta informația: paragrafe, fonturi, tabele
ș.a.m.d. decât descrierea semanticii documentului. HTML a apărut datorită nevoii fizicienilor
de la CERN(Laboratorul European de fizică și particule) de a trimite documente cu ajutorul
internetului, r ezultând o producție îmbunătățită considerabil. Mosaic a fost printre primele
browsere web, deși a fost gândit pentru a vizualiza documente HTML, avea și opțiunea de a
accesa resurse mult mai prolifice de pe Internet precum arhive FTP(File Transfer Protoco l) și
colecții organizate de documente.

11
Specificațiile HTML sunt dictate de World Wide Web Consortium (W3C). HTML
furnizează mijloace prin care conținutul unui document poate fi adnotat cu diverse tipuri de
metadata și indicații de redare. Indicațiile de r edare pot varia de la decorațiuni minore ale
textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau formatat
într-un anumit mod, până la scripturi sofisticate, cum ar fi formularele. Metadata în HTML
poate conține informații de spre titlul și autorul documentului, informații structurale despre
modul în care este împărțit documentul pe diferite segmente, paragrafe, liste, titluri.
HTML -ul poate fi generat direct utilizând tehnologii de codare din partea serverului cum
ar fi PHP, JSP sau ASP. Momentan există soluții automatizate pentru generarea de cod
HTML.
Paginile HTML sunt formate din tag -uri și au extensia .html sau .htm. În marea lor
majoritate aceste tag -uri sunt pereche, una de deschidere <tag> și alta de închidere </tag>,
dar există și cazuri în care nu se închid, atunci se folosește <tag /> , browserul interpretează
aceste tag -uri afișând rezultatul pe ecran. HTML -ul nu este un limbaj case sensitiv (nu face
deosebirea între litere mici și mari). Pagina principală a unui do meniu este fișierul
index.html, respectiv index.htm. Această pagină este setată pentru a fi afișată automat la
vizitarea unui anumit domeniu.
Structura unui tag este următoarea <tag atribut="valoare"> … </tag>, denumirea de
tag poate fi considerată drept un sinonim pentru element, exemplu poate fi considerat
elementul a, care va afișa un scurt text, care va redirecta utilizatorul spre o anumită adresă
web:
<a href=" url">link text </a>.
Structura unei pagini HTML este:
➢ versiunea HTML a paginii
➢ zona head cu tag-urile: <head>…</head>
➢ zona body cu tag -urile: <body>…</body>
Tag-urile meta sunt necesare pentru un bun rating SEO(Search Optimization Engine),
oferit de Google prin tool -urile disponibile (Google Analytics). Aceste tag -uri ajută la
creșterea vizi bilității conținutului și implicit a numărului de useri. Tag -urile meta nu sunt
suficiente pentru un bun rating SEO, fiind necesare de asemenea un fisier Robots.txt în care
sunt prezente linkuri cu principalele informații de pe site, dar și a unui sitemap. xml. [9].

12
<meta name=”nume” content=”continut”>.
O altă caracteristică utilă a acestului limbaj de markup este capacitatea de adăuga
comentarii:
<!–Acesta este un comentariu –>
Un exemplu care ilustrează perfect utilitatea comentariilor, dar și a modulu i în care
sunt incluse scripturile în limbajul de markup HTML, scripturi necesare rulării aplicației de
prognoză meteo realizate în Angular 2 este prezentat în figura II.1.

FiguraII.1 Fișierul index.html aplicației Angular 2.
Tot în această această figu ră pot fi observate si tag -uri custom(my -city-list) realizate în
Angular 2.
În cadrul acestui proiect HTML este folosit atât de către WordPress cât și de către
Angular 2.

13

II.2 HTML5

HTML5 este varianta îmbunătățită adusă clasicului HTML, HTML5 a apărut în anul
2014. Este cea de -a cincea revizuire a standardului HTML (care a fost creat în 1990 și
standardizat ca HTML4 din 1997), iar din octombrie 2011 HTML5 este în curs de dezvoltare.
Principalele sale obiective au fost acelea de a îmbunătăți limbajul cu un suport pentru cele
mai recente apariții multimedia în același timp menținându -l ușor de citit de către oameni și
interpretat corespunzător de computere și device -uri (browsere web, parsere, etc.). HTML5
își propune să însumeze nu numai HTML4, dar și X HTML1 și DOM2HTML.
Una dintre cele mai mari difențe între HTML5 si versiunea precedentă este solicitarea
de către versiunea anterioară a plugin -uri si API -uri suplimentare(din această cauză o pagină
web care a fost construită și testată într -un browser est e posibil să nu se încarce corect în alt
browser). HTML5 oferă o interfață comună pentru a facilita încărcarea mai ușoară a
elementelor. De exemplu în HTML5 nu este necesară instalarea plugin -ului Flash, deorece
conținutul Flash va rula datorită îmbunătăți rilor cu care vine HTML5. Unul dintre scopurile
urmărite de HTML5 este suportul pentru multimedia pe dispozitivele mobile. Noi
funcționalități sintactice au fost introduse pentru a suporta elemente ca: video, audio și
canvas.
HTML5 introduce noi funcționa lități care schimbă modul în care user -ul
interacționează cu documentele, incluzând:
● Noi reguli de parsare pentru a îmbunătăți flexibilitatea
● Noi atribute
● Eliminarea atributelor redundante
● Capabilități drag and drop de la un document HTML5 la altul
● Editare offline
● Reguli detaliate privind parsarea
● Standard comun pentru stocarea datelor în bazele de date SQL(Web SQL)
HTML5, de asemenea, îmbunătățește tratarea documentelor invalide, astfel încât sintaxa
erorilor va fi tratată uniform de toate browsere le cunoscute. [10].

14
În proiect am folosit HTML5 în paginile de template ale temelor, Twenty Ten și
TwentyFourteen, figura II.2.

Figura II.2 Fișierul header.php care conține HTML5.

II.3 CSS

CSS(Cascading Style Sheets), este un standard simplu al zilelor noastre, ce oferă
designerilor / programatorilor un mod eficient de a controla modul de prezentare a paginilor
Web. În zilele noastre CSS a ajuns să fie în mod primar, un limbaj folosit exclus iv doar
pentru "web design", însă nu putem exclude faptul că acest limbaj este folosit și în alte medii
de programare.
CSS level 1 este o recomandare a World Wide Web Consortium(W3C) și este
implementat în cele mai recente versiuni ale Netscape și în brow serele web dezvoltate de
Microsoft, specifică stilurile posibile sau declarațiile care determină modul în care un element
este prezentat într -o pagină Web. Folosind CSS, sursele definiției stilurilor pentru un anumit
document, sunt luate în considerare în următoarea ordine de precedență:
● Atributele de stil care se află în tag -ul unui anumit element HTML din fila curentă
● Atributele de stil aflate la începutul filei, care conține elementul HTML dorit să fie
modificat
● Atributele situate într -o filă exterioară elementului HTML curent

15
● Atributele specificate de utilizator în browser
● Fișierul css folosit implicit de către browser
În general, creatorul stilurilor paginii web, decide ce design va folosi pentru pagina
creată, dar este recomandat să ofere opțiuni use r-ului pentru a putea suprascrie anumite
atribute de afișare ale unor elemente. [11].
Spre deosebire de anii `90, când modul prezentării unei pagini se făcea prin tag -uri
HTML, divizate între ele în mai multe fișiere, ce solicitau o muncă enormă în cazul u nei
actualizări; CSS vine cu un nou standard, și anume ca printr -un singur fișier (convenție
stabilită între programatori să se folosească numele general “style.css”) să fie controlat întreg
aspectul proiectului Web. CSS nu necesită, cunoștințe avansate de programare, doar
cunoștințe de HTML. [12].
Figura II.3 prezintă modul în care este folosit CSS pentru a modifica paginile de
template ale temei în WordPress.

Figura II.3 Fișierul editor -style.css, conține CSS.

16

II.4 MySQL

MySQL este un sistem de management al bazelor de date relaționale(RDBMS) bazat
pe SQL(Structured Quey Language) . Este cel mai popular SGBD( Sistem de Gestiune al
Bazelor de Date ) la ora actuală, fiind de asemenea și open -source. MySQL rulează efectiv pe
toate platformele, incluz ând Linux, Unix și Windows. Deși poate fi folosit într -o gamă largă
de aplicații, MySQL este cel mai des asociat cu aplicațiile Web și cu publicarea online.
MySQL este o importantă componentă a unui sistem open source numit LAMP.
LAMP este o platformă pent ru dezvoltare web pe sistemele de operare Linux, Apache este
folosit drept Web server, MySQL este folosit ca sistem de management al bazelor de date
relaționale și PHP ca limbaj de scripting(Perl, Phyton sau Asp sunt variantele utilizării PHP).
Această pla tformă poartă denumirea de WAMP pe sistemul de operare Windows și MAMP
pe sistemul de operare Mac OS.
MySQL a fost conceput inițial de compania suedeză MySQL AB, care a fost
achiziționată de către Oracle în 2008. Dezvoltatorii pot să folosească încă MySQL sub licența
GNU General Public License(GPL), dar la nivel de companie licențele trebuie achiziționate
la Oracle. [13].
Versiunea MySQL folosit în cadrul acestui proiect este: “mysql Ver 14.14 Distrib
5.7.14, for osx10.11 (x86_64) ”. Setările pentru conexi unea la baza de date sunt prezentate în
figura II.4 :

Figura II.4 Conexiunea la baza de date.

17
MySQL este folosit implicit de WordPress care fol osește structura din figura II.5

Figura II.5 Diagrama bazei de date WordPress. [14]

II.5 HTTP Apache

Serverul HTTP Apache este o aplicație software cu rol de server web. Apache a fost
prima alternativă viabilă pentru serverul web al celor de la Netscape.

18
De obicei, Apache rulează pe sisteme de operare bazate pe Unix, și a fost dezvoltat
pentru a fi utili zat folosind sistemul de operare Linux.
Apache este dezvoltat și întreținut de o comunitate deschisă de dezvoltători. Acesta
este disponibil pentru o mare varietate de sisteme de operare inclusiv Unix, FreeBSD, Linux,
Solaris, Novell NetWare, OS X, Micro soft Windows. Aplicația este open -source dar este
distribuită sub licența Apache.
Apache a fost la început bazat pe NCSA HTTPd. Codul NCSA din Apache a fost
eliminat la una dintre rescrieri. Apache este cel mai popular server HTTP, estimându -se că
este fo losit de 54% din paginile web active. [15].
Apache oferă o mare varietate de funcționalități implementate ca module compilate
care extind funcționalitatea de bază. Acestea pot varia de la suport pentru limbaje de
programare adiționale, până la modele de a utentificare și control al accesului. Limbajele
comune care pot fi folosite includ Perl, Python, Tcl și PHP.
Alte funcționalități oferite de modulele adiționale sunt: autentificarea folosind
modulele mod_auth, mod_digest sau mod_ssl, rescrierea URL folosi nd modulul
mod_rewrite. Apache oferă de asemenea găzduire virtuală care permite unei singure instanțe
Apache să servească mai multe pagini web. Acesta suportă autentificarea folosind parole și
certificate digitale. Apache are de asemenea și un motor de cău tare și oferă suport pentru
FTP. [16].
Serverul HTTP Apache a fost folosit în dezvoltarea aplicației curente ca platformă
pentru interpretarea și execuția codului sursă WordPress, aplicația fiind dezvoltată utilizând
limbajul PHP.

II.6 Docker

Docker este un program open -source care permite să se încapsuleze toate
dependințele necesare rulării unei aplicații Linux; încapsularea are loc sub forma unui
container. Virtualizarea bazată pe container izolează aplicațiile unele de altele într -un sistem
de ope rare. Această abordare standardizează livrarea aplicațiilor, permițând aplicațiilor să
ruleze în orice mediu Linux, atât fizic cât și virtual. [17].
Deoarece folosesc același sistem de operare, containerele sunt portabile indiferent de
variațiile sistemulu i Linux și ocupă spațiu mai puțin decât mașinile virtuale(VM). [18]

19
Diferența de pricnciupiu între VM(Virtual Machin e) și Docker, în figurile II.6 și II.7.

Figura II.6 Imagini ale unui VM. [17]. Figura II.7 Docker. [1 7].
Docker este folosit pentru a asigura dezvoltări ulterioare ale aplicației încapsulând
dependințe, care pot fi ușor lansate pe un server, facilitând astfel procesul de deployment(o
serie de activități care fac ca un soft să fie disponibil utilizării).

II.7 Git

Git este un sistem revision control care rulează pe majoritatea platformelor, inclusiv
Linux, POSIX, Windows și OS X. Git este un sistem distribuit și nu întreține o bază de date
comună. Este folosită în echipele mari de dezvoltare, în care mem brii echipei acționează în
mare parte independent și sunt răspândiți pe o arie geografică mare.
Git este dezvoltat și întreținut de Junio Hamano, fiind publicat sub licență GPL și este
considerat software liber. Proiectele majore la care se folosesc Git am intim Linux, Android,
Debian, DragonFly BSD, Eclipse, Fedora, GIMP, Linux Kernel, Linux Mint, openSUSE,
Perl, phpBB, Qt, Ruby on Rails, Samba.
Dezvoltarea Git a început după ce mai mulți dezvoltatori ai nucleului Linux au ales să
renunțe la sistemul de revision control proprietar BitKeeper. Dezvoltarea noului sistem a fost

20
începută de Linus Torvalds în 3 aprilie 2005 pentru a fi anunțat câteva zile mai târziu (aprilie
6) pe lista de email a proiectulu i Linux kernel. O zi mai târziu, noul sistem a început să fie
folosit pentru dezvoltarea actuală de cod pentru proiectul Git.Primele operații “merge” au
avut loc pe data de 18 aprilie. În data de 16 iunie, versiunea 2.6.12 Linux kernel a fost pusă în
Git care continuă și în ziua de azi să fie sistemul revision control folosit de proiectul Linux
kernel. [19]
În figura II.8 se pot observa fișierele necesare WordPress care sunt salvate sub Git.

Figura II.8 Repository care conține fișierele necesare WordPress.

În cadrul proiectului am folosit Git prin intermediul GitHub, care este o platformă
web pentru version control dedicată dezvoltatorilor. GitHub a început în 2008 și a fost fondat
de Git ca sistem op en-source de management al codului, la fel ca sistemul Git, GitHub a fost
dezvoltat tot de Linus Torvalds.
GitHub permite gratis dezvoltatorilor să schimbe, să adapteze sau să îmbunătățească
software din repositori -urile publice, dar pentru repositori -urile private este nevoie să se
plătească. Indiferent dacă repositori -ul este public sau privat, dezvoltatorii au acces la
reviziile fiecărui fișier. Repositori -ul poate avea mai mulți colaboratori.

21

Figura II.9 Repositori -ul licență care conține fișierele necesare Angular 2.

II.8 Sublime 3

Sublime Text 3 este un editor de text foarte raspândit în ultima vreme, motivul
principal fiind modul în care reușește să îmbine o mulțime de aspecte dorite de la un editor de
texte într -un program mic însă foarte puter nic.
Acesta folosește un sistem API Python pentru plugin -uri și teme care sunt incredibil
de folositoare.
Sublime oferă o multitudine de funcționalitați foarte folositoare la scrierea codului,
cum ar fi compatibilitatea cu o mulțime de limbaje, multiple cursoare, autocomplete până la
reprezentare de structură de fișiere și posibilitate de lucru cu FTP, acestea fiind și principalele
motive pentru care am ales să folosesc acest editor.

22

II.9 Mac OS X

Sistemul de operare folosit pentru elaborarea acestui proiect este Mac OS X El
Capitan (versiunea 10.11) este ultima vesiune a sistemului de operare pentru computerele
Macintosh, El Capitan este succesorul versiunii Yosemite.
Acest sistem de operare se ba zează pe arhitectura Unix și este cel de -al doilea sistem
de operare folosit la nivel global după Windows. Am ales acest sistem de operare datorită
stabilității pe care o oferă.

Capitolul III. WordPress

III.1 Generalități WordPress

WordPress este un software open -source pentru publicare conținut online, care poate
fi instalat local pe un server web sau găzduit în cloud. WordPress este ușor de folosit, rapid și
oferă o bogată experiență pentru utilizator, un alt beneficiu al acestui CMS(Content
Manage ment System) este acela că deține o impresionantă comunitate online. Platforma
WordPress este scrisă în limbajul PHP, folosind pentru gestionarea bazelor de date sistemul
MySQL. Dispune un sistem de șabloane scrise în limbajele HTML și CSS.
În 2001, Matt Mullenweg și Mike Little au cofondat WordPress, care a fost lansat în
mai 2003 cu ajutorul unor dezvoltatori, ajutând la îmbunătățirea nucleului. La acea vreme
WordPress era folosit de utilizatori doar ca forum pentru blogging. De atunci însă, WordPress
a evoluat pentru a deveni un Content Management System cu toate funcționalitățile
necesare(widget -uri, plugin -uri și teme customizabile). WordPress este licențiat sub GPL v2,
ai cărui termeni și condiții permit copierea, modificarea și distribuirea drept sof tware gratis.

23
Această platformă este utilizată de 25% dintre site -urile existente, este cel mai popular
CMS și este folosit atât de organizații mici cât și de organizații mari precum CNN sau NY
Times. Peste 50 milioane de site -uri dezvoltate global folose sc această platformă.
La nucleul WordPress -ului stă o interfață simplă care poate fi folosită fără a necesita
experiență în domeniul dezvoltării software. Majoritatea utilizatorilor se obișnuiesc cu
interfața fără a fi nevoie de cursuri suplimentare. Utilizatorul are la dispoziție o serie de
acțiuni și funcționalități predefinite: crearea paginilor, posturilor, widgeturilor, postarea
comentariilor, modificarea temelor implicite, crearea unor teme custom, extinderea
funcționalităților existente prin ins talarea sa u dezvoltarea de plugin -uri. [20 ]
Folosirea acestui CMS simplifică modul în care este publicat și accesat conținut
divers. WordPress nu este doar un site web, este mai degrabă o platformă de publicare, cu un
număr mic de click -uri, utilizatorul f iind capabil să trimită un mesaj lumii. WordPress este
suportat de mare comunitate de utilizatori care au rezolvat o mare parte din problemele
transmiterii informației. Versiunea precedentă a fost descărcată de peste 10 milioane de
utilizatori, iar versiun ea curentă de peste 6 milioane. În figura III.1 poate fi observată interfața
clasică de administrare WordPress.

Figura III.1 Interfața tipică de administrare WordPress.

24
Extinderea funcționalității acestui CMS este relativ simplă, cu o librărie de peste
20.000 de plugin -uri și teme open -source, un număr care crește constant, deoarece crește și
numărul contribuitorilor. WordPress poate fi extins la o funcționalitate MultiSite în funcție de
nevoile utilizatorului, existând posibilitatea să se dezvolte și s ă se întrețină multiple site -uri
folosind o singură intalare WordPress. Această opțiune a fost disponibilă începând cu
versiunea 3.0, când această opțiune este activă site -ul original WordPress poate fi convertit să
suporte o rețea de site -uri. [21 ].
Realizarea designului unei pagini este relativ simplu, deoarece WordPress vine
preinstalat cu un sistem complet pentru teme, din care rezultă simplitatea. Contentul postat pe
această platformă este organizat la alegere după zi, lună, an, autor sau categorie. W ordPress
are integrat Killer Search, care este o alternativă rapidă la îndemâna utilizatorului așa cum se
poate observa și în figura III .2.

Figura III. 2 Killer Search în WordPress.

În WordPress chiar și URL(Uniform Resourse Locator) sunt adaptate pentru a putea fi
citite de oameni, dar sunt de asemenea și descriptive.

Figura III. 3 URL descriptiv în WordPress.

O altă funcționalitate extrem de utilă WordPress, este capacitatea de a traduce
conținutul în mai multe limbi, în momentul de față traducerile pot fi efectuate în peste 60 de
limbi diferite. User -ul creat în WordPress poate fi încadrat în diverse categorii :
Admininstrator, Subscriber, Contribuitor, Editor și Autor. Aceste categorii de useri sunt
predefinite, dar pot fi create și alte categorii. De asemenea pot fi adăugate parole pentru a

25
proteja anumite postări sau posturile pot fi setate să nu fie văzute d e nimeni altcineva în afară
de autor.
Versiunea pe mobil este o altă funcționalitate importantă, care este disponibilă pentru
Android, iOS, Blackberry, Windows Phone și chiar WebOS.
WordPress a depășit demult statusul de platformă de blogging, marea major itate a
site-urilor create cu ajutorul acestei platforme nu sunt folosite drept blog -uri.

III.2 Cerințe pentru instalare
PHP (5.2.4 sau versiune mai nouă) și MySQL(5.0.2) sunt necesare, dar este
recomandat folosirea PHP 5.6 și a MySQL 5.6, dar și modululu i Apache mod_rewrite.
III.3 Instalare WordPress
Pașii pentru instalarea WordPress sunt următorii:
● Instalarea acestui CMS îl constituie descărcarea gratuită de pe site -ul oficial, pas care
este finalizat odată cu despachetarea zip -ului descărcat.
● Crearea ba zei de date în MySQL.
● Modificarea fișierului de configurări wp -sample -config.php, unde se crează
conexiunea cu baza de date și se adaugă setări obligatorii pentru ca instalarea să fie
funcțională. După adăugarea configurărilor, această filă se va redenumi în wp –
config.php; lipsa acestui pas este reprezentată în Figura III.4

Figura III.4 Necesitatea filei wp -config.php.

26

Figura III.5 Configurarea filei wp -config.php.

● Fișierele necesare WordPress vor fi uploadate în locația dorită pe server
● Rularea scriptului de instalare WordPress prin accesarea URL -ului într -un browser
web. Accesarea va avea loc pe același URL unde au fost încărcate fișierele WordPress

Figura III.6 Rularea scriptului de instalare.
Versiunea folosită de WordPress în cadrul acestui proiect este: “ WordPress 4.6 ”.

27
Capitolul IV. Angular 2

IV.1 Generalități Angular 2
AngularJS este de departe cel mai popular framework JavaScript pentru creare
aplicații web, disponibil la ora actuală. Iar acum Angular 2 și TypeScript aduc dezvoltar ea
web orientată pe obiecte înapoi în lumina reflectoarelor, într -o sintaxă care seamănă destul de
mult cu Java 8. Potrivit directorului departamentului de inginerie de la Google, Brad Green,
1.3 milioane de utilizatori folosesc AngularJS și 300 de mii de utilizatori folosesc versiunile
beta ale Angular 2 care nu este lansat încă oficial.
La sfârșitul anului 2014. Google a anunțat faptul că Angular 2 va fi o rescriere
completă a AngularJS, chiar adăugând faptul că au creat un nou limbaj special numit
“AtSc ript” care era destinat să fie folosit în scrierea aplicațiilor pentru Angular 2. Dar atunci
Microsoft a fost de acord să susțină suportul pentru decoratori(adnotări) în limbajul lor numit
TypeScript(superset al JavaScript), așa devenind TypeScript limbaju l în care urma să fie scris
nucleul frameworkului Angular 2.
Aplicațiile în Angular 2 pot fi scrise în TypeScript, JavaScript(ECMA 5 și ECMA 6),
dar și în Dart(limbaj dezvoltat de Facebook). În plus, echipa dezvoltatorilor Angular au
adăugat încă un produs Microsoft și anume librăria RxJS, care este o librărie a extensiilor
reactive JavaScript în frameworkul Angular 2. Angular 2 nu este un framework MVC(Model
View Controller), ci mai degrabă un MVW(Model View Whatever), framework bazat pe
componente. [22].

IV.2 Necesități pentru rulare

Pentru a rula, Angular 2 are nevoie de următoarele librării:
● Es6-shim
● Zone.js
● Reflect -metadata
● SystemJS

28
Shim reprezintă în general un cod care ajută la adaptarea crossbrowser pentru
obținerea unui comportament standard. Shim -ul poate fi și o librărie care aduce un nou API
într-un mediu mai vechi, folosind funcționalitatea acelui vechi mediu. [2 2].
Zone.js este o librărie folosită de Angular 2 pentru a detecta modificările datelor.
Reflect -metadata a fost scris în TypeScr ipt și oferă adnotări pentru a adăuga metadata
în cod. Reflect -metadata este un polyfill(o bucată de cod care asigură tehnologia pe care
dezvoltatorul se așteaptă ca browserul să o aibă nativ, dar nu o are) care permite folosirea
acestei metadata.
System.j s este folosit pentru încărcarea modulelor, crează module, rezolvă
dependințe. Aceste librării trebuie incluse în index.html, pe lângă aceste librării sunt necesare
anumite dependințe care pot varia în funcție de natura aplicației. Dependințele se specific ă în
fișierul package.json și se descarcă cu ajutorul NPM(Node Package Manager), care la rândul
lui este instalat prin Node.js și este cel mai mare ecosistem de li brării open -source din lume.
[22].
Node.js este o multi -platformă de rulare a mediului, open -scource, pentru dezvoltarea
aplicațiilor Web pe partea de server. Deși Node.js nu este un framework JavaScript, mare
parte din modulele sale sunt scrise în JavaScript, iar dezvoltatorii pot scrie noi module în
JavaScript. Node.js folosește m otorul Google V 8JavaScript. [22 ].
Node.js este folosit de giganții din mediul tehnologiei precum: IBM, Microsoft,
Netflix, Cisco System, LinkedIn și PayPal.

IV.3 Structură modulară
În Angular 2 o aplicație este un arbore de c omponente legate. În figura IV.1 se poate
observa pagina unei aplicații de licitație online care a fost gândită drept o colecție de
componente: Navbar, Search, Carousel, Product și componentele din footer.

29

Figura IV.1 Structura unei Single Page Application în Angular 2. [24].

Imaginea din Figura IV.1 are trei componente produs afișate. Afișarea automată este
realizată prin legarea template -ului de un tablou care conține componentele obținute de la
server. Titlul fiecărui produs este un link asociat cu pagina de detalii. Deoarece conceptul
SPA(sing le page application) dorește să evite încărcarea diferitor pagini, acțiunea având loc
pe o singură pagină, de obicei prima pagină care se încarcă, aici sunt încărcate toate resursele.
Pe măsură ce userul interacționează cu pagina, conținutul acesteia se sc himbă dinamic.
Aplicația va schimba adesea URL -ul pentru a simula navigarea clasică, dar încărcarea unei
alte pagini nu este necesară.
În cazul SPA este raportată o problemă și anume ratingul SEO mai scăzut față de o
aplicației web obișnuită, acest lucru s e manifestă pentru că Crawler -ul celor de la Google nu
poate lua anumite informații de pe pagină, deoarece conținutul paginilor este generat dinamic.

30
Capitolul V. Proiectarea aplicației

V.1 Integrare Angular 2 în WordPress
În cadrul acestui proiect de diplomă a existat necesitatea realizării unui studiu de caz,
acest studiu de caz oferă o privire de ansamblu a modului în care au fost îmbinate două dintre
cele mai folosite tehnologii web la ora actuală: WordPress, care este cel mai popular Content
Manag ement System și Angular 2, produs relativ nou care se află încă în stadiul Beta, dar
care poate fi deja folosit pentru dezvoltare.
Ambele tehnologii au o funcționalitate independentă, relativ simplă, dar pentru a le
folosi în cadrul aceluiași proiect a fo st o provocare. Deoarece frameworkul Angular 2 se află
încă în Beta, comunitatea online a dezvoltatorilor nu a ajuns la maturitate, care este prezentă
în cazul altor tehnologii sau limbaje, de exemplu WordPress sau PHP. De aceea am găsit
informații incompl ete sau incorecte cu privire la integrarea celor două tehnologii.
Am studiat individual funcționalitatea fiecărei tehnologii: WordPress are contact cu
baza de date, utilizează Apache pentru web server, functionalitate standard în cazul
dezvoltării aplicaț iilor PHP, configurările pentru serverul Apache pot fi observate în figurile
V.1 , respectiv V.2.

Figura V.1 Definirea host -urilor în Apache.

31

Figura V.2 Virtual hosts Apache.
Angular folosește o altă abordare și anume Node.js, care este o multi -platfor mă de
rulare a mediului, open -scource, pentru dezvoltarea aplicațiilor Web pe partea de server.
Node.js este folosit pentru a instala Node Package Manager care la rândul său va instala toate
dependințele necesare frameworkului Angular 2. Cele mai important e dependințe pe partea
de server ale Angular sunt: zone.js, folosit pentru a detecta modificări ale datelor, System.js,
care este folosit pentru a încărca module și a rezolva dependințe(simplifică procesul de
încărcare al modulelor), lite -server, care este un server dedicat node, servește aplicațiile web,
le deschide în browser, face refresh în mod automat la orice detectare a schimbării unui fișier
de html sau javascript, injectează schimbările CSS folosind socketuri și conține o pagină
specială în cazul î n care ruta nu este gasită.
Lite-server conține o funcționalitate extrem de importantă și anume BrowserSync care
îndeplinește toate necesitățile unui server foarte rapid de dezvoltare și extrem de
customizabil. La crearea unei Single Page Application sunt anumite rute cunoscute doar de
către browser. De exemplu, /client/1 care ar putea fi o rută pentru un client în aplicația
Angular. Dacă această rută este introdusă manual, dată ca punct de intrare a aplicației
Angular(deep link), serverul static va primi requestul(cererea), deoarece Angular nu a fost
încărcat încă. Serverul nu va găsi o potrivire pentru ruta dată si va returna un 404(Not
Found).

32
Comportamentul dorit în acest caz ar fi să fie returnat index.html(sau oricare altă
pagină definită în aplicație), care este de asemenea fiș ierul cel mai important într -o aplicație
Angular 2. Index.html conține cele mai importante dependințe, printre care și System.js care
asigură încărcarea modulelor, dar și decoratorul principal al aplicației. Conținutul unei file
index.html într -o aplicație Angular 2 este prezentat în figura V.3.

Figura V.3 Fila Index.html a Angular 2.
BrowserSync nu permite în mod automat existența unei pagini alternative, dar
acceptă anumite modificări, aici intervine lite -server.
Lite-server este un wrapper simplu d e customizat în jurul BrowserSync -ului pentru a
facilita lucrul cu Single Page Applications. Instalarea Lite -serverului se poate face atât prin
comanda dedicată “npm install lite -server” sau printr -un script localizat în package.json:
"dev": "lite -server".
Primele mele încercări de integrare ale Angular 2 în WordPress nu țineau cont de
funcționalitatea Lite -serverului și aici am întâmpinat primele probleme deoarece nu puteam
folosi Angular la potențialul adevărat fiind impuse extrem de multe limitări.
Figura V.4 prezintă un lite -server care rulează, detectează automat modificările
fișierelor și specifică URL -urile care pot fi accesate pentru a vizualiza aplicația.

33
Figura V.4 Lite -server Angular.
Am încercat să ignor Lite -server și să creez un custom te mplate page în WordPress
care să conțină un iframe, iar iframe -ul respectiv să aibă drept sursă locația aplicației mele în
Angular. Prin locația aplicației face refererire în mod implicit la locația index.html a
aplicației respective la fel cum se poate ob serva în figura V.5.
Figura V.5 Iframe Angular fără Lite -server .
Această implementare impunea extrem de multe limitări precum: lipsa BrowserSync,
care urmărea modificările datelor, asigura refresh -ul în mod automat, dar si a altor
funcționalități precum routing, lucrul cu API.

34
Capitolul VI. Implementarea aplicației

VI.1 Structura aplicației
Pentru realizarea aplicației sunt necesari următorii pași:
● Instalare WordPress MultiteSite
● Creare paginii speciale în WordPress(custom template page), pentru un site din
rețeaua instalată
● Creare aplicației Angular 2
● Integrarea Aplicației Angular 2 în template -ul special creat în WordPress
● Încapsurarea întregii aplicații într -un container realizat cu Docker
Structura acestei aplicații poate fi mai ușor de observat în figura VI.1.

Figura VI.1 Structura aplicației, încapsulată într -un Docker.
VI.2 WordPress
Structura directoarelor WordPres s este prezentată în figura VI .2:

35

Figura VI .2 Structura directoarelor WordPress
VI.2.1 Instalare WordPress Multisite
Pentru a i nstala un WordPress Multisite este necesară modificarea fișierului de
configurări wp -config.ph p la fel ca în figura VI.3 :

Figura VI.3 Fila wp -config.php, care conține configurările de bază WordPress.
După modificarea acestui fișier de configurări, în interfața de administrator este
disponibilă opțiunea de creare a mai multor site -uri în cadrul unei rețele; site -urile pot fi
create după alegerea uneia dintre opțiunile: subdomeniu sau subdirectoare. În cadrul
proiectului am ales opțiunea de subdomeniu.

36
VI.2.2 Modificarea unei teme WordPress
În cadrul site -ului principal: ”comunicare.loc” am folosit tema Twenty Ten, una din
temele cele mai simple, ale WordPress -ului, dar care po ate fi modificată destul de ușor . În
cadrul acestei teme au fost modificate f ișierele: header.php și footer.php, dar au fost create și
fișiere care oferă o funcționalitate nouă: weather.php și youtube.php.
Header -ul temei site -ului principal conține un meniu generat dinamic din interfața de
admininstrator, pe lângă opțiunile norma le de adăugare: pagină, post, categorie, link, în
header au fost adaugate opțiunile de login și de administrare site, în cazul în care utilizatorul
este super admin.
Footer -ul este de asemenea generat dinamic din interfața de administrator permițând o
funcționalitate asemănătoare cu cea a header -ului dar independentă, modificările f ăcute în
meniul din footer nu vor afecta funcționalitățile din header și nici invers. În figura VI.4 poate
fi observat codul care generează noile funcționalități din header:
Figura VI.4 Fila header.php din tema Twenty Ten.
În cazul noilor pagini de template create, youtube.php și weather.php, care conțin
header, footer, dar și funcționalități speciale integrate din aplicații realizate în Angular 2 în
WordPress printr -un iframe, dupa cum s e poate observa în figura VI.5 :

Figura VI.5 Fila youtube.php din tema Twenty Ten.

37
VI.2.3 Plugin -uri
În cadrul acestui proiect am folosit următoarele plugin -uri, pentru a obține
funcționalități specifice:
● Meta -slider pentru a crea prezentări
● Contact Form pentru a crea formulare de contact
● Ultimate Social Media PLUS pentru Social Media
● SEO Ultimate pentru obține mai mult trafic(fiind îmbunătățită vizibilitatea
către motoarele de căutare)
VI.3 Angular 2
Structura directoarelor Angular 2 este prezentată în figura VI.6 :

Figura VI.6 Structura directoarelor aplicației Angular 2.
VI.3.1 Necesități Angular 2
Există anumite necesități pentru a rula, a dezvolta o aplicație în acest framework, cele
mai importante sunt:
● Instalarea serverului Node.js
● Instalare Node Package Manager

38
● Fila index.html care conține cele mai importante module necesare rulării
aplicației
● Package.json care conține toate dependințele necesare
● Rularea comenzii npm install pentru a instala dependințele din package.json

VI.3.2 De zvoltarea aplicației Angular 2
Aplicația Angular 2 care simulează funcționalitatea Youtube, conține anumite
componente care îndeplinesc o anumită funcționalitate.
Fila index.html care va încărca modulele din directoarele: app și vendor. Structura
index.ht ml a aplicației Youtube s e poate observa în figura VI.7 .

Figura VI.7 Index.html al aplicație Youtube.
Fila vendor import ă anumite module din nucleul Angular 2, module necesare pentru a
îndeplini conceptul de Polyfills: “core -js/es”, “core -js/es7/reflect”, “zone.js/dist/zone” dar și
module pentru librăria RxJS: “rxjs”, “ts -helpers”.
Fila package.json conține dependințele care nu au fost încărcate prin index.html, dar
care vor fi încărcate după pornirea lite -serverului, în mod dinamic. Pentru rularea oricărei
aplicații în Angular 2 sunt necesare următoarele dependințe: angular/common,
angular/compiler, angular/core, angular/platform -browser -dynamic, reflect -metadata, rxjs,
tslint, typescript, typings și zone.js. Pe lânga aceste dependințe sunt necesare ș i anumite
scripturi care vor fi rulate din terminal (sau în mod automat) pentru a executa acțiuni
specific e, în cadrul aplicației mele, scrip tul “go” este obligatoriu, de oarece prin e l este pornit

39
Lite-serverul. Există de asemen ea și dependințe necesare testării aplicației, acestea sunt
reprezentate de “karma”. Aplicația conține și compilator saas, node -saas.
Aplicațiile în Angular 2 pot fi dezvoltate în TypeScript dar aceasta nu este singura
opțiune, dezvoltatorul poate folosi și JavaScript classic dar și Dart(limbaj produs de
Facebook , bazat tot pe JavaScript). Aplicația Angular Y outube folosește TypeScript , dar
pentru o mai bună compatibilitate cu browserele mai vechi am generat Jav aScript din fișierele
de TypeScript cu ajutorul unui plugin instalat în Sublime, generarea se putea face și în mod
automat dacă se dorea adăugarea scriptului tsc care compila în mod automat orice mod ificare
a fișierelor TypeScript, manual din terminal prin rularea unor comenzi specifice, sau pornirea
în modul de veghe a TSC -ului(TypeScript Compiler/Compilator de TypeScript).
Conținutul filei package.json poat e fi observat în figura VI.8 .

Figura VI.8 Package.json al aplicație Youtube.
Un alt fișier important în cadrul aplicației este tsconfig.json care este absolute necesar
pentru setarea configurărilor compilării fișierelor. Un alt mod de a specifica limbajul utilizat
este adăugarea următorului script în index.html:
<script>
System.confi g({
packages: {'app': {defaultExtension: 'js'}}

40
});
System.import('app/app');
</script> , care este aici JavaScript.
Aplicația conține două componente: app.ts și YouTubeSearchComponent. App.ts este
o componentă de baz ă care la rândul ei conține componenta YouTubeSearchComponent. De
asemenea, app.ts are rolul de porni aplicația în lite -server prin funcția bootstrap, care va
importată din modulul: “@angular/platform -browser -dynamic” și va primi drept parametr i
componenta de bază a aplicației, dar și alte servicii necesare rulării ei.
Pentru lucrul cu API , dar nu numai este necesar modulul: “@angular/htt p”. În general
browserele moder ne accept ă două tipuri de API (Application Programming Interface /Interfață
pentru programarea de aplicații ) web: “XMLHttpRequest(XHR) și “JSONP”, iar cele care
suportă Fetch sunt relativ puține. Librăria Http oferită de Angular simplică modul de lucru cu
API-urile de tip XHR sau JSONP.
Pentru a modifica conținut html este folosit Saas(S yntactically Awesome Stylesheets,
este un limbaj folosit pentru a stiliza documene scrise în HTML). Componenta principală
aplicației Youtube este clasa: “HttpApp”, după cum po ate fi observat în figura VI.9 .

Figura VI.9 App.ts – componenta principală a aplicație Youtube.

41
Dar pe lângă clasa HttpApp, care este elemental princ ipal al implementării fiind
incărcat direct în index.html, prin tag -ul definit în component ă. Acest tag este definit prin
elemental specific Angular numit selector sau decorator: “http -app”, el va conține toată logica
și interfața definită atât în app.ts c ât și în youtube.component.ts.
Componenta YouTubeSearchComponent este componenta care asigură funcționalitate
în cadrul aplicației, făcând o cerere(r equest) către API -ul “youtube v3 api”, în urma căreia va
primi un răspuns care va interpretat și afișat în pagină. Pentru funcționarea aplicației este
necesară cheia, obținută de la Google, prin înregistrarea ca dezvoltator și crearea unui proiect
nou în Google Console , în codul prezentat în figura VI.10 este setată imaginea care va apărea
pe parcursulul procesării cererei către API și primirea răspunsului care va fi interpretat pe
baza template -ului componentei search -result prezentat tot în figura VI.10 :

Figura VI.10 Componenta YouTubeSearchComponent aplicației Youtube.
În cadrul template -urilor componentelor este folosit de asemenea bootstrap , după cum
se poate observa în figura VI.10 , utilizat pentru o mai bună prezentare a conținutului html,
fiind uti lizate clase specifice ale acestui limbaj de stil , de exemplu clasa: “col -sm-6 col -md-
3”. Bootstrap conține un sistem de grupare a conținutului în funcție de anumite dispoz itive:
xs(pentru telefoane), sm(pentru tablete), md(pentru sisteme desktop), lg(pent ru sisteme

42
desktop cu rezoluție ridicată). Această structură permite utilizarea a 12 coloane pentru
reprezentarea conținutului.
De asemenea în cadrul componentei poate fi setat un interval de timp între
introducerea datelor și efec tuarea apelului(call) către API. F igura VI.11 reprezintă modul de
tratare a rezultatelor dar și setarea API -ului(cheie + URL). Clasa search result va structura
răspunsul primit și va folosită de component a searc h-result pentru afișarea rezultatelor, în
cazul de față va fi afiș at titlul, imaginea care reprezintă videoclipul respective, descrierea dar
și un buton care conține URL -ul videoclipului din Youtube.

Figura VI.11 Clasa SearchResult a componenentei YouTubeSearch.
Modul de lucru în aplicație cu API -urile se bazează pe con ceptul de pachete de date
asincrone sau Observables, EventEmmiter face parte din această categorie, ceea ce înseamnă
că se conformează unei anumite definiții și așteaptă schimbări. Observables este un obiect sau
o funcție care conține o metodă subscribe, a l cărui comportament este speficat conform unei
definiții.
Clasa search -box implementează un formular de c ăutare și emite evenimente bazat e
pe această căutare. În Angular 2 pot fi create evenimente proprii în funcție de necesități.
Toate aceste specificații p ot fi observate în figura VI.12 .

43

Figura VI.12 Clasa SearchBox a componentei YouTubeSearch.
Implementarea interfeței OnInit are rolul de a executa logică specifică de inițializare
după ce au fost inițializate proprietățile legăt e de dat ele directive i. ngOnInit este apelat
imediat după ce proprietățile legăte de datele directivei au fost verificate pentru prima dată și
înainte să fie verificați oricare din copiii săi. Este invocată o singură dată după ce directiva
este instanțiată.
VI.4 Integrare Angula r în WordPress
Soluția pentru a elimina problema legată de Lite -server a fost relativ simplă, rularea
fiind absolut necesară pentru folosirea capacităților Angular 2 în cadrul unui iframe conținut
de WordPress. Aplicația în Angular rulează pe alt port(port ul 3000), așa cum se poate
observa în figura VI.13 .

44

Figura VI.13 Iframe care folosește Angular cu Lite -server .
Schimbarea sursei iframe -ului permite funcționarea corespunzătoare a unei aplicații
precum cea din figura VI. 13 care folosește API -ul celor d e la Google și anume: youtube v3
api. Pentru folosirea acestor servicii este necesar ca dezvoltatorul să fie înregistrat ca
dezvoltator Google, să creeze un nou proiect în Google Console și să ceară o cheie pentru
API. Cheia poate fi obținută atât pentru u n cont gratis, cât și pentru un cont plătit, ceea ce
diferă sunt facilitățile oferite.
Prin folosirea Lite -serverului, și implicit a BrowserSync și a celorlalte facilități
Angular, a putut fi realizată o aplicație dinamică de tipul Single Page Application, în care este
folosit API de la Google pentru ca utilizatorul să poată căuta anumite clipuri video fără a ieși
de pe site, direct în aplicație.
În momentul de față, aplicația este perfect funcțională la nivel local și poate fi
integrată în WordPress într -o pagina specială creată(custom template page) a temei folosite,
atât timp cât lite -serverul este pornit. Pentru a porni lite -serverul este necesară rularea în
CLI(Command Line Interface) a unei comenzi specificate în fișierul package.json, de
exemplu: ”npm start lite ”, care de asemenea va porni BrowserSync iar utilizatorul va putea
folosi o pagină creată în WordPress care are la rândul ei conține un iframe, generat de o
aplicație Angular 2.
Deoarece Angular 2 este foarte rapid, diferența între timpi de ră spuns ai aplicației
acestui proiect și cei ai site-ului Youtube este relativ mică. Aplicația poa te fi observată în
figura VI.14.

45

Figura VI. 14 Aplicația care simulează Youtube.
HTML Inline Element sau iframe reprezintă imbricarea a două pagini web,
funcționale individual, dar care împreună extind funcționalitatea paginii părinte. Iframe -ul
poate fi folosit în interiorul tagului <body> al paginii părinte, fiecare sesiune de browsi ng are
altă istorie și alt document activ.
Conținutul integrat este apelat de către pagina părinte, care este defapt fereastra
browserului. Această relație poate fi ușor observată în figura VI.15, care arată integrarea
aplicație i video Angular într -o pagi nă specială WordPress , dar mai explicit , figură arată pasul
de căutare al unui clip video.
Afișarea unui clip video depinde de sursa URL -ului. Dacă această sursă este de forma
“watch?v=id” atunci prin click pe butonul watch, utilizatorul va putea vizualiza clipul video,
fiind trimis pe pagina Youtube, care conține clipul video, dacă sursa are forma “/v/id” atunci
în pagina care se face căutarea clipului va afișat clipul video integrat(embed). Specificarea
formatului URL se face în component You tubeSearch în clasa SearchResult, în cadul
proiectului am folosit “/v/id” pentru a putea integra videoclipul în pagina dorită. Acest lucru
poate fi observat în figura VI. 16.

46

Figura VI.15 Iframe care conține Angular în WordPress.

Figura VI.16 Iframe care prezintă redarea unui clip video în pagina Youtube.

47
VI.5 Extinderea aplicației
În plus față de soluția anterioră, aceasta presupune utilizare Docker pentru a încapsula
aplicația. Acest lucru este necesar pentru a facilita procesul de deploym ent(proces care face
ca un soft să fie disponibil utilizării pe scară largă) dar și utilizarea în diferite medii fără ca
aplicația să fie lansată. Există o multitudine de imagini create pentru sistemele Unix/Linux.
Containerul creat cu Docker poate să conțină un sistem de operare, containerul creat pentru
proiectul de diplomă conține o imagine Ubuntu 14.04 LTS(Long time support) , care conține
la rândul ei componenta Node.js cu toate dependințele necesare aplicației Angular dar și o
imagine WordPress.
Utilizând docker -compose am conectat containerul de WordPress la MySQL prin
expun ere de porturi 80 respectiv 8080, pentru a realiza conectare între dou ă containere am
folosit docker -compose.yml, conținutul acestui fiși er este prezentat în figura VI.17

Figura VI.17 Docker -compose.yml.

48
Fișierul utilizat pentru crearea imaginii de ubuntu se numeste DockerFile (standard),
fiind prezentat în figura VI.18.

Figura VI. 18 Dockerfile Nodejs .

Dockerfile conține un set de instrucțiuni specifice limbajului Docker:
● FROM node :latest (ultima versiune disponibilă de imagine dsponibilă pentru node )
● Se crează un director, se adaugă un grup, se adaugă un user în acel grup
● Este setat directorul care conține aplicația
● Se copiază fișiere, care vor fi executate doar dacă conținutul lor s -a schimbat
● RUN npm install, se instalează Node Package Manager
● Se copiază tot directorul youtube
● Se schimbă proprietarul pentru fiși erul youtube
● Se rulează comanda npm run go (comandă care va fi executată implicit la rularea
containerului)
● EXPOSE 80 (containerul trebuie să expună un port pentru a putea fi accesat)

De asemenea din DockerFile sau docker -compose se pot specifica care dir ectoare să fie
linkuite(montate) din container pe calculatorul gazdă.

49
Concluzi i

Aplicația prezentată în această lucrare are ca scop practic realizarea unui blog cu
funcționalitate complexă, iar ca scop tehnic, îmbinarea a două dintre cele mai importante tehnologii
web la momentul actual , WordPress și Angular 2. Aplicația a fost realizată folosind CMS-ul
WordPress acesta oferind o bază de pornire pentru un simplu blog , fiind extins prin WordPress
MultiSite. Pe parcursul realiz ării aplicației am dorit să implementez o experiență utilizator simplă
dar care să îndeplinească scopul unui blog, și anume să țină utilizatorul captat, iar prin sfaturile
oferite, consider că am ajutat utilizatorul să se hotărască asupra produsului de car e are cel mai mult
nevoie.

Realizând această aplicație am dorit să îmi îmbunătățesc cunoștintele legate de CMS -ul
WordPress dar și să învăț lucruri noi: TypeScript, Angular 2, Git și Docker. Unele dintre ele fiind
tehnologii relativ noi car e sunt folosite din ce în ce mai mult în domeniul dezvoltatorilor.

Pe parcursul elaborării acestei lucrări se poate spune că am avut parte și de provocări, fiind
nevoit să învăț și să lucrez cu multe concepte neîntâlnite înainte(Angular, TypeScript, Docke r), dar
cu trecerea timpului am reușit să înteleg elementele de bază ale fiecarei tehnologii astfel încât să le
pot îmbina pentru a creea această aplicație.

În viitorul apropiat o să dezvolt o aplicație mai complexă în Angular 2, care va avea o
funcționalitate mai dinamică. Îmbunătățiri ulterioare se pot face aplicației dezvoltate în acest
proiect, atât pe partea de front -end cât și pe partea de back -end.

50
Bibliografie

[1] Lerdorf, Rasmus (2007 -04-26). "PHP on Hormones – history of PHP presentation”
consultat la 24.08.2016
[2]http://www.php.net/manual/en/intro -whatcando.php consultat la 24.08.2016
[3] http://share.cmptech.info/reference/PHP.in.a.Nutshell.2005.Paul.Hudson.pdf consultat la
25.08.2016
[4] "Embedding PHP in HTML". O'Reilly. 2001 -05-03. consultat la 24.08.2016
[5]ftp://ftp.micronet -rostov.ru/linux –
support/books/progra mming/JavaScript/[O%60Reilly]%20 –
%20JavaScript.%20The%20Definitive%20Guide,%206th%20ed.%20 -%20[Flanagan].pdf
consultat la 26.08.2016
[6]https://cdn -images -1.medium.com/ max/609/1*8lKzkDJVWuVbqumysxMRYw.png
consultat la 24.08.2016
[7]https://www.typescriptlang.org/docs/tutorial.html consultat la 24.08.2016
[8]https://en.wikipedia.org/wiki/TypeScript consultat la 24.08.2016
[9]http://www.unibuc.ro/prof/dinu_a_d/docs/2013/fe b/26_10_06_29HTML__XHTML –
_The_Definitive_Guide_6th_Edition.pdf consultat la 24.08.2016
[10] http://searchsoa.techtarget.com/definition/HTML5 consultat la 24.08.2016
[11] https://www.w3.org/Style/CSS/ consultat la 25.08.2016
[12] http://searchsoa.techtarget.com/definition/cascading -style -sheet -CSS consultat la
25.08.2016
[13]http://downloads.mysql.com/docs/refman -5.7-en.pdf consultat la 25.08.2016
[14]https://codex .wordpress.org/Database_Description consultat la 25.08.2016
[15] http://httpd.apache.org/ABOUT_APACHE.html consultat la 26.08.2016
[16] http://www.webopedia.com/TERM/A/Apache_Web_server.html consultat la
26.08.2016
[17] https://www.docker.com/what -docker consultat la 26.08.2016
[18] http://searchitoperations.techtarget.com/definition/Docker consultat la 28.08.2016
[19] http://searchitoperations.techtarget.com/definition/GitH ub consultat la 28.08.2016
[20] https://codex.wordpress.org/WordPress_Features consultat la 29.08.2016
[21] https://codex. wordpress.org/Administration_Screens consultat la 29.08.2016
[22] "ng -book 2" – Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda /28.08.2016