proiectarea unui website universitar. aplicatie practica:

42
UNIVERSITATEA AUREL VLAICU” DIN ARAD FACULTATEA DE S , TIINT , E EXACTE DOMENIUL: INFORMATIC ˘ A PROGRAMUL DE STUDIU: MASTER - INFORMATIC ˘ A APLICAT ˘ A ˆ IN S , TIINT , E, TEHNOLOGIE S , I ECONOMIE FORMA DE ˆ INV ˘ AT , ˘ AM ˆ ANT: IF LUCRARE DE DISERTAT , IE ˆ INDRUM ˘ ATOR S , TIINT , IFIC ABSOLVENT Prof. univ. dr. Ioan Dzit , ac S , ucan M. Mihai ARAD 2013

Upload: vudieu

Post on 01-Feb-2017

246 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Proiectarea unui website universitar. Aplicatie practica:

UNIVERSITATEA”AUREL VLAICU” DIN ARAD

FACULTATEA DE S, TIINT, E EXACTEDOMENIUL: INFORMATICA

PROGRAMUL DE STUDIU: MASTER -INFORMATICA APLICATA IN S, TIINT, E,

TEHNOLOGIE S, I ECONOMIEFORMA DE INVAT, AMANT: IF

LUCRARE DE DISERTAT, IE

INDRUMATOR S, TIINT, IFIC ABSOLVENTProf. univ. dr. Ioan Dzit,ac S, ucan M. Mihai

ARAD2013

Page 2: Proiectarea unui website universitar. Aplicatie practica:

UNIVERSITATEA”AUREL VLAICU” DIN ARAD

FACULTATEA DE S, TIINT, E EXACTEDOMENIUL: INFORMATICA

PROGRAMUL DE STUDIU: MASTER -INFORMATICA APLICATA IN S, TIINT, E,

TEHNOLOGIE S, I ECONOMIEFORMA DE INVAT, AMANT: IF

METODE AVANSATE INPROIECTAREA UNUI

WEBSITE UNIVERSITARAplicat, ie practica:www.univagora.ro

INDRUMATOR S, TIINT, IFIC ABSOLVENTProf. univ. dr. Ioan Dzit,ac S, ucan M. Mihai

ARAD2013

Page 3: Proiectarea unui website universitar. Aplicatie practica:

Cuprins

Introducere 3

1 Prezentarea siteului 4

1.1 Structura siteului pentru utilizatori . . . . . . . . . . . . . . . 5

1.2 Funct, ionalitat, i pentru utilizatori . . . . . . . . . . . . . . . . . 5

1.3 Funct, ionalitat, i pentru administratori . . . . . . . . . . . . . . 6

1.4 Compatibilitatea siteului . . . . . . . . . . . . . . . . . . . . . 7

2 Modul de funct, ionare al siteului 8

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

2.2 Cerint,ele tehnice pentru server . . . . . . . . . . . . . . . . . . 9

2.3 Privire pe ansamblu . . . . . . . . . . . . . . . . . . . . . . . 10

2.3.1 Proiectul Django . . . . . . . . . . . . . . . . . . . . . 10

2.3.2 Pachetele folosite de site . . . . . . . . . . . . . . . . . 13

2.4 Structura siteului pe server, fis, ierele folosite . . . . . . . . . . 15

3 Funct, ionalitat, i din aplicat, ia web 18

3.1 Prima pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

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

3.3 Gestionarea paginilor . . . . . . . . . . . . . . . . . . . . . . . 23

3.4 Blogul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.5 Galeria de imagini . . . . . . . . . . . . . . . . . . . . . . . . 26

3.6 Pagina Contact . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.7 Motorul de cautare . . . . . . . . . . . . . . . . . . . . . . . . 30

3.8 Harta siteului . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Concluzii 35

1

Page 4: Proiectarea unui website universitar. Aplicatie practica:

2 CUPRINS

Glosar 36

Lista de figuri 39

Bibliografie 40

Page 5: Proiectarea unui website universitar. Aplicatie practica:

Introducere

Lucrarea de fat, a prezinta metode avansate de realizare a unei aplicat, ii web,avand ın vedere proiectul realizat pentru Universitatea Agora din municipiulOradea. Scopul proiectului a fost realizarea unui web site modern, dupastandarde s, i tehnici actuale, us,or de actualizat s, i de ment, inut.

Impreuna cu Marius S, ucan am realizat urmatoarele:

• o interfat, a noua pentru siteul Universitat, ii Agora;

• un plan de structura;

• un proiect Python bazat pe pachete open source, fara a reinventa roata.

Marius a realizat interfat,a aplicat, iei, iar eu m-am ocupat de programare,de partea tehnica a acestui proiect. Domnul profesor coordonator Ioan Dzit,acs-a ocupat de completarea siteului cu cont, inut.

Aplicat, ia web este flexibila, poate fi instalata pe orice server web careimplementeaza tehnologii s, i standarde deschise:

• Orice sistem de operare: Linux, Mac OS X sau Windows;

• Orice server web cu suport WSGI: nginx, uwsgi1, lighttpd2, Apache s, ialtele.

• Baza de date SQLite, PostgreSQL sau MySQL la alegere. Daca sedores,te se poate dezvolta suport s, i pentru alte tipuri de baze de date.

Codul sursa al aplicat, iei web este distribuit s, i gazduit ıntr-un depozit Gitpregatit pentru colaborarea ıntre mai mult, i programatori. Aplicat, ia poate fidezvoltata ın colaborare de o echipa fara nici o problema tehnica.

Scopul proiectul a fost de a realiza un site nou, cu o interfat, a mai fru-moasa, mai us,or de navigat s, i de administrat, cu cont, inut bilingv. Noul siteeste mai bine structurat s, i mai flexibil - poate fi actualizat s, i ımbunatat, it ınorice moment.

1https://projects.unbit.it/uwsgi/2http://lighttpd.net

3

Page 6: Proiectarea unui website universitar. Aplicatie practica:

Capitolul 1

Prezentarea siteului

In acest capitol includ o prezentare generala a siteul: structura acestuia,funct, ionalitat, i pentru utilizatori s, i administratori, s, i compatibilitatea siteuluicu navigatoarele web moderne.

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

4

Page 7: Proiectarea unui website universitar. Aplicatie practica:

1.1. STRUCTURA SITEULUI PENTRU UTILIZATORI 5

1.1 Structura siteului pentru utilizatori

Siteul Universitat, ii Agora este structurat ın cateva sect, iuni importante:

Universitate este sect, iunea unde vizitatorii pot afla informat, ii despreUniversitatea Agora, istoric, noutat, i, poze s, i alte detalii.

Academic este sect, iunea unde se pot gasi informat, ii despre programelede studii oferite, despre Facultatea de Drept s, i S, tiint,e Economice,despre personalul didactic s, i de cercetare, programe postuniversitare,s, i concursuri pentru posturi didactice.

Student, i este locul unde student, ii universitat, ii gasesc date despre struc-tura anului universitar ın curs, despre admitere, orare, burse, taxe,examene s, i alte informat, ii la fel de importante.

Cercetare este sect, iunea unde persoanele interesate se pot informa des-pre proiectele de cercetare ce sunt ın derulare, despre conferint,e s, icentrul de cercetare al universitat, ii.

Resurse este locul unde vizitatorii siteului gasesc informat, ii despre bibli-oteci, locuri de munca, editura universitat, ii s, i platforma de ınvat, amantla distant, a Moodle.

Parteneri este sect, iunea dedicata prezentarii parteneriatelor nat, ionales, i internat, ionale cu alte universitat, i s, i institut, ii.

1.2 Funct, ionalitat, i pentru utilizatori

Utilizatorii siteului se pot bucura de urmatoarele funct, ionalitat, i ale siteului:

• Cont, inut bilingv,

• Interfat, a adaptata pentru diferite ecrane s, i pentru imprimare,

• Blog1,

• Galerie de poze2,

• Formular contact3,

1http://univagora.ro/ro/universitate/noutati/2http://univagora.ro/ro/universitate/foto/3http://univagora.ro/ro/contact/

Page 8: Proiectarea unui website universitar. Aplicatie practica:

6 CAPITOLUL 1. PREZENTAREA SITEULUI

• Harta site4,

• Cautare5.

Pe prima pagina a siteului se poate vedea o diaporama cu ultimele pozeadaugate ın site. Sub diaporama sunt afis,ate legaturi catre cele mai impor-tante pagini din site, s, i o lista cu ultimele articole din blogul

”noutat, i”.

Blogul”noutat, i” permite filtrarea articolelor dupa etichete, tags, s, i ca-

tegorii. Daca utilizatorii doresc, aces,tia se pot abona la s,tiri pentru a finotificat, i cand apar articole noi cu ajutorul fluxului de s,tiri ın format Atom.

Galeria de poze este ımpart, ita pe albume. Fiecare album poate sa aibao descriere s, i numeroase poze. Utilizatorii pot alege sa filtreze pozele dupaetichete.

Formularul de contact permite alegerea destinat, iei s, i include protect, iaanti-spam a serviciului online recaptcha.net.

Motorul de cautare foloses,te o librarie Python numita Whoosh. Aceastapermite cautarea cu operatori booleeni - de exemplu AND s, i OR. Cautareaın site este foarte rapida s, i flexibila: sunt indexate toate paginile s, i fiecaretip de pagina are afis,are specifica ın lista de rezultate.

Harta siteului este generata separat pentru limbile romana s, i engleza.

Fiecare pagina are opt, iunea de marire s, i mics,orare a textului pentru aımbunatat, i accesibilitatea siteului. In plus, utilizatorii pot alege sa tipareascaorice pagina.

1.3 Funct, ionalitat, i pentru administratori

Pentru gestionarea cont, inutului aplicat, ia web include o sect, iune de adminis-trare unde proprietarii siteului pot face modificarile dorite.

Administratorii pot intra pe http://www.univagora.ro/admin pentrua edita cont, inutul siteului. Aces,tia au nevoie de conturi pentru a se puteaautentifica.

Sect, iunea de administrare a siteului include funct, ii specializate pentrufiecare tip de cont, inut: se pot adauga/edita/s,terge pagini, albume de poze,poze din albume, articole pe blog, etichete, etc.

La fiecare camp de text, orice titlu de articol, de poza poate fi scris ınengleza s, i ın romana. Siteul poate fi tradus ın cele doua limbi ıntr-un mod

4http://univagora.ro/ro/harta-site/5http://univagora.ro/ro/cautare/

Page 9: Proiectarea unui website universitar. Aplicatie practica:

1.4. COMPATIBILITATEA SITEULUI 7

flexibil: se pot adauga pagini s, i articole pe blog ın ambele limbi sau, laalegere, doar ıntr-o limba.

Editarea de pagini s, i articole ın blog include un editor HTML simplu defolosit. Editorul de pagini include s, i opt, iuni pentru adaugarea de ınregistrarivideo, poze, fis, iere de descarcat (atas,amente) s, i legaturi spre alte pagini.Fiecare pagina poate fi afis,ata ın meniuri sau ascunsa, poate fi publicata saunu - administratorul poate adauga pagini de tip

”ciorna”. Paginile pot fi

ordonate ıntr-o structura de tip arbore cu ierarhie nelimitata.

Not, iunea de pagini”ciorna” este implementata s, i la albumele de poze s, i

la articolele de pe blog: administratorii pot adauga albume de poze s, i articolepe blog care nu vor fi publice pana cand se dores,te.

Pentru adaugarea de poze administratorii pot alege sa ıncarce un fis, ierZIP cu toate pozele, ıntr-un singur pas. Toate pozele ıncarcate sunt redi-mensionate automat ın funct, ie de designul siteului.

1.4 Compatibilitatea siteului

Siteul este compatibil cu:

• Mozilla Firefox6,

• Google Chrome7,

• Apple Safari8,

• s, i Microsoft Internet Explorer9.

Siteul poate fi folosit s, i pe navigatoare web ce nu au suport pentru JavaS-cript sau CSS. Siteul poate fi navigat s, i fara afis,area de imagini - cu ajutorulsintetizatoarelor vocale sau cu a sistemelor Braille.

6http://www.mozilla.com7http://www.google.com/chrome8http://www.apple.com/safari9http://www.microsoft.com/windows/internet-explorer/

Page 10: Proiectarea unui website universitar. Aplicatie practica:

Capitolul 2

Modul de funct, ionare alsiteului

Siteul Universitat, ii Agora este o aplicat, ie web implementata ın limbajul deprogramare Python, construita cu Django. In acest capitol voi explica modulde funct, ionare al sitelui, cum este folosit Django, de ce a fost ales, tehnologiilecare stau la baza aplicat, iei web, cerint,ele tehnice pentru server s, i, nu ınultimul rand, voi explica fiecare pagina din site.

2.1 Tehnologiile server-side s, i client-side fo-

losite de aplicat, ie

Tehnologiile folosite de aplicat, ia web sunt urmatoarele:

• Git este folosit pentru dezvoltarea s, i distribuirea aplicat, iei web. Inacest mod se pot face modificari la site mult mai us,or, mai rapid s, i maisigur - istoricul modificarilor este ment, inut ın depozitul git.

• Python este limbajul de programare ın care este scris tot codul aplicat, iei.Cu ajutorul acestuia fiecare pagina HTML este generata dinamic.

• Django este cadrul de dezvoltare al aplicat, iei. Acesta ofera un modelformal de structurare a aplicat, iei web, de scriere a codului s, i numeroasefunct, ii specifice aplicat, iilor web.

• Baza de date la alegere: SQLite, MySQL sau PostgreSQL. Toata struc-tura siteului este salvata ın baza de date: paginile, articolele de pe blog,lista de poze s, i albume, etichetele, etc.

8

Page 11: Proiectarea unui website universitar. Aplicatie practica:

2.2. CERINT, ELE TEHNICE PENTRU SERVER 9

• Whoosh este folosit pentru indexarea s, i cautarea paginilor din site.

• HTML este folosit pentru paginile siteului.

• CSS este folosit pentru designul siteului, fara tabele pentru layout.

• JavaScript este folosit pentru sect, iunile interactive din site.

• Fluxurile Atom sunt folosite pentru paginile blogului”noutat, i”. Acest

format XML permite utilizatorilor sa se aboneze la blog, sa fie informat, ioricand sunt adaugate alte articole.

• Sitemaps XML este un format standard ın care lista de pagini dinsite este publicata pe server pentru motoarele de cautare gen Google.Acestea pot sa verifice ultimele modificari din site mai us,or s, i mairapid [1].

2.2 Cerint,ele tehnice pentru server

Serverul are nevoie de urmatoarele aplicat, ii:

• Python 2.7.

• Un server web cu suport WSGI, de exemplu nginx sau Apache - serecomanda prima varianta.

• O baza de date PostgreSQL sau MySQL - se recomanda a doua vari-anta.

• Pachetele Python virtualenv 1 s, i pip 2.

• Git pentru descarcarea codului sursa al siteului.

Se prefera server cu un sistem de operare Linux datorita compatibilitat, iimai bune a software-ului folosit.

1https://pypi.python.org/pypi/virtualenv2https://pypi.python.org/pypi/pip

Page 12: Proiectarea unui website universitar. Aplicatie practica:

10 CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI

2.3 Privire pe ansamblu

Serverul web este responsabil cu procesarea cererii de accesare a unei paginivizitate de utilizator. Pas, ii urmat, i de server sunt:

• Cererea din navigatorul web al utilizatorului este trimisa prin protoco-lul HTTP la server.

• Daca utilizatorul acceseaza un fis, ier static, de exemplu o imagine,atunci fis, ierul este trimis direct la client.

• Daca se dores,te afis,area unei pagini dinamice, atunci serverul webtransmite cererea mai departe la aplicat, ia Django cu ajutorul interfet,eiWSGI. La fel ca un server web, aplicat, ia Django este un proces ceruleaza constant pe server, care as,teapta cereri de afis,are pagini.

• Aplicat, ia Django verifica adresa URL s, i restul de antete HTTP s, i exe-cuta scripturile asociate paginii accesate de utilizator.

• Pagina generata de Django este trimisa la serverul web care apoi otrimite la navigatorul web al utilizatorului.

Django este un pachet Python, iar siteul este un proiect Django. Oriceproiect Django are ın component,a sa reguli de asociere a adreselor acceptatede aplicat, ia web - de exemplu /despre-noi sau /contact. Fiecare adresaacceptata este asociata cu funct, ii Python din aplicat, ia web.

Majoritatea aplicat, iilor web Django se bazeaza s, i pe alte proiecte cu sursalibera, open source. Pe langa pachetul Django care poate fi instalat cu pip

pe un sistem unde este Python, exista s, i alte pachete pentru Django ın comu-nitatea proiectului. Alt, i utilizatori Django ıs, i publica pe Internet proiectelelor, sub licent,e libere.

In sect, iunile urmatoare voi prezenta proiectul Django mai detaliat, pa-chetele folosite de site, s, i structura de foldere s, i fis, iere din aplicat, ia web.

2.3.1 Proiectul Django

Majoritatea siteurilor sunt facute cu PHP s, i MySQL3, motiv pentru care suntfoarte bine cunoscute problemele de securitate asociate limbajului PHP4 -

3conform Wikipedia: https://en.wikipedia.org/wiki/PHP#Use4https://en.wikipedia.org/wiki/PHP#Security

Page 13: Proiectarea unui website universitar. Aplicatie practica:

2.3. PRIVIRE PE ANSAMBLU 11

foarte des siteuri care folosesc PHP sunt subiectul atacurilor. Pentru Uni-versitatea Agora mi-am propus sa realizez un proiect scalabil care sa se ridicela nivelul celor mai performante aplicat, ii web din lume.

Django este un proiect care are versiuni lansate la intervale bine definite,cu documentat, ie foarte buna s, i informat, ii pertinente despre fiecare versiune -cum se poate migra de la o versiune la alta [6]. In plus, proiectul este orientatcatre programatorii marilor companii care ıs, i doresc ın primul rand calitate,stabilitate s, i securitate.

Printre companiile care folosesc Django amintesc Mozilla5, OpenStack6,Disqus7 s, i Instagram8 - siteuri foarte populare la nivel mondial.

Cele mai importante concepte ın proiectele Django sunt: models, viewss, i templates. Modelele definesc tabelele cu campurile lor s, i relat, iile ıntreele. Views sunt clasele/funct, iile care controleaza navigarea utilizatorului ınaplicat, ia web. S, abloanele sunt bucat, ile de cod HTML ce preiau datele dinviews pentru afis,are - interfat,a aplicat, iei.

Exemplu de model:

from django . db import modelsfrom django . u t i l s . t r a n s l a t i o n import u g e t t e x t l a z y as

class ContactGroup ( models . Model ) :t i t l e = models . CharField ( ( ’ t i t l e ’ ) , \

max length =150)

class Meta :verbose name = ( ’ contac t s group ’ )ve rbose name p lura l = ( ’ groups o f contac t s ’ )

def u n i c o d e ( s e l f ) :return s e l f . t i t l e

class ContactRec ip ient ( models . Model ) :group = models . ForeignKey ( ContactGroup , \

verbose name= ( ’ group ’ ) )display name = models . CharField ( ( ’name ’ ) , \

max length =150)emai l = models . Emai lFie ld ( ( ’ emai l ’ ) , \

5http://mozilla.com6http://openstack.org7http://disqus.com8http://instagram.com

Page 14: Proiectarea unui website universitar. Aplicatie practica:

12 CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI

max length =100)

class Meta :verbose name = ( ’ r e c i p i e n t ’ )ve rbose name p lura l = ( ’ r e c i p i e n t s ’ )un ique toge the r = ( ( ’ group ’ , ’ emai l ’ ) , \

( ’ group ’ , ’ d isplay name ’ ) )

def u n i c o d e ( s e l f ) :return s e l f . d isplay name

Modelul de mai sus este preluat din apps/robo/contact/models.py.Aplicat, ia pentru Contact foloses,te cele doua modele: ContactRecipient

s, i ContactGroup pentru pagina contact. Se poate vedea ca fiecare destinatarare numele, adresa de email s, i grupa ın care se gases,te. Fiecare grupa aredoar un titlu. Aceste doua tabele sunt adaugate automat ın baza de date aaplicat, iei web.

Tabelele se definesc doar sub forma de modele - clase Python care mos, -tenesc clase definite ın proiectul Django. Nu este nevoie de nici un altfelde configurare: la instalarea aplicat, iei web toate aceste fis, iere Python suntfolosite pentru a genera baza de date. Django se ocupa cu diferent,ele din-tre MySQL, PostgreSQL s, i SQLite. La rularea siteului aceste modele suntfolosite s, i pentru citire, modificare, adaugare s, i s,tergere de date din tabele.Programatorul nu are nevoie sa lucreze cu baza de date direct - totul esteabstractizat de aceste modele.

O pagina sau un view ın Django arata ın felul urmator:

from django . sho r t cu t s import r ende r to r e spons e , \g e t o b j e c t o r 4 0 4

import blog

def a r t i c l e ( request , a r t i c l e i d ) :ob j e c t = g e t o b j e c t o r 4 0 4 ( BlogArt i c l e , \

pk=a r t i c l e i d )return r e n d e r t o r e s p o n s e ( ’ b log / a r t i c l e . html ’ , \

{ ’ a r t i c l e ’ : ob j e c t })

Acest view afis,eaza un articol din blog pe baza ID-ului, cu ajutorul unuis,ablon. S, ablonul blog/article.html poate fi urmatorul:

<a r t i c l e><h1>{{ a r t i c l e . t i t l e }}</h1>

Page 15: Proiectarea unui website universitar. Aplicatie practica:

2.3. PRIVIRE PE ANSAMBLU 13

<p>Publ i cat in {{ a r t i c l e . date | date : ”DATE FORMAT” }}</p>{{ a r t i c l e . html content }}</ a r t i c l e>

Orice view poate fi asociat la o adresa URL ın fis, ierul urls.py al proiec-tului Django, ın lista de urlpatterns. Formatul este urmatorul:

( e x p r e s i e regu lata , f u n c t i e Python [ , d i c t i o n a r op t i ona l ] )

Cand este o cerere HTTP de la un vizitator Django trece prin lista deurlpatterns s, i cauta sa vada daca adresa ceruta exista. Prima expresieregulata care se potrives,te cu URL-ul paginii dorite este folosita - Djangoexecuta funct, ia Python asociata. Exemplu de asociere:

from django . conf . u r l s . d e f a u l t s import patterns , u r lu r l p a t t e r n s = pat t e rns ( ’ ’ ,

u r l ( r ’ ˆ blog /$ ’ , ’ b log . views . index ’ ) ,u r l ( r ’ ˆ blog /(?P<id>\d+)/$ ’ , ’ b log . views . a r t i c l e ’ ) ,

)

Conceptele de mai sus sunt suficiente pentru realizarea de aplicat, ii web cuDjango: tabele ın baza de date, pagini, s,abloane s, i adrese URL. Bineınt,eles,Django include mult mai multe opt, iuni s, i capabilitat, i.

Structura model-view-template din Django este foarte similara cu struc-tura de aplicat, ii software mai bine cunoscuta sub numele de model-view-controller. Cei de la Django au ales sa schimbe put, in terminologia.

2.3.2 Pachetele folosite de site

Siteul Universitat, ii Agora foloses,te cateva pachete Python. Dependint,elesunt listate ın fis, ierul deploy/requirements.txt - acest fis, ier este folosit lainstalarea aplicat, iei web pe server. Pachetele Python:

Django este cadrul aplicat, iei web. 9

PIL (Python Image Library) 10 este folosit pentru procesarea imaginiloradaugate ın galeria de poze a siteului.

Whoosh este un motor de indexare s, i de cautare documente. 11

9http://djangoproject.com10http://www.pythonware.com/products/pil/11https://bitbucket.org/mchaput/whoosh/

Page 16: Proiectarea unui website universitar. Aplicatie practica:

14 CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI

Paste este un pachet de unelte pentru aplicat, ii WSGI folosit de site doarın timpul testarii s, i a depanarii problemelor. 12

Pe langa pachetele listate mai sus siteul foloses,te s, i urmatoarele pachetespecifice Django:

django-cms este un sistem de gestiune a cont, inutului. 13

django-haystack este un pachet care integreaza Whoosh s, i alte motoarede cautare cu Django. 14

django-filer este un gestionar de fis, iere. 15

django-blog-zinnia este o aplicat, ie web blog. 16

imagestore este un proiect pentru gestionarea de albume s, i poze. 17

sorl-thumbnail este un pachet pentru manipulare de imagini ıntr-unmod cat mai simplu. 18

La pachetele de blog s, i de galerie poze am facut urmatoarele modificari:

• am adaugat suport pentru mai multe limbi;

• integrare proprie cu django-cms s, i cu django-haystack;

• integrare cu Django sitemaps;

• modificari la fis, ierele urls.py pentru a se potrivi cu scopul siteului;

• modificari la paginile de administrare.

La instalarea siteului pe server se ruleaza scriptul deloy/deploy_new.sh.Acesta creaza un mediu Python ın care sunt instalate de pe Internet toatepachetele de care depinde aplicat, ia web a Universitat, ii Agora. Pentru oexecut, ie cu succes serverul are nevoie de virtualenv, pip s, i de Python.

In cele ce urmeaza voi prezenta principalele pachete folosite de site.

12http://pythonpaste.org13http://django-cms.org14http://haystacksearch.org15https://github.com/stefanfoulis/django-filer16http://django-blog-zinnia.com17https://github.com/hovel/imagestore18https://github.com/sorl/sorl-thumbnail

Page 17: Proiectarea unui website universitar. Aplicatie practica:

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

2.4 Structura siteului pe server, fis, ierele fo-

losite

Pentru a fi mai us,or de ınt,eles unde se gasesc fis, ierele s, i codul sursa asociatcu diferitele funct, ionalitat, i din aplicat, ia web includ mai jos lista de fis, iere s, ifoldere cu explicat, ii.

• apps/

Acest folder include pachete Django care nu provin din mediul Pythonfacut la instalare, pyenv/.

– robo/

Acest folder include pachete Django facute de mine pentru siteulUniversitat, ii Agora.

∗ blog/

Aplicat, ia Blog a siteului. Aici se gasesc cateva module Pythoncare schimba funct, ionalitat, i din django-blog-zinnia.

· locale/Traduceri ın limba romana pentru textele folosite de blog.

· admin.pyModul Python pentru sect, iunile de administrare a artico-lelor din blog.

· cms_app.pyScript pentru integrarea blogului cu django-cms.

· menu.pyScript pentru meniurile din site la paginile blogului.

· search_indexes.pyScript care defines,te campurile de indexare a articole-lor din blog - un model haystack.indexes.SearchIndexcare preia date din modelul zinnia.models.Entry.

· translation.pyScript care defines,te campurile din modelul zinnia.models.Entry care pot fi traduse ın diferite limbi.

· urls.pyScript care defines,te adresele cunoscute de aplicat, ia blog.

∗ contact/

Aplicat, ia pentru paginile de tip Contact. Acest folder arestructura similara cu folderul descris mai sus. Trebuie ment, i-onat ca formularul de contact este un CMSPlugin care poatefi folosit ın orice pagina.

Page 18: Proiectarea unui website universitar. Aplicatie practica:

16 CAPITOLUL 2. MODUL DE FUNCT, IONARE AL SITEULUI

∗ gallery/

Aplicat, ia pentru galeria de poze. Aici se gasesc module Py-thon care schimba funct, ionalitat, i din imagestore: admin.

py, cms_app.py, menu.py, search_indexes.py, sitemaps.

py, translation.py s, i urls.py.

∗ utils/

Funct, ii utile folosite prin toata aplicat, ia web care nu apart, inunei componente specifice. Aici se gasesc bucat, i mici de codpentru diferite scopuri: middleware, sitemaps, search indexes,context processors, template tags, etc.

• deploy/

Acest folder include scripturi pentru instalarea siteului pe server.

– wsgi/app.wsgi

Scriptul Python care pornes,te aplicat, ia web. Acest fis, ier este exe-cutat de serverul web - punctul de comunicare dintre server s, iaplicat, ie. Comunicarea se face cu ajutorul interfet,ei WSGI.

– config.py.dist

Fis, ier de configurare a modului de instalare al aplicat, iei web.

– deploy_new.sh

Script cu care se poate instala mediul Python necesar pentruaplicat, ia web.

– env.py

Script Python ce este executat de aplicat, ia web la pornire. Acestaactiveaza sau nu modul de depanare s, i modifica environment va-riables precum PATH s, i PYTHON_PATH.

– requirements.txt

Lista de pachete Python care se instaleaza la rularea scriptuluideploy_new.sh - lista de dependint,e.

• public/

Acest folder cont, ine fis, iere s, i foldere statice. Acestea sunt trimise laclient direct de catre serverul web, fara sa fie implicata aplicat, ia Django.

• site_project/

Acest folder cont, ine fis, ierele specifice proiectului / siteului.

– locale/

Traduceri ın limbile engleza s, i ın romana pentru toate textele careapar ın interfat,a siteului.

Page 19: Proiectarea unui website universitar. Aplicatie practica:

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

– templates/

Fis, iere HTML, s,abloane Django, care sunt folosite ın diferitelesect, iuni ale sitelui - blog, galerie de poze, prima pagina, contact,cautare, harta site, etc.

– settings.py

Setarile siteului.

– settings_local.py.dist

Setari pentru site specifice unei instant,e a siteului - sunt diferent,epe fiecare server.

• submodules/

Acest folder cont, ine submodule Git folosite de aplicat, ia web.

– django-blog-zinnia/

Am facut modificari la codul sursa al proiectului django-blog-zinnia.Am publicat modificarile ıntr-un depozit pe Github19.

– imagestore/

Am facut modificari la codul sursa al proiectului imagestore. Ampublicat modificarile ıntr-un depozit pe Github20.

19https://github.com/mihaisucan/django-blog-zinnia20https://github.com/mihaisucan/imagestore

Page 20: Proiectarea unui website universitar. Aplicatie practica:

Capitolul 3

Funct, ionalitat, i din aplicat, iaweb

In capitolele precedente am vorbit despre siteul Universitat, ii Agora, desprefunct, iile lui ın general, structura pe disc a codului sursa, cerint,ele tehnices, i despre proiectele open source folosite. In ansamblu, aplicat, ia web esteflexibila, us,or de modificat, se pot adauga funct, ii noi ın orice moment s, ise poate schimba interfat,a fara sa fie necesare modificari ın codul Python -exista o separare clara s, i stricta ıntre logica, interfat, a s, i design.

In acest capitol voi prezenta paginile importante din aplicat, ia web, ım-preuna cu detalii tehnice s, i informat, ii despre sect, iunile de administrare alesiteului.

3.1 Prima pagina

Prima pagina afis,eaza o diaporama ce are caracter promot, ional, compusadin unele poze ıncarcate pe site. Aici sunt selectate doar pozele ıncarcateın galeria de poze, s, i doar cele ce au eticheta

”diaporama”. In acest fel ad-

ministratorii siteului pot alege care poze apar pe prima pagina. Utilizatorulpoate face click pe poza pentru a vedea varianta mai mare.

Pozele din diaporama sunt decupate s, i redimensionate automat. Daca sefac modificari de design la prima pagina, pozele se pot redimensiona din nou.

Sub diaporama sunt listate ultimele s,tiri s, i legaturi catre studiile delicent, a ale Facultat, ii de Drept s, i S, tiint,e Economice. Pe partea stanga segases,te o harta a siteului minimala: meniurile s, i submeniurile principale.

S, abloanele HTML folosite ın aceasta pagina sunt:

18

Page 21: Proiectarea unui website universitar. Aplicatie practica:

3.1. PRIMA PAGINA 19

• pages/base.html,

• pages/welcome.html,

• welcome/first_news.html,

• welcome/other_news.html.

Toate s,abloanele se gasesc ın folderul site_ project/ templates .

Tot cont, inutul paginii este generat dinamic, fara a fi necesara editaremanuala din partea administratorilor. Pagina nu are un view propriu - estedoar o simpla pagina ın CMS. S, ablonul pages/welcome.html este unul catse poate de specific: acesta foloses,te template tags care genereaza cont, inutuldinamic.

Pentru primele doua s,tiri s,ablonul page/welcome.html are urmatorulcod:

<ol id=”welcome−f i r s t −news”>{% g e t r e c e n t e n t r i e s 2 ”welcome/ f i r s t n e w s . html” %}

</ ol>

Funct, ia get_recent_entries este un template tag din zinnia_tags, careapart, ine aplicat, iei django-blog-zinnia1. S, ablonul welcome/first_news.html este foarte simplu:

{% load i18n %}{% f o r entry in e n t r i e s %}

< l i><p class=” post−t i t l e ”>

<a href=”{{ entry . g e t a b s o l u t e u r l }}”>{{ entry . t i t l e }}</a>

</p><p class=” post−excerpt ”>

{{ entry . html content | s t r i p t a g s | truncatewords html : 6 0 | s a f e }}</p><p class=” post−date ”

t i t l e=”{{ entry . c r e a t i o n d a t e | date : ” r ” }}”>{{ entry . c r e a t i o n d a t e | date : ”DATE FORMAT” }}

</p><p class=” post−read−more”>

<a href=”{{ entry . g e t a b s o l u t e u r l }}”>

1http://django-blog-zinnia.com

Page 22: Proiectarea unui website universitar. Aplicatie practica:

20 CAPITOLUL 3. FUNCT, IONALITAT, I DIN APLICAT, IA WEB

{% trans ” read more” %}</a>

</p></ l i>

{% endfor %}Pentru noutat, ile afis,ate doar cu titlul lor exista o chemare la funct, ia

get_recent_entries care indica s,ablonul welcome/other_news.html. Acests,ablon afis,eaza doar entry.title cu legatura spre adresa articolului.

Meniurile s, i submeniurile afis,ate pe prima pagina sunt generate din s,a-blonul pages/welcome.html astfel:

<ul id=”welcome−menus”>{% show menu 0 1 1 1 %}

</ul>

Funct, ia show_menu este un template tag din menu_tags care apart, ine aplicat, ieidjango-cms2. Parametrii dat, i indica numarul de submeniuri dorite pentrusect, iunile active s, i inactive ale siteului.

Diaporama de pe prima pagina este generata tot din s,ablonul pages/

welcome.html:

{% t a g g e d o b j e c t s ”diaporama” ” imagestore . Image”” welcome images ” 10 ”?” %}

<script type=” text / j a v a s c r i p t ”>< !−−var header images = [{% for image in welcome images %}{% thumbnai l image . image ”950 x250” crop=” cente r ”

as header %}[ ”{{ image . t i t l e }}” ,”/{{ LANGUAGE CODE }}{% u r l imagestore−image−in−albumalbum id=image . album . pk pk=image . id %}” ,”{{ header . u r l }}” ,

] ,{% endthumbnai l %}{% endfor %}] ;// −−></ script>

{% compress j s %}<script type=” text / j a v a s c r i p t ”

src=”{{ STATIC URL }} j s /welcome . j s ”></ script>{% endcompress %}

2http://django-cms.org

Page 23: Proiectarea unui website universitar. Aplicatie practica:

3.1. PRIMA PAGINA 21

Funct, ia tagged_objects este un template tag din tagging_tags, ce apart, inepachetului django-tagging3 folosit de aplicat, ia imagestore4 cu care estefacuta galeria de poze. Aceasta funct, ie preia 10 obiecte cu eticheta diaporamacare sunt din modelul imagestore.Image, sortate aleator. Lista de imaginieste salvata ın variabila welcome_images.

Funct, ia thumbnail este un template tag din pachetul sorl-thumbnail5.Aceasta funct, ie redimensioneaza poza la rezolut, ia dorita.

Funct, ia compress este un template tag din pachetul django-compressor6.Aceasta este folosita pentru minificare/comprimarea codului JavaScript. Injs/welcome.js este codul care face animat, ia ıntre poze. Libraria jQuery7

este folosita pentru a facilita compatibilitatea ıntre navigatoarele web.

3https://code.google.com/p/django-tagging/4https://github.com/hovel/imagestore5https://github.com/sorl/sorl-thumbnail6https://github.com/jezdez/django_compressor7http://jquery.com

Page 24: Proiectarea unui website universitar. Aplicatie practica:

22 CAPITOLUL 3. FUNCT, IONALITAT, I DIN APLICAT, IA WEB

3.2 Gestionarea fis, ierelor de pe server

Gestionarul de fis, iere, django-filer8, permite utilizatorului sa adauge fol-dere, fis, iere, sa faca redenumiri, sa schimbe drepturile de acces, sa facaoperat, ii de mutare/copiere/s,tergere ın masa, s, i se pot face cautari dupafis, ierele dorite.

In cazul pozelor utilizatorii pot alege subiectul central, astfel ıncat sa nufie taiat la decupari.

Figura 3.1: Gestionarul de fis, iere.

Dupa cum se poate vedea ın captura de ecran exista not, iunea de memoriede tampon,

”clipboard”. Utilizatorul poate muta fis, iere dintr-un folder ın

clipboard, adica o zona temporara. Fiecare fis, ier are un buton cu sageataspre dreapta - daca se face click pe el, acesta este mutat ın clipboard. Dupace toate fis, ierele dorite sunt ın clipboard, acestea pot fi mutate de acolo ıntr-oalta destinat, ie - un alt folder ales de utilizator. In acest mod operat, iile decopiere/mutare ın masa a fis, ierelor se pot face mult mai us,or.

Acest gestionar de fis, iere este folosit s, i atunci cand administratorul dores,tesa atas,eze o poza sau un alt fis, ier ıntr-o pagina. Administratorul trebuie doarsa navigheze pana la fis, ier s, i sa faca click pe fis, ierul dorit pentru adaugare ınarticol.

8https://github.com/stefanfoulis/django-filer

Page 25: Proiectarea unui website universitar. Aplicatie practica:

3.3. GESTIONAREA PAGINILOR 23

Django Filer aduce ın proiect doua campuri importante: filer. fields.

FilerImageField s, i FilerFileField. Acestea sunt folosite ın modeleleDjango care accepta imagini s, i/sau alte fis, iere.

3.3 Gestionarea paginilor

Gestionarul de pagini din django-cms9 prezinta structura ierarhica a pagini-lor din site. Dupa cum se poate vedea ın captura de ecran, la fiecare paginasunt indicatori pentru limbile ın care aceasta este tradusa, data publicarii,daca pagina este publica, daca apare ın meniul de navigare s, i alte informat, ii.

Figura 3.2: Gestionarul de pagini - lista de pagini.

Pentru a reordona paginile se poate face drag la titlu dintr-un loc ın altul.

Daca sunt multe pagini, utilizatorul poate sa le filtreze ın mai multe feluri:exista un camp de cautare, filtre dupa autor, limba, starea paginii (publicatasau nu) s, i dupa alte criterii.

Fiecare pagina poate sa aiba cont, inut, sa fie doar o legatura spre o altaadresa sau poate sa fie o aplicat, ie. De exemplu, paginile

”Noutat, i” s, i ”

Galeriefoto” sunt aplicat, ii care au cont, inut propriu, generat dinamic din baza dedate. Editarea cont, inutului la acestea se face din sect, iuni diferite.

9http://django-cms.org

Page 26: Proiectarea unui website universitar. Aplicatie practica:

24 CAPITOLUL 3. FUNCT, IONALITAT, I DIN APLICAT, IA WEB

Pentru a edita o pagina utilizatorul trebuie doar sa faca click pe titlul ei.

Figura 3.3: Gestionarul de pagini - editare.

In timpul editarii unei pagini utilizatorul are opt, iuni de adaugare cont, inut- poze, filme, fis, iere, foldere, legaturi spre alte pagini, etc. De asemenea se potface pagini care redirect, ioneaza vizitatorii spre alte pagini, se poate schimbainterfat,a/s,ablonul paginii, se poate edita pagina ın alte limbi, etc.

Fiecare s,ablon HTML de pagina ın django-cms defines,te placeholders -regiuni ce pot fi editate de administratorii siteului. In aceste placeholders uti-lizatorul poate adauga plugins - tipuri diferite de cont, inut, de exemplu text,fis, ier, poza, video, etc. Plugins sunt modele Python care mos,tenesc modelulCMSPlugin. O pagina ın CMS este un model cu campurile pentru titluriın diferitele limbi, calea, setarile, s,ablonul ales s, i lista de plugins adaugateın fiecare placeholder. Toate aceste informat, ii se salveaza ın baza de date,inclusiv cont, inutul/setarile introduse ın interfat,a fiecarui plugin.

3.4 Blogul

Blogul”noutat, i” din siteul Universitat, ii Agora permite vizitatorilor sa filtreze

cont, inutului dupa etichete s, i categorii. Aces,tia se pot abona la s,tiri folosindu-se de fluxul Atom pus la dispozit, ie - exista programe specializate care ofera

Page 27: Proiectarea unui website universitar. Aplicatie practica:

3.4. BLOGUL 25

asemenea opt, iuni, de exemplu Mozilla Thunderbird10. Pentru a face cautareaarticolelor mai us,oara am inclus s, i pagini de arhiva unde vizitatorii pot vedeaarticolele grupate dupa ani sau luni.

Figura 3.4: Administrare blog - lista de articole.

Pentru administratori lista de articole poate fi filtrata dupa titlu, an,autor, status s, i alte criterii.

Editarea bilingva este cat mai us,oara: utilizatorul poate vedea ambelevariante ale articolului ın acelas, i timp. Articolele pot fi adaugate sub formade

”ciorne” - aceste articole nu apar pe site pana cand autorul alege sa le

faca publice. Articolele pot avea s, i statutul”ascuns”: un articol ascuns este

public, poate fi accesat, dar nu apare ın lista de articole pe blog.

Fiecare articol pe blog poate avea o poza asociata - aceasta este redimen-sionata automat. Vizitatorii pot face click pe poza pentru a vedea variantaoriginala. De asemenea, la fiecare articol autorul poate adauga o lista dearticole similare / related entries. Pentru protect, ie articolele pot fi parolate.

Implementarea blogului este facuta cu pachetul django-blog-zinna11.Principalele modele definite de acest proiect sunt: zinnia.models.Author,Category s, i Entry. Fiecare articol este asociat cu zero sau mai multe cate-gorii, s, i poate avea unul sau mai mult, i autori.

10https://www.mozilla.org/thunderbird/11http://django-blog-zinnia.com

Page 28: Proiectarea unui website universitar. Aplicatie practica:

26 CAPITOLUL 3. FUNCT, IONALITAT, I DIN APLICAT, IA WEB

S, ablonul de baza folosit pentru paginile din blog este site_project/

templates/zinnia/base.html. Listarea de articole se face cu entry_list.

html din acelas, i folder. Un articol de sine statator este afis,at cu ajutoruls,ablonului entry_detail.html.

Codul pentru integrarea aplicat, iei de blog cu django-cms se gases,te ınapps/robo/blog/cms_app.py.

Fiecare view este generat cu ajutorul claselor generice pentru views - deexemplu, django.views.generic.list detail.object list pentru primapagina a blogului, sau date_based views pentru arhivele de articole.

3.5 Galeria de imagini

Galeria de poze este structurata pe albume s, i etichete prin care utilizatoriipot naviga ın orice fel ıs, i doresc. Fiecare poza are titlu, etichete s, i o descriere.Vizitatorii siteului pot vedea s, i varianta originala - fara redimensionare.

Figura 3.5: Administrare poze - editarea unui album.

Administratorii pot ıncarca poze ın masa, un fis, ier ZIP cu toate pozele.La fiecare poza se pot adauga descriere, titlu s, i etichete. Fiecare album poatesa fie public sau nu - pana cand autorul ıl finalizeaza s, i alege sa-l faca public.

Page 29: Proiectarea unui website universitar. Aplicatie practica:

3.5. GALERIA DE IMAGINI 27

Dupa cum se poate vedea ın captura de ecran de mai sus, editarea unuialbum este optimizata pentru multe poze. Se pot face modificari la mai multepoze simultan.

Pentru implementarea galeriei de poze am folosit pachetul open sourceimagestore12. Imaginile sunt reprezentate de modelul imagestore. models.

Image. Acesta foloses,te campul ImageField din sorl-thumbnail13 pen-tru a gestiona mai us,or fis, ierele de tip imagine. Albumele au modelul lor:imagestore.models.Album.

Pentru views imagestore foloses,te views generice din Django: ListViews, i DetailView.

S, abloanele HTML folosite pentru galeria de poze:

• imagestore/image.html pentru vizualizarea unei poze.

• imagestore/image_list.html pentru lista de poze.

• imagestore/album_list.html pentru lista de albume.

12https://github.com/hovel/imagestore13https://github.com/sorl/sorl-thumbnail

Page 30: Proiectarea unui website universitar. Aplicatie practica:

28 CAPITOLUL 3. FUNCT, IONALITAT, I DIN APLICAT, IA WEB

3.6 Pagina Contact

Pagina de contact prezinta informat, ii generale de contact s, i un formular decontact unde vizitatorii pot sa scrie un mesaj catre departamentul dorit.Formularul este protejat de spam cu ajutorul serviciului recaptcha.net.

Figura 3.6: Pagina de contact.

Administratorii pot adauga adrese/departamente la care utilizatorii pottrimite mesaje. De asemenea ei pot edita informat, iile de contact afis,ate ınpagina.

Implementarea acestui formular se gases,te ın folderul apps/robo/contact.Am definit doua modele ContactRecipient s, i ContactGroup:

from django . db import models

class ContactGroup ( models . Model ) :t i t l e = models . CharField ( ( ’ t i t l e ’ ) , \

max length =150)

class Meta :verbose name = ( ’ contac t s group ’ )ve rbose name p lura l = ( ’ groups o f contac t s ’ )

Page 31: Proiectarea unui website universitar. Aplicatie practica:

3.6. PAGINA CONTACT 29

def u n i c o d e ( s e l f ) :return s e l f . t i t l e

class ContactRec ip ient ( models . Model ) :group = models . ForeignKey ( ContactGroup , \

verbose name= ( ’ group ’ ) )display name = models . CharField ( ( ’name ’ ) , \

max length =150)emai l = models . Emai lFie ld ( ( ’ emai l ’ ) , \

max length =100)

class Meta :verbose name = ( ’ r e c i p i e n t ’ )ve rbose name p lura l = ( ’ r e c i p i e n t s ’ )un ique toge the r = ( ( ’ group ’ , ’ emai l ’ ) , \

( ’ group ’ , ’ d isplay name ’ ) )

def u n i c o d e ( s e l f ) :return s e l f . d isplay name

Pentru integrarea cu django-cms14 am facut un model CMSPlugin carepoate fi folosit ca plugin ın orice pagina, ın orice placeholder din oricares,ablon.

from cms . models import CMSPlugin

class ContactPluginModel ( CMSPlugin ) :group = models . ForeignKey ( ContactGroup , n u l l=True ,

o n d e l e t e=models . SET NULL, \verbose name= ( ’ group ’ ) )

def c o p y r e l a t i o n s ( s e l f , o l d i n s t a n c e ) :s e l f . group = o l d i n s t a n c e . group

def u n i c o d e ( s e l f ) :i f s e l f . group :

return s e l f . group . t i t l ereturn ( ’<no r e c i p i e n t s > ’ )

In cms_plugin.py se gases,te s, i implementarea modelului ContactPlugincare afis,eaza formularul de contact s, i proceseaza datele introduse de utiliza-

14http://django-cms.org

Page 32: Proiectarea unui website universitar. Aplicatie practica:

30 CAPITOLUL 3. FUNCT, IONALITAT, I DIN APLICAT, IA WEB

tor. S, ablonul HTML folosit de formular: templates/contact/contact.

html.

3.7 Motorul de cautare

Motorul de cautare al siteului cauta ın cont, inutul paginilor, articolelor dinblog s, i ın descrierile pozelor. Pozele sunt listate nu doar ca legaturi, se faces, i o previzualizare a pozei.

Figura 3.7: Pagina de cautare.

Pentru implementarea motorului de cautare sunt folosite urmatoarele pa-chete open source:

Whoosh este un motor de indexare s, i de cautare documente, scris ınPython. 15

django-haystack este un pachet care integreaza Whoosh s, i alte motoarede cautare cu Django. Acesta abstractizeaza modelele de indexare afiecarui motor de cautare, s, i ofera funct, ii de cautare comune pentruele. 16

15https://bitbucket.org/mchaput/whoosh/16http://haystacksearch.org

Page 33: Proiectarea unui website universitar. Aplicatie practica:

3.7. MOTORUL DE CAUTARE 31

django-cms-search 17 este un pachet care include modele de indexare acont, inutului din paginile django-cms18. Acestea sunt modele haystack.indexes.SearchIndex, specifice django-haystack.

Fiecare sect, iune din siteul Universitat, ii Agora are un model, un tabel ınbaza de date: exista modelele pentru pagini, articolele din blog s, i pentrupozele din galerie - as,a cum au fost explicate ın sect, iunile anterioare ale aces-tui document. Pentru fiecare model exista ınca un model SearchIndex caredescrie cum trebuie indexat modelul din baza de date. Acestea se gasescın fis, ierele search_indexes.py din folderele pachetelor Django. Mai jos re-dau modelul SearchIndex pentru blog din fis, ierul apps/robo/blog/search_indexes.py:

# ...from haystack import indexesfrom z i n n i a . models import Entryfrom robo . u t i l s . s earch \

import r e g i s t e r m u l t i l a n g u a g e s e a r c h

class EntryIndex ( indexes . SearchIndex ) :t ex t = indexes . CharField ( document=True , \

use template=False )pub date = indexes . DateTimeField ( \

mode l at t r=’ s t a r t p u b l i c a t i o n ’ , \n u l l=True )

l o g i n r e q u i r e d = indexes . BooleanFie ld ( \mode l at t r=’ l o g i n r e q u i r e d ’ )

u r l = indexes . CharField ( \s to r ed=True , \indexed=False , \mode l at t r=’ g e t a b s o l u t e u r l ’ )

t i t l e = indexes . CharField ( s to r ed=True , \indexed=False , \mode l at t r=’ t i t l e ’ )

s i t e i d = indexes . I n t e g e r F i e l d ( s to r ed=True , \indexed=True )

def prepare ( s e l f , obj ) :s e l f . prepared data = super ( EntryIndex , s e l f ) \

17https://github.com/piquadrat/django-cms-search18http://django-cms.org

Page 34: Proiectarea unui website universitar. Aplicatie practica:

32 CAPITOLUL 3. FUNCT, IONALITAT, I DIN APLICAT, IA WEB

. prepare ( obj )

t i t l e = f o r c e u n i c o d e ( obj . t i t l e )content = s t r i p t a g s ( obj . html content )s e l f . prepared data [ ’ t ex t ’ ] = t i t l e + ”\n” + \

f o r c e u n i c o d e ( obj . tags ) + \”\n” + content

s i t e i d = S i t e . o b j e c t s . g e t c u r r e n t ( ) . id ;i f obj . s i t e s . count ( ) > 0 :

s i t e i d = obj . s i t e s . get ( ) . ids e l f . prepared data [ ’ s i t e i d ’ ] = s i t e i d

return s e l f . prepared data

def i ndex que ry s e t ( s e l f ) :return s e l f . model . pub l i shed . a l l ( )

r e g i s t e r m u l t i l a n g u a g e s e a r c h ( Entry , EntryIndex )

Dupa cum se poate vedea mai sus sunt definite campurile de indexare pen-tru motorul de cautare. Acestea sunt tot timpul aceleas, i, ın toate sect, iuniledin site. Ceea ce difera de fiecare data este felul ın care modelul Django estetranslatat ın SearchIndex. In acest exemplu se vede cum se face indexareapentru zinnia.models.Entry - acestea reprezinta articolele din blog.

Pentru suportul multilingvistic al aplicat, iei am folosit django-modeltranslation19. Cu ajutorul acestuia a introdus traduceri la campurilefiecarui model din aplicat, ie. Modelele de traducere se gasesc ın fiecare fis, iernumit translation.py.

Fiecare pagina, ın fiecare limba, este indexata separat pentru motorul decautare. Cu funct, ia register_multilanguage_search() din robo.utils.

search fac mai simpla ınregistrarea fiecarui model, ın fiecare limba disponi-bila.

Pentru pagina de cautare este folosit s,ablonul site_project/templates/search/search.html.

19https://github.com/deschler/django-modeltranslation

Page 35: Proiectarea unui website universitar. Aplicatie practica:

3.8. HARTA SITEULUI 33

3.8 Harta siteului

Harta siteului este generata dinamic cu ajutorul pachetului inclus implicitın Django: django.contrib.sitemaps20. Harta este disponibila ın formatSitemaps XML [1]. Pentru fiecare sect, iune din site exista un fis, ier sitemaps.py care include o clasa Sitemap ce defines,te felul ın care fiecare model Djangoeste indexat. Mai jos redau clasa Sitemap folosita pentru indexarea pozelors, i a albumelor din site21:

from django . con t r i b . s i temaps import Sitemapfrom django . core . u r l r e s o l v e r s import r e v e r s efrom imagestore . models import Album , Image

class ImageSitemap ( Sitemap ) :p r i o r i t y = 0 .5change f req = ’ monthly ’

def i tems ( s e l f ) :return Image . o b j e c t s . f i l t e r ( \

a l b u m i s p u b l i c=True )def lastmod ( s e l f , obj ) :

return obj . updateddef l o c a t i o n ( s e l f , obj ) :

return r e v e r s e ( ’ imagestore−image−in−album ’ , \kwargs={ ’ album id ’ : obj . album . pk , \

’ pk ’ : obj . pk})

class AlbumSitemap ( Sitemap ) :p r i o r i t y = 0 .5change f req = ’ monthly ’def i tems ( s e l f ) :

return Album . o b j e c t s . f i l t e r ( \i s p u b l i c=True , \h e a d i s n u l l=Fal se )

def lastmod ( s e l f , obj ) :return obj . updated

20https://docs.djangoproject.com/en/1.3/ref/contrib/sitemaps/21vezi fis, ierul apps/robo/gallery/sitemaps.py

Page 36: Proiectarea unui website universitar. Aplicatie practica:

34 CAPITOLUL 3. FUNCT, IONALITAT, I DIN APLICAT, IA WEB

Figura 3.8: Harta siteului.

Pentru pagina HTML pachetul open source cmsplugin-htmlsitemap22

este folosit. Acesta este un plugin pentru django-cms ce genereaza o hartaa paginilor, ın fiecare limba.

Pagina cu harta siteului foloses,te s,ablonul site_project/templates/

pages/sitemap.html. Pentru interactivitate este folosit fis, ierul JavaScript:site_project/static/js/sitemap.js.

22https://github.com/raphaa/cmsplugin-htmlsitemap

Page 37: Proiectarea unui website universitar. Aplicatie practica:

Concluzii

Siteul Universitat, ii Agora este acum un site modern, cu design atractiv s, i cuo structura us,or de navigat. Aceasta aplicat, ie web moderna este dezvoltataıntr-un mod ce va permite proprietarilor sa creasca siteul de la an la an,adaugand cont, inut cat s, i funct, ii noi. Alegerea platformei Django a fost odecizie esent, iala care va avea un impact mare ın timp - colaboratori noi,programatori noi, echipe interesate din cadrul universitat, ii au posibilitateasa itereze ımbunatat, iri de cont, inut s, i modificari tehnice la site.

Proiectul prezentat ın aceasta lucrare trebuie sa evolueze cu ajutorulstudent, ilor pasionat, i de informatica. Cu ajutorul tehnologiei Git se pot facemodificari la site, ın colaborare. Pe viitor se pot face optimizari tehnice,ıncarcare mai rapida a cont, inutului s, i alte modificari.

Mult,umesc domnului profesor coordonator Ioan Dzit,ac pentru oportuni-tatea de a realiza o aplicat, ie web moderna, s, i pentru sprijinul acordat ıncompletarea acestuia cu cont, inut. Mult,umesc s, i lui Marius S, ucan pentrurealizarea interfet,ei pentru site.

35

Page 38: Proiectarea unui website universitar. Aplicatie practica:

Glosar

Apache este cel mai folosit server web1, distribuit ca software liber deFundat, ia Apache. 3, 9

Atom este un format XML standard, RFC 42872, pentru fluxuri web.Acesta permite navigatoarelor web sau oricarui alt software sa verificedaca sunt actualizari la resurse de pe web. In unele implementari maiavansate, formatul Atom poate permite s, i publicarea s, i actualizarearesurselor/paginilor web. 6, 9, 24

CMS (Content Management System) este un sistem de gestiune a cont, inutului.19, 24

CSS (Cascading Style Sheets) este un limbaj de formatare a elementelordintr-o pagina web3, standardizat de catre W3C. 7, 9

Django este un cadru pentru dezvoltarea aplicat, iilor web cu Python 4.Acest proiect are sursa libera s, i este distribuit sub licent, a BSD5. 8,10, 11, 35

ECMAScript este un limbaj de programare dinamic standardizat deEcma International, ın cadrul specificat, iei ECMA-2626 s, i ISO/IEC16262. Limbajul este implementat sub forma unor dialecte bine cu-noscute precum JavaScript, JScript s, i ActionScript. 37

Git este un sistem distribuit de gestionare a codului sursa7. Acest proiectare sursa libera s, i este distribuit sub licent, a GPL8 v2. 3, 8, 9, 17, 35

1http://httpd.apache.org2http://tools.ietf.org/html/rfc42873http://www.w3.org/Style/CSS/4http://djangoproject.com5Berkley Software Distribution6http://www.ecma-international.org/publications/standards/Ecma-262.htm7http://git-scm.org8GNU General Public License

36

Page 39: Proiectarea unui website universitar. Aplicatie practica:

Glosar 37

HTML (HyperText Markup Language) este un limbaj de marcare folositpentru crearea paginilor web9, standardizat de catre W3C. Navigatoa-rele web interpreteaza codul HTML pentru a afis,a cont, inutul. 7–9,11, 17, 18, 24, 27, 30, 34, 37

HTTP (HyperText Transfer Protocol) este un protocol de ret,ea distri-buit pentru colaborare ın sisteme informatice interactive [3]. Acestprotocol este de tip cerere – raspuns, unde clientul, navigatorul web,cere o anumita adresa s, i primes,te raspunsul de la server. HTTP estefundamentul webului, fiind principalul protocol de transfer de date.10, 13

JavaScript este o implementare a standardului ECMAScript, ce se rega-ses,te cu precadere ın navigatoarele web. Acest limbaj de programarepermite aplicat, iilor web sa fie dinamice s, i interactive. 7, 9, 34

Linux este un sistem de operare gratuit cu sursa libera a carui com-ponenta principala este nucleul monolitic care are acelas, i nume: Li-nux [5].. 3, 9

MySQL este un sistem de gestiune a bazelor de date relat, ional10, softwareliber distribuit sub licent,a GPL11 v2. 3, 8–10, 12

nginx este un server web mic s, i performant12, distribuit sub licent, aBSD13. 3, 9

PHP este un limbaj de programare dinamic14 ce nu are o specificat, ie for-mala. Acesta este folosit cu precadere pe serverele web pentru genera-rea dinamica a paginilor HTML. Principala implementare a limbajuluieste un software liber cunoscut tot sub numele de PHP. 10

PostgreSQL este un sistem de gestiune a bazelor de date relat, ional15,software liber.. 3, 8, 9, 12

Python este un limbaj de programare dinamic 16. 3, 6, 8, 9, 13, 24, 30

9http://www.w3.org/html/wg/10http://www.mysql.com11GNU General Public License12http://nginx.org13Berkley Software Distribution14http://www.php.net15http://www.postgresql.org16http://www.python.org

Page 40: Proiectarea unui website universitar. Aplicatie practica:

38 Glosar

SQLite este un sistem de gestiune a bazelor de date 17. Codul sursaal acestui proiect este ın domeniul public - fara nici o restrict, ie delicent, iere.. 3, 8, 12

URL (Uniform Resource Locator) ınseamna localizator uniform de re-surse. Un URL este o referint, a pentru o resursa. Aceste URL-urisunt cunoscute s, i sub numele de adrese web. [4]. 10, 13

W3C (World Wide Web Consortium) este principalul consort, iu interna-t, ional de standardizare a webului18. Membrii organizat, iei dezvolta s, iratifica standarde web precum HTML, CSS s, i SVG. 36–38

Whoosh este o librarie de indexare s, i de cautare implementata ın Py-thon 19. Acest proiect are sursa libera s, i este distribuit sub licent, aBSD20. 6, 9

WSGI (Web Server Gateway Interface) este o interfat, a simpla s, i uni-versala de comunicare ıntre un server web s, i o aplicat, ie web facuta ınPython. [2]. 3, 9, 10, 14, 16

XML (Extensible Markup Language) este un meta-limbaj de marcare,de descriere structurata a datelor21, standardizat de catre W3C. Cuajutorul acestui meta-limbaj se pot defini alte limbaje de marcare,precum XHTML, Atom s, i SVG. 9

17http://www.sqlite.org18http://www.w3.org19https://bitbucket.org/mchaput/whoosh/20Berkley Software Distribution21http://www.w3.org/XML/

Page 41: Proiectarea unui website universitar. Aplicatie practica:

Lista de figuri

1.1 Prima pagina a noului site univagora.ro, ın limba romana. . . 4

3.1 Gestionarul de fis, iere. . . . . . . . . . . . . . . . . . . . . . . 22

3.2 Gestionarul de pagini - lista de pagini. . . . . . . . . . . . . . 23

3.3 Gestionarul de pagini - editare. . . . . . . . . . . . . . . . . . 24

3.4 Administrare blog - lista de articole. . . . . . . . . . . . . . . 25

3.5 Administrare poze - editarea unui album. . . . . . . . . . . . 26

3.6 Pagina de contact. . . . . . . . . . . . . . . . . . . . . . . . . 28

3.7 Pagina de cautare. . . . . . . . . . . . . . . . . . . . . . . . . 30

3.8 Harta siteului. . . . . . . . . . . . . . . . . . . . . . . . . . . 34

39

Page 42: Proiectarea unui website universitar. Aplicatie practica:

Bibliografie

[1] Documentat, ia Sitemaps XML.http://www.sitemaps.org/

[2] Web Server Gateway Interface.https://en.wikipedia.org/wiki/Web_Server_Gateway_Interface

[3] Descrierea protocolului HTTP.http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

[4] Uniform Resource Locator.https://en.wikipedia.org/wiki/Uniform_resource_locator

[5] Sistemul de operare Linux.https://en.wikipedia.org/wiki/Linux

[6] Documentat, ia Django.https://docs.djangoproject.com/

[7] Documentat, ia Python.http://docs.python.org/2.7/

40