Licenta Filip Titus Ver04 [607117]

UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI
TEHNOLOGIA INFORMAȚIEI
PROGRAMUL DE STUDIU TEHNOLOGIA INFORMAȚIEI
FORMA DE ÎNVĂȚĂMÂNT ZI

Proiect de diplomă

COORDONATOR ȘTIINȚIFIC
PROFESOR DOCTOR INGINER ZMARANDA DOINA

ABSOLVENT: [anonimizat] 2017

UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI
TEHNOLOGIA INFORMAȚIEI
PROGRAMUL DE STUDIU TEHNOLOGIA INFORMAȚIEI
FORMA DE ÎNVĂȚĂMÂNT ZI

Aplicație web pentru vizionarea
de conținut media

COORDONATOR ȘTIINȚIFIC
PROFESOR DOCTOR INGINER ZMARANDA DOINA

ABSOLVENT: [anonimizat] 2017

Cuprins
I. Introducere ………………………….. ………………………….. ………………………….. …………………… 1
Capitolul II . Tehnologii utilizate în cadrul aplicației ………………………….. …………………………. 2
II.1. DotKernel 1.8 ………………………….. ………………………….. ………………………….. ………….. 2
II.2. PHP 7 ………………………….. ………………………….. ………………………….. ……………………. 5
II.3. HTML 5 ………………………….. ………………………….. ………………………….. ………………… 6
II.4. CSS3 ………………………….. ………………………….. ………………………….. ……………………… 7
II.5. Javascript ………………………….. ………………………….. ………………………….. ………………. 9
II.6. jQuery ………………………….. ………………………….. ………………………….. …………………. 10
II.7. JSON ………………………….. ………………………….. ………………………….. …………………… 10
II.8. Bootstrap 3 ………………………….. ………………………….. ………………………….. …………… 11
II.9. FontAwesome 4 ………………………….. ………………………….. ………………………….. ……… 11
II.10. M ySQL 10 ………………………….. ………………………….. ………………………….. ………….. 12
II.11. Apache HTTP server ………………………….. ………………………….. …………………………. 13
II.12. GetID3 ………………………….. ………………………….. ………………………….. ……………….. 13
Capitolul III. Aplicația VideoTube ………………………….. ………………………….. ………………….. 15
III.1.Arhitectura aplicației ………………………….. ………………………….. ………………………….. 15
III.2. Baza de date a aplicației VideoTube ………………………….. ………………………….. ……… 24
Capitolul IV. Funcționalitatea aplicației VideoTube ………………………….. ………………………… 27
IV.1 Funcționalitatea aplicației în partea de frontend ………………………….. ……………………. 27
IV.2 Funcționalitatea aplicației în partea de backend ………………………….. ……………………. 37
V. Concluzii ………………………….. ………………………….. ………………………….. ……………………. 42
Bibliografie ………………………….. ………………………….. ………………………….. …………………….. 44

1
I. Introducere

Proiectul de diplomǎ constă într -o aplicație web pentru vizionarea de conținut media
numită Video Tube, care permite încǎrcarea și vizualizarea de videoclipuri cu un conținut
variat, de exemplu: filme, muzică, jocuri video, etc. Pe lângă cele amintite aplic ația mai are
multe alte funcționalități, de exemplu crearea unui playlist sau exprimarea unei opinii asupra
unui videoclip prin adă ugarea unui comentariu și statistici privind utilizatorii și videoclipurile.
Aplicația poate fi utilizată și de copii sau orice persoană indiferent de vârstă, deoarece
conținutul videoclipurilor este verificat înainte să fie încărcat, deci aplicația VideoTube nu va
include conținut nerecomandat copiilor, rasist sau vulgar.
Principalul grup țintă a aplicației VideoTube sunt persoanele tinere, deoarece vedem
zilnic peste tot persoane cu smartphone -uri, tablete, majoritatea având acces la internet
indiferent de locația unde se află.
Aplicația web, VideoTube, va putea fi accesată prin intermediul unui browser, fiind
compatibilă cu majoritatea browsere -lor actuale, oferind astfel posibilitatea de a putea fi
folosită de pe mai multe dispozitive cum ar f i calculatorul personal, tableta , telefonul mobil.
Am ales să realizez această aplicatie, deoarece în zilelele noastre una dintre cele mai
populare forme de divertisment este vizionarea de videoclipuri despre filme, seriale, jocuri
video, muzică, emisiuni și multe altele.
Un alt motiv care a dus la crearea aplicației Videotube este acela că aplicațiile
asemănătoare cu cea creată, de exemplu YouTube sunt printre cele mai populare aplicații de
pe internet, chiar și eu accesând acest tip de aplicații zilnic.
Pentru implementarea aplicației s -au utilizat o serie tehnologii actuale, printre care
DotKernel 1.8, PHP 7, HTML5, CSS3, Bootstrap 3, Javascript, jQuery, JSON, MySQL 10,
Font Awesome 4.
Aplicația rezultatǎ este o platformǎ care oferǎ funcționalitǎți complete pentru încǎrcarea
și gestionarea de conținut media pentru diferite tipuri de utilizatori. Tipurile de utilizatori sunt
uilizatorul neînregistrat care are un acces limitat în partea de frontend a aplicației, utilizatorul
înregistrat care are acces la toate funcționalitățile din partea de frontend și administratorul care
are acces în partea de backend . Frontend -ul este interfața pentru utilizatori, iar backend -ul este
panoul de administrare.

2
Capitolul I I . Tehnologii utilizate în cadrul aplicației

Un web framework este o colectie de module care ajutǎ programatorul la dezvoltarea
de aplicații web, facilitând procesul de dezvoltare.
La ora actualǎ existǎ mai multe web framework -uri pentru dezvoltarea de aplicații web,
printre care :
❖ DotKernel
❖ Laravel
❖ Drupal
❖ Zend Framework
❖ FUSE
Fiecare web framework are avantajele sale. Framework -ul DotKernel 1.8 se remarc ǎ
însǎ prin faptul cǎ este gratuit, ușor de învǎțat, de utilizat și în același timp oferind facilitǎți
complexe de structurare și dezvoltare.
Alte tehnol ogii folosite în cadrul aplicației sunt PHP 7, HTML 5, CSS 3, Javascript,
jQuery, JSON, Bootstrap 3, FontAwesome 4, MySql 10, Apache HTTP server , getID3.
II.1. DotKernel 1.8
DotKernel este un web framework PHP realizat pe baza web framework -ului Zend
Framework de cǎtre programatorii din cadrul firmei DotBoost Technologies. [1] Framework –
ul DotKernel are la bazǎ arhitectura HMVC pentru a fi ușor de învǎțat de cǎtre programatorii
începǎtori. HMCV este acronimul pentru Hierarchical Model –View –Controller și este o
evoluție a modelului Model -View -Controller . [1]
Arhitectura MVC este un concept folosit la aplicațiile software și ajutǎ la separarea
codului pentru interfața graficǎ a aplicației de funcționalitatea aplicației. Arhitectura MVC
ușureaz ǎ munca programatorului, deoarece ajutǎ la întreținerea aplicației și oferă o structură
modernă pentru codul aplicației, fiind ușor de modificat fǎrǎ a strica alte funcționalitǎți ale
aplicației.

3
Pentru definirea arhitecturii DotKernel, se folosesc termeni i de module și dots, dupǎ
cum se poate vedea în figura nr. II.1.

Figura II.1. Schema structurii HMVC din DotKernel [2]
Modulul ( module ) este primul nivel ierarhic al unei aplicații web. Fiecare modul este
compus din mai multe puncte ( dots). Fiecare modul are un singur controller .
Front Controller – IndexController se ocupă de toate cererile pentru modulul selectat,
care determină ce se întâmp lă în continuare , ce puncte ( dots) ar trebui să fie numite.
Un punct ( dot) este format din fișiere MVC și fișierul de configurare xml, iar Front
Controller -ul direcționează cerererile ( request -urile) către Action Controller .
Action Controller este inima MVC -ului. Acesta controlează fluxul, solicită modelul
(Model ) și partea de vizualizare ( View) facilitează comunicarea între ele. [2]
În interiorul modelului, avem toate metodele ce prelucreaza datele din baza de date :
❖ Metode pentru op erațiile CRUD (Create – adaugă, Read – selectează, Update –
actualizează, Delete – șterge)
❖ Metode de manipulare a datelor care urmează a fi inserate sau șterse din baza
de date
DOTS 1
INDEX
CONTROLLER

MODULE
DOTS X
ACTION
CONTROLLER
MODEL
VIEW
INDEX
CONTROLLER

DOTS N

4
Partea de vizualizare ( View ) este responsabil ă de interfața grafică (GUI) a aplicației.
View se foloseșește de mai multe tipuri de fișiere cum ar fi cele de tip PHP și JavaScript. Fiecare
modul dispune de câte o vizualizare ( View ). [3]
DotKernel utilizează Zend Framework ca o componentă de bibliotecă, accesând
direct clasele sale. A fost eliminată complexitatea framework -ului Zend Framework utilizând
o abordare diferită a modului în care sunt gestionate cererile web. [1]
Framework -ul DotKernel conține urmǎtoarele module : frontend , backend , mobil,
CLI (linie de comandă), module RSS (Rich Site Summary ), fiecare fiind structurat pe modelul
Model -View -Controller .
Pentru a folosi framework -ul DotKernel, programatorul are nevoie de urmǎtoarele
instrumente :
❖ Apache HTTP server
❖ MySql, începând cu versiunea 5.5
❖ PHP, începând cu versiunea 5.4
❖ Zend Framework, începând cu versiunea 1.11.0 [4]
Structura framework -ului DotKernel :
❖ configs – toate variabilele pentru configurare se află aici
❖ controllers – așa cum sugerează și numele folderului, aici se află toate
controller -e
❖ DotKernel – fișierele pentru Model și View se află aici,
❖ externals – poate să conțină și alte API -uri (Application programming interface )
sau librării
❖ images
❖ library – conține librăriile DotKernel
❖ templates – conține fișiere care relaționează cu View (de tip HTML, CSS)
Pe lângă aceste foldere mai există și fișiere specifice ce stochează informații :
❖ application.ini – se stochează variabile și valori importante pentru configurare
cum ar fi: starea aplicației ( production , staging sau development ), URL -ul
aplicației, conexiu nea la baza de date (utilizatori și parole)

5
❖ resource.xml – include setările modulului cum ar fi cele legate de controller ,
acțiunea implicită a controller -ului, valori din sesiune
❖ browser.xml – fișier folosit pentru a detecta de pe care browser a fost accesată
aplicația
❖ os.xml – fișier folosit pentru a ști ce sistem de operare rulează pe calculatorul
de pe care a fost accesată aplicația
❖ admin/menu.xml – include setări pentru meniu pentru fiecare modul (în acest
caz pentru modulul admin)
❖ dotkernel.sql – structura bazei de date și datele din ea
❖ index.php – bootstrap -ul aplicației
Zend Framework este un cadru de aplicații web orientat pe obiecte open source
implementat în PHP. Scopul Zend Framework -ului este de a simplifica dezvoltarea web,
menținând în același timp cele mai bune practici orientate pe obiecte pentru a construi aplicații
web.
II.2. PHP 7
PHP este acronimul de la PHP: Hypertext Preprocessor . PHP este un limbaj de
scripting având un cod sursă de tipul, și care este utilizat în special pentru dezvoltarea
aplicațiilor web și poate fi integrat în HTML.
Codul PHP este executat pe server, care va genera HTML și apoi este trimis către client.
Clientul primește rezultatele rulării acelui script fără să necesite cunoașterea codului sursă. [5]
PHP se remarcă prin simplitate fiind accesibil pentru un începător, dar are și
funcționalități foarte complexe pentru un programator experimentat.
Limbajul PHP este axat în principal pe scriptin g de partea server -ului, deci se poate
realiza cu el mai multe lucruri, cum ar fi adunarea datelor din formulare, trimiterea și primirea
de cookies (mesaje primite de browser) , dar și generarea conținutului dinamic al paginilor. [5]
Domeniile principale în care scripturile PHP sunt utilizate:
❖ Scripting de partea serverului este cel mai tradiți onal și de baza domeniu al PHP

6
❖ Scripting în linia de comandă se face prin realizarea unui script PHP să ruleze
fără un server și navigator web, fiind nevoie doar de un analizator PHP pentru
a îl folosi în acest mod. Script -urile pot fi utilizate și pentru lucrări simple de
procesare a textelor.[5]
PHP este compatibil cu toate sistemele de operare Linux, M icrosoft Windows, Unix,
OpenBSD. [6]
Limbajul PHP susține cele mai multe servere web existente și anume Apache, IIS
(Internet Information Services ) și multe altele.
Cea mai importantă facilitate pe care o are PHP este susținerea unui larg domeniu de
baze de date. Realizarea unei pagini web, ce are nevoie de o bază de date, este simplu prin
utilizarea unei extensii de lucru cu baze de date cum ar fi MySQL sau folosind un nivel de
abstractizare și anume PDO.
PDO este un acronim pentru PHP Data Objects. PDO est e o metodă de accesare a
bazelor de date permițând programatoriilor să scrie mult mai ușor codul portabil.
II.3. HTML 5
Hyper Text Markup Language , mai cunoscut sub numele de HTML, este limbajul
standard folosit pentru construirea site -urilor web. Codul HTML instruiește browserele web
cum să facă conținut, a cesta explică structura de bază a unei pagini web.
HTML nu este din punct de vedere tehnic un limbaj de programare; Este un limbaj de
markup utilizat pentru a organiza date de pe internet. Documentele HTML sunt compuse din
elemente HTML reprezentate de etichete, care sunt scrise în paranteze unghiulare, pentru a
clasifica conținutul. [7]
Fiecare nouă versiune a HTML -ului s -a concentrat pe îmbunătățirea accesibilității
internet -ului pentru toată lumea. De exemplu, pe lângă introducerea de noi opțiuni pentru
crearea de șabloane, HTML4 a îmbunătățit accesibilitatea web -ului. [7]

7
HTML5 a fost implementat pentru a oferi o experiență mai bună și mai consistentă
pentru utilizatorii și dezvoltatorii web.
Datorită HTML5, paginile web pot acum să stocheze date pe browser -ul utilizatorului,
ceea ce elimină necesitatea cookie -urilor HTTP ( Hyper Transfer Protocol ).
HTML5 a facilitat asigurarea coerenței în toate browserele . Din moment ce browserele
s-au bazat în mod tradițional pe diferite plugin -uri pentru a reda fișiere multimedia, suportul
nativ al video și audio permite dezvolt atorilor să evite problemele de compatibilitate. Atributele
noi permit, de asemenea, comenzi video, inclusiv op țiuni de redare, pauză și volum. [7]
Astfel, în varianta actualǎ, HTML5 include următoarele actualizări: [7]
❖ Elementele care au fost respinse, cum ar fi centrarea, fontul au fost abandonate
❖ Normele îmbunătățite de parsing permit un parsing mai flexibil și compatibili
❖ Elemente noi, inclusiv video, bară de navigație
❖ Noi atribute de intrare, inclusiv e -mail, adresă URL, date și ore
❖ Atribute noi, inclus iv charset , async și ping
❖ Noi interfețe API care oferă cache offline , suportare drag -and-drop și multe altele
❖ Suport pentru grafica vectorială fără ajutorul programelor precum Silverlight sau
Adobe Flash Player
❖ Suport pentru MathML pentru a permite o mai b ună afișare a notațiilor matematice
❖ JavaScript poate rula acum în fundal datorită API -ului JS web worker
❖ Atributele globale, cum ar fi tabindex , repeat și id pot fi aplicate pentru toate elementele
II.4. CSS3
CSS ( Cascading Style Sheets ) este un limbaj de design simplu destinat simplificării
procesului de prezentare a paginilor web. CSS se ocupă de aspectul unei pagini web. Folosind
CSS, se poate controla culoarea textului, stilul fonturilor, distanța dintre paragrafe, modul în
care sunt dimen sionate și dispuse coloanele, ce imagini de font sau culori sunt folosite,
modelele de aspect, variațiile de afișare pentru diferite dispozitive și dimensiunile ecranului
precum și o varietate de alte efecte. [8]

8
CSS este ușor de învățat și de înțeles, dar oferă un control puternic asupra prezentării
unui document HTML. Cel mai frecvent, CSS este combinat cu limbajele de marcare HTML
sau XHTML.
Avantajele limbajului CSS : [8]
❖ CSS economisește timp, deoarece se poate scrie un cod CSS o dată și apoi se
poate reutiliza în mai multe pagini HTML. Se poate defini un stil pentru fiecare
element HTML și se poate aplica la cât mai multe pagini web
❖ Paginile se încarcă mai repede dacă se utilizează CSS, deoarece nu este necesar
să se scrie tag-urile atributelor HTML de fiecare dată. Trebuie doar să se scrie
o regulă CSS a unei etichete și să se aplice la toate aparițiile acelei etichete, deci
mai puțin cod înseamnă perioade de descărcare mai scurte
❖ Întreținere ușoară, deoarece pentru a face o schimbare globală, se schim bă pur
și simplu stilul și toate elementele din toate paginile web vor fi actualizate
automat.
❖ Stilurile superioare, CSS având o gamă mult mai largă de atribute decât HTML
❖ Compatibilitatea cu mai multe dispozitive, CSS permite optimizarea
conținutului pent ru mai multe tipuri de dispozitive. Prin utilizarea aceluiași
document HTML, diferite versiuni ale unui site web pot fi prezentate pentru
dispozitive portabile, cum ar fi PDA -uri (personal digital assistant ) și telefoane
mobile
❖ Respectarea standardelor we b globale, deoarece atributele HTML sunt
depreciate și se recomandă utilizarea CSS. Deci, este o idee bună să se utilizeze
CSS în toate paginile HTML pentru a le face compatibile cu browserele viitoare
❖ Offline Browsing , CSS poate stoca aplicațiile web la n ivel local cu ajutorul unui
catcher offline. Folosind acest lucru, putem a vizualiza site -urile offline . Cache –
ul asigură o încărcare mai rapidă și o performanță globală mai bună a site -ului
CSS3 este o actualizare a CSS2 care menține compatibilitatea cu toate funcțiile din
versiunile mai vechi de CSS.
Codul CSS3 este conceput pentru a face paginile web să arate mai bine și să se încarce
mai repede, precum și pentru a reduce timpul de dezvoltare pentr u a construi paginile web.

9
CSS3 face ca designul web să se bazeze mai puțin pe fișierele de imagine pentru
elementele de design ale paginii și reduce cererile de transfer de fișiere și timpul de descărcare,
utilizând mai puține imagini.
CSS3 are o mulțime de caracteristici care nu sunt prezente în CSS pentru a îmbunătăți
aspectul elementelor dintr -o pagină web.
O funcționalitate adăugată în CSS3 este capacitatea de a împărți secțiunile de text în
mai multe coloane pentru a avea aspectul unui ziar.
II.5. Ja vascript
JavaScript este unul dintre cele mai importante limbaje dinamice ale web -ului până în
prezent.
Limbajul JavaScript este integrat în toate browserele web, facilitând implementarea de
către dezvoltatori și utilizatori.
JavaScript nu este folosit numai pentru web, deși este bazat în principal pe web, este
folosit și pentru widget -uri și aplicații desktop .[9]
Limbajul Javascript se folosește în paginile web pentru a realiza animații și
comportamente vizuale, oferind pagin ilor web un aspect mult mai frumos.
Exemple de funcționalități ce se pot realiza cu limbajul Javascript : [9]
❖ Deschiderea ferestrelor pop-up prin recunoașterea acțiunilor mouse -ului sau ale
tastaturii
❖ Validarea formularelor
❖ Modificarea prezenței CSS sau a imaginilor când mouse -ul se află peste o
secțiune a paginii
❖ Înregistrarea și trimiterea informațiilor despre obiceiurile de citire ale
utilizatorilor
În concluzie, Javascript este un limbaj extrem de influent în domeniul web, care a
schimbat modul în care experimentăm internetul. Este simplu de implementat și oferă o
experiență web mult mai dinamică.

10
II.6. jQuery
jQuery este un tip de bibliotecă Javascript menit să facă JavaScript mai accesibil și ușor
de utilizat. j Query simplifică sintaxa Javascript și r elativ oferă o mai bună interacțiune între
Javascript și alte limb aje de dezvoltare web. j Query permite crearea cu ușurință a animațiilor,
widget -urilor și segmentelor web dinamice (AJAX) în comparație cu utilizarea numai a
Javascript. j Query este, de asem enea, cea mai populară bibliotecă Javascript folosită astăzi,
utilizată de zeci de site -uri populare. [11]
jQuery este extrem de popular, deoarece permite realizarea unui set de funcții, simple
și complexe, utili zând cantitatea minimă de cod. j Query este d e obicei folosit pentru a
implementa orice caracteristică în modelul DOM (Document Object Model ) într-un mod mai
simplu și, de asemenea, pentru funcționalitatea AJAX. Chiar și funcțiile complexe aparente,
cum ar fi blocurile de text expandabile (care pot fi utilizate în FAQ -uri) pot fi obținute cu doa r
câteva linii de cod folosind j Query. O altă cara cteristică izbitoare a j Query este abilitatea de a
implementa funcționalitatea AJAX. [11]
II.7. JSON
JSON sau JavaScript Object Notation , este un format minimal, ușor de citit pentru
structurarea datelor. Este folosit în principal pentru a transmite date î ntre un server și o aplicație
web, ca o alternativă la XML.
JSON ne permite să depășim problema inter -domeniu deoarece putem folosi o metodă
numită JSONP care folosește o funcție de retur pentru a trimite datele JSON înapoi în domeniul
nostru. această capa bilitate f ace ca JSON să fie foarte util. [12]
JSON se folosește atunci când dorim ca la apăsarea unu i buton să se realizeze
modifică ri în pagina respectivă, dar fără a reîncărca din nou pagin a. De exemplu la apăsarea
butonului de aprecierea a unui videoclip să nu fie nevoie ca pagina respectivă să se reîncarce
ci să se vadă modificarea la apăsarea butonului.

11
II.8. Bootstrap 3
Bootstrap 3 este un framework gratuit pentru frontend pentru dezvolt area web mai
rapidă și mai ușoară [13].
Bootstrap 3 include șabloane de design HTML și CSS pentru tipografii, formulare,
butoane, tabele, navigare, caruseluri de imagine și multe alte plugin -uri JavaScript. De
asemenea Bootstrap oferă posibilitatea de a cr ea cu ușurință design -uri receptive și cu aspect
modern.
Bootstrap face dezvoltarea web -ului de tip frontend mai rapidă și mai ușoară. Poate fi
utilizat pentru realiza pagini responsive , adică să fie vizibile și după dispozitivele de toate
formele și proiecte de toate dimensiunile, folosind sistemul grilă pe care îl oferă Bootstrap 3
pentru organizarea spațiului dintr -un document.
Bootstrap este compatibil cu toate browserele moderne (Chrome, Firefox, Internet
Explorer, Safari și Opera). [13]
II.9. FontAwesome 4
Font Awesome 4 este o tehnologie folosită pentru adăugarea de iconițe vectoriale
scalabile care pot fi personalizate instantaneu. Se poate personal iza dimensiunea, cul oarea,
umbra și multe altele. [14]
Iconițele Font Awesome au fost folosite în cadrul aplicației VideoTube pe ntru
butoanele din meniu și bara de navigație pentru a oferi un aspect mai plăcut. Avantajul folosiri
tehnologiei Font Awesome este reducerea de spațiu de stocare, deoarece altfel pentru a
folosi iconițe era necesar utilizarea unor imagini care trebuiau stocate pe disc sau server
Font Awesome este complet gratuit pentru uz comercial ceea ce îl face accesibil pentru
orce persoană. [14]
Iconițele Font A wesome au un font minunat, format din vectori, ceea ce înseamnă că
au un aspect frumos și pe afișajele de înalta rezoluție.

12
II.10. MySQL 10
MySQL este cel mai popular sistem de gestionare a bazelor de date SQL Open Source,
este dezvoltat, distribuit și susținut de Oracle Corporation.
O bază de date este o colecție structurată de date. Poate fi orice, de la o listă simplă de
cumpărături până la o galeri e de videoclipuri sau cantitatea mare de informații dintr -o rețea
corporativă. Pentru a adăuga, a accesa și a procesa datele stocate într -o bază de date
computerizată, avem nevoie de un sistem de gestionare a bazelor de date, cum ar fi server -ul
MySQL. Deo arece calculatoarele sunt foarte bune la manipularea unor cantități mari de date,
sistemele de gestionare a bazelor de date joacă un rol central în calcul, ca utilități de sine
stătătoare sau ca părți ale altor aplicații.
Partea SQL a "MySQL" înseamnă Lang uage Structured Query . SQL este cel mai
comun limbaj standardizat folosit pentru a accesa bazele de date. În funcție de mediul de
programare, se poate intra direct în SQL, de exemplu, pentru a genera rapoarte, încorpora
instrucțiuni SQL în cod scrise într -un alt limbaj sau să se utilizeze un API specific limbajului
care ascunde sintaxa SQL. [15]
Bazele de date MySQL sunt relaționale. O bază de date relațională stochează datele în
tabele separate, în loc să pună toate datele într -un depozit mare. Structurile bazei de date sunt
organizate în fișiere fizice optimizate pentru viteză. Modelul logic, cu obiecte precum baze de
date, tabele, vizualizări, rânduri și coloane, oferă un mediu de programare flexibil. Se stabilește
reguli care reglementează relațiile dint re diferitele câmpuri de date, cum ar fi unu -la-unu, unul –
la-multe, unic, obligatoriu sau opțional și "indicii" între diferite tabele. Baza de date impune
aceste reguli, astfel încât, cu o bază de date bine concepută, o aplicație nu vede niciodată date
inconsistente, duplicate, depășite sau lipsite de date.
Software -ul MySQL este open source . Open source înseamnă că este posibil ca oricine
să utilizeze și să modifice software -ul. [15]
Serverul de baze de date MySQL este foarte rapid, fiabil, scalabil și ușor de utilizat.
Serverul MySQL poate rula confortabil pe un desktop sau laptop, alături de celelalte aplicații,
servere web și așa mai departe, necesitând o atenție redusă sau deloc.

13
Serverul MySQL a fost dezvoltat ini țial pentru a gestiona baze de date mari mult mai
repede decât soluțiile existente și a fost utilizat cu succes în medii de producție extrem de
exigente timp de mai mulți ani. Conectivitatea, viteza și securitatea acestuia fac serverul
MySQL foarte potrivi t pentr u accesarea bazelor de date pe i nternet. [15]. MySQL Server
funcționează în sisteme client / server.
Software -ul de baze de date MySQL este un sistem client / server care constă dintr -un
server SQL multi -threaded , care acceptă diferite backend -uri, mai multe programe și biblioteci
diferite, instrumente administrative și o gamă largă de interfețe de programare a aplicațiilor
(API). [15]
II.11. Apache HTTP server
Apache este cel mai utilizat software de server web. Dezvoltat și întreținut de Apache
Software Foundation, Apache este un software open source disponibil gratuit [16]. Acesta
poate fi foarte personalizat pentru a satisface nevoile multor medii diferite prin utilizarea
extensiilor și modulelor.
Un server web este software -ul care primește solic itarea de la un utilizator de a accesa
o pagină Web. Acesta rulează câteva verificări de securitate asupra solicitării HTTP și va
direcționa utilizatorul către pagina web. În funcție de pagina solicitată, pagina poate cere
server -ului să ruleze câteva modu le suplimentare în timp ce generează documentul care să
servească utilizatorul.
Apache Web Servers sunt adesea folosite în combinație cu motorul bazei de date
MySQL, limbajul de scripting HyperText Preprocessor (PHP) și alte limbaje populare de
scripting , cum ar fi Python și Perl. [16]
II.12. GetID3
GetID3 este un PHP script care extrage informații cum ar fi timpul de redare, bit -rate,
rezoluția din aceste următoarele tipuri de fișiere: MP3, Ogg Vorbis, WAV, AVI, MPEG -1
video, ASF / Windows Media. [17]

14
GetID3 este open source , adică gratuit, fiind accesbil tuturor și este foarte ușor de
folosit, fiind nevoie doar să apelăm funcții cu ajutorul cărora putem afla de exemplu durata
unui videoclip.
Tehnologia GetID3 este foarte utilă, deoarece putem află info rmații nu doar despre
fișiere de tip video, ci și pentru imagini de tipul PNG, JPEG, GIF sau fișiere de tipul ZIP (fișiere
arhivate). [17]
Pentru a instala GetID3 în cadrul unei aplicație este nevoie de un composer . Composer –
ul este un manager de librării pentru PHP. Composer -ul va gestiona librăriile de care aplicația
va avea nevoie, deci composer -ul va conține toate bibliotecile necesare și le va gestiona pe
toate într -un singur loc.

15
Capitolul II I. Aplicația VideoTube

Aplicația VideoTube permite vizionarea și încărcarea de videoclipuri despre filme,
jocuri video, muzică și alte categorii.
VideoTube este o aplicație destinată oricărei persoane, deoarece nu este necesar
realizarea unui cont în cadrul aplicației pentru a fi utilizată. Conținu tul videoclipurilor este
verificat de către administrator, în cazul în care are un conținut interzis minorilor sau rasist,
deci poate fi folosită și de copii.
Aplicația web, VideoTube, are că tehnologie de bazǎ web framework -ul DotKernel 1.8
însă în dezvol tarea aplicației au fost utilizate o serie de alte tehnologii adiacente, printre care :
❖ PHP 7
❖ HTML 5
❖ CSS 3
❖ Bootstrap 3
❖ Javascript
❖ MySQL 10
❖ jQuery
❖ JSON
❖ Font Awesome 4
❖ GetID3
III.1.Arhitectura aplicației
Aplicația este structurată în două părți :
❖ Backend – panoul de administrare
❖ Frontend – interfață pentru utilizatori
Aplicația are la bază o arhitectură HMCV impusǎ de framework -ul DotKernel, de
exemplu pentru implementarea funcționalităților asupra videoclipurilor, arhitectura HMVC
este ilus trată în figura n r. III.2.

16

Figura III .2. Arhitectura HMVC pentru implementarea modulului video
Arhitectura HMVC din partea de backend este asemănătoare cu arhitectura din partea
de frontend .
Arhitectura HMVC pentru implementarea paginilor cu videoclipuri care este ilustrată
în figura nr III .2 funcționează astfel :
❖ În index controller se apelează o funcție care ne va direcționa către video controller
❖ În video controller există un switch și în funcție de o anumită variabilă se intră într -un
anumit case din switch
❖ În case-ul respectiv se apelează funcții din video model , cu ajutorul cărora se extrag
informații din baza de date și sunt returnate în video controller unde sunt salvate
❖ După ce sunt apelate funcțiile din video model se apelează funcțiile din video view ,
având parametrii numele fișierului unde se află codul HTML și array -ul cu informațiile
din baza de date
❖ În video view se apelează funcții care vor încarcă fișierul cu codu l HTML și se
înlocuiesc datele dorite, după care se ajunge din nou în index controller
❖ În final se apelează în index controller funcții de afișare care vor primi ca și parametru
conținutul paginii care urmează să fie afișat
Structura aplicației, așa cum a pare ea în cadrul framework -ul DotKernel, este
reprezentată în figura nr III .3.
INDEX
CONTROLLER
INDEX
CONTROLLER
VIDEO
CONTROLLER
VIDEO MODEL
VIDEO VIEW

17

Figura III .3. Structura de fișiere a aplicației VideoTube
Partea de backend a aplicației VideoTube include componentele specifice arhitecturii
HMVC ( controller -e, modele și view-uri), și anume:
❖ Controller -e
➢ Admin
➢ Index
➢ System
➢ User
➢ Video
❖ Modele
➢ Admin
➢ System

18
➢ User
➢ Video
➢ View
❖ View -uri
➢ Admin
➢ System
➢ User
➢ Video
În admin controller se realizează funcționalitatea ce ține de administratori, de exemplu
adăugarea, actualizarea, ștergerea unui administrator, statistici despre când s -au autentificat
administratorii.
Controller -ul index este cel mai important, deoarece el face legătură cu celălalte
controller -e, ilustrat î n figura nr. III .4.

Figura nr. III .4. Codul PHP care face legătura cu celălalte controller -e
Legătura cu celălalte controller -e se face astfel:
❖ se salvează în variabila $actionControllerPath calea către controller -ul care va
fi accesat
❖ se verfică dacă fișierul respectiv există cu funcția file_exist , care are ca
parametru calea fișierului, iar dacă fișierul nu există se afișează un mesaj de
eroare
❖ dacă fișierul există se va verifica dacă se va accesa controller -ul din partea de
backend sau frontend . Pentru partea de backend se va verifica cu funcția
checkIdentity care va primi ca parametru string -ul admin

19
❖ cu ajutorul funcției require care are ca parametru calea controller -ului se va
apela controller -ul dorit
Tot în index controller se apelează funcția pentru afișarea widget -urilor și afișarea
conținutului din pagină cu ajutorului liniilor d e cod prezentate în figura nr. III .5, și anume
folosind funcția displayWidgets , respectiv funcția parse care primește ca și parametrii o
variabil ă și conținutul care va fi afișat, iar variabila primită că parametru va fi înlocuită cu
conținutul paginii.

Figura nr III .5. Codul PHP cu apelarea funcțiilor pentru afișarea conținutului în pagină
În system controller se realizează modificări pentru framework -ul Dotkernel, cum ar fi
schimbarea numărului limită la paginație.
În controller -ul user se află tot codul PHP ce realizează funcționalitățile din modulul
user, cum ar fi adăugarea, actualizarea, ștergerea unui utilizator. Tot în controller –
ul user se găsește codul cu care sunt realizate statistici despre utilizatori de câte ori s -au
autentificat, când s -au autentificat, de pe ce browser s-au autentificat și alte statistici.
Ultimul controller este video controller , unde se află toată funcționalitatea ce ține de
videoclipuri. De exemplu adăugarea, actualizarea, ștergerea unui videoclip sau statistici despre
fiecare utilizator la ce videoclip s -a uitat.
În admin model se află funcții ce extrag, șterg, actualizează date despre administratori
în tabelele din baza de date.
În system model se găsesc funcții asemnatoare cu cele din admin model doar că acestea
lucrează cu tabelele ce conțin setări despre framework -ul DotKernel.
User model și video model conțin funcții cu ajutorul cărora putem șterge, modifica,
insera alți utilizatori, respectiv videoclipuri.
Funcțiile de ștergere, inserare, modificare și inserare de videoclipuri în baza de date
sunt realizate cu secvențe de cod SQL, ilustrate în figura nr. III.6.

20

Figura nr. III.6. Secvente de cod SQL pentru inserare, stergere, modificare de
videoclipuri din baza de date
În view model se află funcții pe care le folosim în crearea de statistici sub formă de
grafic despre utilizatori și adminis tratori, de exemplu: utilizatori și administratori populari și
când s -au autentificat aceștia. Funcția pentru realizarea statistici grafice despre autentificările
utilizatorilor este ilustrată în figura nr. III.7 folosind JSON.

Figura nr. III.7. Funcția cu care se realizează statstica grafică pentru utilizatori

21
În admin view se găsesc funcțiile cu ajutorul cărora se afișează paginile ce conțin detali
despre administratori, cum ar fi nume, prenume, email, parolă și statistice despre când s -au
autentificat .
La fel ca în admin view și în system view se află funcții cu ajutorul cărora se vor afișa
paginile ce conțin informații despre framework -ul DotKernel.
View user și view video conțin funcțiile ce se folosesc pentru afișarea listelor cu
utilizatori, respe ctiv videoclipuri și statistici, cum ar fi cele mai populare videoclipuri, când un
utilizator s -a autentificat și multe altele.
Partea de frontend a aplicației VideoTube include componentele specifice arhitecturii
HMVC ( controller -e, modele și view-uri), și anume:
❖ Controller -e
➢ Index
➢ User
➢ Video
❖ Modele
➢ User
➢ Video
➢ View
❖ View -uri
➢ User
➢ Video
Index controller este similar cu index controller din partea de admin, el făcând legătura
cu celălalte controller -e, ilustrat în figura nr.2.4. Codul din cele în controller -e este similar, la
fel și funcționalitatea. Diferențele dintre index controller din frontend și cel din backend sunt:
❖ În index controller din partea de frontend lipsesc anumite apeluri de funcții cum ar fi
funcția displayWidget cu care afișam widget -urile în partea de backend . Această funcție
nu este necesară în partea de frontend , deoarece nu se folosesc widget -uri în partea de
frontend
❖ Diferența cea mai importantă dintre cele două controller -e este parametru funcției
checkidentity , ilustrată în figura nr. III .4

22
❖ În index controller din frontend , parametrul funcției checkindentity este string -ul user,
cu ajutorul căruia se va ști că ne aflăm în partea de frontend a aplicației.
Controller -ul user și cel video realizează aceleași func ționalități ca și cele din partea de
backend , cum ar fi adăugarea, actualizarea, ștergerea unui utilizator sau videoclip și statistici
despre utilizatori și videoclipuri.
În video controller se află case-ul json-rate în care se primește date de tipul JSON.
Codul în care se face trasmiterea datelor JSO N este prezentat în figura nr. III.8 . Datele JSON
sunt folosite pentru funcționalitatea butoanele de Like și Dislike a videoclipurilor și anume când
este apăsat butonul Like să nu mai fie nevoie să se reîncarce pagina respectivă pentru a se
observa că butonul de Like a fost apăsat schimbându -și culoarea în albastru dacă a fost apăsat
butonul Like sau negru dacă a fost apăsat butonul Dislike .

Figura nr. III.8 . Codul pentr u funcționalitatea butonului de Like
Funcția i lustrată în figura nr III.8 va verifica dacă există un utilizator autentificat altfel
se va afișa un mesaj de eroare. Dacă utilizatorul este autentificat atunci se verifică culoarea
butonului Dislike și va fi s chimbată. Datele care vor fi transmise către video controller sunt
salvate în variabile și vor fi trimise folosind funcția JQuery.parseJSON .

23
Funcția JQuery.parseJSON are ca parametru datele care dorim să le transmitem. În final
se schimbă culoarea butonul Like în culoarea corespunzătoare.
Modelele user, video și view conțin funcții cu ajutorul cărora extragem, actualizăm,
ștergem informații despre utilizatori, videoclipuri din baza de date
În user view și video view se găsesc funcțiile cu care se încarcă fișierele ce conțin cod
HTML și se afișează paginile cu listele despre utilizatori și videoclipuri, adică toate paginile
din partea de fronend . Interfața listelor a fost realizata cu framework -ul BootStrap 3 folosind
HTML5 ș i CSS3, ilustrat în figura nr. III.9 .

Figura nr III.9 . Codul pentru interfața listelor cu videoclipuri folosind BootStrap
În figura nr. III.9 se poate observa codul pentru sistemul de grilă al Bootstrap -ului și
anume clasele col-md-3, col -xs-12 și col-sm-6. Cu ajutorul acestor clase pagina cu listele de
videoclipuri este responsive pentru a fi vizibile și după dispozitivele mobile.
Tot în video view se folosește tehnologia getId3 pentru funcționalitatea playlist -ului, și
anume pentru a afla durata unui videoclip, pentru a ști când să se autoredirecționeaze către
următorul videoclip din playlist în momentul în care s -a terminat videoclipul precedent. Pentru
a trece la următorul videoclip din playlist se folosesc butoanele sub formă de săgeți care au fost
realizate cu tehnologia Font Awesome.
În video view se află funcția cu care se încarcă pagina unde se vizionează videoclipul.
În pagina respectivă se folosesc tehnologia jQuery, ilustrată în figura nr III .10 pentru afișarea
butoanelor Update și Delete a unui comentariu, deoarece aceste butoane sunt ascunse, iar prin
apăsare butonului cu iconiță sub formă de trei puncte pe verticală, butoanele Update și Delete
vor fi afișate. Iconița respectivă este realizată cu tehnologia Font Awesome.

24

Figura nr III .10. Codul JQuery pentru afișarea butoanelor de editare a unui comentariu
III.2. Baza de date a aplicației VideoTube
Pentru ca aplicația să fie utilizabil ă a fost necesară o bază de date și de aceea am folosit
tehnologia MySQL 10 pentru realizare a bazei d e date. În figura nr. III .11 este reprezentată
structura bazei de date a aplicației VideoTube.

Figura III .11. Structura bazei de date a aplicației VideoTube

25
În tabelul admin sunt stocate date despre administrator, cum ar fi username, parola,
email, nume, prenume. Aceste date fiind folosite atunci cȃnd administratorul se autentifică în
panoul de administrare.
Tabelul adminlogin conține informații despre autentificările administratorilor în panoul
de administrare, și anume data la care s -au autentificat, ip-ul, id-ul administratorului ( adminId )
care este un index fiind în legătura de unu -la-unu cu id-ul din tabelul admin . Acest ta bel este
folosit pentru realizarea unei statistici privind autentificările administratorilor.
Lista cu categoriile care se asociază unui videoclip se află în tabelul category unde
avem date cu numele categoriei și id-ul categoriei care se foloseste pentru relații cu alte tabele.
În tabelul comment sunt listate date despre comentariile adăugate la videoclipuri cum
ar fi mesajul adăugat, data la care a fost adăugat mesajul, id-ul utilizatorului care a comentat,
id-ul videoclipului unde a fost adăugat mesaju l. Id-ul utilizatorului este în relație de unu -la-unu
cu id-ul din tabelul user. Id-ul videoclipului este un index, deoarece este într -o relatie de unu –
la-unu cu id-ul din tabelul video .
Tabelul playlist conține listele cu playlist -urile create de către u tilizatori și anume,
numele playlist -ului, id-ul playlist -ului și id-ul utilizatorului care a creat playlist -ul. Id-ul
utilizatorului este într -o relație de unu -la-unu cu id-ul din tabelul user.
Tabelul playlistvideo conține date despre videoclipurile care au fost adăugate în
playlist -uri. Tabelul conține date cum ar fi id-ul playlist -ului care se află într -o relație de unu –
la-unu cu id-ul din tabelul playlist , id-ul videoclipului care este un index și este într -o relație
de unu -la-unu cu id-ul din tabelul video .
În tabelul ratingcomment sunt stocate date despre comentariile utilizatorilor și anume
id-ul comentariului care se află într -o relație de unu -la-unu cu id-ul din tabelul comment , o
coloana value care ne indică dacă comentariul a fost apreciat, atunci va avea va loarea 1, dacă
nu a fost apreciat va avea valoarea -1. Tabelul mai conține id-ul utilizatorului care este în relație
de unu -la-unu cu id-ul din tabelul user.
În tabelul ratingvideo se afl ă date asemănătoare cu cele din tabelul ratingcommen t și
anume id-ul videoclipului care a fost apreciat, id-ul utilizatorului care a apreciat, data și
valoarea, care poate fi 1 d acă videoclipul a fost apreciat, valoarea -1 dacă videoclipul nu a fost
apreciat sau valoarea 0 dacă videoclipul nu a fost nici ap reciat, nici neapreciat.

26
Tabelul setting conține date cum ar fi email -ul de contact a administratorului, rezultatele
per pagină care se folosește la momentul cȃnd extragem date din baza de date, funcționȃnd ca
și o limită.
În tabelul subscribers se află d ate despre utilizatorii care s -au abonat la anumite canale
video. Tabelul conține id-ul utilizatorului care s -a abonat, data la care s -a abonat și id-ul
utilizatorului care deține canalul video. Id-ul utilizatorului din tabelu l user se află în relație de
unul-la-mai mulți cu id-urile din tabelul subscribers .
Lista cu utilizatorii înregistrați se aflȃ în tabelul user care conține username -ul
utilizatorilor, parola, email -ul, nume, prenume, data la care a fost creat contul și tabelul mai
conține o coloană isActive care arată dacă contu l utilizatorului mai este activ.
Tabelul userlogin conține date despre autentificările utilizatorilor cum ar fi data la care
s-au autentificat, numele browser -ul de pe care s -a autentificat și id-ul utilizatorului care se află
în relație de unu -la-unu cu id-ul din tabelul user. Acest tabel se folosește pentru statistici din
panoul de administrare.
În tabelul video se găsesc listele cu videoclipurile încărcate de către utilizatori.Tabelul
conține id-ul videoclipului care se autoincrementează după fiecare încărcare de videoclipuri,
titlul videoclipului, data la care a fost adăugat, descrierea, numărul de vizualizări, id-ul
categoriei care arată din ce categorie face parte videoclipul, id-ul utilizato rului care a încărcat
videoclipul și mai conține o coloană isActive care arată dacă videoclipul este activ, atunci va
avea valoarea 1, altfel valoarea 0 dacă nu este activ.
Tabelul video este cel mai complex și mai mare , deoarece conține datele
cele mai importante .
Ultimul tabel numit watch conține date despre vizualizările videoclipurilor, cum ar fi
id-ul utilizatorului, id-ul videoclipului la care s -a uitat utilizatorul și data la care s -a uitat. Id-ul
utilizatorul se află în relație de unu -la-unu cu id-ul din tabelul user, la fel și id-ul videoclipului
este într -o relație de unu -la-unu cu id-ul din tabelul video .
Tabelul watch este folosit pentru realizarea unei statistici despre fiecare utilizator la ce
s-a uitat la un moment dat. Pagina cu această statistică se află în panoul de administrare.

27
Capitolul I V. Funcționalitatea aplicației VideoTube

Aplicația are mai multe tipuri de utilizatori :
● Utilizatorul neînregistrat, care are acces doar la vizionarea de videoclipuri,
comentarii, canale video ale altor utilizatori
● Utilizatorul înregistrat, care are acces peste tot în partea de frontend
● Administratorul, care are acces în panoul d e administrare
IV.1 Funcționalitatea aplicației în partea de frontend
Pagina principală din partea de frontend este formată dintr -o bară de navigație ce se află
în header -ul pagini i, ilustrată în figura nr IV .12 și este fixă, adică chiar și atunci cȃnd suntem
în partea de jos a paginii, bara de navigație se va afla întotdeau na în partea de sus a paginii.

Figura IV .12. Bara de navigație
Bara de navigație se află pe toate paginile din partea de frontend . Bara de navigație
conține un buton pentru meniu, logo -ul aplicației, o bară de căutare, un buton pentru încărcarea
de videoclipuri și încă două butoane care diferȃ în funcție de tipul utilizatorului. Pentru
utilizatorul neînregistrat cele două butoane vor fi unul pentru autentificare și unul pentru
înregistrare, iar pentru utilizatorul înregistrat cele două butoane vor fi unul pentru accesarea
paginii cu datele personale și celălalt buton pentru ieșirea din contul în care utilizatorul este
autentificat.
În bara de căutare se va introduce titlul unui videoclip și după apăsarea butonului de
căutare se va afișa o listă cu videoclipurile care au un titlul asemănător cu cel introdus în bara
de căutare. La apăsarea logo -ului aplicației vom fi redirecționați la pagina pri ncipală din
frontend a aplicației.
Pagina principală are aspectul ilustrat în figura nr IV .13.

28

Figura nr IV .13. Pagina principală din aplicația VideoTube
În pagina principală se mai află două liste cu videoclipuri. Prima listă conține cele mai
recente videoclipuri încărcate, lista fiind limită la șase videoclipuri și un buton View all recent
videos sub această listă care ne va redirecționa în pagina unde se află toate videoclipurile
ordonate după cele mai recente adăugate.
A doua listă conține cele mai populare videoclipuri, lista fiind limită la șase videoclipuri
și un buton sub această listă care ne va redirecționa în pagina unde se află toate videoclipur ile
ordonate după numărul de vizualizări, de la cel mai mare număr de vizualizări la cel mai mic
Butonul de meniu este de tipul dropdown , la apăsarea lui se va afișa sub buton o listă
cu paginile care pot fi accesate, fiecare avȃnd în stȃnga o iconiță repr ezentativă denumirii acelei
pagini, iconițele sunt realizate cu tehnologia Font Awesome.
Butoanle din meniu diferă în funcție de tipul utilizatorului cu exceptia următoarelor
două :
● Home – pagina principală
● Most watched videos – această pagină conține o listă cu cele mai populare
videoclipuri

29
Pentru utilizat orul neînregistrat meniul va ară ta ca în figura nr IV.14 .

Figura nr. IV.14 . Meniul pentru utilizatorul neînregistrat
Butoanele din meniul utilizatorul neînregistrat sunt :
● Log in – pagina unde ne vom autentifica
● Register – pagina unde ne putem înregistra
Pentru utilizat orul înregistrat meniul va arăta ca în figura nr IV.15 .

Figura nr. IV.15 . Meniul pentru utilizatorul înregistrat
Butoanele din meniul utilizatorul înregistrat sunt :
● My channel – canalul video personal
● Liked videos – lista cu videoclipurile pe care le -am apreciat
● Subscribe videos – lista cu videoclipurile canalelor video la care ne -am abonat
● Playlist – lista de playlist -uri create
● My account – pagina cu date personale
● Log out – butonul prin care ieșim din contul în care suntem autentificați
Încărcarea unui videoclip se face prin apăsarea butonul numit Upload care ne va
redirecționa către un formular ilustrat în figura nr IV.16 .

30

Figura nr IV.16 . Formular pentru încărcarea unui videoclip
Formularul va trebui completat cu un titlu pentru videoclip, adăugarea videoclipului,
adăugarea unei imagini care să fie reprezentativă conținutul videoclipului, o descriere și să
alegem din ce categorie face parte videoclipul.
Tipul videoclipul ui încărcat trebuie să fie mp4 altfel nu va putea fi încărcat la fel și
pentru imagini trebuie să fie doar de tipul jpg sau png. Lungimea titlul trebuie să fie între 3 și
50 de litere, iar pentru descriere, numărul de litere trebuie să fie între 5 și 2000 de litere.
Videoclipul încărcat nu va apărea încă în lista cu videoclipuri până când administratorul își va
da acceptul, deoarece videoclipul poate să ai aibă conținut nerecomandat.
Fiecare utilizator poate să ștergă videoclipul pe care l -a încărcat prin accesarea
canalului video personal, iar în partea dreapta jos a fiecărui videoclip se află un buton de
ștergere numit Delete care la apăsarea lui ne va redirecționa către un fo rmular, ilustrat în figura
nr. IV.17 .

Figura nr IV.17 . Formular pentru șterger ea unui videoclip

31
În formularul pentru ștergerea unui videoclip va trebui să bifăm dacă suntem siguri că
dorim să ștergem videoclipul și după care apăsăm butonul Yes.
Există și un buton numit Update care se află în partea dreapta a butonului Delete , și la
apăsarea acestuia vom fi redirecționați către un fo rmular, ilustrat în figura nr. IV.18 .

Figura nr IV.18 . Formular pentru actualizarea unui videoclip
Cu ajutorul formularului din figura IV.18 se poate realiza actualizarea unui videoclip ,
îi se permite utilizatorului să actualizeze videoclipul putând să schimbe titlul, descriere a,
imagine a, categorie a, chiar și videoclipul în sine. Aceste două butoane apar doar în dreptul
videoclipuri care au fost încărcate de utilizatorul autentifcat.
Pagina Most watched videos conține cele mai populare videoclipuri ordonate de la cel
mai mare număr de vizualizări la cel mai mic. Lista este limitată la 12 videoclipuri pe o pagină.
Pentru a accesa restul va trebui să accesăm următoarea pagină. Butoanele pen tru paginație se
află în partea de jos a listei cu videoclipuri fi ind numerotate și mai se află și două butoane prin
care putem să accesăm prima pagină, respectiv ultima pagină.
Pentru a ne autentifica va trebui să accesăm pagină de Log in . Această pagină conține
un formular de autenti ficare, ilustrat în figura nr. IV.19 .

32

Figura nr IV.19 . Formular pentru autentificarea în aplicația VideoTube
În formularul de autentificare va trebui să introducem username -ul și parola , după care
vom apasă butonul de Login .
Dacă nu mai știm parolă putem apasă butonul de Password recovery care ne va
redirecționa către pagină de recuperare a parolei, unde va trebui să introducem email -ul și după
să apăsăm butonul Submit .
Pentru a ne înregistra, utilizatorul va trebui să acce seze pagina Sign up , care îl va
redirecționa către un formular unde va trebui să completeze usename -ul, parola nume,
prenume, email.
Pagină My channel este canalul video personal unde se află videoclipurile încărcate de
către utilizatorul autentificat. Vid eoclipurile sunt ordonate după cele mai recente adăugate și
sunt afișate doar 12 videoclipuri per pagină, pentru restul videoclipurilor va trebui să le
accesăm cu ajutorul butoanelor de paginație.
Pagină Liked videos conține lista cu videoclipurile aprecia te. Videoclipurile sunt afișate
după cel mai recent videoclip apreciat. Ele vor fi afișate doar 12 per pagină la fel ca la celălalte
pagini care conțin liste de videoclipuri.
În pagină Subscribe videos găsim lista cu videoclipurile canalelor video la care ne-am
abonat. Lista e formată din 12 videoclipuri per pagină, sub lista aflându -se butoanele pentru
paginație.
Pagină Playlist conține lista cu playlist -uri create de utilizatorul autentificat. În pagină
avem un buton care la apăsarea lui ne va redirecțion a către un formular unde vom crea un nou
playlist prin introducerea unui nume pentru playlist .

33
În dreptul fiecărui playlist există un buton folosit pentru ștergerea playlist -ului
respectiv, ilustrat în figura IV.20 .
Accesarea unui playlist se face prin apăsarea pe numele playlist -ului care ne va
redirecționa către pagina ce va conține o listă cu videoclipurile incluse în acel playlist , după
cum se poate vedea în figura nr IV.20 .

Figura nr IV.20 . Pagina cu listele de playlist -uri create
După ce am accesat un playlist vom fi întâmpinați de o listă limitată la 12 videoclipuri
per pagină și ordinea lor este după cel mai recent adăugat, după cum se poate vedea în figura
nr IV.21 .

Figura nr IV.21 . Pagina unui playlist

34
În dreptul fiecărui vid eoclip există un buton pentru ștergerea videoclipului respectiv din
playlist . Când accesăm un videoclip prin intermediul playlist -ului vom avea două săgeți în
partea de jos a videoclipului prin care putem să accesăm celălalte videoclipuri din playlist -ul
respectiv. Dacă nu apăsăm nici una dintre cele două săgeți atunci la momentul terminării
duratei a videoclipului se va face o autodirecționare la următorul videoclip din playlist .
Pentru a vizualiza și modifica datele personale va trebui să accesăm pag ina My account
unde putem să schimbăm parola, email -ul, numele, prenumele și după va trebui apăsat butonul
Update pentru ca datele să se actualizeze.
Când dorim să ieșim din contul în care suntem autentificați va trebui să apăsăm butonul
pentru Log out care ne va redirecționa la pagină principala a aplicației, dar fără a mai fi
autentificați.
Listele cu videoclipuri vor conține date despre videoclipuri prez entate în figura nr.
IV.22 .

Figura IV.22. Interfața unui videoclip într -o pagină cu liste de videoclipuri
După c um se poate vedea în figura nr IV .20 fiecare videoclip are o imagine
reprezentativă videoclipului. Sub imagine avem titlul videoclipului care este de culoarea
albastru închis. După avem numele u tilizatorului care a încărcat videoclipul respectiv și mai
avem date cum ar fi numărul de vizualizări a videoclipului și data la care a fost încărcat
videoclipul.
Pentru vizionarea unui videoclip va trebui să accesăm videoclipul prin apăsarea pe
imaginea v ideoclipului sau pe titlul videoclipului.

35
Se mai poate apasă și pe numele utilizatorului care a încărcat videoclipul și vom fi
redirecționați către canalul video a utilizatorului respectiv.
Cea mai importantă pagină din cadrul aplicației este cea în care putem viziona
videoclipului, acesta fiind și scopul acestei aplica ții. O astfel de pagină arată ca în figura nr.
IV.23 .

Figura IV.23 . Pagina unde se vizualizează videoclipul
Pentru redarea videoclipului am folosit HTML 5 video player . Sub videoclip ave m date
despre videoclip, cum ar fi titlul acestuia, numărul de vizualizări, numele utilizatorului care a
încărcat videoclipul, o descriere a videoclipului.

36
În partea dreapta jos a videoclipului se află butoanele pentru aprecierea sau
neaprecierea videocli pului respectiv și în dreptul fiecărui buton se află numărul de aprecieri
sau neaprecieri a videoclipului. În momentul apăsării butonului de Like, iconița butonului se
va face albastră, iar în cazul în care apăsăm butonul de Dislike culoarea iconiței se va face
neagră.
Dacă dorim să vizualizam canalul video al utilizatorului care a încărcat acel videoclip
va trebui să apăsăm pe numele utilizatorului și vom fi redirecționați către pagină cu canalul
video a utilizatorului.
În partea de jos a numelul se află butonul pentru abonare sau dezabonare numit
Subscribe , respectiv Unsubscribe . La momentul apăsării acestui buton se va schimba din
Subscribe în Unsubscribe sau invers, iar în momentul când s -a apăsat pe butonul Subscribe ,
videoclipurile utilizatorului care a încărcat acel videoclip vor apărea în lista cu videoclipuri din
pagină Subscribe videos sau dacă ne vom dezabona atunci videoclipurile utilizatorului vor
dispărea din pagină Subscribe videos . Butonul nu va există atunci când utilizatorul autentificat
este același cu utilizatorul care a încărcat videoclipul respectiv.
Fiecare videoclip este asociat unei categorii, dup ă cum se poate vedea în figura IV.23 ,
videoclipul fiind din categoria de muzică . Dacă dorim putem accesa pagină în care vor fi afișate
video clipurile ce fac din categorie respectivă prin simplă apăsare pe numele categoriei vom fi
redirecționați în acest caz la o pagină cu videoclipuri ce sunt asociate categoriei de filme.
Dacă dorim să adăugăm un videoclip într -un playlist se poate face prin s impla apăsare
a butonul de Add video playlist care ne va redirecționa către un formular în care va trebui să
alegem în ce playlist dorim să îl adăugăm și după care să apăsăm butonul de Add
și după care vom fi redirecționați către pagina cu playlist -uri.
Un videoclip poate fi împărtășit pe rețele de socializare prin apăsarea butoanelor cu
iconițe reprezentative rețelelor de socializare. De exemplu dacă dorim să împărtășim un
videoclip cu prietenii de pe Facebook vom apasă butonul cu iconița de la Facebook.
Fiecare pagină a unui videoclip conține în partea de jos o listă cu comentarii. Pentru a
adaugă un comentariu vom completă căsuța unde scrie Add comment . După ce s -a completat
comentariul se apasă butonul Comment .
Comentariile sunt afișate în ordinea în ca re au fost adăugate de la cel mai recent. În
partea de sus a fiecărui comentariu se află numele utilizatorului care a adăugat comentariul .

37
În partea de jos a unui comentariu se află butoanele pentru aprecierea sau neaprecierea
comentariului respectiv și un buton numit Reply pe care îl folosim atunci când dorim să
răspundem la un comentariu. La rândul sau fiecare răspuns la comentariu va avea numele
utilizatorului care a răspuns, dată la care s -a adăugat răspunsul.
Fiecare comentariu poate fi șters prin apă sarea butonului de ștergere care ne va
redirecționa către o pagină unde va trebui să bifăm căsuța dacă dorim să ștergem acel
comentariu după care să apăsăm butonul de ștergere numit Yes.
Un comentariu poate fi actualizat cu ajutorul butonul numit Update care ne va
redirecționa către un formular unde putem să schimbăm mesajul comentariului după care
apăsăm butonul Update pentru ca mesajul să se actualizeze.
În pagina în care vizualiză m videoclipul avem în partea dreapta o listă cu videoclipurile
utilizatoru lui care a încărcat videoclipul respectiv. Acea listă poate să diferă, de exemplu când
accesăm un videoclip prin intermediul playlist -ului, atunci în partea dreapta se va afla o listă
cu videoclipurile din playlist -ul respectiv.
IV.2 Funcționalitatea aplicației în partea de backend
Partea de backend poate fi accesată doar de către admin istratori, deoarece pot să existe
mai mulț i administratori.
În momentul când accesăm partea de adminstrare suntem întâmpinați de către un
formular de autentificare, ilustrat în figura IV.24 .

Figura nr IV.24 . Formular de autentificare în panoul de administrare
Panoul de adminstrare este constituit din patru module care pot fi accesate din meniu :
❖ Dashboard
➢ Home
➢ Setting

38
❖ Admin
➢ List
➢ Add new
➢ My account
➢ Logins
❖ User
➢ List
➢ Add new
➢ Logins
❖ Video
➢ List
➢ Add new
➢ List views
➢ List comments
După ce ne -am autentificat vom fi redirecționați către pagină List din modulul Video cu
toate videoclipurile și informațiile despre ele, ilustrat în figura IV.25 .

Figura nr. IV.25 . Pagina cu listele de videoclipuri din panoul de administrare

39
Informațiile constă în titlul videoclipului, ut ilizatorul videoclipului, data la care a fost
adăugat videoclipul, categoria, numărul de vizualizări și starea videoclipului dacă este activ
sau inactiv, adică dacă videoclipul este vizibil în lista de videoclipuri sau nu, această opțiune
fiind utilă în cazul în care videoclipul are un conținut nerecomandat. Administratorul are
posiblitatea să actualizeze videoclipul cu ajutorul butonului Updat e care îl va redirecționa către
un formular în care poate să modifice titlul, imaginea, categoria și chiar videoclipul.
Administratorul poate să și șteargă un videoclip prin apăsarea butonul de ștergere numit
Delete .care ne redirecționează către un formula r în care trebuie să bifăm o căsuța dacă suntem
siguri că dorim să ștergem videoclipul.
În pagină Add new din modulul Video , administratorul poate încărca la rândul lui un
videoclip fiind nevoie să completez exact același formular că și cel completat de un utilizator
normal, datele care trebuiesc completate având aceleași cerințe.
Administratorul are acces la o pagină numită List comments în care sunt afișate toate
comentariile adăugate de către utilizatori, în care poate să vadă la ce videoclip s -a adăuga t
comentariul, utilizatorul care a adăugat comen tariul, data, mesajul. La fel ca și pentru
videoclipuri, administratorul are posibilitatea să actualizeze comentariul putând să modifice
conținutul mesajul în cazul în care conține cuvinte vulgare sau rasiste . Administratorul poate
să dezactiveze un comentariu sau să îl activeze, adică să nu fie afișat în lista de comenta ri a
acelui videoclip sau invers. Comentariul poate fi șters în totalitate din baza de date de către
administrator cu ajutorul butonului numi t Delete .
În panoul de administrare există o pagină, List views , cu o statistică despre fiecare
vizualizare a unui videoclip putatnd să vadă la ce videoclip să uitat un utilizator la un moment
dat.
Administratorul are acces la lista cu toți utilizatori înregistrați și datele despre ei, cum
ar fi user name, email, nume, prenume, data la care și -a creat contul. Această pagină este List
din modulul User . Administratorul poate să dezactiveze contul unui utilizator din cauza unor
abateri, dar poate să îl activ eze din nou. Alte opțiuni pe care le are administratorul asupra
utilizatorului est e de a șterge contul sau de a modifica date personale ale unui utilizator.
În pagină Add new din modulul User administratorul poate să adauge alți utilizatori prin
completare a unui formular, ilustrat în figura nr IV.26 , similar celui completat de un simplu
utilizator când își crează un cont în partea de frontend a aplicației,

40

Figura nr. IV .26. Formularul pentru adăugarea unui nou utilizator
Altă statistică din panoul de adm inistrare este cea în care administratorul poate să vadă
fiecare utilizator când s -a autentificat, de pe ce browser , dată și sistemul de operare de pe care
s-a autentificat. Această pagină este Logins din modulul User. Există și posibilitatea ca
administra torul să filtreze datele după browser -ul folosit sau data la care s -a autentificat pentru
a îi fi mai ușor să găsească anumite date specifice în cazul anumitor incidente.
În modulul admin , un administrator poate în pagina List. să vadă lista cu toți
administratorii și datele despre ei, cum ar fi username, email, dată la care s -a creat contul. La
fiecare admin există și opțiunea de a actualiza date personal și de a șterge contul din baza de
date cu ajutorul butoanelor de Update și Delete , iar prin apăsarea butoanelor suntem
redirecționați către anumite formulare reprezentative.
Administratorul are posibilitatea să creeze și alți administratori prin intermediul paginii
Add new din modulul admin . În pagină Add new va trebui completat un formular cu username,
email, nume, prenume și cu posibilitatea că noul administrator să fie activ sau inactiv prin
bifarea căsuței Yes, respectiv No.
În pagină My account , administratorul autentificat poate să își vadă datele personale ,
putând să modifice parolă, numele, prenumele sau email -ul.
La fel că și în modulul user există și în modul admin o pagină numită Logins care
prezintă când administratorii s -au autentificat și de pe ce browser și sistem de operare s -au
autentificat, pagin a este ilustrată în figura nr. IV.27 .

41

Figura nr. IV.27 . Pagina Logins cu statistici despre autentificările administratorilor
Panoul de administrare mai conține statistici în pagina Dashboard, ilustrate în figura
nr. IV.28 . Aceste statistici sunt sub form ă de grafic și prezintă de câte ori s -au autentificat
admini stratorii în ultimele trei luni . O altă statistică este cea în care se prezintă care sunt cei
mai activ i utilizatori tot sub forma unui grafic.

Figura IV.28 . Statistici grafice despre autentif icările administratorilor si utilizatorilor

42
V. Concluzii

Dezvoltarea aplicației web VideoTube a necesitat utilizarea a multor cunoștiințe
teoretice și practice dobândite pe parcursul anilor de studiu din cadrul facultății.
Aplicația VideoTube este o aplicație complexă, având multe pagini și funcționalități .
Aspectul aplicației VideoTube este unul modern și intuitiv. VideoTube este o aplicație ușor de
utilizată și cu un conținut variat de videoclipuri, astfel încât să poată fi utilizată de orice
persoană, indiferent de vârstă, chiar și pentru copii, deoarece conținutul videoclipurilor este
verificat de administrator înainte de să fie încărcat .
Versiunea actuală a aplicației este stabilă și are un set de funcționalități suficiente cât
să fie utilizată într-un mod satisfăcător, dar poate să fie îmbunătățită prin adăugarea de noi
funcționalități.
Dezvoltări viitoare :
❖ Integrarea unui i nfinite -scroll , adică să nu mai fie necesar accesarea paginii următoare
dintr -o listă de videoclipuri, ci prin simpla dep lasare în partea de jos a paginii să se
încarce următoarele videoclipuri ce erau în paginile ce urmau
❖ Personalizarea contului personal prin adăugarea unui imagini de profil și alte date
personale
❖ Posibilitatea schimbării ordinii în care sunt redate videocl ipurile din cadrul unui playlist
prin simpla apăsare a unor săgeți.
❖ Personalizarea canalului video personal prin adăugarea de imagini, o descriere a
canalului video respectiv
❖ Posibilitatea adăugării de videoclipuri cu alte formate față de mp4, cum ar fi divx, avi,
flv, wmv și multe altele
❖ Adăugarea de noi statistici în panoul de administrare, de exemplu statistici despre
videoclipurile cu cele mai multe apreciere în ultima săptămână, videoclipul cu cele mai
multe comentarii, cel mai popular videoclip dint r-o anumită categorie sau dintr -un
anumit canal video și multe alte statistici

43
❖ Posibilitatea de schimbare a cuvintelor din meniu sau a butoanelor în limba română sau
chiar și în alte limbii populare prin simpla apăsare a unor butoane inscripționate cu
limbile corespunzătoare
❖ Posibilitatea de a răspunde la un comentariu ce este un răspuns la un alt comentariu și
adăugarea de butoane pentru a aprecia sau nu răspunsul respectiv și fără să fie necesară
reîncărcarea paginii respective
❖ Îmbunătățirea aspectul pagi nilor, să fie vizibile indiferent de dispozitivul de pe care se
accesează aplicația

44
Bibliografie

[1] . https://www.dotkernel.com/docs/what -is-dotkernel/
[2]. https://www.dotkernel.com/docs/hmvc -structure/
[3]. https://www.dotkernel.com/docs/model -view -controller/
[4]. https://www.dotkernel.com/docs/system -requirements/
[5]. http://php.net/manual/en/intro -whatis.php
[6] Luke, Welling și Laura Thomson PHP and MySQL Web Development (fifth edition)
Pearson Education 2016
[7]. https://www.keycdn.com/blog/html -vs-html5/
[8]. Jennifer Kyrnin (august 18, 2016) What is the Difference Between CSS2 and CSS3
[9]. https://www.tutorialspoint.com/javascript/javascript_overview.htm
[10]. http://www.seguetech.com/ajax -technology/
[11]. https://jquery.com/
[12]. https://www.copterlabs.com/json -what -it-is-how -it-works -how -to-use-it/
[13]. http://getbootstrap.com/
[14]. http://fontawesome.io/
[15]. https://dev.mysql.com/doc/refman/5.7/en/what -is-mysql.html
[16]. https://help.ubuntu.com/lts/serverguide/httpd.html
[17]. https://github.com/JamesHeinrich/getID3