HomePageU I Descrierea platformei este afisat ă [604652]

TITLUL LUCRĂRII DE LICENȚĂ

LUCRARE DE LICENȚĂ

Absolvent: [anonimizat]: titlul științific Prenume NUME

2015

DECAN, DIRECTOR DEPARTAMENT,
Prof. dr. ing. Liviu MI CLEA Prof. dr. ing. Honoriu VĂLEAN

Absolvent: [anonimizat]

1. Enunțul temei: Scurtă descriere a temei lucrării de licență și datele inițiale

2. Conținutul lucrării: (enumerarea părților componente) Exemplu: Pagina de
prezentare, aprecierile coordonatorului de lucrare, titlul capitolului 1, titlul
capitolului 2,… titlul capitolului n, bibliografie, anexe.

3. Locul documentării : Exemplu : Un iversitatea Tehnică din Cluj -Napoca,
Departamentul Calculatoare

4. Consultanți :

5. Data emiterii temei: 1 noiembrie 2014

6. Data predării: 18 Iunie 201 5 (se va completa data predării )

Absolvent: ____________________________

Coordonator științific: ____________________________

Declarație pe proprie răspundere privind
autenticitatea lucrării de licență

Subsemnatul(a) _______________________________________________________
______________________________________________________________ ___,
legitimat(ă) cu _______________ seria _______ nr. ___________________________
CNP _______________________________________________ , autorul lucrării
________________________________________________________________________
______________________________ __________________________________________
____________________________________________elaborată în vederea susținerii
examenului de finalizare a studiilor de licență la Facultatea de Automatică și
Calculatoare, Specializarea _______________________________ _________ din cadrul
Universității Tehnice din Cluj -Napoca, sesiunea _________________ a anului universitar
__________, declar pe proprie răspundere, că această lucrare este rezultatul propriei
activități intelectuale, pe baza cercetărilor mele și pe baza informațiilor obținute din surse
care au fost citate, în textul lucrării, și în bibliografie.
Declar, că această lucrare nu conține porțiuni plagiate, iar sursele bibliografice au
fost folosite cu respectarea legislației române și a convențiilor internațio nale privind
drepturile de autor.
Declar, de asemenea, că această lucrare nu a mai fost prezentată în fața unei alte
comisii de examen de licență.
In cazul constatării ulterioare a unor declarații false, voi suporta sancțiunile
administrative, respectiv, anularea examenului de licență .

Data

_____________________ Nume, Prenume

_______________________________

Semnătura

Cuprins
Capitolul 1. Introducere – Context ul proiectului ………….. Error! Bookmark not defined.
1.1 Contextul proiectului ………………………….. ………………………….. …………………… 1
1.2 Tema și conținutul proiectului ………………………….. ………………………….. ………… 2
1.3 Conținutul lucrării ………………………….. ………………………….. ……………………….. 4
Capitolul 2. Obiectivele și specificațiile proiectului ………………………….. ……………………. 5
2.1. Obiective ………………………….. ………………………….. ………………………….. ……….. 5
2.2. Specificațiile proiectului ………………………….. ………………………….. ……………….. 6
Capitolul 3. Studiu bibliografic ………………………….. ………………………….. ………………….. 9
3.1 Conceptul de e -learning ………………………….. ………………………….. ……………….. 9
3.2 Comparație cu alte soluții existente ………………………….. ………………………….. 10
Capitolul 4. Analiză și proiectare ………………………….. ………………………….. ……………… 13
4.1 Tehnologii folosite ………………………….. ………………………….. …………………….. 13
4.1 Proiectarea aplicației ………………………….. ………………………….. ………………… 21
Capitolul 5. Implementare ………………………….. ………………………….. ……………………….. 26
5.1 Implementarea bazei de date ………………………….. ………………………….. ……….. 26
5.2 Forum ………………………….. ………………………….. ………………………….. ………….. 27
5.3 Live Streaming ………………………….. ………………………….. ………………………….. . 33
5.4 Metoda de căutare ………………………….. ………………………….. …………………….. 34
5.5 Selectarea limbii de prezentare ………………………….. ………………………….. ……. 36
5.6 Galerii Multimedia ………………………….. ………………………….. …………………….. 37
5.7 Design ………………………….. ………………………….. ………………………….. …………. 41
Capitolul 6. Testare și validare ………………………….. ………………………….. …………………. 49
6.1 Testare manuală ………………………….. ………………………….. ………………………… 49
6.2 Testare automată ………………………….. ………………………….. ……………………….. 53
Capitolul 7 . Concluzii ………………………….. ………………………….. ………………………….. …. 57
7.1 Concluzii ………………………….. ………………………….. ………………………….. ……… 57
7.2 Dezvoltări ulterioare ………………………….. ………………………….. …………………… 57
Bibliografie ………………………….. ………………………….. ………………………….. ………………. 59

Capitolul 1 – INTRODUCERE
1
Capitolul 1 INTRODUCERE
1.1 Contextul proiectului
Internetul este astăzi o resursă foarte importantă ȋn aproape toate domeniile, acesta
facilitând accesul la informație si avand un rol semnificativ ȋn reducerea barierelor de
comunicație. Fiind disponibil ȋn orice moment, internetul aduce odata cu el nenumărate
beneficii, printre care, pe lângă cele mentionate anterior, cele mai importante fiind
salvarea timpului, prin actiunile la distanță care pot fi făcute acum prin intermediul
internetului, cât și contribuția sa activă in procesul de globalizare. De asemenea, trebuie
amintit rolul extr em de important pe care il are internetul pe plan social, acesta fiind
uneori chiar principalul mijloc de comunicare ȋntre membrii unei societății, creându -se
astfel adevărate societăți on -line.
Aflându -ne ȋntr -un mediu ȋn continuă schimbare din punct d e vedere tehnologic,
era inevitabil ca, internetul să nu fie un pilon de baza în ceea ce priveste educația, unde
informațiile transmise și primite trebuie să țină pasul ȋntotdeauna cu evoluția, fiind tot
timpul actuale. Având la dispoziție această resursă aproape infinită, educația ȋnsăși a
evoluat mult ȋn ultimele decenii, favorizând apariția conceptului de ―e -learning‖, adică de
ȋnvatare prin mijloace tehnologice, internetul constituind atât mediul de distribuire a
materialelor, cât si canalul principal d e comunicare ȋntre parțile implicate. Astfel s -a
ajuns la crearea așa -numitelor platforme de tip e -learning, care adună intr -un singur loc
informația necesară parcurgerii unui anumit curs, a unei anumite discipline , sau al unui
anumit proces ȋn funcție de domeniul ȋn care este folosită. Pe lângă materialele
electronice pe care le pune la dispoziție, pe suport digital sau multimedia, platforma
didact ică poate fi prevă zută cu mijloa ce de testare și evaluare a părț ii instruite din cadrul
procesului de ȋnvățare . Un alt element care poate fi regăsit ȋn componența unei platforme
de tip e -learning este reprezentat de un canal de comunicare intern ȋntre actorii
participanți la acest proces didactic. Un beneficiu al utilizării unei platforme de tip e –
learning ȋl con stituie accesul ȋn timp real la cunostințe, de oriunde și oricând, singurele
condiții fiind accesul la internet și ȋn cele mai multe cazuri deținerea unui cont de
utilizator al platformei respective. Diversitatea lingvistică este un alt aspect de care se
ocupă o astfel de platformă, ȋn cele mai multe din cazuri, aceasta fiind oferită ȋn mai
multe limbi de circulație internațională, acestea depinzând de zona ȋn care se g ăsește
publicul țintă al aplicaț iei.
Ȋntr-un context cum este cel de față, ȋn care evolu ția tehnologică din cadrul
domeniului automatizărilor trebuie ȋmpletită cu cerințele exigente ale educației superioare
și cu cele mai recente metode de ȋnvățare, necesitatea unei platforme de tip e -learning
este incontestabilă, aceasta fiind utilă atât cad rului didactic, cât și studenților. Un prim
pas spre aceasta ȋl reprezintă vechiul site didactic http://rrg.utcluj.ro/~sorin/ , care
permitea doar descărcarea materialelor didactice necesare, neavând ȋnsă celelalte trăsături
ale unei platforme didactice.
Prezentând aceste informații, se conturează contextul proiectului, care va duce la un
alt nivel site -ul didactic al disciplinelor : Sisteme de fabricație integrate și Conducerea
numerică a mașinilor unelte. Datorită complexității proiectului, acesta a fost divizat ȋn
două părti numite: „Proiectarea și implementarea unei platforme e -learning: arhitectura
multi -nivel și funcționalități de bază‖, respectiv „Proiectarea și implementarea unei

Capitolul 1 – INTRODUCERE
2
platforme e -learning: funcțio nalități inovative, design și testare‖, partea din proiect care
va fi prezentată ȋn cele ce urmează fiind „Proiectarea și implementarea unei platforme e –
learning: funcționalități inovative, design și testare‖.

1.2 Tema și con ținutul proiectului
Tema ȋntregu lui proiect este dezvoltarea si implementarea unei platforme de tip
e-learning pentru disciplinele : Sisteme de fabricație integrate, respectiv Conducerea
numerică a mașinilor unelte, asigurând noi caracteristici inovative, menite să sporească
eficiența și calitatea procesului didactic. Aplicația, prin caracteristicile sale, oferă suport
ȋn procesul didactic atât utilizatorilor, care sunt reprezentați de către studenții ȋnscriși la
disciplinele precizate mai sus, cât și administratorului, Sl.Dr.Ing. Sorin Herle,
organizând, ȋntr -un singur loc toate informațiile necesare pentru o parcurgere optimă a
acestor discipline semestriale . Având ȋn vedere faptul că aplicația este folosită atât de
către studenți cât și de către cadrul didactic, aici se regăsește o se parare foarte clara ȋntre
rolul fiecărui utilizator, administratorul având drepturi depline ȋn cadrul aplicației, iar
drepturile utilizatorilor de tip student fiind limitate. De asemenea, pe lânga informațiile
necesare pe care le găzduiește, aplicația prez intă o serie de trăsături inovative, care
facilitează accesul la aceste informații, cum ar fi bara de căutare, menită special pentru a
face ȋntreg procesul de cautare de informații mult mai rapid și mai concis. O altă trăsătură
modernă a aplicației este ca pacitatea de a transmite ȋn direct, prin live streaming,
activități didactice dive rse, prezentări sau conferințe.
Forumul dezvoltat ȋn cadrul aplicației de tip e -learning permite o mai bună
comunicare ȋntre utilizatori și administrator, ȋnsă servește toto dată și procesului de
ȋnvățare și de evaluare a studenților. Aici administratorul va putea propune teme de
discuții, de dezbatere, sau va putea să facă anunțuri de interes general. Totodată,
studenții, dar și profesorul vor putea să plaseze răspunsuri la p ostările cadrului didactic.
Secțiunea de rapoarte este alcătuită din mai multe ramuri, acestea fiind organizate
ȋn funcție de tipul utilizatorului. Ramurile comune atât pentru student cât și pentru cadrul
didactic sunt Rapoartele de laborator, Rapoartele d e curs, Rapoartele pentru a treia
componentă a notei și Rapoartele pentru nota finală, iar Administratorul dispune de ȋncă
două op țiuni, pentru adăugarea utilizatorilor și a disciplinelor . Aici vor putea fi regăsite
informații despre prezența la curs, resp ectiv la laborator, situația notelor primite ȋn cadrul
acelorași sedințe de laborator, sau dacă este cazul, la curs, cât și notele finale ale fiec arui
student î n parte. Studenții vor avea acces doar la rapoartele personale, ȋn timp ce cadrul
didactic va av ea drepturi de editare, adăugare și șterg ere asupra tuturor rapoartelor.
Platforma dispune de o secțiune numită Multimedia , unde se vor putea ȋncărca
atât poze, ȋn cadrul paginii de Galerie Foto, cât și anumite fișiere video prezentând
funcționalitatea ec hipamentelor didactice sau diferite tutoriale din domeniu.
Ca orice site didactic, aplicația va conține o regiune numită ,, Despre” , unde se
vor regăsi informații despre discipline cât și despre laborator . De asemenea, va putea fi
regăsită și o pagină de c ontact, unde se pot găsi datele de contact dorite .
Dat fiind faptul că aplicația este una de tipul e -learning, aceasta va conține o
regiune de unde studentii ȋși pot descărca materialele didactice necesare, structurate ȋn
funcție de disciplină , curs și lab orator, materialele fiind ȋncărcate de către cadrul didactic
cu rol de administrator, aceste materiale regăsindu -se ȋn format .pdf.

Capitolul 1 – INTRODUCERE
3
Datorită faptului că, specializarea din cadrul Facultății de Automatică s i
calculatoare a Universității T ehnice din Cluj -Napoca cărei a i se adreseaza această
aplicație, dispune și de o secție de predare î n limba engleză, platforma didactică va
dispune ș i aceasta de o varia ntă în limba engleză, utilizatorul având posibilitatea de a -și
selecta limba dor ită din orice pagină a site -ul în care s -ar găsi. Odata facuta selectia
limbii, pagina se va reincarca, iar continutul acesteia va fi afisat in limba selectata.
O pagină va fi special dedicată temelor de licență, de dizertație sau de doctorat,
pe care cadrul didactic le va propune pentr u fiecare sesiune, studenții având doar drept de
vizualizare, î n timp ce cadrul didactic le poate edita, adăuga sau șterge.
Pentru a oferi consistență aplicației, aceasta va dispune de un ―Master Page‖, un
șablon conținând header -ul și footer -ul care va fi aplicat tuturor paginilor sale. De
asemenea, aplicația va fi compatibilă cu dispozitivele mobile, adaptându -și aspectul ȋn
funcție de display -ul ecranului device -ului pe care va fi rulată aplicația.
Funcțional itațile cuprinse î n cadrul proiectului „ Proiectarea și implementarea unei
platforme e -learning: funcționalități inovative, design și testare‖ sunt următoarele:
 Forum
 Bară de căutare
 Multimedia
 Live Streaming
 Platforma î n limba roamână / engleză
 Compatibilitate cu dispozitivele mobile
De asemenea , tot î n cadrul acestui proiect va fi realizat designul ȋntregii
platforme, incluzând ―Master Page‖ -ul, cât și testarea ȋntregii aplicații, aceasta utilizând
atât tehnici de testare manuală cât și tehnici de testare automată.
Pentru o mai bună delimitare a caracteristicilor conținute ȋn proiectele
„Proiectarea și implementarea unei platforme e -learning: funcționalități inovativ e, design
și testare‖ respectiv „Proiectarea și implementarea unei platforme e -learning: arhitectura
multi -nivel și funcționalități de bază‖, s -a realizat schema din figura 1.1.

Figura 1.1 Arhitectura aplica ției

Capitolul 1 – INTRODUCERE
4

1.3 Conținutul lucr ării
Lucrarea va con ține șapte capitol e, bibliografie și cuprins, fiecare dintre acesstea
având un rol important ȋn componen ța luc rării. Dup ă capitolul intr oductiv, urmeaz ă
capitolul ȋn care vor fi prezentate obiectivele și specifica țiile proiectului , aici reg ăsindu -se
și cerin țele func ționale și non -funcționale ale acestuia. Capitolul 3 va fi cel despre studiul
bibliografic realizat, unde pe l ângă explicarea conceptulu i de e -learning, v a fi descris ă și
o compara ție a aplica ției realizate cu alte solu ții existente pe pia ță. Ȋn capitolul 4 –
Analiz ă și proiectare , vor fi prezentate tehnologiile folosite ȋn realizarea aplica ției, iar
mai apoi va fi descris modu l ȋn care aplica ția a fost proiectat ă. Capitolul 5 cuprinde
modul ȋn care au fost implementate func ționalit ățile si caractersticile dezvoltate ȋn cadrul
acestei lucr ări și anume : implementarea bazei de date, implementarea Forum -ului,
funcționalitatea de L ive Streaming, implementarea unei metode de c ăutare ȋn aplica ție,
disponibilitatea prezent ării platformei ȋn limba rom ână / englez ă, implementarea unor
galerii multimedia, c ât si realizarea design -ului pentru ȋntreaga aplica ție. Capitolul 6 va
prezenta mod ul ȋn care ȋntreaga aplica ție a fost testat ă, utiliz ându-se at ât procedee de
testare manual ă, pe baz a cazurilor de testare, c ât și metode de testare automat ă, cu
ajutorul tool -ului Selenium IDE. Ultimul capitol cuprinde concluziile care s -au desprins
ȋn urma realiz ării platformei didactice si ȋmbun ătățirile care pot fi aduse la urm ătoarele
versiuni ale acesteia.

Capitolul 2 – OBIECTIVELE LE ȘI SPECIFICAȚIILE PROIECTULUI
5
Capitolul 2 OBIECTIVELE LE ȘI
SPECIFICAȚIILE PROIECTULUI
2.1 Obiective
Acest proiect are ca principal scop ȋnlocuirea vechiului site didac tic
http://rrg.utcluj.ro/~sorin pentru materiile: Sisteme de fabricație integrate, respectiv
Conducerea numerică a mașinilor unelte, adăugând totodata noi caracteristici inovative,
menite să sporeasca eficiența si calitatea procesului didactic, transformând astfel site -ul
didactic ȋntr -o adevărată platformă de tip e -learning.
Principalele obiective ale functionali tăților inovative implementate î n cadrul
lucrării de față sunt următoarele:
 ȋmbunătățirea procesului de evaluare a studenților ;
 o mai bună comunicare î ntre student și cadrul didactic;
 facilitarea găsirii informațiilor căutate ;
 transmiterea ȋn timp real a diferitelor activități din procesul didactic ;
 accesul la materiale didactice de tip multimedia ;
 diversitate lingvistică
 realizarea scalabilității
 interfață ―user -friendly‖
Procesul de evaluare al studenților poate să fie de la cel mai simplu, prin
acordarea unei note la examenul final, până la unul foarte complex, prin evaluare
periodică, pe tot parcurs ul semestrului. Aceste evaluări care se pot face de către cadrul
didactic pot fi de asemenea foarte diverse, o metodă putând fi constituită din lansarea
unor ȋntr ebări sau a unor teme de dezbatere ȋn cad rul forumului, unde studenții, î n funcție
de răspunsu rile pe care le oferă, cât și de promtitidinea de care dau dovadă vor fi punctați
corespunzător. De asemenea, forumul va facilita și comunicarea ȋntre profesor ș i studenți,
aici profesorul având oportunitatea de a publica anunțuri sau știri de interes gene ral sau
particular pentru fiecare materie.
Găsirea informației căutate nu e ste ȋntotdeauna un lucru facil,î in special atunci
când volumul de informație disponibil es te unul ridicat. Tocmai pentru ȋmbunățățirea
acestui aspect, cât și pentru a evita consum ul prea mare de timp ȋn căutarea informației
dorite, aplicația va implementa o bară de căutare, care va căut a în toate punctele cheie ale
platformei, returnând cele mai precise rezultate, ȋn funcție de parametrul introdus pentru
căutare.
Activitațile didac tice din procesul de ȋnvățare pot fi dintre cele mai interactive și
interesante și tocmai de aceea ar trebui să p oată fi accesibile tuturor studenților, chiar
dacă nu toate laboratoarele sunt dotate la același nivel de performanță și tocmai de aceea,
trans miterea ȋn timp real a acestor activități ar elimina aceste bariere de nivel tehnologic,
cât și cele spațiale, studenții putând trăi si experimenta de oriunde aceste activități.
De multe ori, un suport didactic ȋn scris nu este ȋndeajuns pentru o bună ȋnțe legere
a tuturor fenomenelor care se petrec ȋn domeniul respectiv, tocmai de aceea, necesitatea
unor materia le suplimentare, î n diferite format e media este, de cele mai multe ori, mai
mult decât necesară. Ȋn acest sens, unul dintre obiectivele acestei plat form e didactice este
de a oferi aceste materiale, atât ȋn format foto, pentru exemplificarea echipamentului

Capitolul 2 – OBIECTIVELE LE ȘI SPECIFICAȚIILE PROIECTULUI
6
didactic, cât și ȋn format video, prin tutoriale video și filmulețe de prezentare cu scop
didactic.
Dat fiind faptul că aceste discipline dispun de predare î n limba engleză, dar și
bine-cunoscut fiind faptul că ȋn acest domeniu, cunoașterea unei limbi de circulație
internațională este mai mult decâ t necesară, platforma va trebui să poată oferi
utilizatorilor această posibilit ate de a -și alege limba do rită î n care să fie prezentată
ȋntreaga aplicație.
Trăind ȋntr -un timp ȋn care tehnologia este î n contiuă dezvoltare, telefoanele
mobile inteligente, tabletele ș i padfon e-urile sunt tot mai utilizate în viața cotidiană a
oamenilor, depășindu -și de mult sco pul lor de bază, acela de comunicare vocală și
trecând la un nivel mult superior, ȋn care ajung și uneori chiar depășesc, ca performanțe
unele calculatoare personale. Luând ȋn considerare acest aspect, aplicația se dorește a fi
una ―responsive‖, adaptându -și dimensiunile la orice tip de display, de la monitoarele
calculatoarelor personale la ecranul tabletelor și al telefoanelor.
Pentru ca un utilizator să poată folosi cu ușurință orice fel de site, acesta trebuie să
fie ușor de utilizat, să fie intuitiv, a stfel ȋncât să ofere persoanei care ȋl utilizează o
experiență cât mai plăcută, iar aceasta să iși poată ȋndeplini obiectivul pentru care a intrat
pe pagina web respectivă. De aceea, această platformă dorește să ofere atât studentilor,
cât și cadrului dida ctic o experiență cât mai plăcută ȋn procesul didactic, oferi nd un
design modern, interactiv care să asigure o cât mai eficientă activitate didactică.

2.2 Specificațiile proiectului
Pentru o mai bună explicare a specificațiilor proiectului prezentat ȋn această
lucrare, se vor defini cerințele funcționale cât și cele non -funcționale, urmând ca acestea
sa fie expl icate fiecare î n parte:

2.2.1 C erințe funcț ionale
Cerințele funcționale sunt următoarele:
 returnarea rezultatelor ȋn urma căutarii ȋn cadrul pla tformei
 afișarea postărilor ȋn cadrul forumului
 permiterea răspunsurilor pentru fiecare postare ȋn parte
 asigurarea transmiterii live a evenimentelor didactice dorite
 posibilitatea expunerii materialelor multimedia
 compatibilitate pentru device -urile mobil e
 posibilitatea de alegere a limbii de afișare a informațiilor, ȋntre limba
romană și limba engleză
Returnarea rezultatelor ȋn urma căutării după un anumit p arametru trebuie sa fie
făcută într -o pagină separată, de rezultate, ȋn care fiecare potrivire cu parametrul introdus
ȋn bara de căutare să fie ȋnsoțit de un link către pagina care conține respectiva potrivire.
Forumul trebuie să permită administratorului să adauge noi postări, la care, atât
utilizatorii, cât si administratorul sa poată răspunde, răspu nsurile putând fi vizualizate
pentru fiecare postare ȋn parte. De asemenea, administratorul poate să editeze o postare și
are și dreptul de a șterge răspunsuri.

Capitolul 2 – OBIECTIVELE LE ȘI SPECIFICAȚIILE PROIECTULUI
7
Live Streamingul trebuie să fie accesibil atât studenților cât și desigur,
administratorului, t ransmisia fiind on -line doar la evenimentele didactice care se doresc a
fi difuzate.
Materialele multimedia trebuie expuse ȋn funcție de formatul acestora. Astfel
trebuie să existe două pagini separate, una pentru prezentarea imaginilor, realizându -se
astfel o galerie foto, iar cea de -a doua pentru crearea unui album video. De asemenea
fiecare pagină va dispune de posibilitatea de Upload fișiere.
Aplicația trebuie sa fie „responsive‖, adică să ȋși adapteze aspectul ȋn funcție de
ecranul device -ului pe care va fi deschisă aplicația, fie că este vorba de ecranul unui
calculator personal, al unui laptop al unei tablete, al unui padfone sau al unui telefon
mobil inteligent. Toate caracteristicile funcționale trebuie păstrate, indiferent de display –
ul la care va trebui aplicația să se adapteze, păstrând totodată senzația regăsirii pe o
platformă didactică stabilă și modernă.
Platforma trebuie să fie disponibilă, ȋn ȋntregime.ȋn două limbi, limba romană si
limba engleză, utilizatorul având posibilitatea să ȋși sel ecteze limba dorită. Această
alegere trebuie să fie posibilă din orice pagină s -ar găsi utilizatorul, iar optarea pentru
schimbarea limbii de prezentare va afisa platforma ȋn limba dorită. Această alegere
lingvistică va sta la dispoziția utilizatorilor, câ t și a administratorului.

2.2.2 Cerinț e non-funcți onale
Cerințele non -funcționale sunt următoarele:
 Utilizabilitatea ;
 Performanța ;
 Extensibilitatea ;
 Interfață prietenoasă ;
 Scalabilitatea ;
 Disponibilitatea ;
Aplicația trebuie să pună la dispoziție o interfață grafică care să permită accesul la
toate funcționalitățile aplicației.
Performanța ar trebui să poată fi măsurată î n următoarele:
 Timpul de căutare ș i afișare a rezultatelor obținute ȋn urma căutarii ;
 Timpul de ȋncă rcare al fișierelor video ;
 Timpul de ȋncă rcare al fișierelor foto ;
 Viteza la upload -ul fișierelor video ;
 Viteza la upload -ul fișierelor foto ;
 Timpul de ȋncărcare al fiecărei pagini ȋn parte ;
Extensibilitatea se referă la faptul că aplicația trebuie să permită aducerea de
modificăr i ulterioare, fără a schimba logica acesteia. De aceea, este nevoie de
implementarea de interfețe și clase abstracte, care permit adăugarea de funcționalități
noi, fără afectarea funcționalităților deja existente.
Interfața grafică trebuie s ă fie una int uitivă, astfel ȋncâ t utilizatorul să poată
naviga cu ușurință p rintre paginile aplicației, fără a fi necesară cunoașterea structurii
aplicației. De asemenea această interfață prietenoasă trebuie să ofere utilizatorului o
experiență plă cută odată cu accesar ea platformei.
Fiind o proprietate care reprezintă capacitatea aplicației de a suporta un volum
mare de încă rcare, scalabilitatea trebuie să fie prezentă ȋn ceea ce privește volumul de

Capitolul 2 – OBIECTIVELE LE ȘI SPECIFICAȚIILE PROIECTULUI
8
materiale multimedia ȋncărcat pe platformă. Prin urmare, aplicația treb uie să se comporte
similar, fără defecțiuni atunci când volumul de date pe care îl prelucrează devine mai
mare. Aplicația trebuie să suporte un volum destul de mare de fișiere multimedia, a cest
lucru depinzând, desigur, ș i de suportul hardware de care acea sta va dispune.
Disponibilitatea se referă atât la faptul că aplicația trebuie să fie disponibilă
99.9% din timp, precum și la faptul că ori de câte ori se dorește transmisia live a unui
eveniment didac tic, partea de Live Streaming să fie disponibilă.

Capitolul 3 – STUDIU BIBLIOGRAFIC
9
Capitolul 3 STUDIU BIBLIOGRAFIC
3.1 Conceptul de e -learning
Fiind o ramură a procesului educațional, de ȋnvațare și instruire ȋn orice domeniu,
conceptul de e -learning se referă [8], la utilizarea noilor tehnologii multimedia și a
Internetului pentru a îmbun ătăți calitatea învățării, facilitând accesul la resurse și tehnici
precum și schimburile de informații.
Predarea în spațiul virtual de învățare a adus o schimbare la nivel de paradigmă,
astfel, dacă în modelul tradițional procesul de predare este centrat pe profesor, care
încearcă să transfere cunoașterea studenților săi, în mediul Elearning predarea este
centrată pe relația dintre profesor/student și student/cunoaștere.
Actorii care participă î n acest concept al e -learning-ului sunt următorii [8]:
 Cadrul didactic – este cel care gestionează cursul, conduce studenții în
procesul învățării, îi motivează, interacționează cu aceștia și le evaluează
activitatea. El reprezintă persoana capabilă să conducă întregul proces de
desfășurare al învățării ;
 Studenții – sunt cei în jurul cărora se realizează învățarea. Reprezintă parte
a pro cesului cărora le este destinată ȋnvățarea ;
 Designer -ul (Proiectantul) – este persoana specializată în proiectarea
conținutului învățării în mediul online. Acesta este echipat cu inf ormație,
competențe și atitudini necesare proiectării conținutului ;
 Grupul tehnic este cel ce asigură partea tehnică a întregului sistem de
învățare fără de care aceasta nu poate avea loc în mediul E -learning.
Grupul tehnic este spec ializat în problemele software ș i hardware ;
 Conducerea instituției ce este angajată în înțelegerea întregului proces de
învățare E -learning dar și în sprijinirea acestuia prin elemente precum
asigurarea infrastructurii tehnice, dezvoltarea de politici și proceduri utile
facili tării învățării în E -learning ;
In figura 3.1 sunt reprezentate rol urile prezentate anterior, cât ș i paradigm a de
ȋnvățare centrată pe student:

Figura 3.1 Actorii prezenti in procesul de e -learning

Capitolul 3 – STUDIU BIBLIOGRAFIC
10
Principalul scop al acestui concept este [4] acela de a elimina orice barieră de
nivel temporal sau spațial care ar putea sta ȋn calea ȋnvățării, contribuind astfel la
ȋmbunătățirea calității ȋ nvățământului de orice nivel, în orice domeniu. Reușind să ȋși
atingă scopul de baza, aceste platforme elimină unul dintre cele mai mari neajunsuri care
pot contribui la scaderea performanței procesului didactic și anume lipsa accesului la
informație, sau dificultatea găsirii informației dorite. Fiind cuprins și ȋn numele lor,
aceste platforme au calitatea de a fi dispo nibile ȋn orice moment, ȋn orice spațiu, atâta
timp cât utilizatorul are acces la internet, ―e‖ -ul cuprins ȋn nume provenind de la
―electronic‖. Această dependență de un calculator personal sau de un laptop la care se
adaugă o conexiune stabilă la internet nu mai reprezintă ȋn ziua de astăzi un impediment,
deoarece datori tă progresului enorm care s -a făcut ȋn domeniul electronicii ȋn ultimii ani,
costurile pentru aceste echipamente s -au redus considerabil.

3.2 Comparație cu alte soluț ii existente
Pentru ȋnceput, va fi comparată platforma didactică realizată ȋn cadrul acestui
proiect cu vechea soluție existentă și anume site -ul didactic http://rrg.utcluj.ro/~sorin ,
care servea până acum necesitaților studenților. A ceasta variantă a site -ul didactic se
limita la a conține cateva link -uri utile pentru studenți, unde aceștia puteau regăsi
materialele didactice necesare, ȋn format .pdf, cât și unele prezentări de interes general.
Spre deosebire de acesta, noua platformă didactică va conține pe langă aceste materiale
didactice pe care le va pune la dispoziție studențil or ȋn funcție de fiecare disciplină , ȋn
secțiunea de Materiale și de material multimedia, menite să explice mai clar unele
procese, cât și să prezinte echip amentele de laborator. Pe langă acestea, platforma
dispune și de alte funcționalități menite să simplifice procesul didactic. Printre acestea se
enumeră forum -ul, unde cadrul didactic are oportunitatea, atât de a comunica studenților
unele informații utile , cât și de a evalua studenții în funcție de ră spunsurile date de aceștia
la ȋntrebarile primite prin intermediul forum -ului. O altă funcționalitate a platformei este
reprezentată de secțiunea de Rapoarte , unde se pot regăsi rapoarte despre activitatea de la
laborator, despre activitatea de la curs, rapoarte despre a treia componentă a notei, care
poate fi definită de cadrul didactic, rapoarte despre nota finală, cât și despre utilizatori și
discipline. O caracteristică inovatoare a platformei o reprezintă secțiunea de Live
Streaming , cu ajutorul căreia se pot transmite ȋn timp real activitați didactice. Aplicația va
dispune de o regiune dedicată special temelor de licența, unde studenții pot regăsi ȋn
fiecare an temele de licența propuse de cadrul didactic cu rol de ad mistrator al platformei.
Bara de căutare reprezintă de asemenea o trăsătură importantă a aplicației, aceasta
permițând căutarea de informații ȋn cadrul platformei, facilitând astfel accesul la
informația căutată. Pe langă acestea, Platforma dis pune de o Pagină de start , care
prezintă utilizatorilor pe scurt aplicația, fiind de asemeanea și singurul loc, care oferă
access spre paginile de Contact , unde se vor regăsi datele de contact necesare studenților,
pagina Despre , unde se vor găsi informați i interesante cu privire la laborator, cât și
pagina de Multimedia. De asemenea, drepturile ȋn cadrul platformei vor fi restricționate,
ȋn funcție de tipul utilizatorilor, implementate cu ajutorul paginii le Log in , iar aplicația
va fi disponibilă ȋn doua limbi: română si engleză. Platforma va mai avea și capacitatea
de a-și adapta display -ul ȋn funcție de ecranul device -ul de pe care este utilizată, astfel
ȋncat va putea fi folosită cu usurința ș i de pe dispozitivele mobile.

Capitolul 3 – STUDIU BIBLIOGRAFIC
11
Pentru a se evidenția diferența majoră ȋntre vechiul site didactic și noua platformă
de e-learning, atât la nivel de functionalități, cât și la nivel de design, ȋn figura 3.2 vor fi
prezentate paginile de start ale acestor doua soluții:

Figura 3.2 Comparație ȋntre vechiul site didacti c și platfor ma de e -learning
Exemple de alte platforme de e -learning disponibile ȋn momentul actual, care sunt
utilizate de către alte instituții de ȋnvățământ din țară sunt reprezentate de către platforma
Casei Corpului Didactic din județul Vaslui și plat forma Universității Ecologice din
București, acestea având fiecare particularitațile lor.
Platforma Casei Corpului Didactic din județul Vaslui poate fi accesata prin link -ul
urmator: http://e -learning. ccdvaslui.ro/platforma/ și, asemenea platformei materiilor
CNMU și SFI, prezintă posibilitatea de logare pentru a avea acces la materialele didactice
încărcate în platformă, diferența fiind că aici, orice utilizator ȋși poate crea un cont nou
pentru a ave a acces la informații, ȋn timp ce pentru platforma didactică prezentată ȋn acest
proiect, doar administratorul poate crea conturi pentru studenți. Limba de prezentare
poate fi aleasă și aici, ȋntre limba română și limba engleză. De asemenea, ambele aplicaț ii
dispun de căutare ȋn cadrul lor ȋn funcție de un parametru dat. Platforma Casei Corpului
Didactic din județul Vaslui dispune ȋn plus față de platforma descrisă ȋn lucrarea aceasta
de un control de tip calendar, care afișează data curentă ȋnsă nu va disp une de
urmă toarele funcționalități: forum, pagină de live -streaming, pagină de material e
multimedia, design -ul adaptiv și secțiunea de rapoarte.
Ultima comparație a platformei de e -learning realizată pentru materiile CNMU și
SFI pe care această lucrare ȋși propune să o facă este aceea cu platforma de e -learning a
Universitații Ecologice din București, care poate fi accesată prin link -ul:

Capitolul 3 – STUDIU BIBLIOGRAFIC
12
http://www.elearning.ueb.ro/ . Această platformă permite accesul la materialel e didactice
necesare, permite căutarea ȋn cadrul ei, dispune de un forum, cât și de prezentarea ei ȋn
doua limbi: limba română și limba engleză, acestea fiind caracteristicile comune pe care
le au aceste două platforme.Un plus al platformei Universitații E cologice ȋl reprezintă,
similar cu platforma Casei Corpului Didactic din județul Vaslui, un control de tip
calendar, care prezintă data curentă. Avantajele platformei realizate ȋn cadrul acestui
proiect față de platforma Universitații Ecologice din Bucure ști, se pot referi la, pagina de
live-streaming, pagina de material e multimedia, design -ul adaptiv și secțiunea de
rapoarte.
În tabelul 3.1 este prezentată o expunere succintă a comparației realizate mai sus,
între cele patru aplicații. Pe linii sunt enume rate anumite funcționalități ale platformelor,
iar pe coloane vor fi marcate cu simbolul  funcționalitățile prezente, iar cu simbolul 
funcționalitățile care lipsesc.
Tabel 3.1 Comparație ȋ ntre platformele de e -learning
Aplicația

Funcționa –
litatea Platform a de
tip e-learning a
disciplinelor
CNMU și SFI Vechiul site
didactic al
materiilor
CNMU ș i SFI Platforma de
tip e-learning a
Casei Corpului
Didactic din
județul Vaslui Platforma de tip
e-learning a
Universității
Ecologice din
Bucureș ti
Accesul la
materiale
didactice    
Posibilitatea de
logare    
Rapoarte
privind situația
la curs/laborator    
Alegerea limbii
de afișare a
informațiilor    
Căutarea în
interiorul
platformei    
Live
Streaming    
Forum    

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
13
Capit olul 4 ANA LIZĂ Ș I PROIECTARE
4.1 Tehnologii folosite
Pentru realizarea platformei de e -learning, au fost alese spre folosire mai multe
tehnologii, deoarece aplicația este una complexă și s -a dor it să se obțină o performanță
cât mai mare a acesteia. Ȋn continu are se vor lista tehnologiile folosite, urmând ca după
aceea să fie prezentate principalele caracteristici ale lor, ȋmpreună cu avantaje și
dezavantaje. Tehnologiile care au fost utilizate sunt urmă toarele : ASP.NET, limbajul de
programare C#, mediul de pr ogramare Visual Studio, SQL Server 2012 Management
Studio, limbajul Javascript, limbajul CSS, framework -ul Bootstrap și Paint.Net, iar pentru
testarea automată s -a folosit Selenium IDE . S -au ales aceste tehnologii, datorită ȋmbinării
perfecte ȋntre aceste a, mediul de programare Visual Studio oferind posibilitatea
programării ȋn limbajul C#, limbaj care este utilizat ȋn cadrul framework -ului ASP.NET.
Totodata se oferă și posibilitatea de creare a fișierelor Javascript și CSS în interiorul
proiect elor.

4.1.1 Limbajul de programare C#
Limbajul de programare ȋn care a fost scrisă aplicaț ia este limbajul C#, este [10]
un limbaj de programare mod ern, orientat pe obiect, creat ș i dezvoltat de către Mi crosoft,
ȋmpreună cu platforma .NET. Foarte multe aplicații sun t dezvoltate ȋn C# și .NET, de la
aplicații desktop,la site -uri Web, aplicații mobile, jocuri și multe altele.
C# este un limbaj de nivel ȋnalt, care se aseamănă cu C++ și Java, față de care are
ȋnsă unele avantaje, motiv pentru care a fost ales să fie folosit pentru aplicația noastră .
Față de C++, avantajele pe care C# le prezintă se pot referi la clasele și metodele ce pot fi
setate să fie interne ȋn ansamblul ȋn care sunt declarate, la sistemul garbage -collection
care este nativ, la clasele și metodele c e pot fi setate să fie interne ȋn ansamblul ȋn care
sunt declarate, cât și la biblioteca standard care este foarte bogată cu lucruri bine
implementate și uș or de folosit. De asemenea, C# permite tratarea semnăturilor de cl asă-
metode ca funcții libere cr eându-se astfel relații mai dinamice și flexibile ȋntre clase. Față
de Limbajul Java, C# dispune de Lambda și LINQ, care suportă o parte de programare
funcțională, are variabile dinamice și permite de asemeanea difinirea de noi tipuri.
o alternativă și anume un limbaj destinat special pentru .NET,care este definit de
aceștia ca fiind simplu, modern, orientat pe obiect, derivate din C si C++. Din punct de
vedere sintactic, C# este foarte asemanator cu C++ și Java, având ȋn vedere faptul că
multe cuvinte cheie s unt identice. De asemenea o altă trăsătură comună a acestor limbaje
de programare o reprezintă structura blocurilor cu acolade ({}) pentru marcarea
blocurilor de cod și simbolul ―;‖ pentru a separa declarațiile. Dincolo de aceste
asemănări, limbajul C# est e mai uș or decât C++ și comparabil ca dificultate cu Java,
design -ul său fiind mai ȋn ton cu uneltele de dezvoltare modern decât celelalte limbaje,
fiind gândit să furnizeze simultan, usurința Visual Basic -ului și performanța ȋnaltă, a
limbajului C++, aces ta fiind unul dintre motivele pentu care am ales acest limbaj pentru
dezvoltarea acestei platforme.
Alte caracteristi ci ale acestui limbaj, care ne -au convins ȋn alegerea limba jului de
programare au fost urmă toarele:

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
14
 Suport complet pentru clase și programa re orientată pe obiect, incluzând
interfețe si implementarea moștenirilor, funcții virtuale și overloading de
operatori.
 O mulțime de tipuri de bază consistentă și bine definite
 Suport inclus pentru generarea automatică a documentației XML
 Ștergerea automa tă a memoriei alocată dinamic
 C# poate fi folosit pentru a scrie pagini web ASP.NET dinamice si servicii
web bazate pe XML
 Acces complet la libraria claselor de bază .NET și acces ușor la Windows
API
 Facilitatea de a marca clase și metode cu atribute defin ite de utilizatori.
Acestea pot fi folositoare pentru realizarea documentației și pot avea
efecte asupra compilării
Ȋn ziua de azi, C# este unul dintre cele mai folosite limbaje de programare, fiind
folosit de milioane de programatori din ȋntreaga lume.

4.1.2 .NET Framework
Limbajul C# nu este distribuit ca un produs de sine -stătător – face parte din
platforma Framework -ului .NET. Framework -ul constă în general dintr -un mediu de
dezvoltare si execuție a programelor, scrise în C# sau alte limbaje compatibile cu .NET
(cum ar fi VB.NET, C++, J# sau F#).
Componentele .NET Framework -ului sunt urm ătoarele:
 Common Intermediate Language
 Common Language Specification
 Common Language Runtime
 Common Type System
 Metadate
 Assemblies
 Assembly cache
 Garbage collection
Arhitectura platformei Microsoft .NET este prezentat ă in figura 4.1. O rice
program care este scris ȋntr-unul dintre limbajele .NET [7] va fi compilat ȋn Common
Intermediate Language, ȋn concordanță cu Common Language Specification (CLS).
Acestea beneficiază de s uportul unei colecții bogate de biblioteci de clase, care facilite ază
dezvoltarea de Web Forms, servicii Web și Windows Forms. Aplicațiile reușesc să
comunice cu serviciile pe baza unor clase de manipulare XML și a datelor, lucru care
ajută la dezvoltarea aplicațiilor cu arhitectura n-tier. Rolul Base Class Library -ului este
de a asigura funcționalitate de nivel scăzut, precum operații de I/O, fire de execuție,
lucrul cu șiruri de caractere, etc.. Reuniunea acestor clase este reprezentată de .NET
Framework Class Library, care permite dezvoltarea rapidă a aplicațiilor. Cea mai
importantă componenta a lui .NET Framework – Common Language Runtime, r ӑspunde
de execuția fiec ӑrui program. Evident, nivelul inferior este rezervat sistemului de operare,
care nu este neapӑrat Microsoft Windows, ci poate fi si Unix.

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
15

Figura 4.1: Arhitectura .NET Framework
Avantajele .NET, dupa cum sunt prezentate si in , sunt urmatoarele [2]:
 Programare Orientată pe Obiect —Atât Framework -ul .NET cât si C# sunt
în totalitate bazate pe principiile programării orientate pe obiect.
 Design potrivit – Librăria claselor de bază a fost proiectată într -un mod
foarte intuitiv înca din temelii
 Independența limbajelor — În .NET — Visual Basic, C# și C++ — sunt
complitale într -un limbaj intermediar comun . Astfel, aceste limbaje sunt
interoperabile într -un mod ne mai întâlnit până acum .
 Suport mai bun pentru pagini web dinamice — Deși clasicul ASP oferea
multă flexibilitate, era totodată și inefficient, deoarece folosea limbaje de
scripting interpre tate iar din lipsa design -ului bazat pe principii orientate
pe obiect, deseori se ajungea la cod dezordonat. .NET oferă un support
integrat pentru pagini web, folosind ASP.NET. Cu ASP.NET, codul din
paginile web este compilat si poate fi scris într -un limb aj proiectat special
pentru .NET, precum C# sau Visual Basic 2013. Mai mult, .NET acum
oferă suport special pentru cele mai recente tehnologii web, precum Ajax
si jQuery.
 Accesul efficient al datelor — Un set de componente .NET, cunoscut ca si
ADO.NET, pun la dispoziție acces efficient la baze de date relaționale și o
varietate de surse de date. Există chiar și componente care oferă acces la
fișierele sistemului si directoare. În particular, suportul pentru XML este
inlcus în .NET pentru a da posibilitatea de a manipula date, care ar putea fi
importate sau exportate pe alte platforme diferite de Windows.
 Accesul la cod comun — .NET a schimbat complet modul în care codul
este împărțit între aplicații, introducând conceptual de assembly, care este
menit să înlo cuiască tradiționalul DLL. Assemby -urile au facilități formale
pentru versioning si diferite versiuni de assembly -uri pot exista unul
alături de celălalt.

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
16
 Suport pentru servicii web — .NET a integrat complet suportul pentru
dezvoltarea serviciilor web, facâ nd dezvoltarea acestora la fel de ușoară ca
și dezvoltarea oricărei alte aplicații.
 C# — C# este un limbaj orientat pe obiect puternic si popular destinat
pentru a fi folosit cu Framework -ul .NET.

4.1.3 Javascript
Aplicația este ȋn cea mai mare parte real izatӑ ȋn Cliest Side , iar pentru aceasta am
utilizat JavaScript, care este [3] limbajul de programare al paginilor Web . Marea
majoritate a browserelor web moderne folosesc JavaScript și toate browserele web
moderne – atat pe desktop, console de jocuri, cât și pe tablete sau smart phone -uri –
includ interpretoare de JavaScript, făcând JavaScript cel mai omniprezent limbaj de
programare din istorie. JavaScript face parte din cele 3 tehnologii de bază pe care orice
programator web trebuie să învețe: HTML pentr u a specifica conținutul paginilor web,
CSS pentru a specifica design -ul paginilor web si JavaScript pentru a specifica
comportamentul paginilor web.
JavaScript folosește sintaxa limbajului Java , funcțiile first -class de la Scheme și
mostenirea bazată pe prototipi de la Self. Numele de ―JavaScript‖ este oarecum înșelător,
fiindcă exceptând similaritatea sintactică, este complet diferit față de Java și nu trebuie să
cunoști niciunul din limbajele menționate mai sus pentru a putea învăța JavaScript.
Totodată , JavaScript și -a depășit demult scopul de limbaj de scripting, în momentul de
față fiind văzut ca un limbaj cu scop general robust și eficient.
Avantajele limbajului JavaScript sunt [14]:
 Este foarte ușor de implementat. Tot ce trebuie făcut este să scri i codul in documentul
HTML și să fie specificat browser -ului că acel cod este cod JavaScript.
 JavaScript funcționează local pe calculatorul utilizatorului – chiar și atunci când
acesta nu este offline (nu este conectat la Internet)
 JavaScript oferă posibil itatea de a creea interfețe care îmbunătățesc experiența
utilizatorului și oferă funcționalitate dinamică, fără a exista nevoie de a aștepta după
server să reacționeze sau să afișeze o altă pagină web
 JavaScript poate încărca conținutul unui document doar atunci când utilizatorul are
nevoie de acel conținut, fără a reîncărca toată pagina – această funcționalitate este
cunoscută sub numele de Ajax.
 JavaScript poate testa ce este posibil de executat într -un browser și să reacționeze
corespunzător – acestea su nt numite ―Principiile JavaScript -ului discret‖ sau
―defensive Scripting‖
 JavaScript poate uneori să repare problem apărute la nivel de browser sau să repare
CSS-ul unei pagini într -un anumit browser
 JavaScript poate fi folosit pentru a anima anumite eleme nte pe o pagină web – de
exemplu pentru a afișa sau a ascunde informații sau pentru a evidenția anumite
secțiuni dintr -o pagină – acestea contribuind la realizarea unei pagini mult mai ușor
de folosit și la îmbogățirea experienței utilizatorului

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
17
4.1.4 Visual Studio
Mediul de programare utilizat este Microsoft Visual Studio 2012, acesta fiind [13]
un IDE (Integrated Development Environment) oferit de către Microsoft pentru a oferi un
set complet de instrumente de dezvoltare software pentru aplicații ASP.N ET, servicii
web, aplicații desktop și aplicații mobile. Limbajele Visual Basic, Visual C# si Visual
C++ pot fi folosite în Visual Studio IDE, ceea ce ușurează realizarea de aplicații scrise în
mai multe limbaje. Mai mult, aceste limbaje folosesc funcționa litățile Framework -ului
.NET, care oferă acces la tehnologii – cheie, care simplifică dezvoltarea de aplicații web
ASP si servicii web.
Cele mai importante beneficii oferite de Visual Studio sunt urmă toarele [9]:
 Design -ul paginii Web : Mediul Visual Stud io ofer ӑ utilizatorului
posibilitatea de a crea pagini atractive ȋntr -un mod simplu, folosind
funcționalitatea ―drag -and-drop‖ ;
 Detectarea automat ӑ a erorilor : Folosind Visual Studio, utilizato rul ȋși
poate salva ore de muncă , deoarece acest mediu de pro gramare detecteaz ӑ
și raporteaz ӑ erorile ȋnainte ca aplicația s ӑ ruleze ;
 Instrumente de depanare : Visual Studio ȋși menține instrumentele
specifice de depanare, care permit programatorului s ӑ vizualizeze acțiunea
codului si valorile variabilelor. Aplicaț iile Web pot fi testate la fel de ușor
ca orice aplic ație, deoarece Visual Studio deț ine un server Web integrat
care este folosit doar pentru depanare ;
 Mecanismul IntelliSense : Visual Studio ofera acest mecanism foarte util
care furnizeaz ӑ sugestii de c ompletare a cuvintelor -cheie pentru obiectele
recunoscute și o lista de informații pentru un anumit obiect creat, cum ar fi
funcțiile si atributele acestuia ;

4.1.5 SQL Server
SQL provine de la Structured Query Language si este utilizat pentru comunicarea
cu baza de date, fiind limbajul standard pentru bazele de date relaționale. Declarațiile
SQL sunt utilizate pentru a efectua sarcini cum ar fi actualizarea datelor ȋntr -o baz ӑ de
date, crearea, citirea sau ștergerea lor. Declaratiile in SQL se ȋmpart in două categorii [6]:
 Limbajul de manipulare al datelor (Data Manipulation Language – DML),
care permite interacțiunea cu datele din baza de date, acestea fiind
prezentate in tabelul de mai jos:

Tabelul 4.1 Limbajul de manipulate al datelor
Declaratie Desc riere
SELECT Preia datele din unul sau mai multe tabele
INSERT Adaug ӑ una sau mai multe ȋnregistrari ȋntr -un tabel
UPDATE Modific ӑ una sau mai multe ȋnregistrari ȋntr -un tabel
DELETE Șterge una sau mai multe ȋnregistrari ȋntr -un tabel

 Limbajul de def inire al datelor (Data Definition Language – DDL), care
permite lucrul cu obiecte ȋn baza de date, acestea reg ӑsindu -se ȋn tabelul
urmӑtor:

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
18

Tabelul 4.2 Limbajul de definire al datelor
Declaratie Descriere
CREATE DATATABLE Creeaz ӑ o noua baz ӑ de date
CRE ATE TABLE Creeaz ӑ un tabel ȋn baza de date
CREATE INDEX Creeaz ӑ un index pentru un tabel
ALTER TABLE Schimb ӑ structura unui tabel existent
ALTER INDEX Schimb ӑ structura unui index existent
DROP DATATABLE Șterge baza de date existenta
DROP TABLE Șterge un tab el existent
DROP INDEX Șterge un index existent

Microsoft SQL Server este un sistem de management al bazelor de date
relaționale dezvoltat de Microsoft. Ca un server de baze de date, aceasta este un produs
software al cărui funcție principală este de a stoca și de a prelua datele solicitate de către
alte aplicații software, fie cele de pe același computer sau pe cele care rulează pe un alt
calculator într -o rețea.
Avantajele aduse de utilizarea SQL Server sunt urmă toarele [11]:
 Timp de dezvolt are mai rapid , datorit ӑ procedurilor stocate, care
reprezint ӑ linii de cod pre -compilate, stocate pe server, care sunt folosite
când apar necesit ӑți similare.
 Scalabilitate : posibilitatea de a evolua ȋn momentul ȋn care evolueaz ӑ
nevoile instituției sau co mpaniei care a implementat aplicația dezvoltat ӑ
folosind Microsoft SQL Server. Astfel, ȋn cazul ȋn care activitatea se
dezvolt ӑ și determin ӑ un volum mare de date, SQL Server poate gestiona
cu ușurinț ӑ numӑrul crescut de cereri ȋn baza de date, putând fi f olosit și ȋn
cazul a milioane de ȋnregistr ӑri sau tranzacții.
 Protejarea informației clientul ui, adic ӑ securitate sporit ӑ. Drepturile de
utilizare ȋn Microsoft SQL Server sunt gestionate printr -o secțiune
special ӑ, unde sunt specificate tabelele și procedu rile stocate pe care un
utilizator le poate accesa. De asemenea, p ӑstrarea logurior acțiunilor din
aplicație ofer ӑ administratorului posibilitatea identific ӑrii rapide a breselor
de securitate și a elimin ӑrii/limit ӑrii scurgerilor de informație.
 Eliminarea pierderii accidentale de date . Ȋnregistrarea logg -urilor ȋn SQL
Server ȋnseamn ӑ ȋnregistrarea tuturor c ӑutӑrilor, ștergerilor și actualiz ӑrilor
de date. Ȋn cazul unor acțiuni accidentale, se inițiaz ӑ proceduri de roll –
back pentru a reveni la datele iniția le.
 Ușurința recuper ӑrii informațiilor datorate arhiv ӑrii automate. Opțiunea de
„back -up‖ automat din SQL Server permite stocarea bazei de date și a
logg-urilor de acțiuni pe un alt dispozitiv (hardware sau media).
Administratorul are astfel posibilitatea sӑ repun ӑ o baz ӑ de date atunci
când datele sunt pierdute sau corupte sau când pe server unul dintre
hardware -uri a avut probleme.

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
19
4.1.6 CSS
Pentru a realiza design -ul paginilor, ale tabelelor, al fragmentelor de text și pentru
toate celelalte elemente re gӑsite ȋn interfața grafică a aplicației, am folosit fișiere de tip
CSS ( Cascading Style Sheets) , care descriu modul ȋn care interfața grafic ӑ va fi redat ӑ.
Aceste fisiere reprezinta [15] o modalitate ușoar ӑ de a adauga un anumit stil
documentelor Web, ȋn ceea ce privește de exemplu spați erea, fontul sau culoarea.
Atasând fiș iere de stil paginilor Web, autorii pot sa influenț eze prezentarea paginilor f ӑrӑ
a adӑuga noi etichete HTML.
CSS-urile funcționeaz ӑ [5] pe baza unor reguli de asociere cu elementele
HTML,care decid cum va fi afi ṣat con ṭinutul unui element specificat. O astfel de regulă
este alcătuită din 2 părti : selector ṣi declarative, prezentate în figura 4.2

Figura 4.2 Regulă de ascociere a elementelor HTML cu regulile de stil
Selectorul indică elementul căruia îi va fi aplicată regula, aceasta putând fi
aplicată mai multor elemente, atâta timp cât acestea sunt trecute în selector, despăr ṭite
fiind de caracterul ―,‖. Selectorii sunt case sensitive, ceea ce înseamnă că ace ṣtia trebuie
să se potri vească exact cu numele elementelor. În tabelul 4.1 de mai jos, sunt prezentate
cele mai comune tipuri de selectori utiliza ṭi in cadrul fi ṣierelor CSS:
Tabelul 4.3 Tipuri de selectori
Selector Semnificatie Exemplu
Selectorul universal Se aplică tuturor ele mentelor din
pagină *{ }
Vizează toate elementele din
pagină
Selectorul de tip Se referă la numele elementelor h1, h2, h3{ }
Vizează elementele <h1>,
<h2> si <h3>

Selectorul de clasă Se referă la elementele care au
valoarea atributului d e clasă egală
cu valoare de după simbolul ‖.‖ .exempluClasa{ }
Vizează elementele care au
valoarea atributului de clasa
egală cu ―exempluClasa‖
Selectorul de ID Se referă la elementele care au
valoarea atributului de ID egală
cu valoare de după simbolul ‖#‖ #exempluID{ }
Vizează elementele care au
valoarea atributului de ID

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
20
egală cu ―exempluID‖
Selectorul de copil Se referă la elemental care este
copilul direct al altui element li>a{ }
Vizează toate elementele de
tipul <a> care sunt copii ai
elementului <li>, dar nu toat e
elementele <a> din pagină
Selectorul de descendent Se referă la un element care este
descendentul altui element, chiar
dacă acesta nu este copilul sau
direct p a{ }
Vizează orice element <a> din
cadrul elementului <p>, chiar
dacă mai există ṣi alte
elem ente între acestea
Selectorul de tip frate
adiacent Se referă la elemental care este
fratele cel mai apropiat al unui alt
element h1+p{ }
Vizează elementul <p> de
după elementul <h1>, dar nu ṣi
alte elemente <p>
Selectorul frate general Se referă la elem entele care sunt
fraṭi ai altui element, chiar dacă
aceṣtia nu se preced direct h1~p{ }
Vizează toate elementele <p>
de după elementul <h1>

Declara ṭia se scrie între acolade ṣi indică stilul care va fi aplicat elementului,
aceasta fiind de asemenea alcăt uită din două păr ṭi: o proprietate ṣi o valoare, despăr ṭite de
caracterul‖:‖, după cum este prezentat în figura 4.3:

Figura 4.3 Declaraț ia din cadrul unei reguli de stil
Proprietatea indică acel aspect al elementului, care trebuie schimbat, putându -se
referi la culoare, înal ṭime, lă ṭime, font, etc. Valoarea semnifică un anumit parametru
folosit pentru a schimba proprietatea elemenului la care se face referire.
Elementul HTML <link> este utilizat pentru a cominica browser -ului unde se
găseste fi ṣierul CSS care asigură stilul paginii. Acesta se găseste în interiorul elementului
<head>, nu are nevoie de o etichetă de închidere, precum majoritatea elementelor ṣi
trebuie să continue următoarele atribute:
 href : specifică, calea spre fi ṣierul CSS, care se va găsi cel mai adesea
într-un folder separate numit ―style‖ sau ―css‖ ;
 type : specifică tipul documentului către care se face legătura, acesta fiind
text/css ;
 rel : specifică rela ṭia dintre pagina HTML ṣi fiṣierul spre care se face
legatura, valoarea sa f iind ―stylesheet‖, atunci când se face legatura spre
un fisier de stil ;

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
21
O pagină HTML poate utiliza mai multe fi ṣiere de stil, iar pentru aceasta este
nevoie să aibă câte un element de tipul <link> pentru fiecare fi ṣier de stil utilizat. De
asemenea se po t include reguli de stil in interiorul unei pagini HTML plasâ ndu-le pe
acestea î n interiorul elementului <sty le>, care trebuie să se găsească î n cadrul elementului
<head> al paginii respective. O a treia cale de utilizare a regulilor de stil este aceea de a
defini aceste reguli pentru fiecare obiect în parte, în cadrul atributului ―style‖ al
elementului HTML dorit .
Beneficiile utilizării fi ṣierelor CSS sunt urmă toarele [16] :
 Aspect consistent al site -ului ;
 În unul sau două fi ṣiere de stil se pot regăsi to ate regulile legate de culori,
fonturi sau alte aspect e de stil, fără a fi necesar să scrii acela ṣi cod de mai
multe ori în fiecare pagină, evitând astfel duplicarea codului ;
 Se salvează timp ;
 Chiar dacă pentru prima pagină s -ar putea să dureze mai mult crearea
fiṣierului CSS, se va salva timp la următoarele pagini ;
 Se poate schimba aspectul în tregului site, modificând doar î n fiṣierele
CSS;

4.2 Proiectarea aplicatiei
Platfo rma de e -learning a fost gandită astfel ȋncat utilizatorii care vor avea parte
de un cont să poată beneficia de toate avantajele acesteia, ȋn orice moment ș i tocmai de
aceea platforma este una on -line, unde utiliz atorii o pot accesa de oriunde și oricând, atâta
timp câ t au parte de o conexiune la internet. Aplicaț ia are ȋn vedere suport ul ȋn procesul
didactic pentru materiile : Sisteme de fabricatie integrate si Conduce rea numerică a
masini lor unelte din cadrul specializă rii Ingineria Sistemelor Automate a Facultătii de
Automatică si Calculatore a Universitatii Tehni ce din Cluj -Napoca, a ceasta putând fi
extinsa ȋnsă și la alte materii, respectând una dintre proprietăț ile sale de baza, care este
extensibilitatea.
Ȋn scopul creării acestei aplicaț ii, au fost gândite mai ȋntâi mai multe entități,cu
ajutorul că rora s -a trecut apoi de la stagi ul de idei, la creionarea ȋn linii mari a aplicației,
definind legături ȋ ntre acestea, ca re au ajuns mai apoi sa fie regăsite ȋ n structura bazei de
date. Aceste e ntităț i de la care s -a pornit totul sunt:
 materie;
 student;
 utilizator al aplicației;
 curs;
 laborator;
 altă componentă care intră în calculul notei finale (poate fi proiect, teme date
la curs etc.);
 material didactic;
 postare în cadrul forumului;
 răspuns în cadrul forumului;
 fișier multimedia;
 temă de licență

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
22
Pentru a demonstra importanța acestor e ntități ȋn gândirea si proiectarea ȋ ntregii
aplicatii, vom lista mai jos tabelele bazei de date care va fi folosită pentru stocarea și
manipularea datelor, bază de date ce joaca un rol crucial ȋn dezvoltarea ulterioară a
aplicaț iei. De asemenea, acestea se vor regă si in cadrul caracteris ticilor propriu -zise ale
aplicaț iei, ceea ce demonstrează că o bună proiectare a aplicației facilitează enorm
dezvoltarea și implementarea sa ulterioară. Dupa cum spuneam tabelele bazei de date ,
impreună cu câmpurile defini te ȋn cadrul lor sunt urmă toarele:
 AltCompNota , având coloanele MaterieGUID, StudentGUID, Săptămâna,
Nota;
 Curs , având coloanele MaterieGUID, StudentGUID, Săptămâna, Prezența,
Nota;
 Fișiere , având coloanele FișierGUID (cheie primară), Titlu, Descriere, Tip ;
 Laborator , având coloanele MaterieGUID, StudentGUID, NumărLaborator,
Săptămâna, Nota, Prezența;
 MaterialeDidactice , având coloanele MaterialDidacticGUID (cheie primară),
MaterieGUID, Titlu, Descriere, DownloadLink, Tip;
 Materii , având coloanele MaterieGU ID (cheie primară), An, Nume,
ProcentNotăCurs, ProcentNotăLab, ProcentNotăAlt;
 Postări , având coloanele PostareGUID (cheie primară), Text, Data;
 Răspunsuri , având coloanele RăspunsGUID (cheie primară), PostareGUID,
Text, Data, StudentGUID;
 Studenți , având coloanele StudentGUID (cheie primară), UtilizatorGUID,
Nume, Prenume, Grupa, Echipa, AnStudiu;
 StudentMaterie , având coloanele StudentGUID (cheie primară),
MaterieGUID (cheie primară), NotăExamen, NotăCurs, NotăLab, NotăAlt,
Observații;
 TemeLicență , având coloanele TemaGUID (cheie primară), Titlu, Descriere,
Cerințe, Nivel;
 Utilizatori , având coloanele UtilizatorGUID (cheie primară), Username,
Parolă, TipUtilizator;
Acestea fiind prezentate, se contureaza structura bazei de date, care este
reprezentata in f igura de mai jos:

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
23

Figura 4.4 Structura bazei de date
Având structura baze i de date, cu tabelele create, ȋmpreuna cu legă turile dintre
ele, proiectarea funcționalităților poate fi realizată mult mai clar. Asfel, aplicația ȋși
propune ca, utilizâ nd tehnolo giile specificate la ȋnceputul acestui capitol, să adune ȋntr -un
singur loc toată informația necesară bunei desfășurări a disciplinelor cărora ȋi este
destinată, să puna la dispoziție pe langă acestea și alte fișiere multimedia care să ajute
procesul de ȋ nvățare, s ă ajute cadrul didactic la o bună administrare a situației școlare a
studenților, să ofere date de contact si informații despre laboratoare, cât ș i să
restricț ioneze ac cesul persoanelor neautorizate ȋn unele zone ale aplicaț iei, prin crearea de
conturi pen tru student de către cadrul didactic. Totodată , platform a va oferi si
functionalități innovative, menite să ajute procesul didactic și să ȋl mentină ȋ n pas cu
tehnologia, oferindu -se ȋn acelaș i timp posibilitatea de a alege ȋn ce limbă să fie
prezentată platforma. Toate aceste caracteristici vor fi oferite utilizatorilor, ȋn funcție de
tipul contului cu care vor fi logați. Pentru a ȋntelege mai bine delimitările și restricțille
impuse pentru fiecare tip de utilizator, se vor prezenta următoarele di agrame de utilizare:
 Diagrama de utilizare pentru contul de tip administrator: acest rol va avea
drepturi depline asupra platformei, având drepturi de editare, ștergere sau
adăugare pentru toate entitățile care permit acest lucru. Aceasta este
prezentată i n figura care urmează:

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
24

Figura 4.5 Diagrama de utilizare pentru utilizatorul de tip administrator

 Diagrama de utilizare pentru contul de tip student: față de administratorul
platformei, studenții care se vor loga pe platform, au doar drept de
vizualizare pentru majoritatea entităților, având ȋnsă dreptul de a introduce
răspunsuri la postările din cadrul Forum -ului. Diagrama este prezentata ȋn
figura 4.6:

Figura 4.6 Diagrama de utilizare pentru utilizatorul de tip student

Capitolul 4 – ANALIZĂ ȘI PROIECTARE
25
 Diagrama de utilizare pentru ut ilizatorul normal, care nu este logat pe
platform ă: utilizatorilor care nu sunt logați li se limiteaza foarte mult
accesul in cadrul platformei, aceștia având doar drept de vizualizare pe
cateva dintre entitățile aplicației, după cum se poate observa ȋn fi gura
următoare:

Figura 4.7 Diagrama de utilizare pentru utilizatorul nelogat

Toate aceste as pecte fiind bine puse la punct ș i proi ectate in detaliu, dezvoltarea și
implementarea ulterioară a aplicaț iei vor fi facilitate considerabil, acestea fi ind preze ntate
in capitolul urmă tor.

Capitolul 5 – IMPLEMENTARE
26
Capitolul 5 IMPLEMENTARE
În acest capitol va fi prezentat modul în care au fost implementate funcționalitățile
și caracteristicile platformei de e -learning cuprinse în aceasta lucrare și anume:
 implementarea bazei de date ;
 implementarea Forum -ului ;
 implementarea sectiunii de Live Streaming prin intergrarea Twitch API –
ului ;
 implementarea metodei de căutare în aplicație ;
 implementarea selecției limbii de prezentare a platformei ;
 implementarea galeriilor multimedia ;
 realizare a si implementarea desgn -ului ;

5.1 Implementarea bazei de date
Pentru a implementa structura bazei de date, am folosit tehnologia SQL Server
2012 Management Studio, aceasta fiind un produs Microsoft specializat pentru stocarea și
administrarea datelor. A vând în vedere aceste două roluri foarte importante pe care baza
de date le are și anume stocarea, respectiv administrarea datelor, construcția acesteia a
fost punctul de plecare în cadrul creării platformei noastre de e -learning.
Pentru stocarea datelor s -a creat mai întâi baza de date centrală a aplicației, unde
pe urmă se vor construi tabelele necesare. Construcția bazei de date s -a realizat cu
ajutorul următoarei sintaxe:

CREATE DATABASE [DB.ELearning]

Modul de creare a tabelelor ăn cadrul bazei de d ate pe care l -am ales a fost cel
care utilizează interogări. Un astfel de exemplu îl reprezintă crearea tabelei
MaterialeDidactice .dbo prezentată în cele ce urmează:

CREATE TABLE [dbo].[MaterialeDidactice] (
[MaterialDidacticGUID] [uniqueidentifier] NOT NULL,
[MaterieGUID] [uniqueidentifier] NOT NULL,
[Titlu] [nvarchar] (100) NOT NULL,
[Descriere] [nvarchar] (100) NULL,
[DownloadLink] [nvarchar] (50) NOT NULL,
[Tip] [nvarchar] (50) NOT NULL,
CONSTRAINT [PK_MaterialeDidactice] PRIMARY KEY CLUSTERE D
(
[MaterialDidacticGUID] ASC
)
)

GO

Ȋn interogarea prezentată mai sus, pe lânga crearea tabelei
MaterialeDidactice.dbo , are loc și setarea cheiei primare pe coloana
MaterialDidacticGUID , aceasta putându -se realiza și ȋn alt mod, din interfața grafică. Pe
lângă această cheie primară, s -au mai setat si alte chei straine, care reprezintă legatura

Capitolul 5 – IMPLEMENTARE
27
dintre două tabele ale bazei de date. Crearea acestor chei străine este prezentată în
următorul cod:
ALTER TABLE [dbo].[MaterialeDidactice] WITH CHECK ADD
CONSTRAINT [FK_MaterialeDidactice_Materii]
FOREIGN KEY([MaterieGUID] )
REFERENCES [dbo].[Materii] ([MaterieGUID] )

GO
Pentru a permite unui student să poată fi înscris la mai multe materii si totodata
să fie permis ca la o anumită materie să poa tă fi inscriși mai mulți studenți , a m
implementat o tabelă de legatură numită StudentMaterie.dbo care conține o cheie primară
compusă. Aici, cheia primară compusă este alcătuită din coloanele ―StudentGUID‖ și
―MaterieGUID‖. Pe lânga aceasta, au fost creat e două chei străine: una cu tabelul
―Studenți‖, prin coloana ―StudentGUID‖ și una cu tabelul ―Materii‖ prin coloana
―MaterieGUID‖.
Pentru manipularea datelor în baza de date, am folosit proceduri stocate pentru
operatiile CRUD (Create, Read, Update, Delete ), care au fost mai apoi utilizate de către
metodele din cadrul aplicației. În continuare este preyentat Mai jos, se poate regasi un
exemplu al operației de ștergere din cadrul operațiilor CRUD, pentru o înregistrare din
cadrul tabelei Postari.dbo

CREATE PROCEDURE [dbo].[Postari_Delete]
@PostareGUID uniqueidentifier
AS
DELETE FROM dbo.Postari
WHERE PostareGUID =@PostareGUID

GO

5.2 Forum
Forum -ul este una dintre cele mai importante caracteristici inovative ale aplicației,
aducând odată cu ea mai mu lte beneficii, printre care se numară în primul rând,
eficientizarea procesului de evaluare al studentilor, dar și facilitarea comunicării între
cadrul didactic și student. Acest modul este compus din două părți majore : pagina de
postări și pagina de răsp unsuri.
Pagina de postări, prezentată în imaginea 5.1, reprezintă locul unde cadrul
didactic poate să propună o temă de dezbatere, să lanseze o întrebare specifică, iar
răspunsurile primite să conteze în procesul de evaluare, sau să comunice o temă de
interes general. Aceste postări ale cadrului didactic vor fi afișate sub forma unui tablel în
care se vor regăsi, pentru fiecare postare, textul postării, data la care a fost introdusă
postarea, cât și un buton care redirecționează spre pagina de răspunsuri a postarii
respective, aceasta fiind ceea ce un utilizator de tipul student poate să vadă în aceasta
pagină, utilizatorii de acest tip, având doar acest drept, de a vedea postarile și de a fi
redirecționați spre paginile de răspunsuri. În plus, administrator ul va dispune de un buton
de ștergere pentru fiecare postare în parte, pentru cazurile în care acesta va dori să șteargă
o anumita postare care nu mai este de actualitate.

Capitolul 5 – IMPLEMENTARE
28

Figura 5.1 Pagina de postări

Tot aici, administratorul poate adăuga o nouă posta re, a cărei text îl va introduce
în elementul HTML <textarea>, aflat sub postările existente, iar prin acțiunea de click a
butonului ,, Adauga postare ‖ , aceasta va fi salvată în baza de date , în cadrul tabelului
Postari , unde pe lângă textul postării, va f i prezentă data la care este introdusă postarea,
cât și un Guid specific pentru fiecare postare, care va fi generat automat în cadrul funcției
createGuid() din cadrul fișierului de Javascript, această functionalitate realizându -se
―client -side‖. Codul pent ru crearea acestui obiect Javascript care va avea structura unui
obiect de clasa Postari este următorul:

var postare = {
PostareGUID : createGuid (),
Text: $("#newPost" ).val(),
Data: new Date($.now())

După crearea obiectului, cu ajutorul metodei InsertPost() din cadrul serviciului
web ForumWebService apelat de către Ajax call -ul din cadrul funcției de Javascript
adaugarePostare() , se realizează introducerea în tabela ―Postari‖ a bazei de date unei noi
inregistrari a obiectului ―postare‖ prezentat mai sus, cu ajutorul unei proceduri stocate
folosită în metoda InsertPost(). Procedura stocată prin care se introduc aceste date în baza
de date este următoarea:

CREATE PROCEDURE [dbo].[Postari_Insert]
@PostareGUID uniqueidentifier ,
@Text nvarchar (MAX),
@Data datetime
AS
INSERT INTO dbo.Postari(PostareGUID ,Text,Data)
VALUES (@PostareGUID ,@Text,@Data)
GO

Capitolul 5 – IMPLEMENTARE
29
Modul în care se realizează inserarea unei înregistrări în tabelul Postări al bazei de
date, precum și toate meto dele și clasele folosite în această acțiune sunt descrise de
diagrama de clase prezentată în figura următoare:

Figura 5.2 Diagrama de clase folosite în procesul de inserare a unei înregistrări în tabelul
Postări
Pentru ș tergerea unei postări, pe acțiunea de click a butonului Stergere aferent
fiecarei postări, se apelează funcția functionDelete(), care inainte de a realiza ștergerea
propriu -zisă, cu ajutorul unei alerte, se asigură că, administratorul într -adevăr dorește să
șteargă postarea respectivă:

function functionDelete (postareGUID ) {
if (confirm(resources .Confirm_Delete_Post )) {
$.when(DeleteRaspunsuriByPostareGUID (postareGUID ))
.then(function (data) {
DeletePostare (postareGUID )
})
}
}

Ștergerea propriu -zisă se realizează cu ajutorul funcției DeletePostare(), care are
ca parametru Guid -ul postării care se dorește a fi ștearsa. Precum la adăugare și aic i
procedeul este același, prin A jax call -ul din cadrul func tiei DeletePostar e() se apeleazș
metoda cu același nume, DeletePostare, din cadrul serviciului web ForumWebSercice,
unde cu ajutorul procedurii stocate Postari_Delete, se realizează ștergerea din tabela bazei
de date a înregistrării corespunzatoare Guid -ului postării trimi s ca parametru:

CREATE PROCEDURE [dbo].[Postari_Delete]
@PostareGUID uniqueidentifier
AS
DELETE FROM dbo.Postari
WHERE PostareGUID =@PostareGUID

GO

Capitolul 5 – IMPLEMENTARE
30
Afișarea datelor în pagina de postă ri s-a realizat de aseme nea cu ajutorul A jax
call-ului d in cadrul funcției din fișierul Javascript GetAllPosts() , care apelează metoda
GetAllPosts() a serviciului web ForumWebService, care va prelua toate postările
existente în baza de date cu ajutorul procedurii stocate Postari_ReadAll, prezentată mai
jos:

CREATE PROCEDURE [dbo].[Postari_ReadAll]
AS
SELECT *
FROM dbo.Postari
ORDER BY Data

GO

Acest procedeu prin care s -au realizat atât inserarea în baza de date, ștergerea
postarilor, cât și afișarea datelor în pagina de postări este specific pe ntru dezvoltarea
„client -side‖ a produselor software și este regăsit în cea mai mare parte a platformei
noastre de tip e -learning, deoarece oferă o mai bună performanță a aplicației.
Pentru a face diferența între tipurile de utilizatori, pentru a ști i exact care elemente
trebuie afișate în pagină, au fost utilizate așa numitele „cookie‖ -uri, care sunt mici fișiere
de memorie, reținute în browser, în care se stochează informații despre utilizatori. As tfel,
utilizând aceste entități, am reușit să facem separa rea între utilizatorii fără cont,
utilizatorii cu cont de student și utilizatorii cu cont de administrator, acest procedeu
regăsindu -se pe toate paginile aplicatiei:
if (document .cookie === "language=" +readCookie ("language" )) {
window.location .href = "ErrorPage.aspx" ;
}
else if (readCookie ("usertype" ) !== "0") {
GetAllPosts ();
}
else {
$("table thead tr:last" ).append("<td>"+resources .Delete+"</td>");
$("#addMaterieDiv" ).append('<textarea id="newPost" class="fo rm-
control"></textarea> <br />' +
'<input type="button" id="addPost" value="' + resources .Add_Post + '"
class="btn btn -info" onclick="adaugarePostare()"/>' );
GetAllPosts ();
}

Cea de -a doua componentă majoră a forum -ului este prezentată in figura 5.3 și
este reprezentată de paginile de răspunsuri, care sunt individuale pentru fiecare răspuns,
aici ajungându -se în urma acțiunii de click a butonului „ Raspunsuri ‖ din cadrul paginii de
postari.

Capitolul 5 – IMPLEMENTARE
31

Figura 5.3 Pagina de răspunsuri

Redirectarea se fa ce în funcție de Guid -ul postării, cu ajutorul funcției
viewAnswers() prezentate mai jos:
function viewAnswers (id) {
var url = "ManageRaspunsuri.aspx?postGUID=" + encodeURIComponent (id);
window.location .href = url;
}

Precum pagina de postări, con ținutul paginilor de răspunsuri va fi afișat sub forma
unui tabel care va conține numele persoanei care a lăsat răspunsul, data la care a fost
introdus răspunsul și textul în sine al răspunsului . Similar cu pagina de postări,
administratorul va avea posibi litatea de a șterge răspunsuri, cu ajutorul butonului
Stergere . Pe lângă tabelul cu răspunsuri, pagina va mai contine textul postării, dar va
permite de asemenea și introducerea de noi răspunsuri pentru toți utilizatorii care au parte
de un cont. Răspunsul va putea fi introdus în elementul HTML <textarea>, al carui
conținut va servi ca valoare pentru parametrul Text al obiectului de clasa Raspunsuri ce
va fi creat pentru introducerea ulterioară în baza de date. Codul prin care s -a realizat
crearea acestui o biect Javascript corespunzător obiectului de clasă Răspunsuri este
următorul:

var raspuns = {
RaspunsGUID : createGuid (),
PostareGUID : postareGUID ,
Text: $("#newAnswer" ).val(),
Data: new Date($.now()),
StudentGUID : data.d.StudentGUID
};

Procedeul folosit pentru introducerea în baza de date a unei noi inregistrări în
tabela Raspunsuri este similar cu cel folosit pentru a introduce postările în baza de date,

Capitolul 5 – IMPLEMENTARE
32
ceea ce dife ră fiind metoda serviciului web, aici fiind vorba despre metoda
InsertAnswers(), care utilizează procedura stocată Raspunsuri_Insert:

CREATE PROCEDURE [dbo].[Raspunsuri_Insert]
@RaspunsGUID uniqueidentifier ,
@PostareGUID uniqueidentifier ,
@Text nvarchar(MAX),
@Data datetime ,
@StudentGUID uniqueidentifier
AS
INSERT INTO
dbo.Raspunsuri (RaspunsGUID ,PostareGUID ,Text,Data,StudentGUID )
VALUES (@RaspunsGUID ,@PostareGUID ,@Text,@Data,@StudentGUID )

GO

De asemenea, clasele care vor fi folosite pentru in troducerea unei înregistrări în
tabelul Răspunsuri sunt diferite față de cele folosite în realizarea operației pe tabelul
Postări. Aceste clase sunt descrise în diagrama de clase din figura 5.4:

Figura 5.4 Diagrama de clase folosite în procesul de insera re a unei înregistrări în tabelul
Răspunsuri
Pentru procedura de ștergere a răspunsurilor, se folosete exact același procedeu,
din nou diferența fiind la metoda serviciului web apelată , care utilizează aici procedura
stocată Raspunsuri_Delete:

CREATE PROCEDURE [dbo].[Raspunsuri_Delete]
@RaspunsGUID uniqueidentifier
AS
DELETE FROM dbo.Raspunsuri
WHERE RaspunsGUID =@RaspunsGUID

GO

Capitolul 5 – IMPLEMENTARE
33
Pentru încărcarea răspunsurilor în fiecare pagină de răspunsuri aferentă unei
postari, s -a utilizat funcția GetAnswersBy PostareGUID() , care este apelată în interiorul
$(document ).ready(function () { } , funcție ce se apelează la fiecare încărcare a paginii.

5.3 Live Streaming
O altă caracteristică inovativă a platformei de e -learning este aceea de a oferi
posibilitatea de a transmite în timp direct diferite activități didactice, atât din interiorul
laboratorului unde se găsesc echipamentele didactice necesare desfășurării lucrărilor de
laborator , cât și din orice alt loc, atât timp cât laptop -ul sau pc -ul unde este conecta tă
camera web dispune de conexiune la internet, aceasta caracteristică fiind regăsită în
pagina LiveStreamingPage, prezentată în figura 5.5 de mai jos:

Figura 5.5 Live Streaming Page

Această componentă a platformei reprezintă o integrare a Twitch Platfo rm API –
ului, care asigură necesitățile live streaming -ului în ceea ce privește serverele și
comunicația între acestea și fiecare client care face un request pentru a se putea conecta la
acestea, în vederea obținerii datelor ce constituie transmisia video în timp real a
activitățlor didactice. Pentru a integra acest API în aplicația noastră, am folosit un
element HTML <iframe>, a cărei surse trebuie să fie cea obținută de la API:

<iframe src=http://www.twitch.t v/zlive/embed frameborder ="0"scrolling ="no"
style="min-width:40vw; min-height:40vh;"></iframe>

Pentru preluarea cadrelor video de la camera web am folosit programul Open
Broadcast Software , care este un program specializat pentru înregistrarea și transmi terea
în direct a cadrelor video. Pașii pentru instalarea și configurarea acestui program pot fi
regăsiți în [n – http://help.twitch.tv/customer/portal/articles/1262922 -open -broadcaster –
software#Getting Started and Setup ] . Pentru a putea interconecta aces t software cu API –
ul Twitch, a fost necesară crearea unui cont pe platforma [ 17], unde fiecare utilizator
beneficiază de un anumit cod personal, numit ― Stream key ‖, care trebuie introdus in
configurarea programul Open Broadcast Software –ului.

Capitolul 5 – IMPLEMENTARE
34
Schema din figura 5.6 exemplifică modul in care Twitch Platform API –ul
lucrează împreună cu programul Open Broadcast Software și cu platforma noastră de e –
learning, obținând astfel funcționalitatea de live streaming.

Figura 5.6 Schema integrarii Twitch API -ului

5.4 Metoda de c ăutare
Pentru a optimiza procesul de găsire a informației dorite pe platforma didactică,
am implementat funcționalitatea aceasta, care permite utilizatorului să caute informația
de care are nevoie. Căutarea se realizează în funcție de paramet rul introdus în cutia de
text a barei de căutare, în punctele ―cheie‖ ale aplicației. Aceste puncte ―cheie‖ au fost
stabilite în urma unei evaluări atente a întregii platforme și se referă la următoarele zone:
 Materiale didactice ;
 Postările din cadrul for umului ;
 Răspunsurile la postările din cadrul forumului ;
 Fișierele multimedia ;
 Temele de licență ;
Această funcționalitate, la fel ca Forumul, este constituită din două părți importante,
care impreună realizează căutarea în aplicație. O primă parte este constituită din bara de
căutare, împreună cu butonul de căutare, care se regăsesc in Master Page și astfel în
fiecare pagină a aplicației, fiind reprezentate în figura 5.7 :

Figura 5.7 Bara de căutare

Aici este introdus parametrul după care se va face c ăutarea, fiind acceptate orice
tip de caractere: cifre, litere si inclusiv caractere special. Pentru realizarea acesteia, s -a
folosit un control .asp de tip Text, cat si un control .asp de tip ImageButton pentru butonul
de căutare:

Capitolul 5 – IMPLEMENTARE
35

<div id="searchBarDiv" class="topHeader" >
<div id="floated" >
<div class="input-group stylish -input-group">
<input id="searchText" type="text" class="form-control"
placeholder ="Search" name="txtSearch" />
<span class="input-group-addon">
<asp:ImageButton ID="searchIcon" runat="server" src="Images/search.jpg"
OnClick="searchIcon_Click" />
</span>
</div>
</div>
</div>

Funcționalitatea butonului de că utare se reduce la redirectarea spre Pagina de
rezultate , în funcț ie de parametrul introdus, unde se întâmplă de fapt to ată acțiunea din
cadrul procesului de că utare.
Continuând cele prezentate mai sus, cea de -a doua mare parte a procesului de
căutare de informații este pagina de rezultate, unde vor fi afișate rezultatele găsite în
urma căutării. La această pagin ă se ajunge în urma redirectă rii produse de butonul de
căutare, conținând în url parametrul introdus în bara de căutare. În figura 5.8, este
prezentată pagina de rezultate, având ca parametru de căutare cuvântul „cnmu ‖.

Figura 5.8 Pagina de rezultete ȋn urma căutării

Algoritmul de căutare este unul personal,dezvoltat doar în cadrul acestei aplicații,
fiind realizat în client side , cu ajutorul fișierelor de Javascipt și a librăriei jQuery,
regăsindu -se în spatele acestei pagini de rezultate.
Algoritmul c aută, cu ajutorul procedurilor stocate, în tabelele din baza de date
corespunzătoare fiecarei zone „cheie‖ în parte. Pentru fiecare dintre aceste zone din
aplicație, se realizează o funcție in cadrul fișierului Javascript, unde cu ajutorul unui ajax
call, se apelează metoda de căutare specifică fiecarei zone în parte din cadrul serviciului
web SearchWebService , care cu ajutorul procedurilor stocate vor returna rezultatele
existente din fiecare tabelă a bazei de date în care se face căutarea, în funcție de
parametrul introdus pentru căutare. Un exemplu de procedură stocată utilizată aici pentru
căutarea în tabela materialelor didactice din cadrul bazei de date este prezentat mai jos:

CREATE PROCEDURE [dbo].[MaterialeDidactice_Search]
@searchText nvarchar (50)
AS
SELECT *

Capitolul 5 – IMPLEMENTARE
36
FROM dbo.MaterialeDidactice
WHERE MaterialeDidactice .Titlu LIKE '%' + @searchText + '%'

GO
5.5 Selectarea limbii de prezentare
Această caracteristică a aplicației permite utilizatorilor să își selecteze limba in
care doresc sa fie prez entată platforma, aceștia având opțiunea de a alege între limba
română și limba engleză. Selectarea limbii dorite se realizează cu ajutorul celor două
imagini din cadrul Master Page -ului, care simbolizează drapelul României respectiv al
Marii Britanii. Cel e două imagini sunt introduse în cadrul a două elemente HTML <a>.
Pentru a fi posibilă varianta în douî limbi a platformei, s -au utilizat două fișiere
Javascript: ResourcesRO.js respectiv ResourcesEn.js, în care se țin valorile în limba
română, respeciv en gleză pentru toate liniile de text din aplicație, ca proprietăți ale
obiectelor create in interiorul lor. Fiecare fișier va conține câte un obiect, resourcesRO
respectiv resourcesEN. Pentru a ține minte care este opțiunea lingvistică a utilizatorului,
se utilizează ―cookie‖ -uri, care sunt variabile ale browser -ului, folosite pentru stocarea
unor date de dimensiuni reduse. La prima încărcare a aplicației, se verifică dacă
―cookie‖ -urile sunt goale, iar în cazul acesta, se va seta opțiunea lingvistică în limb a
română, termenul de expirare al acestui ―cookie‖ fiind ales unul mai îndelungat pentru a
ne asigura că acesta nu expiră în decursul unei sesiuni normale:

if (document .cookie === "") {
document .cookie="language=Romanian; expires=Thu, 18 Dec 2016 12:00:00 UTC";
}

Pe urmă , cu a jutorul funcț iei readCookie() se va citi din „cookie‖ –ul existent
opțiunea selectată, care va fi atribuită variabilei language . În funcție de valoarea
variabilei language, se va seta valoarea unei alte variabile, resources , aceasta primind fie
valoarea obiectului resourcesRO creat în fișierul ResourcesRO.js încaărcat în pagina
imediat după fișierele de jQuery, fie valoarea obiectului resourcesEN creat în fișerul
ResourcesEN.js, care va fi încărcat următorul după ResourcesRO.js :

if (language === "Romanian" ) {
resources = resourcesRO ;
}
if (language === "English" ) {
resources = resourcesEN ;
}

Odată setată valoarea variabilei resource, valorile tuturor liniilor de text din
aplicație vor lua val oarea resource.<numele parametrului la care se face referire>, un
exemplu fiind prezentat in codul de mai jos:
$("#pageTitle" )[0].innerText = resources .RaspunsuriTitle ;
$("#dateTD" )[0].innerText = resources .Date;
$("#studentTD" )[0].innerText = resources.Student_Name_Table ;
$("#addAnswer" )[0].value = resources .Add_Answer ;
Pentru a fi evidențiată această caracteristică a aplicației, sunt prezentate
următoarele două imagi ni:

Capitolul 5 – IMPLEMENTARE
37

Figura 5.9 Pagina de rapoarte laborator – limba română

Figura 5.10 Pagina de rapoarte laborator – limba englez ă

A fost ales acest mod de abordare pentru crearea acestei caracteristi ci, tocmai
pentru a respecta trăsătura de extensi bilitate a platformei, astfe l permițând adă ugarea
oricâ tor lim bi, prin simpla adăugare a încă unui fișier Javasc ript pentru fiecare limbă,
care să conțină traducerea în limba respectivă a tuturor caracteristicilo r obiectului creat în
fișierul Javascript respectiv, care reprezintă de fapt traducerea fiecărei linii de text din
aplicaț ie.

5.6 Galerii Mult imedia
Această caracteristică a platformei este una inovatoare, care vine în completarea
secțiunii de Materiale didactice, prezentata in [1], deoarece oferă, pe lângă clasicele
suporturi de curs și indrumatoarele de laborator, fișiere multimedia de tip fot o-video, care
ajută la o mai bună înțelegere a disciplinelor cărora le este destinată aplicția.
În funcție de tipul fișierelor, din pagina de materiale multimedia prezentată în
imaginea de mai jos, utilizatorul poate opta să fie direcționat în pagina mate rialelor video
sau spre galeria foto. Aceaste zone sunt printre puținele locuri accesibile oricărui
utilizator, inclusiv celor care nu au un cont creat de către cadrul didactic, lucru menit ăa
atragă curiozitatea viitorilor posibili studenți ai Universităț ii Tehnice care ajung să
acceseze aplicțtia noastră. Pentru utilizatorii care au parte de un cont, drepturile acestei
funcționalități se diferențiază de la student la cadrul didactic. Astfel, utilizatorii cu rol de

Capitolul 5 – IMPLEMENTARE
38
student, au permisiunea doar de a vizuali za, atât elementele video cât și cele foto, în timp
ce administratorul are în plus dreptul de a adăuga un nou fișier sau de a șterge unul
existent.

Figura 5.11 Pagina Multimedia

5.6.1 Galerie foto
Pentru realizarea galeriei foto am utilizat FancyBox, c are este un plugin de
jQuery, cu ajutorul căruia se pot crea cele mai moderne tipuri de galerii foto, aceasta fiind
una dintre cele mai recomandate opțiuni pentru crearea unei galerii foto în momentul
actual.
Pentru afișarea pozelor în pagină s -a folosit u n fișier de tip javascript, în care , cu
ajutorul unui apel Ajax, se apeleaza metoda GetAllPhotos() din serviciul Web
FisiereWebService , care returnează toateîinregistrările de tipul foto din tabela Fisiere a
bazei de date:

CREATE PROCEDURE [dbo].[Fisiere_ReadAllPhotos]
AS
SELECT *
FROM dbo.Fisiere
WHERE Fisiere.Tip='foto'

GO

În această tabelă sunt stocate atat fișierele video, cât și cele foto, diferența dintre
ele făcându -o câmpul Tip al tabelei. Odată preluate din baza de date, cu ajutorul funcției
de Javascript GetAllPhotoOnSucces() , se realizează afișarea imaginilor în pagina
destinată galeriei Foto, prezentate in figura 5.12.

Capitolul 5 – IMPLEMENTARE
39

Figura 5.12 Galerie Foto

Pentru a adă uga noi imagini în galerie, cu ajutorul butonului de adăugare,
administr atorului i se va deschide o fereastră de tip pop -up, unde acesta va putea să
adauge imaginile dorite. Aceasta este realizată ―server side‖, cu ajutorul mai multor
controale de tip asp. Pentru încărcarea imaginilor, am folosit controlul de tip asp
FileUploa d , salvarea propriu -zisa a imaginilor realizandu -se pe evenimentul de click al
butonului Adauga , unde se creeaza un obict de clasa Fisiere , care mai apoi este introdus
în baza de date. Tot aici se face și verificarea extensiei fisierului care este încăr cat, pentru
a ne asigura ca în soluție se salvează o imagine cu extensia .jpg sau .jpeg. Ȋn cazul în care
fișierul încărcat este de alt tip decât cele precizate mai devreme, va apărea un mesaj de
eroare care să anunțe administratorul că fișierul nu este un ul suportat. De asemenea
pentru fiecare fișier mai trebuie adaugată o descriere, în textbox -ul aferent, aceasta fiind
de asemenea introdusă în baza de date, în cadrul obiectului de clasa Fisiere creat.
Pentru ștergerea fișierelor foto s -a folosit din nou un apel Ajax, care apelând
metoda DeleteFotoByFisierGUID() din serviciul Web FisiereWebService , va utiliza
procedura stocată Fisiere_DeleteFotoByFisierGUID, care va șterge din baza de date
înregistrarea corespunzatoare GUID -ului dat ca parametru:

CREATE PROCEDURE [dbo].[Fisiere_DeleteFotoByFisierGUID]
@FisierGUID uniqueidentifier
AS
DELETE FROM dbo.Fisiere
WHERE FisierGUID=@FisierGUID

5.6.2 Galerie video
Pentru vizualizarea materialelor video s -a utilizat un element HTML de tip
<video>, ale cărui surse vo r fi schimbate în funcție de fișierul video care se dorește a fi
vizualizat. Acest lucru s -a realizat ―client -side‖, cu ajutorul fiăierelor de Javascript, în
care cu ajutorul librăriei jQuery s -au realizat funcții care, la acțiunea de click pe ―afisul‖
fiecărui material video, setează elementului<video> sursa corespunzătoare acelui
material. Sursele necesare elementului <video> sunt reprezentate de trei fișiere de tipul
.mp4, .ogv, respectiv .webm, fiecare dintre aceste fișiere având exact același nume,
extensia fiind cea care face diferența între ele. Pentru convertirea fișierelor video care s –

Capitolul 5 – IMPLEMENTARE
40
au încărcat în aplicație, am folosit programul Freemake Video Converter și am selectat
pentru ieșire opțiunea ― to HTML5 ‖, care va converti fișierul video adăugat în p rogram în
formatul specificat, care include aceste formate necesare elementului HTML <video>,
adica fișierul .mp4 și codecurile necesare – fiăierele .ogv respectiv .webm.

$("#videoPlayer> source" )[0].attr("src", "Videos/" + value.titlu + ".ogv");
$("#videoPlayer> source" )[1].attr("src", "Videos/" + value.titlu + ".webm");
$("#videoPlayer> source" )[2].attr("src", "Videos/" + value.titlu + ".mp4");

Pentru rularea video -ului dorit, este suficientă acțiunea de click pe așa -numitul
―afis‖ al fiecar ui fișier video, după care, cu ajutorul controalelor de care dispune
elementul HTML prin adăugarea atributului controls ="controls" , se pot controla
volumul sunetului și dimensiunea player -ului, cât și acțiunile de play/pause pentru
materialul video. Toate acestea sunt prezentate în figura 5.1 3.

Figura 5.13 Galerie Video

Adăugarea unui nou fișier video este foarte asemănătoare cu adăugarea fișierelor
foto, fiind realizată, de asemenea, „ server side ‖ cu ajutorul controalelor de tip asp.
Încărcarea celor t rei fișiere video specificate mai sus se trealizeaza cu ajutorul a trei
controale asp de tip FileUpload , câte unul pentru fiecare tip de fișier, iar în cazul
încărcării unor fișiere necorespunzătoare, va apărea un mesaj de eroare. Precum la
fișierele foto și aici vom avea un control de tip Textbox, penrtu adăugarea unei descrieri a
fișierului video. Pe acțiunea butonului Adauga va fi implementată inserarea propriu -zisă a
noului fișier video, procedeul fiind similar cu cel de la adăugarea fișierelor foto, a stfel
creându -se un obiect de clasa Fisiere , care urmează să fie introdus in baza de date.
Diferența dintre obiectul creat aici și cel creat în cadrul adăugarii fișierelor foto se
regăsește la proprietatea Tip a obiectului, unde pentru adăugarea fișierelor video, valoarea
acestei proprietăți va fi „ video ‖, iar pentru fișierele foto, valoarea va fi „ foto‖.
Pentru ștergerea fișierelor video, similar cu ștergerea fisierelor foto, s -a folosit un
apel Ajax, care apelând metoda DeleteVideoByFisierGUID() din serv iciul Web
FisiereWebService , va utiliza procedura stocată Fisiere_DeleteVideoByFisierGUID, care
va șterge din baza de date înregistrarea corespunzatoare GUID -ului dat ca parametru:

Capitolul 5 – IMPLEMENTARE
41
CREATE PROCEDURE [dbo].[Fisiere_DeleteVideoByFisierGUID]
@FisierGUID uniqueidentifier
AS
DELETE FROM dbo.Fisiere
WHERE FisierGUID=@FisierGUID

5.7 Design
Patforma didactică dispune de un design special, creat astfel încât interfța să fie
una usor de folosit (user friendly). Aici se pot regăsi elemente moderne de design, cum ar
fi elementele de planare, existent unui ―master page‖, nuanțe de culori apartinand
gamelor moderne de culori în ceea ce priveste web design -ul, elemente de tip ―tooltip‖,
precum si iconite moderne, aparținand claselor de bootstrap. Design -ul este realizat c u
ajutorul fișierelor de tip CSS (Cascading Style Sheets) și a framework -ului Bootstrap,
asigurându -se astfel o interfată ―responsive‖, care își adaptează aspectul în funcție de
displayul pe care este afișată.

5.7.1 CSS
CSS-urile funcționează pe baza unor reguli de asociere care au loc împreună cu
elementele HTML, aceste reguli impunând modul în care vor ară ta respectivele elemente
HTML.
Pentru început, s-a creat in cadrul proiectului ELearning.WebForms un dosar
numit ― Styles ‖, unde se vor tine toate fișie rele de tip CSS ale aplicaței. După crearea
paginilor de ti p WebForm ș i popularea acestora cu el emente de tip HTML (popularea
făcându -se în une le cazuri dinamic), am creat fiș iere de stil (CSS), care sunt salvate î n
dosarul ― Styles ‖,în funcț ie de necesitat ea fiecarei pagini. Pentru a crea un nou fiț ier CSS,
cu cl ick dreapta pe dosarul unde ț inem toate fisierele de stil, selectam Add , iar mai apoi
Style Sheet, urmâ nd ca mai apo i sa oferim un nume sugestiv fiș ierului (exemplu:
HomePage.CSS).

Figura 5.14 Crearea unui fisier CSS

Capitolul 5 – IMPLEMENTARE
42
Următorul pas este acela de a comunica browser -ului unde gasește fișierul CSS
care asigură aspectul paginii respective, aceasta realizându -se prin adăugarea acestor
fișiere în paginile .aspx. Adăugarea se face în interiorul elementul ui HTML <head>, cu
ajutorul unui alt element HTML, <link>. În aplicația noastră, toate paginile au cel puțin
un astfel de fișier de stil, însă majoritatea beneficiaza de două sau mai multe CSS -uri. Un
exemplu de astfel de adăugare a acestor fișiere îl repr ezintă codul următor:

<link href="Styles/HomePage.css" rel="stylesheet" />

Odată fiind creat și adăugat fișierul de stil, se poate trece la definirea regulilor de
asociere cu elementele HTML. Cel mai adesea acestea se formeaza cu ajutorul
selectorilor de ID și de Clasă, asta însemnând că și elementele HTML al căror design este
modificat să conțină atributele de clasă ( class ) și de Id, iar valorile atributelor trebuie să
coincidă exact cu numele selectorilor. Asfel, selectorul de clasă se marchează cu simb olul
„ . ‖ :

.classContent {
margin:0 auto;
width:88%!important ;
vertical -align:central;
background :#f2f2f2;
margin-bottom:0px;
padding-top:17.5vh;
}

Sintaxa ― !important ‖ este utilizată atunci când un element poate să moșteneasc ă
valoarea pentru o proprietate din mai multe locuri, aceasta declarând clar care va fi
valoarea finală pentru elementul respectiv. În situația în care elementul primește din mai
multe parți o valoare care să conțină această sintaxă pentru o proprietate a sa, atunci
valoarea finală va fi ultima primită împreună cu sintaxa ― !important ‖.
Selectorul de Id este selectorul cel mai precis și cel mai concis, neexistând
posibilitatea de a exista mai multe elemente cu același Id și se notează cu simbolul ― # ‖:

#siglaAutomatica {
height:130px;
width:150px;
float:right;
}

Cele mai importante proprietăț i ale regulilor de asociere sunt, dupa cum se poate
observa și mai sus, următoarele: margin, padding, background, height, width,color, font –
size, border, dar și celelalte proprietăți fiind importante, în vederea realizării unui design
cât mai reușit.
O altă metodă folosită pentru stilizarea elementelor HTML a fost aceea de a
include proprietațile design -ului în cadrul elementului HTML individual, cu ajutoru l
atributului style, din cadrul elementului HTML dorit. Această metodă se aplică în general
atunci când în cadrul unei pagini, este nevoie de foarte puține reguli de stil, în unele
cazuri doar pentru un singur element, aici soluția optimă fiind aceasta de a adăuga direct
în cadrul atributului style proprietățile de design. În continuare sunt prezentate câteva
exemple:

<label style="padding-top:10vh;" id="errorMessageLabel" ></label>
<h1 id="labelTitlu" style="padding-left:4vw; margin-bottom:0; "></h1>

Capitolul 5 – IMPLEMENTARE
43
<div style="margin-top: 5vh">

5.7.2 Master Page
Pagina de Master(Master Page -ul) furnizează un template pentru toate celelalte
pagini ale aplicației Web, oferindu -le totodată acestora funcționalitățile implementate în
cadrul ei. Cel mai important rol al acestei pagini este acela de a crea un aspect consistent
al tuturor paginilor din aplicație.
Crearea paginii de master s -a realizat prin click dreapta pe dosarul
ELearning.WebForms , unde s -a selectat Add, iar pe urmă Master Page , dupa cum este
prezent at in figura 5.15:

Figura 5.1 5 Crearea unui Mater Page
De preferat este ca, Master Page -ul să fie realizat înaintea creării celorlalte pagini,
astfel încat, la crearea unei noi pagini să îi poată fi deja atribuit Master Page -ul dorit.
Aceasta se realizea ză astfel : click dreapta pe dosarul ELearning.WebForms , unde se
selectează Add, iar pe urmă se alege opțiunea WebForm using Master Page , după care va
fi afișata fereastra de selecție a Master Page -ului, prezentată în figura 5.16:

Figura 5.16 Alegerea Mater Page -ului

Capitolul 5 – IMPLEMENTARE
44
O astfel de pagină de master va conține cel puțin un control de tip asp numit
ContentPlaceHolder, unde va fi ținut codul fiecărei pagini în parte, aceste pagini
numindu -se ContentPages . Conținutul care va fi comun tuturor paginilor va fi țin ut
înafara acestor controale. Întregul conținut al unui ContentPage este ținut în interiorul
acestui control asp.

<asp:Content ID="Content1" ContentPlaceHolderID ="head"
runat="server" ></asp:Content>

Master Page -ul platformei didactice este împărțit în t rei mari componente:
regiunea de Header , regiunea destinată ContentPage –urilor și regiunea de Footer . Prima
componentă este definită în interiorul elementului HTML <header> și conține siglele
Universității Tehnice din Cluj Napoca, respectiv a catedrei de Automatizări din cadrul
Facultății de Automatică și Calculatoare, care vor servi ca linkuri spre site -urile
instituțiilor respective, butoanele din meniul header -ului, destinate navigării prin
aplicație, bara de căutare, precum și link -ul către pagina de L og In, care după logare
devine element ce va conține numele utilizatorului, iar prin planarea mouse -ul asupra sa
va expanda o listă cu opțiunile de delogare sau de schimbare a parolei. De asemenea tot
aici se vor regăsi și butoanele pentru selectarea limbi i dorite, fiind simbolizate prin
drapelul României și al Marii Britanii.O altă caracteristică a headerului este aceea de a
rămâne fix, acesta nedeplasându -se în cazul în care dimensiunea paginii depășește un
ecran și se execută scroll -down sau scroll -up, b utoanele din meniu rămânând astfel tot
timpul accesibile. Aceasta s -a realizat cu ajutorul proprietăților position și z-index , în
cazul primei prorietăți valoare fiind „fixed‖, iar valoarea proprietății z -index trebuind să
fie cat mai mare, astfel încât va loarea ei să depășească valoarea acestei proprietăți din
cadrul altor elemente. Cea de -a doua componentă a Master Page -ului este zona destinată
conținutului fiecărei pagini în parte, aici fiindu -i setate doar câteva elemente de stil. Cea
de-a treia compone ntă va conține atribuirile drepturilor legale pentru această platformă,
un link spre pagina Universității Tehnice din Cluj Napoca, precum și autorii platformei
didactice.

Figura 5. 17 Mater Page

Capitolul 5 – IMPLEMENTARE
45
5.7.3 Design adaptiv
Platforma de e -learning îsi va adapta atat aspectul cît și conținutul în funcție de
dimensiunea ecranului pe care va fi afișată, începând de la ecranele telefoanelor
inteligente, până la dimensiunea oricărui monitor, păstrându -și proporțiile stabilite,
indiferent de afișaj și asigurând astfel adaptabilitatea aplicației. Această caracteristică a
adaptabilității este una foarte importantă, în contextual în care, telefoanele inteligente,
tabletele și padfon -urile se bucură de o utilizare tot mai intensă din partea utilizatorilor
vizați de această aplicație.
Design -ul respons ive a fost realizat folosind atâ t elemente de CSS, cât ș i cu
ajutorul framework -ului de Javascript, Bootstrap, care este o colecție gratuită de unelte
pentru dezvoltarea de site -uri și aplicaț ii web . Acesta conține template -uri HTML5 ș i
CSS3 pentru tabele, butoane, navigație ș i alte componente ce pot fi utilizate la realizarea
interfaței cu utilizatorul,continând totodata și o libră rie Javascript .
Pentru a putea folosi elementele framework -ului Bootstrap,a fost necesară
adăugare a în cadrul elementului HTML head , a mai multor fișiere atât de tip .css, cât și
fișiere Javascript, care în prealabil au fost descărcate de pe pagina [18]. Acestea au fost,
de asemenea, introduse în soluție, în dosarul numit Bootstrap și sunt următoarele:

<script src="Bootstrap/JS/bootstrap.js" ></script>
<script src="Bootstrap/JS/bootstrap.min.js" ></script>
<script src="Bootstrap/JS/npm.js" ></script>
<link href="Bootstrap/CSS/bootstrap -theme.css" rel="stylesheet" />
<link href="Bootstra p/CSS/bootstrap -theme.min.css" rel="stylesheet" />
<link href="Bootstrap/CSS/bootstrap.css" rel="stylesheet" />
<link href="Bootstrap/CSS/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/ResourcesEN.js" ></script>
<script src="Scripts/ResourcesRO.js" ></script>

Beneficiile Bootstrap -ului sunt integrate în cadrul elementelor HTML cu ajutoul
atributului class , de regulă valoarea acestui atribut fiind alcătuită din mai multe clase, în
exemplul următor prezentându -se utilizarea clasel or de tip Bootstrap : ― linear ‖, ―img-
portofolio ‖ și ― img-responsive ‖ , acestea asigurând design -ul pentru butoanele de tip
imagine din Pagina de start, care vor fi prezentate mai pe larg în ultimul subcapitol al
acestui capitol.
Alte exemple de clase de Bo otstrap folosite în cadrul aplicației pentru a realiza un
design adaptiv sunt următoarele: „container_folio” „col -md-12”, „ folio -content” .
După cum este menționat mai sus, pe lângă utilizarea framework -ului Bootstrap,
pentru realizarea aspectului adaptiv, s-au folosit și elemente de CSS. Astfel, peste 90%
din dimensiunile elementelor HTML, sau ale proprietăților nu sunt exprimate în pixeli ci
în unități de masură speciale și anume „vh‖ și „vw‖, acestea reprezentând procent din
dimensiunea totală a înălțimi i ecranului, vh -ul, respectiv procent din dimensiunea totală a
lățimii ecranului, vw -ul.

#videoPlayer {
margin-top:3vh;
margin-left:32vw;
margin-right:32vw;
margin-bottom:7vh;
}

Capitolul 5 – IMPLEMENTARE
46
Pentru a exemplifica această proprietate de adaptabilitate a platformei, vom
prezenta în figurile următoare aspectul aplicației la dimensiunile unui monit or obișnuit,
cât și aspectul aplicației la dimensiunile unui telefon inteligent și a unei tablete, prin
intermediul unui emulator.

Figura 5.18 Design a daptat pentru iPad Figura 5.19 Design adaptat pentru
iPhone 6

Figura 5.20 Design adaptat unui ecran normal

5.7.4 Evenimente pe acț iunile de planare
Pentru a oferi aplicației un design modern, s -au realizat aș a-numitele even imente
pe acțiunile de planare, care, pe lângă acest rol, de a da platformei un aer moder n, are

Capitolul 5 – IMPLEMENTARE
47
rolul de a scoate în evidență elementele căreia îi sunt aplicate. Pentru a putea fi rea lizate,
sunt folosite fiș iere de tip Javascript, utilizând librăria jQuery, unde se creează o funcție
specială pe ntru acestea, utilizâ nd evenim entele de mouse (mouse events) mouseover și
mouseout .
După cum sugerează și numele acestora, î n evenimentul de mo useover s -au setat
constrâ ngerile ce se vor reflecta asupra elementelor HTML dorite în momentul î n care,
cursoru l mouse -ului este deasupra elementelor HTML specificate :

$("#menuButton1" ).mouseover (function () {
$("#menuButton1" ).css("background -color", "#860101" );
})

În concordanță cu evenimentul de mouseover , în even imentul de mouseout, s -au
setat constrâ ngerile ce se vor reflecta asupra elementelor HTML dorite în momentul î n
care, cursorul mouse -ului este î n afara elementelor HTML specificate :

$("#menuButton1" ).mouseout (function () {
$("#menuButton1" ).css("background -color", "#DE0000 ");
})

5.7.5 Home Page
Această Pagină este pagina de început a aplicaț iei, de unde utilizat orul are acces la
absolut toate funcționalităț ile platformei. Aceasta prezintă, pe langă scurta descriere a
aplicației și trei butoane de tip imagine, carora l i s-au asociat evenimente pe acțiunile de
planare, pen tru a ie și în evidență, dar și pentru a oferi platformei un design mod ern.
Aceste butoane realizează a ccesul spr e paginile de Contact,Despre și Multimedia, acestea
reprezentâ nd singura cale de acces spr e paginile respect ive, excluzând varianta
introducerii url -ului exact, însa aceasta nu reprezintă o soluție optimă . Modul î n care s -au
realizat aceste butoane este strâ ns legat de implementarea design -ului adaptiv, mai jos
fiind prezentat codul pentru unul dintre butoane, toate trei fiind similare :

<li class="box" data-id="id-1" data-type="ilustrator" >
<div class="folio-img build" >
<div class="portfolio -item ">
<div class="thumbnail" >
<div class="thumb-img">
<a href="img/portfolio/p01 -large.jpg" title="This Is Image Title" >
<img class="linear img -portfolio img -responsive"
src="Images/1872371.jpg" alt="This Is Image" >
</a>
<div class="folio-caption animated" >
</div></div></div></div>
</div>
</li>

Această pagină reprezintă punctul central al aplicaț iei, la care are acces orice tip
de utilizator, indiferent dacă este p rofesor, student s au orice alt user care accesează
platforma de e -learning și este prezentă ȋn figura ce urmează:

Capitolul 5 – IMPLEMENTARE
48

Figura 5.21 Home Page

Capitolul 6 – VALIDARE SI TESTARE
49
Capitolul 6 VALIDARE ȘI TESTARE
Testare a aplicației s -a realizat atât prin testare manuală, cât și prin testare
automată, folosindu -se tehnologia Selenium IDE. Pentru a oferi o calitate sporită a
aplicației, testarea a fost necesară încă de la începutul proiectului, din faza de stabilire a
cerințelor pe care aplicația trebuie să le îndeplinească, astfel putându -se începe la crearea
așa-numitelor Cazuri de testare (eng. Test Cases).

6.1 Testare a manual ă
Testarea manuală începută încă din cadrul stabilirii specificațiilor tehnice, etapă
foarte importantă în alcătuirea proiectului. În testarea specificațiilor, s -a verificat
posibilitatea realizării criteriilor de acceptanță, având în vedere resursele existente,
acestea contribuind în procesul de proiectare a aplicației și având impact major în ca drul
implementării.
Cu fiecare pas care s -a realizat în cadrul dezvoltării aplicației a fost nevoie de
testare, mai întai realizându -se testarea pe componente, după care urmând testarea
integrărilor dintre acestea (eng. Integration testing). În momentul î n care o funcționalitate
importantă a fost realizată din punctul de vedere al dezvoltării, aceasta a fost testată ca un
modul independent, urmând ca mai apoi, dupa ce și alte funcționalități au fost dezvoltate,
să se realizeze din nou o testare de integrar e, de data aceasta la un nivel superior. La
finalul dezvoltării, s -a realizat testarea ―End -To-End‖, care este defapt simularea utilizării
aplicației de către un utilizator final, aici testându -se atât scenarii pozitive cât și scenarii
negative, încercând să se acopere cât mai multe cazuri, însă, d upa cum se afirmă în cele 7
principii ale testării [12], testarea exhaustivă nu este posibilă.
Cazurile de testare au fost organizate în trei Cicluri de teste (eng. Test Cycles),
fiecare având rolul ei bine -defin it. Aceste suite sunt ierarhizate în funcție de nivelul
implicării testării și sunt următoarele:
 Smoke Test Cycle, care conține teste ce se efectuează pentru a verifica
doar principalele caraceristici ale unei aplicații sau ale unei funcționalități
și pent ru a se asigura că trecerea la dezvoltarea ulterioară a acestora nu va
avea parte de impedimente ;
 Sanity Test Cycle, conține, pe langă testele care verifică funcționalitățile
majore și teste care pătrund mai adânc în funcționalitățile respective,
aceasta având proprietatea de a fi ―îngustă și adâncă‖ ;
 Regression Test Cycle, aceasta conținând toate testele care vor fi efectuate
asupra aplicației.
Procedeul de testare în momentul găsirii unei probleme în cadrul dezvoltării
aplicației este că dupa ce ―bug‖ -ul a fost reparat, se efectuează Confirmation Testing ,
unde se verifică exact problema care a fost raportată, iar dacă defectul într -adevăr a fost
reparat, se trece la așa numitul Regression Testing pe zone , aceasta însemnând rularea
tuturor testelor care se găsesc în ciclul de Regression Testing și se referă la zone care ar
putea fi afectate de fixarea defectului inițial.
Un caz de testare este o succesiune de paș i pe care persoana care este responsabilă
cu testarea îi rulează pentru a vedea dacă funcțion alitatea testată a unui produs este

Capitolul 6 – VALIDARE SI TESTARE
50
implementat ă corect . Cazurile de testare trebuie să fie alcătuite din următoarele
componente:
 Titlu l, care trebuie să fie o descriere succintă a cazului de testare ;
 Precondiț ii, acestea fiind o componentă opțională . Sunt necesare atunci
când, funcționalitatea ce urmează a fi testată are depen dințe ;
 Pași de urmat, aceștia trebuie precizați, pentru ca persoana care testează să
știe exact ce trebuie să facă ;
 Rezultatul așteptat, este finalitatea la care ar trebui să condu că testul, în
cazul în care funcționalitatea testată este bine implementată. Este de
preferat ca fiecare dintre pașii ce trebuie urmați să conțină un astfel de
rezultat așteptat, pentru a se putea observa mai usor unde apare eroarea în
cazul în care funcți onalitatea testată nu funcționează întocmai cum se
așteaptă ;
 Nota, unde se pot trece informații suplimentare cu legătură la cazul de
testare ce urmează să fie executat ;
 Status – acesta va indica starea în care cazul de testare se găsește pentru o
anumită funcționalitate, acesta putând lua valorile de Unexecuted, In
progress, Pass , Failed sau Blocked ;
 Prioritate – aceasta se setează în funcție prioritatea pe care o are
funcționalitatea testată în cadrul proiectului ;
 Atașamente – sunt opționale, dar foar te utile în unele cazuri
În continuare, vor fi prezentate câteva dintre cazurile de testare folosite pentru
testarea întregii aplicații:

Tabelul 6.1 Cazul de testare – Descrierea platformei este afisată
Caz de testare Status:

PASS Titlu: [HomePage][U I] Descrierea platformei este afisat ă
Precondiții: Utilizatorul este pe pagi na de start și are selectată varianta de afișare în
limba româ nă
Pasi de urmat: 1.Inspec tați visual pagina
Rezultatul
așteptat: În pagină este un paragraph care conț ine textu l: „Bine aț i venit pe site –
ul disciplinelor: Sisteme de fabricaț ie integrate & Conducerea numerică
a mașinilor unelte. Aici veți găsi informații despre activitatea didactică
desfăsurată la cele două discipline.‖
Notă: –
Atașamente : –
Prioritate: Scăzută
În acest caz de testare este verificată o componentă a interfeței grafice, lucru care
se regăsește înca din titlu. În urma rulării acestui test, statusul cazului de testare este
PASS, deoarece rezultatul obținut este același cu cel așteptat.
Tabelu l 6. 2 Cazul de testare – Adaugarea unei postari in cadrul Forum -ului

Caz de testare
Status:

PASS Titlu: [HomePage][F] Adaugarea unei postari in cadrul Forum -ului
Precondiții: Utilizatorul este logat, cu cont de administrator si se gaseste pe
una din tre paginile platformei

Capitolul 6 – VALIDARE SI TESTARE
51
Pasi de urmat: 1.Click pe butonul Forum.
2.Se introduce textul dorit in TextBox.
3.Click pe butonul Adaugare Postare .
4.Se inspecteaza visual pagina pentru a se verifica daca postarea
este afisata.
4. Se verifica daca postarea a fos adaugata in baza de date.
Rezultatul
așteptat: Postarea este afisata in cadrul paginii de Postari, iar textul postarii
se regaseste in baza de date.
Notă: Textul postarii adaugate trebuie sa se gaseasca in tabela
dbo.Postari a bazei de date DB.ELea rning.
Atașamente : –
Prioritate: Ridicat ă
Acest Test Case verifica adaugarea unei postari de catre administratorul
platformei, atat in interfata grafica a paginii de Postari din cadrul Forum -ului, cat si
salvarea in baza de data a textului postarii, intr-o inregistrare noua in tabela dbo.Postari.

Tabelul 6.3 Cazul de testare – Live Streaming functioneaza
Caz de testare Status:

PASS Titlu : [LiveStreaming Page ][INT]Live Streaming functioneaza corect
Precondiții: Camera de filmat care transmite evenimentele didactice este pornita,
iar utilizatorul are drepturi pentru vizualizarea paginii de Live
Streaming
Pasi de urmat : 1.Se acceseaza platforma didactica (Pagina de start ar trebui sa fie
incarcata)
2.Click pe butonul Live Streaming
Rezultatu l
așteptat: Utilizatorul este redirectat spre pagina de Live Streaming, iar
transmisiunea in direct a activitatii didactice incepe sa ruleze
Notă: –
Atașamente : –
Prioritate: Ridicata
Acest caz de testare urmareste integrarea in cadrul platformei a Twitch API -ului,
prin verificarea bunei derulari a transmisie live. Prioritatea este una ridicata, deoarece
functionalitatea de Live Streaming este una foarte importanta.

Tabel ul 6.4 Cazul de testare – Vizualizare a rapoarte lor de laborator pentru o echipa
Caz de testare Status:

PASS Titlu : [HomePage][ F] Vizualizare rapoarte laborator pentru a anumita
echipa
Precondiții: Utilizatorul este logat, cu cont de administrator si se gaseste pe una
dintre paginile platformei
Pasi de urmat : 1.Click pe bu tonul Rapoarte
2.Click pe link -ul de Laborator
3.Se selecteaza disciplina
4.Se seleceaza grupa
5.Se selecteaza echipa
Rezultatul așteptat: Rapoartele pentru echipa selectata sunt afisate pentru toate
saptamanile semestrului

Capitolul 6 – VALIDARE SI TESTARE
52
Notă: –
Atașamente : –
Aici este testată o mica parte din functionalitatea rapoartelor, care verifica toate
notele obtinute la laborator de catre o echipa selectata, de -a lungul unui semestru.

Tabelul 6.5 Cazul de testare – Logarea cu credentiale corecte
Caz de testare Status:

PASS Titlu : [HomePage][S] Logarea cu credentiale corecte
Precondiții: –
Pasi de urmat : 1.Se acceseaza platforma didactica (Pagina de start ar trebui sa fie
incarcata)
2.Click pe link -ul de LOGIN
3.Se completeaza campul de username cu un cont exist ent
4.Se completeaza campul password cu parola valida a contului introdus
in pasul anterior
5.Click pe LogIn Button
Rezultatul
așteptat: Logarea este reusita si utilizatorul este redirectat spre pagina de start
Notă: –
Atașamente : –
Prioritate: Ridicata

Tabelul 6.6 Cazul de testare – Logarea cu credentiale gresite
Caz de testare Status:

PASS Titlu : [HomePage][S] Logarea cu credentiale gresite
Precondiții: –
Pasi de urmat : 1.Se acceseaza platforma didactica (Pagina de start ar trebui sa fie
incarcata).
2.Click pe link -ul de LOGIN.
3.Se completeaza campul de username cu un cont inexistent.
4.Se completeaza campul password cu orice parola.
5.Click pe LogIn Button.
Rezultatul
așteptat: Logarea nu reuseste, un mesaj de eroare este afis at, care anunta
utilizatorul ca username -ul sau parola sunt gresite
Notă: –
Atașamente : –
Prioritate: Ridicata
In tabelele 6.5 respectiv 6.6 sunt prezentate doua cazuri din cadrul testarii
mecanismului de LogIn, unul in care logarea reuseste, de oarece se folosesc credentiale
corecte, iar cel de -al doilea, in care logarea esueaza si un mesaj de eroare apare, deoarece
credentialele sunt gresite.

Tabelul 6.7 Cazul de testare – Acces restrictionat pentru pagina de Materiale
Status:

PASS Titlu : [HomePage][S] Acces restric ționat pentru pagina de materiale
Precondiții: Utilizatorul nu este logat și se gase ște pe pagina de start
Pasi de urmat : 1.Click pe butonul Materiale .

Capitolul 6 – VALIDARE SI TESTARE
53
Rezultatul
așteptat: Utilizatorul este redirectat spre pagina de eroare, unde un mesaj il
informeaza ca trebuie sa fie logat pentru a avea acces la pagina
respectiva
Notă: –
Atașamente : –
Prioritate: Ridicata
Titlu : [HomePage][S] Cautarea dupa un cuvand cheie
Ȋn acest caz de testare, se verific ă implementarea dreptur ilor ȋn funcț ie de
utilizator, d eoarece la aceasta pagină au acces do ar utilizatorii care beneficiază de un
cont, fie cont de student, fie cont de administrator.

Tabelul 6.8 Cazul de testare – Cautarea dupa un cuvand cheie
Caz de testare Status:

PASS Titlu : [HomePage][S] Cautarea dupa un cuvand cheie
Precondiții: –
Pasi de urmat : 1.Se introduce un parametru in bara de cautare.
2.Click pe butonul de cautare.
Rezultatul
așteptat: Utilizatorul este redirectat spre pagina de rezultate, unde in fun ctie de
parametrul introdus vor fi afisate rezultatele.
Notă: In cazul in care nu se gaseste nici un rezultat, un mesaj corespunzator este
afisat.
Atașamente : –
Prioritate: Ridicata
Acest caz de testare verific ă funcționalitatea barei de că utare din cadrul
platformei, unde ȋ n funcție de parametrul introdus, se vor afișa rezultatele ȋ ntr-o pagina
de rezultate.
Cazurile de testare prezentate mai sus fac parte din suita de cazuri de testare care
au fost rulate ȋ n vederea testării aplicaț iei. De aseme nea, in cadrul testă rii manual e s-a
folosit Exploratory Testing -ul, care se refera la căutarea defectelor fără a avea un traseu
fix de urmat, adică fără un caz de testare bine stabilit, aici foarte importantă fiind atenția
la detalii și cunoaș terea produsu lui. Aceas ta metodă de testare e ste foarte eficientă, ȋn
special ȋn cazul detectării defectelor interfeț ei grafice.

6.2 Testare a automat ă

Pentru realizarea testării automate, s -a folosit Selenium IDE, care este un plug -in
al browser -ului Mozilla Firefox, cu ajutorul căruia s -a reușit automatizar ea mai multor
cazuri de testare, acesta fiind prezentat in figura 6.1.

Testarea automată s -a ȋmbinat cu cea manual ă astfel ȋ ncat să se ajungă la cele mai
bune rezultate, având in vedere raportul dintre timpul cons umat pentru au tomatizarea
testelor si eficienț a adusa prin acestea, astfel nu orice caz de testare meritând efortul de a
fi automatizat, ȋn cazul ȋn care se obțineau rezultate la fel de bune prin testare manual ă.
Aceasta analiza care s -a realizat pentru st abilirea testelor care au urmat sa fie
automatizate, joaca un rol extreme de important in procesul de testare al aplicatiei.
Mecanismul care sta la baza acestui instrument de testare este cel de “record and
play” , astfel putându -se ȋnregistra anumite actiu ni petrecute in aplicația Web, dupa care,

Capitolul 6 – VALIDARE SI TESTARE
54
acestea sunt editate, astfel ȋncât să se ajungă la crearea testului dorit. Inregistrarea se face
cu ajutorul butonului prezentat in imaginea de mai jos:

Figara 6.2 Butonul de ȋnregistrare din cadrul Selenium IDE
La finalizarea ȋnregistrărilor acțiunilor, se va acționa acelasi buton pentru oprirea
ȋnregistrării, după care aceasta se poate relua. La orice pas al testului, se poate adăuga o
alta comanda, aceasta fiind independentă de ȋnregistrare, aceasta putându -se realiza prin
selectia unei comenzi din drop -down list -ul aferent etichetei Command.
Dupa selectarea comenzii, se selecteaza ținta, iar aceasta se realizeaza apăsând
butonul Select și alegând pe urmaelementul dorit din pagina. Ȋn figura de mai jos este
prezentata alegerea Heading -ului paginii pentru a fii siguri ca am ajuns pe pagina dorita.

Figura 6.3 Selectia elementelor din pagina HTML
Dupa selectarea elementului țintă, se va completa valoarea care va intra in
comparatie cu valoarea elementului respecti v, aceasta depinzând foare mult de comanda
care a fost selectată. Ȋn cazul testului prezentat in imaginea anterioară, in care se verifica
funcționalitatea butonului Forum , unde comanda selectată a fost AssertText, care va
returna textul elementului selecta t, astfel asigurându -ne că, ȋn cazul ȋn care textul returnat
pentru Heading -ul selectat este ―FORUM‖, valoare ce a fost completata in cutia de text
aferenta etichetei Value , intr-adevăr butonul Forum a executat o redirectare spre Pagina
de Forum.
Odată fii nd definiți pa șii pentru un anumit test case, acesta se salveaza, pentru a
putea fi rulat. Salvarea se realizează din Meniul Fisier  Save Test Case . Dupa salvarea
testului, se trece la executarea lui, aceasta putandu -se realize pas cu pas, sau continuu, de
asemenea viteza de rulare a testelor putând fi setata, lucruri prezentate in figura 6.4

Capitolul 6 – VALIDARE SI TESTARE
55

Figura 6.4 Elemente pentru rularea testelor și fixarea vitezei de execuție
Dupa r ularea testelor,vom avea un rezultat ala acestora, plasandu -le astfel in
grupul Runs sau Failures al testelor. Dupa cum se poate observa in figura de mai jos,
testul care verifica functionalitatea butonului Forum se regaseste printre testele care au
trecut cu succees, adică in Runs .

Figura 6.5 Statusul testelor rulate

Capitolul 6 – VALIDARE SI TESTARE
56
Aceste teste rea lizate cu ajutorul plug -in-ului Selenium IDE pot fi exportate,
acestea putând fi salvate sub diferite formate, prezentate in figura 6.6.

Figura 6.6 Exportare Test Case -uri

Ȋn urma testării acestui proiect, s -a asigurat o bună funcționare a acestuia și s -a
asigurat faptul că funcționalitățile corespund din punct de vedere tehnic cu specificațiile
definite la ȋnceput. Atât testarea manual cât sic ea automată joacă un rol extreme de
important ȋn ȋntregul process de dezvoltarea al unei aplicații software.

Capitolul 7 – CONCLUZII
57
Capitolul 7 CONCLUZII
7.1 Concluzii
Scopul inițial, de ȋnlocuire a vechiului site didactic al dis ciplinelor : Sisteme de
fabricaț ie integrate , respectiv Conducerea numerică a mașinilor uneltă si anume
http://rrg.u tcluj.ro/~sorin/ a fost atins, noua platformă didactică fiind mai mult decât un
simplu ȋnlocuitor, deoarece aduce odată cu ea o serie de ȋmbunătă tiri considerabile, dintre
care, cele prezentate ȋn lucrarea de față sunt:
 Implementarea unui forum;
 Implement area unui mecanism de căutare in interiorul platformei;
 Realizarea funcționalității de Live Streaming prin integrarea Twitch API –
ului ;
 Realizarea prezentării aplicației in limba română / engleză ;
 Realizarea unui design adaptiv;
 Realizarea unei interfețe user-friendly;
 Implementarea unei galerii foto;
 Implementarea unei galerii video;
Realizarea acestor caracteristici ale platformei a fost posibilă cu ajutorul mai
multor tehnologii și anume: ASP.NET, limbajul de programare C#, mediul de programare
Visual S tudio, SQL Server 2012 Management Studio, limbajul Javascript, limbajul CSS,
framework -ul Bootstrap , tehnologii care sunt des intalnite in edzvoltarea aplicațiilor Web.
Ȋn urma dezvoltării acestor caracteristici, a fost nevoie de tastarea acestora, incă di n
prinmele faze ale dezvoltării lor, in acest scop realizându -se atât testare manuala, pe baza
cazurilor de testare, cât si testare automată, cu ajutorul tool -ului Selenium IDE.
Depășind statutul unei simplu si te didactic, aplicația ajută atâ t cadrul dida ctic, cât
și studenții ȋn ȋntreaga activitate didactică a disciplinelor cărora le este adresată, aceasta
putând fi extinsă la un număr mai mare de discipline, ȋn funcție de necesitatea cadrului
didactic cu rol de administrator.
Aducând toate aceste caracte ristici prezentate ȋn lucrarea curenta , cât si cele
realizate ȋ n lucrarea [1], deoarece acest proiect a fost unul de grup, se poate afirma ca
această platformă didactică se numără printre platformele didactice de top din România
care au ca scop ȋmbunătățir ea procesului didactic din ȋnvățământul superior la zi.

7.2 Dezvoltări ulterioare
O versiun e următoare a acestei aplicații ar putea sa aducă unele ȋmbunătățiri din
punct de vedere al adăugarii unor noi caracteristici, cum ar fi realizarea unui chat, in c are
studenții ar putea sa comunice ȋn scris ȋn timp real cu cadrul didactic, ȋn vederea primirii
unor informații urgent, de care ace tia ar putea avea nevoie.
De asemenea, o altă ȋmbunătătire care ar putea fi adusă , se referă la dezvoltarea
unui mecanism p ropriu pentru funcționalitatea de Live Streaming, aici fiind totodată
nevoie și de echipamente hardware superioare celor disponibile ȋn acest moment,
deoarece trebuie s atisfăcute cerințele la nivel de servere pentru conexiunile ce trebuie
făcute pentru rea lizarea acestui mecanism de Live Streaming.

Capitolul 7 – CONCLUZII
58
Ȋn concluzie, aceasta platformă de tip e -learning va oferi un plu s de calitate
procesului educați onal al ȋnvățămâ ntului superior din cadrul Facultății de Automatică și
Calculatoare a Universitătii Tehnice din Cl uj-Napoca , la disciplinele Sisteme de
fabricaț ie integrate și Conducerea numerică a mașinilor uneltă, prin funcționalitățile
dezvoltate in versiunea curentă, cât și cu cele ce urmează a fi implem entate in versiunile
următoar e.
Aceasta platformă reprezintă si obiectul de studiu al articolului intitulat ,,New e –
learning platform‖, realizat de către autorii Pușcaș Dorin – Cristian și Pușcaș Adrian –
Cosmin, coordonați de către Sl.dr.ing. Sorin Herle, din cadrul conferinței ACSC 2015.

Bibliografie
59
Bibliografie
[1] Adrian – Cosmin Pușcaș , „Proiectarea și implementarea unei platforme e –
learning: arhitectura multi -nivel și funcționalități de bază”, 2015
[2] Christian Nagel, Jay Glinn, Morgan Skinner , „Professional C# 5.0 and
.NET 4.5.1”, Editura John Wiley & Sons Inc, 2014
[3] David Flanagan , „Javascript : The Definitive Guide 6th Edition” , Editura
O’Reilly Media Inc., 2011
[4] Diane Elkins , Desiree Pinder , „E-Learning Fundamentals” , ATD Press ,
iunie 2015
[5] Jon Ducket , „HTML & CSS Design and Build Websites ‖, John Wiley & Sons,
Inc., 2011
[6] Kalen Delaney, Bob Beauchemin, Conor Cunningham, Jonathan
Kehayias, Benjamin Nevarez, Paul S. Randal , „Microsoft SQL Server 2012
Internals” , Editura O’Reilly Media, Inc., 2013
[7] Lucian Sasu , „Limbajul C#”, 2005
[8] Maria Gog a, „Definirea profilului psiho -pedagogic al tutorului în E -learning
”, 2009
[9] Mike Snell , Lars Powers , „Microsoft Visual Syudio 2012 Unleashed (2nd
edition) ”,Pearson Education Inc, 2012
[10] Svetlin Nakov, Veselin Kolev & co. , „Fundamentals of compute r
programming with C# (The Bulgarian C# programming book)” , Editura Svetlin
Nakoc&Co., 2013
[11] Avantajele folosirii SQL Server,
http://www.csvision.ro/ro/servicii/t ehnologii/sql_server_2005_or_2008/66/
[12] Principiile testării, http://istqbexamcertification.com/what -are-the-principles –
of-testing/
[13] Introducere in Visual Stud io, https://msdn.microsoft.com/en –
us/library/fx6bk1f4(v=vs.90).aspx
[14] Avantajele JavaScript, http://www.rapidprogramming.com/questions –
answers/What -are-the-advantages -of-JavaScript –567
[15] Introducere in CSS, www.w3.org/Style/CSS
[16] Avantaje CSS,
http://www.wdtonline.com/wdtMagazine/MemberWorks/WiserWays/csshtml.htm
[17] Platforma Twitch, http://www.twitch.tv/
[18] Bootstrap Framework, http://getbootstrap.com/getting -started/#download

Anexa 1
60