2

Universitatea POLITEHNICA București
Facultatea Automatică şi Calculatoare

Departamentul Automatică şi Informatică Industrială
LUCRARE DE LICENŢĂ
Site web pentru ascultat şi downloadat muzică
Coordonator Absolvent
Sl.Dr.Ing. Călin Munteanu Andreescu Alexandra
Mădălina
2016
Cuprins
1. Introducere ................................................................................................................................. 2
1.1 Generalități despre muzică .................................................................................................... 2
1.1.1 Muzica hip-hop .............................................................................................................. 2
1.1.2 Influența muzicii asupra personalității noastre .............................................................. 4
1.2 Contextul proiectului ............................................................................................................ 6
1.3 Scopul proiectului ................................................................................................................. 6
1.4 Structura proiectului.............................................................................................................. 7
2. Prezentarea domeniului din care face parte lucrarea .................................................................. 8
3. Tehnologii folosite .................................................................................................................... 11
3.1 Limbaje ............................................................................................................................... 11
3.1.1 HTML 5 ....................................................................................................................... 11
3.1.2 Smarty .......................................................................................................................... 12
3.1.3 CSS .............................................................................................................................. 13
3.1.4 RedBean ....................................................................................................................... 14
3.1.5 JavaScript ..................................................................................................................... 15
3.1.6 PHP .............................................................................................................................. 15
3.2 Programe ............................................................................................................................. 16
3.2.1 Google Chrome ............................................................................................................ 16
3.2.2 Mozilla Firefox ............................................................................................................ 17
3.2.3 Notepad++ ................................................................................................................... 17
3.2.4 WinScp......................................................................................................................... 18
3.2.5 Adobe Photoshop CS6 ................................................................................................. 19
4. Prezentarea aplicației ................................................................................................................ 20
4.1 Scurtă descriere ................................................................................................................... 20
4.2 Proiectare aplicație .............................................................................................................. 21
4.3 Paginile principale .............................................................................................................. 26
5. Concluzii, dezvoltări ulterioare și contribuții personale ........................................................... 54
6. Bibliografie ............................................................................................................................... 56
1
1. Introducere
1.1. Generalităţi despre muzică
1.1.1 Muzica hip-hop
Hip-Hop-ul este expresia creativității unui tineret urban care dorește să se facă auzit prin anumite
mijloace de exprimare artistică specifice unui mediu ostil artei tradiționale.
Istoria hip-hop este un aspect care a impulsionat popularitatea culturii hip-hop. Pe o perioadă de
timp, acest stil de exprimare artistică a fost intens promovat de mass-media, iar expunerea oferită
în zilele noastre este un bun indicator asupra numărului mare de oameni din întreaga lume care
practică hip-hop-ul. Există multe școli vechi și noi forme de școli care au adoptat această cultură
acum, iar istoria hip-hop dezvăluie povestea acestei ascesiuni.
Acest curent a fost născut din revoltă și își are originile în muzica sclavilor de culoare, acele
celebre Gospel-uri, care nu erau altceva decât suferințele și întristările lor exteriorizate prin
muzică. Îmbinând Blues-ul cu Jazz-ul și R&B- ul anilor ‘50, stilul s-a concretizat la începutul
anilor ‘70.
Acest curent își are originea în Bronxul anilor ’70, când cel supranumit ,,The Godfather of Hip-
Hop”, Arika Bambataa Asim, lider al minorității Zulu din Bronx, pune bazele unei puternice
organizații numită Universal Zulu Nation, organizație care a stat la baza hip-hop-ului.
Numele de hip-hop a fost trecut pe un flyer la petrecerea organizată de Arika Bambataa, iar de
atunci așa a rămas denumirea acestui gen de muzică.
Hip-hop-ul nu este doar un gen de muzică; este un stil de viață și s-a dezvoltat odată cu trecerea
timpului sub forma unei culturi. Această cultură are la bază patru elemente: MC, DJ, Graffiti și
breakdance.
Muzica rap, componenta de bază a culturii hip-hop, s-a dezvoltat din muzica jamaicană specifică
2
unei părți a locuitorilor Bronxului. Ceea ce la început nu era decât o joacă (recitările MC-urilor
pe anumite beat-uri, base-line-uri), s-a transformat treptat într-un stil de muzică.
Dansul hip-hop se referă în primul rând la forma de dans specifică muzicii hip-hop, care este de
obicei sinonimă cu acest gen de muzică. Unele mișcări cum ar fi locking, popping și breakdance,
au ajuns să fie ușor legate de dansul hip-hop. Partea cea mai intrigantă a hip-hop-ului este
absența oricărei restricții (cunoscută sub numele de freestyling), o metodă în care orice mișcare e
posibilă. Acest lucru a întărit convingerea că dansul hip hop nu implică nicio mișcare prestabilită
și nicio regulă, și că nu există limite.
Hip-hop-ul apare frecvent sub formă de „bătălii” între dansatori individuali sau două grupuri de
dansatori și apare de obicei într-o zonă selectată aleatoriu pe străzi. Este mai mult o bătălie de
dogme psihologice și mentale, decât mișcările în sine.
New-York-ul, cunoscut ca orașul în care s-a născut hip-hop-ul, a produs și graffiti-ul și pare să
aibă o logică perfectă, având în vedere diversitatea culturală a orașului. Imigranți din toate părțile
lumii s-au strâns de-a lungul anilor în marele oraș, sperând la o viață bună și prosperă. Ceea ce
au găsit a fost contrar așteptărilor lor și mulți erau revoltați. Implicarea în bandele de infractori
devenise un lucru obișnuit pentru satisfacerea nevoilor de zi cu zi.
O metodă prin care aceste bande își marcau teritoriul era să își scrie numele sau tag-urile pe
zidurile cartierelor respective. Acest lucru era atât o invitație cât și un advertisment.
Cel care a schimbat modul în care SUA și întreaga lume vedea acest stil muzical, este TuPac, pe
numele său Tupac Amaru Shakur. El a văzut în hip-hop o ieșire din sărăcie, dar a plătit cu viața.
Cultura hip-hop oferă conștiința apartenenței la un grup, la o tendință și un anumit mod de a
gândi. Ea este în general văzută ca o modalitate de a ne îndepărta de normele societății si de a
adopta spiritul real de exprimare al ghetoului.
Istoria hip-hop este înțeleasă greșit, ca fiind dezlănțuită de convenții și ortodoxie. Acest stil de
dans a fost inițial privit cu dispreț și rușine, dar în timp oameni au înțeles ce este cu adevărat și
3
au acceptat complet cultura. Hip-hop-ul este unul dintre acele genuri de divertisment care au
stimulat o grămadă de oameni să-și atingă scopul și să se afirme în societate.
1.1.3. Influenţa muzicii asupra personalităţii noastre
De obicei ne dăm seama dacă o melodie este veselă sau tristă, dar nu este vorba doar de starea pe
care ne-o crează aceasta. În realitate, creierul uman reacţionează cu totul diferit la muzică, fie ea
veselă sau tristă.Chiar anumite pasaje de melodii ne pot afecta. De exemplu, participanţi la un
studio şi-au modificat expresia feţei, în funcţie de tonalitatea piesei muzicale.Alt lucru interesant
este faptul că există două tipuri de stări emoţionale create de muzică: emoţiile percepute şi cele
resimţite.Ceea ce înseamnă că, uneori înţelegem emoţia transmisă de anumite melodii, fără a o şi
trăi. Iată de ce unii dintre noi se delectează ascultând muzică tristă, fără să o considere
deprimantă.Când vine vorba de ocupaţii care ne solicită atenţia, ascultarea muzicii la un volum
ridicat nu este cea mai bună opţiune.
Este evident faptul că nivelul moderat de zgomot aduce beneficii creativităţii, stimulează creierul
să proceseze la capacitate ridicată.Pe de altă parte, atunci când suntem supuşi la un nivel înalt de
decibeli, mintea noastră creativă este acaparată şi forţată să înregistreze eficient
informaţiile.Această situaţie este similară cu modalitatea în care temperatura şi iluminatul ne
influenţează productivitatea, şi paradoxal, locurile supraaglomerate ar putea fi de bun augur.Într-
un studiu exprimental s-au utilizat cinci trăsături de caracter: deschiderea spre cunoaştere,
sociabilitatea, amabilitatea, conştiinciozitatea şi stabilitatea emoţională.
Interesant a fost faptul că unele caracteristici ale personalităţii umane sunt mai uşor de apreciat
decât altele, ca de exemplu: deschiderea spre cunoaştere, sociabilitatea şi stabilitatea emoţională.
La polul opus, conştiinciozitatea nu se poate remarca în mod evident prin preferinţele
melodice.Studiind trăsăturile de personalitate, specialiştii au alcătuit o listă cu genurile muzicale
corespunzătoare fiecărui caracter în general şi conexiunea dintre ele:Ascultătorii de muzică blues
au foarte multă încredere în propria persoană, sunt creativi, prietenoşi şi pacifişti.Ascultătorii de
4
jazz au foarte multă încredere în propria persoană, sunt creativi, prietenoşi şi pacifişti.Cei care
ascultă arii clasice sunt încrezători în forţele proprii, sunt creativi, introvertiţi şi calmi.Fanii
muzicii rap sunt încrezători în ei înşişi şi sociabili.
Cei care preferă să asculte operă au foarte multă încredere în propria persoană, sunt creativi şi
blânzi.Ascultătorii de muzică western şi country sunt muncitori şi sociabili.Fanii muzicii reggae
sunt încrezători în forţele proprii, sunt creativi, nu sunt prea muncitori, sunt sociabili şi
pacifişti.Fanii muzicii dance sunt creativi şi sociabili, dar nu sunt pacifişti.Cei care iubesc muzica
indiană nu sunt încrezători în propria persoană, sunt creativi, dar nu sunt nici muncitori, nici
pacifişti.Fanii stilului bollywood sunt creativi şi sociabili.Ascultătorii de rock/heavy metal nu
sunt încrezători în propria persoană, sunt creativi, nu sunt muncitori şi nici prietenoşi, dar sunt
calmi.Fanii trupelor pop au foarte multă încredere în propria persoană, sunt muncitori, prietenoşi
şi buni, dar nu sunt creativi şi nici calmi.Iubitorii de muzică soul au foarte multă încredere în
propria persoană, sunt creativi, prietenoşi şi pacifişti.
Aşa cum liniştea nu ne ajută să devenim mai creativi sau şoferi mai buni, nici când facem
exerciţii fizice nu este de prea mult ajutor.De exmplu, cicliştii pedalează mai repede în timp ce
ascultă muzică. Deoarece ea poate diminua episoadele de oboseală ale creierului. Atunci când
corpul oboseşte şi simte nevoia de odihnă, muzica trimite către creier semnale să ia o pauză. Ne
ajută să rămânem atenţi şi să îndepărtăm semnele de oboseală, atunci când facem efort fizic
moderat. Dar muzica nu are atâta putere, încât să distragă atenţia creierului setat pe durere în
cazul extenuării fizice.Nu ne ajută doar să putem face faţă antrenamentelor din ce în ce mai
dificile, ci ne ajută şi să ne folosim energia mult mai eficient. Cicliştii care au pedalat ascultând
refrene muzicale au necesitat cu 7% mai puţin oxigen decât cei care au concurat în linişte.Dintr-
un studiu recent reiese faptul că muzica poate avea un tempou de 145 de bătăi pe minut şi nimic
altceva la intensitate mai înaltă nu poate aduce mai multă motivaţie.În aceeaşi măsură precum
sportul, muzica îşi aduce un aport semnificativ la succesul realizărilor noastre.
5
1.2. Contextul proiectului
La inceput,internetul ne-a oferit modalitatea de a păstra muzica în format digital indiferent ce

calculator foloseam. Cu ajutorul internetului muzica poate fi salvată, remixată ,trimisă şi
descărcată.Astfel ne putem face un album cu melodiile preferate sau o colecţie cu piesele
preferate de prietenii noştri.
Pasul următor a fost apariția site-urile și serviciilor “pirate”: Napster, Kazaa, DC++, torrente.
Soluții ilegale de copiat și distribuit muzică în format MP3 doar pentru că legile sunt
învechite iar tehnologia propusă de aceste soluții este inovatoare.
Apoi MySpace! Rețeaua socială dezvoltată în principal datorită artiștilor underground care au
găsit o nouă formă de a fi aproape de fanii lor, o nouă formă de promovare gratuită și virală.
Dar internetul ne-a dus și mai departe… Au apărut site-uri de download legal, soft-uri
revoluționare, radiouri online, streaming on-demand susținut de publicitate,
După ce MySpace devenea cea mai mare rețea socială din lume industria muzicală și-a
îndreptat atenția spre internet: Last.FM, Imeem, Deezer, we7, GrooveShark. În România avem
câteva siteuri mari cu muzică legală: MusicMall.ro, eOk.ro, Moose.ro, MuzicaBuna.ro.
Dabeatspot.com este urmatorul pas, un site muzical unde poti asculta muzica preferata, iti poti
face lista cu artistii preferati si astfel vei fi anuntat mereu cand acesta va posta o noutate.
1.3. Scopul proiectului
Scopul proiectului este de a aduce pe un singur site mai multe funcţionalităţi, astfel încat
utilizatorul să gasească într-un singur loc ultimele noutăţi muzicale hip-hop, posibilitatea de a
lăsa comentarii la cântecul dorit sau la albumul dorit, de a urmări artistul favorit, de a urmări
activitatea acestuia,precum şi ultimele postări sociale. Astfel utilizatorii pot asculta muzica
artiştilor preferaţi fără să plătească,dar şi fără să îşi facă griji că ascultă muzică piratată.
6
Contentul afişat pe site este doar pentru promovarea artiştilor, nu se afişează piese plătite de pe
album sau conţinut exclusiv.
Un alt obiectiv este acela de a da site-ului un aspect cât mai “recent”, iar prin afişarea postărilor
sociale se obţine acest lucru.
Îmbinarea elementelor specifice unei platforme de ascultat muzică:player-ul local, dar si

playerele Soundcloud, Spotify , elementelor specifice unei platforme de descarcat muzică: 3
posibilitaţi de descărcare:local, de pe Amazone sau de pe iTunes, toate fiind gratuite, elementelor
specifice unui aplicaţii sociale:modului de comentarii, posibilitatea de a urmări un artist, de a
nota muzica acestuia reprezintă scopul proiectului.
1.4. Structura proiectului
Proiectul are 6 secţiuni principale : Home, Top100, Songs, Videos, Mixtapes, News . Fiecare
secţiune conţine pagina main(principală) ,iar de pe fiecare pagină principală se poate ajunge la
pagina individuală de content. De asemenea site-ul conţine si o pagină individuală de artist şi o
pagină individuală de user.
Proiectul este format din trei elemente cheie:baza de date,sistem software şi interfaţa grafică.. În
capitolele ce vor urma ,voi detalia fiecare secţiune în parte si fiecare element cheie al proiectului.
Pentru arhitectura site-ului am folosit modelul arhitectural model-view-controller.
7
2. Prezentarea domeniului din care face parte lucrarea
Site-ul dabeatspot.com este un site de socializare,dar şi o platforma online de ascultat şi

downloadat muzică. De asemenea poate fi integrat în domeniul site-urilor de divertisment online.
Utilizatorul îşi poate crea un cont de user personalizat în care se vor afişa toate noutaţile legate
de artiştii preferaţi, în care îşi pot urmări activitatea de pe site: comment-urile pe care le-au lăsat,
rating-ul şi pot să vizualizeze şi profilul altor utilizatori. Secţiunea de comments ajută utilizatorii
sa interacţioneze şi sa işi exprime părerea despre melodiile ,videoclipurile,albumele postate.
Retelele de socializare se clasifică după tipul și natura conținutului creat de utilizatori (subiectul
de interacțiune dintre persoane) astfel:fotografie, muzică, filme, videoclipuri, jocuri online;
colaborare între persoane sau platforme de socializare.
Un site poate fi considerat o rețea socială sau comunitate virtuală dacă utilizatorii pot comenta,
vota, aprecia și distribui conținutul postat de alte persoane, și în același timp utilizatorul poate
posta la rândul lui conținut care să poată fi comentat, apreciat și distribuit de către alți utilizatori.
Un site de social networking este orice site care are o pagină de profil public sau semi-public,
inclusiv site-uri matrimoniale, site-urile fanilor și așa mai departe. Un site social media are
profile si conexiuni, combinate cu instrumentele necesare pentru a partaja cu ușurință conținutul
on-line de toate tipurile.
Divertismentul online îmbină funcționalitatea interactivă și de conținut , inclusiv live streaming

video, comunicații video chat, jocuri multi-player, muzică și clipuri video de streaming, cu rețele
de servicii sociale , cum ar fi managementul social grafic, forumuri , comentarii , evaluări și
geo-locații opțiuni. Este fundamentul pentru o mai captivantă, interactive aplicatie, îmbogățind
și experiența de consum de conținut prin îmbinarea canalelor sociale. Divertismentul social este
diferit de site-urile de rețele sociale, deoarece primul se bazează în mod fundamental pe
experiențe de îmbinare a urmatoarelor parti: funcționalitate, conținut și oameni, în timp ce acesta
din urmă se bazează în principal pe construirea și menținerea unor relații cu alți utilizatori. În
mod tipic, site-urile de divertisment social sunt definite de către site - urile individuale dedicate
8
unui anumit tip de experiență de divertisment care încorporează serviciile de bază de rețele
sociale.
În domeniul de divertisment social, conținutul online este strâns legat de caracteristicile

sociale. Aceste interacțiuni în jurul conținutului de a crea o experienta extrem de personalizata
pentru utilizatorii care, la rândul său, conduc un ciclu al consumatorilor în curs de desfășurare,
fiind un angajament pentru furnizorii de servicii. În acest sens, site-urile de divertiment social
rafinează paradigma stabilită de către rețelele sociale, în care interacțiunile cu ceilalți sunt
centrale și motivele pentru a interacționa cu ei sunt secundare.
Principalele tipuri de servicii care oferă divertisment sociale sunt împărțite în două
categorii: platforme vii și platforme de internet ambalate . Principalul factor de diferențiere între
aceste categorii este că oferă experiența lor printr - o modalitate exclusiv online în timp real , iar
acesta din urmă a extins experiența utilizatorului prin includerea de platforme mobile.
Fiind o platformă de downloadat şi ascultat muzică, exista foarte multe aplicatii asemanătoare.
Acum există zeci de platforme prin care poţi să asculţi şi să încarci muzică (Spotify, Pandora,
Rdio sau blinkboxmusic, din păcate. nu sunt încă valabile pentru România), tocmai de aceea am
alcătuit un top de 10 platforme cu ajutorul cărora îţi poţi încărca şi distribui propria muzică, ca şi
artist DIY (Do It Yourself). Să începem:
 SoundCloud
Este o platformă de distribuţie online înfiinţată în Suedia în anul 2007, gratuită pentru artişti
(pentru început aveţi 180 de minute, mai precis cam 3 albume de aproximativ 14 piese, a câte 3-4
minute fiecare, ceea ce este suficient, după care puteţi trece la versiunea Pro, pentru care plătiţi).
Se bucură, mai ales în ultimii ani, de o creştere considerabilă a numărului de utilizatori (în
prezent au peste 40 de milioane de conturi înregistrate şi 200 de milioane de ascultători).
Puteţi să urmăriţi artişti, să apreciaţi, distribuiţi, cumpăraţi, dar şi să adăugaţi comentarii la piese.
Aveţi şi buton de embed, dar puteţi distribui track-ul şi pe Twitter, Facebook, Tumblr, Google+,
Pinterest şi mail.
9
Platforma este uşor de folosit, iar design-ul este unul foarte prietenos.
Artişti precum Beyonce, Sam Smith, Statik Selektah, Common, Ed Sheeran, Kygo, Robin
Schulz, dar şi din România, cum ar fi Vlad Dobrescu, Dj Undoo, Grasu XXL sau Gojira
uploadează piese/remixuri pe SoundCloud.
 Bandcamp
O platformă fondată în 2007, în SUA, pentru promovarea artiştilor.
Îţi poţi vinde şi distribui muzica în schimbul adreselor de e-mail (care este, de altfel, cel mai
important lucru: lista de e-mail-uri a fanilor tăi, pentru a avea un contact direct cu ei; în plus, lista
este a TA, faţă de reţelele de socializare unde nu tu eşti “stăpânul”, dar vorbim despre asta pe
larg, într-un alt post).
Bandcamp este un instrument perfect pentru fan marketing.
De asemenea, poţi face şi merchandise, un al lucru esenţial pentru un artist. Fanii îşi pot susţine
în mod direct artiştii preferaţi, o situaţie în care câştigă în mod direct ambele părţi (50-50).
Există două moduri de înregistrare: artist singup şi fan singup. De asemenea ai opţiunea
“Discover”, prin care poţi găsi artişti similari cu tine/cu cei pe care-i asculţi deja.
Ai pagină proprie pe platformă şi îţi poţi promova conturile de pe reţelele sociale.
 YourListen
O combinaţie între Mixcloud şi 8tracks. Îţi poţi adăuga muzica gratuit, fără niciun fel de
restricţie (număr de melodii, spaţiu etc.). Este o platformă pentru muzică: piese, albume, mix-uri,
podcast-uri, prestaţii live, show-uri radio, remix-uri.
Poţi să te conectezi cu ascultătorii, dar şi cu alţi artişti. Îţi poţi distribui piesele pe Twitter,
Facebook, blog (ai cod embed pentru fiecare track) etc.
10
3. Tehnologii folosite
3.1 Limbaje
3.1.1 HTML5
HTML , care vine de la HyperText Markup Language , este blocul de construcție cel mai de bază
a unei pagini web și utilizate pentru crearea și reprezentarea vizual o pagină web. Ea determină
conținutul unei pagini web , dar nu și funcționalitatea .
HTML adaugă " marcare " pentru textul standard in limba engleza . Hyper Text face trimitere la
link-uri care conectează paginile Web una la alta . Prin crearea și încărcarea paginilor Web la
Internet , deveniți un participant activ în World Wide Web odată ce site- ul este online . HTML
acceptă imagini vizuale și alte mijloace media , de asemenea. Cu ajutorul HTML oricine poate
face site-uri web dinamice precum și statice. HTML este limbajul care descrie structura și
conținutul semantic al unui document web . Conținut într- o pagină web este etichetată cu
elemente HTML , cum ar fi < head> , < title > , < body> , < Article > , < section> < p > < div > ,
< span> , < img > , <poza > și așa mai departe . Aceste elemente formează elementele
constructive ale unui site web .
Elemente in HTML au atribute ; acestea sunt valori suplimentare, care configurează elementele
sau adaptează comportamentul acestora în diverse moduri pentru a îndeplini criteriile
utilizatorilor.
HTML este limbajul care descrie structura și conținutul semantic al unui document web ; este
alcătuit din elemente , fiecare dintre acestea putând fi modificate printr-o serie de atribute .
11
3.1.2 Smarty
Smarty este un motor de template pentru PHP. Mai precis, acesta facilitează o modalitate de a
separa gestionabil logica aplicației și a conținutului de prezentarea acestuia. Acest lucru este cel
mai bine descris într-o situație în care programatorul aplicației și designer-ul de șablon joaca
roluri diferite, sau în cele mai multe cazuri, nu sunt aceeasi persoană.
De exemplu, să presupunem că creați o pagină web care afișează un articol de ziar.
• Articolul a $ titlu, $ tagline, $ autor și corpul $ sunt elemente de conținut, ele nu conțin
informații despre modul în care acestea vor fi prezentate. Ele sunt trecute în Smarty de aplicație.
• Apoi, proiectantul șablon editează șabloanele și utilizează o combinație de tag-uri
HTML și tag-uri șablon pentru a formata prezentarea acestor variabile, cu elemente, cum ar fi
tabele, div lui, culori de fundal, font, dimensiuni, foi de stil, etc.
• Într-o zi un programator trebuie să se schimbe modul în care conținutul de articol este
preluat, adică o modificare logica aplicației. Această modificare nu afectează proiectantul șablon,
conținutul va ajunge încă în șablon exact la fel.
• De asemenea, în cazul în care proiectantul șablon dorește să reproiecteze complet
șabloanele, acest lucru ar necesita nici un schimb la logica de aplicare.
• Prin urmare, un programator poate face modificări la logica de aplicare, fără necesitatea
restructurării template-uri, și proiectantul șablon poate face modificări la template-uri, fără a rupe
logica aplicației.Un singur scop are proiectarea Smarty si acela este separarea logicii de afaceri și
logica de prezentare.
• Acest lucru înseamnă că template-uri pot conține cu siguranță logica cu condiția ca
aceasta este doar de prezentare.
• Acest lucru nu înseamnă însă că Smarty forțează o separare a logicii de afaceri și de
prezentare. Smarty nu cunoaște care este care, deci plasarea logica de afaceri în șablonul este
propriul dvs. logica.
Unele dintre caracteristicile lui Smarty:
• Este extrem de rapid.
• Este eficient deoarece PHP face treaba murdară.
• Este inteligent in recompilarea numai fișierele șablon care au fost modificate.
12
• Puteți crea cu ușurință propriile funcții personalizate și modificatorii variabilă, astfel
încât limba șablon este extrem de extensibila.
• Permite un numar nelimitat de secțiuni
• Este posibil de a încorpora codul PHP chiar în fișierele șablon, deși acest lucru nu poate
fi necesar (și nici recomandat), deoarece motorul este atât de personalizabil.
• sprijin în cache încorporat
• Surse șablon Arbitrar
• Funcții de manipulare cache personalizate
• Arhitectura Plugin
3.1.3 CSS
Cascading Style Sheets (CSS) este un limbaj foaie de stil folosit pentru a descrie prezentarea
unui document scris într-un limbaj de marcare. Deși este cel mai des folosit pentru a seta stilul
vizual de pagini web și interfețe scrise în HTML și XHTML, limbajul poate fi aplicat oricărui
document XML, inclusiv XML simplu, SVG și XUL. Impreuna cu HTML și JavaScript, CSS
este o tehnologie de piatra de temelie folosita de cele mai multe site-uri web pentru a crea pagini
web vizual angajarea, interfețe de utilizator pentru aplicații web și interfețe de utilizator pentru
multe aplicații mobile.
CSS este destinat în primul rând pentru a permite separarea conținutului documentului de
prezentare document, inclusiv aspecte cum ar fi aspectul, culorile și fonturile. Această separare
poate îmbunătăți accesibilitatea conținutului, oferă mai multă flexibilitate și control în
specificarea caracteristicilor de prezentare, activați mai multe pagini HTML pentru a partaja
formatare prin specificarea CSS relevante într-un fișier .css separat, și de a reduce complexitatea
și repetarea în conținutul structural.
Această separare de formatare și conținut face posibilă prezentarea aceeași pagină de marcare în
stiluri diferite pentru diferite metode de redare, cum ar fi pe ecran, în format tipărit, prin voce
13
(când se citește de un browser sau un ecran cititor bazat pe voce) și , dispozitive tactile bazate pe
braille. Acesta poate fi, de asemenea, utilizat pentru a afișa pagina de web diferit, în funcție de
dimensiunea ecranului sau a dispozitivului pe care acesta este vizualizat. Cititorii pot specifica,
de asemenea, o foaie de stil diferit, cum ar fi un fișier CSS stocat pe calculatorul propriu, pentru
a trece peste cel pe care autorul a specificat.
Modificări aduse design-ului grafic al unui document (sau sute de documente) pot fi aplicate
rapid și ușor, prin editarea a câteva linii în fișierul CSS .
Deși au apărut unele deficiente de compatibilitate între browsere, majoritatea proprietăților CSS3
au fost implementate cu succes in variantele browserelor noi.
3.1.4 RedBean
RedBeanPHP este un produs liber, independent, BSD licențiat, open-source cu software - ul scris
de Gabor de Mooij . Este o bibliotecă de sine stătătoare, care nu face parte din nici un cadru.
RedBeanPHP este un obiect mapper relațional on-the-fly, acest lucru înseamnă că nu există nici
o configurare în avans. Sistemul se bazează pe convenții în întregime și adaptează schema bazei
de date pentru a se potrivi nevoilor programului. In acest fel, lovește un echilibru între NoSQL și
tradiționale RDBMS soluții.
RedBeanPHP este diferit de alte ORM sisteme , deoarece nu necesită configurare în XML ,
YAML sau JSON . Se adaptează pe schema bazei de date bazate pe nevoile programului. Toate
tabelele și coloanele sunt create on-the-fly, fără configurare în avans sau de cartografiere. Se
adaugă automat coloanele tabelelor dacă este necesar și modifică tipul coloanei pentru a se
potrivi cerințelor sale de conținut. În cazul în care dezvoltatorul se face in curs de dezvoltare și
nu sunt de așteptat mai multe modificări de schemă, schema poate fi congelată în vederea
detașării în medii de producție. După salvarea bazei de date nu se mai fac modificări ale schemei.
14
Relațiile dintre tabele sunt mapate în același mod: prin convenție. De exemplu, pentru a crea o
relație unu - la-mulți între două tabele se atribuie o matrice la proprietate care poartă numele
tabelei destinație. Acest lucru creează automat tabelul precum si coloanele necesare.
3.1.5 JavaScript
JavaScript ( JS ) este un limbaj de programare ușoară , cu funcții de primă clasă . Cel mai bine
cunoscut ca limbaj de scripting pentru paginile web , în mai multe medii non-browser .JS este un
prototip bazat pe , multi - paradigmă , limbaj de scripting dinamic , de sprijin .
Alaturi de HTML si CSS , este una dintre cele trei tehnologii de bază din producția mondială de
conținut Wide Web ; majoritatea site-urilor îl folosesc și este susținut de toate browserele
moderne Web fără a plugin-uri . JavaScript este cu funcții de primă clasă , ceea ce face un
limbaj multi- paradigmă , sprijinirea orientată pe obiect pe bază de prototip , stiluri de
programare imperative , și funcționale . Are un API pentru lucrul cu text, tablouri , date și
expresii regulate , dar nu include nici un i / o , cum ar fi crearea de rețele , stocare , sau facilități
grafice.
3.1.6 PHP
PHP este un limbaj de server de scripting , precum și un instrument puternic pentru a face
dinamice și interactive pagini web . PHP este un utilizat pe scara larga , gratuit.
PHP Hypertext Preprocessor ( PHP ) este un limbaj de programare , care permite dezvoltatorilor
web sa creeze conținut dinamic care poate să interacționeze cu bazele de date . PHP este, în
principiu utilizat pentru dezvoltarea de aplicații software bazate pe web .
PHP are un complet set de funcționalități orientate pe obiect incluzând suport pentru clase, clase
abstracte, interfețe, moștenire, constructori, clonare, excepții, și multe altele.
15
PHP suporta funcții de “prima mână”, asta însemnând ca o funcție poate fi asignată unei
variabile. Atât funcțiile definite de utilizator cat și cele definite de limbaj pot fi referențiate de o
variabilă și invocate dinamic. Funcțiile pot fi furnizate ca argument către alte funcții
(funcționalitate denumită funcții de “Înalt Nivel”) sau pot returna alte funcții.
Recursivitatea, o funcționalitate care permite unei funcții să se auto-apeleze este suportată de

limbaj, dar majoritatea codului PHP se concentrează pe iterație.
PHP a fost creat pentru scopul primar de a scrie aplicații web, dar este de asemenea util pentru
scrierea de scripturi pentru linia de comandă (CLI). Programele PHP de linie de comandă te pot
ajuta să automatizezi sarcini comune precum testarea, lansarea, și administrația aplicației.
3.2 Programe
3.2.1 Google Chrome
Chrome este un browser web rapid, simplu şi sigur, conceput pentru internetul modern. Chrome
este conceput pentru a fi rapid. Porneşte rapid de pe desktop, încarcă paginile web instantaneu şi
rulează rapid aplicaţii web complexe. Google Chrome este echipat cu V8, un motor JavaScript
mai puternic, pe care l-am dezvoltat pentru a rula aplicaţii web complexe cu viteza luminii.
Chrome este proiectat pentru a fi cât mai simplu. Nu împiedică cu nimic navigarea pe internet,
astfel că vă puteţi concentra asupra a ceea ce contează cel mai mult. Tocmai de aceea, Chrome
are o singură casetă, caseta polivalentă, din care puteți să căutați pe web și să navigați la site-uri.
Aceasta se completează automat pe măsură ce introduceți text și oferă sugestii. Filele rapide din
Chrome pot fi trase şi plasate sau rearanjate cu uşurinţă. Iar, datorită arhitecturii de
multiprocesare oferite de Chrome, puteţi deschide o sută de file fără ca viteza browserului să fie
afectată.
Dacă este activată tehnologia Navigare sigură în Chrome și accesaţi un site web care poate
conţine phishing sau malware, se va afişa un avertisment asemănător cu cel de mai jos.
16
Un atac de phishing are loc atunci când cineva îşi asumă o identitate falsă, pentru a vă determina
să dezvăluiți informaţii personale sau de altă natură delicată, de obicei, prin intermediul unui site
web trucat. În schimb, programele malware sunt acele programe software instalate pe computer
fără să știți, care dăunează computerului sau care pot fura informaţii de pe acesta.
3.2.2 Mozilla Firefox
Firefox este un popular browser Web Mozilla , disponibil pentru mai multe platforme , inclusiv
Windows , OS X și Linux pe desktop-ul și toate dispozitivele mobile Android și iOS. Cu o amplă
compatibilitate , cele mai noi tehnologii Web , și instrumente de dezvoltare puternice , Firefox
este o alegere excelentă atât pentru dezvoltatorii Web și utilizatorii finali .
Firefox este un proiect open-source ; o mare parte din codul este contribuit, de comunitatea
noastră uriașă de voluntari
Unul dintre instrumentele Mozilla este Mozilla Firebug. Firebug îți oferă în Firefox o mulțime de
unelte de dezvoltare în timp ce navighezi. Poți edita, depana, monitoriza CSS, HTML și
JavaScript în timp real în orice pagină.Un alt instrument folosit este MeasureIt,un instrument
folosit pentru a verifica latimea,inaltimea sau alinierea elementelor în pagină. Măsurătorile sunt
în px.
3.2.3 Notepad++
Notepad ++ este un editor de text și editor de cod sursă pentru a fi utilizat cu Microsoft
Windows. Spre deosebire de Notepad , editorul de text pentru Windows , acceptă editarea cu tab-
uri , care permite lucrul cu mai multe fișiere deschise într -o singură fereastră .
Cele mai importante facilități ale acestui program sunt:
17
 evidențierea sintaxei pentru diverse limbaje de programare;
 are implementată autocompletarea pentru cele mai cunoscute limbaje;
 are suport pentru drag&drop;
 este disponibil în mai multe limbi( inclusiv în limba română);
 pot fi definite etichete;
 permite deschiderea simultană a mai multor fișiere ale proiectului, insclusiv a aceluiași
fișier în două ferestre alăturate pentru a putea dezvolta mai ușor;
 pot fi definite noi sintaxe;
 admite căutarea și înlocuirea unor expresii;
Acest editor de text a fost folosit la dezvoltarea aplicației pentru scrierea codului necesar întrucât
oferă posibilitatea vizualizării în mod organizat a acestuia și în același timp evidențiează sintaxa
pentru PHP
3.2.4 WinScp
WinSCP este un client SFTP și FTP cu interfață grafică, cu sursă deschisă, pentru Windows.
Protocolul învechit SCP este de asemenea acceptat. Funcția sa principală este transferarea
securizată a fișierelor între un calculator local și unul la distanță.
Caracteristici:
 Interfață grafică
 Tradus în multe limbi
 Integrare cu Windows (tragere și plasare, URL, scurtături ca icoane pe spațiul de lucru)
 Toate operațiile obișnuite cu fișiere
 Compatibil cu protocoalele SFTP și SCP prin SSH-1 și SSH-2 precum și cu vechiul
protocol FTP
 Scriptare și interfață cu linia de comandă pentru grupuri de fișiere
 Sincronizare de directoare în câteva moduri semiautomate sau în întregime automate
18
 Editor de text integrat
 Compatibil cu parole transmise prin SSH, comenzi din tastatură, cheie publică și
autentificare prin protocol Kerberos (GSS)
 Integrare with Pageant (agentul de autentificare pentru PuTTY) pentru o compatibilitate
completă cu autentificarea cu cheie publică prin SSH
 Interfețe Explorer și Commander.
 Opțional, stochează informații despre sesiune.
 Opțional, acceptă operare portabilă folosind un fișier de configurare în loc de intrări în
regiștri, convenabil pentru operarea de pe suporturi media amovibile
WinSCP poate executa toate operațiile de bază cu fișiere, precum descărcarea și încărcarea.
Permite, de asemenea, redenumirea fișierelor și directoarelor, crearea de noi directoare,
schimbarea proprietăților fișierelor și directoarelor și crearea de legături simbolice și scurtături.
Una din cele două interfețe permite utilizatorului chiar și gestionarea fișierelor din calculatorul
local.
Cu WinSCP se poate crea conexiune la un server SSH (Secure Shell) prin protocolul SFTP (SSH
File Transfer Protocol) sau SCP (Secure Copy Protocol), sau conexiune la un server FTP (File
Transfer Protocol).
3.2.5 Adobe Photoshop CS6
sAcum, Photoshop poate analiza, identifica și potrivi fonturile latine dintr-o imagine sau o
fotografie, eliminând jocul întâmplării presupunerile din identificarea fontului perfect pentru
designul dorit.
Photoshop utilizează tehnologia care ține cont de conținut pentru a umple golurile în mod
inteligent atunci când utilizați instrumentul Decupaj pentru a roti o imagine sau pentru a extinde
pânza dincolo de dimensiunea originală a imaginii.
19
4. Prezentarea aplicației
4.1 Scurtă descriere
Site-ul dabeatpot.com este un site de socializare, o platformă de ascultat şi downloadat muzică, o

platformă de vizualizat videoclipuri, dar şi un site de divertisment online.
Acesta intruneşte toate aspectele pe care un ascultator de muzica hip-hop le cauta in momentul
de faţa pe piaţa. Pe pagina principala, se gasesc cele mai noi cântece, videoclipuri, albume si de
asemenea cele mai cautate colaborări. In afara de pagina personala mai exista urmatoarele
secţiuni:
 Songs – o listare a cântecelor grupate pe zile

 Mixtapes – o listare a albumelor grupate pe zile
 Videos – o listare a videoclipurilor grupate pe zile
 Top100 – o listare a cântecelor,albumelor si videoclipurilor grupate dupa numarul de
vizualizări din ultima săptămână
 UserProfile - pagina personala a utilizatorului care conţine informaţii despre utilizator,
precum si preferinţele acestuia(artistii preferati si noutatile artistilor, activitatea
utilizatorului pe site)
 ArtistProfile - pagina personala a artistului care conţine melodiile,albumele,videoclipurile
acestuia
 Webseries – o listare a series-urilor grupate pe zile
 Search – un motor de cautare dupa numele artistului sau numele conţinutului
Pentru fiecare tip de conţinut există o pagina individuala care conţine mai multe funcţionalitaţi.
In cazul cântecelor si albumelor există un player unde se poate asculta melodia/albumul
respectiv, exista secţiunea „Others also liked” al carui conţinut este afişat dupa o serie de
prioritaţi, de asemenea există si „small elements” si „main banner”. În cazul videoclipurilor
există posibilitatea de a vizualiza videoclipul, de asemenea sunt trecuţi toţi artiştii care au
20
contribuit la acel videoclip si poate să înceapă videoclipul de la momentul în care cantă un artist.
Fiecare pagina individuală va fi detaliată.
4.2 Proiectare aplicație
Pentru a putea afișa informaţii despre conţinutul paginilor, pentru a putea respecta toate cerinţele
necesare a fost creată o bază de date relaţionala(baza de date în care tabelele sunt legate între ele
prin relaţii) şi au fost create urmatoarele tabele :
 ads(ad_id,type,nature,content_type,content_id,name,duration,start_time,
finish_time,impresions,image,link,script,active,date_added,last_modified, views) – acest
tabel conţine informaţii despre reclamele adăugate pe site
 artists(id_artist,name,image,artist_page_banner,artist_news_banner,
artist_mixtape_banner,artist_small_element,official_website,youtube_url
,twitter_url,facebook_url,vine_url,hhvlife_url,date_added,date_modified,instagram) –
acest tabel conţine informaţii despre artişti
 comments(id,id_user,id_content,content_type,id_content_parent,comment_parent,date,ap
proved ,content ,image) – acest tabel conţine informaţii despre comment-urile lasate de
utilizatori , reply-urile de la un comment
 dj(id_dj,name,nickname,image,elementimage,official_website,youtube,twitter,facebook,d
ate_added,date_modified,vimeo,instagram,google,wikipedia) – acest tabel conţine
informaţii despre dj
 mixtapes(id_mixtape,title,zip,id_genre,tracks,release_datetime,front_cover,back_cover,id
_designer,downloadable,runtime,views,downloads,plays,rating,general_rating,popularity,
official,id_admin_add,id_admin_edit,date_added,date_modified,visible,series_volume,up
coming,link_itunes, link_amazone, mixtape_upcoming_banner, mixtape_banner,
small_element, teaser, video_content_id, id_mixtape_old, keywords, mobile_rating) –
acest tabel conţine informaţii despre albumele de pe site
21
 mixtapes_featured(position, id_mixtape) –acest tabel conţine informaţii despre albumele
cu colaborări importante
 mixtapes_spotlight(position, id_mixtape) – acest tabel conţine informaţii despre albumele
cu colaborări importante și poziţia acestora
 mixtapes_upcoming(id, id_mixtape, upcoming_image, release_datetime, date_added)
 mixtapes_djs(id_mdj, id_mixtape, id_artist, position, date_added) – acest tabel conține
informații despre albumele care urmează să fie lansate
 mixtape_featured_artist(id_mfa, id_mixtape, id_artist, track_position, appereance,
date_added, date_modified) – acest tabel conține numele artiștilor colaboratori de la un
album
 mixtape_primary_artist(id_mpa, id_mixtape, id_artist, track_position, appereance,
date_added, date_modified) – acest tabel conține numele artiștilor unui album, în acest
tabel se face legatura între album și artist
 mixtape_series(id_mixtape_series,name,page_banner,mixtape_banner,small_element,
date_added, date_modified) – acest tabel conține informații despre albumele grupate într-
o serie de albume
 mixtape_tracks(id_track, id_mixtape, filename, title, album, id_artist, id_genre, id_dj,
position, rating, plays, downloads, path, runtime, playtime_string, year, date_added,
date_modified) – acest tabel conține informații despre melodiile dintr-un album
 mixtape_tracks_artists(id_mta, id_track, id_artist, position, date_added) – acest tabel
contine informații despre artiștii unei melodii dintr-un album
 songs(id_song, title, url, mp3, id_genre, release_datetime, runtime, front_cover,
back_cover, link_itunes, link_amazone, id_designer, id_photographer, flames, rating,
views, plays, downloads, popularity, downloadable, id_admin_add, id_admin_edit,
description, reg_image, quick_title, soundcloud,zippyshare, youtube, audiomac,
keywords) – acest tabel conține informații despre un cântec
 songs_featured(position, id_song) – acest tabel conține informații despre cântecele afișate
pe homepage
 songs_spotlight(position, id_song) – acest tabel conține informații despre cântecele
afișate pe homepage
22
 song_featured_artist(id_sfa, id_song, id_artist, time_position, position, date_added,
date_modified) – acest tabel face legatura între artiști și cântec
 song_primary_artist(id_spa, id_song, id_artist, time_position, position, date_added,
date_modified) – acest tabel face legatura între artistul principal și cântec
 song_producer(id_sp, id_artist,position, date_added, date_modified) – acest tabel face
legatura între producător și cântec
 top100(id, content_type, best_pos, days_in_top) – acest tabel conține informații
referitoare la conținutul afișat în Top100
 users(id_user, last_login, confirmation_code, confirmed, active, id_group, firstname,
lastname, password, email, state, phonecode, phoneprefix, phone_suffix, ip_registered,
country_id, gender, birthdate, facebook, twitter, instagram, snapchat, vine, soundcloud,
date_added, username, user_image, banner_image, banner_extra, lastseennotif) – acest
tabel conține informații despre utilizator
 videos(id_video, category, title, id_webseries, season, episode, episode_name, id_genre,
description, runtime, views, release_datetime, video_file, youtube, vimeo,
editor_id_artist, filmographer_id_artist, director_id_artist, video_producer_id_artist,
visible, bigfeature, smallfeature, previewimage, date_added, date_modified,
hshh_featured_1a, hshh_featured_1b, keywords) – acest tabel conține informații despre
video
 video_featured_artist(id_vfa, id_video, id_artist, time_position, position, date_added,
date_modified) – acest tabel conține informații despre artiștii featured ai unui video și
face legătura între aceștia și video
 video_guests(id_vg, id_video, id_artist, time_position, position, date_added,
date_modified ) – acest tabel conține informații despre artițtii invitați ai unui video
 video_primary_artists(id_vpa, id_video, id_artist, time_position, position, date_added,
date_modified) – acest tabel contine informatii despre artistii principali ai unui video
 video_producers(id_vpr, , id_video, id_artist, position, date_added, date_modified) –
acest tabel face legătura între producător și video
 video_thumbnails(id_thumbnail, id_video, image, position, date_added, date_modified) –
acest tabel face legatura intre imaginile(copertile pentru un video) si video-ul respectiv
23
 web_series(id_webseries, title, image, banner, description, search_keywords, date_added,
date_modified ) – acest tabel conține informații despre un webseries
 webseries_artists(id_wa, id_webseries, id_artist, position, date_added) –acest tabel face
legatura între un webseries și artistul acesteia
Pentru arhitectura site-ului am folosit modelul arhitectural model-view-controller.
Fig. 1 Model-View-Controller
Model-view-controller (MVC) (din engleză, aproximativ: model-față-controlor) este un model

arhitectural utilizat în ingineria software. Succesul modelului se datorează izolării logicii de
business față de considerentele interfeței cu utilizatorul, rezultând o aplicație unde aspectul
vizual sau/și nivelele inferioare ale regulilor de business sunt mai ușor de modificat, fără a afecta
alte nivele.
Fişierul principal de configurare este /config.php , aici se pot configura datele de access la baza
de date precum şi alte cai folosite de aplicaţie.
Aplicaţia este structurată în 3 componente majore:
I. MODEL (/model/)
Conţine toate clasele definite în aplicaţie, numai aici se face interacţiunea cu baza de date.
Conţine clase ajutătoare cum sunt:
a. MySql (/model/db/)
24
b. Procesare imagini (/model/nknimage)
c. General, colecţii de funcţii cu diverse roluri (/model/general.php)
d. Template engine (/model/Smarty.class.php)
II. CONTROLLER (/controller/)
Conţine toate procedurile necesare pentru a procesa informaţiile şi a le trimite către “VIEW”
(template engine). Load-ul acestora şi impartirea pe sectiuni se face în (/init.php).
Fiecare secţiune are un controller principal, spre exemplu “Songs” are controller-ul principal
“/controller/songs.php” iar acesta este împartit în sub-controllere în funcţie de procese
(exemplu: /controller/songs/songs-listing.inc).
III. VIEW (/view/hdmixtapes/)
Pentru VIEW a fost folosit ca şi template engine SMARTY. Toate datele sunt împachetate în
blocuri şi randate aici.
Astfel în partea de model am extras informaţiile necesare din baza de date ,folosind RedBean şi
Php, în partea de controller am modelat acccesul la aplicaţie , iar în partea de view se află
template-urile ,partea de css şi script-urile pentru fiecare pagină.
Pentru afişarea informaţiilor despre conţinut am folosit RedBean pentru a le extrage din baza de
date. Informaţiile au fost extrase sub forma de array-uri multidimensionale cu ajutorul funcţiilor
de interogare SQL oferite de RedBeanPhp. În functie de dimensiunea array-ului am folosit
getAll, getCel, getRow,update.
25
4.3 Paginile principale
Pe site există 9 secţiuni principale: Homepage, Top100, Songs, Mixtapes, Videos, News, Search,
LogIn şi CreateAccount care pot fi selectate din meniul principal.
Pe Homepage este afişat conţinutul cel mai relevant,conţinutul care se vrea să fie promovat pe
site.Afişarea conţinutului este aceeaşi ca pe restul paginilor de pe site. Se foloseşte acelaşi box
pentru albume pentru orice listare de albume de pe site, se foloseşte acelaşi box pentru cântece
pentru toate listările de cântece de pe site,acelaşi box pentru series şi acelaşi format pentru
listarea videoclipurilor. Astfel pe homepage sunt afişate Featured Songs,Featured Mixtapes si
Hottest WebSeries. În partea dreaptă este o listare a pieselor cu cele mai multe vizualizări din
saptamana respectiva. Exista trei tab-uri :songs, mixtapes, videos. În continuarea acestui top se
află postările sociale cele mai recente ale artiştilor pentru ca vizitatorul să fie ţinut la curent cu
viaţa socială a artiştilor preferaţi. Pentru afişarea conţinutului de pe homepage există tabele
speciale în baza de date.
Pe paginile de listări de conţinut afişarea se face în functie de dată. Mai jos va urma o scurta
descriere pentru fiecare pagină de listare de conţinut.
26
Mixtapes-Main
Fig. 2. Mixtapes Main
 Spotlight Mixtapes
Apar cele 16 “Spotlight Mixtapes“
Primele 8 Spotlight Mixtapes (1-8) apar în mod random
Ultimele 8 Spotlight Mixtapes (9-16) apar în mod random
 Spotlight Nav
Shift între “Spotlight Mixtapes” 1-8 si 9-16
Shift se face automat la fiecare 6 secunde după încărcarea paginii
 Upcoming Mixtapes"
Apar cele 4 “Upcoming Mixtapes” care sunt cele mai aproape de release date
 All
 Today’s New Mixtapes
o Apar toate “Mixtapes” cu release date de astăzi.
*Excepție: Atunci când se termină o zi, mixtape-urile din ziua respectivă rămân sub
categoria “Today’s New Mixtapes” până se adaugă albume noi
Exemplu:
27
Pe 12 Februarie au fost adăugate 10 albume, pe 13 Februarie nu s-a adăugat nici un
album până la ora 13:00! -> Albumele din 12 Februarie apar sub “Today’s new mixtapes”
până pe 13 Februarie la ora 13:00.
 Yesterday’s Mixtapes
Apar “Mixtapes” cu release date (Admin B - H) din ziua precedentă
*Daca exceptia din “Today’s New Mixtapes” se aplică, atunci Yesterday’s Mixtapes apar
cu data din ziua precedentă până nu se mai aplică excepția
Upcoming Mixtapes Listing Page
Link:HDMixtapes.com/mixtapes/upcoming/1 … /upcoming/2 …"

 Upcoming Mixtapes
Apar toate upcoming mixtapes după release date. Mixtape-ul cel mai aproape de release
date apare primul,iar mixtape-urile fără release date apar ultimele cu “COMING SOON”
în locul datei
Mixtapeurile cu release astazi (dar cu o ora de release mai tarzie) apar cu “TODAY”
Mixtapeurile cu release date in urmatoarele 6 zile apar cu “Ziua Din Saptamana”
Songs Main
Fig. 3. Songs Main
28
 Spotlight Songs
Apar cele 16 “Spotlight Songs”
Primele 8 Spotlight Songs (1-8) apar în mod aleatoriu
Ultimile 8 Spotlight Songs (9-16) apar în mod aleatoriu
 Spotlight Nav
Shift intre “Spotlight Songs (Admin B - S)” 1-8 si 9-16.!
Shift se face automat la fiecare 6 secunde după încărcarea paginii
 All
 Today’s New Songs"
o Apar toate “Songs” cu release date (Admin B - H) de astazi.
 *Excepţie: Atunci când se termină o zi, song-urile din ziua respectivă rămân sub categoria
“Today’s New Mixtapes” până se adaugă cântece noi.
 Yesterday’s Songs
Apar “Mixtapes” cu release date din ziua precedentă
 *Dacă excepţia din “Today’s New Mixtapes” se aplică, atunci Yesterday’s Mixtapes apar
cu dată ziua precedentă până nu se mai aplică excepţia
 Listarea cântecelor pe zile
29
Videos Main
Fig. 4. Videos Main
 Today’s New videos: “Videos” cu release date de astăzi.

*Excepţie: Atunci când se termină o zi, video-urile din ziua respectivă rămân sub
categoria “Today’s New Videos” până se adaugă videos noi.
Exemplu:
 Yesterday’s Videos
Apar “Videos” cu release date din ziua precedentă
 Listare videos pe zile
30
 Listare series cu cel mai mare număr de vizualizări
Artist Listing Page
Fig. 5. Artist Page
31
Desi nu se accesează direct din homepage,există şi pagina de listare pentru un artist. Aceasta
conţine toate câtecele, albumele, videoclipurile, series-urile artistului respectiv.
 News Banner
 Small Element 1
o Prima alegere: abumele care au „Official Mixtapes= yes” si artistul principal al
albumului este artistul al carui conţinut se afişează,fiind sortate după data de
lansare, cel mai recent se afişează primul.
o A doua alegere sunt albumele care au artistul principal = artistul al cărui conţinut
se afişează, sortate după data de lansare, cel mai recent se afişează primul.
o A treia alegere sunt albumele care au featured artist sau dj = artistul al cărui
conţinut se afişează, sortate după data de lansare și după numărul de vizualizări,
cel mai recent se afişează primul.
 Social Media Icons:Facebook, Twitter, Instagram, Vine, Soundcloud, Wikipedia
 F- Mixtapes
o Prima alegere: abumele care au „Official Mixtapes= yes” si artistul principal al
albumului este artistul al carui conţinut se afişează,fiind sortate după data de
o A doua alegere sunt albumele care au artistul principal = artistul al cărui conţinut
o A treia alegere sunt albumele care au featured artist sau dj = artistul al cărui
conţinut se afişează, sortate după data de lansare si după numărul de vizualizări,
 H- Songs
o Prima alegere: cântecele care au „Official Songs= yes” si artistul principal al
cântecului este artistul al carui conţinut se afişează,fiind sortate după data de
o A doua alegere sunt cântecele care au artistul principal = artistul al cărui conţinut
32
o A treia alegere sunt cântecele care au featured artist sau dj = artistul al cărui
 J- Music Videos
o Prima alegere artistul principal al videoclipului este artistul al carui conţinut se
afişează,fiind sortate după data de lansare, cel mai recent se afişează primul.
o A doua alegere sunt videoclipurile care au artistul principal = artistul al cărui
conţinut se afişează, sortate după data de lansare, cel mai recent se afişează
primul.
o A treia alegere sunt videoclipurile care au featured artist sau dj = artistul al cărui
Search
Fig. 6. Search
In pagina search-ului, vor fi doar 4 tab-uri “Songs” “Mixtapes” „Series” „Videos” si “Artists”.
33
 Songs: pentru căutarea în tab-ul „Songs” s-a ţinut cont de următoarele lucruri:
o Se caută keywords-urile în: Song Title Artist(s) Featured Artist(s) Producer(s)
o Se afişeaza după cele mai relevante.
o Dacă sunt mai multe rezultate la fel de relevante, atunci se sortează după cele mai
multe “views”
 Mixtapes: pentru căutarea în tab-ul „Mixtapes” s-a ţinut cont de următoarele lucruri:
o Se caută keywords-urile în: Mixtape Title Artist(s) DJ(s) Track Title(s)
o Rezultatele se afişeaza după cele mai relevante.
multe “views”
 Videos: pentru căutarea în tab-ul „Videos” s-a ţinut cont de următoarele lucruri:
o Se caută keywords-urile în: Video Title Artist(s) DJ(s) Track Title(s)
multe “views”
 Artists
o Se caută keywords-urile în Artist name
multe “views”
 Precizări
o Ordine de Search
o Cand se efectuează un search, se caută rezultat în primul rând la “Songs”.
o Daca dă “0” results, atunci se caută la “Mixtapes”, dacă dă “0” results, atunci se
caută la “Artists”, dacă dă “0” results, atunci se afişeaza “0 results found” în tab-
ul de “Songs”
o Infinit Scroll-în loc de a face “Next Page”, această pagină va avea scroll infinit.
Încărcând câte 15 rezultate de fiecare dată când ajunge la partea de jos din pagină.
34
Mixtape Individual Page
Fig. 7. Mixtape Individual
 Top Navigation:Mixtapes > Artist Name > DJ Name > Mixtape Series (if available) >
Mixtape Title
35
 Compoziţia titlului:
Artist Name 1, Artist Name 2, Artist Name 3 | Mixtape Title [Hosted by DJ Name 1, DJ
Name 2, DJ Name 3, DJ Name 4, DJ Name 5]
 Alt Cover Navigation:Navigare prin Mouse Over sau Click
 Ordinea navigări:Front Cover, Back Cover, Alt Cover 1, Alt Cover 2, Alt Cover 3, Alt Cover
4, Alt Cover 5, Alt Cover 6
 Play Mixtape:link-ul deschide într-un nou tab player-ul
 Download Mixtape
o No Link & Opacity=40% dacă: “Downloadable” = No , “iTunes” = N/A, “Amazon ”
= N/A
o Link: dacă “Downloadable” = Yes, “iTunes” = N/A, “Amazon” = N/A, atunci
începe descărcarea
o Dacă “Downloadable” = Yes şi “iTunes” = Available şi “Amazon = N/A ,atunci
rezultatul este deschiderea unui overlay care permite descărcarea la alegere a
albumului respectiv. Se poate descărca de pe Amazon,de pe iTunes şi local
 Views: funcţionalitatea implementată pentru views indică numărul de vizualizări ale
albumului respectiv,o vizualizare fiind dată de un user care accesează albumul
 Downloads: indică numărul de descărcări ale albumului
 Comments: indică numărul de comment-uri lăsate la albumul respectiv
 Rating: există posibilitatea de a se da o notă albumului sau fiecărei piese de pe album
 Others also liked: se afişează în ordinea relevanţei albume recomandate de alţi utilizatori , şi
se ţin cont de urmatoarele priorităţi:
o Prioritatea 1 : Dacă albumul face parte dintr-un Mixtape Series atunci se iau toate
albumele din acel Mixtape Series şi se afişeaza în ordinea următoare:
o OAL 1 : Albumul cu cel mai mare număr de Series Volume
o OAL 2: Albumul cu al doilea cel mai mare număr de Series Volume
o OAL 3: Albumul cu al treilea cel mai mare număr de Series Volume
o .....
o OAL 15: Albumul cu al 15-lea cel mai mare număr de Series Volume
o Prioritatea 2 : Se caută albumele cu bifa Official de la acelaşi artist(i) şi se afişează în
ordinea:
36
o OAL 1 : Official mixtape de la acelaşi Artist cu cea mai recentă Release Date
o OAL 2: Official mixtape de la același Artist cu a doua cea mai recentă Release Date
o ...
o OAL 15: Official mixtape de la același Artist cu a 15a cea mai recentă Release Date
User Profile
Pentru pagina de User Profile exista două posibilităţi : vizualizarea propriului profil sau
vizitarea profilului altui utilizator. Pentru pagina personală pagina are 4 tab-uri:News Feed,
Notifications, Folowing şi Activity. Pentru pagina personală a altui utilizator avem doar 2
tab-uri: Following şi Activity. Mai jos voi descrie informaţiile afişate în fiecare tab.
NEWS FEED
In "News Feed" apare tot contentul în ordine cronologică legat de artiştii pe care utilizatorul
îi urmăreşte .
Fig. 8. UserProfile
 A: Username
 B: Drop Down Menu:link: Vezi "User Profile - Dropdown Menu (M)"
37
 C: Edit Banner Image
 D: Edit Profile Image
 E: Social Media Links
o Link (când exista): duce spre link-ul respectiv cu un "Warning" de iesire de pe
pagină
o Link (Cand Nu Exista): Duce spre "User Profile - Edit Social Media Links (M)
 F: User Profile Navigation Tab
 G: Artist Image: link: Individual Content Page
 H: Artist Name + New [Content Type]
 Content Type: New Song, New Mixtape, New Video, New Facebook Post, New Twitter
Post, New Instagram Post sau New Snapchat Post
o Link: Individual Content Page (Pentru song mixtape si video)
o Link: Către link-ul de social media
 I: Title
o Songs (Primary Artist = Artist): Song Title (Feat. Artist...) [Prod by. Prod...]
o Songs (Primary Artist ≠ Artist): Artist Name - Song Title (Feat. Arti...) [Prod...]
o Mixtapes: Mixtape Name [Hosted by ...]
o Videos (Music Video/ Primary Artist = Artist): Song Title (Feat. Artist...) [Prod
by. Prod...]
o Videos (Music Video/Primary Artist ≠ Artist): Song Title (Feat. Arti...) [Prod...]
o Videos (Web Series/ Web Series Artist = Artist): Web Series Title SxxExx -
Episode Name
o Videos (Interview): Video Title
o Social Media:Description
 J: Time Ago Added
o Link: Individual Content Page (Pentru song mixtape si video)
o : Către link-ul de social media
 K: Image
o Song: Front Cover (Daca nu există Song Cover atunci nu apare postul)
o Mixtape: Mixtape Cover
o Video: Preview Image
38
o Social Media: Image
o Link: Individual Content Page
o Link: Către link-ul de social media
NOTIFICATIONS
Fig. 9. UserProfile Notifications
 M: Artist Name: Link: La fel ca News Feed

 N: New [Content Type]: Link: La fel ca News Feed
 O: Time ago added: Link: La fel ca News Feed
 P: Content Image :Link: La fel ca News Feed
39
FOLLOWING
În "Following" apar toti artistii pe care user-ul îi urmăreşte.
Fig. 10. UserProfile Following
 T: Artist Image: Link: Individual Artist Page

 U: Artist Name: Link: Individual Artist Page
 V: Follow / Unfollow Button
40
ACTIVITY
În „Activity” apar toate comentariile făcute de user în ordine cronologică. Acest tab este
singurul tab care este văzut de restul userilor care vizitează profilul userului.
Fig. 11. UserProfile Activity
 T: Artist Image
 Link: Individual Content Page
 U: Artist Name:Link: Individual Content Page
 V: Title
o Format la fel ca "I - Title"
 W: Content Image
41
o Format la fel ca "K - Image" (Daca un song nu are cover, atunci doar nu apare
imagine)
 X: Content Play Button:Link: Individual Content Page
 Y: Reply Separator
o Aceeaşi linie apare când user-ul a făcut reply la un comment făcut de alt artist.
 Z: User Image:Link: User Profile
 2A: Username (of the user who commented first):Link: User Profile
 2B: Rating
o user-ul care a comentat a pus si un rating
 2C: Comment
 2D: Attached Image: Link: Full Screen Image
 2E: Like/Reply/Time Ago
 2F: User Image (De la user-ul la care suntem pe profile)
 2G: Username
 2H: Rating (If Available)
 2i: Comment
 2J: Original Comment
42
Top 100
Fig. 12. Top100
 A: Top Title
 B: Row #1
o Link: Content Individual Page (Except for Artist Name & Statistics)!
 C: Row #2 - #100
o Link: Content Individual Page!
 D: Position #
 Link: Content Individual Page!
 E: Artist Name (s)
o Format (Songs): Artist Name
o Format (Mixtapes) 1: Artist Name
o Format (Mixtapes) 2: If “Artist Name = Various Artists” and “DJ = Available”
show
43
o DJ.!
o Format (Mixtapes) 3: If “Artist Name = Various Artists” and “DJ = N/A”
o Various Artists
o Format (Videos) 1: Artist Name
o Format (Videos) 2: If it’s a Web Series video, then show “Web Series Artist”
o Format (Videos) 3: If it’s an Interview or Other and “Artist Name = N/A” then
show
o “the title on 2 rows”
o Link: Individual Artist Page!
 F: Title
o Format (Songs): Song Title (Feat. Artist 1, Artist 2…) [Prod. By Producer 1,
o Produc…]
o Format (Mixtapes): Mixtape Title
o Format (Videos): Video Title (Feat. Artist 1, Artist 2…)
 H: Views & Comments
o Arată suma totală a numărului de vizualizări şi comentarii pe care fiecare content
l-a primit în total.
 I: Song Front Cover or Artist Image
o Link: Individual Content Page (dacă cântecul nu are copertă , atunci se afişează
imaginea artistului)
 J: Mixtape Front Cover
o : Individual Content Page!
 K: Video Preview Image
o : Individual Content Page
 L: Yesterday’s Position
o poziţia pe care a fost cântecul ieri.
o k: N/A
 M: Peak Position
o Poziţa cea mai înalta care a fost deţinuta până acum.
o Link: N/A
44
o Mouseover: Expand to “2 – Top 100: Mouseover”!
 N: Days On The Chart
o Numărul total de zile în care conţinutul a fost în grafic.
o Link: N/A
o Mouseover: Expand to “2 – Top 100: Mouseover”!
 O: Statistics Background
o Link: N/A
o Mouseover: Expand to “2 – Top 100: Mouseover”
COMMENTS
Fig 13. Comments
Pe toate paginile individuale de conţinut există posibilitatea de a lăsa un comentariu. Mai jos voi
descrie paşi urmaţi pentru crearea modulului de comments.
În primul rând am adaugat un nou tabel în baza de date:
comments(id,id_user,id_content,content_type,id_content_parent,comment_parent,date,approved
,content ,image)
45
Unde id este cheia primară a unui comentariu , id_user este foreign key şi face legătura cu tabela
user , id_content(1-songs,2-mixtapes,3-videos,4-social)
 A - User Profile Picture

o Imaginea de profil a utilizatorului care a scris conținutul
o Link:profilul utilizatorului
 B – Username
o Numele utilizatorului care a scris comentariul
o Link:profilul utilizatorului
 C - Comment
o Comentariul scris de utilizator(acesta se salvează în baza de date ,iar după
apăsarea butonului „Send” se afişează)
 D - Like, Reply & Time la care a fost postat
o Click Like: Creeaza un like
o Click Reply: deschiderea unui textarea pentru a lăsa un raspuns
 E - User Profile Picture
o imaginea de profil a utilizatorului care a răspuns la comentariu
 F - Username
o numele utilizatorului care a răspuns la comentariu
 G - Comment
o Răspunsul scris de utlizator la comentariu
o Click: N/A
Se pot insera și imagini și vor fi afișate și numarul de răspunsuri pentru fiecare comentariu.
Pe fiecare pagină individuală de conținut se va afișa și modulul de Others Also Liked(OAL).
 Pentru Priority 1, scopul este sa încercam sa găsim cât mai multe OAL prin “ Series.”
Daca se găsesc 15, atunci ele rămân și se sar restul priorităților. * Daca conţinutul nu are
“Series” se sare Priority 1
o OAL 1 : conţinutul cu cel mai mare număr de “Series Volume”
o OAL 2: conţinutul al doilea cel mai mare număr de “Series Volume” OAL 3:
Mixtape-ul cu al treilea cel mai mare număr de “Series Volume” OAL 4: etc…
OAL 5: etc…
o -
o OAL 15: conţinutul cu al 15-lea cel mai mare număr de “Series Volume”
46
o Condition: Series=Exists Condition 2: conţinutul = nu poate fi OAL conţinutul
care este selectat
 Pentru Priority 2, scopul este să încercăm să găsim cât mai multe OAL prin conţinutul
”Official” legate de Artist(s). Dacă se găsesc cele 15, prin Priority 1 şi 2, atunci astea
rămân şi se sar restul priorităţilor. * Dacă conţinutul are “Artist=Various Artists” se sare
Priority 2
o Priority 2 Se caută conţinutul cu bifa “Official” de la acelaş artist(s) şi se afişează
în ordinea:
o OAL 1 : “Official” conţinutul de la același Artist(s) cu cea mai recentă Release
Date
o OAL 2: “Official” conţinutul de la același Artist(s) cu a doua cea mai recentă
Release Date
o OAL 3: “Official” conţinutul de la același Artist(s) cu a 3a cea mai recentă
Release Date
o OAL 4: etc… OAL 5: etc…
o -
o OAL 15: “Official” conţinutul de la același Artist(s) cu a 15a cea mai recentă
Release Date
o Condition: Artist ≠ Various Artists
o Condition 2: conţinutul = nu poate fi OAL (albumul/cântecul care este selectat nu
poate fi OAL)
 Condition 3: dacă prin Priority 2 găseşte mixtape-uri deja găsite în Priority 1, ele nu
trebuie să mai apară din nou
”Official” legate de DJ(s). Dacă se găsesc cele 15, prin Priority 1, 2 şi 3, atunci astea
rămân şi se sar restul priorităţilor. * Dacă conţinutul are “DJ = Not Available” se sare
Priority 3
o Priority 3 Se cauta conţinutul cu bifa “Official” de la același DJ(s) şi se afişează
în ordinea:
o OAL 1 : “Official” conţinut de la acelas DJ(s) cu cea mai recentă Release Date
47
o OAL 2: “Official” conţinut de la acelasi DJ(s) cu a doua cea mai recentă Release
Date
o OAL 3: “Official” conţinut de la același DJ(s) cu a 3a cea mai recentă Release
Date
o -
o OAL 15: “Official” conţinut de la acelas DJ(s) cu a 15a cea mai recentă Release
Date
o Condition: DJ = Available
o Condition 2: nu poate fi OAL conţinutul care este selectat
o Condition 3: daca prin Priority 3 gaseste conţinutul deja găsit în Priority 1 si 2,
ele nu trebuie să mai apară din nou
legat de Artist(s) care nu au ”Official”. Dacă se găsesc cele 15, prin Priority 1, 2, 3 şi 4
atunci astea rămân şi se sar restul priorităţilor. * Dacă mixtape-ul are “Artist = Various
Artists” se sare Priority 4.
o Priority 4 Se caută conţinutul fără bifa “Official” de la acelaşi Artist(s) şi se
afişează în ordinea:
o OAL 1 : conţinutul fără “Official” de la acelaşi Artist(s) cu cea mai recentă
Release Date
o OAL 2: conţinutul fară “Official” de la același Artist(s) cu a doua cea mai recentă
Release Date
o OAL 3: conţinutul fară “Official” de la același Artist(s) cu a 3a cea mai recentă
Release Date OAL 4: etc… OAL 5: etc…
o -
o OAL 15: conţinutul fără “Official” de la același Artist(s) cu a 15a cea mai recentă
Release Date
o Condition: Artist ≠ Various Artists
o Condition 3: dacă prin Priority 4 se găseste conţinutul deja gasit în Priority 1, 2 și
3 ele nu trebuie să mai apară din nou
48
legat de DJ(s) care nu au ”Official”. Dacă se găsesc cele 15, prin Priority 1, 2, 3, 4 şi 5
atunci astea rămân şi se sar restul priorităţilor. Dacă conţinutul are “DJ = Not Available”
se sare Priority 5
o Priority 5 Se caută mixtape-urile cu bifa “Official” de la acelaşi DJ(s) şi se
afişează în ordinea:
o OAL 1 : conţinutul fără “Official” de la același DJ(s) cu cea mai recentă Release
Date
o OAL 2: conţinutul fără “Official” de la același DJ(s) cu a doua cea mai recentă
Release Date
o OAL 3: conţinutul fără “Official” de la același DJ(s) cu a 3a cea mai recentă
Release Date
o -
o OAL 15: conţinutul fără “Official” de la același DJ(s) cu a 15a cea mai recentă
Release Date
o Condition: DJ = Available
o Condition 3: daca prin Priority 5 găseste conţinutul deja găsit in Priority 1, 2, 3 și
 Priority 6, este ultima etapa. Daca nu s-au gasit OAL prin Priority 1-5, atunci se umple ce
a ramas de umplut cu conţinutul din ultimele 7 zile cu cele mai multe “views”
 Priority 6 Se cauta conţinutul cu Release Date din ultimile 7 zile și se filtrează în felul
următor:
o OAL 1 : conţinutul cu cele mai multe views
o OAL 2: conţinutul cu al doilea cele mai multe views
o OAL 3: conţinutul cu al treilea cele mai multe views OAL 4: etc… OAL 5: etc…
o ...........
o OAL 15: conţinutul cu al 15lea cele mai multe views
o Condition: nu poate fi OAL conţinutul care este selectat
49
o Condition: dacă prin Priority 6 găseste conţinutul deja găsit in Priority 1, 2, 3, 4 și
 Precizări
o Pentru cazurile din Priority 2, 3, 4 si 5, atunci când content-ul selectat are mai
mult de 1 Artist, sau mai mult de 1 DJ, se caută prin mai mult content, dar filtrele
rămân la fel.
o Ex: În cazul Priority 2, să spunem că sunt 2 artişti. În cazul asta se vor caută toate
mixtape-urile care au “official” legate de primul artist, apoi legate de al doilea
artist. Rezultat-ul va fi sortarea după dată din toate mixtape-urile găsite.
o Pentru cazul din Priority 6, dacă (în caz extrem) nu sunt destule mixtape-uri
pentru a le sorta după views în ultimile 7 zile, atunci se afişează ultimele mixtape-
uri adăugat pe site după release date (fără să se mai ţină cont de views).
• Un alt modul întâlnit pe toate paginile individuale este Main Banners şi Small
Elements care ţin cont de mai multe priorităţi.
MAIN BANNER
 Aici scopul este să găsească site-ul “4” Mixtape Bannere de afişat. O dată ce a găsit cele
4 (în ordine de prioritate) nu mai caută mai departe.
 Priority 1 Web Series Banner Condition: Web Series=Exists Condition 2: Web Series
Mixtape Banner = Exists
 *Pentru Priority 2-5 se ia tot content-ul (Songs,Mixtapes,Videos,News) din ultimile 2
saptamani cu “Artist=Primary Artist” si se afiseaza cele 4 cele mai recente care au
“Mixtape Banner”. “Artist = Primary Artist” inseamna ca artist-ul nu este = Various
Artists. * Daca mixtape-ul are “Artist=Various Artists” se sare Priority 2-4
 Priority 2 Most Recent Content Added in the past 2 weeks Condition: Artist=Primary
Artist or Producer = Primary Artist or Featured Artist = Primary Artist Condition 2:
 Priority 3 2nd Most Recent Content Added in the past 2 weeks Condition: Artist=Primary
50
 Priority 4 3rd Most Recent Content Added in the past 2 weeks Condition: Artist=Primary
 Priority 5 4th Most Recent Content Added in the past 2 weeks Condition: Artist=Primary
 Pentru Priority 6-9 se ia tot content-ul (Songs,Mixtapes,Videos,News) din ultimile 2
săptămâni cu “Artist(s)=DJ sau Producer(s)=DJ sau DJ(s)=DJ sau Feature Artist(s) = DJ”
şi se afişează cele 4 cele mai recente care au “Mixtape Banner”. ex: Dacă DJ-ul
albumului este “DJ Drama”, atunci se caută prin tot content-ul care are “DJ Drama” că
“Artist”, “Featured Artist”, “DJ” sau “Producător” * Dacă albumul nu are DJ, atunci se
sare Priority 6-9
 Priority 6 Most Recent Content Added (With A Mixtape Banner) Condition: Artist(s)=DJ
sau Producer(s)=DJ sau DJ(s)=DJ sau Feature Artist(s) = DJ
 Priority 7 2nd Most Recent Content Added (With A Mixtape Banner) Condition:
Artist(s)=DJ sau Producer(s)=DJ sau DJ(s)=DJ sau Feature Artist(s) = DJ
 Priority 8 3rd Most Recent Content Added (With A Mixtape Banner) Condition:
 Priority 9 4th Most Recent Content Added (With A Mixtape Banner) Condition:
 *Dacă nu se ajunge la 4 Mixtape Banners cu Priority 1-9, atunci se afișeaza ultimul
content adăugat pe site cu Mixtape Banner (Priority 10-13)
 Priority 10 Most Recent Content Added (With A Mixtape Banner)
 Priority 11 2nd Most Recent Content Added (With A Mixtape Banner)
 Priority 12 3rd Most Recent Content Added (With A Mixtape Banner)
 Priority 13 4th Most Recent Content Added (With A Mixtape Banner)
 1b - Mixtapes Individual - Mixtape Banner (Design)
 Depinzand de ce content este, sus stanga trebuie sa afiseze: (poti vedea peste “lil” de la
“Lil Wayne” in exemplele de mai jos)
 New Song
51
 New Mixtape
 New Video
 News
SMALL ELEMENTS
 Aici scopul este să încerce să afişeze numai link-uri către pagină de profil al
humanoizilor în Priority 1-4. Dacă nu reuşeşte atunci, se trece la Priority 5 sau 6
 Priority 1 Se determina câţi humanoizi au “Artist Small Element” Humanoizi sunt ori
“Artist(s)” ori “DJ(s) Dacă există exact 2, atunci se defineşte prin Priority 2. Dacă există
exact 3, atunci se defineşte prin Priority 3 Dacă există 4 sau mai mulţi, atunci se defineşte
prin Priority 4
 Dacă există doar 1, atunci se defineşte prin Priority 5.
 Dacă nu există nici unul, atunci se defineşte prin Priority 6.
 Dacă Small Element se definesc toate prin Priority 2-4 atunci toate “Small Element” o să
aibă scris-ul “View Humanoid Name Profile” şi vor trimite către pagină respectivă de
Profil.
 Priority 2 Dacă primary artist este unul dintre cei 2:
 Small Element 1 = Primary Artist 1 Small Element Small Element 2 = Primary Artist 2
sau DJ Small Element
 Dacă primary artist nu este unul dintre cei 2:
 Small Element 1 = DJ 1 Small Element Small Element 2 = DJ 2 Small Element
 Priority 3 Daca primary artist este unul dintre cei 3:
 Small Element 1 = Primary Artist 1 Small Element Small Element 2a = DJ 1 Small
Element Small Element 2b = DJ 2 Small Element
 Dacă primary artist nu este unul dintre cei 3:
 Small Element 1 = DJ 1 Small Element Small Element 2a = DJ 2 Small Element Small
Element 2b = DJ 3 Small Element
 Priority 4 Dacă primary artist este unul dintre cei 4(+):
52
 Small Element 1a = Primary Artist 1 Small Element Small Element 1b = DJ (1, 2, sau 3)
Small Element Small Element 2a = Primary Artist 2 sau DJ (1, 2, sau 3) Small Element
Small Element 2b = Primary Artist 3 sau DJ (1, 2, sau 3) Small Element
 Dacă primary artist nu este unul dintre cei 4(+):
 Small Element 1a = DJ 1 Small Element Small Element 1b = DJ 3 Small Element Small
Element 2a = DJ 2 Small Element Small Element 2b = DJ 4 Small Element
 Dacă Small Element se definesc prin Priority 5 atunci “Small Element 1a” o să aibă scris-
ul “View Humanoid Name Profile” şi va trimite către pagină respectivă de Profil (Front
End 6 - Humanoid - Individual). “Small Element 2a şi 2b” vor avea scris-ul “View
Song”, “View Mixtape”, “View Video” sau “View News” depinzând de ce content sunt.
 Priority 5 Dacă primary artist este cel găsit:
 • Small Element 1a = Primary Artist 1 Small Element Small Element 2a = Latest
Content Adăugat cu Small Element Small Element 2b = 2nd Latest Content Adăugat cu
Small Element *Atenţie că “2a” sau “2b” să nu fie acelaşi content că cel afişat, dacă este
cazul, se sare content-ul respectiv şi se caută următorul cel mai recent
 Dacă primary artist nu este cel găsit:
 • Small Element 1a = DJ Small Element Small Element 2a = Latest Content
Adăugat cu Small Element Small Element 2b = 2nd Latest Content Adăugat cu Small
Element *Atenţie că “2a” sau “2b” să nu fie acelaşi content că cel afişat, dacă este cazul,
se sare content-ul respectiv şi se caută următorul cel mai recent
 Dacă Small Element se definesc prin Priority 6 atunci “Small Element 1a, 1b, 2a si 2b”
vor avea scris-ul “View Song”, “View Mixtape”, “View Video” sau “View News”
depinzând de ce content este.
 Priority 6
 Small Element 1a = Latest Content Adaugat cu Small Element
 • Small Element 1b = 2nd Latest Content Adăugat cu Small Element Small
Element 2a = 3rd Latest Content Adăugat cu Small Element Small Element 2b = 4th
Latest Content Adăugat cu Small Element *Atenţie că “1a”, “1b”, “2a” sau “2b” să nu fie
acelaş content că cel afişat, dacă este cazul, se sare content-ul respectiv şi se caută
următorul cel mai recent
 EXCEPȚII
53
o Dacă există “Mixtape Box A (Adică Mixtape Banner)” sau “Mixtape Box B (Adică
Small Element)” creat prin AutoPilot/Mixtape Boxes, atunci acestea intră pe fie care pagină în
mod “Random” peste unul dintre Mixtape Bannerele sau Small Elementele alese.
o Ex: Dacă există 2 Mixtape Box A şi 2 Mixtape Box B active în autopilot, şi un user intră
pe un song care are:
o La Mixtape Banner: Priority 1, 2, 3 şi 4 La Small Element: Priority: 3
o Atunci el va vedea:
o 2 Mixtape Bannere alese de priorităţi şi cele 2 Mixtape Box A
o Primul Small Element ales de priorităţi şi cele 2 Mixtape Box B
5. Concluzii
Având în vedere cele mai sus menţionate consider că site-ul dabeatspot.com reuşeşte să îmbine
funcţionalităţile unei platforme de ascultat şi downloadat muzică .Cel mai important avantaj al
folosirii acestui site este că totul este gratuit. Un alt avantaj important este că există şi versiunea
pentru mobil,astfel muzică preferată poate fi descărcată direct pe mobil sau poate fi ascultată pe
mobil. Un alt avantaj este faptul că se va adaugă conţinut zilnic şi orice postare a unui artist va fi
adăugată imediat pe site.
Dezvoltări ulterioare
Acest subcapitol prezintă informații despre modul în care site-ul va fi îmbunătățit în viitor. Un
prim aspect care va fi îmbunătățit este sistemul de rating. Acesta va fi adăugat și pe paginile de
listări. Un alt aspect care va fi îmbunătățit este Right Bar. Câte un element din Right Bar va
apărea o data cu 7 elemente apărute in partea stânga,iar dacă numărul elementelor din partea
54
dreaptă este mai mare decât numărul elementelor din partea stânga ,va exista scroll doar pentru
partea dreapta,iar elementele din partea stângă vor rămâne fixate.
De asemnea, modulul de Search va fi dezvoltat. Pentru fiecare tab în parte vor fi adăugate filtre
speciale pentru ca utilizatorul să aibă mai multe posibilități de navigare prin rezultate. Astfel
rezultatele vor putea fi afișate după numărul de vizualizări sau după data de lansare. Va exista un
dropdown de unde utilizatorul îsi va putea alege singur modalitatea de vizualizare.
Pentru varianta de mobil vor fi adăugate emoji.
Contributii personale
Contribuția personală este construită de analiza site-urilor asemănătoare existente deja pe piață.
În momentul de față muzica hip-hop este foarte cautată și există din ce în ce mai mulți
ascultători. Concluzia în urma acestor analize este ca toate site-urile urmează același tipar: există
pagini de listări pentru conținut si pagini individuale pentru fiecare tip de conținut. Ceea ce aduce
dabeatspot.com în plus este ca pe un singur site se găsesc funcționalități găsite pe mai multe
platforme diferite. Astfel am reusit sa combin o platformă de socializare cu o platformă de
ascultat și descărcat muzică cu un site de divertisment, toate se găsesc în acelasi loc. Un alt
aspect important este că toată muzica de pe site este gratuită.
55
6.Bibliografie
1. Administrare baze de date web – Dan Pescaru

2. Baze de date - D. Cârstoiu, Ed. Matrix Rom 2009
3. Curs baze de date – D. Cârstoiu, 2014
4. Dezvoltarea aplicațiilor web cu PHP și MySQL – L. Welling, L. Thompson
5. Documentație Adobe Photoshop - http://www.adobe.com/ro/products/photoshopfamily.html ,
accesat 2016
6. Documentație CSS - http://www.marplo.net/curs_css/ , accesat 2016
7. Documentație Google Chrome -
https://www.google.com/intl/ro/chrome/browser/features.html#speed , accesat 2016
8. Documentație HTML - https://developer.mozilla.org/en-US/docs/Web/HTML , accesat 2016
9. Documentație JavaScript - https://www.javascript.com/ , accesat 2016
10. Documentație JavaScript -http://www.w3schools.com/js/ , accesat 2016
11. Documentație Mozilla Firefox - https://developer.mozilla.org/en-US/Firefox , accesat 2016
12. Documentație muzica hip-hop - http://culturatorul.ro/cultura-hip-hop/ , accesat 2016
13. Documentație muzica hip-hop - http://extinderea-constiintei.ro/muzica-si-efectele-sale-
asupra-sanatatii-omului/ , accesat 2016
14. Documentație muzica hip-hop -http://jurnalspiritual.eu/muzica-si-influenta-sa-surprinzatoare-
asupra-creierului/ , accesat 2016
15. Documentație Notepad++ - https://notepad-plus-plus.org/ , accesat 2016
16. Documentație platforme web - https://www.techopedia.com/definition/4956/social-
networking-site-sns , accesat 2016
17. Documentație platforme web - http://liviaiusan.ro/10-platforme-unde-poti-sa-ti-incarci-
propria-muzica/ , accesat 2016
18. Documentație PHP - http://php.net/ , accesat 2016
19. Documentație PHP - http://php.net/manual/ro/intro-whatis.php, accesat 2016
20. Documentație RedBean - http://www.redbeanphp.com/index.php , accesat 2016
21. Documentație Smarty - http://www.smarty.net/ , accesat 2016
56
22. Documentație WinScp - https://winscp.net/eng/index.php , accesat 2016
23. Învață singur PHP, MySQL și Apache – Meloni J.C. , Ed. Corint, 2005
24. PHP și MySQL pentru site-uri web dinamice – L. Ulman, Ed. Teora, 2006
57

2

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

2

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea POLITEHNICA București

Facultatea Automatică şi Calculatoare

Site web pentru ascultat şi downloadat muzică

1.1.1 Muzica hip-hop

1.1.3. Influenţa muzicii asupra personalităţii noastre

La inceput,internetul ne-a oferit modalitatea de a păstra muzica în format digital indiferent ce

1.3. Scopul proiectului

Îmbinarea elementelor specifice unei platforme de ascultat muzică:player-ul local, dar si

1.4. Structura proiectului

Pentru arhitectura site-ului am folosit modelul arhitectural model-view-controller.

Site-ul dabeatspot.com este un site de socializare,dar şi o platforma online de ascultat şi

Divertismentul online îmbină funcționalitatea interactivă și de conținut , inclusiv live streaming

În domeniul de divertisment social, conținutul online este strâns legat de caracteristicile

O platformă fondată în 2007, în SUA, pentru promovarea artiştilor.

Bandcamp este un instrument perfect pentru fan marketing.

Ai pagină proprie pe platformă şi îţi poţi promova conturile de pe reţelele sociale.

Recursivitatea, o funcționalitate care permite unei funcții să se auto-apeleze este suportată de

3.2.1 Google Chrome

3.2.2 Mozilla Firefox

Cele mai importante facilități ale acestui program sunt:

3.2.5 Adobe Photoshop CS6

4.1 Scurtă descriere

Site-ul dabeatpot.com este un site de socializare, o platformă de ascultat şi downloadat muzică, o

 Songs – o listare a cântecelor grupate pe zile

4.2 Proiectare aplicație

Pentru arhitectura site-ului am folosit modelul arhitectural model-view-controller.

Model-view-controller (MVC) (din engleză, aproximativ: model-față-controlor) este un model

Aplicaţia este structurată în 3 componente majore:

Conţine clase ajutătoare cum sunt:

c. General, colecţii de funcţii cu diverse roluri (/model/general.php)

d. Template engine (/model/Smarty.class.php)

II. CONTROLLER (/controller/)

III. VIEW (/view/hdmixtapes/)

Fig. 2. Mixtapes Main

Upcoming Mixtapes Listing Page

Link:HDMixtapes.com/mixtapes/upcoming/1 … /upcoming/2 …"

Fig. 3. Songs Main

Fig. 4. Videos Main

 Today’s New videos: “Videos” cu release date de astăzi.

Artist Listing Page

Fig. 5. Artist Page

Fig. 7. Mixtape Individual

Fig. 9. UserProfile Notifications

 M: Artist Name: Link: La fel ca News Feed

În "Following" apar toti artistii pe care user-ul îi urmăreşte.

Fig. 10. UserProfile Following

 T: Artist Image: Link: Individual Artist Page

Fig. 11. UserProfile Activity

Fig. 12. Top100

Fig 13. Comments

 A - User Profile Picture

Pe fiecare pagină individuală de conținut se va afișa și modulul de Others Also Liked(OAL).

Pentru varianta de mobil vor fi adăugate emoji.

1. Administrare baze de date web – Dan Pescaru

S-ar putea să vă placă și