FACUL TATEA DE MATEMATICĂ ȘI INFORMATICĂ [615584]

UNIVERSITATEA DIN BUCUREȘTI
FACUL TATEA DE MATEMATICĂ ȘI INFORMATICĂ
DOMENIUL DE LICENȚĂ INFORMATICĂ
LUCRARE DE LICENȚĂ
Aplicație web pentru proiecte de licență
Coordonator științific:
Conf.dr. Alin Ștefănescu
Absolvent: [anonimizat]-Ștefan Porohniuc
BUCUREȘTI
2017

Cuprins
Introducere………………………………………………………………………………………………………………………….3
1. Tehnologii folosite…………………………………………………………………………………………………………….5
1.1. HTML……………………………………………………………………………………………………………………….5
1.2. CSS…………………………………………………………………………………………………………………………….7
1.3. Javascript……………………………………………………………………………………………………………………10
2

Introducere
Universitatea din București, aflată printre cele mai prestigioase instituții de învățământ superior
din România, reprezintă o destinație extrem de atractivă pentru toți viitorii studenți. În contextul
actual, peste 30.000 de tineri sunt înscriși la una din facultățile din cadrul Universității din București,
cu înca 20.000 aplicând anual pentru locurile disponibile pentru studiu ale acestor instituții.
În această lucrare, voi prezenta atât descrierea, cât și procesul de dezvoltare a unei aplicații de tip
Web dedicată studenților din anii terminali și pre-terminali ai studiului universitar de licență din
cadrul Universității din București .
Aplicația este denumită uplicență și este dezvoltată folosind framework-ul Angular, limbajul de
programare Typescript și o arhitectură bazată pe componente. Alegerea acestor tehnologii se bazează
pe gradul lor de noutate (Angular 4 a apărut pe 23 Martie 2017) , gradul lor de utilizare în momentul
de față, posibilitatea utilizării unui singur limbaj de programare atât pentru front-end cât și pentru
back-end și abordarea nouă și rapidă oferită de acest framework pentru dezvoltarea unei aplicații de
tip Web.
Întrucât nu există informații clare privind profesorii la care studenții din anii menționați anterior
se pot înscrie pentru examenul de licență, preferințele acestora în materie de teme abordate, numărul
de locuri disponibile sau o modalitate ușor accesibilă de a intra în contact cu profesorul dorit, aceasta
aplicație are ca scop ușurarea procesului de înscriere la acest examen și menținerea unei legături
puternice între absolvent: [anonimizat], aplicația prezintă următoarele
funcționalități:
•Informații actualizate în timp real cu privire atât la numărul de locuri disponibile ale
fiecărui profesor, cât și a studenților înscriși cu un anumit proiect la acesta
3

•O lista de proiecte posibile personalizată pentru fiecare profesor în parte, la care un
student: [anonimizat]
•Posibilitatea de a trimite o cerere cu o alta idee decât cele aflate în lista de proiecte
propuse
•Posibilitatea discuțiilor între profesori și studenți prin chatroom-uri dedicate sau
canale private de discuție
•Un sistem de contra-propuneri la cererile de înscriere a studenților
•Acces rapid la stadiul curent al licenței, proiectului ales și un canal privat de discuție
cu coordonatorul științific pentru cei deja înscriși
•Posibilitatea de a trimite imagini și a vedea acum cât timp au fost activi anumiți
utilizatori
Aplicația uplicență este disponibilă online la adresa http://uplicenta.me și vine în întâmpinarea
oricărui student care este încă indecis cu privire la proiectul său de licență sau caută informații despre
acest proces sau a tuturor profesorilor cu anumite proiecte standardizate, preferințe tematice sau care
iși doresc o comunicare mai eficientă și un proces mai puțin impersonal de înscriere pentru examenul
de licență.
În prima parte a lucrării voi face referire la tehnologiile și limbajele de programare utilizate în
această aplicație și modalitățile de implementare a funcționalităților descrise anterior, în timp ce a
doua parte va fi dedicată unei descrieri amanunțite a aplicației și a modului de interacțiune a
componentelor acesteia din punctul de vedere atât al utilizatorului (student sau profesor), cât și a
arhitecturii software.
4

1. Tehnologii folosite
Acest proiect utilizeaza o multitudine de tehnologii de actualitate pentru a crea o aplicație web
optimizată, complexă și placută din punct de vedere al design-ului. În cele ce urmează voi prezenta în
detaliu fiecare componentă utilizată în alcătuirea acestei aplicații.
1.1. HTML
Hypertext Markup Language , abreviat ca HTML, este un limbaj de marcare bazat pe internet ce
functionează ca principala arhitectură a structurii și conținutului fiecărui site accesibil în acest
moment. Tot ceea ce este afișat într-un browser este organizat cu ajutorul HTML, facându-l o parte
inextricabilă a oricărui proces de dezvoltare web.
Partea de Hypertext face referire la anumite link-uri ce realizează conexiuni între pagini web, fie
ele din același site sau între site-uri diferite. Link-urile reprezintă un aspect fundamental al site-urilor
web.
Original, HTML a fost creat cu intenția definirii structurii anumitor documente (spre exemplu
paragrafe, liste, titluri) pentru a facilita împarțirea documentelor de către cercetători. În ziua de azi,
HTML este folosit în cea mai mare parte pentru a formata pagini web cu ajutorul tag-urilor puse la
îndemână de către acest limbaj.
Pentru a desemna un tag, se utilizeaza caracterele < și >, care înconjoară un șir de caractere
descriptiv pentru scopul tag-ului. Cu mici excepții, majoritatea tag-urilor au un corespondent ce
marchează închiderea acestuia. Spre exemplu, tag-ul <html> are corespondentul </html> ce
marcheaza închiderea sa, iar tag-ul <img/> nu are un corespondent, întrucât acesta nu are un
conținut. Astfel, documentele HTML implică o structură compusă din elemente HTML imbricate,
asemănătoare unui arbore.
5

În forma sa cea mai simplă, o pagină scrisă în HTML poate arăta astfel:
Astfel, orice pagină corect definită trebuie sa înceapă cu tag-ul doctype ce transmite informații
browserului referitoare la versiunea de HTML folosită, urmat de tag-ul html, ce va conține întregul
document. Mai apoi, acesta conține alte două tag-uri principale, head și body. Head reprezintă
header-ul documentuui ce poate conține importuri de CSS sau Javascript (tag-ul link), informații
referitoare la pagină în sine (tag-ul metadata) sau chiar titlul paginii (tag-ul title). Body reprezintă
corpul documentului și marchează conținutul efectiv al paginii, acesta putând conține o multitudine
de tag-uri precum p, img sau div.
Majoritatea tag-urilor din HTML pot avea și atribute, ce reprezintă informații adiționale despre
acestea. Un atribut este folosit pentru a defini caracteristicile unui element HTML (perechea de tag-
uri de deschidere și închidere se numește un element) și este introdus înauntrul tag-ului de deschidere
a acestui element.
Toate atributele sunt alcătuite din două părți : un nume și o valoare.
•Numele este o proprietate ce poate fi setată. Spre exemplu, paragrafele din exemplu conțin un
atribut al cărui nume este align, ce poate fi folosit pentru a indica alinierea paragrafului în
pagină.
6

•Valoarea este opțiunea la care poate fi setată proprietatea și este întotdeauna pusă între
ghilimele. Exemplul de mai jos arată trei posibile valori pentru proprietatea align: left, center și
right.
Specificațiile HTML sunt alcătuite de către World Wide Web Consortium , abreviat W3C.
Aceștia au publicat a cincea și cea mai nouă revizuire a standardului HTML, denumit HTML5, pe 28
Octombrie 2014. În aceasta revizuire au fost adăugate numeroase îmbunătațiri și caracteristici, printre
cele mai interesante fiind elementele video, audio, și canvas pentru a ușura manipularea și includerea
conținuturilor grafice și de tip multimedia în web fără a fi nevoie să se utilizeze plugin-uri sau API-
uri.
De asemenea, conținutul semantic al paginilor a fost îmbunătățit cu ajutorul noilor elemente
section, article, header și nav și noi reguli și definiții au fost aduse pentru a asigura o tratare uniformă
a sintaxei erorilor privind documente invalide în toate browserele cunoscute.
1.2. CSS
Cascading Style Sheets sau CSS este un standard folosit în formatarea elementelor unui
document HTML. Acesta specifică cum este prezentat un document sau o pagina unui utilizator și
funcționează după anumite reguli ce dictează stilizarea elementelor HTML și modul în care
respectivele elemente trebuie să arate. Regulile acestea au fost conceput pentru a putea separa
prezentarea unui document de conținutul acestuia.
O regulă CSS este alcătuită dintr-un selector ce specifică elementul sau elementele pentru care se
7

va aplica noua stilizare și un set de perechi de tip proprietate:valoare înconjurate de acolade ce
reprezintă modul în care vor fi afectate elementele indicate de către selector.
Având în vedere multitudinea de metode prin care poate fi stilizat sau modificat un element
HTML, nu există un mod standardizat prin care să se realizeze aceste transformări ce țin de design,
acestea rămânând la nivelul progamatorului și al stilului său de a programa.
Însă, pentru a înțelege cum funcționează CSS-ul, trebuie sa introducem termenul de DOM.
Atunci când un browser afișează un document, acesta trebuie să combine conținutul documentului
cu informațiile despre stilul acestui conținut. Browser-ul procesează documentul în două etape:
1.Browser-ul convertește HTML și CSS în DOM (Document Object Model ). DOM-ul
reprezintă documentul în memoria calculatorului. Acesta combină conținutul documentului
cu stilul acestuia.
2.Browser-ul afișează conținutul DOM-ului.
DOM-ul are o structură arborescentă. Fiecare element sau atribut din limbajul de marcare devine
un nod al DOM-ului în structura acestuia. Nodurile sunt definite prin relațiile pe care aceștia le au cu
celelate noduri. Spre exemplu, unele elemente sunt părinții unor noduri, numite noduri copil, iar
aceste noduri copil pot fi frații altor noduri copil.
8

În exemplele din stânga și dreapta putem observa cum
nodul corespunzător elementului <p> este un nod
părinte, iar copiii săi sunt un nod text și nodurile
corespunzătoare elementelor <i>.
Elementele <i> sunt, de asemenea, părinții nodurilor text dinăuntrul lor.
Exemplul din dreapta reprezintă arborele DOM asociat codului HTML din stânga.
Stilurile se pot atașa elementelor HTML prin 3 moduri, fie cu ajutorul unor fișiere externe ce pot
fi importate în zona head a documentului sau în cadrul acestuia, fie prin elementul cu tag-ul style sau
inline, prin atributul cu același nume.
Prima metodă, și anume importarea fișierelor externe, este și cea mai recomandată, întrucât în
acest mod se poate folosi un singur fișier .css pentru a stiliza documente multiple, iar în cazul în care
sunt necesare anumite modificări, doar acest singur fișier va trebui editat și nu toate paginile ce
depind de el.
A doua metodă, cea utilizând tag-ul style poate fi de folos în anumite circumstanțe în care
fișierele CSS nu pot fi modificate în mod direct, însă nu este o metodă la fel de eficientă precum cea de
dinainte deoarece ne va obliga să repetăm stilurile dorite și să aplicăm orice schimbare în fiecare
pagină a site-ului.
A treia și ultima metodă ce se deservește de atributul inline style aduce de la sine dezavantajele
metodei anterioare și reprezintă o amestecare a informației CSS-ului prezentațional cu informația
structurală a HTML-ului, făcând astfel CSS-ul mai puțin lizibil și mai greu de înțeles. În general nu
este recomandată o astfel de abordare a stilizării paginilor.
Cel mai nou standard publicat pentru CSS se numește CSS3 și este împărțit în mai multe
documente numite module. Fiecare modul adaugă capabilități noi sau extind caracteristici definite în
standardul anterior (CSS2), menținând compatibilitatea cu acesta.
9

Dintre aceste module, cele mai interesante și importante sunt selectorii, animațiile, imagini de
fundal, borders sau box model, ce interpretează fiecare element HTML ca un dreptunghi ce poate fi
aliniat și modificat în diverse feluri.
Având în vedere împărțirea standardului CSS3 în module, este dificil de discutat despre un
eventual standard CSS4, însa exista anumite module ce pot fi considerate de nivel 4.
1.3. Javascript
10