Sunteți pe pagina 1din 134

UNIVERSITATEA AUREL VLAICU DIN ARAD

FACULTATEA DE S, TIINT, E EXACTE


INFORMATICA

DOMENIUL DE LICENT, A:

PROGRAMUL DE STUDIU: INFORMATICA

FORMA DE INVAT, AMANT: ID

LUCRARE DE LICENT, A

INDRUMATOR

S, TIINT, IFIC
Prof. univ. dr. Ioan Dzit, ac

ARAD
2011

ABSOLVENT
S, ucan M. Mihai

UNIVERSITATEA AUREL VLAICU DIN ARAD

FACULTATEA DE S, TIINT, E EXACTE


INFORMATICA

DOMENIUL DE LICENT, A:

PROGRAMUL DE STUDIU: INFORMATICA

FORMA DE INVAT, AMANT: ID

PROIECTAREA UNUI
WEBSITE UNIVERSITAR
Aplicat, ie practic
a: www.uav.ro

INDRUMATOR

S, TIINT, IFIC
Prof. univ. dr. Ioan Dzit, ac

ARAD
2011

ABSOLVENT
S, ucan M. Mihai

UNIVERSITATEA AUREL VLAICU DIN ARAD

FACULTATEA DE S, TIINT, E EXACTE


DOMENIUL / PROGRAMUL DE STUDIU
Nr. _______ din _______

APROBAT
DECAN

VIZAT
Indrumator s, tiint, ific

DATE PERSONALE ALE CANDIDATULUI:


1. Date privind identitatea persoanei:
Numele: S, ucan
Numele anterior: ______________________
Prenumele: Mihai
2. Sexul: M / F
3. Data s, i locul nas, terii:
Ziua / luna / anul: . . . / . . . / . . . .
Locul (localitate, judet, ): . . .
4. Prenumele parint, ilor:
Tata: . . .
Mama: . . .
5. Domiciliul permanent (str., nr., localitate, judet, , cod pos, tal, telefon,
email):
...
6. Sunt absolvent(a) promot, ia: iulie / 2011.
7. Forma de nvat, amant pe care am absolvit-o este:
cu frecvent, a, cu frecvent, a redusa, ID;
cu taxa, f
ar
a tax
a.
8. Locul de munca (daca e cazul):
_________________________________________

9. Solicit nscrierea la examenul de licent, a (licent, a, diploma, disertat, ie):


Sesiunea iulie, anul 2011.
10. Lucrarea de licent, a (licent, a, diploma, disertat, ie) pe care o sust, in are
urmatorul titlu:
PROIECTAREA UNUI WEBSITE UNIVERSITAR.
Aplicat, ie practica: www.uav.ro.
11. Indrumator s, tiint, ific:
Prof. univ. dr. Ioan Dzit, ac.
12. Ment, ionez ca sust, in examenul de licent, a (pentru prima oara, a doua
oara dupa caz) pentru prima oara s, i declar pe propria-mi raspundere
ca am luat la cunos, tint, a de prevederile art. 143 din Legea 1/2011. Declar ca prezenta lucrare nu este realizata prin mijloace frauduloase, fiind
cons, tient de faptul ca, daca se dovedes, te contrariul, diploma obt, inuta
prin frauda mi poate fi anulata, conform art. 146 din Legea 1/2011.

SEMNATURA

REFERAT

PRIVIND LUCRAREA DE LICENT, A


A
ABSOLVENTULUI MIHAI S, UCAN

DOMENIUL: INFORMATICA

PROGRAMUL DE STUDIU: INFORMATICA


PROMOT, IA 2011
1. Titlul lucr
arii:
Proiectarea unui website universitar. Aplicat, ie practica: www.uav.ro.
2. Structura lucr
arii:
Lucrarea este structurata logic s, i corect, cont, ine o introducere, trei capitole: Prezentarea siteului; Modul de funct, ionare a siteului; Extensiile
aplicat, iei web, concluzii, bibliografie, index s, i doua anexe (lista de figuri
s, i baza de date MySQL).
3. Aprecieri asupra cont, inutului lucr
arii de licent,
a, organizare
logic
a, mod de abordare, complexitate, actualitate, deficient, e:
Aplicat, ia www.uav.ro reprezinta un site bine realizat la nivel vizual, cu
o interfat, a potrivita cu cont, inutul academic specific. Interfat, a este accesibila s, i dinamica, facilitand schimbarile ulterioare la nivel de cont, inut
s, i funct, ionalitat, i.
Autorii aplicat, iei www.uav.ro sunt Marius S, ucan s, i Mihai S, ucan, ambii
fiind s, efi de promot, ie la specializarea Informatica.
Autorul Mihai S, ucan s-a ocupat cu preponderent, a de partea de programare.
Ca etapa premergatoare proiectarii aplicat, iei, cei doi autori au studiat mai multe website-uri ale unor universitat, i renumite din lume s, i
din Romania: Stanford University Stanford, California, SUA; Carnegie Mellon University Pittsburg, Pennsylvania, SUA, University of
Oxford Oxford, Anglia, Marea Britanie; MIT, Rice University, Princeton; Universitatea Politehnica din Bucures, ti, Universitatea Alexandru

Ioan Cuza din Ias, i etc. Studiul a avut ca scop cunoas, terea site-urilor
academice: ce tipuri de layout-uri se folosesc, cum sunt organizate s, i
structurate paginile, s, i informat, iile etc. Analiza s-a facut din punct de
vedere vizual s, i tehnic, prin prisma cont, inutului s, i a structurii.
Websiteul www.uav.ro cuprinde bloguri, galerii de imagini, modul specializat pentru citit sau-s, i descarcat fis, iere un formular de contact flexibil, fluxuri de s, tiri Atom, un motor de cautare precum s, i o harta a

siteului. Pentru administratori siteul are un gestionar de fis, iere s, i un


gestionar de conturi s, i drepturi, precum s, i editoarele specifice fiecarui
modul sau sect, iuni din site.
In realizarea interfet, ei au fost parcurse urmatoarele etape: planificare,
efectuarea designului, colorarea acestuia, popularea n final, implementarea interfet, ei la nivel tehnic, utilizand HTML, CSS s, i alte tehnologii
web.
In final a rezultat o aplicat, ie profesionala, care a adus un spor de imagine Universitat, ii Aurel Vlaicu s, i a determinat senatul universitar

sa acorde autorilor cate o diploma de excelent, a prin hotararea din 29


septembrie 2010.
Nici lucrarea s, i nici aplicat, ia practica nu au cusururi, totus, i autorii,
fiind nis, te perfect, ionis, ti, continua sa-i aduca optimizari aplicat, iei s, i n
prezent.
4. Aprecieri asupra lucr
arii (se va ment, iona: num
arul titlurilor
bibliografice consultate, frecvent, a notelor de subsol, calitatea
s, i actualitatea surselor consultate; modul n care absolventul
a prelucrat informat, iile din sursele bibliografice, contribut, ii
originale):
Lucrarea este foarte bine documentata, cont, ine 27 de titluri bibliografice, de cea mai mare actualitate. Aplicat, ia practica este originala n
totalitate, excelent realizata, pagina web www.uav.ro fiind funct, ionala
s, i activa.
Consider ca www.uav.ro este unul din cele mai profesionale websiteuri
universitare din Romania la ora actuala.
5. Concluzii (valoarea lucr
arii elaborate de absolvent, relevant, a
studiului ntreprins, competent, ele absolventului, consecvent, a
s, i seriozitatea de care a dat dovad
a absolventul pe parcursul
document
arii s, i elabor
arii lucr
arii):
Munca depusa a fost perseverenta, consecventa s, i eficienta. Lucrarea
are atat o valoare teoretica, cat s, i practica, care poate fi valorificata de
proiectant, ii de websiteuri institut, ionale.
Absolventul dovedes, te reale calitat, i de programator profesionist de
aplicat, ii web.
6. Redactarea lucr
arii respect
a normele de redactare.
Metodologia n vigoare a fost respectata, n plus, se poate observa ca
autorul are un stil de exprimare s, i redactare de nivel profesionist.

7. Nu exist
a suspiciuni de realizare prin fraud
a a prezentei
lucr
ari.
Realizarea site-ului Universitat, ii Aurel Vlaicu din Arad

se bazeaza pe mult, i ani de studii pe cont propriu s, i de munca


n grafica s, i design. Acest proiect are la baza un motor de
site la care s-a nceput lucrul nca din anii de liceu s, i este
realizat integral de Marius s, i Mihai S, ucan.
Acesta este citat din concluziile lucrarii lui Marius S, ucan, care exprima
un adevar frumos s, i o pilda de urmat. De ment, ionat ca Marius S, ucan
este fratele geaman a lui Mihai S, ucan, care s-a ocupat de partea de
design a aplicat, iei.
8. Consider c
a lucrarea ndeplines, te condit, iile pentru sust, inere
n sesiunea de Examene de licent,
a din iulie 2011.
Propun comisiei ca absolventul Mihai S, ucan, autorul acestei lucrari s, i
coautorul aplicat, iei www.uav.ro, sa fie notat cu 10 (zece) la examenul
de licent, a.

Arad,
Data 20 mai 2011

Indrumator s, tiint, ific


Prof. univ. dr. Ioan Dzit, ac

Cuprins
Introducere

1 Prezentarea siteului
1.1 Structura siteului pentru utilizatori .
1.2 Funct, ionalitat, i pentru utilizatori . . .
1.3 Funct, ionalitat, i pentru administratori
1.4 Compatibilitatea siteului . . . . . . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

2 Modul de funct, ionare al siteului


2.1 Tehnologiile server-side s, i client-side folosite de aplicat, ie
2.2 Cerint, ele tehnice pentru server . . . . . . . . . . . . . . .
2.3 Privire pe ansamblu . . . . . . . . . . . . . . . . . . . .
2.3.1 Prezentarea modulelor din site . . . . . . . . . . .
2.4 Structura siteului pe server, fis, ierele folosite . . . . . . .
3 Extensiile aplicat, iei web
3.1 Conturi pentru administratori . . . . . . . . . . . . . .
3.1.1 Autentificare . . . . . . . . . . . . . . . . . . .
3.1.1.1 Formularul de autentificare . . . . . .
3.1.1.2 Formularul de resetare a parolei . . . .
3.1.2 Gestionarea conturilor de administrare site . . .
3.1.2.1 Lista conturilor . . . . . . . . . . . . .
3.1.2.2 Verificarea drepturilor unui cont . . . .
3.1.2.3 Adaugarea de utilizatori . . . . . . . .
3.1.2.4 Editarea drepturilor unui cont . . . . .
3.1.2.5 Securitatea sistemului de autentificare
3.1.3 Editare profil . . . . . . . . . . . . . . . . . . .
1

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

5
6
8
9
10

.
.
.
.
.

11
11
13
13
15
16

.
.
.
.
.
.
.
.
.
.
.

26
26
29
29
38
40
41
43
46
50
55
56

CUPRINS
3.2
3.3

Gestionarea fis, ierelor de pe server . . . . . .


Gestionarea paginilor . . . . . . . . . . . . .
3.3.1 Structura siteului n format XML . .
3.3.2 Configurat, ia modulului . . . . . . . .
3.3.3 Adaugarea de pagini . . . . . . . . .
3.3.4 Setari pagina . . . . . . . . . . . . .
3.4 Editorul de pagini Awebitor . . . . . . . . .
3.4.1 Curat, area codului HTML cu ReTidy
3.5 Blogul . . . . . . . . . . . . . . . . . . . . .
3.5.1 Funct, ionalitat, i pentru utilizatori . .
3.5.2 Funct, ionalitat, i pentru administratori
3.6 Galeria de imagini . . . . . . . . . . . . . .
3.7 Modulul Fis, iere de descarcat . . . . . . .

3.8 Prima pagina . . . . . . . . . . . . . . . . .


3.9 Pagina Contact . . . . . . . . . . . . . . . .
3.10 Motorul de cautare . . . . . . . . . . . . . .
3.11 Harta siteului . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

57
61
62
66
71
74
75
79
83
83
92
96
102
106
107
110
113

Concluzii

115

Glosar

116

List
a de figuri

119

Bibliografie

121

A Baza de date MySQL


A.1 blog . . . . . . . . . . . . . . . . . . . . . .
A.2 blog tags . . . . . . . . . . . . . . . . . . . .
A.3 gallery . . . . . . . . . . . . . . . . . . . . .
A.4 search documents en s, i search documents ro
A.5 search doc index en s, i search doc index ro .
A.6 sitemap . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

124
. 124
. 125
. 125
. 126
. 126
. 127

Introducere
Lucrarea de fat, a prezinta proiectul de licent, a uav.ro ncepand cu aspectele
generale, pentru a continua mai apoi cu detaliile tehnice despre implementarea s, i dezvoltarea proiectului.
Scopul proiectului prezentat n aceasta lucrare, stabilit n colaborare cu
domnul profesor coordonator Ioan Dzit, ac1 , a fost realizarea unui site nou
pentru Universitatea Aurel Vlaicu din Arad. Cerint, ele noului site au fost

definite astfel:
un design nou, mai atragator s, i modern, potrivit cu profilul siteului,
navigare us, oara s, i accesibila pentru diferite tipuri de utilizatori,
cont, inut bilingv, n limbile romana s, i engleza,
ncarcarea rapida a paginilor,
tehnic compatibil cu majoritatea navigatoarelor web, pe majoritatea
sistemelor de operare n uz,
structura tehnica solida, capabila sa evolueze n timp,
bine structurat din perspectiva informat, iilor oferite vizitatorilor, clar
s, i concis,
informativ s, i util pentru profesorii s, i student, ii care vor sa aplice la
universitate, sa profeseze sau sa studieze,
us, or de ment, inut s, i de actualizat pentru cei responsabili de cont, inut.
In plus fat, a de cerint, ele ment, ionate mai sus, a fost pusa problema evolut, iei
siteului n comparat, ie cu versiunea precedenta. Practic s-a dorit ca noul site
sa creasca, sa fie mai bogat n cont, inut, mai informativ, mai bine structurat
1

http://dzitac.rdsor.ro

INTRODUCERE

s, i mai atragator vizual. De asemenea s-a dorit ca n comparat, ie cu celelalte


siteuri de universitat, i romanes, ti, noul site UAV sa fie unul care face dreptate nivelului universitat, ii, un site care pune n valoare principiile, valorile s, i
misiunea a universitat, ii.
Pentru realizarea acestui proiect ambit, ios am lucrat n colaborare cu Marius S, ucan2 . Impreuna cu el s, i cu domnul profesor Dzit, ac au fost stabilite
criteriile de calitate s, i de performant, a ale siteului, structura siteului s, i necesitat, ile tehnice s, i funct, ionale ale acestuia. Marius S, ucan s-a ocupat de partea
de design a proiectului, determinand cele mai potrivite moduri de exprimare
vizuala, construind o identitate vizuala specifica UAV. Eu m-am ocupat de
partea tehnica, implementand platforma aplicat, iei web. Domnul profesor a
participat oferindu-ne ghidare importanta n realizarea structurii siteului, n
definirea tipului de cont, inut ce va fi introdus dupa finalizarea siteului. De
asemenea, domnul profesor s-a ocupat de completarea siteului cu cont, inut.

http://www.robodesign.ro/marius

Capitolul 1
Prezentarea siteului
Noul site al Universitat, ii Aurel Vlaicu din Arad este un site modern, cu

un aspect placut, profesional, s, i avansat din punct de vedere tehnic.


Figura 1.1: Prima pagina a noului site uav.ro, n limba romana.

CAPITOLUL 1. PREZENTAREA SITEULUI

Siteul include bloguri, galerii de imagini, modul specializat pentru fis, iere
de descarcat, un formular de contact flexibil, fluxuri de s, tiri Atom, un motor
de cautare s, i o harta a siteului. Pentru administratori siteul are un gestionar
de fis, iere s, i un gestionar de conturi s, i drepturi, pe langa editoarele specifice
fiecarei sect, iuni din site.
Nu n ultimul rand, platforma siteului este flexibila permit, and adaugarea
de funct, ionalitat, i noi n site, fara limitari tehnice.

1.1

Structura siteului pentru utilizatori

Siteul Universitat, ii Aurel Vlaicu din Arad are cateva sect, iuni importante,

pentru diferitele domenii de interes ale vizitatorilor. Aceste sect, iuni sunt:
Academic sect, iunea care cont, ine paginile despre structura anului universitar n curs, despre treptele de studii universitare (licent, a, masterat s, i doctorat), s, i despre concursurile pentru posturile didactice
vacante.
Cercetare sect, iunea care cont, ine informat, iile necesare pentru profesorii
s, i student, ii interesat, i de cercetare n cadrul UAV.
Departamente sect, iunea cu informat, ii specifice pentru fiecare departament al UAV.
Facult
at, i locul unde fiecare facultate UAV are cate un set de sub-pagini
care ofera informat, ii pentru student, i: orare, datele de examinare, lista
de profesori pe discipline, s, i altele.
Personal locul unde sunt publicate pagini de prezentare a profesorilor
universitat, ii.
Resurse locul unde se gasesc informat, ii despre editura UAV, biblioteci,
platforma e-learning, s, i direct, ia resurse umane salarizare.
Reviste locul unde sunt prezentate revistele s, i restul de publicat, ii ale
universitat, ii.
Student, i este sect, iunea specifica pentru tinerii care doresc sa studieze
la UAV. Aici se gasesc informat, ii despre taxe, burse, olimpiade, concursuri, regulamente, diplome, acte necesare, organizat, ii student, es, ti,
camine s, i altele.

1.1. STRUCTURA SITEULUI PENTRU UTILIZATORI

Universitate este sect, iunea unde se gasesc informat, ii despre universitate, istoricul acesteia, o prezentare, documente de interes public
(licitat, ii, declarat, ii de avere, hotarari ale senatului), noutat, i s, i evenimente.

Structura acestui site se bazeaza pe un studiu asupra catorva siteuri de


universitat, i straine s, i romanes, ti. In colaborare cu domnul profesor coordonator am stabilit structura asigurandu-ne ca ea va face navigarea siteului mult
mai us, oara pentru utilizatori. Amintim cateva siteuri studiate:
Universitatea de Vest din Timis, oara1 ,
Universitatea Politehnica Bucures, ti2 ,
Universitatea Politehnica din Timis, oara3 ,

Universitatea Alexandru Ioan Cuza din Ias, i4 ,

Universitatea de Vest Vasile Goldis, din Arad5 ,

Rice University6 ,
Stanford University7 ,
Carnegie Mellon University8 ,
Harvard University9 ,
University of Oxford10 .
1

http://www.uvt.ro
http://www.upb.ro
3
http://www.upt.ro
4
http://www.uaic.ro
5
http://www.uvvg.ro
6
http://www.rice.edu
7
http://www.stanford.edu
8
http://www.cmu.edu
9
http://www.harvard.edu
10
http://www.ox.ac.uk
2

CAPITOLUL 1. PREZENTAREA SITEULUI

1.2

Funct, ionalit
at, i pentru utilizatori

Pentru utilizatori conteaza n primul rand us, urint, a de navigare s, i us, urint, a
cu care ei gasesc informat, iile dorite. Pentru a ajuta n aceasta direct, ie, siteul
este bilingv, n romana s, i engleza, s, i ofera posibilitatea de cautare n cont, inut.
In plus, o harta completa a siteului este disponibila.
Siteul dispune de urmatoarele module:
Blog,
Galerie de imagini,
Fis, iere de descarcat,
Contact,
Harta site,
Cautare.
Pe prima pagina este o diaporama n care poze cu locat, iile UAV sunt
afis, ate. De asemenea sunt listate ultimele articole din blogurile Noutat, i s, i
Evenimente. Nu n ultimul rand sunt afis, ate s, i cele mai importante pagini
din site.
Blogul permite adaugarea de articole sortate cronologic, pe categorii.
Acesta este folosit pentru pagini de genul noutat, i sau evenimente. Fie

care articol poate avea etichete atas, ate (tags), pentru a permite o organizare
a articolelor mai buna, s, i pentru a face navigarea mai us, oara pentru utilizatori. In plus, fiecare blog include un feed /flux Atom la care se pot abona
utilizatorii care doresc sa t, ina pas cu noutat, ile din site. Fluxul Atom poate
fi limitat s, i numai pe anumite etichete. Arhiva de articole din fiecare blog
permite navigarea dupa data publicarii.
Modulul de galerie de imagini include s, i el suport pentru fluxuri Atom,
daca utilizatorul dores, te sa urmareasca un anumit album de poze.
Pagina de contact permite utilizatorilor sa contacteze diferitele departamente ale universitat, ii. Formularul este protejat anti-spam cu serviciul online
recaptcha.net.
La fiecare pagina, utilizatorul poate alege sa mareasca sau sa mics, oreze
dimensiunea textului afis, at. Articolele pot fi imprimate excluzand elementele
din site care nu sunt relevante exista un CSS specific pentru imprimare care
aranjeaza paginile sa arate bine pe foaie.
Siteul poate fi navigat pe telefoane mobile cu o interfat, a adecvata.

, I PENTRU ADMINISTRATORI
1.3. FUNCT, IONALITAT

Legaturile permanente (de forma /pagina/sub-pagina/ n loc de index.


php?parametrii_care_nu_sunt_intelesi_de_nimeni), permit memorarea
mai us, oara a adreselor, permit motoarelor de cautare sa indexeze mai bine
cont, inutul, s, i n general dau o nota importanta de profesionalism siteului.
Exemple de pagini:
Blog Noutat, i: http://www.uav.ro/ro/universitate/noutati,
Galerie foto: http://www.uav.ro/ro/universitate/galerie-foto,
Contact: http://www.uav.ro/ro/contact,
Harta site: http://www.uav.ro/ro/sitemap.

1.3

Funct, ionalit
at, i pentru administratori

Administratorii siteului pot intra pe:


http://www.uav.ro/ro/admin pentru a edita paginile n limba romana,
http://www.uav.ro/en/admin pentru a edita paginile n limba engleza.
Siteul dispune de un sistem de autentificare utilizatori, care include posibilitatea de a defini drepturile fiecaruia n cel mai mic detaliu. Mai multe
detalii tehnice se gasesc n sect, iunea 3.1.
Daca utilizatorul s, i uita parola, acesta poate sa s, i reseteze parola. El/ea
va primi parola noua prin email la adresa ce o are configurata n profilul
contului sau.
Dupa autentificare, administratorul poate accesa paginile s, i sect, iunile de
administrare ale siteului conform drepturilor ce i-au fost acordate. De asemenea, el s, i poate modifica profilul: numele, adresa de email s, i parola.
Pe langa editarea paginilor, administratorii pot modifica bloguri, galerii
de imagini s, i pot sa ncarce fis, iere pe server. Un modul specializat pentru
gestionarea fis, ierelor permite adaugarea de directoare, fis, iere, redenumire,
s, tergere s, i alte operat, ii.
Administratorii care au drepturile necesare pot sa adauge sau sa s, tearga
utilizatori s, i pot sa le editeze drepturile.
Pentru a asigura calitatea cont, inutului adaugat de catre administratori,
am inclus s, i o pagina cu recomandari pentru redactarea cont, inutului.

10

CAPITOLUL 1. PREZENTAREA SITEULUI

1.4

Compatibilitatea siteului

Siteul este compatibil cu:


Mozilla Firefox11 ,
Opera12 ,
Google Chrome13 ,
Apple Safari14 ,
Konqueror15
s, i Microsoft Internet Explorer16 .
In afara celor mai moderne navigatoare web, se pot folosi s, i navigatoare
care nu implementeaza JavaScript s, i CSS, sau navigatoare care afis, eaza doar
text. Siteul este accesibil, putand fi folosit s, i de cei care au sisteme Braille
de navigare web sau sintetizatoare vocale.
Accesibilitatea siteului nu se limiteaza doar la cele de mai sus. Siteul
include comenzi din tastatura catre cele mai importante pagini, meniuri,
submeniuri, articole blog, imagini de galerie s, i alte sect, iuni. Intregul site
poate fi navigat s, i numai din tastatura, fiind astfel accesibil s, i pentru cei cu
handicap motor.
Mai mult decat atat, doua butoane au fost incluse n site pentru cei care au
probleme cu vederea. Acestea permit utilizatorilor sa controleze dimensiunea
textului n pagina textul poate fi marit sau mics, orat.
Nu n ultimul rand, este inclus s, i un al doilea design specializat pentru
telefoane mobile, cu CSS, s, i un al treilea design, pentru imprimare. Designul
pentru telefoane mobile este optimizat pentru ecranele mici, cu lat, ime foarte
redusa. Designul pentru imprimare are n vedere aspectul non-interactiv
al siteului, atunci cand acesta se gases, te pe foaie adica raman vizibile
doar elementele importante ntr-o pagina: titlul, articolul s, i alte elemente
relevante, n funct, ie de pagina.
Toate aceste aspecte de compatibilitate s, i accesibilitate contribuie foarte
mult la definirea profesionalismului acestui site de universitate.
11

http://www.mozilla.com
http://www.opera.com
13
http://www.google.com/chrome
14
http://www.apple.com/safari
15
http://www.konqueror.org
16
http://www.microsoft.com/windows/internet-explorer/
12

Capitolul 2
Modul de funct, ionare al
siteului
Pentru a explica modul de funct, ionare al siteului vom ncepe prin a enumera
tehnologiile folosite de acesta s, i cerint, ele software pentru serverul web. n
continuare vom descrie a modul n care paginile siteului sunt generate dinamic
de catre scripturile PHP. Capitolul se ncheie cu o sect, iune n care sunt
descrise toate fis, ierele sursa folosite de site.

2.1

Tehnologiile server-side s, i client-side folosite de aplicat, ie

Siteul foloses, te urmatoarele tehnologii:


HTML accesibil, structurat semantic, fara tabele pentru layout. Codul
este optimizat pentru a fi us, or de indexat de catre motoarele de cautare,
pentru a obt, ine rezultate mai bune la cautari.
CSS pentru toata interfat, a siteului.
JavaScript pentru elementele interactive din site, de exemplu pentru
harta siteului.
PHP pentru generarea dinamica a tuturor paginilor, pe server. Toate
documentele HTML sunt generate dinamic atunci cand utilizatorul acceseaza siteul uav.ro.
11

12

CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI


MySQL pentru baze de date. Atunci cand codul PHP genereaza paginile HTML, baza de date MySQL este folosita pentru popularea paginilor cu informat, ii.
XML este folosit pentru ment, inerea structurii siteului. Scripturile PHP
citesc anumite fis, iere XML pentru a determina ierarhia paginilor, titlul,
tipul de pagini s, i alte informat, ii.
Fis, ierele de tip JSON sunt s, i ele folosite pentru stocarea de date despre utilizatorii modulului de administrare al siteului, pentru stocarea
adreselor de email din pagina Contact1 s, i pentru alte date.
Fluxuri Atom pentru paginile de tip blog s, i galeriile de imagini. Aceste
pagini sunt disponibile s, i n format Atom, format care poate fi folosit
de utilizatori pentru a fi informat, i automat cand sunt publicate articole/imagini noi n site.
Sitemaps XML permite motoarelor de cautare sa verifice ultimele modificari din site [1]. Toata harta siteului este generata dinamic n format
HTML s, i n format Sitemaps XML.

Pe langa tehnologiile ment, ionate mai sus, siteul foloses, te n mod general
DOM pe server cat s, i n navigatorul web. Pagina HTML este generata pe server ntr-un arbore DOM care la final este serializat n formatul dorit: HTML
sau XHTML. Codul JavaScript care se executa n navigatorul web foloses, te
s, i el structura DOM pentru a modifica pagina n funct, ie de interact, iunea cu
utilizatorul.
Awebitor este editorul de articole folosit n modulul de administrare.
Acesta utilizeaza XMLHttpRequest [2] pentru ncarcarea dinamica de cont, inut s, i designMode [3] pentru capabilitatea de editare What You See Is
What You Get (WYSIWYG).
Noul HTML5 introduce o multitudine de taguri s, i funct, ionalitat, i noi [4].
Siteul UAV foloses, te capabilitat, i HTML5 n navigatoarele web moderne.
De exemplu, pentru campurile de tip email codul foloses, te noul atribut
type=email.

http://www.uav.ro/ro/contact

2.2. CERINT, ELE TEHNICE PENTRU SERVER

2.2

13

Cerint, ele tehnice pentru server

Aplicat, ia web uav.ro are urmatoarele cerint, e tehnice pentru server:


PHP 5.2. Pentru curat, area codului HTML la salvarea paginilor n modulul de administrare este necesar sa fie instalat modulul php5-tidy.
Apache 2. Pentru a permite utilizarea legaturilor permanente este necesara activarea fis, ierelor de tip .htaccess s, i a modulului Apache mod
rewrite.
MySQL 4.1.
De obicei siteul este instalat pe sisteme de operare bazate pe Unix, unde
aplicat, iile ment, ionate ruleaza cel mai bine.

2.3

Privire pe ansamblu

Fiecare accesare de pagina trece prin fis, ierul index.php al siteului. Acest
script PHP face chemari la restul de fis, iere n funct, ie de adresa aleasa de
utilizator.
Vom ncepe cu un exemplu de accesare a paginii de prezentare a Universitat, ii Aurel Vlaicu din Arad2 . Cererea este procesata astfel:

1. Fis, ierul .htaccess da instruct, iuni ca Apache sa rescrie adresa sub


forma urmatoare:
index.php?path2=/ro/universitate/prezentareauniversitatii.
2. Fis, ierul index.php este executat iar acesta preia calea dorita de utilizator din variabila $ REQUEST[path2].
3. Fis, ierul settings.php este inclus. Acest fis, ier are doar variabile de
configurare pentru ntregul site.
4. Fis, ierul de traducere al siteului este inclus, fie lang_en.php, fie lang_
ro.php, n funct, ie de setarile lingvistice ale utilizatorului. Aceste fis, iere
cont, in toate mesajele afis, ate de site n limba engleza s, i romana. Setarile
lingvistice sunt salvate n navigatorul web al utilizatorului sub forma
de cookie.
2

http://www.uav.ro/ro/universitate/prezentarea-universitatii

14

CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI


5. Se cauta n directorul cache/pages/ daca pagina este deja generata s, i
salvata pe disc, pentru a se evita regenerarea acesteia. In acest caz,
fis, ierul HTML este citit, trimis direct la navigatorul web s, i execut, ia se
ncheie.
Pentru fiecare cerere se genereaza un jeton unic pe baza parametrilor
din $ GET a se vedea funct, ia gen page cache id() din index.php.
6. Daca nu exista pagina n cache, atunci este inclus layout.php. Acest
fis, ier genereaza s, ablonul HTML, scheletul n care meniurile s, i cont, inutul
paginii vor fi afis, ate. Din acest moment ncepe generarea paginii HTML.
7. Se creeaza un obiect DOMDocument() care sa t, ina structura ierarhica a
paginii, a interfet, ei. In acest DOM se ncarca interfat, a data de layout.
php n pasul anterior.
8. Se cites, te fis, ierul xml/site_en.xml sau xml/site_ro.xml. Acest fis, ier
cont, ine structura siteului, ntr-un format XML propriu (vezi sect, iunea 3.3.1).
9. Se genereaza meniurile s, i restul interfet, ei, n funct, ie de calea accesata
de utilizator. Datele sunt preluate din structura siteului, din fis, ierul
XML citit n pasul anterior.

10. Se cauta calea dorita de utilizator n structura siteului. Pentru exemplul dat mai sus, prezentarea universitat, ii este o pagina de tip articol.
11. Fis, ierul XML indica titlul paginii s, i fis, ierul HTML de pe disc care trebuie afis, at: pages/ro_universitate-prezentarea-universitatii.
html.
12. In final, toata pagina este serializata n format HTML. Aceasta cont, ine
interfat, a siteului mpreuna cu cont, inutul paginii accesate de utilizator.
Serializarea se face folosindu-se obiectul DOMDocument().
13. Rezultatul, pagina completa HTML, este scris pe disc n cache/pages/
pentru a fi reutilizat pe viitor, s, i apoi este trimis catre client (utilizator).
Numele fis, ierului salvat pe disc este rezultatul funct, iei de faramit, are
md5() aplicata pe s, irul de caractere dat de calea accesata de utilizator,
mpreuna cu toate variabilele din cererea HTTP GET.
Daca utilizatorul acceseaza o pagina de tip blog, sau alt modul special,
atunci diferent, a n execut, ie este minora. Practic, n loc sa fie citit un fis, ier
HTML, n structura XML este notat modulul care trebuie inclus. Acel fis, ier

2.3. PRIVIRE PE ANSAMBLU

15

PHP este inclus, iar din acel moment este responsabil sa genereze cont, inutul
siteului. Pentru mai multe detalii se poate vedea sect, iunea 3.3.1.
In cazul paginilor de tip blog sau galerie de imagini, exista not, iunea
de sub-directoare n calea aleasa. De exemplu, blogul Noutat, i are adresa
/ro/universitate/noutati/, loc unde se gasesc articole. Codul care genereaza paginile blogului verifica ntreaga cale accesata de utilizator pentru a determina articolul dorit, de exemplu /ro/universitate/noutati/
invitatie-la-sport.
Sect, iunea de administrare a siteului funct, ioneaza identic, dar n admin/
include.php este schimbat fis, ierul XML care cont, ine structura siteului.
Adica, nu mai sunt ncarcate fis, ierele xml/site_en.xml s, i xml/site_ro.
xml. Sunt folosite XML-urile admin_en.xml s, i admin_ro.xml. In acestea
se gases, te structura siteului de administrare. Astfel, este refolosita interfat, a
siteului principal, pentru partea de administrare difera doar meniurile s, i
paginile care pot fi accesate.

2.3.1

Prezentarea modulelor din site

Paginile de tip blog sunt generate de pages/blog.php. Pe prima pagina


a blogului sunt afis, ate cele mai recente articole. Acestea sunt preluate din
tabelul MySQL blog (vezi anexa A.1). Articolele sunt asociate cu calea accesata de utilizator. Daca utilizatorul alege sa ncarce un anume articol, atunci
doar acela este afis, at. Daca se acceseaza fluxul Atom al paginii, atunci fis, ierul
pages/blog-atom.php este inclus. Acest fis, ier PHP afis, eaza n format Atom
ultimele articole adaugate n pagina.
Blogurile mai au tabelul blog tags (vezi anexa A.2) care asociaza articole
cu etichete (tags). Etichetele pot fi considerate drept categorii liber alese de
administratorii siteului, atunci cand aces, tia adauga articolele. Utilizatorii
pot filtra articolele pe baza acestor etichete, putand sa citeasca doar ce i
intereseaza.
Pentru a face paginile blog mai flexibile, exista posibilitatea ca administratorul sa editeze antetul / mesajul afis, at pe prima pagina a blogului. De
asemenea, se poate edita s, i panoul lateral loc unde pot fi adaugate legaturi
noi sau alte informat, ii.
Stilarea paginilor de tip blog este n fis, ierul css/blog.css. Cont, inutul
HTML al articolelor este salvat n directorul pages/blog/.
In sect, iunea de administrare se pot adauga/edita/s, terge articolele din bloguri, folosindu-se scriptul admin/blog.php. Pentru mai multe detalii despre
bloguri vezi sect, iunea 3.5.

16

CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI

Modulul care permite adaugarea de galerii de imagini este aproape identic


cu cel pentru bloguri. Diferent, ele sunt mici: imaginile nu au etichete, iar
paginile de galerie nu au panou lateral. De asemenea, scripturile PHP se
ocupa s, i de redimensionarea automata a imaginilor atunci cand acestea sunt
adaugate pe server. Pentru mai multe detalii vezi sect, iunea 3.6.
Pagina Contact, scriptul pages/contact.php, include un formular HTML
ce permite utilizatorilor sa trimita emailuri catre destinat, ia dorita. Destinat, iile oferite sunt citite dintr-un fis, ier JSON, pages/en_contact.json sau
pages/ro_contact.json. Utilizatorul trebuie sa treaca s, i testul reCaptcha,
pentru a nu permite trimiterea de mesaje spam. In dreapta formularului este
afis, at documentul HTML pages/en_contact.html sau pages/ro_contact.
html.
Pe partea de administrare, admin/contact.php, se pot edita datele de
contact ce apar n dreapta formularului, s, i se pot edita destinat, iile din JSON.
In plus, datele de contact afis, ate pe prima pagina pot fi modificate din acelas, i
loc. Pentru detalii vezi sect, iunea 3.9.
Paginile cu fis, iere de descarcat, pages/downloads.php, includ s, i ele un
antet ce poate fi editat de administratorii siteului, urmat de lista de fis, iere
din directorul asociat paginii, n files/downloads/. Pentru flexibilitate,
administratorii pot edita titlul s, i descrierea fiecarui fis, ier. In plus, pot fi
adaugate legaturi catre fis, iere externe. Toate aceste date sunt salvate ntr-un
fis, ier JSON n directorul asociat paginii. Pentru detalii vezi sect, iunea 3.7.
Orice modificare efectuata este nregistrata automat cu modulele de Search
s, i Sitemap. Paginile sunt indexate pentru a putea fi cautate s, i pentru a fi
afis, ate n harta siteului.

2.4

Structura siteului pe server, fis, ierele folosite

Lista de directoare s, i fis, iere din siteul UAV este prezentata mai jos pentru a
face mai clar modul de funct, ionare al siteului. O trecere n revista a acestei
structuri permite formarea unei imagini mai clare asupra locurilor unde se
poate gasi codul responsabil pentru diferitele funct, ii ale siteului.
admin/
Tot codul care face posibila administrarea siteului.
awebitor-interface.php
Scriptul PHP care genereaza interfat, a editorului de articole, n
format XHTML. Vezi sect, iunea 3.4.

2.4. STRUCTURA SITEULUI PE SERVER, FIS, IERELE FOLOSITE 17


blog.php
Modulul de administrare bloguri. Vezi sect, iunea 3.5.2.
check.php
Script care verifica daca utilizatorul este autentificat s, i are dreptul
de acces la admin.
contact.php
Modulul de administrare a paginii de contact3 . Vezi sect, iunea 3.9.
downloads.php
Modulul de administrare a paginilor cu fis, iere de descarcat. Vezi
sect, iunea 3.7.
edit.php
Editorul de articole. Vezi sect, iunea 3.4.
files.php
Gestionarul de fis, iere pe server. Vezi sect, iunea 3.2.
files-edithtml.php
Modul de editare pagini HTML n gestionarul de fis, iere.
files-retidy.php
Modul de curat, are pagini HTML n gestionarul de fis, iere.
gallery.php
Modulul de administrare a galeriilor de imagini.
nea 3.6.

Vezi sect, iu-

help-ro.html
Pagina cu recomandari editoriale pentru administratorii siteului.
In acest document sunt explicate principalele criterii de calitate
n redactarea cont, inutului.
iframe-layout.php
Interfat, a paginilor din admin afis, ate n <iframe>-uri. In spet, a,
acest fis, ier layout este folosit cand gestionarul de fis, iere este inclus
dinamic ntr-un <iframe> de exemplu atunci cand utilizatorul
alege sa adauge o imagine n editor.
include.php
Scriptul inclus de toate paginile din admin. Acesta configureaza
diferite aspecte generale ale paginilor de administrare. Mai precis
acest fis, ier:
ncarca structura siteului de administrare din xml/admin_en.
xml sau xml/admin_ro.xml, n funct, ie de limba curenta.
3

http://www.uav.ro/ro/contact

18

CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI


verifica daca utilizatorul are drepturi de administrare, folosindu-se de check.php. Altfel, accesul nu este permis.
ofera cateva funct, ii generale folosite de paginile de administrare.
index.php
Prima pagina a siteului de administrare.
pages.php
Gestionarul de pagini. Aici se poate edita structura siteului.
Acest script ncarca xml/site_en.xml sau xml/site_ro.xml s, i
l afis, eaza. Administratorul poate adauga/edita/s, terge pagini din
structura siteului. Vezi sect, iunea 3.3.
pages-blog.php
Modulul care permite adaugarea s, i s, tergerea paginilor de tip blog.
Vezi sect, iunea 3.5.2.
pages-downloads.php
Modulul care permite adaugarea s, i s, tergerea paginilor cu fis, iere
de descarcat. Vezi sect, iunea 3.7.
pages-gallery.php
Modulul care permite adaugarea s, i s, tergerea paginilor de tip ga
lerie de imagini. Vezi sect, iunea 3.6.
permissions.php
Editorul de drepturi pentru utilizatori. Vezi sect, iunea 3.1.2.4.
profile.php
Acest script permite utilizatorilor sa s, i editeze profilul. Vezi sect, iunea 3.1.3.
users.php
Gestionarul de utilizatori. Vezi sect, iunea 3.1.2.
cache/
Cacheul de pagini HTML generate de site. Aceste fis, iere sunt refolosite
pentru a asigura ncarcarea rapida a siteului cand sunt mult, i utilizatori
care navigheaza siteul simultan.
blog/
gallery/
pages/
search/

2.4. STRUCTURA SITEULUI PE SERVER, FIS, IERELE FOLOSITE 19


css/
Stilurile folosite n diferite sect, iuni ale siteului.
admin.css
Stilul pentru paginile de administrare.
admin-iframe.css
Stilul folosit de paginile de administrare ncarcate n <iframe>uri. In spet, a, acesta este folosit cand iframe-layout.php este
ncarcat.
awebitor.css
Stilul folosit pentru interfat, a editorului de articole. Vezi sect, iunea 3.4.
awebitor_iframe.css
Editorul introduce cont, inutul articolului ntr-un <iframe>. Acest
fis, ier de stil este folosit pentru afis, area paginilor care sunt n curs
de editare.
blog.css
Stilul pentru paginile de tip blog. Vezi sect, iunea 3.5.
contact.css
Stilul pentru pagina Contact. Vezi sect, iunea 3.9.
gallery.css
Stilul pentru galeriile de imagini. Vezi sect, iunea 3.6.
handheld.css
Stilul pentru celulare.
interface.css
Stilul principal al siteului.
interface_ie6.css
Stilul pentru Microsoft Internet Explorer 6.
interface_ie7.css
Stilul pentru Microsoft Internet Explorer 7.
print.css
Stilul folosit pentru imprimare.
search.css
Stilul pentru pagina care afis, eaza rezultatele unei cautari n site.
Vezi sect, iunea 3.10.

20

CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI


sitemap.css
Stilul pentru pagina unde este afis, ata harta siteului4 . Vezi sect, iunea 3.11.
welcome.css
Stilul pentru prima pagina5 . Vezi sect, iunea 3.8.
files/
Locul unde administratorii siteului pot ncarca fis, iere cu gestionarul de
fis, iere.
downloads/
Aici sunt salvate fis, ierele ncarcate de administratori n paginile
cu fis, iere de descarcat. Vezi sect, iunea 3.7.
gallery/
Aici sunt salvate imaginile din galerii. Vezi sect, iunea 3.6.
normal/
original/
thumbnails/
page_templates/
Aici se pot adauga pagini HTML, s, abloane ce pot fi refolosite cand
administratorii doresc sa adauge pagini noi. Vezi sect, iunea 3.3.3.
images/
Imaginile folosite n interfat, a siteului.
awebitor/
Iconit, ele editorului de articole. Vezi sect, iunea 3.4.
headers/
Imaginile folosite ca antet n site.
welcome-headers/
Imaginile folosite ca antet pe prima pagina. Vezi sect, iunea 3.8.
js/
Fis, ierele JavaScript folosite n site.
admin.js
Codul JS folosit n paginile de administrare a siteului.
4
5

http://www.uav.ro/ro/sitemap
http://www.uav.ro/

2.4. STRUCTURA SITEULUI PE SERVER, FIS, IERELE FOLOSITE 21


awebitor.js
Editorul de articole. Vezi sect, iunea 3.4.
awebitor_iframe.js
Acest fis, ier este folosit n <iframe>-ul ce permite editarea paginilor n modulul de administrare al siteului.
ie_fixes.js
Cod JS pentru compatibilitatea interfet, ei siteului cu navigatorul
web Microsoft Internet Explorer. Acesta implementeaza afis, area
meniurilor s, i repara alte erori.
index.js
Codul folosit n toate paginile siteului UAV. Acesta permite utilizatorilor sa mareasca/miceasca dimensiunea textului afis, at n site
s, i restul de funct, ionalitat, i interactive ale paginilor.
login.js
Codul folosit pentru autentificarea utilizatorilor n modulul de administrare. Vezi sect, iunea 3.1.1.1.
sha512.js
Cod open source care cripteaza parola nainte de autentificare folosind algoritmul SHA-512 [5].
sitemap.js
Codul folosit pentru harta siteului. Vezi sect, iunea 3.11.
welcome.js
Codul folosit pe prima pagina pentru animarea pozelor. Vezi sect, iunea 3.8.
modules/
Scripturi refolosite prin diferite part, i ale siteului.
json/
Script open source de citire s, i scriere fis, iere JSON pentru versiunile
mai vechi de PHP [6]. Noile versiuni de PHP implementeaza nativ
aceste funct, ii [7].
recaptcha/
Script open source de pe recaptcha.net. Acesta poate fi folosit
pentru protejarea formularelor mpotriva spamului.
pingomatic.php
Script propriu de generare pinguri la motoarele de cautare care
sunt specializate pentru bloguri. Acesta foloses, te serviciul web
pingomatic.com.

22

CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI


search.php
Script propriu care indexeaza cont, inutul paginilor ntr-o baza de
date MySQL. Acesta permite altor scripturi PHP sa indexeze pagini noi n baza de date, sa s, tearga s, i sa modifice pagini existente.
De asemenea, scriptul poate fi folosit pentru efectuarea de cautare
n baza de date. Vezi sect, iunea 3.10.
sitemap.php
Script propriu care indexeaza harta siteului. Acesta permite altor
scripturi PHP sa indexeze pagini n baza de date, sa s, tearga s, i sa
modifice pagini existente. Sunt incluse funct, ii ce genereaza pagina
HTML pentru harta siteului s, i fis, ierul Sitemaps XML [1] pentru
motoarele de cautare. Vezi sect, iunea 3.11.
pages/
Aici sunt salvate paginile HTML adaugate de administratorii siteului.
Pe langa fis, ierele HTML sunt s, i scripturile PHP care apart, in diferitelor
tipuri de pagini.
blog/
Aici sunt salvate fis, ierele HTML ale articolelor adaugate n pagini
de tip blog. Vezi sect, iunea 3.5.
downloads/
Aici sunt salvate fis, ierele HTML generate pentru paginile care
cont, in fis, iere de descarcat. Vezi sect, iunea 3.7.
gallery/
Aici sunt salvate fis, ierele HTML pentru fiecare imagine din orice
galerie. Vezi sect, iunea 3.6.
blog.php
Scriptul PHP care genereaza paginile de tip blog. Vezi sect, iunea 3.5.
blog-atom.php
Scriptul care genereaza fluxul Atom pentru bloguri.
contact.php
Pagina cu formularul de contact. Acest script ncarca fis, ierul en_
contact.html sau ro_contact.html pentru a afis, a datele de contact ale universitat, ii, langa formular. Fis, ierul en_contact.json
sau ro_contact.json este ncarcat pentru afis, area departamentelor ce pot fi contactate din formular. Utilizatorul nu poate sa vada
adresele de email ale departamentelor, dorindu-se a fi o masura de
protect, ie mpotriva spamului. Vezi sect, iunea 3.9.

2.4. STRUCTURA SITEULUI PE SERVER, FIS, IERELE FOLOSITE 23


downloads.php
Paginile cu fis, iere de descarcat sunt generate de acest script. Vezi
sect, iunea 3.7.
en_contact.html s, i ro_contact.html
Datele de contact afis, ate pe pagina Contact.
en_contact.json s, i ro_contact.json
Destinat, iile afis, ate n formularul de contact.
en_welcome_contact.html s, i ro_welcome_contact.html
Datele de contact afis, ate pe prima pagina.
en_welcome_partners.html s, i ro_welcome_partners.html
Sect, iunea Parteneri afis, ata pe prima pagina.
gallery.php
Paginile de tip galerie de imagini sunt afis, ate de acest script.

Vezi sect, iunea 3.6.


gallery-atom.php
Fluxul Atom pentru galeriile de imagini.
search.php
Pagina de cautare n site. Aceasta afis, eaza rezultatele cautarii.
Modulul modules/search.php este ncarcat pentru a efectua cautarile dorite n baza de date. Vezi sect, iunea 3.10.
sitemap.php
Pagina care afis, eaza harta siteului. Acest script ncarca fis, ierul
sitemap_en.html sau sitemap_ro.html, n funct, ie de limba folosita de utilizator. Vezi sect, iunea 3.11.
sitemap_en.html s, i sitemap_ro.html
Harta siteului, n engleza s, i romana.
welcome.php
Scriptul care genereaza dinamic prima pagina. Vezi sect, iunea 3.8.
xml/
Fis, ierele XML folosite pentru structura siteului.
admin_en.xml s, i admin_ro.xml
Structura paginilor de administrare a siteului.
site_en.xml s, i site_ro.xml
Structura siteului. Acest XML listeaza toate paginile din site, cu
titlul fiecareia, cu structura meniurilor, s, i defines, te tipul fiecarei
pagini. Vezi sect, iunea 3.3.1.

24

CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI


sitemap.xml
Harta siteului n format Sitemaps XML [1], folosita de motoarele
de cautare. Vezi sect, iunea 3.11.
404.php
Pagina afis, ata atunci cand utilizatorul ncearca sa acceseze o pagina
inexistenta.
admin.php
Pagina de autentificare n sect, iunea de administrare a siteului. Aici
administratorul poate sa s, i reseteze parola daca a uitat-o. Vezi sect, iunea 3.1.
awebitor_iframe.php
Editorul de pagini ncarca acest fis, ier n <iframe>. In acest fis, ier aflat
la radacina siteului este introdus codul HTML al paginilor care urmeaza
sa fie editate de utilizator. Vezi sect, iunea 3.4.
index.php
Punctul de intrare n site. Acest script genereaza toate paginile. Acesta
cites, te setarile siteului, se conecteaza la baza de date MySQL, cites, te
structura siteului din XML s, i n funct, ie de calea dorita de utilizator,
afis, eaza pagina asociata cu calea data.
lang_en.php s, i lang_ro.php
Fis, ierele de traducere a siteului n limbile engleza s, i romana.
layout.php
Scriptul care genereaza interfat, a siteului n format XHTML.
settings.php
Setarile siteului.
.htaccess
Fis, ierul de configurare pentru Apache. In acesta se gasesc regulile de
rescriere a cererilor HTTP.
.private/
Module private folosite de site
users/
Modul de autentificare utilizatori s, i gestionare permisiuni. Vezi
sect, iunea 3.1.

2.4. STRUCTURA SITEULUI PE SERVER, FIS, IERELE FOLOSITE 25


retidy/
Modul de curat, are pagini HTML. Vezi sect, iunea 3.4.1.

Capitolul 3
Extensiile aplicat, iei web
In sect, iunea 2.3 s-a putut vedea ca siteul este construit ntr-un mod flexibil ce
permite adaugarea de pagini de orice fel. Nu se impune nici o limita asupra
tipului de pagini trebuie doar sa fie ncarcat un fis, ier PHP din care autorul
scriptului poate face orice dores, te. Aceste scripturi le numim module sau
extensii ale aplicat, iei web.
Implicit aplicat, ia web este cat se poate de zvelta, de robusta, mini
malista, fara sa aiba funct, ionalitat, i ce nu sunt dorite. In acest capitol vom
prezenta extensiile realizate pentru siteul Universitat, ii Aurel Vlaicu din

Arad.

3.1

Conturi pentru administratori

Sect, iunea de administrare a siteului poate fi accesata doar de catre personalul autorizat. In acest scop a fost dezvoltat un sistem de conturi pentru
administratorii siteului, cu autentificare securizata.
Modulul privat .private/users/users.php este scriptul PHP care cont, ine implementarea not, iunii de conturi. Clasa RD users manager permite
autentificarea, resetarea de parole, schimbarea profilului la fiecare utilizator,
adaugarea s, i s, tergerea de utilizatori, modificarea drepturilor acestora.
Parolele s, i drepturile utilizatorilor se gasesc n directorul .private/
users/sites/. Parolele sunt criptate cu funct, ia de faramit, are SHA-512
acestea nu pot fi decriptate [8]. Pentru drepturile s, i profilul fiecarui utilizator
este folosit cate un fis, ier JSON. Formatul fis, ierului este urmatorul:
{
u s e r : numecont ,
26

3.1. CONTURI PENTRU ADMINISTRATORI

27

l a s t L o g i n D a t e : 0 , // UNIX timestamp
lastLoginIP : 127.0.0.1 ,
nrLogins : 1 ,
profile: {
displayName : Nume U t i l i z a t o r ,
e m a i l : adresa@example . com
},
permissions : {
admin : {
view : true ,
r e c u r s i v e : true
},
admin \/ f i l e s \/ d i r e c t o r : {
d e f a u l t : true ,
r e c u r s i v e : true
},
admin \/ pages \/ r o \/ pagina : {
e d i t : true ,
r e c u r s i v e : true
}
}
}
Dupa cum se poate vedea n codul de mai sus, fis, ierul JSON include numele contului, numele afis, at, emailul, numarul de autentificari, data ultimei
autentificari s, i IP-ul.
Drepturile unui cont sunt exprimate ierarhic, ca ntr-o structura de directoare, un arbore. Avem utilizatorul care poate efectua un numar nelimitat de
act, iuni, n funct, ie de pagina, n funct, ie de sect, iunea siteului. Avem sect, iunile
siteului structurate ca pagini s, i sub-pagini cu nume care au fiecare o cale.
Pentru a permite editarea paginii contact trebuie acordat dreptul:
admin \/ pages \/ r o \/ c o n t a c t : {
e d i t : true ,
alta actiune : false
// orice alta act, iune urmata de true daca este permita
// sau false daca nu.
}

28

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Daca se doresc aceleas, i drepturi pentru sub-pagini, atunci se adauga


recursive :
admin \/ pages \/ r o \/ c o n t a c t : {
e d i t : true ,
r e c u r s i v e : true
}
Acum pentru /ro/contact/orice-sub-pagina se aplica aceleas, i drepturi.
Daca nu se dores, te specificarea fiecarei act, iuni permise/nepermise, atunci
se poate folosi default :
admin \/ pages \/ r o \/ c o n t a c t : {
// interzicem toate act, iunile posibile n afara de view
d e f a u l t : false ,
view : true
}
Daca profilul unui utilizator nu defines, te nici un fel de permisiuni, implicit orice act, iune este interzisa. Dreptul pentru act, iunile de vizualizare sau
de editare n diferitele sect, iuni ale siteului trebuie acordate explicit fiecarui
utilizator. Pentru mai multe detalii despre interfat, a de editare a drepturilor
vedet, i sect, iunea 3.1.2.4.

3.1. CONTURI PENTRU ADMINISTRATORI

3.1.1

29

Autentificare

Pentru autentificare administratorul acceseaza una din paginile de mai jos:


Romana: http://www.uav.ro/ro/admin,
Engleza: http://www.uav.ro/en/admin.

Figura 3.1: Formularul de autentificare.

3.1.1.1

Formularul de autentificare

Formularul de autentificare foloses, te JavaScript pentru a cripta parola nainte


de a fi trimisa la server. Parola nu este nici o data transmisa plain text
exact cum o scrie utilizatorul. Ea este criptata cu funct, ia de faramit, are
SHA-512 [8].
Scriptul admin.php genereaza codul HTML al formularului astfel:
<s c r i p t src=/ j s / l o g i n . j s
type= t e x t / j a v a s c r i p t ></ s c r i p t>
<s c r i p t src=/ j s / sha512 . j s
type= t e x t / j a v a s c r i p t ></ s c r i p t>
<p><em>A u t e n t i f i c a r e</em></p>
<form method= post action = ?
onsubmit = r e t u r n adminFormLogin ( t h i s ) >
<p><l a b e l>Cont :
<input type=text name= us e r ></ l a b e l></p>
<p><l a b e l>P a r o l a :

30

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

<input type= password name= pass ></ l a b e l></p>


<p>
<input type= hidden name= l value= ro >
<input type= hidden name= l o g i n value=n >
<input type= hidden name= tok value= $token >
<input type= submit value= A u t e n t i f i c a r e >
<a href = ? f o r g o t =1>Am u i t a t p a r o l a !</a>
</p>
</form>
Dupa cum se poate vedea din cod:
Sunt incluse doua fis, iere JavaScript: login.js s, i sha512.js. Primul
cont, ine funct, iile folosite de formularul de autentificare de exemplu
adminFormLogin(). Al doilea fis, ier este o implementare open source a
algoritmului SHA-512 [5].
Campul cont are numele user.
Campul parola are numele pass.
Campul ascuns l are valoarea limbii curente: ro sau en.
Campul ascuns login are valoarea n. Daca serverul nu primes, te valoarea y nu continua procesarea cererii de autentificare. Aceasta masura
de protect, ie minima este inclusa pentru a verifica daca JavaScriptul
a fost executat. Funct, ia adminFormLogin() schimba valoarea acestui
camp sa fie y.
Campul ascuns tok este un jeton (token), un s, ir de caractere generate aleatoriu de server.
Acest jeton este folosit de funct, ia
adminFormLogin() pentru criptarea parolei. Serverul as, teapta ca parola primita sa fie criptata cu acest s, ir, daca nu autentificarea es, ueaza.
S, irul se schimba la fiecare ncarcare de pagina s, i include n el cateva
masuri de sigurant, a ce vor fi discutate n aceasta sect, iune.
Pagina de autentificare este generata de admin.php. Acest script PHP
include modulul privat de gestionare a conturilor de utilizatori: .private/
users/users.php.
// Includerea modulului privat. Calea este data de variabila
// globala $GLOBALS[users.php] definita n settings. php .
r e q u i r e o n c e ($GLOBALS [ u s e r s . php ] ) ;

3.1. CONTURI PENTRU ADMINISTRATORI

31

// Se creaza o instant, a a obiectului cu care putem gestiona


// utilizatorii.
$ u s e r s m a n a g e r = new RD users manager ( ) ;
i f ( $ u s er s ma nag er >d i d a u t h ( ) ) {
// Daca utilizatorul este autentificat deja, facem
// redirect, ionarea catre prima pagina a siteului de
// administrare.
header ( L o c a t i o n : /admin/ i n d e x . php ) ;
exit ;
}
Variabila $token pentru formular este generata astfel:
$token =
htmlentities ( $us er s ma nag er >g e t a u t h t o k e n ( ) ,
ENT QUOTES, u t f 8 ) ;
Funct, ia get auth token() genereaza un jeton aleatoriu ce este folosit
pentru autentificare.
Atunci cand utilizatorul alege sa se autentifice se face urmatoarea verificare:
i f ( i s s e t ( $ POST [ l o g i n ] ) && $ POST [ l o g i n ] == y ) {
$auth failed =
! $ u se rs ma nag er >l o g i n ( $ POST [ u s e r ] ,
$ POST [ p a s s ] ) ;
if (! $auth failed ) {
header ( L o c a t i o n : /admin/ i n d e x . php ) ;
exit ;
}
}
Funct, ia login() face verificarile necesare. Practic fis, ierul admin.php este
doar interfat, a, iar users.php se ocupa de implementarea autentificarii, de
masurile de securitate.
Un exemplu de $token generat: BaoYC5>,8/<2=3A1036<-61: . . . .

32

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

In fis, ierul users.php implementarea funct, iei get auth token() arata n
felul urmator:
public function get auth token () {
// Siteul are un jeton privat care a fost generat aleatoriu la
// instalarea siteului. Acesta este folosit pentru criptarea
// parolei pe server.
$ t o k e n s i t e = $ t h i s >g e t s i t e t o k e n ( ) ;
if (! $token site ) {
return null ;
}
// Generam un jeton aleator pentru sesiunea curenta.
$ t h i s >g e n s e s s i o n t o k e n ( ) ;
// Generam doua valori aleatoare unice pentru cererea
// curenta de autentificare.
$ t o k e n r n d 1 = uniqid ( , true ) . time ( ) ;
$ t o k e n r n d 2 = uniqid ( , true ) ;
$ t o k e n a u t h = hash hmac ( sha512 ,
$ t h i s >s e s s i o n t o k e n .
$token rnd1 , $ t o k e n r n d 2 ) ;
// Combinam cele doua jetoane ntr-un
$prev = mt rand ( 0 , 1 5 ) ;
$ t o k e n f i n a l = chr ( ord ( A ) +
$len = strlen ( $token auth ) ;
for ( $ i = 0 ; $ i < $ l e n ; $ i ++)
$a = $ t o k e n a u t h [ $ i ] ;
$b = $ t o k e n s i t e [ $ i ] ;
$ a i = intval ( $a , 1 6 ) ;
$ b i = intval ( $b , 1 6 ) ;
$ t o k e n f i n a l .= chr ( ord ( $a )
chr ( ord ( $b )
$prev = $ b i ;
}

jeton.
$prev ) ;
{

$prev ) .
+ $ai ) ;

// Salvam valorile aleatoare n sesiunea locala,


// pe server.
$ SESSION [ u s e r a u t h r n d ] =
array ( $token rnd1 , $token rnd2 , time ( ) ) ;

3.1. CONTURI PENTRU ADMINISTRATORI

return $token final ;


}
Implementarea funct, iei gen session token():
protected function gen session token () {
i f ( ! $ t h i s >s e s s i o n t o k e n ) {
$ h o s t = i s s e t ($ SERVER [ HTTP HOST ] ) ?
$ SERVER [ HTTP HOST ] :
( i s s e t ($ SERVER [ SERVER NAME ] ) ?
$ SERVER [ SERVER NAME ] : ) ;
// Folosim funct, ia de faramit, are SHA-512 pentru a genera
// un jeton unic dat de ID-ul sesiunii, IP-ul
// utilizatorului, navigatorul web, server s, i port.
$ t h i s >s e s s i o n t o k e n = hash ( sha512 ,
$ t h i s >u s e r i p . $ t h i s >e n g i n e i d .
@session id () .
@$ SERVER [ HTTP USER AGENT ] .
@$ SERVER [ HTTP ACCEPT CHARSET ] .
@$ SERVER [ HTTP ACCEPT ENCODING ] .
@$ SERVER [ HTTPS ] .
@$ SERVER [ SERVER PORT ] . $ h o s t ) ;
}
}
In login.js funct, ia adminFormLogin():
f u n c t i o n adminFormLogin ( frm ) {
// Citim jetonul.
var tok = adminFormParseToken ( frm . tok . v a l u e ) ;
i f ( ! tok ) {
return f a l s e ;
}
// Folosim jetonul trimis de server pentru a cripta
// parola.
var sha512a = new jsSHA ( frm . u s e r . v a l u e +
frm . p a s s . v a l u e +
tok [ 1 ] ) ,
sha512b = new jsSHA ( sha512a . getHash ( SHA512 ,
HEX ) ) ,

33

34

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


r e s = sha512b . getHMAC( tok [ 0 ] , ASCII , SHA512 ,
HEX ) ;
// Actualizam variabilele din formular.
frm . tok . v a l u e = ;
frm . p a s s . v a l u e = r e s ;
frm . l o g i n . v a l u e = y ;
tok = sha512a = sha512b = r e s = null ;
return true ;

}
Funct, ia adminFormParseToken() este:
f u n c t i o n adminFormParseToken ( tok ) {
i f ( tok . l e n g t h != 257) {
return f a l s e ;
}
var toka = [ ] , tokb = [ ] ;
// Inversam operat, ia din users. php ,
// funct, ia gen auth token().
var prev = p a r s e I n t ( tok . charCodeAt ( 0 )
A . charCodeAt ( 0 ) ) ;
for ( var a1 , b1 , a2 , b2 , a3 , i = 1 ; i < 2 5 6 ;
i += 2 ) {
a1 = tok . charCodeAt ( i ) ;
b1 = tok . charCodeAt ( i +1);
a2 = S t r i n g . fromCharCode ( a1 + prev ) ;
toka . push ( a2 ) ;
a3 = p a r s e I n t ( a2 , 1 6 ) ;
b2 = S t r i n g . fromCharCode ( b1 a3 ) ;
tokb . push ( b2 ) ;
prev = p a r s e I n t ( b2 , 1 6 ) ;
}
// Primul element din vector este jetonul sesiunii,
// al doilea element este jetonul siteului.
return [ toka . j o i n ( ) , tokb . j o i n ( ) ] ;
}

3.1. CONTURI PENTRU ADMINISTRATORI

35

Dupa execut, ia codului JavaScript se trimite cererea de autentificare catre


server, acolo unde se executa funct, ia login() din users.php:
public function login ( $req user , $req pass ) {
// Verificam daca numele contului este valid: cont, ine numai
// caractere alfabetice s, i numere.
// Verificam daca avem variabila de sesiune user auth rnd
// unde sunt salvate valorile aleatoare pentru cererea de
// autentificare n derulare.
i f ( ! $req pass | |
! $ t h i s >i s u s e r n a m e v a l i d ( $ r e q u s e r ) | |
! i s s e t ( $ SESSION [ u s e r a u t h r n d ] ) ) {
return false ;
}
// Daca utilizatorul este autentificat deja, nu permitem
plus, nchidem sesiunea.
// re-autentificarea. In
i f ( $ t h i s >d i d a u t h ( ) ) {
$ t h i s >l o g o u t ( ) ;
return false ;
}
// Valorile aleatoare salvate pe server de
// gen auth token() la ncarcarea paginii de autentificare.
$ t o k e n r n d = $ SESSION [ u s e r a u t h r n d ] ;
unset ( $ SESSION [ u s e r a u t h r n d ] ) ;
//
//
//
if

Verificam daca nu a expirat cererea de autentificare.


Dupa ncarcarea paginii de autentificare utilizatorul
are timp maxim 10 minute pana cererea expira.
( ( time ( ) $ t o k e n r n d [ 2 ] ) >
$ t h i s >t p e r i o d a u t h f o r m ) {
return false ;

}
//
//
//
if
}

Verificam daca utilizatorul este blocat. Salvam pe server


numarul de es, ecuri de autentificare. Dupa 5 ncercari
es, uate IP-ul este blocat.
( $ t h i s >u s e r b l o c k e d ) {
return false ;

36

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

// Citim parola utilizatorului de pe server, n forma


// criptata.
$ u s e r k e y = $ t h i s >g e t u s e r k e y ( $ r e q u s e r ) ;
i f ( ! $user key ) {
// Daca numele contului nu exista consideram ca acesta
// este un es, ec de autentificare.
$ t h i s > i n c i p f a i l s ( ) ;
return false ;
}
// Regeneram jetonul sesiunii.
$ t h i s >g e n s e s s i o n t o k e n ( ) ;
// Regeneram jetonul de autentificare, folosindu-ne de
// variabilele aleatoare salvate pe server de
// gen auth token().
$ t o k e n a u t h = hash hmac ( sha512 ,
$ t h i s >s e s s i o n t o k e n .
$token rnd [ 0 ] ,
$token rnd [ 1 ] ) ;
// Criptam parola de pe server cu jetonul de autentificare.
$ p a s s = hash hmac ( sha512 , $ u s e r k e y , $ t o k e n a u t h ) ;
// Comparam valoarea locala $pass cu cea trimisa de client.
i f ( $ r e q p a s s != $ p a s s ) {
// Valoarea este gres, ita, nseamna ca utilizatorul nu a
// introdus numele contului corect, parola sau jetoanele
// folosite pentru criptare au fost diferite. Jetoanele
// pot fi diferite doar daca $token rnd au fost diferite,
// daca IP-ul, navigatorul web sau alte informat, ii folosite
// de gen auth token() s-au schimbat.
$ t h i s > i n c i p f a i l s ( ) ;
return false ;
}
// Utilizatorul este autentificat cu succes!

3.1. CONTURI PENTRU ADMINISTRATORI

37

// Salvam pe server n sesiunea PHP datele despre


// autentificare.
$ d a t e a u t h = time ( ) ;
$ SESSION [ u s e r a u t h ] = array (
// Salvam un jeton cu datele despre sesiune. Daca la
// urmatoarele ncarcari se schimba ceva, sesiunea este
// nchisa s, i utilizatorul trebuie sa se reautentifice.
tok => hash hmac ( sha512 , $ u s e r k e y ,
$ t h i s >s e s s i o n t o k e n .
$date auth ) ,
u s e r => $ r e q u s e r ,
d a t e a u t h => $ d a t e a u t h ,
d a t e l a s t => $ d a t e a u t h ,
);
r e t u r n true ;
}
La fiecare ncarcare de pagina n sect, iunea de administrare funct, ia did
auth() este chemata. Aceasta verifica daca valorile din $ SESSION[user
auth] sunt nca valide.
La fiecare es, ec de autentificare numarul de es, ecuri este incrementat pentru IP-ul n cauza. Acest numar este salvat n directorul .private/users/
ipfails/, ntr-un fis, ier care are drept nume IP-ul clientului. Un fis, ier
globalfails este folosit pentru a contoriza es, ecuri globale, indiferent de
IP-uri. Daca serverul este supus unui atac concertat, dispersat pe mai multe
IP-uri, sistemul de autentificare se blocheaza la tot, i utilizatorii.

38
3.1.1.2

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


Formularul de resetare a parolei

Utilizatorii care uita parola pot opta sa reseteze parola contului. Ei primesc
prin email o parola noua, la adresa configurata n profilul lor.
Figura 3.2: Formularul de resetare a parolei.

Pentru formularul de resetare a parolei folosim libraria anti-spam recaptcha.net. Cod din admin.php:
$token = htmlentities ( $us ers ma nag er >g e t a u t h t o k e n ( ) ,
ENT QUOTES, u t f 8 ) ;
echo <p><em>R e s e t a r e p a r o l a </em></p>
<form method= p o s t a c t i o n = ?
onsubmit = r e t u r n adminFormForgotPassword ( t h i s ) >
<p><l a b e l >Nume cont :
<i n p u t type = t e x t name= u s e r ></ l a b e l ></p>
. recaptcha get html ( $recaptcha [ publickey ] ) .
<p>
<i n p u t type = hidden name= f o r g o t v a l u e =1>

3.1. CONTURI PENTRU ADMINISTRATORI

39

<i n p u t type = hidden name= s e n d p a s s v a l u e =n>


<i n p u t type = hidden name= l v a l u e = r o >
<i n p u t type = hidden name= tok v a l u e = $token >
<i n p u t type = submit v a l u e = T r i m i t e >
<a h r e f =?> I n a p o i l a a u t e n t i f i c a r e </a>
</p>
</form> ;
De aceasta data folosim funct, ia JavaScript adminFormForgotPassword()
s, i chemam recaptcha get html() pentru a afis, a elementele necesare testului
anti-spam.
Ca masura de sigurant, a folosim jetonul de autentificare pentru a cripta
numele contului, chiar daca este transmis s, i fara criptare. Verificam doar
daca la client funct, ioneaza toate masurile de sigurant, a: daca nu se schimba
sesiunea, daca nu reus, es, te sa cripteze numele contului cel mai probabil sunt
probleme tehnice probleme ce pot fi suspectate a face parte din ncercarile
unui atacator.
La fel ca la formularul de autentificare avem campul sendpass cu valoarea
init, iala n. Ea trebuie sa fie y pentru a permite procesarea cererii de resetare
a parolei.
Funct, ia adminFormForgotPassword() arata astfel:
f u n c t i o n adminFormForgotPassword ( frm ) {
// Citire jeton.
var tok = adminFormParseToken ( frm . tok . v a l u e ) ;
i f ( ! tok ) {
return f a l s e ;
}
// Criptare nume cont.
var sha512 = new jsSHA ( frm . u s e r . v a l u e + tok [ 1 ] ) ,
r e s = sha512 . getHMAC( tok [ 0 ] , ASCII ,
SHA512 , HEX ) ;
// Actualizare formular.
frm . tok . v a l u e = r e s ;
frm . s e n d p a s s . v a l u e = y ;
sha512 = r e s = null ;
return true ;
}

40

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Dupa ce utilizatorul introduce numele contului s, i raspunsul la provoca


rea anti-spam a serviciului reCaptcha, se executa urmatorul cod din admin.
php:
$result = false ;
i f ( i s s e t ( $ POST [ f o r g o t ] , $ POST [ s e n d p a s s ] ,
$ POST [ u s e r ] , $ POST [ tok ] ) &&
$ POST [ s e n d p a s s ] == y ) {
// Folosim libraria reCaptcha pentru a verifica raspunsul
// dat de utilizator.
$result = recaptcha check answer (
$recaptcha [ privatekey ] ,
$ SERVER [ REMOTE ADDR ] ,
$ POST [ r e c a p t c h a c h a l l e n g e f i e l d ] ,
$ POST [ r e c a p t c h a r e s p o n s e f i e l d ] ) ;
i f ( ! $ r e s u l t >i s v a l i d ) {
unset ( $ POST [ s e n d p a s s ] ) ;
$ p a s s s e n d s t a t u s = f a i l e d r e c a p t c h a ;
}
}
i f ( i s s e t ( $ POST [ s e n d p a s s ] ) ) {
// Resetam parola.
$result =
$u ser s ma nag er >r e s e t u s e r p a s s w o r d (
$ POST [ u s e r ] , $ POST [ tok ] ) ;
if ( $result ) {
// Trimitem parola noua prin email.
// Avem $result[password] s, i $result[email].
}
}
Scriptul admin.php trimite noua parola generata, $result[password],
prin email la adresa data de $result[email]. Funct, ia PHP mail() este
folosita n acest scop.

3.1.2

Gestionarea conturilor de administrare site

Gestionarea conturilor se face pe baza drepturilor primite de administratorul


n cauza. Pentru adaugarea de conturi noi s, i pentru s, tergerea conturilor existente se foloses, te interfat, a implementata de admin/users.php. Pentru editarea drepturilor se foloses, te interfat, a din admin/permissions.php. Toate

3.1. CONTURI PENTRU ADMINISTRATORI

41

funct, iile care t, in de conturi sunt implementate n clasa RD users manager


din .private/users/users.php celelalte fis, iere PHP sunt doar interfet, e
grafice.
3.1.2.1

Lista conturilor

Un administrator cu drepturi suficiente poate sa vizualizeze s, i sa editeze


conturile altor administratori de site.
Figura 3.3: Pagina de administrare a conturilor.

Lista de conturi este generata citindu-se lista de fis, iere de pe disc din
directorul .private/users/sites/.
Pagina este generata de scriptul admin/users.php. Acesta face chemare
la scriptul admin/include.php.
In include.php se fac verificarile daca utilizatorul are dreptul de a accesa
pagina de administrare dorita. In acest script se cheama s, i funct, ia did
auth() din .private/users/users.php.

42

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


Pagina data de admin/users.php este generata n felul urmator:

// Modulul de gestionare utilizatori ne ofera posibilitatea de


// a afla lista de utilizatori. Aceasta funct, ie returneaza un
// array/vector de conturi.
$ u s e r s = $ use rs ma nag er >g e t u s e r s ( ) ;
echo <p>{$ l n g [ u s e r s ]} </p>
<u l c l a s s = p a g e s l i s t >\n ;
foreach ( $ u s e r s as $ u s e r ) {
$ u s e r 2 = htmlspecialchars ( $use r , ENT QUOTES,
u t f 8 ) ;
$ u s e r 3 = htmlspecialchars ( urlencode ( $ u s e r ) ,
ENT QUOTES,
u t f 8 ) ;
echo <l i > ;
// Verificam daca avem dreptul sa vizualizam permisiunile
// contului $user.
i f ( $us ers ma nag er >have perm ( admin/ u s e r s / $ u s e r ,
view perms ) ) {
echo <a h r e f = p e r m i s s i o n s . php? l=$ l .
&amp ; u s e r=$ u s e r 3 > $user2 </a> ;
} else {
echo $ u s e r 2 ;
}
// Verificam daca avem drepturi sa s, tergem $user.
i f ( $ u s e r != $ u s e r s e l f &&
$u ser s ma nag er >have perm ( admin/ u s e r s / $ u s e r ,
delete )) {
echo <a c l a s s = us e r d e l h r e f =#us e r d e l e t e
o n c l i c k = r e t u r n
siteAdmin . u s e r D e l e t e (\ $ u s e r 2 \ ,
t h i s ); >{ $ l n g [ d e l e t e u s e r ]} </ a> ;
}
echo </ l i > ;
}
echo </ul >\n ;
Dupa cum se vede n codul de mai sus pagina foloses, te o funct, ie spe-

3.1. CONTURI PENTRU ADMINISTRATORI

43

cifica a clasei RD users manager: have perm($sectiune, $actiune). Cu


aceasta funct, ie verificam daca utilizatorul autentificat n momentul chemarii
are dreptul sa execute act, iunea data n sect, iunea data. Aceasta chemare
simpla rezolva problema granulara a drepturilor n cel mai mic detaliu.
3.1.2.2

Verificarea drepturilor unui cont

In implementarea funct, iei have perm() se cites, te arborele de drepturi asociat


utilizatorului pentru a se determina daca act, iunea n sect, iunea data este
permisa sau nu.
p u b l i c f u n c t i o n have perm ( $ s e c t i o n , $ a c t i o n ) {
// Verificam daca utilizatorul este autentificat.
i f ( ! $ t h i s >d i d a u t h ( ) ) {
return false ;
} e l s e i f ( $ s e c t i o n == e d i t a b l e | |
$ s e c t i o n == d e f a u l t ) {
// Nu permitem sect, iuni cu nume speciale.

return false ;
} e l s e i f ( $ a c t i o n == r e c u r s i v e | |
$ a c t i o n == d e f a u l t ) {
// Nici act, iuni cu nume speciale.
return false ;
}
// Pornim de la raspunsul implicit: act, iunea nu este
// permisa.
$ r e s u l t = $ t h i s >p e r m d e f a u l t ;
// Citim dreptul implicit al utilizatorului: este posibil ca
// acesta sa aiba toate drepturile sau nici unul, implicit.
$perms = &$ t h i s >u s e r d a t a [ p e r m i s s i o n s ] ;
i f ( i s s e t ( $perms [ d e f a u l t ] ) ) {
$ r e s u l t = $perms [ d e f a u l t ] ;
}
// Pornim iterat, ia n arborele dat de sect, iunea dorita.

$ a r r = explode ( / , $ s e c t i o n ) ;
$path = ;
foreach ( $ a r r as $ p a r t ) {
i f ( $path == ) {

44

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


$path = $ p a r t ;
} else {
$path .= / . $ p a r t ;
}
// Daca nu este nici un drept n calea curenta,
// nu avem ce face.
i f ( ! i s s e t ( $perms [ $path ] ) ) {
continue ;
}
// Nu ne intereseaza drepturile acordate ntr-o pagina
// parinte daca acele drepturi nu sunt aplicate recursiv.
i f ( $path != $ s e c t i o n &&
( ! i s s e t ( $perms [ $path ] [ r e c u r s i v e ] ) | |
! $perms [ $path ] [ r e c u r s i v e ] ) ) {
continue ;
}
// Vedem ce drept este dat act, iunii dorite.
i f ( i s s e t ( $perms [ $path ] [ $ a c t i o n ] ) ) {
$ r e s u l t = $perms [ $path ] [ $ a c t i o n ] ;
} e l s e i f ( i s s e t ( $perms [ $path ] [ d e f a u l t ] ) ) {
// . . . sau folosim dreptul acordat implicit pentru
// calea curenta.
$ r e s u l t = $perms [ $path ] [ d e f a u l t ] ;
}
}
// Verificari specifice pentru gestionarea de conturi.
i f ( $ r e s u l t && count ( $ a r r ) == 3 &&
$ a r r [ 0 ] == admin &&
$ a r r [ 1 ] == u s e r s &&
( $ a c t i o n == e d i t p e r m s | |
$ a c t i o n == d e l e t e ) ) {
// Nu permitem utilizatorului curent sa s, i s, tearga contul.
i f ( $ a c t i o n == d e l e t e &&
$ a r r [ 2 ] == $ t h i s >user name ) {
return false ;
} e l s e i f ( $ a c t i o n == e d i t p e r m s &&

3.1. CONTURI PENTRU ADMINISTRATORI

45

$ a r r [ 2 ] == $ t h i s >user name ) {
// Nu permitem utilizatorului curent sa s, i editeze
// drepturile.
return false ;
}
// Verificam daca numele de cont este valid.
i f ( ! $ t h i s >i s u s e r n a m e v a l i d ( $ a r r [ 2 ] ) ) {
return false ;
}
// Verificam daca numele de cont exista.
$ u s e r d a t a = $ t h i s >g e t u s e r d a t a ( $ a r r [ 2 ] ) ;
i f ( ! $user data ) {
return false ;
}
//
//
//
//
if

Verificam daca drepturile utilizatorului t, inta sunt

editabile, cand act, iunea dorita este edit perms.


Daca act, iunea este delete verificam daca utilizatorul
poate fi s, ters sau nu.
( ( $ a c t i o n == e d i t p e r m s &&
isset ( $user data [ permissions ] [ editable ] )
&& ! $ u s e r d a t a [ p e r m i s s i o n s ] [ e d i t a b l e ] )
| | ( $ a c t i o n == d e l e t e &&
i s s e t ( $ u s e r d a t a [ d e l e t a b l e ] ) &&
! $user data [ deletable ] ) ) {
$result = false ;

}
}
return $result ;
}
Acest model de drepturi este scalabil, poate fi folosit n orice context al
siteului, la cel mai mic detaliu.

46
3.1.2.3

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


Ad
augarea de utilizatori

Pentru a adauga un cont administratorul trebuie sa introduca numele utilizatorului, numele contului, adresa de email a acestuia s, i parola init, iala.

Figura 3.4: Opt, iunea de adaugare cont.

La fel ca la orice formular de autentificare, parola nu este transmisa as, a


cum este scrisa de utilizator, ci aceasta este criptata cu algoritmul SHA512 [8]. Parola este criptata mpreuna cu jetonul siteului, plus se transmite
nca un camp ascuns n care parola este criptata cu jetonul sesiunii pentru
verificare dubla. Funct, ia siteAdmin.userAddSubmit() este chemata atunci
cand utilizatorul alege sa trimita formularul la server. Aceasta funct, ie se
gases, te n fis, ierul js/admin.js:
t h i s . userAddSubmit = f u n c t i o n ( form ) {
// Ne asiguram ca numele de cont nu este prea scurt sau
// prea lung.
i f ( ! form . username . v a l u e | |
form . username . v a l u e . l e n g t h < 3 ) {

3.1. CONTURI PENTRU ADMINISTRATORI

47

a l e r t ( <?php echo $ l n g [ usernametoos h o r t ] ; ?> ) ;


return f a l s e ;
}
i f ( form . username . v a l u e . l e n g t h > 3 2) {
a l e r t ( <?php echo $ l n g [ usernametool o n g ] ; ?> ) ;
return f a l s e ;
}
form . username . v a l u e =
form . username . v a l u e . toLowerCase ( ) ;
// Verificam daca exista caractere nepermise n numele
// contului.
i f ( ! / [ az0 9 ] [ az0 9. ]+$ / .
t e s t ( form . username . v a l u e ) ) {
a l e r t ( <?php echo
$ l n g [ i n v a l i d username ] ; ?> ) ;
return f a l s e ;
}
// Verificam daca parolele introduse sunt aceleas, i.
i f ( form . p a s s 1 . v a l u e != form . p a s s 2 . v a l u e ) {
a l e r t ( <?php echo
$ l n g [ passwordsnotmatching ] ; ?> ) ;
return f a l s e ;
}
// Lungimea minima a parolei. . .
i f ( ! form . p a s s 1 . v a l u e | |
form . p a s s 1 . v a l u e . l e n g t h < 5 ) {
a l e r t ( <?php echo
$ l n g [ passwordtoos h o r t ] ; ?> ) ;
return f a l s e ;
}
// Validam adresa de email.
i f ( ! form . e m a i l . v a l u e | |
! t h i s . checkEmail ( frm . e m a i l . v a l u e ) ) {
a l e r t ( <?php echo $ l n g [ i n v a l i d e m a i l ] ; ?> ) ;
return f a l s e ;

48

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


}
// Citim jetonul de autentificare.
var tok = t h i s . parseAuthToken ( form . tok . v a l u e ) ;
i f ( ! tok ) {
return f a l s e ;
}
// Criptam parola cu jetonul siteului.
var sha512a = new jsSHA ( form . username . v a l u e +
form . p a s s 1 . v a l u e + tok [ 1 ] ) ;
form . p a s s 1 . v a l u e = sha512a . getHash ( SHA512 ,
HEX ) ;
sha512a = null ;
// Criptam parola nca o data cu jetonul sesiunii.
var sha512b = new jsSHA ( form . p a s s 1 . v a l u e ) ;
form . p a s s 2 . v a l u e = sha512b . getHMAC( tok [ 0 ] ,
ASCII ,
SHA512 ,
HEX ) ;
tok = sha512b = null ;
form . tok . v a l u e = ;
return true ;

};
Pentru mai multe detalii despre jetoanele folosite s, i despre modelul de autentificare al utilizatorilor trebuie vazuta sect, iunea 3.1.1.1.
Fis, ierul js/admin.js este JavaScript generat dinamic cu PHP. Apache
este configurat sa trimita fis, ierul admin.js prin interpretatorul PHP vezi
fis, ierul .htaccess din acelas, i director. Aceasta abordare este folosita pentru
a putea face verificarea daca utilizatorul este autentificat sau nu, deoarece
nu dorim ca utilizatorii neautentificat, i sa acceseze fis, iere sensitive din punct
de vedere al securitat, ii siteului. In plus, aceasta abordare ne permite s, i
utilizarea de mesaje traduse din lang_en.php s, i lang_ro.php.
Pe server, n admin/users.php, la adaugarea unui utilizator se fac aceleas, i
verificari pentru validarea campurilor, pentru a nu permite pacalirea aplicat, iei

3.1. CONTURI PENTRU ADMINISTRATORI

49

web. Dupa validare se executa:


// Drepturile implicite: permitem doar act, iunea view n
// paginile de administrare ale siteului.
$ d e f a u l t U s e r P e r m s = array (
admin => array (
view => true ,
r e c u r s i v e => true
)
);
// Trimitem cererea de adaugare a unui nou utilizator la
// modulul de gestionare a conturilor.
$ u s e r s ma nag er >a d d u s e r ( $ POST [ username ] ,
$ POST [ p a s s 1 ] ,
$ POST [ p a s s 2 ] ,
array ( displayName => $ POST [ displayname ] ,
e m a i l => $ POST [ e m a i l ] ) ,
$defaultUserPerms ) ;
In implementarea funct, iei add user() se verifica daca utilizatorul are
dreptul sa adauge alt, i utilizatori, se verifica daca pass1 s, i pass2 sunt valide
s, i daca numele noului cont este valid. La final, fis, ierele .key s, i .json pentru
noul cont sunt salvate n .private/users/sites/.
Operat, ia de s, tergere a conturilor consta n verificarea drepturilor necesare
pentru a face acest lucru s, i n s, tergerea propriu-zisa a fis, ierelor de pe disc.

50
3.1.2.4

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


Editarea drepturilor unui cont

Drepturile unui cont pot fi afis, ate s, i modificate atunci cand n lista de conturi
administratorul face click pe un cont:
Figura 3.5: Lista de drepturi date unui cont.

Dupa cum se poate vedea n captura de ecran de mai sus, pagina afis, eaza
ntr-un mod us, or de nt, eles sect, iunea permissions din fis, ierul JSON al contului selectat (vezi detalii despre acest fis, ier n sect, iunea 3.1). Drepturile
pentru fiecare act, iune, din fiecare sect, iune sunt listate lizibil, ntr-un limbaj
accesibil.
Gestionarul de drepturi este scriptul admin/permissions.php. Acesta
afis, eaza drepturile, permite adaugarea, modificarea s, i s, tergerea de sect, iuni s, i

3.1. CONTURI PENTRU ADMINISTRATORI

51

act, iuni permise pentru contul dorit. Pentru a citi toate drepturile unui cont
se foloses, te funct, ia $users manager->get permissions($user) din clasa
RD users manager.
Administratorul poate adauga o sect, iune noua n care sa modifice drepturile contului:
Figura 3.6: Editarea drepturilor: adaugare sect, iune.

Acest formular, precum s, i celelalte formulare, apare dinamic, fara a fi


rencarcata pagina. Acest lucru este facut posibil cu codul JavaScript din
fis, ierul js/admin.js. Se face doar manipulare DOM s, i se folosesc evenimente
de interact, ionare cu formularele.

52

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Formularul de adaugare sect, iune n drepturile unui cont are urmatoarele


campuri:
Sect, iunea din site: unde utilizatorul poate alege dintre cateva sect, iuni
predefinite sau poate sa scrie calea dorita manual. Sect, iunile predefinite
sunt:
admin,
admin/files,
admin/pages,
admin/pages/en,
admin/pages/ro,
admin/users.
Un camp adit, ional permite utilizatorului sa scrie calea fis, ierului, utilizatorul sau a paginii dorite pentru care dores, te sa modifice drepturile contului. De exemplu, utilizatorul poate sa aleaga sect, iunea
admin/pages/ro s, i adauga contact pentru a modifica drepturile paginii Contact n limba romana.
Dreptul implicit pentru orice act, iune:
Drepturile sunt mos, tenite de la sect, iunea p
arinte;
Act, iunea nu este permis
a;
Act, iunea este permis
a.
Drepturile date n aceast
a sect, iune sunt recursive sau nu.
Aceste opt, iuni transpun ntr-o interfat, a placuta opt, iunile tehnice discutate n sect, iunea 3.1 oferite de fis, ierul JSON al fiecarui cont.
In js/admin.js funct, ia siteAdmin.permsAddEditSectionSubmit() valideaza datele formularului nainte sa fie trimise la server. Practic acest
cod concateneaza sect, iunea predefinita aleasa de utilizator cu calea scrisa
n campul de tip text. In plus, codul verifica daca sunt folosite cai speci
ale precum default sau editable aceste jetoane nu pot fi folosite ca
sect, iuni.

3.1. CONTURI PENTRU ADMINISTRATORI

53

Pe server permissions.php doar preia valorile campurilor s, i construies, te


noul obiect $perms:
$perms = $u ser s ma nag er >g e t p e r m i s s i o n s ( $ u s e r ) ;
$post section =
trim ( trim ( strtolower ( $ POST [ s e c t i o n ] ) ) , / ) ;
$perms [ $ p o s t s e c t i o n ] = array ( ) ;
i f ( $ POST [ d e f a u l t R i g h t ] == a l l o w ) {
$perms [ $ p o s t s e c t i o n ] [ d e f a u l t ] = true ;
} e l s e i f ( $ POST [ d e f a u l t R i g h t ] == deny ) {
$perms [ $ p o s t s e c t i o n ] [ d e f a u l t ] = f a l s e ;
}
i f ( i s s e t ( $ POST [ r e c u r s i v e ] ) &&
$ POST [ r e c u r s i v e ] == y ) {
$perms [ $ p o s t s e c t i o n ] [ r e c u r s i v e ] = true ;
}
// Actualizam drepturile utilizatorului.
$ u s e r s ma nag er >s e t p e r m i s s i o n s ( $user , $perms ) ;
Modulul de gestionare conturi este responsabil cu serializarea obiectului
$perms n format JSON cu funct, ia json encode() s, i cu salvarea acestuia
pe disc. Ambii pas, i sunt triviali, nefiind necesara exemplificarea acestora cu
cod.

54

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Adaugarea unei act, iuni funct, ioneaza foarte similar cu cele prezentate mai
sus. Utilizatorul alege sect, iunea s, i act, iunea dorita, pentru ca mai apoi sa
bifeze daca aceasta este permisa sau nu.
Figura 3.7: Editarea drepturilor: adaugare act, iune.

Pentru fiecare sect, iune predefinita s, i cunoscuta de modulul de administrare campul act, iune ofera opt, iuni cunoscute, specifice sect, iunii n cauza.

De exemplu pentru admin/users exista act, iunea edit perms, iar la admin/
files exista upload. Opt, ional, daca utilizatorul dores, te, acesta poate sa
scrie orice alta act, iune ntr-un camp text.
Codul JavaScript din js/admin.js, cat s, i codul din admin/permissions.
php valideaza valorile campurilor. Nu este permisa adaugarea de act, iuni cu

3.1. CONTURI PENTRU ADMINISTRATORI

55

nume speciale, precum default sau recursive . Salvarea pe disc se face

tot cu funct, ia $users manager->set permissions().


3.1.2.5

Securitatea sistemului de autentificare

Sistemul este susceptibil la atacuri de tip man in the middle, n care un


raufacator spioneaza conexiunea clientului sau a serverului, alterand sau
furand datele transmise de ambele part, i. Aceasta situat, ie poate fi evitata
us, or prin instalarea unui certificat digital pe server, n vederea folosirii unei
conexiuni criptate cu protocolul TLS.
Dincolo de utilizarea protocolului TLS securitatea siteului depinde s, i de
securitatea serverului s, i a softului folosit, ncepand de la distribut, ia Linux,
kernel, Apache, PHP s, i multe alte aplicat, ii.
Un alt aspect care trebuie luat n vedere este configurat, ia serverului n
ret, eaua unde este instalat. De obicei, serverele sunt mult mai susceptibile
atacurilor care vin din ret, eaua locala.
Nu n ultimul rand nu trebuie uitat aspectul uman: administratorii siteului au responsabilitatea de a t, ine parolele n sigurant, a, de a folosi parole
puternice de lungime suficienta, cu o variat, ie mare de caractere.
Codul prezentat mai sus nu include anumite verificari adit, ionale, pentru
a fi us, or de citit. Pe langa verificarile de securitate, orice act, iune de autentificare, de ies, ire, de adaugare/modificare/s, terge cont este salvata ntr-un
istoric care poate fi consultat ulterior. Operat, iile efectuate de utilizatori sunt
nregistrate n orice moment.

56

3.1.3

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Editare profil

Fiecare administrator poate sa s, i modifice profilul contului:


Figura 3.8: Editare de profil utilizator.

Dupa cum se poate vedea n captura de ecran de mai sus, se poate modifica numele utilizatorului s, i adresa de email. De asemenea, se poate schimba
parola de autentificare a contului.
Formularul prezentat se gases, te n scriptul admin/profile.php. Codul
JavaScript este dat de fis, ierul js/admin.js.
La modificarea profilului se foloses, te funct, ia JavaScript siteAdmin.
userProfileSubmit(). Pe server se foloses, te funct, ia update profile() din
clasa RD users manager vezi sect, iunea 3.1.
Pentru modificarea parolei se face criptare cu funct, ia de faramit, are SHA512 as, a cum am prezentat n sect, iunea 3.1.1.1. Funct, ia JavaScript chemata
este siteAdmin.changePassword(). Pe server se executa set user key()
din RD users manager.

3.2. GESTIONAREA FIS, IERELOR DE PE SERVER

3.2

57

Gestionarea fis, ierelor de pe server

Administratorii siteului pot sa ncarce fis, iere pe server, sa le s, tearga, sa creeze


directoare, sa execute operat, ii de redenumire, de curat, are pagini HTML s, i
de editare pagini.
Figura 3.9: Gestionarul de fis, iere.

Pagina din captura de ecran de mai sus este generata de scriptul admin/
files.php. Interactivitatea paginii este data de codul JavaScript din fis, ierul
js/admin.js.
Dupa cum se vede din captura de ecran de mai sus, files.php listeaza
fis, ierele s, i directoarele din directorul files/OM/, din radacina siteului. Utilizatorul poate naviga prin ierarhia de directoare de pe server. Cu ajutorul
funct, iilor JavaScript fis, ierele/directoarele pot fi selectate, ca mai apoi sa fie
aplicate orice fel de operat, ii.

58

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Incarcarea de fis, iere noi pe server se face n directorul curent. Utilizatorul


poate adauga oricate fis, iere dores, te simultan, ntr-un singur pas. Pentru a
adauga un nou fis, ier se face click pe semnul plus + moment n care se

executa funct, ia JavaScript siteAdmin.fileAdd().


this . fileAdd = function ( )
{
// Formularul de ncarcare fis, iere.
var frm = document . getElementById ( f a d d f ) ;
// Primul camp de tip fis, ier.
var d e f = document . getElementById ( a d d f i l e i n p u t ) ;
i f ( ! frm | | ! d e f )
return f a l s e ;
// Adaugam nca un paragraf cu un camp de tip fis, ier.
var p = document . c r e a t e E l e m e n t ( p ) ,
i np = document . c r e a t e E l e m e n t ( i n p u t ) ,
a = document . c r e a t e E l e m e n t ( a ) ;
i np . name = d e f . name ;
i np . type = d e f . type ;
// Opt, iunea de s, tergere a campului de tip fis, ier.
a . h r e f = # ;
a . t i t l e = <?php echo $ l n g [ adminj s ] [ 2 ] ; ?> ;
a . addEventListener ( c l i c k , function () {
t h i s . parentNode . parentNode .
removeChild ( t h i s . parentNode ) ;
} , false ) ;
a . appendChild ( document . createTextNode ( X ) ) ;
p . appendChild ( a ) ;
p . appendChild ( i np ) ;
frm . i n s e r t B e f o r e ( p , d e f . parentNode . n e x t S i b l i n g ) ;
return f a l s e ;
};
Dupa trimiterea fis, ierelor pe server, codul PHP preia lista de fis, iere s, i le
pune n directorul curent. In configurat, ia modulului exista o lista de extensii

3.2. GESTIONAREA FIS, IERELOR DE PE SERVER

59

de fis, iere care nu sunt permise. De exemplu, daca administratorul ncearca sa


ncarce un fis, ier de tip PHP sau de tip executabil (binar), fis, ierul este respins.
Aceasta masura a fost implementata din motive de securitate. Daca parola
administratorului este compromisa, un atacator are acces limitat la server n
acest mod. El poate doar sa strice siteul folosind paginile de administrare,
dar nu permitem sa execute cod arbitrar pe server.
Operat, ia de s, tergere a fis, ierelor este executata numai pe fis, iere, nu s, i
pe directoare, pentru a preveni s, tergerea de directoare n masa sau posibile
pierderi nedorite de date.
Operat, ia de redenumire foloses, te JavaScript pentru a cere utilizatorului
noul nume al fiecarui fis, ier selectat. Pe server este folosita funct, ia PHP
rename(). Noile nume nu au voie sa aiba extensii nepermise.
Pentru adaugarea unui director utilizatorul este ntrebat cu funct, ia
prompt() din DOM, n JavaScript, ce nume dores, te. Pe server se foloses, te
funct, ia mkdir() pentru a crea directorul n files/.
Restul de operat, ii, curat, area de pagini HTML s, i editarea acestora, sunt
operat, ii modulare. Practic exista un vector de configurare a modulului
files.php care permite adaugarea de noi operat, ii ce pot fi aplicate la fis, iere.
Implementarea fiecarei operat, ii se gases, te ntr-un alt fis, ier PHP, ntr-o funct, ie
bine definita. Configurat, ia arata astfel:
$ f i l e m o d u l e s = array (
// Curat, area de fis, iere HTML se face folosindu-se modulul ReTidy.
// Vezi sect, iunea 3.4.1 pentru mai multe detalii.
r e t i d y => array (
t i t l e => $ l n g [ moduler e t i d y ] ,
j s f u n c => f i l e R e t i d y ,
f i l e r e q u i r e d => true ,
c a l l b a c k f u n c => f i l e R e t i d y ,
c a l l b a c k i n c l u d e => f i l e s r e t i d y . php ,
a l l o w i n i f r a m e => true ,
),
// Editarea paginilor HTML se face cu editorul Awebitor.
// Vezi sect, iunea 3.4 pentru mai multe detalii.
e d i t h t m l => array (
t i t l e => $ l n g [ modulee d i t h t m l ] ,
j s f u n c => fileEditHTML ,
f i l e r e q u i r e d => true ,
c a l l b a c k f u n c => fileEditHTML ,
c a l l b a c k i n c l u d e => f i l e s e d i t h t m l . php ,

60

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


a l l o w i n i f r a m e => f a l s e ,
)

);
Fiecare operat, ie noua are un ID. Cele doua operat, ii definite mai sus au
ID-urile retidy s, i edithtml. Proprietat, ile de configurare sunt:
title defines, te titlul afis, at n meniul Operat, ii. In acest meniu

utilizatorul poate executa operat, ia definita.


jsfunc defines, te funct, ia JavaScript chemata atunci cand utilizatorul
face click pe aceasta operat, ie n meniul paginii cu fis, iere.
file required este o proprietate booleana care indica daca operat, ia
se poate executa numai pe fis, iere sau nu.
callback include defines, te fis, ierul PHP care va fi inclus cand se
executa operat, ia pe fis, iere.
callback func defines, te numele funct, iei PHP care se executa dupa
includerea fis, ierului dat de callback include.
allow in iframe este o proprietate booleana care indica daca operat, ia
poate fi executata atunci cand gestionarul de fis, iere este afis, at n
<iframe>-uri.
Editorul de pagini permite adaugarea de imagini n articole. Pentru
adaugarea de imagini utilizatorul foloses, te acest gestionar de fis, iere pentru a
naviga pe server, pentru a selecta imaginea dorita. In acest mod de execut, ie
unele operat, ii nu se potrivesc de exemplu editarea de pagini. Pentru detalii
vezi sect, iunea 3.4.
Orice act, iune de vizualizare sau de modificare a unui director sau fis, ier
este trecuta prin verificarea drepturilor necesare ale utilizatorului. Administratorul poate avea, de exemplu, dreptul de a ncarca s, i edita fis, iere numai
ntr-un anumit set de directoare a se vedea sect, iunea 3.1.2.4.

3.3. GESTIONAREA PAGINILOR

3.3

61

Gestionarea paginilor

Paginile siteului uav.ro pot fi adaugate, modificate s, i s, terse foarte us, or din
gestionarul de pagini:
Figura 3.10: Gestionarul de pagini.

Dupa cum se poate vedea din captura de ecran de mai sus, toate paginile
din site sunt listate ierarhic. Administratorul poate sa vada din prima secunda harta siteului. El poate alege sa editeze orice pagina dores, te n orice
moment. Saget, ile din stanga permit utilizatorului sa ordoneze paginile n
meniurile siteului. Meniul Opt, iuni din dreapta fiecarei pagini afis, eaza:

62

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


Viziteaz
a pagina este o legatura directa la pagina. Administratorul poate face click pe aceasta opt, iune pentru a vedea cum arata
pagina la utilizatori.
Adaug
a o pagin
a aici permite adaugarea unei sub-pagini.
Set
ari pagin
a permite administratorului sa modifice titlul s, i calea
paginii.
S, terge permite s, tergerea paginii. Aceasta opt, iune apare doar daca
pagina nu are sub-pagini.

3.3.1

Structura siteului n format XML

Codul PHP care afis, eaza s, i modifica structura siteului este n fis, ierul admin/
pages.php. Acesta cites, te fis, ierul xml/site_en.xml sau xml/site_ro.xml
n funct, ie de limba aleasa de administrator. Funct, ia recursiva listPages()
este chemata pentru a afis, a ierarhia paginilor.
Fis, ierele xml/site_en.xml s, i xml/site_ro.xml ment, in lista de pagini
din site. Acest format XML propriu arata astfel:
<?xml version= 1 . 0 e n c o d i n g= u t f 8 ?>
<nav xmlns= h t t p : //www. r o b o d e s i g n . r o / ns /nav 1.1 >
<menus x m l : i d= r o o t i n c l u d e=0 l i n k s=1>
<menu x m l : i d= welcome path= i n d e x i n c l u d e=1
h i d e=1>
< t i t l e>Acasa</ t i t l e>
< f i l e>pages / welcome . php</ f i l e>
<c s s media= s c r e e n , p r o j e c t i o n >
c s s / welcome . c s s
</ c s s>
</menu>
<menu x m l : i d= sitemap path= sitemap i n c l u d e=1
h i d e=1>
< t i t l e>Harta s i t e</ t i t l e>
< f i l e>pages / sitemap . php</ f i l e>
<c s s media= s c r e e n , p r o j e c t i o n >
c s s / sitemap . c s s
</ c s s>
</menu>
<menu x m l : i d= u n i v e r s i t a t e path= u n i v e r s i t a t e
i n c l u d e=0 sub= subu n i v e r s i t a t e >

3.3. GESTIONAREA PAGINILOR

63

< t i t l e>U n i v e r s i t a t e</ t i t l e>


< f i l e>pages / r o u n i v e r s i t a t e . html</ f i l e>
</menu>
<menu x m l : i d= c o n t a c t path= c o n t a c t i n c l u d e=1
h i d e=1>
< t i t l e>Contact</ t i t l e>
< f i l e>pages / c o n t a c t . php</ f i l e>
<c s s media= s c r e e n , p r o j e c t i o n >
css / contact . css
</ c s s>
</menu>
<! . . . >
</menus>
<menus x m l : i d= subu n i v e r s i t a t e i n c l u d e=0
l i n k s=1>
<menu x m l : i d= u n i v e r s i t a t e c o n d u c e r e
path= u n i v e r s i t a t e / c o n d u c e r e
i n c l u d e=0>
< t i t l e>Conducerea U n i v e r s i t a t i i</ t i t l e>
< f i l e>
pages / r o u n i v e r s i t a t e c o n d u c e r e . html
</ f i l e>
</menu>
<menu x m l : i d= u n i v e r s i t a t e p r e z e n t a r e
path= u n i v e r s i t a t e / p r e z e n t a r e
i n c l u d e=0>
< t i t l e>P r e z e n t a r e a U n i v e r s i t a t i i</ t i t l e>
< f i l e>
pages / r o u n i v e r s i t a t e p r e z e n t a r e . html
</ f i l e>
</menu>
<! . . . >
</menus>
<! . . . >
</ nav>
In codul sursa de mai sus pot fi vazute trei taguri importante:
<nav> este nodul radacina al documentului fara a avea alt rol. In
acest tag pot sa apara doar taguri <menus>.

64

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


<menus> grupeaza mpreuna opt, iunile dintr-un meniu. Fiecare opt, iune
este data de un element <menu>.
<menu> reprezinta o opt, iune dintr-un meniu, o pagina.
Pentru fiecare element <menu> se pot folosi urmatoarele atribute:
xml:id este jetonul unic de identificare a paginii. Acest jeton trebuie
sa fie unic n tot fis, ierul XML.
sub este un atribut opt, ional care cont, ine ID-ul unei grupe de meniuri
<menus>. In acest mod se construies, te structura ierarhica a siteului: meniuri cu submeniuri. Orice meniu poate avea un atribut
sub care cheama/include sub-pagini din alte grupe de meniuri

(<menus>).
path defines, te calea completa a paginii.
include este un atribut boolean. Daca valoarea este 1 atunci fis, ierul
paginii dat de elementul <file> este inclus s, i executat de PHP.
Daca valoarea atributului este 0, atunci fis, ierul indicat de <file>
este citit ca un document HTML s, i trimis exact cum este la navigatorul web, fara a fi interpretat.
link defines, te tipul de legatura pentru pagina definita. Trei valori
sunt posibile:
0 pentru a folosi calea data de <file> sau de <link> as, a cum
este ea, fara modificari.
1 pentru a genera o adresa permanenta: practic legatura

paginii va fi valoarea atributului path. In unele cazuri, n


unele configurat, ii ale siteului calea are ca prefix limba aleasa
de utilizator. Acest tip de legaturi sunt folosite pe siteul
uav.ro.
2 pentru a folosi o legatura directa catre index.php. Acest
tip de legaturi sunt folosite atunci cand serverul web Apache
nu poate fi configurat sa accepte rescrierea adreselor accesate
de utilizatori. Un exemplu de legatura de acest tip: index.
php?path=/ro/universitate/prezentare.
hide este un atribut, cu valoare booleana 0 sau 1, care permite ascunderea paginii din lista de meniuri afis, ata pe site.

3.3. GESTIONAREA PAGINILOR

65

subpath este un atribut, cu valoare booleana 0 sau 1, care spune ca


modulul indicat de <file> pentru pagina curenta se va ocupa cu
procesarea caii, a adresei accesate de utilizator. Practic n acest
moment se opres, te cautarea paginii n structura XML a siteului. Se
considera ca pagina gasita este cea dorita, chiar daca adresa accesata are mai multe part, i componente. De exemplu, daca utilizatorul intra pe /universitate/noutati/articol-1, blogul Noutat, i
preia calea s, i cauta sa afis, eze articolul cu jetonul de identificare
articol-1.
Toate elementele <menus> trebuie sa aiba atributul xml:id. Acestea pot
sa aiba s, i atributele links s, i include. Daca un element <menu> nu are
atributul include, valoarea implicita este preluata de la elementul parinte
<menus> la fel s, i cu atributul link.
Alte taguri care pot sa apara n <menu>:
<title> titlul paginii.
<file> fis, ierul care se dores, te a fi afis, at sau interpretat de PHP.
<link> meniurile pot avea legaturi catre pagini externe. In acest caz
se foloses, te tagul <link> pentru a indica adresa.
<css> permite asocierea unui stil CSS cu pagina data. Stilul este
adaugat n antetul paginii, n <head>. Opt, ional, se poate folosi
atributul media pentru a indica pe care media se aplica un anume
stil.
In admin/pages.php fis, ierul XML este citit astfel
$doc = new DOMDocument( 1 . 0 , u t f 8 ) ;
$doc>p r e s e r v e W h i t e S p a c e = f a l s e ;
$doc>formatOutput = true ;
$doc>l o a d ( xml/ s i t e $ l a n g . xml ) ;
Chemarea la funct, ia listPages() pornes, te de la elementul <menus
xml:id="root">. Fiecare pagina data de elementele <menu> este afis, ata.
Pentru acele pagini cu atributul sub, funct, ia este re-chemata pentru a fi
listate s, i sub-paginile.
f u n c t i o n l i s t P a g e s ( $menu root )
{
g l o b a l $doc , $ u s e r s m a n a g e r ;

66

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


$ r o o t = $doc>getElementById ( $menu root ) ;
echo \n<ul >\n ;
$ l i n k s = $ r o o t >g e t A t t r i b u t e ( l i n k s ) ;
$ i n c l u d e = $ r o o t >g e t A t t r i b u t e ( i n c l u d e ) ;
$subs = $ r o o t >c h i l d N o d e s >l e n g t h ;
foreach ( $ r o o t >c h i l d N o d e s as $menu )
{
$ h i d e = $menu>g e t A t t r i b u t e ( h i d e ) ;
$path = array ( ) ;
$path [ s t r i n g ] = $menu>g e t A t t r i b u t e ( path ) ;
$path [ a r r a y ] = explode ( / , $path [ s t r i n g ] ) ;
$ i d = $menu>g e t A t t r i b u t e ( xml : i d ) ;
$submenu = $menu>g e t A t t r i b u t e ( sub ) ;
// . . .
i f ( $submenu )
l i s t P a g e s ( $submenu ) ;
}
echo \n</ul >\n ;

}
Drepturile administratorului de a adauga pagini, de a le s, terge sau modifica sunt verificate pentru fiecare pagina listata. Se face chemare la:
$u ser s ma nag er >have perm ( admin/ pages / $ l n g / $ c a l e ,
$actiune ) ;
. . . unde $lng este limba curenta, $cale este calea paginii din lista, iar
$actiune este act, iunea dorita de exemplu add, edit sau delete.

3.3.2

Configurat, ia modulului

Configurat, ia modulului de administrare a paginilor arata astfel:


listPages() pentru fiecare element
// Lista de module cunoscute. In
// <menu include="1"> se verifica daca modulul indicat de <file>
// apare n vectorul de mai jos.
$GLOBALS[ known modules ] = array (

3.3. GESTIONAREA PAGINILOR

67

// Prima pagina a siteului. Vezi sect, iunea 3.8.


pages / welcome . php => array (
// Nu permitem s, tergerea paginii.
d e l e t a b l e => f a l s e ,
// Pagina este editabila ca un articol simplu.
e d i t a b l e => s i m p l e ,
// Fis, ierul HTML care poate fi editat.
e d i t F i l e => $ p a g e s p a t h . / .
$GLOBALS[ now ] [ l a n g u a g e ] .
w e l c o m e p a r t n e r s . html ,
add module => s i m p l e ,
// Nu permitem schimbarea caii pentru aceasta pagina.
a l l o w S e t P a t h => f a l s e ,
),
// Pagina Contact. Vezi sect, iunea 3.9.
pages / c o n t a c t . php => array (
d e l e t a b l e => f a l s e ,
// Aceasta pagina este editabila, dar are propriul modul de
// administrare.
e d i t a b l e => l i n k ,
// Indicam cu o legatura care este adresa editorului pentru
// aceasta pagina.
e d i t L i n k => c o n t a c t . php? l= .
$GLOBALS[ now ] [ l a n g u a g e ] ,
// Permitem schimbarea caii.
a l l o w S e t P a t h => true ,
),
// Paginile de tip blog. Vezi sect, iunea 3.5.
pages / b l o g . php => array (
// Pot fi s, terse.
d e l e t a b l e => true ,
// Cand se executa cererea de s, tergere includem fis, ierul PHP indicat
// aici. . .

68

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


d e l e t e I n c l u d e => pagesb l o g . php ,
// . . . s, i executam funct, ia . . .
d e l e t e F u n c t i o n => adminBlogDeletePage ,
// Propriul modul de administrare a blogului.
// Cand utilizatorul face click pe aceasta pagina se face redirect, ionare
// la blog. php unde apare lista de articole din blog.
e d i t a b l e => l i n k ,
e d i t L i n k => b l o g . php? l= .
$GLOBALS[ now ] [ l a n g u a g e ] .
&amp ; c a t= ,
// Aici indicam daca dorim sa avem calea paginii transmisa la scriptul
// dat de editLink. Astfel blogurile pot sa aiba articole diferite
// pentru fiecare sect, iune din site.
editParam => true ,
// Jeton care indica daca se pot adauga alte module de acelas, i tip.
// Vezi $GLOBALS[add modules].
add module => b l o g ,
// Permitem schimbarea caii pentru bloguri, dar trebuie executata
// funct, ia data de setPageFunction din fis, ierul indicat
// de setPageInclude.
a l l o w S e t P a t h => true ,
s e t P a g e F u n c t i o n => adminBlogSetPage ,
s e t P a g e I n c l u d e => pagesb l o g . php ,
),
// Paginile de tip galerie de imagini. Vezi sect, iunea 3.6.
pages / g a l l e r y . php => array (
// Aproape tot este identic cu modulul blog.
d e l e t a b l e => true ,
d e l e t e I n c l u d e => pagesg a l l e r y . php ,
d e l e t e F u n c t i o n => a d m i n G a l l e r y D e l e t e P a g e ,
e d i t a b l e => l i n k ,
e d i t L i n k => g a l l e r y . php? l= .
$GLOBALS[ now ] [ l a n g u a g e ] .
&amp ; c a t= ,
editParam => true ,

3.3. GESTIONAREA PAGINILOR

69

add module => g a l l e r y ,


a l l o w S e t P a t h => true ,
s e t P a g e F u n c t i o n => adminGallerySetPage ,
s e t P a g e I n c l u d e => pagesg a l l e r y . php ,
),
// Paginile cu fis, iere de descarcat. Vezi sect, iunea 3.7.
pages / downloads . php => array (
d e l e t a b l e => true ,
d e l e t e I n c l u d e => pagesdownloads . php ,
d e l e t e F u n c t i o n => adminDownloadsDeletePage ,
e d i t a b l e => l i n k ,
e d i t L i n k => downloads . php? l= .
$GLOBALS[ now ] [ l a n g u a g e ] .
&amp ; c a t= ,
editParam => true ,
add module => downloads ,
a l l o w S e t P a t h => true ,
s e t P a g e F u n c t i o n => adminDownloadsSetPage ,
s e t P a g e I n c l u d e => pagesdownloads . php ,
),
);
// Daca un element <menu include="1"> are un fis, ier necunoscut
// folosim setarile de mai jos.
$GLOBALS[ unknown modules ] = array (
d e l e t a b l e => f a l s e ,
e d i t a b l e => f a l s e ,
a l l o w S e t P a t h => f a l s e ,
);
// La opt, iunea de adaugare pagini utilizatorul poate selecta tipul de
// pagina. Lista de mai jos indica tipurile de pagini care pot fi adaugate.
$GLOBALS[ add modules ] = array (
0 => s i m p l e ,
s i m p l e => true ,
b l o g => array (
// Fis, ierul care apare n <file> cand pagina de tip blog este adaugata.
f i l e => $ p a g e s p a t h . / b l o g . php ,
// Funct, ia chemata cand se adauga o pagina de acest tip.
c a l l F u n c => adminBlogAddPage ,

70

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


// Funct, ia este luata din fis, ierul. . .
c a l l F u n c F i l e => pagesb l o g . php ,
// Indicam daca acest modul dores, te sa preia controlul caii.
// De exemplu: /pagina1/ subpagina2/ blog3/ articol .
// Motorul siteului nu va ncerca sa caute articol n structura XML,
// ci va da control modulului executat.
subpath => true ,
),
g a l l e r y => array (
// Paginile de tip galerie de imagini.
f i l e => $ p a g e s p a t h . / g a l l e r y . php ,
c a l l F u n c => adminGalleryAddPage ,
c a l l F u n c F i l e => pagesg a l l e r y . php ,
subpath => true ,
),
downloads => array (
// Paginile cu fis, iere de descarcat.
f i l e => $ p a g e s p a t h . / downloads . php ,
c a l l F u n c => adminDownloadsAddPage ,
c a l l F u n c F i l e => pagesdownloads . php ,
// Nu avem directoare virtuale n acest tip de pagini.

subpath => f a l s e ,
),
l i n k => true ,
t e m p l a t e => true ,
);

Dupa cum se poate vedea din codul de mai sus s, i din comentariile explicative, lista paginilor este generata dinamic n funct, ie de mult, i factori. Codul
este extensibil, fiind permisa implementarea unei game largi de module, de
funct, ionalitat, i noi n site.
Adancimea maxima de pagini n ierarhie este data de $max depth. Aceasta
valoare este aleasa n funct, ie de designul siteului. Unele interfet, e de site permit o ierarhie mai adanca, unele mai put, in. Pentru siteul uav.ro folosim
adancimea maxima de trei pagini, conform limitelor impuse de design.

3.3. GESTIONAREA PAGINILOR

3.3.3

71

Ad
augarea de pagini

Administratorul cu drepturi suficiente are posibilitatea sa adauge pagini noi


n una sau mai multe sect, iuni ale siteului. Formularul de adaugare arata
astfel:
Figura 3.11: Adaugare pagina noua.

Campurile din formular sunt:


Titlul este titlul paginii.
Calea este calea paginii. Acest camp este opt, ional. Valoarea trebuie
sa fie un jeton din caractere alfanumerice. Daca nu se introduce

72

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


nici o valoare, atunci codul PHP genereaza calea paginii pe baza
titlului.
Modul/tipul de pagin
a permite alegerea tipului de pagina adaugata.
Pagin
a ascuns
a permite ascunderea paginii din lista de meniuri.
Pagina poate fi accesata daca adresa ei este s, tiuta.

In navigatorul web se folosesc funct, ii JavaScript din fis, ierul js/admin.js:


siteAdmin.pageAdd() s, i pageAddSubmit(). Acestea afis, eaza formularul s, i
l valideaza nainte de a fi trimis la server.
Pe server, n funct, ie de opt, iunile alese de utilizator, se construies, te un element <menu> care este adaugat n radacina dorita, ntr-un element <menus>.
Structura DOM actualizata este salvata napoi n fis, ierul XML.
Not, iunea de module pentru site este implementata cu meniuri, pagini care
includ fis, iere PHP. Atunci cand utilizatorul alege un modul defapt el alege
fis, ierul PHP care urmeaza sa fie inclus. Modulele urmatoare pot fi alese:
Un singur articol se refera la o singura pagina HTML care poate
fi editata de administrator, fara PHP. In XML aceasta este reprezentata cu un <menu> care are atributul include="0" s, i un
<file> care are calea catre un fis, ier HTML de pe disc, n directorul pages/.
Blog se refera la scriptul pages/blog.php. Acest script este pus n
tagul <file>, iar <menu> primes, te atributul include="1". Pentru
detalii despre modulul Blog vezi sect, iunea 3.5.
Galerie de imagini se refera la scriptul pages/gallery.php. Acesta
este adaugat la fel ca blogul. Pentru detalii despre acest tip de pagini vezi sect, iunea 3.6.
Fis, iere de desc
arcat se refera la scriptul pages/downloads.php.
Acest tip de pagini permit utilizatorilor sa descarce fis, iere dintr-un
director asociat. Pentru detalii vezi sect, iunea 3.7.
Leg
atur
a spre o pagin
a extern
a adauga doar un element <menu>
cu un <link>.
S, ablon: nume-s, ablon adauga un articol, o pagina HTML, dar preia
un cont, inut predefinit. Lista de s, abloane este preluata din directorul files/page_templates/. Fiecare fis, ier HTML din director
este afis, at n aceasta lista. Cand utilizatorul alege un s, ablon acel
fis, ier este preluat n noua pagina.

3.3. GESTIONAREA PAGINILOR

73

Jetonul unic de identificare al paginii s, i calea paginii, daca nu este specificata, sunt ambele generate pe baza titlului. In acest scop folosim funct, ia
AdminGenerateId() din admin/include.php:
f u n c t i o n AdminGenerateId ( $ t x t )
{
$id = mb strtolower ( $txt ) ;
// Transliterat, ia caracterelor, pentru a elimina diacriticele.
s e t l o c a l e (LC ALL , en ) ;
$ i d = @iconv ( u t f 8 , a s c i i //TRANSLIT , $ i d ) ;
s e t l o c a l e (LC ALL , $GLOBALS[ now ] [ l a n g u a g e ] ) ;
$id
$id
$id
$id
$id

=
=
=
=
=

preg replace ( / [ az0 9\]/ , , $ i d ) ;


trim ( $id , ) ;
preg replace ( /\+/ , , $ i d ) ;
preg replace ( /\d+/ , , $ i d ) ;
trim ( $id , ) ;

// Daca nu raman suficiente caractere, folosim data curenta.


i f ( ! isset ( $id {1}))
$ i d = i d . date ( YmdHi s ) ;
return $id ;
}
Dupa ce calea s, i ID-ul paginii sunt generate, se creaza un nou element
<menu> n care se introduc atributele s, i restul de elemente n funct, ie de
alegerile utilizatorului. Pentru articole simple se creaza un fis, ier HTML nou
n directorul pages/. Pentru celelalte module se fac chemari la funct, iile lor
specifice, as, a cum s-a putut vedea n sect, iunea 3.3.2.
La final, structura XML a siteului este salvata napoi pe disc n fis, ierul
din directorul xml/.

74

3.3.4

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Set
ari pagin
a

Setarile paginii pot fi modificate us, or cu formularul prezentat mai jos:


Figura 3.12: Setari pagina.

Administratorul poate modifica titlul s, i calea paginii. Daca pagina are


sub-pagini atunci calea nu poate fi modificata. Pagina poate fi ascunsa sau
afis, ata n lista de meniuri.
Toate modificarile n structura XML sunt facute cu operat, ii DOM n
scriptul admin/pages.php. De asemenea, pentru blog, galerie s, i alte tipuri
de pagini se fac chemari la funct, iile lor specifice de actualizare titlu s, i cale.

3.4. EDITORUL DE PAGINI AWEBITOR

3.4

75

Editorul de pagini Awebitor

Awebitor (Advanced Web Editor ) este numele dat editorului de HTML realizat pentru uav.ro. Acesta permite editarea paginilor fara a fi necesare
cunos, tint, e HTML:
Figura 3.13: Awebitor: editorul de pagini.

Bara de unelte a editorului ofera urmatoarele opt, iuni:


Inapoi s, i nainte n timp (undo s, i redo).
Vizualizare cod sursa HTML.
Adaugare tabel.
Adaugare legatura catre o adresa externa.
Eliminare legatura se s, terge orice legatura n textul selectat.

76

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


Adaugare imagine de pe server.
Linie orizontala.
Eliminare formatare text textul selectat poate fi curat, at de stil, de
culori, etc.
Alegere tip element: paragraf, titlu 1, titlu 2 s, i altele.
Alegere font s, i marime text.
Text aldin (bold ), italic s, i taiat.
Indice s, i exponent.
Culoare text s, i fundal.
Aliniere la stanga, dreapta s, i justify.
Liste ordonate cu numerotare.
Liste neordonate cu bullets.

Implementarea editorului se gases, te n fis, ierul js/awebitor.js. Modul


de funct, ionare:
1. Pagina cu editorul se ncarca. Formularul cont, ine un <textarea> n
care este pus tot cont, inutul HTML al paginii alese de administrator.
2. Se executa codul JavaScript al editorului Awebitor.
3. Elementul <textarea> este ascuns pentru a fi schimbat cu interfat, a
editorului.
4. Interfat, a editorului din fis, ierul admin/awebitor-interface.php este
ncarcata folosindu-se un XMLHttpRequest [2]. Scriptul PHP genereaza
codul XHTML care este adaugat n DOM-ul paginii unde ruleaza Awebitor.
5. Se adauga un element <link> cu atributul rel="stylesheet" s, i calea catre stilul css/awebitor.css. Acest stil CSS este folosit pentru
interfat, a editorului.
6. Se adauga un element <iframe> cu calea catre awebitor_iframe.php.
Acest script PHP genereaza o pagina goala cu put, in cod JavaScript
care poate transmite mesaje documentului parinte, catre pagina care
include acest <iframe>.

3.4. EDITORUL DE PAGINI AWEBITOR

77

7. La ncarcarea <iframe>-ului se introduce codul HTML din <textarea>


n <iframe>.
8. Se activeaza document.designMode="on" n <iframe>. Din acest moment utilizatorul poate edita pagina dorita. Incarcarea s-a ncheiat.
Pentru editarea unei pagini simple, a unui articol, se foloses, te scriptul admin/edit.php care genereaza formularul cu elementul <textarea>.
La ncarcarea acestei pagini n js/admin.js exista funct, ia siteAdmin.
awebitortaLoaded() care se executa. Aceasta funct, ie pornes, te init, ializarea
editorului.
In funct, ia awebitor.init() se fac verificari daca navigatorul web are
suport pentru tehnologiile web necesare, de exemplu pentru designMode [3].
In final funct, ia awebitor.loadInterface() este chemata. Aceasta funct, ie
init, ializeaza un obiect XMLHttpRequest pentru a ncarca interfat, a editorului. La ncarcare este chemata funct, ia awebitor.interfaceReady(). Daca
fis, ierul XHTML s-a ncarcat cu succes, atunci se face chemare la awebitor.
init elems() pentru a face adaugarea propriu-zisa a tuturor elementelor din
fis, ierul luat n pagina curenta.
Funct, ia awebitor.init frame() init, ializeaza <iframe>-ul s, i face ca toate
butoanele din interfat, a sa funct, ioneze sunt adaugate evenimentele dorite.
Pentru integrarea cu siteul de administrare uav.ro exista funct, ii specifice
introduse n Awebitor. Acestea se gasesc n awebitor.customFunctions:
preInitElems funct, iile din acest obiect se executa dupa ce se ncarca
interfat, a editorului, nainte sa fie elementele ei adaugate n pagina.
Aici avem o funct, ie pentru opt, iunea de adaugare imagini.
postInitIframe funct, iile din acest obiect se executa dupa ce este
init, ializat editorul cu tot cu <iframe>. Aici avem trei funct, ii:
pentru opt, iunea de alegere culori, pentru selectorul de imagini de
pe server, s, i nca una pentru butoanele de salvare document s, i
anulare editare.
Majoritatea opt, iunilor din editor folosesc funct, ia DOM document.
execCommand(). De exemplu, pentru a face textul selectat sa fie aldin, se
executa document.execCommand("bold").

78

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


Adaugarea de imagini permite selectarea fis, ierului dorit de pe server:
Figura 3.14: Adaugarea de imagini n pagini.

Dupa cum se poate vedea din captura de ecran de mai sus, utilizatorul are
un formular de adaugare imagine unde se poate introduce adresa imaginii,
titlul care o descrie s, i, opt, ional, o legatura spre o pagina externa. Campul
Aliniere permite administratorului sa aleaga unde sa fie pozit, ionata poza: la
stanga sau la dreapta.
Pentru a face mai us, oara adaugarea de imagini modulul de gestionare a
fis, ierelor (vezi sect, iunea 3.2) este inclus n formular utilizatorul poate sa
aleaga fis, ierul dorit direct de pe server, sau poate sa ncarce o poza noua
n directorul dorit. Scriptul admin/files.php este inclus ntr-un <iframe>:
aproape tot funct, ioneaza la fel, dar diferent, a importanta este ca nu se mai
ncarca toata interfat, a siteului n <iframe>, ci apare doar lista de fis, iere.
La finalul editarii documentului, cand utilizatorul alege sa salveze modificarile, se transmite formularul la server. Funct, ia awebitor.formSubmit()

3.4. EDITORUL DE PAGINI AWEBITOR

79

preia evenimentul submit al formularului pentru a actualiza cont, inutul elementului <textarea>. Pe server se salveaza noul cont, inut HTML n fis, ierul
paginii.

3.4.1

Cur
at, area codului HTML cu ReTidy

Oriunde este folosit Awebitor n siteul de administrare apare s, i opt, iunea


profilul de curat, are a paginii HTML. Aceasta opt, iune permite utilizatoru
lui sa curet, e codul HTML generat de navigatorul web sa elimine tagurile
inutile.
Important, a curat, arii unei pagini cres, te atunci cand cont, inutul este copiat dintr-un procesor de documente precum OpenOffice1 Writer sau Microsoft Office Word. De obicei asemenea documente cont, in foarte multe taguri
inutile s, i chiar multe erori n codul HTML generat.
Pentru a curat, a documentele de erori am scris un script PHP open source
numit ReTidy.
Funct, ia clean awebitor() este chemata la salvarea paginilor. Aceasta
se gases, te n admin/include.php:
// Includem scriptul PHP s, i pregatim o instant, a a clasei ReTidy.
r e q u i r e o n c e ($GLOBALS [ r e t i d y . php ] ) ;
$GLOBALS[ r e t i d y ] = new ReTidy ( ) ;
f u n c t i o n c l e a n a w e b i t o r ( $html , $ p r o f i l e = f a l s e )
{
// Profilul dorit pentru curat, are.
if (! $profile )
{
$ p r o f i l e = awebitor ;
i f ( i s s e t ($ REQUEST [ r e t i d y p ] ) )
$ p r o f i l e = $ REQUEST [ r e t i d y p ] ;
i f ( $ p r o f i l e == n )
r e t u r n $html ;
}
arcare profil.
// Inc
i f ( ! $GLOBALS[ r e t i d y ]> l o a d P r o f i l e ( $ p r o f i l e ) )
return false ;
1

http://openoffice.org

80

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

$html = <html>
<head>
<meta httpe q u i v=ContentType
c o n t e n t= t e x t / html ; c h a r s e t=u t f 8 />
</head>
<body> . $html . </body>
</html> ;
// Curat, are pagina.
$GLOBALS[ r e t i d y ]>setCode ( $html ) ;
i f ( ! $GLOBALS[ r e t i d y ]>cleanCode ( ) )
return false ;
$html = $GLOBALS [ r e t i d y ]>getCode ( ) ;
$GLOBALS[ r e t i d y ]>free mem ( ) ;
$html = preg replace ( array ( /(.+?) < body [ >] >/ i s ,
/<\/body >(.+?) $/ i s ) ,
, $html ) ;
r e t u r n $html ;
}
Profilurile de curat, are a paginilor sunt doar fis, iere diferite de configurare
pentru ReTidy. Acesta are o mult, ime de opt, iuni de configurare a curat, arii:
ce taguri sa fie s, terge, condit, iile n care sa fie s, terse, atributele care sunt
s, terse, procesarea textului s, i multe altele.
Profilul Awebitor este selectat implicit, face o curat, are minimala docu
mentelor. Profilul maxim este facut sa curet, e paginile care sunt preluate

din documente Office. In asemenea cazuri trebuie sa fie eliminate foarte


multe taguri.
// Bucata de cod din profilul Awebitor.
r e t u r n array (
e n c o d i n g => u t f 8 ,
// Lista de funct, ii de curat, are ce sunt chemate n ordinea data.
// Acestea pot fi chemate de oricate ori este necesar.
macro => array ( t i d y c o d e , m y s t r i p t a g s ,
strip br dupes , trim br tags , replace tags ,
tidy code , dom init , dom strip child tags ,
dom strip only child ,

3.4. EDITORUL DE PAGINI AWEBITOR

81

dom strip parent only child ,


dom merge parent attr ,
dom save , p o s t d o m s t r i p m e ,
post dom renametag , s t r i p e m p t y t a g s ,
combine inline ,
reorder tags , combine inline ,
combine br tags ,
trim br tags , fix img pos , tidy code ,
strip lang , trim br tags ) ,
// Funct, ii importante care nu trebuie sa se execute cu erori.
// Daca apar erori (return false) n execut, ia acestora, se opres, te
// curat, area paginii.
important methods => array ( t i d y c o d e , d o m i n i t ,
dom save ) ,
// Elimina <br>-urile duplicate.
s t r i p b r d u p e s => true ,
// Elimina orice <br> gasit la nceputul sau la finalul tagurilor
// date n lista de mai jos.
t r i m b r t a g s => array ( p , d i v , t a b l e , th ,
td , h1 , h2 , h3 , h4 , h5 , h6 , u l ,
o l , d l , l i , dt , dd , s t r o n g , em ,
i , u , b , t r , pr e ) ,
// Elimina tagurile goale.
s t r i p e m p t y t a g s => array ( p , t i t l e , s t y l e ,
h1 , h2 , h3 , h4 , h5 , h6 , b , i ,
em , s t r o n g , sup , sub , u , td , t r ,
table ) ,
// . . . s, i multe alte opt, iuni.
);
Pentru a curat, a o pagina ReTidy preia codul s, i l trece prin funct, ii de
curat, are, as, a cum se cere de profil. Aceste funct, ii pot lucra pe codul sursa
HTML sau pe structura DOM a paginii. Pe langa aceste funct, ii exista s, i
funct, ia de curat, are cu HTML Tidy [9] un proiect open source care permite curat, area paginilor HTML, dar care ment, ine prea mult din codul init, ial
al paginii. Rolul trecerii codului HTML prin HTML Tidy este de a face

82

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

curat, area init, iala. Dupa acest prim pas, restul de funct, ii de curat, are au mai
put, in de modificat.

3.5. BLOGUL

3.5

83

Blogul

Siteul poate avea oricate bloguri se dores, te. Blogurile sunt tipuri de pagini cu
articole sortate cronologic, de la cel mai nou la cel mai vechi, cu etichete alese
de administratori, s, i cu fluxuri Atom. Pentru a vedea cum se pot adauga
pagini de tip blog vedet, i sect, iunea 3.3.3.

3.5.1

Funct, ionalit
at, i pentru utilizatori

Blogul Evenimente2 arata n felul urmator:


Figura 3.15: Blogul Evenimente.

http://www.uav.ro/ro/universitate/evenimente

84

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Paginile de acest tip sunt generate de scriptul pages/blog.php. Prima


pagina a oricarui blog listeaza ultimele articole, cateva articole din arhiva s, i
cele mai populare etichete.
Administratorii pot asocia etichete arbitrar alese fiecarui articol, separate
de virgula. Acestea permit utilizatorilor sa filtreze articolele de pe site doar
pe etichetele/categoriile dorite. De exemplu, se pot vizualiza doar articolele
despre examene.
Pentru designul grafic al paginilor de tip blog se ncarca fis, ierul css/
blog.css.
Blogurile pot avea un antet HTML s, i un panou lateral editate de administratori. Codul din blog.php:
// Directorul unde se gasesc fis, ierele blogului.
$ f o l d e r b l o g = pages / b l o g ;
// Jetonul de identificare al blogului.
$ b l o g i d = s t r r e p l a c e ( / , , $ b l o g p a t h ) ;
// Antetul blogului. De exemplu, pentru blogul Evenimente fis, ierul este
// pages/ blog/ universitate-blog-header. html .
$ f i l e h e a d e r = $GLOBALS [ php base ] . / .
$folder blog . / . $blog id .
header . html ;
// Codul HTML din panoul lateral al blogului.
$ f i l e p a n e l = $GLOBALS[ php base ] . / .
$folder blog . / . $blog id .
p a n e l . html ;
Lista de articole s, i etichetele acestora sunt salvate n tabelele MySQL
blog (vezi tabelul A.1) s, i blog tags (vezi tabelul A.2).
Pentru a afis, a lista de articole n mini arhiva din panoul lateral al paginii
se executa:
echo <o l >\n ;
// Comanda SQL
$ Q r e s u l t = mysql query ( SELECT path , t i t l e
$ t a b l e b l o g . WHERE c a t e g o r y = .
m y s q l r e a l e s c a p e s t r i n g ( $blog path ) .
ORDER BY pubdate DESC LIMIT 0 , 10 ) ;

FROM .

3.5. BLOGUL

85

while ( $row = mysql fetch assoc ( $ Q r e s u l t ) )


{
$ l i n k = $GLOBALS [ p e r m a n e n t l i n k s ] [ p r e f i x ] . / .
$ b l o g p a t h . / . $row [ path ] ;
echo <l i ><a h r e f = . $ l i n k . > . $row [ t i t l e ] .
</a></ l i >\n ;
}
echo </o l >\n ;
Afis, area celor mai populare etichete are la baza urmatorul cod:
// Comanda SQL care preia lista de etichete asociate cu orice articol din
// blogul curent. Coloana cnt cont, ine numarul de articole care au
// eticheta data de coloana tag.
$ Q r e s u l t = mysql query ( SELECT COUNT( bid )
AS cnt , tag FROM . $ t a b l e b l o g t a g s . ,
. $table blog .
WHERE . $ t a b l e b l o g . . id = bid AND
. $ t a b l e b l o g . . category = .
m y s q l r e a l e s c a p e s t r i n g ( $blog path ) .
GROUP BY tag ORDER BY cnt DESC, tag ASC
LIMIT 0 , 10 ) ;
$ t a g s = array ( ) ;
i f ( mysql num rows ( $ Q r e s u l t ) > 0 ) {
while ( $row = mysql fetch assoc ( $ Q r e s u l t ) ) {
$ t a g s [ ] = $row ;
}
$res = ;
foreach ( $ t a g s as $ta g ) {
$ s i z e = max( 2 . 5 $ t a g s [ 0 ] [ c n t ] / $tag [ c nt ] ,
0.7);
$ r e s .= , <a r e l =t a g s t y l e =f o n t s i z e : .
$ s i z e . em h r e f = .
/ .
$GLOBALS[ p e r m a n e n t l i n k s ] [ p r e f i x ] .
$ b l o g p a t h . / t a g s / . $tag [ ta g ] . > .
$tag [ t ag ] . </a> ;
}
$ r e s {0} = ;

86

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

echo <d i v i d=blogpopulart a g s >


<h2> . $ l a n g [ populart a g s ] . </h2>
<p> . $ r e s . .</p>
</div> <! #blogpopulart a g s >\n ;
}
Cont, inutul articolelor este dat de codul urmator:
$ Q r e s u l t = mysql query ( SELECT pubdate , path ,
c ont ent , t i t l e , id
FROM . $ t a b l e b l o g .
WHERE c a t e g o r y = .
m y s q l r e a l e s c a p e s t r i n g ( $blog path ) .
ORDER BY pubdate DESC LIMIT 0 , 5 ) ;
$i = 0;
// Comenzi din tastatura pentru primele patru articole.
$ a c c e s s k e y s = array ( a , b , c , d ) ;
while ( $row = mysql fetch assoc ( $ Q r e s u l t ) ) {
$ l i n k = $GLOBALS [ p e r m a n e n t l i n k s ] [ p r e f i x ] .
/ . $ c a t e g o r y . / . $row [ path ] ;
$date = date ( j F Y, H: i , $row [ pubdate ] ) ;
echo <h2 c l a s s =blogpost t i t l e ><a ;
i f ( isset ( $accesskeys [ $i ] ) )
echo a c c e s s k e y= . $ a c c e s s k e y s [ $ i ] . ;
echo h r e f = . $ l i n k . > . $row [ t i t l e ] .
</a></h2>
<p c l a s s =blogpostdate> . $date . </p>
<d i v c l a s s =blogpostc o n t e n t> . \n ;
r e a d f i l e ($GLOBALS [ php base ] . / .
$ f o l d e r b l o g . / . $row [ c o n t e n t ] ) ;
echo </div> <! . blogpostc o n t e n t >\n ;
$ i ++;
}

3.5. BLOGUL

87

Cand utilizatorul alege un articol, doar cont, inutul acelui articol este
afis, at.
Figura 3.16: Vizualizarea unui articol n blogul Evenimente.

88

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Pentru a vedea toate articolele din blog, inclusiv cele mai vechi articole
care nu apar pe prima pagina, utilizatorul poate accesa arhiva de articole.
Acestea sunt grupate vizual pe ani s, i pe luni.
Figura 3.17: Arhiva de articole ntr-un blog.

3.5. BLOGUL

89

Pentru utilizatorii care doresc sa fie la curent cu ultimele articole publicate


pe site, exista fluxuri Atom. Aceste fluxuri n format XML pot fi citite de
toate navigatoarele web moderne s, i de alte programe specializate. Cand
utilizatorul este abonat la fluxul unui blog, acesta este notificat automat
daca apar articole noi.
Figura 3.18: Fluxul Atom al blogului Evenimente n Firefox.

In captura de ecran de mai sus se pot vedea articolele blogului afis, ate
de Firefox. Tot prin abonarea la fluxul Atom articolele pot fi afis, ate pe alte
siteuri sau alte aplicat, ii software. Codul XML este generat de pages/blogatom.php. Exemplu de flux Atom:
<?xml version= 1 . 0 e n c o d i n g= u t f 8 ?>
<f e e d xml:lang= r o
xmlns= h t t p : //www. w3 . or g /2005/Atom>
< t i t l e>U n i v e r s i t a t e Evenimente</ t i t l e>
<au thor>
<name>U n i v e r s i t a t e a Aurel V l a i c u d in Arad</name>
<u r i>h t t p : //www. uav . r o</ u r i>

90

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


</ author>
<g e n e r a t o r u r i= h t t p : //www. r o b o d e s i g n . r o >
ROBO Design v5
</ g e n e r a t o r>
<i d>urn:wwwuavr o : u n i v e r s i t a t e evenimente</ i d>
<l i n k h r e f=/ r o / u n i v e r s i t a t e / evenimente
t i t l e = U n i v e r s i t a t e Evenimente
type= t e x t / html />
<l i n k r e l= s e l f
h r e f=/ r o / u n i v e r s i t a t e / evenimente /atom
t i t l e = U n i v e r s i t a t e Evenimente
type= a p p l i c a t i o n /atom+xml />
<updated>20100728 T 1 1 : 3 6 : 2 1 +03 : 0 0</ updated>

<e n t r y>
< t i t l e>Lansare de c a r t e , j o i , 1 4 . 0 4 . 2 0 1 1 ,
o ra 11</ t i t l e>
<p u b l i s h e d>20110413 T 0 9 : 2 7 : 4 4 +03 : 0 0</ p u b l i s h e d>
<updated>20110413 T 1 4 : 3 4 : 4 8 +03 : 0 0</ updated>
<l i n k h r e f=/ r o / u n i v e r s i t a t e / evenimente / l a n s a r e
dec a r t e j o i 14042011ora 11
t i t l e = Lansare de c a r t e , j o i , 1 4 . 0 4 . 2 0 1 1 ,
o ra 11 type= t e x t / html />
<i d>urn:wwwuavr o : u n i v e r s i t a t e
e v e n i m e n t e : 4 4 8</ i d>
<c a t e g o r y term= academia />
<c a t e g o r y term= c r i t i c de t e a t r u />
<c a t e g o r y term= l a n s a r e de c a r t e />
<c a t e g o r y term= t e a t r u />
<c o n t e n t type= html >
&l t ; p&g t ;
&l t ; span s t y l e= f o n t w e i g h t : bold ; &g t ;
Eveniment c u l t u r a l :&l t ; / span&g t ; Lansarea c a r t i i
, , Aradul t e a t r a l 1752 2010 , a u t o r L i z i c a Mihut .
&l t ; br /&g t ;
&l t ; span s t y l e= f o n t w e i g h t : bold ; &g t ; Data
s i l o c a t i a :&l t ; / span&g t ; Joi , 1 4 . 0 4 . 2 0 1 1 , o ra 1 1 .
C l a d i r e a R e c t o r a t u l u i , s a l a 13 ( s a l a S e n a t u l u i UAV) .
&l t ; br /&g t ;
&l t ; span s t y l e= f o n t w e i g h t : bold ; &g t ; Vor
c o n f e r e n t i a :&l t ; / span&g t ; Gelu Negrea , Ion Cocora ,

3.5. BLOGUL
V a s i l e Dan , F l o r i n D i d i l e s c u , Ovidiu Cornea ,
Diana Achim s . a .
&l t ; br /&g t ;
&l t ; span s t y l e= f o n t w e i g h t : bold ; &g t ;
D e t a l i i&l t ; / span&g t ; l a &l t ; a h r e f= h t t p : // arq . r o /
l i z i c a mihuta ra du l t e a t r a l 1752%E2%80%932010%E2%80
%99%E2%80%99/&g t ; h t t p : // arq . r o/&amp;#160;& l t ; / a&g t ;
&amp; #160; s i l a &l t ; a h r e f= f i l e s / comunicate /
a r t 1 3 . 0 4 . pdf &g t ; h t t p : //www. uav . r o / f i l e s /
comunicate / a r t 1 3 . 0 4 . pdf&l t ; / a&g t ;
&l t ; / p&g t ;
&l t ; p&g t ;
&l t ; a h r e f= h t t p : //www. uav . r o / f i l e s /
comunicate / a r t 1 3 . 0 4 . pdf &g t ;& l t ; / a&g t ;
&l t ; / p&g t ;
</ c o n t e n t>
</ e n t r y>
</ f e e d>

91

92

3.5.2

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Funct, ionalit
at, i pentru administratori

In gestionarul de pagini (vezi sect, iunea 3.3) administratorul poate face click
pe paginile de tip blog pentru editare. Editorul de bloguri este scriptul
admin/blog.php. Articolele din blog sunt listate astfel:
Figura 3.19: Pagina de administrare a blogului Evenimente.

Listarea de articole se bazeaza pe o singura comanda SELECT din tabelul


MySQL al blogului. Interact, iunea cu pagina web este implementata de codul
JavaScript din js/admin.js.
Antetul blogului s, i panoul lateral pot fi editate cu Awebitor (vezi sect, iunea 3.4), trebuie doar ca administratorul sa faca un click pe opt, iunea de
editare acestor sect, iuni ale blogului.

3.5. BLOGUL

93

Dupa ce se fac modificarile dorite la articole, administratorul poate sa


acceseze opt, iunea Ping-o-matic. Aceasta opt, iune este o legatura catre serviciul Ping-O-Matic3 . Adresa blogului este transmisa la Ping-O-Matic pentru
a fi transmisa mai departe la alte motoare de cautare bloguri (inclusiv catre
Google). Motoarele de cautare indexeaza fluxul Atom s, i permit utilizatorilor
sa caute n cont, inutul acestuia.
Administratorul poate s, terge articole printr-un singur click pe opt, iunea
X din dreapta fiecarui articol moment n care se executa funct, ia

siteAdmin.blogDelete(). Aceasta funct, ie cere confirmarea act, iunii de


s, tergere. Pe server se executa:
// Scoatem articolul din tabelul blog.
mysql query ( DELETE FROM . $ t a b l e b l o g .
WHERE c a t e g o r y = .
m y s q l r e a l e s c a p e s t r i n g ( $blog path ) .
AND id = . $ REQUEST [ i d ] . ) ;
// S, tergem etichetele asociate cu acest articol.
mysql query ( DELETE FROM . $ t a b l e b l o g t a g s .
WHERE bid = . $ REQUEST [ i d ] . ) ;
// S, tergem fis, ierul HTML de pe disc.
i f ( @ f i l e e x i s t s ( $base . / . $ f o l d e r b l o g . / .
$row [ c o n t e n t ] ) )
@unlink ( $base . / . $ f o l d e r b l o g . / .
$row [ c o n t e n t ] ) ;
// S, tergem pagina din indexul de cautare.
i f ( $use search )
searchDeleteDocument (
$GLOBALS[ p e r m a n e n t l i n k s ] [ p r e f i x 2 ] . / .
$ b l o g p a t h . / . $row [ path ] ) ;
// S, tergem pagina din harta siteului.
i f ( $use sitemap )
$sitemap>delete (
$GLOBALS[ p e r m a n e n t l i n k s ] [ p r e f i x 2 ] . / .
$ b l o g p a t h . / . $row [ path ] ) ;
// S, tergem pagina din cache.
3

http://pingomatic.com

94

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

delete page cache ( $blog path ) ;


delete page cache ( $blog path . / archive ) ;
d e l e t e p a g e c a c h e ( $ b l o g p a t h . / . $row [ path ] ) ;
Formularul de adaugare arata astfel:
Figura 3.20: Adaugarea unui articol n blog.

Administratorul trebuie sa introduca titlul articolului, opt, ional calea acestuia, data s, i etichetele. Implicit articolul are data curenta. Etichetele trebuie
sa fie separate cu virgule.
Funct, ia JavaScript care afis, eaza formularul este siteAdmin.blogAdd().
Validarea este facuta de siteAdmin.blogAddSubmit().
Pe server se genereaza calea articolului pe baza titlului daca administratorul nu a introdus nici o valoare n acest scop este chemata funct, ia

3.5. BLOGUL

95

AdminGenerateId() (vezi pagina 73). In final se adauga articolul n tabelul blog cu o comanda INSERT. In tabelul blog tags este adaugata fiecare
eticheta.
Editarea unui articol se face cu un click pe titlul acestuia:
Figura 3.21: Editarea unui articol din blog.

Formularul de editare articol permite modificarea titlului, a caii de accesare a articolului, data s, i etichetele acestuia. Cont, inutul articolului poate fi
editat fara a fi necesare cunos, tint, e HTML cu Awebitor (vezi sect, iunea 3.4).
Operat, iile de adaugare, s, tergere s, i editare urmeaza permisiunile acordate
administratorului. De exemplu, administratorul poate sa nu aiba dreptul sa

96

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

faca o anumita operat, ie pe un anumit articol. Pentru detalii, vezi sect, iunea 3.1.

3.6

Galeria de imagini

Modulul care permite adaugarea de pagini de tip galerie de imagini a pornit

de la codul modulului de bloguri (vezi sect, iunea 3.5). Administratorii pot


adauga pagini de tip galerie de imagini (vezi sect, iunea 3.3.3).

Figura 3.22: Galerie foto pe siteul UAV.

Precum blogurile, galeriile au s, i ele fluxuri Atom la care se pot abona


utilizatorii care doresc sa fie la curent cu ultimele poze adaugate.

3.6. GALERIA DE IMAGINI

97

Dupa ce utilizatorul face click pe poza dorita se ncarca o pagina unde


poza este afis, ata la o dimensiune medie. Sub poza este afis, ata descrierea
acesteia:
Figura 3.23: Vizualizare poza.

Utilizatorul poate sa faca nca un click pe poza pentru a vedea poza la


marimea originala.
Scriptul care genereaza lista de poze s, i pagina de vizualizare a unei poze
este pages/gallery.php. Stilul acestor pagini este dat de css/gallery.css.
Fluxul Atom este generat de pages/gallery-atom.php.
Pozele pentru fiecare galerie sunt salvate ntr-un tabel MySQL, vezi tabelul gallery, sect, iunea A.3.

98

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

La adaugarea unei poze administratorul trebuie sa ncarce poza dorita.


Aceasta este redimensionata pe server la o dimensiune mica pentru lista de
poze s, i la dimensiunea medie pentru pagina n care este vizualizata poza.
Figura 3.24: Adaugare poza n galerie.

Dupa cum se poate vedea din captura de ecran, administratorul trebuie


sa introduca titlul pozei s, i sa aleaga fis, ierul de pe disc. Pozele nu pot avea
etichete asociate. Opt, ional data pozei s, i calea acesteia pot fi schimbate.
Codul JavaScript folosit este n js/admin.js. Pentru afis, area formularului este chemata funct, ia siteAdmin.galleryAdd(). Pentru validarea
formularului se executa funct, ia siteAdmin.galleryAddSubmit(). Pe server

3.6. GALERIA DE IMAGINI

99

se foloses, te funct, ia AdminGenerateId() pentru a genera calea pozei pe baza


titlului, vezi pagina 73.
Pentru redimensionarea pozelor sunt folosite funct, ii din libraria Graphics
Draw [10]. Funct, ia handleImgUpload() din admin/gallery.php este executata:
f u n c t i o n handleImgUpload ( $ i m g f i l e )
{
// Verificam daca poza a fost ncarcata cu succes.
i f ( $ i m g f i l e [ e r r o r ] !== UPLOAD ERR OK)
{
AdminMessage ( $ l n g [ e r r o r imgupload ] ) ;
return false ;
}
// Citim informat, ii despre poza.
$ f i n f o = @ g e t i m a g e s i z e ( $ i m g f i l e [ tmp name ] ) ;
i f ( ! $ f i n f o | | ( $ f i n f o [ 2 ] != 2 && $ f i n f o [ 2 ] != 3 ) )
{
// Acceptam doar poze n format JPEG sau PNG.
AdminMessage ( $ l n g [ e r r o r imgformat ] ) ;
return false ;
}
funct, ie de format este creata o imagine GD.
// In
i f ( $ f i n f o [ 2 ] == 2 )
{
$fext = . jpg ;
$img = i m a g e c r e a t e f r o m j p e g ( $ i m g f i l e [ tmp name ] ) ;
} e l s e i f ( $ f i n f o [ 2 ] == 3 )
{
$ f e x t = . png ;
$img = imagecreatefrompng ( $ i m g f i l e [ tmp name ] ) ;
} else
return false ;
// Destinat, ia pentru poza mica.
$fname = basename( strtolower ( $ i m g f i l e [ name ] ) ,
$fext );
$ f d e s t = $base . / . $ f o l d e r i m g s . / .
$folder imgs thumbnails . / .

100

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


$fname . . j p g ;

// Redimensionam poza la marimea mica data de variabilele $img tw


// s, i $img th.
i f ( ( $ f i n f o [ 0 ] / $ f i n f o [ 1 ] ) > ( $img tw / $img th ) )
{
$new w = $img tw ;
$new h = $img tw / ( $ f i n f o [ 0 ] / $ f i n f o [ 1 ] ) ;
} else
{
$new w = $img th / ( $ f i n f o [ 1 ] / $ f i n f o [ 0 ] ) ;
$new h = $img th ;
}
// Mai facem o imagine GD, acum pentru poza mica.
$img2 = imagecreatetruecolor ( $new w , $new h ) ;
// Facem redimensionarea propriu-zisa.
imagecopyresampled ( $img2 , $img , 0 , 0 , 0 , 0 ,
$new w , $new h , $ f i n f o [ 0 ] ,
$finfo [1]);
// Salvam poza mica pe disc, cu calitatea dorita.
$ r e s u l t = imagejpeg ( $img2 , $ f d e s t , $ i m g j p g q ) ;
if (! $result )
{
AdminMessage ( / . $ f o l d e r i m g s t h u m b n a i l s .
: . $ l n g [ e r r o r imgs a v e ] ) ;
return false ;
}
// . . .
r e t u r n true ;
}

3.6. GALERIA DE IMAGINI

101

Dupa adaugarea unei poze administratorul poate sa o editeze, sa modifice


titlul, calea, data s, i descrierea acesteia. Opt, ional, poza poate fi rencarcata.

Figura 3.25: Modificarea unei poze.

Pentru editarea descrierii este folosit editorul Awebitor, vezi sect, iunea 3.4.
Paginile HTML cu descrierea fiecarei poze se gasesc n pages/gallery.
Imaginile originale se gasesc n files/gallery/original. Imaginile de dimensiune medie sunt n files/gallery/normal, iar imaginile mici sunt n
files/gallery/thumbnails.

102

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

3.7

Modulul Fis, iere de desc


arcat

Unele pagini din site ofera utilizatorilor liste de fis, iere care pot fi descarcate
de pe server de exemplu, pagina Documente de interes public4 . Exemplu
de pagina cu fis, iere de descarcat:
Figura 3.26: Pagina de test cu fis, iere de descarcat.

Dupa cum se poate vedea din captura de ecran pagina are un antet care
poate fi editat de administrator s, i lista de fis, iere. Utilizatorul face click pe
fis, ier s, i l descarca.
Paginile sunt generate de scriptul pages/downloads.php. In directorul
pages/downloads se gases, te antetul paginii, calea directorului de pe server
asociat cu pagina accesata de utilizator s, i titlul paginii.
Atunci cand administratorul adauga o pagina noua n site el poate sa
4

http://www.uav.ro/ro/universitate/documente


3.7. MODULUL FIS, IERE DE DESCARCAT

103

aleaga modulul fis, iere de descarcat detalii n sect, iunea 3.3.3. Editarea

acestui tip de pagini arata astfel:


Figura 3.27: Administrarea paginilor cu fis, iere de descarcat.

Administratorul poate edita antetul paginii cu editorul Awebitor, vezi


sect, iunea 3.4. Lista de fis, iere este generata automat din directorul asociat
cu pagina n cauza. Administratorul poate sa ncarce fis, ierele prin FTP, sau
poate sa le ncarce din pagina de administrare a siteului.
Fiecare fis, ier are un titlu s, i o descriere asociata. Aceste informat, ii sunt
salvate ntr-un fis, ier JSON. Cont, inutul fis, ierului arata astfel:
{
nume f i s i e r . e x t e n s i e : {
type : f i l e ,
f i l e : nume f i s i e r . e x t e n s i e ,
title: titlul fisierului ,
description , descrierea f i s i e r u l u i ,

104

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

},
adresa unuif i s i e r e x t e r n : {
type : l i n k ,
l i n k : http : / / example . com/ f i s i e r ,
t i t l e : t i t l u l l e g a t u r i i externe ,
description : descrierea legaturii ,
}
}
Acest fis, ier JSON este salvat n directorul asociat cu pagina editata.
Administratorul poate schimba directorul asociat daca dores, te sa afis, eze
fis, iere dintr-un alt director decat cel implicit. Numele fis, ierului JSON este
_ro_metadata.json pentru limba romana s, i _en_metadata.json pentru
limba engleza.
Din formatul fis, ierului JSON se poate vedea ca pe langa fis, iere se pot
adauga s, i legaturi catre fis, iere externe. Unele documente se gasesc pe alte
servere s, i atunci este mai simpla adaugarea unei legaturi directe catre fis, ierele
dorite, n loc sa se faca o rencarcare a acestora.


3.7. MODULUL FIS, IERE DE DESCARCAT

105

Incarcarea unui nou fis, ier arata astfel:


Figura 3.28: Incarcarea unui fis, ier.

Formularul permite alegerea fis, ierului dorit de pe disc, s, i opt, ional se introduce titlul fis, ierului s, i descrierea acestuia. Afis, area formularului este implementata n js/admin.js de funct, ia siteAdmin.downloadsAddFile(). Validarea formularului este n funct, ia siteAdmin.downloadsAddFileSubmit().
Adaugarea de legaturi externe arata la fel, dar n loc de campul pentru
fis, ier este un camp pentru adresa fis, ierului extern.
Daca administratorul face click pe unul din fis, ierele listate, acesta poate
sa i modifice titlul s, i descrierea.
Pe server adaugarea de fis, iere trece printr-un filtru de extensii cunoscute,
de exemplu nu este permisa ncarcarea fis, ierelor de tip PHP. Directorul asociat cu o pagina este implict ales pe baza caii paginii. Daca pagina are calea
a/b/c, atunci directorul pe server este files/downloads/a/b/c. Orice fis, ier
ncarcat este pus n acest loc.

106

3.8

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Prima pagin
a

Prima pagina5 a siteului UAV este afis, ata de pages/welcome.php, vezi figura 1.1. Pe pagina se gasesc:
o diaporama aleatorie cu cateva antete care au design cu caracter promot, ional,
o mini-harta a siteului, cu primele patru meniuri principale, fiecare
avand primele cinci sub pagini afis, ate n ordine aleatorie,
ultimele articole din blogurile Noutat, i6 s, i Evenimente7 ,
datele de contact din fis, ierul pages/en_welcome_contact.html sau
pages/ro_welcome_contact.html,
partenerii universitat, ii din fis, ierul pages/en_welcome_partners.html
sau pages/ro_welcome_partners.html,
primul paragraf din trei pagini importante ale siteului: Despre UAV8 ,
Istoric9 s, i Cercetare10 .
In scriptul welcome.php funct, ia mini sitemap() genereaza ierarhia de
pagini a siteului: primele patru meniuri principale din care sunt luate aleatoriu cinci pagini. T, inand cont ca n timpul execut, iei interfat, a siteului exista
ntr-un obiect DOM pe server, acest script preia lista de pagini direct din
meniurile generate, fara sa reciteasca structura XML a siteului (vezi sect, iunea 3.3.1).
Funct, ia blog section() afis, eaza titlul ultimelor articole publicate din
blogul dorit. Opt, ional aceasta funct, ie poate afis, a s, i primele cuvinte din articole. Funct, ia page section() afis, eaza numarul de cuvinte ales din pagina
dorita.
Scriptul js/welcome.js implementeaza efectul de tranzit, ie ntre pozele
din antetul paginii. O poza este pusa cu CSS folosindu-se proprietatea
background-image, iar cealalta poza este suprapusa cu un element <img>.
Cu funct, ia setTimeout() se modifica proprietatea opacity a elementului:
valoarea cres, te sau scade, dupa cum este cazul.
5

http://www.uav.ro/
http://www.uav.ro/ro/universitate/noutati
7
http://www.uav.ro/ro/universitate/evenimente
8
http://www.uav.ro/ro/universitate/prezentarea-universitatii
9
http://www.uav.ro/ro/universitate/prezentarea-universitatii/istoric
10
http://www.uav.ro/ro/cercetare
6

3.9. PAGINA CONTACT

3.9

107

Pagina Contact

Pagina de contact11 a universitat, ii permite utilizatorilor sa transmita mesaje


departamentelor dorite. Formularul arata astfel:
Figura 3.29: Pagina de contact a Universitat, ii Aurel Vlaicu din Arad.

In acest formular utilizatorul poate sa scrie subiectul emailului, cont, inutul


acestuia s, i sa s, i scrie adresa de email. Destinatarul este ales din lista de
departamente adaugate de administratorii siteului. Formularul este protejat
anti-spam cu serviciul recaptcha.net. La trimiterea unui mesaj pe server se
11

http://www.uav.ro/ro/contact

108

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

face validarea adresei de email s, i a celorlalte campuri din formular. Mesajul


este trimis la destinatarul ales cu funct, ia mail().
Pagina este afis, ata de scriptul pages/contact.php. In dreapta formularului apar datele de contact din fis, ierul pages/ro_contact.html sau pages/
en_contact.html. Aceste informat, ii pot fi editate de administratorii siteului.
Administratorii siteului pot edita pagina de contact s, i lista destinatarilor.

Figura 3.30: Administrarea paginii de contact.

Lista de destinatari este citita din fis, ierul pages/ro_contact.json sau


pages/en_contact.json. Formatul fis, ierului JSON este foarte simplu:

3.9. PAGINA CONTACT

109

{
j e t o n i d e n t i f i c a r e : [ nume , email@example . com ] ,
// . . . alte destinat, ii
}
Pagina de administrare este generata de scriptul admin/contact.php.
La adaugarea unui destinatar se executa funct, ia JavaScript siteAdmin.
contactAdd(). Administratorul este ntrebat de numele destinatarului s, i
adresa de email a acestuia. Pe server jetonul de identificare al destinatarului
este generat de funct, ia AdminGenerateId() (vezi pagina 73), ca apoi fis, ierul
JSON sa fie actualizat.
Editarea datelor de contact care apar n dreapta formularului s, i a datelor
de contact care apar pe prima pagina se face folosindu-se Awebitor, vezi
sect, iunea 3.4.

110

3.10

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Motorul de c
autare

Pentru utilizatori motorul de cautare este principala metoda de a gasi cont, inutul
dorit n siteul Universitat, ii Aurel Vlaicu din Arad. Exemplu de cautare:

Figura 3.31: Pagina de cautare n site.

In toate paginile interfat, a siteului afis, eaza campul de cautare n antet.


Cand utilizatorul alege sa caute ceva n site se acceseaza scriptul pages/
search.php. Acesta preia cuvintele cheie s, i le transmite mai departe la
scriptul modules/search.php. Rezultatele sunt date ntr-un vector (array)
afis, at n HTML.
Practic pages/search.php este doar interfat, a de cautare s, i afis, are rezul-


3.10. MOTORUL DE CAUTARE

111

tate a modulului de cautare modules/search.php. Stilul css/search.css


este folosit pentru stilarea rezultatelor n navigatorul web.
Utilizatorii pot cauta n siteul UAV cu Google daca adauga prefixul g .

In acest caz cuvintele cheie sunt redirect, ionate catre motorul de cautare
Google.
In scriptul din pages se executa:
$ r e s u l t s = searchDocument ( array (
keywords => $ REQUEST [ q ]
));
Funct, ia searchDeleteDocument() este data de scriptul din modules.
Aceasta permite cautarea paginilor din site. Parametrii funct, iei sunt urmatorii:
keywords Cuvintele cheie folosite pentru cautare.
sortby Sortarea rezultatelor dupa:
updated ultima actualizare a documentelor,
words numarul de cuvinte n documente,
title titlurile documentelor,
url adresele documentelor,
score scorul rezultatului.
Implicit rezultatele sunt sortate dupa scorul acestora. Scorul este
calculat n funct, ie de cate ori apar cuvintele cheie cautate, dupa
marimea documentului s, i alt, i factori.
order Direct, ia de sortare: -1 pentru sortare descrescatoare, 1 pentru
sortare crescatoare.
operator Operatorul folosit ntre cuvinte: AND sau OR. Daca se foloses, te AND toate cuvintele cheie trebuie sa apara n document. Daca
se foloses, te OR n lista de rezultate apar pagini care cont, in oricare
din cuvintele cheie date.
soundex Parametru boolean care spune ca se dores, te cautare de tip
Soundex [11] n MySQL. Practic vor fi gasite s, i alte cuvinte similare
cu cuvintele cheie date.
Fiecare rezultat este dat ntr-un vector:
id Numarul de identificare al paginii n tabelul MySQL.

112

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB


title Titlul paginii.
url Adresa paginii.
snippet O bucata din document aleasa n as, a fel ncat sa cont, ina
unul sau mai multe cuvinte cheie. Aceasta este folosita n afis, area
rezultatelor.
updated Ultima actualizare a paginii.
score Scorul rezultatului.
words Numarul de cuvinte n document.
size Marimea documentului n octet, i.

Cuvintele cheie sunt filtrate pentru a se elimina orice semn de punctuat, ie,
cuvintele mai lungi decat 255 de caractere s, i orice alt cuvant care ar fi malformat.
Motorul de cautare foloses, te doua tabele MySQL pentru fiecare limba:
search documents (vezi anexa A.4) s, i search doc index (vezi anexa A.5).
In primul tabel sunt indexate documentele cu titlul lor, adresa s, i cont, inutul.
Cont, inutul este filtrat sa nu cont, ina taguri HTML. In al doilea tabel sunt
indexate cuvintele din toate documentele, fiecare cuvant fiind asociat cu id-ul
documentului n care apare.
Comenzile de interogare MySQL folosesc funct, ii specifice de transliterat, ie
s, i colare a caracterelor. De exemplu, daca utilizatorul cauta dupa s, tiint, e

vor fi gasite s, i paginile care includ cuvantul stiinte. Similar, daca utili
zatorul nu foloses, te diacritice dar paginile au cuvintele scrise cu diacritice,
rezultatele vor fi conform as, teptarilor.
Pentru indexarea documentelor funct, ia searchIndexDocument() este chemata de toate modulele de administrare a siteului. De exemplu, blogurile s, i
galeriile de imagini sunt indexate atunci cand administratorul salveaza o pagina, un articol sau o imagine. Funct, ia primes, te ca parametru adresa paginii,
titlul s, i cont, inutul. Scriptul search.php se ocupa de filtrarea cont, inutului,
de curat, area acestuia, de gasirea cuvintelor care trebuie indexate s, i tot ce
mai este necesar.
Atunci cand administratorul alege sa s, tearga o pagina funct, ia
searchDeleteDocument() este chemata.

3.11. HARTA SITEULUI

3.11

113

Harta siteului

Utilizatorii pot sa caute informat, iile dorite n harta siteului. Aceasta ofera o
perspectiva completa asupra tuturor paginilor din site:
Figura 3.32: Harta siteului UAV.

Scriptul pages/sitemap.php cites, te fis, ierul pages/sitemap_ro.html sau


pages/sitemap_en.html. Fis, ierele HTML sunt actualizate cand se fac modificari la indexul de pagini.
Pagina cu harta siteului foloses, te stilul css/sitemap.css s, i scriptul js/
sitemap.js. Fis, ierul JavaScript permite utilizatorilor sa interact, ioneze cu
harta siteului, sa intre n structura de pagini dupa cum considera necesar.

114

CAPITOLUL 3. EXTENSIILE APLICAT, IEI WEB

Scriptul modules/sitemap.php cont, ine clasa RD sitemap. Toate celelalte


module de administrare creeaza o instant, a a acestei clase pentru a putea
adauga/modifica/s, terge pagini din harta siteului. Principalele metode ale
clasei:
index() Permite indexarea unei pagini. Parametrii sunt titlul s, i
adresa acesteia. Aceasta metoda cheama add() sau update().
add() Adauga o pagina n index.
update() Actualizeaza o pagina din index.
delete() S, terge o pagina din index.
done() Metoda chemata dupa ce se modifica indexul de pagini. Aceasta
cheama metodele xml() s, i html().
xml() Genereaza harta siteului n format Sitemaps XML [1].
html() Genereaza harta siteului n format HTML.
Fis, ierul xml/sitemap.xml arata astfel:
<?xml version= 1 . 0 e n c o d i n g=UTF8 ?>
<u r l s e t
xmlns= h t t p : //www. s i t e m a p s . o r g / schemas / sitemap / 0 . 9
x m l n s : d c= h t t p : // p u r l . o rg / dc / e l e m e n t s / 1 . 1 / >
<u r l>
< d c : t i t l e> t i t l u pagina</ d c : t i t l e>
<l o c>h t t p : //www. uav . r o / r o / . . .</ l o c>
<lastmod>20110422 T 1 3 : 0 8 : 4 2 +03 : 0 0</ lastmod>
</ u r l>
<! . . . >
</ u r l s e t>
Dupa cum se poate vedea din codul de mai sus formatul Sitemaps XML
este simplu: trebuie doar adresa s, i data ultimei modificari a paginii n format W3C [12]. Pe langa asta am inclus s, i titlul paginii ntr-un alt XML
namespace, Dublin Core [13].
Harta siteului este indexata n tabelul MySQL sitemap, pentru detalii
vezi anexa A.6.

Concluzii
Siteul Universitat, ii Aurel Vlaicu din Arad a evoluat mult de la versiunea

precedenta. Imbunatat, irile tehnice s, i de design, mpreuna cu mbunatat, irile


de cont, inut s, i structura, fac noul site UAV mult mai us, or de folosit, mai
atractiv s, i mai informativ. Aceasta evolut, ie pozitiva a siteului este confirmata de Societatea Academica din Romania [14], s, i ea se datoreaza muncii
importante depuse n planuirea proiectului, implementarea s, i folosirea lui de
la lansare.
Din acest proiect am nvat, at multe lucruri s, i am pus n valoare studiile
de peste ani n domeniul informaticii.
Scopul proiectului a fost atins, dar acest lucru nu nseamna ca evolut, ia
siteului trebuie sa se opreasca aici. Cateva direct, ii de evolut, ie a siteului ar
putea fi:
mbunatat, irea securitat, ii trecerea pe TLS pentru modulul de administrare, vezi sect, iunea 3.1.2.5.
reanalizarea cont, inutului s, i a oportunitat, ilor de mbunatat, ire organizare / structura.
optimizarea tehnica, ncarcarea s, i mai rapida a paginilor optimizare
la anumite poze.
implicarea a mai multor administratori, pe diferite sect, iuni din site.
Mult, umesc profesorilor UAV s, i mai ales domnului profesor coordonator
Ioan Dzit, ac pentru ca au facut posibila realizarea acestui proiect de licent, a,
un proiect care nu este doar teoretic, ci are o aplicabilitate practica.

115

Glosar
Apache este cel mai folosit server web1 , distribuit ca software liber de
Fundat, ia Apache. 13, 14, 25, 47, 63
Atom este un format XML standard, RFC 42872 , pentru fluxuri web.
Acesta permite navigatoarelor web sau oricarui alt software sa verifice
daca sunt actualizari la resurse de pe web. In unele implementari mai
avansate, formatul Atom poate permite s, i publicarea s, i actualizarea
resurselor/paginilor web. 7, 9, 13, 16, 23, 81, 88, 95
cookie este un antet folosit n protocolul HTTP. Acest antet permite
salvarea de perechi cheie valoare n navigatoarele web ale utilizatorilor, mai precis acestea sunt variabile cu valori asociate. Aplicat, iile
web pot modifica paginile generate n funct, ie de aceste variabile. 14
CSS (Cascading Style Sheets) este un limbaj de formatare a elementelor
dintr-o pagina web3 , standardizat de catre W3C. 9, 11, 12, 64, 75, 105
DOM (Document Object Model) este o convent, ie pentru reprezentarea
s, i interact, ionarea cu elementele s, i atributele din documentele de tip
HTML, XHTML s, i XML. Aceasta convent, ie este independenta de
limbajul de programare folosit, iar elementele DOM sunt manipulate
folosindu-se sintaxa s, i gramatica limbajului de programare n care
API-ul4 DOM este implementat. Specificat, iile DOM sunt recomandari
publicate de W3C. 13, 15, 50, 58, 71, 73, 75, 105
ECMAScript este un limbaj de programare dinamic standardizat de
Ecma International, n cadrul specificat, iei ECMA-2625 s, i ISO/IEC
1

http://httpd.apache.org
http://tools.ietf.org/html/rfc4287
3
http://www.w3.org/Style/CSS/
4
Application Programmable Interface
5
http://www.ecma-international.org/publications/standards/Ecma-262.htm
2

116

Glosar

117
16262. Limbajul este implementat sub forma unor dialecte bine cunoscute precum JavaScript, JScript s, i ActionScript. 116

FTP (File Transfer Protocol) este un protocol de ret, ea folosit pentru


transferul de fis, iere ntre client, i s, i server [18]. 102
HTML (HyperText Markup Language) este un limbaj de marcare folosit
pentru crearea paginilor web6 , standardizat de catre W3C. Navigatoarele web interpreteaza codul HTML pentru a afis, a cont, inutul. 12, 14,
16, 18, 29, 56, 63, 74, 78, 83, 94, 109, 112, 116
HTTP (HyperText Transfer Protocol) este un protocol de ret, ea distribuit pentru colaborare n sisteme informatice interactive [16]. Acest
protocol este de tip cerere raspuns, unde clientul, navigatorul web,
cere o anumita adresa s, i primes, te raspunsul de la server. HTTP este
fundamentul webului, fiind principalul protocol de transfer de date.
15, 25
JavaScript este o implementare a standardului ECMAScript, ce se regases, te cu precadere n navigatoarele web. Acest limbaj de programare
permite aplicat, iilor web sa fie dinamice s, i interactive. 11, 12, 29, 47,
50, 56, 75, 112
JSON (JavaScript Object Notation) este un format de transfer de date
structurate, simplu, ce poate fi citit de catre oameni. Acesta este
un standard deschis ce preia reprezentarea obiectelor din JavaScript.
Pentru interpretarea JSON nu este necesara implementarea ntregului
limbaj JavaScript [15]. 13, 16, 22, 26, 49, 102, 107
MySQL este un sistem de gestiune a bazelor de date relat, ional7 , software
liber distribuit sub licent, a GPL8 v2. 12, 14, 16, 22, 25, 83, 96, 110,
113
PHP este un limbaj de programare dinamic9 ce nu are o specificat, ie formala. Acesta este folosit cu precadere pe serverele web pentru generarea dinamica a paginilor HTML. Principala implementare a limbajului
este un software liber cunoscut tot sub numele de PHP. 1214, 16, 17,
26, 30, 40, 47, 57, 61, 75, 78, 104
6

http://www.w3.org/html/wg/
http://www.mysql.com
8
GNU General Public License
9
http://www.php.net
7

118

Glosar

TLS (Transport Layer Security) este un protocol criptografic de ret, ea


ce ofera securitate n comunicarea prin ret, ele precum Internetul [17].
Acest protocol este folosit pentru criptarea pe segmente a mesajelor
transmise de alte protocoale. De exemplu, HTTP poate fi securizat cu
TLS, ceea ce da nas, tere protocolului cunoscut sub numele de HTTPS.
54, 114
W3C (World Wide Web Consortium) este principalul consort, iu internat, ional de standardizare a webului10 . Membrii organizat, iei dezvolta s, i
ratifica standarde web precum HTML, CSS s, i SVG. 113, 115117
XHTML (Extensible HyperText Markup Language) este limbajul de
marcare HTML redefinit n format XML. 13, 17, 75
XML (Extensible Markup Language) este un meta-limbaj de marcare,
de descriere structurata a datelor11 , standardizat de catre W3C. Cu
ajutorul acestui meta-limbaj se pot defini alte limbaje de marcare,
precum XHTML, Atom s, i SVG. 13, 15, 24, 61, 88, 105, 113

10
11

http://www.w3.org
http://www.w3.org/XML/

List
a de figuri
1.1

Prima pagina a noului site uav.ro, n limba romana.

3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10
3.11
3.12
3.13
3.14
3.15
3.16
3.17
3.18
3.19
3.20
3.21
3.22
3.23
3.24

Formularul de autentificare. . . . . . . . . . . .
Formularul de resetare a parolei. . . . . . . . .
Pagina de administrare a conturilor. . . . . . .
Opt, iunea de adaugare cont. . . . . . . . . . . .
Lista de drepturi date unui cont. . . . . . . . .
Editarea drepturilor: adaugare sect, iune. . . . .
Editarea drepturilor: adaugare act, iune. . . . .
Editare de profil utilizator. . . . . . . . . . . .
Gestionarul de fis, iere. . . . . . . . . . . . . . .
Gestionarul de pagini. . . . . . . . . . . . . . .
Adaugare pagina noua. . . . . . . . . . . . . .
Setari pagina. . . . . . . . . . . . . . . . . . .
Awebitor: editorul de pagini. . . . . . . . . . .
Adaugarea de imagini n pagini. . . . . . . . .
Blogul Evenimente. . . . . . . . . . . . . . . .
Vizualizarea unui articol n blogul Evenimente.
Arhiva de articole ntr-un blog. . . . . . . . . .
Fluxul Atom al blogului Evenimente n Firefox.
Pagina de administrare a blogului Evenimente.
Adaugarea unui articol n blog. . . . . . . . . .
Editarea unui articol din blog. . . . . . . . . .
Galerie foto pe siteul UAV. . . . . . . . . . . .
Vizualizare poza. . . . . . . . . . . . . . . . . .
Adaugare poza n galerie. . . . . . . . . . . . .
119

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

. . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

5
29
38
41
46
50
51
54
56
57
61
71
74
75
78
83
87
88
89
92
94
95
96
97
98

120
3.25
3.26
3.27
3.28
3.29
3.30
3.31
3.32

DE FIGURI
LISTA
Modificarea unei poze. . . . . . . . . . . . . . .
Pagina de test cu fis, iere de descarcat. . . . . .
Administrarea paginilor cu fis, iere de descarcat.
Incarcarea unui fis, ier. . . . . . . . . . . . . . .
Pagina de contact a Universitat, ii Aurel Vlaicu

Administrarea paginii de contact. . . . . . . . .


Pagina de cautare n site. . . . . . . . . . . . .
Harta siteului UAV. . . . . . . . . . . . . . . .

. . . . . .
. . . . . .
. . . . . .
. . . . . .
din Arad.
. . . . . .
. . . . . .
. . . . . .

.
.
.
.

.
.
.
.
.
. .
. .
. .

101
102
103
105
107
108
110
113

Bibliografie
[1] Documentat, ia Sitemaps XML.
http://www.sitemaps.org/
[2] Documentat, ia pentru XMLHttpRequest.
https://developer.mozilla.org/en/xmlhttprequest
[3] Documentat, ia pentru designMode s, i contentEditable.
https://developer.mozilla.org/en/rich-text_editing_in_
mozilla
[4] Documentat, ia HTML 5.
http://www.whatwg.org/specs/web-apps/current-work/
multipage/
[5] Implementarea open source a algoritmului criptografic SHA-512.
http://jssha.sourceforge.net/
[6] Implementare open source a formatului JSON n PHP.
http://pear.php.net/package/Services_JSON
[7] Implementare nativa a formatului JSON n PHP.
http://www.php.net/manual/en/book.json.php
[8] Descrierea setului de funct, ii criptografice SHA-2.
http://en.wikipedia.org/wiki/SHA-2
[9] Proiectul HTML Tidy.
http://tidy.sourceforge.net/
[10] Libraria Graphics Draw.
http://www.boutell.com/gd/
[11] Descrierea algoritmului fonetic de indexare cuvinte dupa sunet Soundex.
http://en.wikipedia.org/wiki/Soundex
121

122

BIBLIOGRAFIE

[12] Formatul de data s, i ora W3C.


http://www.w3.org/TR/NOTE-datetime
[13] Init, iativa de metadate Dublin Core.
http://dublincore.org/
[14] Topul Integritat, ii Universitat, ilor Publice.
http://uav.ro/ro/universitate/evenimente/topulintegritatii-universitatilor-publice-c-u-c-2010
[15] Descrierea formatului JSON.
http://en.wikipedia.org/wiki/JSON
[16] Descrierea protocolului HTTP.
http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
[17] Descriere a protocolului Transport Layer Security.
http://en.wikipedia.org/wiki/Transport_Layer_Security
[18] Descrierea protocolului FTP.
http://en.wikipedia.org/wiki/File_Transfer_Protocol
[19] Documentat, ia Apache.
http://httpd.apache.org/docs
[20] Documentat, ia PHP.
http://php.net/manual/en/
[21] Documentat, ia MySQL.
http://dev.mysql.com/doc/
[22] Documentat, ia CSS 2.1.
http://www.w3.org/TR/CSS2/
[23] Definit, ia formatului JSON.
http://www.json.org/
[24] Specificat, ia XML.
http://www.w3.org/TR/REC-xml/
[25] Manual JavaScript.
https://developer.mozilla.org/en/JavaScript/Reference
[26] Specificat, ia DOM 3 Core.
http://www.w3.org/TR/DOM-Level-3-Core/

BIBLIOGRAFIE
[27] Specificat, ia DOM 2 Events.
http://www.w3.org/TR/DOM-Level-2-Events/

123

Anexa A
Baza de date MySQL
A.1

blog

Tabelul cont, ine toate articolele din toate blogurile siteului. Acest tabel are
urmatoarele campuri:
id, int(10). Acesta este numarul de identificare al articolului.
pubdate, bigint(14). Data publicarii articolului.
updated, bigint(14). Data la care a fost actualizat ultima oara articolul.
category, varchar(255). Categoria n care apare articolul. In acest caz

categoria se refera la blogul/pagina n care apare articolul. Catego


ria este data de calea paginii / blogului. De exemplu, categoria poate
sa fie universitate/noutati.
path, varchar(255). Calea articolului. De exemplu, aceasta poate fi
noul-site-uav. Utilizatorul poate accesa articolul pe adresa: /ro/
universitate/noutati/noul-site-uav.
title, varchar(255). Titlul articolului.
content, varchar(255). Cont, inutul articolului. Acest camp indica numai
numele fis, ierului HTML care trebuie citit de pe disc pentru afis, area
articolului.
Mai multe detalii despre acest modul n sect, iunea 3.5.
124

A.2. BLOG TAGS

A.2

125

blog tags

Acest tabel asociaza articole din bloguri cu etichete. Campurile tabelului


sunt urmatoarele:
bid, int(10). Numarul de identificare al articolului.
tag, varchar(100). Eticheta asociata articolului.

A.3

gallery

Tabelul cont, ine toate imaginile din toate galeriile de imagini ale siteului.
Acest tabel are urmatoarele campuri:
id, int(10). Acesta este numarul de identificare al imaginii.
pubdate, bigint(14). Data publicarii imaginii.
updated, bigint(14). Data la care a fost actualizata ultima oara imaginea.
category, varchar(255). Categoria n care apare imaginea. In acest

caz categoria se refera la galeria/pagina n care apare imaginea.

Categoria este data de calea paginii / galeriei. De exemplu, categoria


poate sa fie universitate/galerie-foto.
path, varchar(255). Calea imaginii. De exemplu, aceasta poate fi pag26.
Utilizatorul poate accesa imaginea pe adresa: /ro/universitate/
galerie-foto/pag26.
title, varchar(255). Titlul imaginii.
content, varchar(255). Descrierea imaginii este afis, ata sub imagine. Acest
camp indica numai numele fis, ierului HTML care trebuie citit de pe
disc pentru afis, area descrierii.
img, varchar(255). Imaginea care trebuie afis, ata. Valoarea acestui camp
este numele fis, ierului de pe disc.
Mai multe detalii despre acest modul n sect, iunea 3.6.

126

A.4

ANEXA A. BAZA DE DATE MYSQL

search documents en s, i search documents


ro

Acest tabel cont, ine lista de pagini, indexate, care pot fi cautate de utilizatori
folosind opt, iunea de cautare a siteului. Tabelul are urmatoarele campuri:
id, bigint(20). Numarul de identificare al paginii.
title, varchar(255). Titlul paginii.
url, varchar(255). Adresa paginii.
doc, mediumtext. Cont, inutul paginii.
keywords, varchar(255). Cuvintele cheie/importante asociate cu pagina
data.
published, bigint(14). Data la care pagina a fost publicata.
updated, bigint(14). Data la care pagina a fost actualizata ultima oara.
words, mediumint(8). Numarul de cuvinte n cont, inutul paginii.
size, bigint(20). Marimea paginii (n octet, i).
Mai multe detalii despre acest modul n sect, iunea 3.10.

A.5

search doc index en s, i search doc index


ro

Acest tabel indexeaza cuvintele fiecarei pagini indexate de motorul de cautare


al siteului. Campurile tabelului sunt urmatoarele:
ids, text. Lista de numere de identificare a paginilor asociate cu cuvantul
dat.
word, varchar(255). Cuvantul indexat.
total, int(10). Numarul de ment, ionari a cuvantului n toate paginile indexate.
counts, text. Numarul de ment, ionari a cuvantului pentru fiecare pagina
din coloana ids.
Mai multe detalii despre acest modul n sect, iunea 3.10.

A.6. SITEMAP

A.6

127

sitemap

Acest tabel cont, ine lista de pagini indexate pentru harta siteului. Campurile
tabelului sunt urmatoarele:
id, bigint(20). Numarul de identificare al paginii.
title, varchar(255). Titlul paginii.
url, varchar(255). Adresa paginii.
published, bigint(14). Data publicarii paginii.
updated, bigint(14). Data ultimei actualizari.
lang, varchar(3). Limba n care este scris cont, inutul paginii.
Mai multe detalii despre acest modul n sect, iunea 3.11.

S-ar putea să vă placă și