Anda di halaman 1dari 134

UNIVERSITATEA UNIVERSITATEA AUREL AUREL VLAICU VLAICU DIN ARAD DIN ARAD FACULTATEA FACULTATEA DE S DETIINT S TIINT E EXACTE

E EXACTE , , , , DOMENIUL DOMENIUL DE LICENT DE LICENT A: INFORMATIC A: INFORMATIC A , , PROGRAMUL PROGRAMUL DE STUDIU: DE STUDIU: INFORMATIC INFORMATIC A FORMA FORMA DE INV DE INV AT AMAT ANT: AMID ANT: ID
, ,

A A

PROIECTAREA UNUI LUCRARE DE LICENT A , WEBSITE UNIVERSITAR Aplicat , ie practic a: www.uav.ro

INDRUM ATOR S TIINT IFIC ABSOLVENT , , INDRUM Prof. univ. dr. IoanATOR Dzit S TIINT acIFIC S ABSOLVENT ucan M. Mihai , , , , Prof. univ. dr. Ioan Dzit ac S ucan M. Mihai
, ,

ARAD 2011

ARAD 2011

UNIVERSITATEA AUREL VLAICU DIN ARAD APROBAT FACULTATEA DE S TIINT E EXACTE DECAN , , DOMENIUL / PROGRAMUL DE STUDIU Nr. _______ din _______ VIZAT Indrum ator 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 lo cul nas , terii:

Ziua / luna / anul: . . . / . . . / . . . . Lo cul (localitate, judet 4. Prenumele p Tata: . . . Mama: . . . 5. Domiciliul permanent (str., nr., localitate, judet email): ... 6. Sunt absolvent( 7. Forma de inv a) promot
, , ,

): . . .

arint ilor:
,

, cod pos , tal, telefon,

ia: iulie / 2011.

at amant pe care am absolvit-o este: ,


, ,

cu frecvent a, cu frecvent cu tax a, f ar a tax a.

a redus a, ID;

8. Locul de munc a (dac a e cazul): _________________________________________

9. Solicit inscrierea la examenul de licent Sesiunea iulie, anul 2011. 10. Lucrarea de licent urm atorul titlu:
,

a (licent , a, diplom a, disertat

ie):

a (licent , a, diplom a, disertat

ie) pe care o sust

in are

PROIECTAREA UNUI WEBSITE UNIVERSITAR. Aplicat , ie practic a: www.uav.ro. 11. Indrum ator s , tiint, ific: Prof. univ. dr. Ioan Dzit
,

ac.

12. Ment , ionez c a sust , in examenul de licent a (pentru prima oar a, a doua , oar a dup a caz) pentru prima oar as i declar pe propria-mi r aspundere , ca am luat la cunos , tint, a de prevederile art. 143 din Legea 1/2011. Declar c a prezenta lucrare nu este realizat a prin mijloace frauduloase, fiind cons tient de faptul c a, dac a se dovedes , te contrariul, diploma obt inut a , , prin fraud a imi poate fi anulat a, conform art. 146 din Legea 1/2011.

SEMN ATURA

REFERAT
PRIVIND LUCRAREA DE LICENT A ABSOLVENTULUI MIHAI S DOMENIUL: INFORMATIC PROGRAMUL DE STUDIU: INFORMATIC PROMOT , IA 2011 1. Titlul lucr arii:
, ,

UCAN A A

Proiectarea unui website universitar. Aplicat 2. Structura lucr arii:

ie practic a: www.uav.ro.

Lucrarea este structurat a 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 dou a anexe (lista de figuri , si baza de date MySQL). , 3. Aprecieri asupra cont inutului lucr arii de licent , logic a, mod de abordare, complexitate, actualitate, deficient
,

a, organizare
,

e:

Aplicat , ia www.uav.ro reprezint a un site bine realizat la nivel vizual, cu o interfat , a potrivit a cu cont , inutul academic specific. Interfat a este ac, cesibil a ,s i dinamic a, facilit and schimb arile ulterioare la nivel de cont inut , si funct , ionalit at 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 Informatic a. Autorul Mihai S gramare.
,

ucan s-a ocupat cu preponderent

a de partea de pro-

Ca etap a premerg atoare proiect arii aplicat , iei, cei doi autori au studiat mai multe website-uri ale unor universit at i renumite din lume s , din Rom ania: Stanford University Stanford, California, SUA; Carnegie Mellon University Pittsburg, Pennsylvania, SUA, University of Oxford Oxford, Anglia, Marea Britanie; MIT, Rice University, Princeton; Universitatea Politehnic a 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 structurate paginile, s i informat , iile etc. Analiza s-a f acut 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 desc arcat fis , iere un formular de contact e, xibil, uxuri de s , tiri Atom, un motor de c autare precum s , i o hart a 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 fiec arui , , modul sau sect , iuni din site. In realizarea interfet ei au fost parcurse urm atoarele etape: planificare, efectuarea designului, colorarea acestuia, popularea in final, implementarea interfet , ei la nivel tehnic, utiliz and HTML, CSS s , i alte tehnologii web. In final a rezultat o aplicat ie profesional a, care a adus un spor de imagine Universit at ii Aurel Vlaicu s , i a determinat senatul universitar , sa acorde autorilor c ate o diplom a de excelent , a prin hot ararea din 29 septembrie 2010.
, ,

Nici lucrarea s , i nici aplicat , ia practic a nu au cusururi, totus i autorii, , fiind nis te perfect ionis ti, continu a s a-i aduc a optimiz ari aplicat iei s i in , , , , , prezent. 4. Aprecieri asupra lucr arii (se va ment iona: num arul titlurilor , bibliografice consultate, frecvent a notelor de subsol, calitatea , si actualitatea surselor consultate; modul in care absolventul , a prelucrat informat iile din sursele bibliografice, contribut , originale):

ii

Lucrarea este foarte bine documentat a, cont , ine 27 de titluri bibliografice, de cea mai mare actualitate. Aplicat ia practic a este original a in , totalitate, excelent realizat a, pagina web www.uav.ro fiind funct ional a , si activ a. , Consider c a www.uav.ro este unul din cele mai profesionale websiteuri universitare din Rom ania la ora actual a. 5. Concluzii (valoarea lucr arii elaborate de absolvent, relevant studiului intreprins, competent ele absolventului, consecvent , si seriozitatea de care a dat dovad a absolventul pe parcursul , document arii s , i elabor arii lucr arii):
, ,

a a

Munca depus a a fost perseverent a, consecvent a s, i eficient a. Lucrarea are at at o valoare teoretic a, cat s i practic a, care poate fi valorificat a de , proiectant , ii de websiteuri institut ionale. , Absolventul dovedes aplicat , ii web. 6. Redactarea lucr
,

te reale calit

at i de programator profesionist de , a normele de redactare. a

arii respect

Metodologia in vigoare a fost respectat a, in plus, se poate observa c autorul are un stil de exprimare s i redactare de nivel profesionist. ,

7. Nu exist lucr ari.

a suspiciuni de realizare prin fraud

a a prezentei

at ii Aurel Vlaicu din Arad , Realizarea site-ului Universit se bazeaz a pe mult , i ani de studii pe cont propriu s i de munc a , in grafic a s i design. Acest proiect are la baz a un motor de , site la care s-a inceput lucrul inc a din anii de liceu s i este , realizat integral de Marius s i Mihai S ucan.
, ,

Acesta este citat din concluziile lucr arii lui Marius S , ucan, care exprim a un adev ar frumos s , i o pild a de urmat. De ment ionat c a Marius S , ucan , este fratele geam an a lui Mihai S , ucan, care s-a ocupat de partea de design a aplicat , iei. 8. Consider c a lucrarea indeplines in sesiunea de Examene de licent
,

te condit iile pentru sust , a din iulie 2011. ,

inere

Propun comisiei ca absolventul Mihai S ucan, autorul acestei lucr ari s, i , coautorul aplicat , iei www.uav.ro, s a fie notat cu 10 (zece) la examenul de licent , a.

Arad, Data 20 mai 2011 Prof. univ. dr. Ioan Dzit

Indrum ator s , tiint, ific ac ,

Cuprins

Introducere 1 Prezentarea siteului 1.1 Structura siteului pentru utilizatori . . . . . . . . . . . . . . . 6 1.2 Funct 1.3 Funct
,

3 5

ionalit at i pentru utilizatori . . . . . . . . . . . . . . . . . 8 , ionalit at i pentru administratori . . . . . . . . . . . . . . 9 ,

1.4 Compatibilitatea siteului . . . . . . . . . . . . . . . . . . . . . 10 2 Modul de funct 2.2 Cerint ionare al siteului 11


,

2.1 Tehnologiile server-side s


,

i client-side folosite de aplicat

ie . . . 11

ele tehnice pentru server . . . . . . . . . . . . . . . . . . 13

2.3 Privire pe ansamblu . . . . . . . . . . . . . . . . . . . . . . . 13 2.3.1 Prezentarea modulelor din site . . . . . . . . . . . . . . 15 2.4 Structura siteului pe server, fis 3 Extensiile aplicat iei web
,

ierele folosite . . . . . . . . . . 16 26

3.1 Conturi pentru administratori . . . . . . . . . . . . . . . . . . 26 3.1.1 Autentificare . . . . . . . . . . . . . . . . . . . . . . . 29 3.1.1.1 Formularul de autentificare . . . . . . . . . . 29 3.1.1.2 Formularul de resetare a parolei . . . . . . . . 38 3.1.2 Gestionarea conturilor de administrare site . . . . . . . 40 3.1.2.1 Lista conturilor . . . . . . . . . . . . . . . . . 41 3.1.2.2 Verificarea drepturilor unui cont . . . . . . . . 43 3.1.2.3 Ad augarea de utilizatori . . . . . . . . . . . . 46 3.1.2.4 Editarea drepturilor unui cont . . . . . . . . . 50 3.1.2.5 Securitatea sistemului de autentificare . . . . 55 3.1.3 Editare profil . . . . . . . . . . . . . . . . . . . . . . . 56 1

2 3.2 Gestionarea fis ierelor de pe server . . . . . . . . . . . . . . . . 57

CUPRINS

3.3 Gestionarea paginilor . . . . . . . . . . . . . . . . . . . . . . . 61 3.3.1 Structura siteului in format XML . . . . . . . . . . . . 62 3.3.2 Configurat 3.3.3 Ad 3.3.4 Set 3.4.1 Cur 3.5.1 Funct 3.5.2 Funct 3.7 Modulul Fis 3.8 Prima pagin 3.10 Motorul de c
,

ia modulului . . . . . . . . . . . . . . . . . . 66

augarea de pagini . . . . . . . . . . . . . . . . . . . 71 ari pagin a . . . . . . . . . . . . . . . . . . . . . . . 74 at area codului HTML cu ReTidy . . . . . . . . . . 79 , ionalit at i pentru utilizatori . . . . . . . . . . . . 83 , ionalit at i pentru administratori . . . . . . . . . . 92
,

3.4 Editorul de pagini Awebitor . . . . . . . . . . . . . . . . . . . 75 3.5 Blogul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83


,

3.6 Galeria de imagini . . . . . . . . . . . . . . . . . . . . . . . . 96


,

iere de desc arcat . . . . . . . . . . . . . . . . . 102

a . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 autare . . . . . . . . . . . . . . . . . . . . . . . . 110

3.9 Pagina Contact . . . . . . . . . . . . . . . . . . . . . . . . . . 107 3.11 Harta siteului . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Concluzii Glosar List a de figuri Bibliografie A Baza de date MySQL A.1 blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 A.2 blog tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 A.3 gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 A.4 search documents en s A.5 search doc index en s
, ,

115 116 119 121 124

i search documents ro . . . . . . . . . . 126

i search doc index ro . . . . . . . . . . . 126

A.6 sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Introducere
Lucrarea de fat , a prezint a proiectul de licent , a uav.ro incepand cu aspectele generale, pentru a continua mai apoi cu detaliile tehnice despre implementarea s i dezvoltarea proiectului.
,

Scopul proiectului prezentat in aceast a lucrare, stabilit in colaborare cu domnul profesor co ordonator Ioan Dzit , ac 1 , a fost realizarea unui site nou pentru Universitatea Aurel Vlaicu din Arad. Cerint ele noului site au fost , definite astfel: un design nou, mai atr navigare us
, ,

ag ator s i modern, potrivit cu profilul siteului,


,

oar a s i accesibil a pentru diferite tipuri de utilizatori, , an a s i englez a,


,

cont inut bilingv, in limbile rom inc arcarea rapid a a paginilor,

tehnic compatibil cu majoritatea navigatoarelor web, pe majoritatea sistemelor de operare in uz, structur a tehnic a solid a, capabil a s a evolueze in timp,
,

bine structurat din perspectiva informat si concis, ,

iilor oferite vizitatorilor, clar

informativ s i util pentru profesorii s i student , , universitate, s a profeseze sau s a studieze, us , or de ment
,

ii care vor s

a aplice la

inut s , i de actualizat pentru cei responsabili de cont

inut.

In plus fat a de cerint ele ment ionate mai sus, a fost pus a problem a evolut iei , , , , siteului in comparat , ie cu versiunea precedent a. Practic s-a dorit ca noul site sa creasc a, s a fie mai bogat in cont inut, mai informativ, mai bine structurat
,

http://dzitac.rdsor.ro

INTRODUCERE

si mai atr ag ator vizual. De asemenea s-a dorit ca in comparat ie cu celelalte , siteuri de universit at i rom anes ti, noul site UAV s a fie unul care face drep, , tate nivelului universit at ii, un site care pune in valoare principiile, valorile s i , , misiunea a universit at ii. , Pentru realizarea acestui proiect ambit ios am lucrat in colaborare cu Ma, rius S, ucan 2 . Impreun a 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 nece, sit at ile tehnice s , i funct , ionale ale acestuia. Marius S ucan s-a ocupat de partea , , de design a proiectului, determin and cele mai potrivite moduri de exprimare vizual a, construind o identitate vizual a specific a UAV. Eu m-am ocupat de partea tehnic a, implement and platforma aplicat iei web. Domnul profesor a , participat oferindu-ne ghidare important a in realizarea structurii siteului, in definirea tipului de cont inut ce va fi introdus dup a 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 Universit at ii Aurel Vlaicu din Arad este un site modern, cu , un aspect pl acut, profesional, s , i avansat din punct de vedere tehnic. Figura 1.1: Prima pagin a a noului site uav.ro , in limba rom an a.

6 CAPITOLUL 1. PREZENTAREA SITEULUI Siteul include bloguri, galerii de imagini, mo dul specializat pentru fis iere , de desc arcat, un formular de contact exibil, uxuri de s tiri Atom , un motor , de c autare s , i o hart a a siteului. Pentru administratori siteul are un gestionar de fis, iere s, i un gestionar de conturi s i drepturi, pe l ang a editoarele specifice , fiec arei sect , iuni din site. Nu in ultimul r and, platforma siteului este exibil de funct ionalit at i noi in site, f ar a limit ari tehnice.
, ,

a permit , augarea and ad

1.1 Structura siteului pentru utilizatori


Siteul Universit at ii Aurel Vlaicu din Arad are c ateva sect iuni importante, , , pentru diferitele domenii de interes ale vizitatorilor. Aceste sect iuni sunt:
,

Academic sect iunea care cont , ine paginile despre structura anului uni, versitar in curs, despre treptele de studii universitare (licent a, mas, terat s , i doctorat), s , i despre concursurile pentru posturile didactice vacante. Cercetare sect iunea care cont ine informat iile necesare pentru profesorii , , , si student ii interesat i de cercetare in cadrul UAV. , , , Departamente sect ment al UAV.
,

iunea cu informat

ii specifice pentru fiecare departa-

Facult at, i locul unde fiecare facultate UAV are c ate un set de sub-pagini care ofer a 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 universit at ii.
,

Resurse lo cul unde se g platforma e-learning, s

asesc informat ii despre editura UAV, biblioteci, , i direct ia resurse umane salarizare. , ,
,

Reviste locul unde sunt prezentate revistele s universit at ii. ,

i restul de publicat

ii ale

Student , i este sect , iunea specific a pentru tinerii care doresc s a studieze la UAV. Aici se g asesc 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 7 Universitate este sect iunea unde se g asesc informat , ii despre univer, sitate, istoricul acesteia, o prezentare, documente de interes public (licitat , ii, declarat , ii de avere, hot arari ale senatului), nout at is i eveni, , mente.

Structura acestui site se bazeaz a pe un studiu asupra c atorva siteuri de universit at i str aine s, i rom anes, ti. In colaborare cu domnul profesor coordona, tor am stabilit structura asigur andu-ne c a ea va face navigarea siteului mult mai us , oar a pentru utilizatori. Amintim c ateva siteuri studiate: Universitatea de Vest din Timis Universitatea Politehnic Universitatea Politehnic oara 1 ,

a Bucures , ti 2 , a din Timis


,

oara 3 , i4 ,
5

Universitatea Alexandru Ioan Cuza din Ias Universitatea de Vest Vasile Goldis Rice University
6

din Arad

,
7

Stanford University

,
8

Carnegie Mellon University Harvard University University of Oxford


1 2 3 4 5 6 7 8 9 10

,
10

http://www.uvt.ro http://www.upb.ro http://www.upt.ro http://www.uaic.ro http://www.uvvg.ro http://www.rice.edu http://www.stanford.edu http://www.cmu.edu http://www.harvard.edu http://www.ox.ac.uk

8 CAPITOLUL 1. PREZENTAREA SITEULUI

1.2 Funct

ionalit at, i pentru utilizatori

Pentru utilizatori conteaz a in primul r and us , urint, a de navigare s , i us, urint, a cu care ei g asesc informat , iile dorite. Pentru a ajuta in aceast a direct , ie, siteul este bilingv, in rom an a s i englez a, s i ofer a posibilitatea de c autare in cont , inut. , , In plus, o hart a complet a a siteului este disponibil a. Siteul dispune de urm Blog, Galerie de imagini, Fis iere de desc arcat,
,

atoarele module:

Contact, Hart a site,

C autare. Pe prima pagin a este o diaporam a in care poze cu lo cat iile UAV sunt , afis ate. De asemenea sunt listate ultimele articole din blogurile Nout at i s, i , , Evenimente. Nu in ultimul r and sunt afis , ate s, i cele mai importante pagini din site. Blogul permite ad augarea de articole sortate cronologic, pe categorii. Acesta este folosit pentru pagini de genul nout at i sau evenimente. Fie, care articol poate avea etichete atas ate (tags ), pentru a permite o organizare , a articolelor mai bun a, s i pentru a face navigarea mai us oar a pentru utili, , zatori. In plus, fiecare blog include un feed / ux Atom la care se pot abona utilizatorii care doresc s a t, in a pas cu nout at ile din site. Fluxul Atom poate , fi limitat s , i numai pe anumite etichete. Arhiva de articole din fiecare blog permite navigarea dup a data public arii. Modulul de galerie de imagini include s i el suport pentru uxuri Atom, , dac a utilizatorul dores te s a urm areasc a un anumit album de poze.
,

Pagina de contact permite utilizatorilor s a contacteze diferitele departamente ale universit at ii. Formularul este protejat anti-spam cu serviciul online , recaptcha.net . La fiecare pagin a, utilizatorul poate alege s a m areasc a sau s a mics , oreze dimensiunea textului afis at. Articolele pot fi imprimate excluz and elementele , din site care nu sunt relevante exist a un CSS specific pentru imprimare care aranjeaz a paginile s a arate bine pe foaie. Siteul poate fi navigat pe telefoane mobile cu o interfat
,

a adecvat a.

1.3. FUNCT

IONALIT AT I PENTRU ADMINISTRATORI 9 ,

Leg aturile permanente (de forma /pagina/sub-pagina/in loc de index. php?parametrii_care_nu_sunt_intelesi_de_nimeni), permit memorarea mai us , oar a a adreselor, permit motoarelor de c autare s a indexeze mai bine cont, inutul, s , i in general dau o not a important a de profesionalism siteului. Exemple de pagini: Blog Nout Galerie foto: Contact: Hart a site: at i: http://www.uav.ro/ro/universitate/noutati
,

, ,

http://www.uav.ro/ro/universitate/galerie-foto http://www.uav.ro/ro/contact 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 http://www.uav.ro/en/admin glez a. pentru a edita paginile in limba rom pentru a edita paginile in limba enan a,

Siteul dispune de un sistem de autentificare utilizatori, care include posibilitatea de a defini drepturile fiec aruia in cel mai mic detaliu. Mai multe detalii tehnice se g asesc in sect iunea 3.1 .
,

Dac a utilizatorul is , i uit a parola, acesta poate s a isi reseteze parola. El/ea , va primi parola nou a prin email la adresa ce o are configurat a in profilul contului s au. Dup a autentificare, administratorul poate accesa paginile s i sect, iunile de , administrare ale siteului conform drepturilor ce i-au fost acordate. De asemenea, el is , i poate modifica profilul: numele, adresa de email s i parola. , Pe lang a editarea paginilor, administratorii pot modifica bloguri, galerii de imagini s i pot s a incarce fis iere pe server. Un modul specializat pentru , , gestionarea fis , ierelor permite ad augarea de directoare, fis iere, redenumire, , stergere s , i alte operat , ii. , Administratorii care au drepturile necesare pot s utilizatori s i pot s a le editeze drepturile.
,

a adauge sau s

as tearg a ,

Pentru a asigura calitatea cont am inclus s , i o pagin a cu recomand

inutului ad augat de c atre administratori, ari pentru redactarea cont inutului. ,

10 CAPITOLUL 1. PREZENTAREA SITEULUI

1.4 Compatibilitatea siteului


Siteul este compatibil cu: Mozilla Firefox Opera
12 11

,
13

Google Chrome Apple Safari Konqueror


,

14

15

s i Microsoft Internet Explorer

16

In afara celor mai moderne navigatoare web, se pot folosi s i navigatoare , care nu implementeaz a JavaScript si CSS , sau navigatoare care afis eaz a doar , , text. Siteul este accesibil, put and fi folosit s , i de cei care au sisteme Braille de navigare web sau sintetizatoare vocale. Accesibilitatea siteului nu se limiteaz a doar la cele de mai sus. Siteul include comenzi din tastatur a c atre 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 tastatur a, fiind astfel accesibil s , i pentru cei cu handicap motor. Mai mult dec at at at, dou a butoane au fost incluse in site pentru cei care au probleme cu vederea. Acestea permit utilizatorilor s a controleze dimensiunea textului in pagin a textul poate fi m arit sau mics , orat. Nu in ultimul r and, 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 l at ime foarte , redus a. Designul pentru imprimare are in vedere aspectul non-interactiv al siteului, atunci c and acesta se g ases te pe foaie adic a r aman vizibile , doar elementele importante intr-o pagin a: titlul, articolul s i alte elemente , relevante, in funct , ie de pagin a. Toate aceste aspecte de compatibilitate s i accesibilitate contribuie foarte , mult la definirea profesionalismului acestui site de universitate.
11 12 13 14 15 16

http://www.mozilla.com http://www.opera.com http://www.google.com/chrome http://www.apple.com/safari http://www.konqueror.org http://www.microsoft.com/windows/internet-explorer/

Capitolul 2 Modul de funct siteului


,

ionare al

Pentru a explica modul de funct ionare al siteului vom incepe prin a enumera , tehnologiile folosite de acesta s i cerint , ele software pentru serverul web. in , continuare vom descrie a mo dulin care paginile siteului sunt generate dinamic de c atre scripturile PHP. Capitolul se incheie cu o sect iune in care sunt , descrise toate fis , ierele surs a folosite de site.

2.1 Tehnologiile server-side s losite de aplicat , ie


Siteul foloses te urm atoarele tehnologii:
,

i client-side fo-

HTML accesibil, structurat semantic, f ar a tabele pentru layout. Codul este optimizat pentru a fi us or de indexat de c atre motoarele de c autare, , pentru a obt , ine rezultate mai bune la c aut ari. CSS pentru toat a interfat
,

a siteului.

JavaScript pentru elementele interactive din site, de exemplu pentru harta siteului. PHP pentru generarea dinamic a a tuturor paginilor, pe server. Toate documentele HTML sunt generate dinamic atunci c and utilizatorul acceseaz a siteul uav.ro . 11

12 CAPITOLUL 2. MODUL DE FUNCT

IONARE AL SITEULUI

MySQL pentru baze de date. Atunci c and codul PHP genereaz a paginile HTML, baza de date MySQL este folosit a 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 Contact 1 ,si pentru alte date. Fluxuri Atom pentru paginile de tip blog s i galeriile de imagini. Aceste , pagini sunt disponibile s i in format Atom, format care poate fi folosit , de utilizatori pentru a fi informat i automat c and sunt publicate artico, le/imagini noi in site. Sitemaps XML permite motoarelor de c autare s a verifice ultimele modific ari din site [ 1]. Toat a harta siteului este generat a dinamicin format HTML s , i in format Sitemaps XML. Pe lang a tehnologiile ment , ionate mai sus, siteul foloses te in mo d general , DOM pe server c at s i in navigatorul web. Pagina HTML este generat a pe ser, ver intr-un arbore DOM care la final este serializat in formatul dorit: HTML sau XHTML . Codul JavaScript care se execut a in navigatorul web foloses , te si el structura DOM pentru a modifica pagina in funct ie de interact , iunea cu , , utilizatorul. Awebitor este editorul de articole folosit in modulul de administrare. Acesta utilizeaz a XMLHttpRequest [ 2] pentru inc arcarea dinamic tinut s i designMode [ 3] pentru capabilitatea de editare What You See Is , , What You Get (WYSIWYG). a de con-

Noul HTML5 introduce o multitudine de taguri s i funct ionalit at i noi [ 4]. , , , Siteul UAV foloses , te capabilit at i HTML5 in navigatoarele web moderne. , De exemplu, pentru c ampurile de tip email codul foloses te noul atribut , type=email.

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

2.2. CERINT

ELE TEHNICE PENTRU SERVER 13


,

2.2 Cerint
,

ele tehnice pentru server


,

Aplicat ia web uav.ro are urm atoarele cerint

e tehnice pentru server:

PHP 5.2. Pentru cur at area codului HTML la salvarea paginilor in mo, dulul de administrare este necesar s a fie instalat modulul php5-tidy. Apache 2. Pentru a permite utilizarea leg cesar a activarea fis , ierelor de tip .htaccess s rewrite. MySQL 4.1. De obicei siteul este instalat pe sisteme de operare bazate pe Unix, unde aplicat iile ment ionate ruleaz a cel mai bine.
, ,

aturilor permanente este nei a modulului Apache mod ,

2.3 Privire pe ansamblu


Fiecare accesare de pagin a trece prin fis script PHP face chem ari la restul de fis utilizator.
, ,

ierul index.php al siteului. Acest iere in funct , ie de adresa aleas

a de

Vom incepe cu un exemplu de accesare a paginii de 2 . Cererea este procesat sit at ii Aurel Vlaicu din Arad
,

prezentare a Univera astfel:

1. Fis , ierul .htaccess d a instruct , iuni ca Apache sa rescrie adresa sub forma urm atoare: index.php?path2=/ro/universitate/prezentareauniversitatii. 2. Fis , ierul index.php este executat iar acesta preia calea dorit zator din variabila $ REQUEST[path2]. 3. Fis , ierul settings.php este inclus. Acest fis configurare pentru intregul site.
,

a de utili-

ier are doar variabile de

4. Fis , ierul de traducere al siteului este inclus, fie lang_en.php, fie lang_ ro.php, in funct , ie de set arile lingvistice ale utilizatorului. Aceste fis iere , cont in toate mesa jele afis ate de site in limba englez a s i roman a. Set arile , , , lingvistice sunt salvate in 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 caut a in directorul cache/pages/ dac a pagina este deja generat as i , salvat a pe disc, pentru a se evita regenerarea acesteia. In acest caz, fisierul HTML este citit, trimis direct la navigatorul web s i execut , ia se , , incheie. Pentru fiecare cerere se genereaz a un jeton unic pe baza parametrilor din $ GET a se vedea funct ia gen page cache id() din index.php. , 6. Dac a nu exist a pagina in cache, atunci este inclus layout.php. Acest fisier genereaz a s ablonul HTML, scheletul in care meniurile s i cont, inutul , , , paginii vor fi afis , ate. Din acest moment incepe generarea paginii HTML. 7. Se creeaz a un obiect DOMDocument() care s a t in a structura ierarhic aa , paginii, a interfet , ei. In acest DOM se incarc a interfat , a dat a de layout. php in pasul anterior. 8. Se cites te fis ierul xml/site_en.xml sau xml/site_ro.xml. Acest fis , , cont, ine structura siteului, intr-un format XML propriu (vezi sect nea 3.3.1 ).
, ,

ier iu-

9. Se genereaz a meniurile s , i restul interfet , ei, in funct , ie de calea accesat a de utilizator. Datele sunt preluate din structura siteului, din fis ierul , XML citit in pasul anterior. 10. Se caut a calea dorit a de utilizator in structura siteului. Pentru exemplul dat mai sus, prezentarea universit at ii este o pagin a de tip articol. , 11. Fis , ierul XML indic a titlul paginii s , i fis ierul HTML de pe disc care tre, buie afis , at: pages/ro_universitate-prezentarea-universitatii. html. 12. In final, toat a pagina este serializat a in format HTML. Aceasta cont interfat , a siteului impreun a cu cont , inutul paginii accesate de utilizator. Serializarea se face folosindu-se obiectul DOMDocument().
,

ine

13. Rezultatul, pagina complet a HTML, este scris pe discin cache/pages/ pentru a fi reutilizat pe viitor, s i apoi este trimis c atre client (utilizator). , Numele fis , ierului salvat pe disc este rezultatul funct iei de f aramit, are , md5() aplicat a pe s irul de caractere dat de calea accesat a de utilizator, , impreun a cu toate variabilele din cererea HTTP GET. Dac a utilizatorul acceseaz a o pagin a de tip blog, sau alt modul special, atunci diferent , a in execut , ie este minor a. Practic, in loc s a fie citit un fis HTML, in structura XML este notat modulul care trebuie inclus. Acel fis

, ,

ier ier

2.3. PRIVIRE PE ANSAMBLU PHP este inclus, iar din acel moment este responsabil s siteului. Pentru mai multe detalii se poate vedea sect In cazul paginilor de tip blog sau galerie de imagini, exist a genereze cont iunea 3.3.1 .

15 inutul

a not iunea , de sub-directoare in calea aleas a. De exemplu, blogul Nout at i are adresa , /ro/universitate/noutati/, lo c unde se g asesc articole. Co dul care genereaz a paginile blogului verific a intreaga cale accesat a de utilizator pentru a determina articolul dorit, de exemplu /ro/universitate/noutati/ invitatie-la-sport. Sect, iunea de administrare a siteului funct ioneaz a identic, dar in admin/ , include.php este schimbat fis ierul XML care cont ine structura siteului. , , Adic a, nu mai sunt inc arcate 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 g ases te structura siteului de administrare. Astfel, este refolosit a interfat , siteului principal, pentru partea de administrare difer a doar meniurile s paginile care pot fi accesate.

a i ,

2.3.1 Prezentarea modulelor din site


Paginile de tip blog sunt generate de pages/blog.php. Pe prima pagin a 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 accesat a de utilizator. Dac a utilizatorul alege s a incarce un anume articol, atunci doar acela este afis , at. Dac a se acceseaz a uxul Atom al paginii, atunci fis , ierul pages/blog-atom.php este inclus. Acest fis ier PHP afis eaz a in format Atom , , ultimele articole ad augate in pagin a. Blogurile mai au tabelul blog tags (vezi anexa A.2 ) care aso ciaz a articole cu etichete (tags ). Etichetele pot fi considerate drept categorii liber alese de administratorii siteului, atunci c and aces , tia adaug a articolele. Utilizatorii pot filtra articolele pe baza acestor etichete, put and s a citeasc a doar ce ii intereseaz a. Pentru a face paginile blog mai exibile, exist a posibilitatea ca administratorul s a editeze antetul / mesajul afis at pe prima pagin a a blogului. De , asemenea, se poate edita s i panoul lateral lo c unde pot fi ad augate leg aturi , noi sau alte informat , ii. Stilarea paginilor de tip blog este in fis ierul css/blog.css. Cont inutul , , HTML al articolelor este salvat in directorul pages/blog/. In sect iunea de administrare se pot ad auga/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 ad augarea 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 ocup a s i de redimensionarea automat a a imaginilor atunci c and acestea sunt , ad augate pe server. Pentru mai multe detalii vezi sect iunea 3.6 . , Pagina Contact, scriptul pages/contact.php, include un formular HTML ce permite utilizatorilor s a trimit a emailuri c atre destinat , ia dorit a. Destinatiile oferite sunt citite dintr-un fis ier JSON , pages/en_contact.json sau , , pages/ro_contact.json. Utilizatorul trebuie s a treac a 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 in dreapta formularului, s i se pot edita destinat , iile din JSON. , In plus, datele de contact afis ate pe prima pagin a pot fi modificate din acelas i , , loc. Pentru detalii vezi sect iunea 3.9 . , Paginile cu fis , iere de desc arcat, 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, in files/downloads/. Pentru exibilitate, administratorii pot edita titlul s i descrierea fiec arui fis ier. In plus, pot fi , , ad augate leg aturi c atre fis, iere externe. Toate aceste date sunt salvate intr-un fisier JSON in directorul asociat paginii. Pentru detalii vezi sect iunea 3.7 . , , Orice modificare efectuat a este inregistrat a automat cu modulele de Search si Sitemap. Paginile sunt indexate pentru a putea fi c autate s , i pentru a fi , afis ate in harta siteului. ,

2.4 Structura siteului pe server, fis losite

ierele fo-

Lista de directoare s , i fis iere din siteul UAV este prezentat a mai jos pentru a , face mai clar modul de funct ionare al siteului. O trecere in revist a a acestei , structuri permite formarea unei imagini mai clare asupra locurilor unde se poate g asi codul responsabil pentru diferitele funct ii ale siteului. , admin/ Tot codul care face posibil a administrarea siteului.

awebitor-interface.php Scriptul PHP care genereaz a interfat format XHTML . Vezi sect , iunea 3.4 .

a editorului de articole, in

2.4. STRUCTURA SITEULUI PE SERVER, FIS blog.php Modulul de administrare bloguri. Vezi sect check.php Script care verific de acces la admin.

IERELE FOLOSITE 17

iunea 3.5.2 . i are dreptul

a dac a utilizatorul este autentificat s

contact.php Modulul de administrare a

paginii de contact

. Vezi sect , iunea 3.9 . arcat. Vezi

downloads.php Modulul de administrare a paginilor cu fis sect iunea 3.7 . , edit.php Editorul de articole. Vezi sect files.php Gestionarul de fis iunea 3.4 .

iere de desc

iere pe server. Vezi sect

iunea 3.2 . iere. iere. iu-

files-edithtml.php Modul de editare pagini

HTML in gestionarul de fis

files-retidy.php Modul de cur at are pagini HTML in gestionarul de fis , gallery.php Modulul de administrare a galeriilor de imagini. Vezi sect nea 3.6 .

help-ro.html Pagina cu recomand ari editoriale pentru administratorii siteului. In acest document sunt explicate principalele criterii de calitate in redactarea cont
,

inutului.

iframe-layout.php Interfat , a paginilor din admin afis ate in <iframe>-uri. In spet a, , , acest fis, ier layout este folosit c and gestionarul de fis , iere este inclus dinamic intr-un <iframe> de exemplu atunci c and utilizatorul alege s a adauge o imagine in editor. include.php Scriptul inclus de toate paginile din admin. Acesta configureaz diferite aspecte generale ale paginilor de administrare. Mai precis acest fis ier:
,

* incarc a structura siteului de administrare din xml/admin_en. xml sau xml/admin_ro.xml, in funct ie de limba curent ,
3

a.

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

18 CAPITOLUL 2. MODUL DE FUNCT

IONARE AL SITEULUI

* verific a dac a utilizatorul are drepturi de administrare, folosindu-se de check.php. Altfel, accesul nu este permis. * ofer a cateva funct trare. index.php Prima pagin
,

ii generale folosite de paginile de adminis-

a a siteului de administrare.

pages.php Gestionarul de pagini. Aici se poate edita structura siteului. Acest script incarc a xml/site_en.xml sau xml/site_ro.xml s il afiseaz a. Administratorul poate ad auga/edita/s , terge pagini din , structura siteului. Vezi sect iunea 3.3 . , pages-blog.php Modulul care permite ad Vezi sect , iunea 3.5.2 . pages-downloads.php Modulul care permite ad de desc arcat. Vezi sect augarea s , i ,s tergerea paginilor de tip blog.

augarea s i s tergerea paginilor cu fis , , iunea 3.7 . augarea s , i s tergerea paginilor de tip ga, iunea 3.6 . ,

iere

pages-gallery.php Modulul care permite ad lerie de imagini. Vezi sect

permissions.php Editorul de drepturi pentru utilizatori. Vezi sect profile.php Acest script permite utilizatorilor s t iunea 3.1.3 . , users.php Gestionarul de utilizatori. Vezi sect

iunea 3.1.2.4 .

a isi editeze profilul. Vezi sec,

iunea 3.1.2 .

cache/ Cacheul de pagini HTML generate de site. Aceste fis iere sunt refolosite , pentru a asigura inc arcarea rapid a a siteului c and sunt mult , i utilizatori care navigheaz a siteul simultan. blog/ gallery/ pages/ search/

2.4. STRUCTURA SITEULUI PE SERVER, FIS css/ Stilurile folosite in diferite sect

IERELE FOLOSITE 19

iuni ale siteului.

admin.css Stilul pentru paginile de administrare. admin-iframe.css Stilul folosit de paginile de administrare inc arcate in <iframe>uri. In spet , a, acesta este folosit c and iframe-layout.php este incarcat. awebitor.css Stilul folosit pentru interfat nea 3.4 . a editorului de articole. Vezi sect iu-

awebitor_iframe.css Editorul intro duce cont , inutul articolului intr-un <iframe>. Acest fisier de stil este folosit pentru afis area paginilor care sunt in curs , , de editare. blog.css Stilul pentru paginile de tip blog. Vezi sect contact.css Stilul pentru pagina Contact. Vezi sect gallery.css Stilul pentru galeriile de imagini. Vezi sect 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 Vezi sect , iunea 3.10 . eaz a rezultatele unei c aut ari in site. iunea 3.5 .

iunea 3.9 . iunea 3.6 .

20 CAPITOLUL 2. MODUL DE FUNCT sitemap.css Stilul pentru pagina unde este afis nea 3.11 . welcome.css Stilul pentru prima pagin

IONARE AL SITEULUI

at a harta siteului

. Vezi sect iu,

a5 . Vezi sect , iunea 3.8 . arca fis, iere cu gestionarul de

files/ Lo cul unde administratorii siteului pot inc fisiere. ,

downloads/ Aici sunt salvate fis , ierele inc arcate de administratori in paginile cu fis, iere de desc arcat. Vezi sect , iunea 3.7 . gallery/ Aici sunt salvate imaginile din galerii. Vezi sect * normal/ * original/ * thumbnails/ page_templates/ Aici se pot ad auga pagini HTML, s , abloane ce pot fi refolosite c and administratorii doresc s a adauge pagini noi. Vezi sect iunea 3.3.3 . , images/ Imaginile folosite in interfat a siteului. iunea 3.6 .

awebitor/ Iconit, ele editorului de articole. Vezi sect headers/ Imaginile folosite ca antet in site. welcome-headers/ Imaginile folosite ca antet pe prima pagin js/ Fis ierele JavaScript folosite in site. ,

iunea 3.4 .

a. Vezi sect , iunea 3.8 .

admin.js Codul JS folosit in paginile de administrare a siteului.


4 5

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

2.4. STRUCTURA SITEULUI PE SERVER, FIS awebitor.js Editorul de articole. Vezi sect

IERELE FOLOSITE 21

iunea 3.4 .

awebitor_iframe.js Acest fis , ier este folosit in <iframe>-ul ce permite editarea paginilor in modulul de administrare al siteului. ie_fixes.js Co d JS pentru compatibilitatea interfet ei siteului cu navigatorul , web Microsoft Internet Explorer. Acesta implementeaz a afis, area meniurilor s , i repar a alte erori. index.js Co dul folosit in toate paginile siteului UAV. Acesta permite utilizatorilor s a m areasc a/miceasc a dimensiunea textului afis at in site , si restul de funct ionalit at i interactive ale paginilor.
, , ,

login.js Co dul folosit pentru autentificarea utilizatorilor in modulul de administrare. Vezi sect , iunea 3.1.1.1 . sha512.js Co d open source care cripteaz losind algoritmul SHA-512 [ a parola inainte de autentificare fo5]. iunea 3.11 .

sitemap.js Co dul folosit pentru harta siteului. Vezi sect welcome.js Co dul folosit pe prima pagin t iunea 3.8 . , modules/ Scripturi refolosite prin diferite p

a pentru animarea pozelor. Vezi sec-

art, 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 implementeaz a nativ aceste funct , ii [ 7]. recaptcha/ Script open source de pe recaptcha.net . Acesta poate fi folosit pentru protejarea formularelor impotriva spamului. pingomatic.php Script propriu de generare pinguri la motoarele de c sunt specializate pentru bloguri. Acesta foloses pingomatic.com . autare care te serviciul web

22 CAPITOLUL 2. MODUL DE FUNCT

IONARE AL SITEULUI

search.php Script propriu care indexeaz a cont inutul paginilor intr-o baz a de , date MySQL . Acesta permite altor scripturi PHP s a indexeze pagini noi in baza de date, s as tearg a s i s a modifice pagini existente. , , De asemenea, scriptul poate fi folosit pentru efectuarea de c autare in baza de date. Vezi sect iunea 3.10 . , sitemap.php Script propriu care indexeaz a harta siteului. Acesta permite altor scripturi PHP s a indexeze pagini in baza de date, s a s tearg a s i s a , , modifice pagini existente. Sunt incluse funct ii ce genereaz a pagina , HTML pentru harta siteului s i fis ierul Sitemaps XML [ 1] pentru , , motoarele de c autare. Vezi sect , iunea 3.11 . pages/ Aici sunt salvate paginile HTML ad augate de administratorii siteului. Pe lang a fis ierele HTML sunt s , i scripturile PHP care apart in diferitelor , , tipuri de pagini. blog/ Aici sunt salvate fis , ierele HTML ale articolelor ad de tip blog. Vezi sect iunea 3.5 .
,

augate in pagini

downloads/ Aici sunt salvate fis ierele HTML generate pentru paginile care , cont, in fis iere de desc arcat. 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 genereaz nea 3.5 . blog-atom.php Scriptul care genereaz a uxul a paginile de tip blog. Vezi sect iu-

Atom pentru bloguri.

contact.php Pagina cu formularul de contact. Acest script incarc a fis ierul en_ , contact.html sau ro_contact.html pentru a afis a datele de con, tact ale universit at ii, lang a formular. Fis , ierul en_contact.json , sau ro_contact.json este inc arcat pentru afis , area departamentelor ce pot fi contactate din formular. Utilizatorul nu poate s a vad a adresele de email ale departamentelor, dorindu-se a fi o m asur a de protect , ie impotriva spamului. Vezi sect iunea 3.9 . ,

2.4. STRUCTURA SITEULUI PE SERVER, FIS

IERELE FOLOSITE 23

downloads.php Paginile cu fis iere de desc arcat sunt generate de acest script. Vezi , sect iunea 3.7 . , en_contact.html s Datele de contact afis
,

i ro_contact.html ate pe pagina Contact. ,

en_contact.json s i ro_contact.json , Destinat , iile afis, ate in formularul de contact. en_welcome_contact.html s i ro_welcome_contact.html , Datele de contact afis , ate pe prima pagin a. en_welcome_partners.html s i ro_welcome_partners.html , Sect, iunea Parteneri afis , at a pe prima pagin a. gallery.php Paginile de tip galerie de imagini sunt afis Vezi sect , iunea 3.6 . gallery-atom.php Fluxul Atom pentru galeriile de imagini. search.php Pagina de c autare in site. Aceasta afis Modulul modules/search.php este inc t arile dorite in baza de date. Vezi sect eaz a rezultatele c aut arii. arcat pentru a efectua c auiunea 3.10 .
,

ate de acest script.

sitemap.php Pagina care afis , eaz a harta siteului. Acest script incarc sitemap_en.html sau sitemap_ro.html, in funct losit a de utilizator. Vezi sect iunea 3.11 . , sitemap_en.html s i sitemap_ro.html , Harta siteului, in englez as i rom an a. , welcome.php Scriptul care genereaz a dinamic prima pagin

a fis, ierul ie de limba fo-

a. 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 listeaz titlul fiec areia, cu structura meniurilor, s pagini. Vezi sect , iunea 3.3.1 . a toate paginile din site, cu i defines , te tipul fiec arei ,

24 CAPITOLUL 2. MODUL DE FUNCT sitemap.xml Harta siteului in format Sitemaps XML [ de c autare. Vezi sect , iunea 3.11 . 404.php Pagina afis , at a atunci c and utilizatorul incearc inexistent a.

IONARE AL SITEULUI

1], folosit a de motoarele

a s a acceseze o pagin

admin.php Pagina de autentificare in sect iunea de administrare a siteului. Aici , administratorul poate s a isi reseteze parola dac a a uitat-o. Vezi sect , unea 3.1 . awebitor_iframe.php Editorul de pagini incarc a acest fis , ier in <iframe>. In acest fis la r ad acina siteului este introdus co dul HTML al paginilor care urmeaz sa fie editate de utilizator. Vezi sect iunea 3.4 . ,

i-

ier a at a

index.php Punctul de intrare in site. Acest script genereaz a toate paginile. Acesta cites, te set arile siteului, se conecteaz a la baza de date MySQL , cites , te structura siteului din XML s i in funct , ie de calea dorit a de utilizator, , afis eaz a pagina asociat a cu calea dat a. , lang_en.php s i lang_ro.php , Fis ierele de traducere a siteului in limbile englez
,

a s i rom an a.
,

layout.php Scriptul care genereaz settings.php Set arile siteului.

a interfat , a siteului in format XHTML.

.htaccess Fis ierul de configurare pentru , rescriere a cererilor HTTP . .private/ Module private folosite de site

Apache . In acesta se g

asesc regulile de

users/ Modul de autentificare utilizatori s sect iunea 3.1 . ,

i gestionare permisiuni. Vezi

2.4. STRUCTURA SITEULUI PE SERVER, FIS retidy/ Modul de cur

IERELE FOLOSITE 25

at are pagini HTML. Vezi sect


,

iunea 3.4.1 .

Capitolul 3 Extensiile aplicat


,

iei web

In sect iunea 2.3 s-a putut vedea c a siteul este construit intr-un mod exibil ce , permite ad augarea de pagini de orice fel. Nu se impune nici o limit a asupra tipului de pagini trebuie doar s a fie inc arcat 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 c at se poate de zvelt a, de robust a, mini, malist a, f ar a s a aib a funct , ionalit at i ce nu sunt dorite. In acest capitol vom , prezenta extensiile realizate pentru siteul Universit at ii Aurel Vlaicu din , Arad.

3.1 Conturi pentru administratori


Sect, iunea de administrare a siteului poate fi accesat a doar de c atre personalul autorizat. In acest scop a fost dezvoltat un sistem de conturi pentru administratorii siteului, cu autentificare securizat a. Modulul privat .private/users/users.php este scriptul PHP care contine implementarea not iunii de conturi. Clasa RD users manager permite , , autentificarea, resetarea de parole, schimbarea profilului la fiecare utilizator, ad augarea s , i s tergerea de utilizatori, modificarea drepturilor acestora. , Parolele s i drepturile utilizatorilor se g asesc in directorul .private/ , users/sites/. Parolele sunt criptate cu funct ia de f aramit , are SHA-512 , acestea nu pot fi decriptate [ 8]. Pentru drepturile s , i profilul fiec arui utilizator este folosit c ate un fis , ier JSON . Formatul fis , ierului este urm atorul: { u s e r : nume-c o n t , 26

3.1. CONTURI PENTRU ADMINISTRATORI 27 l a s t L o g in D a t e : 0 , / / UNIX timestamp la s t L o g i n I P : 1 2 7 . 0 . 0 . 1 , n r L o g in s : 1 , profile:{ di sp la yN am e : Nume U t i l i z a t o r , e m a i l : a d res a @exa m ple . com }, p er m i s s i o n s : { admin : { vi ew : true , r e c u r s i v e : tru e }, 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 : tru e }, admin \ / p a g e s \ / ro \ / pa g i n a : { e d i t : true , r e c u r s i v e : tru e } } } Dup a cum se poate vedea in codul de mai sus, fis ierul JSON include nu, mele contului, numele afis at, emailul, num arul de autentific ari, data ultimei , autentific ari s i IP-ul.
,

Drepturile unui cont sunt exprimate ierarhic, ca intr-o structur a de directoare, un arbore. Avem utilizatorul care poate efectua un num ar nelimitat de act iuni, in funct , ie de pagin a, in 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 \ / p a g es \ / ro \ / co n t a c t : { e d i t : true , altaactiune:false // orice alt a act iune urmat a de true dac , // sau false dac a nu. }

a este permit

28 CAPITOLUL 3. EXTENSIILE APLICAT Dac a se doresc aceleas recursive : i drepturi pentru sub-pagini, atunci se adaug

IEI WEB a

a dmin \/ p a g es \ / r o \ / co n t a ct : { e d i t : true , r e c u r s i v e : true } Acum pentru /ro/contact/orice-sub-pagina se aplic Dac a nu se dores , te specificarea fiec se poate folosi default : a aceleas , i drepturi.

arei act , iuni permise/nepermise, atunci

a dmin \/ p a g es \ / r o \ / co n t a ct : { // interzicem toate act iunile posibile in afar , d e f a u l t : f a l se , vie w : true }

a de view

Dac a profilul unui utilizator nu defines te nici un fel de permisiuni, impli, cit orice act iune este interzis a. Dreptul pentru act iunile de vizualizare sau , , de editare in diferitele sect iuni ale siteului trebuie acordate explicit fiec arui , 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 29

3.1.1 Autentificare
Pentru autentificare administratorul acceseaz Rom an a: http://www.uav.ro/ro/admin Englez a: http://www.uav.ro/en/admin . a una din paginile de mai jos: ,

Figura 3.1: Formularul de autentificare.

3.1.1.1 Formularul de autentificare Formularul de autentificare foloses te JavaScript , de a fi trimis a la server. Parola nu este nici o dat exact cum o scrie utilizatorul. Ea este criptat SHA-512 [ 8]. Scriptul admin.php genereaz pentru a cripta parola inainte a transmis a plain text a cu funct , ia de f aramit , are

a codul HTML al formularului astfel:

<s c r i p t s rc= / j s / l o g i n . j s type= t e xt / j a v a s c r i p t ></ s c r i pt> <s c r i p t s rc= / j s / s h a 5 1 2 . j s type= t e xt / j a v a s c r i p t ></ s c r i pt> <p><em>A u t e n t i f i c a r e</em></p> <form method=p o s t a c ti on = ? o ns ub m it = r e t ur n a dminF orm Log in ( t h i s ) > <p><l a b el>Cont : <input type=text name= u se r ></ l a b el></p> <p><l a b el>P a r o la :

30 CAPITOLUL 3. EXTENSIILE APLICAT <input type=p as sw o rd name= pa s s ></ l a b el></p> <p> <i nput type= h idd en name= l val ue= ro > <i nput type= h idd en name= l o g i n val ue=n > <i nput type= h idd en name=t o k val ue= $ to ken > <i nput type= su bm it valu e= A u t e n t i f i c a r e > <a hr ef =? f o r g o t =1 >Am u i t a t p a r o la !</ a> </ p> </ form> Dup a cum se poate vedea din cod:

IEI WEB

Sunt incluse dou a 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]. C ampul cont are numele user. C ampul parol a are numele pass.

C ampul ascuns l are valoarea limbii curente: ro sau en. C ampul ascuns login are valoarea n. Dac a serverul nu primes te valoa, rea y nu continu a pro cesarea cererii de autentificare. Aceast a m asur a de protect ie minim a este inclus a pentru a verifica dac a JavaScriptul , a fost executat. Funct ia adminFormLogin() schimb a valoarea acestui , c amp s a fie y. C ampul ascuns tok este un jeton (token), un s ir de caractere ge, nerate aleatoriu de server. Acest jeton este folosit de funct ia , adminFormLogin() pentru criptarea parolei. Serverul as teapt a ca pa, rola primit a s a fie criptat a cu acest s , ir, dac a nu autentificarea es , ueaz a. Sirul se schimb a la fiecare inc arcare de pagin a s i include in el c ateva , , m asuri de sigurant , a ce vor fi discutate in aceast a sect , iune. Pagina de autentificare este generat a de admin.php. Acest script include modulul privat de gestionare a conturilor de utilizatori: .private/ users/users.php. // Includerea modulului privat. Calea este dat a de variabila // global a $GLOBALS[users.php] definit a in settings. php . r e qu i r e o n c e ($GLOBALS [ u s e r s . php ] ) ; PHP

3.1. CONTURI PENTRU ADMINISTRATORI 31

// Se creaz a o instant a a obiectului cu care putem gestiona , // utilizatorii. $ u s e rs m a n a g er = new R D u se rs m a na g er ( ) ; i f ( $ u s er s m a n a g er ->d id a u t h ( ) ) { // Dac a utilizatorul este autentificat deja, facem // redirect , ionarea c atre prima pagin a a siteului de // administrare. header ( Lo c a t io n : / adm in/ in d ex . php ) ; e xi t ; } Variabila $token pentru formular este generat a astfel:

$ t o ken = h tml en ti ti es ( $ us er s m a n a g e r ->g et a u t h t o ke n ( ) , ENT QUOTES, u t f -8 ) ; Funct, ia get auth token() genereaz pentru autentificare. Atunci c and utilizatorul alege s care: a un jeton aleatoriu ce este folosit a se autentifice se face urm atoarea verifi-

i f ( i s s et ( $ POST [ l o g i n ] ) && $ POST [ l o g i n ] == y ) { $authfailed= ! $ u s er s m a n a g er ->l o g i n ( $ POST [ u s e r ] , $ POST [ p a s s ] ) ; if(!$authfailed){ header ( Lo c a t io n : / adm in/ in d ex . php ) ; e xi t ; } } Funct, ia login() face verific arile necesare. Practic fis , ierul admin.php este doar interfat , a, iar users.php se o cup a de implementarea autentific arii, de m asurile de securitate. Un exemplu de $token generat: BaoYC5>,8/<2=3A1036<-61: . . . .

32 CAPITOLUL 3. EXTENSIILE APLICAT In fis, ierul users.php implementarea funct felul urm ator: iei get auth token() arat

IEI WEB a in

p u b li c f u n c t i o n g e t a u t h t o k e n ( ) { // 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(!$tokensite){ returnnull; } // Gener am un jeton aleator pentru sesiunea curent $ t h is ->g e n s es s i o n t o k e n ( ) ; a.

// Gener am dou a valori aleatoare unice pentru cererea // curent a de autentificare. $ t o k en rn d 1 = uni qid ( , tru e ) . time ( ) ; $ t o k en rn d 2 = uni qid ( , tru e ) ; $ t o k en a ut h = ha sh hm ac ( sh a 5 1 2 , $ t h i s ->s e s s i o n t o k e n . $ to k en r n d1 , $ t o k en r n d 2 ) ; // Combin am cele dou a jetoane intr-un jeton. $ p re v = mt rand ( 0 , 1 5 ) ; $ t o k e n f i n a l = chr ( ord ( A ) + $ pr ev ) ; $ le n = s tr l en ( $ to ke n a u t h ) ; fo r ( $ i = 0 ; $ i < $ l en ; $ i++) { $a = $ t o k en a u th [ $ i ] ; $b=$tokensite[$i]; $ a i = i n tv al ( $a , 1 6 ) ; $ b i = i n tv al ( $b , 1 6 ) ; $ t o k e n f i n a l .= chr ( ord ( $ a ) - $ pr ev ) . chr ( ord ( $b ) + $ a i ) ; $ p re v = $ b i ; } // Salv am valorile aleatoare in sesiunea local a, // pe server. $ SESSION [ u s er a u t h r n d ] = array ( $ t o ke n r nd 1 , $ to k en r n d2 , time ( ) ) ;

3.1. CONTURI PENTRU ADMINISTRATORI 33

r et u r n $ t o k e n f i n a l ; } Implementarea funct
,

iei gen session token():

p r o t e ct e d f u n c t i o n g e n s e s s i o n t o k e n ( ) { i f ( ! $ t h i s ->s e s s i o n t o ke 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 f aramit, 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 = ha sh ( s ha 5 1 2 , $ t h i s ->u s e r i p . $ t h i s ->e n g i n e i d . @s e s s i o n i d ( ) . @$ 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 ad minFo rmLo gin ( f rm ) { // Citim jetonul. va r t o k = ad minFo rm Pa rseTo ken ( frm . t o k . v a l ue ) ; if(!tok){ return fa l s e ; } // Folosim jetonul trimis de server pentru a cripta // parola. va r s h a5 1 2 a = new jsSHA ( f rm . u s e r . v a lu e + f rm . p a s s . v a lu e + to k [ 1 ] ) , s ha 5 1 2 b = new jsSHA ( sh a 5 1 2 a . g etH a sh ( SHA-512 , HEX ) ) ,

34 CAPITOLUL 3. EXTENSIILE APLICAT r e s = s ha 5 1 2 b . getHMAC ( to k [ 0 ] , ASCII , SHA-512 , HEX ) ; // Actualiz am variabilele din formular. frm . t o k . 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 ; t o k = s ha 5 1 2 a = s ha 5 1 2 b = r e s = nu l l ; retu rn true ; } Funct, ia adminFormParseToken() este: f u n ct io n adm inFo rmP a rseTo ken ( to k ) { i f ( t o k . le n g t h != 2 5 7 ) { return fa l s e ; } va r t o ka = [ ] , t o kb = [ ] ; // Invers am operat , ia din users. php , // funct ia gen auth token(). , va r p re v = p a r s eI n t ( t o k . ch ar Cod eAt ( 0 ) A . ch ar Cod eAt ( 0 ) ) ; fo r ( va r a1 , b1 , a2 , b2 , a3 , i = 1 ; i < 2 5 6 ; i += 2 ) { a1 = t o k . cha rCo deA t ( i ) ; b 1 = t o k . cha rCo deA t ( i + 1 ); a2 = S t r i n g . fro mC har Cod e ( a 1 + pr ev ) ; t o ka . pus h ( a 2 ) ; a3 = p a r s e I n t ( a2 , 1 6 ) ; b 2 = S t r i n g . fro mC har Cod e ( b1 - a 3 ) ; to kb . pus h ( b2 ) ; p re v = p a r s e I n t ( b2 , 1 6 ) ; } // Primul element din vector este jetonul sesiunii, // al doilea element este jetonul siteului. retu rn [ t o ka . j o i n ( ) , t o kb . j o i n ( ) ] ; }

IEI WEB

3.1. CONTURI PENTRU ADMINISTRATORI 35 Dup a execut , ia codului JavaScript se trimite cererea de autentificare c server, acolo unde se execut a funct ia login() din users.php:
,

atre

p u b l ic f u n c t i o n l o g i n ( $ r e q u s er , $ r e q p a s s ) { // Verific am dac a numele contului este valid: cont ine numai , // caractere alfabetice s i numere. , // Verific am dac a avem variabila de sesiune user auth rnd // unde sunt salvate valorile aleatoare pentru cererea de // autentificare in derulare. if(!$reqpass|| ! $ 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 et ( $ SE SSION [ u s e r a u t h r n d ] ) ) { r et u r n fa l s e ; } // Dac a utilizatorul este autentificat deja, nu permitem

// re-autentificarea. In plus, inchidem sesiunea. i f ( $ t h i s ->d id a u t h ( ) ) { $ t h i s ->lo g o u t ( ) ; r et u r n fa l s e ; } // Valorile aleatoare salvate pe server de // gen auth token() la inc arcarea paginii de autentificare. $ t o k en r nd = $ SE SSION [ u s e r a u t h r n d ] ; unset ( $ SESSION [ u s e r a u t h r n d ] ) ; // Verific am dac a nu a expirat cererea de autentificare. // Dup a inc arcarea paginii de autentificare utilizatorul // are timp maxim 10 minute p an a cererea expir a. i f ( ( time ( ) - $ t o ke n r n d [ 2 ] ) > $ t h i s ->t p e r io d a u t h f o r m ) { r et u r n fa l s e ; } // Verific am dac a utilizatorul este blocat. Salv // num arul de es , ecuri de autentificare. Dup // es , uate IP-ul este blocat. i f ( $ t h i s ->u s e r b l o c k ed ) { r et u r n fa l s e ; } am pe server a 5 incerc ari

36 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

// Citim parola utilizatorului de pe server, in forma // criptat a. $ u s er k ey = $ t h i s ->g et u s e r k e y ( $ r e q u s e r ) ; i f ( ! $ u s er k e y ) { // Dac a numele contului nu exist a consider am c a acesta // este un es , ec de autentificare. $ t h is ->i n c i p f a i l s ( ) ; r e t u r n fa l se ; } // Regener am jetonul sesiunii. $ t h is ->g e n s es s i o n t o k e n ( ) ; // Regener am jetonul de autentificare, folosindu-ne de // variabilele aleatoare salvate pe server de // gen auth token(). $ t o k en a ut h = ha sh hm ac ( sh a 5 1 2 , $ t h i s ->s e s s i o n t o k e n . $ t o ke n r n d [ 0 ] , $ t o ke n r n d [ 1 ] ) ; // Cript am parola de pe server cu jetonul de autentificare. $ p a s s = ha sh hm ac ( s h a 5 1 2 , $ u s er ke y , $ t o k en a ut h ) ; // Compar am valoarea local a $pass cu cea trimis a de client. i f ( $ r e q p a s s != $ pa ss ) { // Valoarea este gres it a, inseamn a c a utilizatorul nu a , // introdus numele contului corect, parola sau jetoanele // folosite pentru criptare au fost diferite. Jetoanele // pot fi diferite doar dac a $token rnd au fost diferite, // dac a IP-ul, navigatorul web sau alte informat ii folosite , // de gen auth token() s-au schimbat. $ t h is ->i n c i p f a i l s ( ) ; r e t u r n fa l se ; } // Utilizatorul este autentificat cu succes!

3.1. CONTURI PENTRU ADMINISTRATORI 37 // Salv am pe server in sesiunea PHP datele despre // autentificare. $ da te a u th = time ( ) ; $ SESSION [ u s er a ut h ] = ar ray ( // Salv am un jeton cu datele despre sesiune. Dac a la // urm atoarele inc arc ari se schimb a ceva, sesiunea este // inchis a s, i utilizatorul trebuie s a se reautentifice. t o k => ha s h hm ac ( sh a 5 1 2 , $ u s e r k ey , $ t h i s ->s e s s i o n t o k e n . $dateauth), us er => $ r e q u s e r , d a t e a u th => $ da te a u t h , d a t e l a s t => $ da te a u t h , ); r et u r n true ; } La fiecare inc arcare de pagin a in sect iunea de administrare funct ia did , , auth() este chemat a. Aceasta verific a dac a valorile din $ SESSION[user auth] sunt inc a valide. La fiecare es , ec de autentificare num arul de es , ecuri este incrementat pentru IP-ul in cauz a. Acest num ar este salvat in directorul .private/users/ ipfails/, intr-un fis ier care are drept nume IP-ul clientului. Un fis , globalfails este folosit pentru a contoriza es ecuri globale, indiferent de , IP-uri. Dac a serverul este supus unui atac concertat, dispersat pe mai multe IP-uri, sistemul de autentificare se blocheaz a la tot i utilizatorii.
,

ier

38 CAPITOLUL 3. EXTENSIILE APLICAT 3.1.1.2 Formularul de resetare a parolei Utilizatorii care uit prin email o parol

IEI WEB

a parola pot opta s a reseteze parola contului. Ei primesc a nou a, la adresa configurat a in profilul lor.

Figura 3.2: Formularul de resetare a parolei.

Pentru formularul de resetare a parolei folosim libr tcha.net . Cod din admin.php:

aria anti-spam

recap-

$ t o ken = h tml en ti ti es ( $ us e rs m a n a g e r ->g et a u t h t o ke n ( ) , ENT QUOTES, u t f -8 ) ; echo <p><em>R e s e t a r e pa ro la </em></p> <fo rm m ethod = p o s t a c t i o n = ? o ns ub mi t = r et u r n a dm inFo rm Fo rg o tP a ssw or d ( t h i s ) > <p><l a b e l >Nume c o n t : <i n pu t t yp e = t e xt name= u s e r ></ l a b el ></p> . r e c a p t c h a g et h t m l ( $ r ec a p t c ha [ p u b l ic k ey ] ) . <p> <i np u t t yp e= h id de n name= f o r g o t v a lu e =1 >

3.1. CONTURI PENTRU ADMINISTRATORI 39 <i n pu t t yp e =h id d en name= s en d p a s s v a l ue =n > <i n pu t t yp e =h id d en name= l v a lu e = r o > <i n pu t t yp e =h id d en name= to k v a lu e = $ t o ken > <i n pu t t yp e =s ub m it va lu e = T ri m i te > <a h r e f =? > In a po i l a a u t e n t i f i c a r e </a> </p> </ fo rm> ; De aceast a dat a folosim funct , ia JavaScript adminFormForgotPassword() si chem am recaptcha get html() pentru a afis a elementele necesare testului , , anti-spam. Ca m asur a de sigurant , a folosim jetonul de autentificare pentru a cripta numele contului, chiar dac a este transmis s i f ar a criptare. Verific am doar , dac a la client funct , ioneaz a toate m asurile de sigurant , a: dac a nu se schimb a sesiunea, dac a nu reus , este s a cripteze numele contului cel mai probabil sunt , probleme tehnice probleme ce pot fi suspectate a face parte din incerc arile unui atacator. La fel ca la formularul de autentificare avem c ampul sendpass cu valoarea init, ial a n. Ea trebuie s a fie y pentru a permite procesarea cererii de resetare a parolei. Funct, ia adminFormForgotPassword() arat a astfel:

f u n c t i o n a dmi nFo rm Fo rg o tP as swo rd ( frm ) { // Citire jeton. va r t o k = ad minFo rm Pa rseTo ken ( frm . t o k . v a l ue ) ; if(!tok){ return fa l s e ; } // Criptare nume cont. va r s ha 5 1 2 = new jsSHA ( f rm . u s e r . v a lu e + t o k [ 1 ] ) , r e s = s h a 5 12 . getHMAC( to k [ 0 ] , A SCII , SHA-5 12 , HEX ) ; // Actualizare formular. fr m . t o k . va l u e = r e s ; fr m . s e n dp a s s . va l u e = y ; s ha 5 1 2 = r e s = nu l l ; return true ; }

40 CAPITOLUL 3. EXTENSIILE APLICAT Dup a ce utilizatorul introduce numele contului s rea anti-spam a serviciului reCaptcha, se execut php:

IEI WEB

i r aspunsul la provocaa urm atorul cod din admin.


,

$ r e s u l t = fa l se ; i f ( i s s et ( $ POST [ f o r g o t ] , $ POST [ s en d p a s s ] , $ POST [ u s er ] , $ POST [ to k ] ) && $ POST [ s e n dp a s s ] == y ) { // Folosim libr aria reCaptcha pentru a verifica r aspunsul // dat de utilizator. $ r e s u l t = r ec a p t c h a ch e ck a n s w e r ( $ r ec a p t ch a [ p r i va t e ke y ] , $ 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 ) { u nset ( $ POST [ se n d pa ss ] ) ; $ p a s s s en d s t a t u s = f a i l e d -r ec a p t c h a ; } } i f ( i s s et ( $ POST [ se n d pa ss ] ) ) { // Reset am parola. $result= $ u s er s m a n a g er ->r e s e t u s er p a s s w o r d ( $ POST [ u s er ] , $ POST [ to k ] ) ; if($result){ // Trimitem parola nou a prin email. // Avem $result[password] s i $result[email]. , } } Scriptul admin.php trimite noua parol a generat a, $result[password], prin email la adresa dat a de $result[email]. Funct ia PHP mail() este , folosit a in acest scop.

3.1.2 Gestionarea conturilor de administrare site


Gestionarea conturilor se face pe baza drepturilor primite de administratorul in cauz a. Pentru ad augarea de conturi noi s , i pentru s , tergerea conturilor existente se foloses , te interfat , a implementat a 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 in clasa RD users manager din .private/users/users.php celelalte fis iere PHP sunt doar interfet , grafice. 3.1.2.1 Lista conturilor Un administrator cu drepturi suficiente poate s conturile altor administratori de site. a vizualizeze s
,

i s a editeze

Figura 3.3: Pagina de administrare a conturilor.

Lista de conturi este generat directorul .private/users/sites/.

a citindu-se lista de fis

iere de pe disc din

Pagina este generat a de scriptul admin/users.php. Acesta face chemare la scriptul admin/include.php. In include.php se fac verific arile dac a utilizatorul are dreptul de a accesa pagina de administrare dorit a. In acest script se cheam auth() din .private/users/users.php. a s, i funct , ia did

42 CAPITOLUL 3. EXTENSIILE APLICAT Pagina dat a de admin/users.php este generat

IEI WEB

a in felul urm ator:

// Modulul de gestionare utilizatori ne ofer a posibilitatea de // a a a lista de utilizatori. Aceast a funct ie returneaz a un , // array/vector de conturi. $ u s e r s = $ u s er s m a n a g er ->g e t u s e r s ( ) ; echo <p>{ $ ln g [ u s e r s ] } </ p> <u l c l a s s = p a g e s l i s t >\ n ; forea c h ( $ u s e r s a s $ u s er ) { $ u s e r 2 = htm lsp ec ia lc ha rs ( $ us e r , ENT QUOTES, u tf -8 ) ; $ u s e r 3 = htm lsp ec ia lc ha rs ( url enco de ( $ u s e r ) , ENT QUOTES, u tf -8 ) ; echo <l i > ; // Verific am dac a avem dreptul s a vizualiz am permisiunile // contului $user. i f ( $ u s er s m a n a g er ->h av e per m ( a dmin/ u s er s / $ us e r , vie w pe rm s ) ) { echo <a h r e f = p e r m i s s i o n s . php? l=$ l . &amp ; u s er=$ u s er 3 > $ us e r2 </a> ; } e l se { echo $ us e r 2 ; } // Verific am dac a avem drepturi s as tergem $user. , i f ( $ us er != $ u s e r s e l f && $ u s er s m a n a g er ->h av e per m ( a dmin/ u s er s / $ us e r , d e l et e ) ) { echo <a c l a s s = us er -d e l h r ef =# u se r -d e l e t e o n c l ic k = r e t ur n s it eA d mi n . u s e r D el e t e ( \ $ u s e r 2 \ , t h i s ) ; >{ $ l ng [ d e l et e -u s e r ]} </ a> ; } echo </ l i > ; } echo </ u l >\n ; Dup a cum se vede in codul de mai sus pagina foloses
,

te o funct

ie spe-

3.1. CONTURI PENTRU ADMINISTRATORI 43 cific a a clasei RD users manager: have perm($sectiune, $actiune). Cu aceast a funct ie verific am dac a utilizatorul autentificat in momentul chem arii , are dreptul s a execute act , iunea dat a in sect , iunea dat a. Aceast a chemare simpl a rezolv a problema granular a a drepturilor in cel mai mic detaliu. 3.1.2.2 Verificarea drepturilor unui cont In implementarea funct iei have perm() se cites te arborele de drepturi aso ciat , utilizatorului pentru a se determina dac a act , iunea in sect , iunea dat a este permis a sau nu.
,

p u b l ic f u n c t i o n h av e per m ( $ s ec t i o n , $ a c t i o n ) { // Verific am dac a utilizatorul este autentificat. i f ( ! $ t h i s ->d id a u t h ( ) ) { r et u r n fa l s e ; } 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. , r et u r n fa l s e ; } e l s e i f ( $ a ct i o n == r e c u r s i v e | | $ a ct i o n == d e f a u l t ) { // Nici act , iuni cu nume speciale. r et u r n fa l s e ; } // Pornim de la r aspunsul implicit: act // permis a. $ r e s u l t = $ t h i s ->p er m d e f a u l t ; iunea nu este

// Citim dreptul implicit al utilizatorului: este posibil ca // acesta s a aib a toate drepturile sau nici unul, implicit. $p erm s = &$ t h i s ->u s e r d a t a [ p e r m i s s io n s ] ; i f ( i s s et ( $ perm s [ d e f a u l t ] ) ) { $ r e s u l t = $ perm s [ d e f a u l t ] ; } // Pornim iterat ia in arborele dat de sect , $ a r r = explo de ( / , $ s e c t i o n ) ; $ pa t h = ; for eac h ( $ a r r a s $ p a r t ) { i f ( $ pa t h == ) { iunea dorit a.

44 CAPITOLUL 3. EXTENSIILE APLICAT $ pa t h = $ pa rt ; }else{ $ pa t h .= / . $ p a r t ; } // Dac a nu este nici un drept in calea curent // nu avem ce face. i f ( ! i s s et ( $ perm s [ $ p at h ] ) ) { co ntinue ; } a,

IEI WEB

// Nu ne intereseaz a drepturile acordate intr-o pagin // p arinte dac a acele drepturi nu sunt aplicate recursiv. i f ( $ pa t h != $ s e ct i o n && ( ! i s s et ( $ perm s [ $ p at h ] [ r e c u r s i v e ] ) | | ! $ perm s [ $ pa t h ] [ r e c u r s i v e ] ) ) { co ntinue ; } // Vedem ce drept este dat act iunii dorite. , i f ( i s s et ( $ perm s [ $ p at h ] [ $ a ct i o n ] ) ) { $ r e s u l t = $ perm s [ $ p at h ] [ $ a ct io n ] ; } e l s e i f ( i s s et ( $ perm s [ $ p a th ] [ d e f a u l t ] ) ) { // . . . sau folosim dreptul acordat implicit pentru // calea curent a. $ r e s u l t = $ perm s [ $ p at h ] [ d e f a u l t ] ; } } // Verific ari specifice pentru gestionarea de conturi. i f ( $ r e s u l t && count ( $ a r r ) == 3 && $ a r r [ 0 ] == adm in && $ a r r [ 1 ] == u s e r s && ( $ a c t i o n == ed i t p er m s | | $ a c t i o n == d e l e t e ) ) {

// Nu permitem utilizatorului curent s a is is tearg a contul. , , i f ( $ a c t i o n == d e l e t e && $ a r r [ 2 ] == $ t h i s ->us er n a me ) { r e t u r n fa l s e ; } e l s e i f ( $ a c t i o n == e di t p er m s &&

3.1. CONTURI PENTRU ADMINISTRATORI 45 $ a r r [ 2 ] == $ t h i s ->us er n a m e ) { // Nu permitem utilizatorului curent s a is i editeze , // drepturile. r et u r n fa l s e ; } // Verific am dac a numele de cont este valid. i f ( ! $ t h i s ->i s u s er n a m e v a l i d ( $ a r r [ 2 ] ) ) { r et u r n fa l s e ; } // Verific am dac a numele de cont exist a. $ 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 ] ) ; if(!$userdata){ r et u r n fa l s e ; } // Verific am dac a drepturile utilizatorului t int a sunt , // editabile, c and act , iunea dorit a este edit perms. // Dac a act iunea este delete verific am dac a utilizatorul , // poate fi s , ters sau nu. i f ( ( $ a c t i o n == e di t p er m s && isset($userdata[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 el 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 ] ) && ! $ u s e r d a t a [ d e l et a b l e ] ) ) { $result=false; } } r et u r n $ r e s u l t ; } Acest model de drepturi este scalabil, poate fi folosit in orice context al siteului, la cel mai mic detaliu.

46 CAPITOLUL 3. EXTENSIILE APLICAT 3.1.2.3 Ad augarea de utilizatori

IEI WEB

Pentru a ad auga un cont administratorul trebuie s lizatorului, numele contului, adresa de email a acestuia s

a introduc a numele utii parola init ial a.


, ,

Figura 3.4: Opt

iunea de ad

augare cont.

La fel ca la orice formular de autentificare, parola nu este transmis a as, a cum este scris a de utilizator, ci aceasta este criptat a cu algoritmul SHA512 [ 8]. Parola este criptat a impreun a cu jetonul siteului, plus se transmite inca un c amp ascuns in care parola este criptat a cu jetonul sesiunii pentru verificare dubl a. Funct , ia siteAdmin.userAddSubmit() este chemat a atunci c and utilizatorul alege s a trimit a formularul la server. Aceast a funct , ie se gases te in fis ierul js/admin.js:
, ,

t hi s . us erA ddS ubm it = f u n c t i o n ( f o rm ) { // Ne asigur am c a numele de cont nu este prea scurt sau // prea lung. i f ( ! fo rm . us ern a me . va l u e | | fo rm . us ern a me . va l u e . l en g t h < 3 ) {

3.1. CONTURI PENTRU ADMINISTRATORI 47 a l e r t ( <?php e ch o $ l ng [ u sern am e-to o -s h o r t ] ; ?> ) ; return fa l s e ; } i f ( fo r m . u ser na me . va lu e . l en g t h > 3 2 ) { a l e r t ( <?php e ch o $ l ng [ u sern am e-to o -l o n g ] ; ?> ) ; return fa l s e ; } fo rm . us ern a me . va l u e = fo r m . us ern a me . va l u e . t o Lo wer Ca s e ( ) ; // Verific am dac a exist a caractere nepermise in numele // contului. i f ( ! / [ a-z0 -9 ] [ a-z0 -9 . -]+$ / . t e s t ( f or m . u ser na me . va lu e ) ) { a l e r t ( <?php e ch o $ ln g [ i n v a l i d -use rna m e ] ; ?> ) ; return fa l s e ; } // Verific am dac a parolele introduse sunt aceleas i. , i f ( fo r m . p a s s 1 . va l u e != f o rm . p a s s 2 . v a l ue ) { a l e r t ( <?php e ch o $ ln g [ pa s sw o rd s -no t-m at ch ing ] ; ?> ) ; return fa l s e ; } // Lungimea minim a a parolei. . . i f ( ! fo r m . pa s s 1 . va l u e | | fo r m . pa s s 1 . va l u e . l en g t h < 5 ) { a l e r t ( <?php e ch o $ ln g [ p a ss wo rd -to o -s h o r t ] ; ?> ) ; return fa l s e ; } // Valid am adresa de email. i f ( ! fo r m . em a i l . va l u e | | ! t h i s . c hec kE m a il ( f rm . em a il . v a lu e ) ) { a l e r t ( <?php e ch o $ l ng [ i n v a l i d -e m a il ] ; ?> ) ; return fa l s e ;

48 CAPITOLUL 3. EXTENSIILE APLICAT } // Citim jetonul de autentificare. va r t o k = t h i s . pa r seA ut hTo ken ( f o rm . to k . v a lu e ) ; if(!tok){ return fa l s e ; }

IEI WEB

// Cript am parola cu jetonul siteului. va r s ha 5 1 2 a = new jsSHA ( f or m . u ser na m e . v a lu e + f or m . p a s s 1 . v a lu e + t o k [ 1 ] ) ; fo rm . p a s s 1 . v a l u e = s h a 5 1 2 a . g et H a sh ( SHA-512 , HEX ) ; s ha 5 1 2 a = n ul l ; // Cript am parola inc a o dat a cu jetonul sesiunii. va r s ha 5 1 2 b = new jsSHA ( f or m . p a s s 1 . v a lu e ) ; fo rm . p a s s 2 . v a l u e = s ha 5 1 2 b . getHMAC( to k [ 0 ] , ASCII , SHA-512 , HEX ) ; t o k = s ha 5 1 2 b = n u ll ; fo rm . t o k . v a l u e = ; retu rn true ; }; Pentru mai multe detalii despre jetoanele folosite s i despre modelul de au, tentificare al utilizatorilor trebuie v azut a sect , iunea 3.1.1.1 . Fis ierul js/admin.js este JavaScript generat dinamic cu PHP . Apache , este configurat s a trimit a fis, ierul admin.js prin interpretatorul PHP vezi fisierul .htaccess din acelas i director. Aceast a abordare este folosit a pentru , , a putea face verificarea dac a utilizatorul este autentificat sau nu, deoarece nu dorim ca utilizatorii neautentificat i s a acceseze fis , iere sensitive din punct , de vedere al securit at ii siteului. In plus, aceast a abordare ne permite s i , , utilizarea de mesa je traduse din lang_en.php s i lang_ro.php. , Pe server, in admin/users.php, la ad augarea unui utilizator se fac aceleas verific ari pentru validarea c ampurilor, pentru a nu permite p ac alirea aplicat i iei
,

3.1. CONTURI PENTRU ADMINISTRATORI 49 web. Dup a validare se execut a:


,

// Drepturile implicite: permitem doar act // paginile de administrare ale siteului. $ d e fa ul t U s er P e rm s = arr ay ( admin => arra y ( vi ew => true , r e c u r s i v e => tru e ) );

iunea view in

// Trimitem cererea de ad augare a unui nou utilizator la // modulul de gestionare a conturilor. $ u s er s m a n a g er ->a d d u s e r ( $ POST [ us erna m e ] , $ POST [ p a s s 1 ] , $ POST [ p a s s 2 ] , array ( d isp la yN a me => $ POST [ d is pl a yn a m e ] , e m a i l => $ POST [ em a il ] ) , $ d e fa ul t U s er P e r m s ) ; iei add user() se verific a dac a utilizatorul are dreptul s a adauge alt , i utilizatori, se verific a dac a pass1 s , i pass2 sunt valide si dac a numele noului cont este valid. La final, fis ierele .key s , i .json pentru , , noul cont sunt salvate in .private/users/sites/.
,

In implementarea funct

Operat , ia de s, tergere a conturilor const a in verificarea drepturilor necesare pentru a face acest lucru s i in s tergerea propriu-zis a a fis, ierelor de pe disc. , ,

50 CAPITOLUL 3. EXTENSIILE APLICAT 3.1.2.4 Editarea drepturilor unui cont Drepturile unui cont pot fi afis ate s, i modificate atunci c , administratorul face click pe un cont: Figura 3.5: Lista de drepturi date unui cont.

IEI WEB

and in lista de conturi

Dup a cum se poate vedea in captura de ecran de mai sus, pagina afis eaz a , intr-un mod us , or de int, eles sect , iunea permissions din fis ierul JSON al con, tului selectat (vezi detalii despre acest fis ier in sect , iunea 3.1 ). Drepturile , pentru fiecare act , iune, din fiecare sect , iune sunt listate lizibil, intr-un limba j accesibil. Gestionarul de drepturi este scriptul admin/permissions.php. Acesta afis eaz a drepturile, permite ad augarea, 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 ad turile contului: auga o sect
,

iune nou a in care s a modifice drep-

Figura 3.6: Editarea drepturilor: ad

augare sect , iune.

Acest formular, precum s i celelalte formulare, apare dinamic, f ar a a fi , reincarcat a pagina. Acest lucru este f acut posibil cu co dul JavaScript din fisierul js/admin.js. Se face doar manipulare DOM si se folosesc evenimente , , de interact , ionare cu formularele.

52 CAPITOLUL 3. EXTENSIILE APLICAT Formularul de ad c ampuri: augare sect , iune in drepturile unui cont are urm

IEI WEB atoarele

Sect , iunea din site: unde utilizatorul poate alege dintre c predefinite sau poate s a scrie calea dorit a manual. Sect sunt: admin, admin/files, admin/pages, admin/pages/en, admin/pages/ro, admin/users.

ateva sect , iuni iunile predefinite

Un c amp adit , ional permite utilizatorului s a scrie calea fis , ierului, utilizatorul sau a paginii dorite pentru care dores te s a modifice drep, turile contului. De exemplu, utilizatorul poate s a aleag a sect , iunea admin/pages/ro s i adaug a contact pentru a mo difica drepturile pa, ginii Contact in limba rom an a. Dreptul implicit pentru orice act Drepturile sunt mos Act Act
, , ,

iune:
,

tenite de la sect a; a.

iunea p arinte;

iunea nu este permis iunea este permis

Drepturile date in aceast

a sect , iune sunt recursive sau nu.

Aceste opt , iuni transpun intr-o interfat a pl acut a opt , iunile tehnice discu, tate in sect iunea 3.1 oferite de fis ierul JSON al fiec arui cont. , , js/admin.js funct In ia siteAdmin.permsAddEditSectionSubmit() valideaz a datele formularului inainte s a fie trimise la server. Practic acest cod concateneaz a sect , iunea predefinit a aleas a de utilizator cu calea scris a in c ampul de tip text. In plus, codul verific a dac a sunt folosite c ai speciale 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 c noul obiect $perms: ampurilor s , i construies , te

$p erm s = $ u s er s m a n a g e r->g e t p e r m i s s i o n s ( $ us e r ) ; $postsection= trim ( tri m( st rto l ow er ( $ POST [ s e c t i o n ] ) ) , / ) ; $p erm s [ $ p o s t s e c t i o n ] = ar ray ( ) ; i f ( $ POST [ d e f a u l t R i g h t ] == a l l o w ) { $p erm s [ $ 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 ) { $p erm s [ $ 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 et ( $ POST [ r e c u r s i v e ] ) && $ POST [ r e c u r s i v e ] == y ) { $p erm s [ $ p o s t s e c t i o n ] [ r e c u r s i v e ] = true ; } // Actualiz am drepturile utilizatorului. $ u s er s m a n a g er ->s e t p e r m i s s i o n s ( $ u se r , $p erm s ) ; Modulul de gestionare conturi este responsabil cu serializarea obiectului $perms in format JSON cu funct ia json encode() s i cu salvarea acestuia , , pe disc. Ambii pas , i sunt triviali, nefiind necesar a exemplificarea acestora cu cod.

54 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

Ad augarea unei act , iuni funct , ioneaz a foarte similar cu cele prezentate mai sus. Utilizatorul alege sect iunea s i act iunea dorit a, pentru ca mai apoi s a , , , bifeze dac a aceasta este permis a sau nu. Figura 3.7: Editarea drepturilor: ad augare act , iune.

Pentru fiecare sect , iune predefinit a s i cunoscut a de modulul de adminis, trare c ampul act iune ofer a opt iuni cunoscute, specifice sect iunii in cauz a. , , , De exemplu pentru admin/users exist a act , iunea edit perms, iar la admin/ files exist a upload. Opt ional, dac a utilizatorul dores , te, acesta poate s a , scrie orice alt a act , iune intr-un c amp text. Codul JavaScript din js/admin.js, c at s i codul din admin/permissions. , php valideaz a valorile c ampurilor. Nu este permis a ad augarea 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, in care un r auf ac ator spioneaz a conexiunea clientului sau a serverului, alter and sau furand datele transmise de ambele p art, i. Aceast a situat , ie poate fi evitat a us or prin instalarea unui certificat digital pe server, in vederea folosirii unei , conexiuni criptate cu protocolul TLS . Dincolo de utilizarea protocolului TLS securitatea siteului depinde s securitatea serverului s i a softului folosit, incep and de la distribut , kernel, Apache, PHP s , i multe alte aplicat , ii. i de ia Linux,
,

Un alt aspect care trebuie luat in vedere este configurat ia serverului in , ret, eaua unde este instalat. De obicei, serverele sunt mult mai susceptibile atacurilor care vin din ret eaua local a.
,

Nu in ultimul r and nu trebuie uitat aspectul uman: administratorii siteului au responsabilitatea de a t ine parolele in sigurant , a, de a folosi parole , puternice de lungime suficient a, cu o variat , ie mare de caractere. Codul prezentat mai sus nu include anumite verific ari adit , ionale, pentru a fi us , or de citit. Pe l ang a verific arile de securitate, orice act iune de au, tentificare, de ies , ire, de ad augare/modificare/s , terge cont este salvat a intr-un istoric care poate fi consultat ulterior. Operat iile efectuate de utilizatori sunt , inregistrate in orice moment.

56 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

3.1.3 Editare profil


Fiecare administrator poate s a isi modifice profilul contului: ,

Figura 3.8: Editare de profil utilizator.

Dup a cum se poate vedea in 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 g ases te in scriptul admin/profile.php. Codul , JavaScript este dat de fis ierul js/admin.js. , La mo dificarea 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 f aramit, are SHA, 512 as, a cum am prezentat in sect iunea 3.1.1.1 . Funct , ia JavaScript chemat a , este siteAdmin.changePassword(). Pe server se execut a set user key() din RD users manager.

3.2. GESTIONAREA FIS

IERELOR DE PE SERVER 57
,

3.2 Gestionarea fis


Administratorii siteului pot s directoare, s a execute operat de editare pagini.

ierelor de pe server

a incarce fis, iere pe server, s a le s tearg a, s a creeze , ii de redenumire, de cur at are pagini HTML ,si , ,

Figura 3.9: Gestionarul de fis

iere.

Pagina din captura de ecran de mai sus este generat files.php. Interactivitatea paginii este dat a de codul js/admin.js.

a de scriptul admin/ JavaScript din fis, ierul

Dup a cum se vede din captura de ecran de mai sus, files.php listeaz a fisierele s, i directoarele din directorul files/OM/, din r ad acina siteului. Uti, lizatorul poate naviga prin ierarhia de directoare de pe server. Cu a jutorul funct, iilor JavaScript fis , ierele/directoarele pot fi selectate, ca mai apoi s a fie aplicate orice fel de operat ii. ,

58 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

Inc arcarea de fis , iere noi pe server se face in directorul curent. Utilizatorul poate ad auga oric ate fis iere dores te simultan, intr-un singur pas. Pentru a , , ad auga un nou fis , ier se face click pe semnul plus + moment in care se execut a funct , ia JavaScript siteAdmin.fileAdd(). t hi s . f il e A d d = f u n c t i o n ( ) { // Formularul de inc arcare fis , iere. va r frm = docu ment . g et E lem en tB yId ( f a d d f ) ; // Primul c amp de tip fis , ier. va r d e f = docu ment . g et E lem en tB yId ( a d d f i l e i n p u t ) ; i f ( ! frm | | ! d ef ) return fa l s e ; // Ad aug am inc a un paragraf cu un c amp de tip fis va r p = docum ent . cr ea te E l em e n t ( p ) , i np = docu ment . cr ea t eE l em e n t ( i np u t ) , a = docu ment . cr ea te E l em e n t ( a ) ; i np . name = d ef . name ; i np . t yp e = d ef . t yp e ; // Opt , iunea de s , tergere a c ampului de tip fis , ier. a . h r e f = # ; a . t i t l e = <?php e cho $ ln g [ admin- j s ] [ 2 ] ; ?> ; a . a d d E v en t Li s t en er ( c l i c k , f u n c t i o n ( ) { t hi s . pa r ent N o de . p a ren tN o de . r em o veC hil d ( th i s . p a ren tN o de ) ; } , f a l se ) ; a . a pp en dC hil d ( do cu ment . cr ea t eT ext N o de ( X ) ) ; p . a pp en dC hil d ( a ) ; p . a pp en dC hil d ( i n p ) ; frm . i n s e r t B e f o r e ( p , d ef . p a ren tN o de . n e x t S i b li n g ) ; retu rn fa l se ; }; Dup a trimiterea fis , ierelor pe server, codul PHP preia lista de fis , iere s, i le pune in directorul curent. In configurat ia modulului exist a o list a de extensii , ier.

3.2. GESTIONAREA FIS

IERELOR DE PE SERVER 59

de fis iere care nu sunt permise. De exemplu, dac a administratorul incearc asa , incarce un fis ier de tip PHP sau de tip executabil (binar), fis ierul este respins. , , Aceast a m asur a a fost implementat a din motive de securitate. Dac a parola administratorului este compromis a, un atacator are acces limitat la server in acest mod. El poate doar s a strice siteul folosind paginile de administrare, dar nu permitem s a execute cod arbitrar pe server. Operat , ia de s , tergere a fis pe directoare, pentru a preveni s pierderi nedorite de date.
,

ierelor este executat a numai pe fis , iere, nu s , i tergerea de directoare in mas a sau posibile ,

Operat ia de redenumire foloses te JavaScript pentru a cere utilizatorului , , noul nume al fiec arui fis , ier selectat. Pe server este folosit a funct , ia PHP rename(). Noile nume nu au voie s a aib a extensii nepermise. Pentru ad augarea unui director utilizatorul este intrebat cu funct prompt() din DOM , in JavaScript, ce nume dores te. Pe server se foloses , funct, ia mkdir() pentru a crea directorul in files/.
, ,

ia te

Restul de operat , ii, cur at, area de pagini HTML s i editarea acestora, sunt , operat , ii modulare. Practic exist a un vector de configurare a modulului files.php care permite ad augarea de noi operat ii ce pot fi aplicate la fis iere. , , Implementarea fiec arei operat , ii se g ases te intr-un alt fis , ier PHP, intr-o funct , ie , bine definit a. Configurat , ia arat a astfel: $ f i l e m o d u l e s = arra y ( // Cur at 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 => arra y ( t i t l e => $ ln g [ mo dule-r et 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 ht m l => arra y ( t i t l e => $ ln g [ mo dule-e d it h t m l ] , j s f u n c => f ileE dit H TML , 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 ileE di tH TM L , c a l l b a c k i n c l u d e => f i l e s -e d it h t m l . php ,

60 CAPITOLUL 3. EXTENSIILE APLICAT a l l o w i n i f r a m e => fa l s e , ) ); Fiecare operat ID-urile retidy s


, ,

IEI WEB

ie nou a are un ID. Cele dou a operat , ii definite mai sus au i edithtml. Propriet at ile de configurare sunt: ,

title defines te titlul afis at in meniul Operat ii. In acest meniu , , , utilizatorul poate executa operat ia definit a. , jsfunc defines , te funct , ia JavaScript chemat a atunci c and utilizatorul face click pe aceast a operat , ie in meniul paginii cu fis , iere. file required este o proprietate boolean a care indic se poate executa numai pe fis iere sau nu. , a dac a operat , ia and se a dup a

callback include defines te fis , ierul PHP care va fi inclus c , execut a operat , ia pe fis , iere. callback func defines te numele funct iei PHP care se execut , , includerea fis , ierului dat de callback include.

allow in iframe este o proprietate boolean a care indic a dac a operat , ia poate fi executat a atunci c and gestionarul de fis , iere este afis , at in <iframe>-uri. Editorul de pagini permite ad augarea de imagini in articole. Pentru ad augarea de imagini utilizatorul foloses te acest gestionar de fis iere pentru a , , naviga pe server, pentru a selecta imaginea dorit a. 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 mo dificare a unui director sau fis ier , este trecut a prin verificarea drepturilor necesare ale utilizatorului. Administratorul poate avea, de exemplu, dreptul de a inc arca s , i edita fis , iere numai intr-un anumit set de directoare a se vedea sect iunea 3.1.2.4 . ,

3.3. GESTIONAREA PAGINILOR 61

3.3 Gestionarea paginilor


Paginile siteului uav.ro pot fi ad augate, modificate s gestionarul de pagini:
,

i s terse foarte us
,

or din

Figura 3.10: Gestionarul de pagini.

Dup a cum se poate vedea din captura de ecran de mai sus, toate paginile din site sunt listate ierarhic. Administratorul poate s a vad a din prima secund a harta siteului. El poate alege s a editeze orice pagin a dores , te in orice moment. S aget, ile din st anga permit utilizatorului s a ordoneze paginile in meniurile siteului. Meniul Opt iuni din dreapta fiec arei pagini afis , eaz a: ,

62 CAPITOLUL 3. EXTENSIILE APLICAT Viziteaz a pagina este o leg rul poate face click pe aceast pagina la utilizatori. Adaug a o pagin Set ari pagin paginii.

IEI WEB

atur a direct a la pagin a. Administratoa opt iune pentru a vedea cum arat
,

a aici permite ad

augarea unei sub-pagini. a modifice titlul s


,

a permite administratorului s

i calea

S terge permite s tergerea paginii. Aceast , , pagina nu are sub-pagini.

a opt , iune apare doar dac

3.3.1 Structura siteului in format XML


Codul PHP care afis , eaz a s i modific a structura siteului este in fis ierul admin/ , , pages.php. Acesta cites te fis, ierul xml/site_en.xml sau xml/site_ro.xml , in funct ie de limba aleas a de administrator. Funct ia recursiv a listPages() , , este chemat a pentru a afis , a ierarhia paginilor. Fis, ierele xml/site_en.xml s i xml/site_ro.xml ment , din site. Acest format XML propriu arat a astfel:
,

in lista de pagini

<?xml versi o n= 1 . 0 en co d i ng= u tf -8 ?> <n av xmln s= h t t p : / /www. r o b o d e s ig n . r o / ns / na v -1.1 > <menus x m l : id= r o o t i n c l u d e= 0 l i n k s = 1 > <menu x m l : id= welco me p a th= in d ex i n c l u d e= 1 h i d e= 1 > <t i t l e>Aca s a</ t i t l e> < f i l e >p a g es / welco me . php</ f i l e> <cs s med ia= s cr e en , p r o j e c t i o n > c s s / welco me . c s s </ c s s> </menu> <menu x m l : id= s i te m a p p a th= s it em a p i n c l u d e= 1 h i d e= 1 > <t i t l e>H a rta s i t e</ t i t l e> < f i l e >p a g es / s i te m a p . php</ f i l e> <cs s med ia= s cr e en , p r o j e c t i o n > c s s / s it e m a p . c s s </ c s s> </menu> <menu x m l : id= u n i v e r s i t a t e p a th= u n i v e r s i t a t e in cl u d e= 0 s ub= su b-u n i v e r s i t a t e >

3.3. GESTIONAREA PAGINILOR 63 < t i t l e>U n i ve r s i t a t e</ t i t l e> < f i l e >p a g e s / r o u n i v e r s i t a t e . htm l</ f i l e > </menu> <menu xm l : id= co n t a c t pa th= c o n t a c t in c l u d e= 1 hi d e= 1 > < t i t l e>C o nt a ct</ t i t l e> < f i l e >p a g e s / co n t a c t . php</ f i l e> <c s s m ed ia= s cr e en , p r o j e c t i o n > c s s / co n t a ct . c s s </ c s s> </menu> <!-- . . . --> </m enus> <m enus xm l : id= su b-u 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 xm l : id= u n i ve r s i t a t e -co n d u ce re p at h= u n i v e r s i t a t e / co n d u ce re i n c lu d e= 0 > < t i t l e>C on du cer ea U n i v e r s i t a t i i</ t i t l e > <file> p a g es / r o u n i v e r s i t a t e -co n d u ce re . htm l </ f i l e > </menu> <menu xm l : id= u n i ve r s i t a t e -p r e z e n t a r e p at h= 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 lu d e= 0 > < t i t l e>P r e ze n t a r ea U n i v e r s i t a t i i</ t i t l e > <file> p a g es / r o u n i v e r s i t a t e -p r e z e n t a r e . htm l </ f i l e > </menu> <!-- . . . --> </m enus> <!-- . . . --> </ nav> In co dul surs a de mai sus pot fi v azute trei taguri importante:

<nav> este nodul r acest tag pot s

ad acin a al documentului f a apar a doar taguri <menus>.

ar a a avea alt rol. In

64 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB iune

<menus> grupeaz a impreun a opt, iunile dintr-un meniu. Fiecare opt este dat a de un element <menu>. <menu> reprezint a o opt iune dintr-un meniu, o pagin
,

a.

Pentru fiecare element <menu> se pot folosi urm

atoarele atribute:

xml:id este jetonul unic de identificare a paginii. Acest jeton trebuie sa fie unic in 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 ierarhic a a site, ului: meniuri cu submeniuri. Orice meniu poate avea un atribut sub care cheam a/include sub-pagini din alte grupe de meniuri (<menus>). path defines
,

te calea complet

a a paginii.

include este un atribut boolean. Dac a valoarea este 1 atunci fis ierul , paginii dat de elementul <file> este inclus s i executat de PHP. , Dac a valoarea atributului este 0, atunci fis ierul indicat de <file> , este citit ca un document HTML ,si trimis exact cum este la navigatorul web, f ar a a fi interpretat. link defines , te tipul de leg sunt posibile: atur a pentru pagina definit a. Trei valori

0 pentru a folosi calea dat este ea, f ar a mo dific ari.

a de <file> sau de <link> as

a cum

1 pentru a genera o adres a permanent a: practic leg atura paginii va fi valoarea atributului path. In unele cazuri, in unele configurat ii ale siteului calea are ca prefix limba aleas a , de utilizator. Acest tip de leg aturi sunt folosite pe siteul uav.ro . 2 pentru a folosi o leg atur a direct a c atre index.php. Acest tip de leg aturi sunt folosite atunci c and serverul web Apache nu poate fi configurat s a accepte rescrierea adreselor accesate de utilizatori. Un exemplu de leg atur a de acest tip: index. php?path=/ro/universitate/prezentare. hide este un atribut, cu valoare boolean cunderea paginii din lista de meniuri afis a 0 sau 1, care permite asat a pe site. ,

3.3. GESTIONAREA PAGINILOR 65 subpath este un atribut, cu valoare bo olean a 0 sau 1, care spune c a mo dulul indicat de <file> pentru pagina curent a se va o cupa cu procesarea c aii, a adresei accesate de utilizator. Practic in acest moment se opres , te c autarea paginiiin structura XML a siteului. Se consider a c a pagina g asit a este cea dorit a, chiar dac a adresa accesat a are mai multe p art, i componente. De exemplu, dac a utilizatorul intr a pe /universitate/noutati/articol-1, blogul Nout at i , preia calea s , i caut a s a afis , eze articolul cu jetonul de identificare articol-1. Toate elementele <menus> trebuie s a aib a atributul xml:id. Acestea pot sa aib a s, i atributele links s i include. Dac a un element <menu> nu are , atributul include, valoarea implicit a este preluat a de la elementul p arinte <menus> la fel s , i cu atributul link. Alte taguri care pot s <title> titlul paginii. <file> fis
,

a apar a in <menu>:

ierul care se dores

te a fi afis , at sau interpretat de PHP.

<link> meniurile pot avea leg aturi c atre pagini externe. In acest caz se foloses, te tagul <link> pentru a indica adresa. <css> permite asocierea unui stil CSS cu pagina dat a. Stilul este ad augat in antetul paginii, in <head>. Opt ional, se poate folosi , atributul media pentru a indica pe care media se aplic a un anume stil. In admin/pages.php fis
,

ierul XML este citit astfel

$ do c = new DOMDocument ( 1 . 0 , u t f 8 ) ; $d oc->p r es e rv eW hi t eS p a ce = f a l s e ; $d oc->f or m at Out pu t = tru e ; $d oc->l o a d ( xm l/ s i t e $ l a n g . xml ) ; Chemarea la funct ia listPages() pornes te de la elementul <menus , , xml:id="root">. Fiecare pagin a dat a de elementele <menu> este afis at a. , Pentru acele pagini cu atributul sub, funct ia este re-chemat a 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 ( $ m en u ro o t ) { g l o b a l $ do c , $ u se r s m a n a g e r ;

66 CAPITOLUL 3. EXTENSIILE APLICAT $ ro o t = $d oc->g et E lem en tB yId ( $m en u ro o t ) ; echo \n<u l >\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 cl 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 ) ; $ s u bs = $ r o o t ->c h ild N o d es ->l en g t h ; for eac h ( $ r o o t ->ch il d N o d e s a s $menu ) { $ h i d e = $menu->g e t A t t r i b u t e ( h id e ) ; $ pa t h = array ( ) ; $ pa t h [ s t r i n g ] = $menu->g e t A t t r i b u t e ( pa th ) ; $ pa t h [ a r ra y ] = explo de ( / , $p a th [ 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 ( $subm enu ) ; } echo \n</u l >\n ; }

IEI WEB

Drepturile administratorului de a ad auga pagini, de a le s terge sau mo, difica sunt verificate pentru fiecare pagin a listat a. Se face chemare la: $ u s er s m a n a g er ->h ave per m ( adm in/ pa g es / $ l n g / $ c a l e , $ a ct i u n e ) ; . . . unde $lng este limba curent $actiune este act iunea dorit , a, $cale este calea paginii din list a de exemplu add, edit sau delete. a, iar

3.3.2 Configurat
,

ia modulului
a astfel:

Configurat ia modulului de administrare a paginilor arat

// Lista de module cunoscute. In listPages() pentru fiecare element // <menu include="1"> se verific a dac a modulul indicat de <file> // apare in vectorul de mai jos. $GLOBALS [ kno wn mo du les ] = arr ay (

3.3. GESTIONAREA PAGINILOR 67 // Prima pagin a a siteului. Vezi sect p a g es / welco me . php => ar ray ( // Nu permitem s tergerea paginii. , d e l e t a b l e => fa l s e , iunea 3.8 .

// Pagina este editabil a ca un articol simplu. e d i t a b l e => s im 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 ng ua g e ] . w e l co m e p a r t n e r s . htm l , a dd mo d ule => s im pl e , // Nu permitem schimbarea c aii pentru aceast a l l o wS e tP a t h => fa l s e , ), // Pagina Contact. Vezi sect iunea 3.9 . , p a g es / co nt a ct . php => ar ray ( d e l e t a b l e => fa l s e , // Aceast a pagin a este editabil a, dar are propriul modul de // administrare. e d i t a b l e => l i n k , // Indic am cu o leg atur a care este adresa editorului pentru // aceast a pagin a. ed i t L i n k => co n t a c t . php? l= . $GLOBALS[ now ] [ l a ng ua g e ] , // Permitem schimbarea c aii. a l l o wS e tP a t h => true , ), // Paginile de tip blog. Vezi sect p a g es / bl o g . php => arr ay ( // Pot fi s , terse. d e l e t a b l e => true , // C and se execut // aici. . . iunea 3.5 . a pagin a.

a cererea de s

tergere includem fis

ierul PHP indicat

68 CAPITOLUL 3. EXTENSIILE APLICAT d e l e t e I n c l u d e => p a g es-b lo g . php , // . . . s , i execut am funct , ia . . . d e l e t eF u n c t i o n => a d m in Blo g D el ete P a g e ,

IEI WEB

// Propriul modul de administrare a blogului. // C and utilizatorul face click pe aceast a pagin a se face redirect // 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 in k => bl o g . php? l= . $GLOBALS[ now ] [ la ng u a g e ] . &amp ; ca t= ,

ionare

// Aici indic am dac a dorim s a avem calea paginii transmis a la scriptul // dat de editLink. Astfel blogurile pot s a aib a articole diferite // pentru fiecare sect iune din site. , ed itP a r am => true , // Jeton care indic a dac a se pot ad // Vezi $GLOBALS[add modules]. a dd mo du le => bl o g , auga alte module de acelas i tip.

// Permitem schimbarea c aii pentru bloguri, dar trebuie executat // funct , ia dat a de setPageFunction din fis ierul indicat , // de setPageInclude. a l lo w S et P a th => true , s e tP a g eF u n ct io n => a d mi nBlo g Se tP a g e , s e t P a g e In c l u d e => p a g es-b lo g . php , ), // Paginile de tip galerie de imagini. Vezi sect iunea 3.6 . , p a g es / g a l l e r y . php => arr ay ( // 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 => p a g es-g a l l e r y . php , d e l e t eF u n c t i o n => a dm i n Ga ll er y D el et eP a g e , e d i t a b l e => l i n k , e d i t L in k => g a l l e r y . php? l = . $GLOBALS[ now ] [ la ng u a g e ] . &amp ; ca t= , ed itP a r am => true ,

3.3. GESTIONAREA PAGINILOR 69 a dd mo d ule => g a l l e r y , a l l o wS e tP a t h => true , s e tP a g eF u n ct i o n => a dm i nG a lle r yS et P a g e , s et P a g e I n cl u d e => pa g es -g a l l e r y . php , ), // Paginile cu fis iere de desc arcat. Vezi sect , iunea 3.7 . , p a g es / d ow nl oa d s . php => ar ray ( d e l e t a b l e => true , d e l e t e I n c l u d e => pa g es -do wn lo a ds . php , d el e t eF u n ct i o n => a d mi nD o wn lo ad sD el eteP a g e , e d i t a b l e => l i n k , ed i t L i n k => d o wn lo a ds . php? l= . $GLOBALS[ now ] [ l a ng ua g e ] . &amp ; ca t= , ed itP a r a m => true , a dd mo d ule => d o wn lo a ds , a l l o wS e tP a t h => true , s e tP a g eF u n ct i o n => a dm in Do wn loa d sSet P ag e , s et P a g e I n cl u d e => pa g es -do wn lo a ds . php , ), ); // Dac a un element <menu include="1"> are un fis // folosim set arile de mai jos. $GLOBALS [ un kno wn m od ules ] = a rray ( d e l e t a b l e => fa l s e , e d i t a b l e => fa l s e , a l lo wS e tP a t h => fa l s e , ); ier necunoscut

// La opt , iunea de ad augare pagini utilizatorul poate selecta tipul de // pagin a. Lista de mai jos indic a tipurile de pagini care pot fi ad $GLOBALS [ a d d m o d ul es ] = ar ray ( 0 => s im p l e , s i m p l e => true , b l o g => arra y ( // Fis , ierul care apare in <file> c and pagina de tip blog este ad f i l e => $ p a g es p a t h . / b lo g . php , // Funct , ia chemat a cand se adaug a o pagin a de acest tip. ca l l F u n c => a dminBlog AddP ag e ,

augate.

augat a.

70 CAPITOLUL 3. EXTENSIILE APLICAT // Funct , ia este luat a din fis , ierul. . . ca l l F u n c F il e => p a g es-b lo g . php ,

IEI WEB

// Indic am dac a acest modul dores , te s a preia controlul c aii. // De exemplu: /pagina1/ subpagina2/ blog3/ articol . // Motorul siteului nu va incerca s a caute articol in structura XML, // ci va da control modulului executat. s ub pa t h => true , ), g a l l e r y => arra y ( // Paginile de tip galerie de imagini. f i l e => $ pa g es p a t h . / g a l l e r y . php , c a l l F u nc => a dm inGa ller yA ddP a g e , ca l l F u n c F il e => p a g es-g a l l e r y . php , s ub pa t h => true , ), do w nlo a ds => arra y ( // Paginile cu fis iere de desc arcat. , f i l e => $ pa g es p a t h . / d o wn lo a ds . php , c a l l F u nc => adm inDo wnloa dsAddP ag e , ca l l F u n c F il e => p a g es-d o wn lo a ds . php , // Nu avem directoare virtuale in acest tip de pagini. s ub pa t h => fa l s e , ), l i n k => true , t em p l a t e => true , ); Dup a cum se poate vedea din codul de mai sus s i din comentariile expli, cative, lista paginilor este generat a dinamic in funct , ie de mult , i factori. Codul este extensibil, fiind permis a implementarea unei game largi de module, de funct, ionalit at i noi in site. , Adancimea maxim a de pagini in ierarhie este dat a de $max depth. Aceast a valoare este aleas a in funct , ie de designul siteului. Unele interfet e de site per, mit o ierarhie mai ad anc a, unele mai put in. Pentru siteul uav.ro folosim , adancimea maxim a de trei pagini, conform limitelor impuse de design.

3.3. GESTIONAREA PAGINILOR 71

3.3.3 Ad

augarea de pagini
a

Administratorul cu drepturi suficiente are posibilitatea s a adauge pagini noi in una sau mai multe sect iuni ale siteului. Formularul de ad augare arat , astfel: Figura 3.11: Ad augare pagin a nou a.

C ampurile din formular sunt: Titlul este titlul paginii. Calea este calea paginii. Acest c amp este opt sa fie un jeton din caractere alfanumerice. Dac
,

ional. Valoarea trebuie a nu se introduce

72 CAPITOLUL 3. EXTENSIILE APLICAT nici o valoare, atunci co dul PHP genereaz titlului. Modul/tipul de pagin

IEI WEB

a calea paginii pe baza a ad augat a.

a permite alegerea tipului de pagin

Pagin a ascuns a permite ascunderea paginii din lista de meniuri. Pagina poate fi accesat a dac a adresa ei este s , tiut a. In navigatorul web se folosesc funct ii JavaScript din fis , siteAdmin.pageAdd() s i pageAddSubmit(). Acestea afis , il valideaz a inainte de a fi trimis la server.
,

ierul js/admin.js: eaz a formularul s

Pe server, in funct , ie de opt , iunile alese de utilizator, se construies te un ele, ment <menu> care este ad augat in r ad acina dorit a, intr-un element <menus>. Structura DOM actualizat a este salvat a inapoi in fis , ierul XML. Not, iunea de module pentru site este implementat a cu meniuri, pagini care includ fis iere PHP. Atunci c and utilizatorul alege un mo dul defapt el alege , fisierul PHP care urmeaz a s a fie inclus. Modulele urm atoare pot fi alese: , Un singur articol se refer a la o singur a pagin a HTML care poate fi editat a de administrator, f ar a PHP. In XML aceasta este reprezentat a cu un <menu> care are atributul include="0" s i un , <file> care are calea c atre un fis , ier HTML de pe disc, in directorul pages/. Blog se refer a la scriptul pages/blog.php. Acest script este pus in tagul <file>, iar <menu> primes te atributul include="1". Pentru , detalii despre mo dulul Blog vezi sect iunea 3.5 .
,

Galerie de imagini se refer a la scriptul pages/gallery.php. Acesta este ad augat la fel ca blogul. Pentru detalii despre acest tip de pagini vezi sect , iunea 3.6 . Fis iere de desc arcat se refer a la scriptul pages/downloads.php. , Acest tip de pagini permit utilizatorilor s a descarce fis , iere dintr-un director asociat. Pentru detalii vezi sect iunea 3.7.
,

Leg atur a spre o pagin cu un <link>.

a extern

a adaug

a doar un element <menu>

S ablon: nume-s , ablon adaug a un articol, o pagin a HTML, dar preia , un cont , inut predefinit. Lista de s abloane este preluat a din direc, torul files/page_templates/. Fiecare fis ier HTML din director , este afis , at in aceast a list a. C and utilizatorul alege un s ablon acel , fis ier este preluat in noua pagin a. ,

3.3. GESTIONAREA PAGINILOR 73 Jetonul unic de identificare al paginii s i calea paginii, dac a nu este spe, cificat a, 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 A dm inGene ra teId ( $ t x t ) { $ id = m b s t r t o l o w e r ( $ t x t ) ; // Transliterat , ia caracterelor, pentru a elimina diacriticele. s e tl o c a l e ( LC ALL , en ) ; $ id = @ico nv ( u t f 8 , a s c i i / /TRANSLIT , $ id ) ; s e tl o c a l e ( LC ALL , $GLOBALS [ now ] [ l a ng ua g e ] ) ; $ id = pr eg r epl ac e ( / [ a-z0 -9\-]/ , - , $ id ) ; $ id = tri m( $ i d , - ) ; $ id = pr eg r epl ac e ( /\-+/ , - , $ i d ) ; $ id = pr eg r epl ac e ( / \ d+/ , , $ i d ) ; $ id = tri m( $ i d , - ) ; // Dac a nu r aman suficiente caractere, folosim data curent i f ( ! i s s et ( $ id { 1 } ) ) $ id = id . date ( Y-m-d-H-i -s ) ; r et u r n $ id ; } Dup a ce calea s , i ID-ul paginii sunt generate, se creaz a un nou element <menu> in care se introduc atributele s i restul de elemente in funct ie de , , alegerile utilizatorului. Pentru articole simple se creaz a un fis , ier HTML nou in directorul pages/. Pentru celelalte mo dule se fac chem ari la funct , iile lor specifice, as , a cum s-a putut vedea in sect iunea 3.3.2 . , La final, structura XML a siteului este salvat din directorul xml/. a inapoi pe disc in fis
,

a.

ierul

74 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

3.3.4 Set

ari pagin

a
,

Set arile paginii pot fi modificate us

or cu formularul prezentat mai jos:

Figura 3.12: Set

ari pagin a.

Administratorul poate modifica titlul s sub-pagini atunci calea nu poate fi modificat afis at a in lista de meniuri. ,

i calea paginii. Dac a pagina are a. Pagina poate fi ascuns a sau

Toate modific arile in structura XML sunt f acute cu operat , ii DOM in scriptul admin/pages.php. De asemenea, pentru blog, galerie s i alte tipuri , de pagini se fac chem ari la funct , iile lor specifice de actualizare titlu s i cale. ,

3.4. EDITORUL DE PAGINI AWEBITOR 75

3.4 Editorul de pagini Awebitor


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

Bara de unelte a editorului ofer Inapoi s , i inainte in timp (undo s Vizualizare cod surs Ad augare tabel. a HTML.

a urm atoarele opt


,

iuni:

i redo).

Ad augare leg atur a c atre o adres Eliminare leg

a extern a. atur a in textul selectat.

atur a se s , terge orice leg

76 CAPITOLUL 3. EXTENSIILE APLICAT Ad augare imagine de pe server. Linie orizontal a.

IEI WEB

Eliminare formatare text textul selectat poate fi cur culori, etc. Alegere tip element: paragraf, titlu 1, titlu 2 s Alegere font s
, ,

at at de stil, de , i altele.

i m arime text.
,

Text aldin (bold ), italic s Indice s


,

i t aiat.

i exponent.
,

Culoare text s Aliniere la st

i fundal.
,

anga, dreapta s

i justify.

Liste ordonate cu numerotare. Liste neordonate cu bullets. Implementarea editorului se g de funct , ionare: ases te in fis, ierul js/awebitor.js. Modul ,

1. Pagina cu editorul se incarc a. Formularul cont ine un <textarea> in , care este pus tot cont inutul HTML al paginii alese de administrator. , 2. Se execut a co dul JavaScript al editorului Awebitor.
,

3. Elementul <textarea> este ascuns pentru a fi schimbat cu interfat editorului.

4. Interfat a editorului din fis ierul admin/awebitor-interface.php este , , incarcat a folosindu-se un XMLHttpRequest [ 2]. Scriptul PHP genereaz a codul XHTML care este ad augat in DOM -ul paginii unde ruleaz a Awebitor. 5. Se adaug a un element <link> cu atributul rel="stylesheet" s i ca, lea c atre stilul css/awebitor.css. Acest stil CSS este folosit pentru interfat , a editorului. 6. Se adaug a un element <iframe> cu calea c atre awebitor_iframe.php. Acest script PHP genereaz a o pagin a goal a cu put , in cod JavaScript care poate transmite mesaje documentului p arinte, c atre pagina care include acest <iframe>.

3.4. EDITORUL DE PAGINI AWEBITOR 77 7. La inc arcarea <iframe>-ului se introduce co dul HTML din <textarea> in <iframe>. 8. Se activeaz a document.designMode="on" in <iframe>. Din acest moment utilizatorul poate edita pagina dorit a. Inc arcarea s-a incheiat. Pentru editarea unei pagini simple, a unui articol, se foloses te scrip, tul admin/edit.php care genereaz a formularul cu elementul <textarea>. La inc arcarea acestei pagini in js/admin.js exist a funct ia siteAdmin. , awebitortaLoaded() care se execut a. Aceast a funct , ie pornes , te init , ializarea editorului. In funct ia awebitor.init() se fac verific ari dac a navigatorul web are suport pentru tehnologiile web necesare, de exemplu pentru designMode [ In final funct ia awebitor.loadInterface() este chemat a. Aceast 3]. a funct , ie , init ializeaz a un obiect XMLHttpRequest pentru a inc arca interfat a editoru, , lui. La inc arcare este chemat a funct , ia awebitor.interfaceReady(). Dac a fisierul XHTML s-a inc arcat cu succes, atunci se face chemare la awebitor. , init elems() pentru a face ad augarea propriu-zis a a tuturor elementelor din fisierul luat in pagina curent a. , Funct ia awebitor.init frame() init ializeaz a <iframe>-ul s i face ca toate , , , butoanele din interfat a s a funct ioneze sunt ad augate evenimentele dorite. , , Pentru integrarea cu siteul de administrare uav.ro exist a funct ii specifice , introduse in Awebitor. Acestea se g asesc in awebitor.customFunctions: preInitElems funct iile din acest obiect se execut a dup a ce se incarc a , interfat , a editorului, inainte s a fie elementele ei ad augate in pagin a. Aici avem o funct , ie pentru opt , iunea de ad augare imagini. postInitIframe funct iile din acest obiect se execut a dup a 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 inc a una pentru butoanele de salvare document s i , anulare editare. Ma joritatea opt , iunilor din editor folosesc funct execCommand(). De exemplu, pentru a face textul selectat s execut a document.execCommand("bold").
, ,

ia DOM document. a fie aldin, se

78 CAPITOLUL 3. EXTENSIILE APLICAT Ad augarea de imagini permite selectarea fis Figura 3.14: Ad

IEI WEB

ierului dorit de pe server:

augarea de imagini in pagini.

Dup a cum se poate vedea din captura de ecran de mai sus, utilizatorul are un formular de ad augare imagine unde se poate introduce adresa imaginii, titlul care o descrie s i, opt , ional, o leg atur a spre o pagin a extern a. C ampul , Aliniere permite administratorului s a aleag a unde s a fie pozit , ionat a poza: la stanga sau la dreapta. Pentru a face mai us oar a ad augarea de imagini modulul de gestionare a , fisierelor (vezi sect , iunea 3.2 ) este inclus in formular utilizatorul poate s a , aleag a fis, ierul dorit direct de pe server, sau poate s a incarce o poz a nou a in directorul dorit. Scriptul admin/files.php este inclus intr-un <iframe>: aproape tot funct , ioneaz a la fel, dar diferent a important a este c a nu se mai , incarc a toat a interfat , a siteului in <iframe>, ci apare doar lista de fis iere. , La finalul edit arii documentului, c and utilizatorul alege s a 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 ele, mentului <textarea>. Pe server se salveaz a noul cont inut HTML in fis ierul , , paginii.

3.4.1 Cur

at area codului HTML cu ReTidy


,

Oriunde este folosit Awebitor in siteul de administrare apare s i opt , iunea , at are a paginii HTML. Aceast a opt , iune permite utilizatoru, profilul de cur lui s a curet e codul HTML generat de navigatorul web s a elimine tagurile , inutile. Important , a cur at arii unei pagini cres , te atunci c and cont , inutul este co, piat dintr-un procesor de documente precum OpenO ce 1 Writer sau Microsoft O ce Word. De obicei asemenea documente cont in foarte multe taguri , inutile s i chiar multe erori in codul HTML generat.
,

Pentru a cur numit ReTidy.

at a documentele de erori am scris un script ,

PHP open source

Funct, ia clean awebitor() este chemat se g ases te in admin/include.php: ,

a la salvarea paginilor. Aceasta

// Includem scriptul PHP s i preg atim 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 le a n a w e b i t o r ( $ htm l , $ p r o f i l e = fa l se ) { // Profilul dorit pentru cur at are. , if(!$profile) { $ p r o f i l e = a w eb i to r ; i f ( i s s et ( $ 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 et u r n $ ht ml ; } // Inc arcare profil. 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 ) ) r et u r n fa l s e ;
1

http://openoffice.org

80 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

$h tm l = <htm l> <head> <m et a ht t p-e qu i v=Co nt ent-Type c o n t en t = t ex t / ht ml ; c h a r s et =u t f -8 /> </ head> <bo dy> . $ htm l . </body> </ html> ; // Cur at are pagin a. , $GLOBALS [ r e t i d y ]->s et C o de ( $ ht m l ) ; i f ( !$GLOBALS [ r e t i d y ]-> cle a nC o de ( ) ) r e t u r n fa l se ; $h tm l = $GLOBALS [ r e t i d y ]->g et Co d e ( ) ; $GLOBALS [ r e t i d y ]->f re e m em ( ) ; $h tm l = pr eg r epl ac e ( arr ay ( / (.+? ) <bo dy[ >]* >/ i s , /<\ /bod y >(.+?) $ / i s ) , , $ ht ml ) ; r e t u r n $ htm l ; } Profilurile de cur at are a paginilor sunt doar fis iere diferite de configurare , , pentru ReTidy. Acesta are o mult ime de opt iuni de configurare a cur at arii: , , , ce taguri s a fie s , terge, condit , iile in care s a fie s , terse, atributele care sunt sterse, procesarea textului s i multe altele. , , Profilul Awebitor este selectat implicit, face o cur at are minimal a docu, mentelor. Profilul maxim este f acut s a curet , e paginile care sunt preluate din documente O ce. In asemenea cazuri trebuie s a fie eliminate foarte multe taguri. // Bucat a de cod din profilul Awebitor. r e t u r n array ( e nc o d in g => u t f -8 , // Lista de funct ii de cur at are ce sunt chemate in ordinea dat , , // Acestea pot fi chemate de oric ate ori este necesar. macro => array ( t i d y c o d e , m y s t r i p t a g s , stripbrdupes,trimbrtags,replacetags, t id y c o d e , do m i n i t , d o m s t r i p c h i l d t a g s , domstriponlychild, a.

3.4. EDITORUL DE PAGINI AWEBITOR 81 d o m s t r i p p a r e n t o n l y ch i l d , d o m m e r g e p a r en t a t t r , do m sa ve , po st d o m s t r ip m e , p o st d o m r en a m et a g , s t r i p em p t y t a g s , co m b i n e i n l i n e , reordertags,combineinline, co m bi n e b r t a g s , t r i m b r t a g s , f i x i m g p o s , t id y c o d e , s t r i p l a n g , t r im b r t a g s ) , // Funct ii importante care nu trebuie s a se execute cu erori. , // Dac a apar erori (return false) in execut ia acestora, se opres , // cur at area paginii. , i m po r t a nt m e th o d s => ar ray ( t i d y c o d e , d o m i n it , do m s a ve ) , // Elimin a <br>-urile duplicate. s t r i p b r d u p e s => true , // Elimin a orice <br> g asit la inceputul sau la finalul tagurilor // date in lista de mai jos. t r i m b r t a g s => arr ay ( p , d iv , t a b l e , t h , t d , h1 , h2 , h3 , h4 , h5 , h6 , ul , o l , d l , l i , dt , dd , s t r o n g , em , i , u , b , t r , p re ) , // Elimin a tagurile goale. s t r i p e m p t y t a g s => ar ray ( 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 , s up , sub , u , t d , t r , t a b le ) , // . . . s ); i multe alte opt iuni.

te

Pentru a cur at a o pagin a ReTidy preia codul s i il trece prin funct , ii de , , cur at are, as , a cum se cere de profil. Aceste funct ii pot lucra pe codul surs a , , HTML sau pe structura DOM a paginii. Pe l ang a aceste funct , ii exist a s, i funct, ia de cur at are cu HTML Tidy [ 9] un proiect open source care per, mite cur at 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 cur at area init , ial a. Dup a acest prim pas, restul de funct , put in de mo dificat.
,

IEI WEB

ii de cur at are au mai ,

3.5. BLOGUL

83

3.5 Blogul
Siteul poate avea oric ate 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 uxuri Atom . Pentru a vedea cum se pot ad auga , pagini de tip blog vedet i sect iunea 3.3.3 .
, ,

3.5.1 Funct

ionalit at i pentru utilizatori


,

Blogul Evenimente

arat a in felul urm ator: 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 pagin a a oric arui blog listeaz a ultimele articole, c ateva articole din arhiv cele mai populare etichete. Administratorii pot aso cia etichete arbitrar alese fiec arui articol, separate de virgul a. Acestea permit utilizatorilor s a 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 incarc blog.css. Blogurile pot avea un antet nistratori. Codul din blog.php:

asi
,

a fis, ierul css/

HTML ,si un panou lateral editate de admi-

// Directorul unde se g asesc fis , ierele blogului. $ f o l d e r b l o g = p a g e s / bl 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 // pages/ blog/ universitate-blog-header. html . $ f i l e h e a d e r = $GLOBALS[ ph p ba s e ] . / . $folderblog./.$blogid. -h ea de r . ht ml ; // Codul HTML din panoul lateral al blogului. $ f i l e p a n e l = $GLOBALS[ ph p ba s e ] . / . $folderblog./.$blogid. -p a n e l . ht ml ; Lista de articole s i etichetele acestora sunt salvate in tabelele , blog (vezi tabelul A.1 ) s i blog tags (vezi tabelul A.2 ). , Pentru a afis se execut a: echo <o l >\n ; // Comanda SQL $ Q r es ul t = mysql query ( SELECT p at h , t i t l e FROM . $ t a b l e b l o g . WHERE ca t e g o r y = . mysqlrealescapestring($blogpath). ORDER BY pu bda te DESC LIMIT 0 , 1 0 ) ;
,

ierul este

MySQL

a lista de articole in mini arhiva din panoul lateral al paginii

3.5. BLOGUL whi le ( $r ow = mys ql fetc h a sso c ( $ Q r es u l t ) ) { $ l i n k = $GLOBALS[ p er m a n en t l in k s ] [ p r e f i x ] . / . $ b lo g p a t h . / . $ ro w [ pa th ] ; echo <l i ><a h r e f = . $ l i n k . > . $ro w [ t i t l e ] . </a></ l i >\n ; } echo </o l >\n ; Afisarea celor mai populare etichete are la baz , a urm atorul cod:

85

// Comanda SQL care preia lista de etichete asociate cu orice articol din // blogul curent. Coloana cnt cont ine num arul de articole care au , // eticheta dat a de coloana tag. $ Qr e s u lt = mysql query ( SELECT COUNT( bi d ) AS cn t , t a g FROM . $ t a b l e b l o g t a g s . , .$tableblog. WHERE . $ t a b l e b lo g . . id = bi d AND . $ t a b l e b l o g . . ca te g o r y = . mysqlrealescapestring($blogpath). GROUP BY t a g ORDER BY cnt DESC, ta g ASC LIMIT 0 , 1 0 ) ; $ t a g s = arra y ( ) ; i f ( mysql num rows ( $ Q r es u l t ) > 0 ) { whi le ( $r ow = mys ql fetc h a sso c ( $ Q r es u l t ) ) { $ t a g s [ ] = $ row ; } $res=; for eac h ( $ t a g s a s $ ta g ) { $ s i z e = max( 2 . 5 - $ t a g s [ 0 ] [ cn t ] / $ t a g [ c nt ] , 0.7); $ r e s .= , <a r e l = ta 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 er m a n en t li n k s ] [ p r e f i x ] . / . $ b lo g p a th . / t a g s / . $ t a g [ t a g ] . > . $ t a g [ t a g ] . </a> ; } $ r e s { 0} = ;

86 CAPITOLUL 3. EXTENSIILE APLICAT echo <d i v id =b lo g -p o p ul a r-t a g s> <h2> . $ l a n g [ p o p ul a r-t a g s ] . </h2> <p> . $ r e s . .</p> </ di v> <!-- #b lo g -p o p ul a r-t a g s -->\n ; } Cont inutul articolelor este dat de codul urm
,

IEI WEB

ator:

$ Q r es ul t = mysql query ( SELECT p ubd at e , pa th , c o nt en t , t i t l e , i d FROM . $ t a b l e b l o g . WHERE c a t eg o ry = . mysqlrealescapestring($blogpath). ORDER BY pu bda te DESC LIMIT 0 , 5 ) ; $i=0; // Comenzi din tastatur a pentru primele patru articole. $ a c c es s ke y s = arra y( a , b , c , d ) ; whi le ( $ro w = mysql fetc h a sso c ( $ Q r es u l t ) ) { $ l i n k = $GLOBALS [ p er m a n en t li n k s ] [ p r e f i x ] . / . $ ca t eg o r y . / . $ ro w [ pa th ] ; $ d a t e = date ( j F Y, H : i , $ row [ pub da t e ] ) ; echo <h2 c l a s s =b lo g -p o s t- t i t l e ><a ; i f ( i s s et ( $ a c c e s s k ey s [ $ i ] ) ) echo a c ce s s k e y= . $ a c ce s s k e y s [ $ i ] . ; echo h r e f = . $ l i n k . > . $ ro w [ t i t l e ] . </a></h2> <p c l a s s = b lo g -p o s t-d a t e> . $ da t e . </p> <d iv c l a s s =b lo g -p o s t-co n t e n t> . \ n ; r e a d fi l e ($GLOBALS [ p h p ba s e ] . / . $ f o l d e r b l o g . / . $ ro w [ c o n t en t ] ) ; echo </ d iv> <!-- . b lo g -po s t-co n te n t -->\n ; $ i ++; }

3.5. BLOGUL C and utilizatorul alege un articol, doar cont afis at.
,

87 inutul acelui articol este

Figura 3.16: Vizualizarea unui articol in 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 pagin a, utilizatorul poate accesa arhiva de articole. Acestea sunt grupate vizual pe ani s i pe luni. , Figura 3.17: Arhiva de articole intr-un blog.

3.5. BLOGUL

89

Pentru utilizatorii care doresc s a fie la curent cu ultimele articole publicate pe site, exist a uxuri Atom . Aceste uxuri in format XML pot fi citite de toate navigatoarele web moderne s i de alte programe specializate. C and , utilizatorul este abonat la uxul unui blog, acesta este notificat automat dac a apar articole noi. Figura 3.18: Fluxul Atom al blogului Evenimente in Firefox.

ate de Firefox. Tot prin abonarea la uxul Atom articolele pot fi afis ate pe alte , siteuri sau alte aplicat ii software. Codul XML este generat de pages/blog, atom.php. Exemplu de ux Atom:
,

In captura de ecran de mai sus se pot vedea articolele blogului afis

<?xml vers io n= 1 . 0 en co d i n g= u t f -8 ?> <f ee d xml :l ang= ro xmln s= h t t p : / /www. w3 . o r g / 20 0 5 / Atom> <t i t l e>U n i v e r s i t a t e - E ven im ent e</ t i t l e > <a u t ho r> <name>U n i v e r s i t a t e a A ur el V l a ic u d in A rad</name> <u r i>h t t p : / /www. ua v . r o</ u r i>

90 CAPITOLUL 3. EXTENSIILE APLICAT </ a u t ho r> <g en 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 D es i g n v5 </ g en e r a t o r> <i d>urn:www-uav-r o : u n i v e r s i t a t e -eve ni m en te</ i d> < l i n k h r e f= / r o / u n i v e r s i t a t e / eve ni m en te t i t l e= U n i v e r s i t a t e - E ven im ent e t yp e= t ex t / ht ml /> < 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 / eve ni m en te / ato m t i t l e= U n i v e r s i t a t e - E ven im ent e t yp e= a p p l i c a t i o n / atom+xml /> <up da te d>2 010 -0 7-28 T1 1 :3 6 :2 1 +03 : 0 0</ up da ted> <e n t ry> <t i t l e >L a ns a r e de ca r te , j o i , 1 4 . 0 4 . 2 0 1 1 , o r a 1 1</ t i t l e> <p u b l i s h ed>2011 -0 4-13 T0 9 :2 7 :4 4 +03 : 0 0</ p u b l is h e d> <up da te d>2 011 -0 4-13 T1 4 :3 4 :4 8 +03 : 0 0</ up da ted> <l i n k h r e f= / r o / u n i v e r s i t a t e / eve ni m en te / l a n s a r e de-c a r t e -j o i -14-04-2011-o r a -11 t i t l e= L a n sa r e de ca r t e , j o i , 1 4 . 0 4 . 2 0 1 1 , o r a 11 t yp e= t ex t / ht ml /> <i d>urn:www-uav-r o : u n i v e r s i t a t e e ve n im e n te : 4 4 8</ id> <c a t e g o ry ter m= a ca d emi a /> <c a t e g o ry ter m= c r i t i c d e t e a t r u /> <c a t e g o ry ter m= l a n s a r e d e c a r t e /> <c a t e g o ry ter m= t e a t r u /> <c o n t en t t yp e= ht ml > &l t ; p&g t ; &l t ; s pa n s t y l e= fo nt -w e ig h t : b o ld ; &g t ; Even imen t c u l t u r a l :&l t ; / s pa n&g t ; La n s a re a c a r t i i , , A ra du l t e a t r a l 1 7 5 2 - 2 0 1 0 , a u t o r L i z i c a M ihut . &l t ; b r /&g t ; &l t ; s pa n s t y l e= fo nt -w e ig h t : b o ld ; &g t ; D at a s i l o c a t i a :&l t ; / s pa n&g t ; Jo i , 1 4 . 0 4 . 2 0 1 1 , o r a 1 1 . C l a d i r e a R ec t o r a t ul u i , s a l a 1 3 ( s a l a S e n a t u l u i UAV) . &l t ; b r /&g t ; &l t ; s pa n s t y l e= fo nt -w e ig h t : b o ld ; &g t ; V or c o n f e r e n t i a :&l t ; / s pa n&g t ; Gelu N eg rea , Io n Co cor a ,

IEI WEB

3.5. BLOGUL V a s il e Dan , F l o r i n D i d i l es c u , Ovid iu Cor nea , Di ana Achim s . a . &l t ; b r /&g t ; &l t ; s pa n s t y l e= f o nt -w e i g h t : b o ld ; &g t ; D e t a l i i&l t ; / s pa n&g t ; l a & l t ; a h r e f= h t t p : // a r q . r o / l i z i c a -mihut-a ra d u l-t e a t r a l -1752-%E2%80%93-2010%E2%80 %99%E2%80%99/ &g t ; h t t p : / / a rq . r o/&amp;#1 60 ;& l t ; / a&g t ; &amp; # 1 6 0 ; s i l a &l t ; a h r ef =- f i l e s / co m u ni ca t e / a r t 1 3 . 0 4 . p d f &g t ; h t t p : / /www. ua v . r o / f i l e s / co m u n ica t e / a r t 1 3 . 0 4 . pd f& 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 . ua v . r o / f i l e s / co m u n ica t e / a r t 1 3 . 0 4 . pd f &g t ;& l t ; / a&g t ; &l t ; / p&g t ; </ c o n t e nt> </ e n t r y> </ f ee d>

91

92 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

3.5.2 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 bazeaz a pe o singur a comand a SELECT din tabelul MySQL al blogului. Interact iunea cu pagina web este implementat a de codul , JavaScript din js/admin.js. Antetul blogului s , i panoul lateral pot fi editate cu Awebitor (vezi sect unea 3.4 ), trebuie doar ca administratorul s a fac a un click pe opt editare acestor sect , iuni ale blogului. iunea de
,

i-

3.5. BLOGUL

93

Dup a ce se fac modific arile dorite la articole, administratorul poate s a acceseze opt iunea Ping-o-matic. Aceast a opt iune este o leg atur a c atre servi, , 3 ciul Ping-O-Matic . Adresa blogului este transmis a la Ping-O-Matic pentru a fi transmis a mai departe la alte motoare de c autare bloguri (inclusiv c atre Google). Motoarele de c autare indexeaz a uxul Atom s , i permit utilizatorilor sa caute in cont , inutul acestuia. Administratorul poate s terge articole printr-un singur click pe opt , arui articol moment in care se execut X din dreapta fiec siteAdmin.blogDelete(). Aceast a funct , ie cere confirmarea act stergere. Pe server se execut a: , // Scoatem articolul din tabelul blog. mysql query( DELETE FROM . $ t a b l e b l o g . WHERE ca t e g o r y = . mysqlrealescapestring($blogpath). AND i d = . $ 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 b id = . $ REQUEST [ i d ] . ) ; // S , tergem fis , ierul HTML de pe disc. i f ( @ f i l e e x i s t s ( $ ba s e . / . $ f o l d e r b l o g . / . $ row [ co nt e n t ] ) ) @u nli nk ( $ b a s e . / . $ f o l d e r b l o g . / . $r ow [ co n t e n t ] ) ; // S , tergem pagina din indexul de c autare. if($usesearch) s ea r ch D el et eD o cu m en t ( $GLOBALS [ p er m a n en t li n k s ] [ p r e f i x 2 ] . / . $ b lo g p a t h . / . $ row [ pa th ] ) ; // S , tergem pagina din harta siteului. i f ( $ u s e s it e m a p ) $ s it em a p->d el ete ( $GLOBALS [ p er m a n en t li n k s ] [ p r e f i x 2 ] . / . $ b lo g p a t h . / . $ row [ pa th ] ) ; // S tergem pagina din cache.
,

iunea a funct , ia iunii de ,


,

http://pingomatic.com

94 CAPITOLUL 3. EXTENSIILE APLICAT d el e t e p a g e c a c h e ( $ b lo g p a t h ) ; d el e t e p a g e c a c h e ( $ b lo g p a t h . / a r ch i v e ) ; d el e t e p a g e c a c h e ( $ b lo g p a t h . / . $ ro w [ pa th ] ) ; Formularul de ad augare arat a astfel: augarea unui articol in blog.

IEI WEB

Figura 3.20: Ad

Administratorul trebuie s a intro duc a titlul articolului, opt , ional calea acestuia, data s , i etichetele. Implicit articolul are data curent a. Etichetele trebuie sa fie separate cu virgule. Funct, ia JavaScript care afis eaz a formularul este siteAdmin.blogAdd(). , Validarea este f acut a de siteAdmin.blogAddSubmit(). Pe server se genereaz a calea articolului pe baza titlului dac tratorul nu a introdus nici o valoare in acest scop este chemat a adminisa funct , ia

3.5. BLOGUL AdminGenerateId() (vezi pagina 73 ). In final se adaug lul blog cu o comand a INSERT. In tabelul blog tags este ad etichet a. Editarea unui articol se face cu un click pe titlul acestuia: Figura 3.21: Editarea unui articol din blog.

95 a articolul in tabeaugat a fiecare

Formularul de editare articol permite mo dificarea titlului, a c aii de accesare a articolului, data s i etichetele acestuia. Cont inutul articolului poate fi , , editat f ar a a fi necesare cunos tint e HTML cu Awebitor (vezi sect iunea 3.4 ).
, , ,

Operat , iile de ad augare, s , tergere s , i editare urmeaz administratorului. De exemplu, administratorul poate s

a permisiunile acordate a nu aib a dreptul s

96 CAPITOLUL 3. EXTENSIILE APLICAT fac a o anumit nea 3.1 . a operat ie pe un anumit articol. Pentru detalii, vezi sect

IEI WEB iu-

3.6 Galeria de imagini


Modulul care permite ad augarea de pagini de tip galerie de imagini a pornit de la co dul mo dulului de bloguri (vezi sect iunea 3.5 ). Administratorii pot , ad auga 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 uxuri Atom la care se pot abona , utilizatorii care doresc s a fie la curent cu ultimele poze ad augate.

3.6. GALERIA DE IMAGINI Dup a ce utilizatorul face click pe poza dorit poza este afis at a la o dimensiune medie. Sub poz , acesteia: Figura 3.23: Vizualizare poz

97 a se incarc a o pagin a unde a este afis at a descrierea


,

a.

Utilizatorul poate s m arimea original a.

a fac a inc a un click pe poz

a pentru a vedea poza la

Scriptul care genereaz a 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 intr-un tabel belul gallery, sect iunea A.3 . , MySQL , vezi ta-

98 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

La ad augarea unei poze administratorul trebuie s a incarce poza dorit a. Aceasta este redimensionat a pe server la o dimensiune mic a pentru lista de poze s, i la dimensiunea medie pentru pagina in care este vizualizat a poza. Figura 3.24: Ad augare poz a in galerie.

Dup a cum se poate vedea din captura de ecran, administratorul trebuie sa introduc a titlul pozei s , i s a aleag a 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 in js/admin.js. Pentru afis area formu, larului este chemat a funct , ia siteAdmin.galleryAdd(). Pentru validarea formularului se execut a funct , ia siteAdmin.galleryAddSubmit(). Pe server

3.6. GALERIA DE IMAGINI 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 libr aria Graphics , Draw [ 10 ]. Funct , ia handleImgUpload() din admin/gallery.php este executat a: f u n c t i o n h an dle Img U pl oa d ( $ i m g f i l e ) { // Verific am dac a poza a fost inc arcat a cu succes. i f ( $ i m g f i l e [ e r r o r ] !== UPLOAD ERR OK) { AdminM es sag e ( $ ln g [ e r r o r -img-up lo a d ] ) ; r et u r n fa l s e ; } // Citim informat ii despre poz a. , $ f i n f o = @g e t im a g e s iz 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 ) ) { // Accept am doar poze in format JPEG sau PNG. AdminM es sag e ( $ ln g [ e r r o r -img-f o rm a t ] ) ; r et u r n fa l s e ; } // In funct ie de format este creat a o imagine GD. , i f ( $ f i n f o [ 2 ] == 2 ) { $ f e x t = . jp g ; $im g = im a g e cr e a t e f r o m j p eg ( $ i m g f i l e [ tm p name ] ) ; } e l s e i f ( $ f i n f o [ 2 ] == 3 ) { $ f e x t = . png ; $im g = imagecreatefrompng ( $ i m g f i l e [ tmp name ] ) ; }else r et u r n fa l s e ; // Destinat , ia pentru poza mic a. $f na me = basename ( s trto l ow er ( $ i m g f i l e [ name ] ) , $ f e xt ) ; $ f d e s t = $ b a s e . / . $ f o ld e r i m g s . / . $ f o l d er i m g s t h u m b n a i l s . / .

99

100 CAPITOLUL 3. EXTENSIILE APLICAT $f na me . . jp g ;

IEI WEB

// Redimension am poza la m arimea mic a dat a de variabilele $img tw // s , i $img th. i f ( ( $ f i n f o [ 0 ] / $ f i n f o [ 1 ] ) > ( $ im g tw / $ im g th ) ) { $ new w = $ im g t w ; $n ew h = $ im g t w / ( $ f i n f o [ 0 ] / $ f i n f o [ 1 ] ) ; } e l se { $ new w = $ i m g t h / ( $ f i n f o [ 1 ] / $ f i n f o [ 0 ] ) ; $n ew h = $ i m g t h ; } // Mai facem o imagine GD, acum pentru poza mic $im g2 = ima gec r eatetru eco l or ( $new w , $new h ) ; a.

// Facem redimensionarea propriu-zis a. im a g ec o py re sa m p le d ( $im g2 , $im g , 0 , 0 , 0 , 0 , $new w , $ new h , $ f i n f o [ 0 ] , $finfo[1]); // Salv am poza mic a pe disc, cu calitatea dorit a. $ r e s u l t = imag ejpeg ( $im g2 , $ f d e s t , $ im g j pg q ) ; if(!$result) { A dminMess age ( / . $ f o l d e r i m g s t h u m b n a i l s . : . $ ln g [ e r r o r -img-s a ve ] ) ; r e t u r n fa l se ; } // . . . r e t u r n true ; }

3.6. GALERIA DE IMAGINI

101

Dup a ad augarea unei poze administratorul poate s a o editeze, s a modifice titlul, calea, data s i descrierea acesteia. Opt ional, poza poate fi reinc arcat a.
, ,

Figura 3.25: Modificarea unei poze.

Pentru editarea descrierii este folosit editorul Awebitor, vezi sect

iunea 3.4 .

Paginile HTML cu descrierea fiec arei poze se g asesc in pages/gallery. Imaginile originale se g asesc in files/gallery/original. Imaginile de dimensiune medie sunt in files/gallery/normal, iar imaginile mici sunt in files/gallery/thumbnails.

102 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

3.7 Modulul Fis

iere de desc

arcat

Unele pagini din site ofer a utilizatorilor liste de fis iere care pot fi desc arcate , 4 . Exemplu de pe server de exemplu, pagina Documente de interes public de pagin a cu fis , iere de desc arcat: Figura 3.26: Pagin a de test cu fis iere de desc arcat.

Dup a 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 , , fisier s i il descarc a. , , Paginile sunt generate de scriptul pages/downloads.php. In directorul pages/downloads se g ases te antetul paginii, calea directorului de pe server , asociat cu pagina accesat a de utilizator s , i titlul paginii. Atunci c and administratorul adaug
4

a o pagin

a nou a in site el poate s

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

3.7. MODULUL FIS

IERE DE DESC

ARCAT 103 iunea 3.3.3 . Editarea

aleag a modulul fis , iere de desc arcat detalii in sect acestui tip de pagini arat a astfel: Figura 3.27: Administrarea paginilor cu fis

iere de desc arcat.

Administratorul poate edita antetul paginii cu editorul Awebitor, vezi sect iunea 3.4. Lista de fis , iere este generat a automat din directorul aso ciat , cu pagina in cauz a. Administratorul poate s a incarce fis ierele prin FTP , sau , poate s a le incarce din pagina de administrare a siteului. Fiecare fis , ier are un titlu s , i o descriere asociat a. Aceste informat salvate intr-un fis , ier JSON . Cont , inutul fis , ierului arat a astfel: { nume- f i s i e r . e x t e n s i e : { t yp e : f i l e , f i l e : nume- f i s i e r . e x t e n s i e , title:titlulfisierului, description,descriereafisierului,
,

ii sunt

104 CAPITOLUL 3. EXTENSIILE APLICAT }, a d r es a -un ui-f i s i e r -ex t e r n : { t yp e : l i n k , l i n k : h t t p : / / exa m ple . 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 e xt e r n e , description:descrierealegaturii, } }

IEI WEB

Acest fis ier JSON este salvat in directorul asociat cu pagina editat a. , Administratorul poate schimba directorul asociat dac a dores , te s a afis , eze fisiere dintr-un alt director dec at cel implicit. Numele fis ierului JSON este , , _ro_metadata.json pentru limba rom an a s, i _en_metadata.json pentru limba englez a. Din formatul fis , ierului JSON se poate vedea c a pe l ang a fis, iere se pot ad auga s i leg aturi c atre fis iere externe. Unele documente se g asesc pe alte , , servere s, i atunci este mai simpl a ad augarea unei leg aturi directe c atre fis, ierele dorite, in loc s a se fac a o reinc arcare a acestora.

3.7. MODULUL FIS

IERE DE DESC

ARCAT 105

Incarcarea unui nou fis

ier arat a astfel: arcarea unui fis ier.

Figura 3.28: Inc

Formularul permite alegerea fis ierului dorit de pe disc, s i opt ional se intro, , , duce titlul fis , ierului s , i descrierea acestuia. Afis area formularului este imple, mentat a in js/admin.js de funct ia siteAdmin.downloadsAddFile(). Vali, darea formularului este in funct ia siteAdmin.downloadsAddFileSubmit(). , Ad augarea de leg aturi externe arat a la fel, dar in loc de c ampul pentru fisier este un c amp pentru adresa fis ierului extern. , , Dac a administratorul face click pe unul din fis ierele listate, acesta poate , sa ii mo difice titlul s , i descrierea. Pe server ad augarea de fis , iere trece printr-un filtru de extensii cunoscute, de exemplu nu este permis a incarcarea fis , ierelor de tip PHP . Directorul asociat cu o pagin a este implict ales pe baza c aii paginii. Dac a pagina are calea a/b/c, atunci directorul pe server este files/downloads/a/b/c. Orice fis ier , incarcat este pus in acest loc.

106 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

3.8 Prima pagin

a
,

Prima pagin a 5 a siteului UAV este afis gura 1.1 . Pe pagin a se g asesc: o diaporam mot, ional, a aleatorie cu c

at a de pages/welcome.php, vezi fi-

ateva antete care au design cu caracter pro-

o mini-hart a a siteului, cu primele patru meniuri principale, fiecare avand primele cinci sub pagini afis ate in ordine aleatorie, , ultimele articole din blogurile Nout at i6 si Evenimente
, ,

datele de contact din fis ierul pages/en_welcome_contact.html sau , pages/ro_welcome_contact.html, partenerii universit at ii din fis ierul pages/en_welcome_partners.html , , sau pages/ro_welcome_partners.html, primul paragraf din trei pagini importante ale siteului: Istoric 9 ,si Cercetare 10 . Despre UAV
8

In scriptul welcome.php funct ia mini sitemap() genereaz a ierarhia de , pagini a siteului: primele patru meniuri principale din care sunt luate aleatoriu cinci pagini. T , inand cont c a in timpul execut , iei interfat , a siteului exist a intr-un obiect DOM pe server, acest script preia lista de pagini direct din meniurile generate, f ar a s a reciteasc a structura XML a siteului (vezi sect iu, nea 3.3.1 ). Funct, ia blog section() afis eaz a titlul ultimelor articole publicate din , blogul dorit. Opt ional aceast a funct ie poate afis a s i primele cuvinte din ar, , , , ticole. Funct , ia page section() afis eaz a num arul de cuvinte ales din pagina , dorit a. Scriptul js/welcome.js implementeaz a efectul de tranzit ie intre pozele , din antetul paginii. O poz a este pus a cu CSS folosindu-se proprietatea background-image, iar cealalt a poz a este suprapus a cu un element <img>. Cu funct , ia setTimeout() se modific a proprietatea opacity a elementului: valoarea cres te sau scade, dup a cum este cazul.
,

5 6 7 8 9 10

http://www.uav.ro/ http://www.uav.ro/ro/universitate/noutati http://www.uav.ro/ro/universitate/evenimente http://www.uav.ro/ro/universitate/prezentarea-universitatii http://www.uav.ro/ro/universitate/prezentarea-universitatii/istoric http://www.uav.ro/ro/cercetare

3.9. PAGINA CONTACT

107

3.9 Pagina Contact


11 a universit Pagina de contact at ii permite utilizatorilor s , departamentelor dorite. Formularul arat a astfel:

a transmit a mesa je

Figura 3.29: Pagina de contact a Universit

at ii Aurel Vlaicu din Arad. ,

a scrie subiectul emailului, cont acestuia s , i s a isi scrie adresa de email. Destinatarul este ales din lista de , departamente ad augate de administratorii siteului. Formularul este protejat anti-spam cu serviciul recaptcha.net . La trimiterea unui mesaj pe server se
11

In acest formular utilizatorul poate s

inutul

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

108 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

face validarea adresei de email s i a celorlalte c ampuri din formular. Mesajul , este trimis la destinatarul ales cu funct ia mail().
,

Pagina este afis , at a 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 siteu, lui. Administratorii siteului pot edita pagina de contact s
,

i lista destinatarilor.

Figura 3.30: Administrarea paginii de contact.

Lista de destinatari este citit pages/en_contact.json. Formatul fis

a din fis , ierul pages/ro_contact.json sau ierului JSON este foarte simplu: ,

3.9. PAGINA CONTACT { j e t o n -i d e n t i f i c a r e : [ nume , em ail @exa mp le . com ] , // . . . alte destinat ii ,

109

Pagina de administrare este generat a de scriptul admin/contact.php. La ad augarea unui destinatar se execut a funct , ia JavaScript siteAdmin. contactAdd(). Administratorul este intrebat de numele destinatarului s adresa de email a acestuia. Pe server jetonul de identificare al destinatarului este generat de funct ia AdminGenerateId() (vezi pagina 73), ca apoi fis , JSON s a fie actualizat.

ierul

Editarea datelor de contact care apar in dreapta formularului s i a datelor , de contact care apar pe prima pagin a se face folosindu-se Awebitor, vezi sect iunea 3.4 .
,

110 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

3.10 Motorul de c

autare

Pentru utilizatori motorul de c autare este principala metod a de a g asi cont , inutul dorit in siteul Universit at ii Aurel Vlaicu din Arad. Exemplu de c autare: , Figura 3.31: Pagina de c autare in site.

In toate paginile interfat a siteului afis , eaz a campul de c autare in antet. , C and utilizatorul alege s a caute ceva in site se acceseaz a scriptul pages/ search.php. Acesta preia cuvintele cheie s i le transmite mai departe la , scriptul modules/search.php. Rezultatele sunt date intr-un vector (array ) afis at in HTML . , Practic pages/search.php este doar interfat
,

a de c autare s , i afis are rezul,

3.10. MOTORUL DE C

AUTARE

111

tate a modulului de c autare modules/search.php. Stilul css/search.css este folosit pentru stilarea rezultatelor in navigatorul web. Utilizatorii pot c auta in siteul UAV cu Google dac a adaug a prefixul g . In acest caz cuvintele cheie sunt redirect ionate c atre motorul de c autare , Google. In scriptul din pages se execut a: $ r e s u l t s = s ea rch Do cu m ent ( ar ray ( keyw o rd s => $ REQUEST[ q ] )); Funct, ia searchDeleteDocument() este dat a de scriptul din modules. Aceasta permite c autarea paginilor din site. Parametrii funct iei sunt urm atorii:
,

keywords Cuvintele cheie folosite pentru c sortby Sortarea rezultatelor dup a:

autare.

updated ultima actualizare a documentelor, words num arul de cuvinte in do cumente, title titlurile documentelor, url adresele documentelor, score scorul rezultatului. Implicit rezultatele sunt sortate dup a scorul acestora. Scorul este calculat in funct , ie de c ate ori apar cuvintele cheie c autate, dup marimea documentului s i alt, i factori. , order Direct , ia de sortare: -1 pentru sortare descresc sortare cresc atoare. atoare, 1 pentru a

operator Operatorul folosit intre cuvinte: AND sau OR. Dac a se foloses te AND toate cuvintele cheie trebuie s a apar a in document. Dac a , se foloses te OR in lista de rezultate apar pagini care cont in oricare , , din cuvintele cheie date. soundex Parametru boolean care spune c Soundex [ 11] in MySQL . Practic vor fi g cu cuvintele cheie date. Fiecare rezultat este dat intr-un vector: id Num arul de identificare al paginii in tabelul MySQL. a se dores , te c autare de tip asite s, i alte cuvinte similare

112 CAPITOLUL 3. EXTENSIILE APLICAT title Titlul paginii. url Adresa paginii.

IEI WEB

snippet O bucat a din document aleas a in as , a fel inc at s a cont , ina unul sau mai multe cuvinte cheie. Aceasta este folosit a in afis, area rezultatelor. updated Ultima actualizare a paginii. score Scorul rezultatului. words Num size M arul de cuvinte in do cument. i.

arimea documentului in octet

Cuvintele cheie sunt filtrate pentru a se elimina orice semn de punctuat ie, , cuvintele mai lungi dec at 255 de caractere s , i orice alt cuv ant care ar fi malformat. Motorul de c autare foloses , te dou a tabele MySQL pentru fiecare limb a: search documents (vezi anexa A.4 ) s i search doc index (vezi anexa A.5 ). , In primul tabel sunt indexate do cumentele cu titlul lor, adresa s i cont inutul. , , Cont, inutul este filtrat s a nu cont , in a taguri HTML. In al doilea tabel sunt indexate cuvintele din toate documentele, fiecare cuv ant fiind asociat cu id-ul documentului in care apare. Comenzile de interogare MySQL folosesc funct ii specifice de transliterat ie , , si colare a caracterelor. De exemplu, dac a utilizatorul caut a dup a s tiint e , , , vor fi g asite s , i paginile care includ cuv antul stiinte. Similar, dac a utilizatorul nu foloses te diacritice dar paginile au cuvintele scrise cu diacritice, , rezultatele vor fi conform as tept arilor. , Pentru indexarea documentelor funct ia searchIndexDocument() este che, mat a de toate modulele de administrare a siteului. De exemplu, blogurile s i , galeriile de imagini sunt indexate atunci c and administratorul salveaz a o pagin a, un articol sau o imagine. Funct ia primes te ca parametru adresa paginii, , , titlul s , i cont , inutul. Scriptul search.php se ocup a de filtrarea cont , inutului, de cur at area acestuia, de g asirea cuvintelor care trebuie indexate s i tot ce , , mai este necesar. Atunci c and administratorul alege s searchDeleteDocument() este chemat a. a s , tearg a o pagin a funct
,

ia

3.11. HARTA SITEULUI

113

3.11 Harta siteului


Utilizatorii pot s a caute informat , iile dorite in harta siteului. Aceasta ofer perspectiv a complet a asupra tuturor paginilor din site: Figura 3.32: Harta siteului UAV. ao

Scriptul pages/sitemap.php cites te fis ierul pages/sitemap_ro.html sau , , pages/sitemap_en.html. Fis ierele HTML sunt actualizate c and se fac mo, dific ari 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 s a interact , ioneze cu , harta siteului, s a intre in structura de pagini dup a cum consider a necesar.

114 CAPITOLUL 3. EXTENSIILE APLICAT

IEI WEB

Scriptul modules/sitemap.php cont ine clasa RD sitemap. Toate celelalte , module de administrare creeaz a o instant a a acestei clase pentru a putea , ad auga/modifica/s , terge pagini din harta siteului. Principalele metode ale clasei: index() Permite indexarea unei pagini. Parametrii sunt titlul s adresa acesteia. Aceast a metod a cheam a add() sau update(). add() Adaug a o pagin a in index. a o pagin a din index. a din index.
,

update() Actualizeaz delete() S


,

terge o pagin

done() Metod a chemat a dup a ce se modific a indexul de pagini. Aceasta cheam a metodele xml() s , i html(). xml() Genereaz html() Genereaz a harta siteului in format Sitemaps XML [ a harta siteului in format HTML. a astfel: 1].

Fis, ierul xml/sitemap.xml arat

<?xml versi o n= 1 . 0 en co d i ng=UTF-8 ?> <urlset xmln s= h t t p : / /www. si t em a p s . o rg / s ch ema s / s it em a p / 0 . 9 xm l n s: d c= h t t p : / / p u r l . o rg / d c/ el em en t s / 1 .1 / > < u r l> <d c : t i t l e>t i t l u p a g i na</ d c : t i t l e> <l o c>h t t p : / /www. ua v . ro / ro / . . .</ l o c> <la s t m od>2 011 -0 4-22 T1 3 :0 8 :4 2 +03 : 0 0</ la s t mo d> </ u r l> < !-- . . . --> </ u r l s e t> Dup a cum se poate vedea din codul de mai sus formatul Sitemaps XML este simplu: trebuie doar adresa s i data ultimei modific ari a paginii in for, mat W3C [12 ]. Pe l ang a asta am inclus s i titlul paginii intr-un alt XML , namespace, Dublin Core [ 13 ]. Harta siteului este indexat vezi anexa A.6 . a in tabelul MySQL sitemap, pentru detalii

Concluzii
Siteul Universit at ii Aurel Vlaicu din Arad a evoluat mult de la versiunea , precedent a. Imbun at at irile tehnice s i de design, impreun a cu imbun at at irile , , , de cont , inut s , i structur a, fac noul site UAV mult mai us or de folosit, mai , atractiv s i mai informativ. Aceast a evolut ie pozitiv a a siteului este confir, , mat a de Societatea Academic a din Rom ania [ 14 ], s i ea se datoreaz a muncii , importante depuse in pl anuirea proiectului, implementarea s i folosirea lui de , la lansare. Din acest proiect am inv at at multe lucruri s , de peste ani in domeniul informaticii.
,

i am pus in valoare studiile a c a evolut , ia ie a siteului ar

Scopul proiectului a fost atins, dar acest lucru nu inseamn siteului trebuie s a se opreasc a aici. C ateva direct , ii de evolut putea fi: imbun at at irea securit at ii trecerea pe , , nistrare, vezi sect , iunea 3.1.2.5 . reanalizarea cont zare / structur optimizarea tehnic la anumite poze. a.
,

TLS pentru modulul de admi-

inutului s

i a oportunit

at ilor de imbun at at ire organi, , a a paginilor optimizare

a, inc arcarea s , i mai rapid

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 c a au f acut posibil a realizarea acestui proiect de licent un proiect care nu este doar teoretic, ci are o aplicabilitate practic a.

a,

115

Glosar
1 , distribuit ca software liber de Apache este cel mai folosit server web Fundat ia Apache. 13, 14, 25 , 47 , 63
,

Atom este un format XML standard, RFC 4287 2 , pentru uxuri web. Acesta permite navigatoarelor web sau oric arui alt software s a verifice dac a sunt actualiz ari la resurse de pe web. In unele implement ari 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 in protocolul HTTP. Acest antet permite salvarea de perechi cheie valoare in navigatoarele web ale utilizatorilor, mai precis acestea sunt variabile cu valori asociate. Aplicat web pot modifica paginile generate in funct ie de aceste variabile.
,

iile 14

CSS (Cascading Style Sheets) este un limba j de formatare a elementelor dintr-o pagin a web 3 , standardizat de c atre W3C . 9, 11 , 12, 64 , 75 , 105 DOM (Document Object Model) este o convent ie pentru reprezentarea , si interact , ionarea cu elementele s i atributele din documentele de tip , , HTML, XHTML s , i XML. Aceast a convent , ie este independent a de limba jul de programare folosit, iar elementele DOM sunt manipulate folosindu-se sintaxa s i gramatica limba jului de programare in care , API-ul 4 DOM este implementat. Specificat iile DOM sunt recomand ari , publicate de W3C . 13, 15, 50 , 58 , 71 , 73 , 75 , 105 ECMAScript este un limbaj de programare dinamic standardizat de Ecma International, in cadrul specificat iei ECMA-262 ,
1 2 3 4 5

si ISO/IEC

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

116

Glosar 16262. Limba jul este implementat sub forma unor dialecte bine cunoscute precum JavaScript, JScript s i ActionScript. 116
,

117

FTP (File Transfer Protocol) este un protocol de ret transferul de fis , iere intre client , i s i server [ 18]. 102 ,

ea folosit pentru

HTML (HyperText Markup Language) este un limba j de marcare folosit 6 , standardizat de c pentru crearea paginilor web atre W3C . Navigatoarele web interpreteaz a 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 distri, buit pentru colaborare in sisteme informatice interactive [ 16 ]. Acest protocol este de tip cerere r aspuns, unde clientul, navigatorul web, cere o anumit a adres a s i primes te r aspunsul de la server. HTTP este , , fundamentul webului, fiind principalul proto col de transfer de date. 15 , 25 JavaScript este o implementare a standardului ECMAScript , ce se reg ases te cu prec adere in navigatoarele web. Acest limba j de programare , permite aplicat , iilor web s a 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 c atre oameni. Acesta este un standard deschis ce preia reprezentarea obiectelor din JavaScript. Pentru interpretarea JSON nu este necesar a implementarea intregului limbaj JavaScript [ 15 ]. 13, 16 , 22 , 26 , 49 , 102 , 107 MySQL este un sistem de gestiune a bazelor de date relat ional 7 , software , liber distribuit sub licent a GPL 8 v2. 12 , 14 , 16 , 22 , 25 , 83, 96 , 110 , , 113
9 ce nu are o specificat PHP este un limba j de programare dinamic ie for, mal a. Acesta este folosit cu prec adere pe serverele web pentru generarea dinamic a a paginilor HTML . Principala implementare a limbajului este un software liber cunoscut tot sub numele de PHP. 12 14, 16 , 17, 26 , 30 , 40 , 47, 57, 61 , 75 , 78 , 104
6 7 8 9

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

118 TLS (Transport Layer Security) este un protocol criptografic de ret ce ofer a securitate in comunicarea prin ret ele precum Internetul [ , Acest protocol este folosit pentru criptarea pe segmente a mesa jelor transmise de alte protocoale. De exemplu, HTTP poate fi securizat cu TLS, ceea ce d a nas, tere protocolului cunoscut sub numele de HTTPS. 54 , 114

Glosar ea 17 ].
,

W3C (World Wide Web Consortium) este principalul consort iu interna, 10 . Membrii organizat t ional de standardizare a webului iei dezvolt a s i , , , ratific a standarde web precum HTML, CSS s i SVG. 113 , 115 117 , XHTML (Extensible HyperText Markup Language) este limba jul de marcare HTML redefinit in format XML. 13 , 17, 75 XML (Extensible Markup Language) este un meta-limba j de marcare, de descriere structurat a a datelor 11 , standardizat de c atre 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 pagin

a a noului site

uav.ro , in limba rom an a. . . . . . 5

3.1 Formularul de autentificare. . . . . . . . . . . . . . . . . . . . 29 3.2 Formularul de resetare a parolei. . . . . . . . . . . . . . . . . 38 3.3 Pagina de administrare a conturilor. . . . . . . . . . . . . . . 41 3.4 Opt
,

iunea de ad

augare cont. . . . . . . . . . . . . . . . . . . . 46 augare sect iune. . . . . . . . . . . . . 51


,

3.5 Lista de drepturi date unui cont. . . . . . . . . . . . . . . . . 50 3.6 Editarea drepturilor: ad 3.7 Editarea drepturilor: ad 3.9 Gestionarul de fis 3.11 Ad augare pagin augare act , iune. . . . . . . . . . . . . 54 iere. . . . . . . . . . . . . . . . . . . . . . . 57

3.8 Editare de profil utilizator. . . . . . . . . . . . . . . . . . . . 56


,

3.10 Gestionarul de pagini. . . . . . . . . . . . . . . . . . . . . . . 61 a nou a. . . . . . . . . . . . . . . . . . . . . . 71 3.12 Set ari pagin a. . . . . . . . . . . . . . . . . . . . . . . . . . . 74 3.13 Awebitor: editorul de pagini. . . . . . . . . . . . . . . . . . . 75 3.14 Ad augarea de imagini in pagini. . . . . . . . . . . . . . . . . 78 3.15 Blogul Evenimente. . . . . . . . . . . . . . . . . . . . . . . . 83 3.16 Vizualizarea unui articol in blogul Evenimente. . . . . . . . . 87 3.17 Arhiva de articole intr-un blog. . . . . . . . . . . . . . . . . . 88 3.18 Fluxul Atom al blogului Evenimente in Firefox. . . . . . . . . 89 3.19 Pagina de administrare a blogului Evenimente. . . . . . . . . 92 3.20 Ad augarea unui articol in blog. . . . . . . . . . . . . . . . . . 94 3.21 Editarea unui articol din blog. . . . . . . . . . . . . . . . . . 95 3.22 Galerie foto pe siteul UAV. . . . . . . . . . . . . . . . . . . . 96 3.23 Vizualizare poz a. . . . . . . . . . . . . . . . . . . . . . . . . . 97 3.24 Ad augare poz a in galerie. . . . . . . . . . . . . . . . . . . . . 98 119

120 3.25 Modificarea unei poze. . . . . . . . . . . . . . . . . . . . . . . 101 3.26 Pagin a de test cu fis
,

LIST A DE FIGURI

iere de desc
,

arcat. . . . . . . . . . . . . . 102

3.27 Administrarea paginilor cu fis 3.28 Inc arcarea unui fis


,

iere de desc arcat. . . . . . . . . 103 at ii Aurel Vlaicu din Arad. . 107 ,

ier. . . . . . . . . . . . . . . . . . . . . . . 105

3.29 Pagina de contact a Universit 3.31 Pagina de c

3.30 Administrarea paginii de contact. . . . . . . . . . . . . . . . . 108 autare in site. . . . . . . . . . . . . . . . . . . . . 110 3.32 Harta siteului UAV. . . . . . . . . . . . . . . . . . . . . . . . 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 in PHP. http://pear.php.net/package/Services_JSON [7] Implementare nativ a a formatului JSON in 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] Libr aria Graphics Draw. http://www.boutell.com/gd/ [11] Descrierea algoritmului fonetic de indexare cuvinte dup http://en.wikipedia.org/wiki/Soundex 121 a sunet Soundex.

122 [12] Formatul de dat as i or a W3C. , http://www.w3.org/TR/NOTE-datetime [13] Init , iativa de metadate Dublin Core. http://dublincore.org/ [14] Topul Integrit at ii Universit at 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

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 urm atoarele c ampuri: id, int(10). Acesta este num pubdate, bigint(14). Data public arul de identificare al articolului. arii articolului. a articolul.

updated, bigint(14). Data la care a fost actualizat ultima oar

category, varchar(255). Categoria in care apare articolul. In acest caz a la blogul/pagina in care apare articolul. Categocategoria se refer ria este dat a 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 c amp indic a numai , numele fis , ierului HTML care trebuie citit de pe disc pentru afis area , articolului. Mai multe detalii despre acest modul in sect 124 iunea 3.5 .

A.2. BLOG TAGS

125

A.2 blog tags


Acest tabel asociaz sunt urm atoarele: bid, int(10). Num a articole din bloguri cu etichete. C ampurile tabelului

arul de identificare al articolului. a articolului.

tag, varchar(100). Eticheta asociat

A.3 gallery
Tabelul cont ine toate imaginile din toate galeriile de imagini ale siteului. , Acest tabel are urm atoarele c ampuri: id, int(10). Acesta este num pubdate, bigint(14). Data public arul de identificare al imaginii. arii imaginii. a ultima oar a imagi-

updated, bigint(14). Data la care a fost actualizat nea.

category, varchar(255). Categoria in care apare imaginea. In acest caz categoria se refer a la galeria/pagina in care apare imaginea. Categoria este dat a de calea paginii / galeriei. De exemplu, categoria poate s a 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 at a sub imagine. Acest , c amp indic a numai numele fis , ierului HTML care trebuie citit de pe disc pentru afis , area descrierii. img, varchar(255). Imaginea care trebuie afis este numele fis , ierului de pe disc. Mai multe detalii despre acest mo dul in sect
, ,

at a. Valoarea acestui c

amp

iunea 3.6 .

126 ANEXA A. BAZA DE DATE MYSQL

A.4 search documents en s ro

i search documents
autate de utilizatori atoarele c ampuri:

Acest tabel cont ine lista de pagini, indexate, care pot fi c , folosind opt , iunea de c autare a siteului. Tabelul are urm id, bigint(20). Num arul 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 dat a. published, bigint(14). Data la care pagina a fost publicat updated, bigint(14). Data la care pagina a fost actualizat words, mediumint(8). Num size, bigint(20). M arul de cuvinte in cont
, ,

a. a ultima oar inutul paginii. a.

arimea paginii (in octet

i).
,

Mai multe detalii despre acest modul in sect

iunea 3.10 .

A.5 search doc index en s ro

i search doc index


autare antul

Acest tabel indexeaz a cuvintele fiec arei pagini indexate de motorul de c al siteului. C ampurile tabelului sunt urm atoarele: ids, text. Lista de numere de identificare a paginilor asociate cu cuv dat. word, varchar(255). Cuv total, int(10). Num dexate. counts, text. Num din coloana ids. antul indexat.
,

arul de ment arul de ment

ion ari a cuv antului in toate paginile ina

ion ari a cuv antului pentru fiecare pagin iunea 3.10 .

Mai multe detalii despre acest modul in sect

A.6. SITEMAP

127

A.6 sitemap
Acest tabel cont ine lista de pagini indexate pentru harta siteului. C , tabelului sunt urm atoarele: id, bigint(20). Num arul de identificare al paginii. ampurile

title, varchar(255). Titlul paginii. url, varchar(255). Adresa paginii. published, bigint(14). Data public updated, bigint(14). Data ultimei actualiz lang, varchar(3). Limba in care este scris cont Mai multe detalii despre acest mo dul in sect
,

arii paginii. ari.


,

inutul paginii.

iunea 3.11 .