1. Moosik
Neagu Gabriela,Vătămănelu Mădălina
Facultatea de Informatica,Universitatea Alexandru Ioan Cuza,Iasi
gabriela.neagu@students.info.uaic.ro
madalina.vatamanelu@students.info.uaic.ro
Abstract. Aplicatie Web pentru prezentarea comparativa a topurilor muzicale
de diverse genuri. Utilizatorii vor putea vota melodiile preferate, reactualizarea
efectuandu-se in mod dinamic. Atunci cand o melodie votata ajunge pe primul
loc sau cand paraseste topul, utilizatorul respectiv va fi automat instiintat prin e-
mail. Se pot propune noi intrari in top via o interfata Web, pe baza autentificarii
utilizatorului. Diverse informatii referitoare la top (modificarea clasamentului)
sunt facute disponibile via un flux de stiri RSS/Atom.
Cuvinte-cheie: muzica,top,RSS,aplicatie Web
1 Introducere
Muzica este arta prezenta in viata de zi cu zi a omului, exprimand trairile,ideile,
sentimentele, evolutia, cultura unei personae. Muzica este arta combinării notelor în
succesiune și simultan într-o formă plăcută estetic, organizarea ritmică a acestor note
și integrarea lor într-o lucrare completă.
Exista in momentul actual o multime de aplicatii Web care ofera posibilitatea de
vizualizare a melodiilor dupa categorii, dar nu exista aplicatii care sa mentina istoricul
voturilor.
Am realizat aceasta aplicatie Web deoarece exista foarte multe genuri musicale,
dar nu exista un loc in care poti accesa aceste melodii dupa anumite categorii si dupa
un anumit numar de voturi.Astfel cei interesati trebuie sa se inregistreze, si astfel vor
beneficia de o afisare personalizata a paginilor, in functie de intoricul tuturor voturilor
sale
2 Tehnologii utilizate
Pentru partea de client am ales:
 HTML5 (HyperText Markup Language)- pentru structurarea și prezentarea
conținutului paginilor
 CSS3 (Cascading Style Sheets) - pentru formatarea elementelor unui
document HTML

2.  JavaScript – limbaj pentru introducerea unor funcționalități în paginile web,
codul Javascript din fiind rulat de către browser.
 AJAX poate fi utilizat in mai multe tipuri de aplicatii care pot fi incluse
intr-o pagina web, dar cel mai folosit este pentru navigare de la un continut la
altul al site-ului. Aceasta navigare se face de obicei prin link-uri, acestea
contin o adresa URL catre pagina/continutul respectiv. Metoda standard de
transmitere a datelor asresei URL din link-uri la server este GET.
Pentru partea de server:
 PHP (Php: Hypertext Preprocessor) - limbaj de programare pe partea de
server folosit la dezvoltarea aplicatiilor Web
 SESSION- reprezinta o modalitate prin care PHP retine informatii de la o
pagina la alta. Odata cu initializarea unei sesiuni, utilizatorul poate pastra
anumite variabile chiar daca in continuare viziteaza si alte pagini ale site-
ului. In principiu informatia se pastreaza pana la inchiderea browser-ului, sau
pana cand utilizatorul distruge in mod intentionat sesiunea curenta.
Pentru memorarea datelor:
 baza de date SQL pe serverul fenrir al facultatii ,care va memora toate datele
necesare autentificarii utilizatorilor
2.1 HTML
Acronimul de la HyperText Markup Language şi reprezintă un limbaj pentru
crearea şi marcarea (formatare, aranjare) unui document astfel încât să poată fi
publicat pe World Wide Web şi vizualizat cu ajutorul unui browser.
Termenul de hypertext desemnează un material sub formă de text şi imagine, inter-
conectat într-o manieră complexă, nesecvenţială, în care utilizatorul poate naviga,
căuta informaţii referitoare la un obiect. Hypertext-ul trebuie interpretat ca un text
care semnalează o legătură la o altă informaţie web, de obicei un alt document web, şi
este identificat prin subliniere sau culoare, pentru a-l deosebi de textul simplu.
Hypermedia este un termen aproape sinonim celui de hypertext, singura deosebire
fiind faptul că subliniază prezenţa şi a unor elemente care nu sunt de tip text, cum ar fi
animaţii, secvenţe sonore sau secvenţe video. HTML se utilizează din 1990, cu-
noscând câteva versiuni de dezvoltare, fiecare dintre acestea îmbunătăţind perfor-
manţele limbajului. Ultima variantă (la data elaborării acestui ghid) este HTML 5 ce
include facilităţile versiunilor anterioare (tag-uri de marcare, tag-uri pentru
hiperlegături, antete, paragrafe, liste, elemente de meniu, formatare caractere, imagini
in-line şi tag-uri pentru schimbul de date dinamic între utilizatori), adăugând facilităţi
şi extensii pentru numere, tabele şi elemente de control.
2.2 CSS
Cascading Style Sheets (CSS) este un limbaj pentru stiluri folosit pentru a descrie
prezentarea (aspectul si formatarea) unui document scris într-un limbaj de marcare.

3. Aplicatia sa cea mai cunoscuta este realizarea stilului paginilor web scrise în HTML
si XHTML, dar limbajul poate fi aplicat oricarui tip de document XML.
CSS specifica o schema prioritara pentru a determina care reguli de stil se aplica
daca doua sau mai multe reguli se suprapun pentru un element particular. În acest asa-
numit cascade, prioritatile sau greutatea sunt determinate si atribuite regulilor, astfel
încât rezultatele sunt predictibile.
2.3 JavaScript
Javascript este un limbaj de programare care face posibil ca paginile web sa fie
mai interactive. Scripturile Javascript sunt introduse in pagina HTML si sunt inter-
pretate si executate de browser. Javascript poate fi considerat o unealta foarte buna
daca doriti sa controlati continutul paginilor in functie de data, ora, sistemul de
operare sau browserul utilizatorilor, sa faceti site-uri interactive, care sa comunice cu
vizitatorii, site-uri dinamice, sa validati datele primite din formulare, dar nu numai
atat, acestea fiind doar cateva din posibilitatile pe care le ofera acest limbaj.
2.4 PHP
PHP este limbajul ideal pentru construirea de pagini web dinamice. Este usor de
invatat, open-source, poate fi rulat pe mai multe platforme si se poate conecta la mai
multe tipuri de baze de date. Cel mai important aspect al limbajului este insa posibili-
tatea de a fi imbricat cu cod HTML. Putem astfel crea pagini HTML statice si din loc
in loc, acolo unde este nevoie, sa introducem dinamism cu ajutorul PHP.
In acest modul am stocat toate fisierele de tip .html si .php folosite la constuirea
acestui sit Web.
3 Arhitectura aplicatie
Aplicatia ofera o maniera usoara si simpla de vizualizare a topurilor musicale ex-
istente pe server. Orice vizitator are oportunitatea de a naviga prin toate topurile ex-
istente, de a afla informatii despre un top, precum descriere, lista tuturor melodiilor
existente,top 10 a celor mai votate melodii si accesarea Rss-ul site-ului, ce contine
ultimile intrari si iesiri din top.
Pentru vizitatorii interesati de aplicatia anoastra,exista un modul de inregistrare,in
care trebuie sa introduca cateva date de interes,precum username ,parola si email,
dupa care exista un modul de login, in care se pot loga cu contul nou creat. Odata
logati au mai multe optiuni, precum: voteaza(o singura data pentru un anumit top
musical), primeste mail atunci cand o melodie votata ajunge pe primul loc,sau cand o
melodie votata iese din top 10 si adauga o noua intrare in top.
Aplicatia retine pentru fiecare utilizator melodiile votate, precum si actualele drep-
turi de votare pentru un top selectat.

4. 4 Detalii de implementare
Aplicatia noastra are diverse functionalitati. Le voi prezenta modul de implemen-
tare si structurare.
4.1 Inregistrare
Deoarece am realizat o aplicatie care nu permite oricui sa voteze, am realizat un
modul de inregistrare, astfel incat numai persoanele care chiar sunt interesate de
aplicatie, sa aiba posibilitatea de a isi exprima preferintele.
Pentru aceasta, exista un o clasa Users in fisierul user.php care verifica daca datele
introduce sunt corecte si dupa care inregistreaza utilizatorul in baza de date, mai ex-
act, in tabela users.
public function register() {
$bd->connect();
if($this->password != $this->confirm){
return '<script> alert("Parola nu este
aceeasi!");</script>';//confirm
}else if($bd->next_record() == 0){
$bd->query("SELECT count(user_id)+1 as "next_id"
FROM users;");
while ($bd->next_record()) {
$next_id = $bd->Record["next_id"];
}
$bd->query("INSERT INTO users(user_id,username,password,
email)
VALUES('$next_id','$username','$password','$email');");
return 0;//succes
}else{
return 2;//user deja existent
}
4.2 Logare
Dupa ce s-a creat un cont, exista posibilitatea accesarii site-ului cu acel cont, iar
dupa logare, utilizatorul poate vota piesele favorite.Tot in clasa User exista si o func-
tie pentru controlul logarii.
public function userLogin() {

5. $success = false;
$bd->connect();
$bd->query("select * from users where username=
'$username' AND password= '$password';");
if ($bd->next_record()) {
$success = true;
$_SESSION['userLogat']=$username;
}
return $success;
}
4.3 Incarca topurile muzicale
La orice accesare a pagini principale, se face o cerere cu Ajax pentru a afisa
corespunzator toate topurile musicale existente in baza de date a serverului.
In fisierul functii.js exista mai multe functii pentru aceasta, controlul fiind preluat
de functia de mai jos:
function incarcaCategorii(exista) {
if (exista == 'o') {
incarcaMeniu('');//pune meniul corespunzator(nelogat)
trimiteIncarcaCategorii('incarca.php');//incarca
toate categoriile
} else if (exista == ''){
seteazaUtilizator('');//utilizator logat
incarcaMeniu('');//pune meniul corespunzator
trimiteIncarcaCategorii('incarca.php');//incarca
toate categoriile
}
else {
document.getElementById("topMusicbody").innerHTML=exista;
}
}
Fisierul incarca.php contine raspunsul HTML ce va fi incadrat in pagina prin-
cipala:
$bd->query("SELECT * FROM categorie ;");
while($bd->next_record()){
$id= $bd->Record["id_categorie"];
$nume= $bd->Record["nume_categorie"];
$desc= $bd->Record["descriere"];
$id2= $id+8000;

6. echo ' <div class='topMusic-categorie'' . 'id="' .
$id2 .'">';
echo '<div class='bullet-txt'>'.$nume.'</div>';
echo ' <div class='topMusic-txt'>'.$desc.'</div>';
echo '<div class='see-songs'' . 'id="' . $id . '"
onclick="javascript:seteazaCategorie(this.id, '')"><a
href="#toate-melodiile">Vezi melodii</a></div>';
echo ' </div>';
}
4.4 Afiseaza toate melodiile dintr-un anumit top
Atunci cand utilizatorul, logat sau nu, alege o categorie din partea stanga a ecran-
ului, i se vor aduce informatiile despre melodiile aflate pe server, pentru topul musical
selectat.
Functia din JavaScript:
function veziMelodii(exista){
if (exista != '') {
document.getElementById("songs-
body").innerHTML=exista;
document.getElementById("songs-
body").className = 'songs-body2';
} else {
incarcaMelodii ('melodii.php');
}
}
Fisierul melodii.php contine contine raspunsul HTML ce va fi incadrat in pagina
principala:
function melodii($id_categorie) {
//nu ezista user logat, deci nu i se va da
posibilitatea sa voteze
if($_SESSION['userLogat']==''){
while ($bd->next_record()){
echo '<div class="song" >'."n";
echo '<div class="song-info">PIESA : '.$nume.'</div>’ ;
echo '<div class="song-info">ARTIST:'.$artist.'</div>';
echo '<div class="song-info" id="' . $idVot . '">VOTURI
: '.$voturi.'</div>'."n";
echo '<div class='song-info'><a target="_blank"
href="' . $link . '"><img src="images/youtube.png"
/></a></div>';
echo '<div class="hr"><hr /></div>'."n";

7. echo '</div>'."n";
}
}else {//exista un user logat
$bd = new DataBase_MySQL ('fenrir.info.uaic.ro',
'Moosik', 'Moosik','9yD6wnJQOS');
$bd->connect();
$melodii=array();
$melodii=votat($id_categorie);
$lung=count($melodii);
if($lung==0){//nu a votat in aceasta categorie,
//ii apare butonul de vot
}
else{//a votat deja
//nu ii mai apare butonul de vot
//ii apare o iconita in dreptul melodiei votate
}
4.5 Votare
Cand utilizatorul apasa butonul de votare pentru o anumita categorie, se va apela
fisierul votare.php care face urmatoarele : retine top 10 (interogand baza de date),
adauga votul utilizatorului autentificat ( cauta id-ul melodiei votate in baza de date si
ii mareste numarul de voturi cu o unitate ), retine top 10 dupa adaugarea votului ,
determina, daca exista , melodia care a intrat in top sau melodia care a iese din top,
trimite mail tuturor utilizatorilor care au votat melodiile de la punctul preceden, actu-
alizeaza RSS.
Pentru a trimite mail am folosit :
for($j=0;$j<$lung2;$j++){
$email_from2 =
"proiect12345@gmail.com";
$email_to2 = $emails2[$j];
$email_subject2="Schimbare in
clasament!";
$email_message2 = "Buna ziua! Ati votat
pe site-ul nostru melodia '".$numeMelodie2."' cantata de
".$artist2."Va anuntam ca aceasta tocmai a intrat pe
locul 1 in Top 10 melodii ".$categorie2.".";

8. $headers2 = 'From:
'.$email_from2."rn".'Reply-To: '.$email_from2."rn"
.'X-Mailer: PHP/' . phpversion();
@mail($email_to2, $email_subject2,
$email_message2, $headers2);
}
Pentru actualizare RSS am folosit DOM, deoarece doream sa atasam noi itemi la fiec-
are modificare (urcare/coborare din top ).
4.6 Afiseaza primele 10 melodii dintr-un top selectat
Orice persoana are posibilitatea de a accesa un top a primelor 10 melodii dintr-o
categorie selectata. Functia JavaScript :
function veziTop(exista) {
if (exista != '') {
document.getElementById("songs-
body").innerHTML=exista;
} else {
trimiteTop ('top.php');
}
}
Fisierul top.php :
$melodii=array();
$melodii=votat($id_categorie);
$lung=count($melodii);
if($lung==0){//nu a votat sau nu are melodia in top
while ($bd->next_record()){
echo '<div class="song" >'."n";
echo '<div class="song-info">'.$it.'</div>'."n";
echo '<div class="song-info">PIESA :
'.$nume.'</div>'."n";
echo '<div class="song-info">ARTIST :
'.$artist.'</div>'."n";
echo '<div class="song-info">VOTURI :
'.$voturi.'</div>'."n";
echo '<div class="hr"><hr /></div>'."n";
echo '</div>'."n";
} }
else{
$melodieVotata=$melodii[0];
echo '<h2><a href="#toate-melodiile">TOP 10
</a></h2>';
while ($bd->next_record()){

9. //la fel ca mai sus, cu exceptia ca va aparea
melodia votata daca este in top
if($id==$melodieVotata){
echo '<div class='vote-btn' id="' . $id . '"
><img alt="" src="images/vote.jpg" /></div>';
}
4.7 Adauga o noua intrare in top
Utilizatorilor logati li se va pune la dispozitie un formular, in care vor trebui sa
completeze cu numele melodiei, artistul, anul aparitiei, un link Youtube catre melo-
die.Dupa completare, se va introduce o noua inregistrare in baza de date.
Pentru aceasta se folosesc: formularAdauga.php, formularAdauga.css, adau-
gaMelodie.php si o functie din functii.js numita veziAdaugaMelodie(‘’).
4.8 Vezi ultimile stiri
Daca se acceseaza butonul pentru RSS din pagina principala, se va putea citi fluxul
de date oferit la adresa
http://students.info.uaic.ro/~madalina.vatamanelu/Moosik/MoosikRSS.rss
Actualizarea acestui fisier are loc odata cu schimbarile din clasament,in fisierul
votare.php.
5 Concluzii
Aplicatia prezentata are ca scop managementul voturilor utizatorilor precum si o
actualizare continua a continutului in functie de numarul de voturi existente. Aplicatia
merge pentru categorii si melodii relative putine, ar trebui testate pentru un volum
mult mai mare de date.
6 Cuprins
1 Introducere.......................................................................................................1
2 Tehnologii utilizate..........................................................................................1
2.1 HTML.....................................................................................................2
2.2 CSS .........................................................................................................2
2.3 JavaScript................................................................................................3
2.4 PHP.........................................................................................................3
3 Arhitectura aplicatie ........................................................................................3
4 Detalii de implementare...................................................................................4
4.1 Inregistrare..............................................................................................4
4.2 Logare.....................................................................................................4
4.3 Incarca topurile muzicale........................................................................5

10. 4.4 Afiseaza toate melodiile dintr-un anumit top..........................................6
4.5 Votare .....................................................................................................7
4.6 Afiseaza primele 10 melodii dintr-un top selectat ..................................8
4.7 Adauga o noua intrare in top...................................................................9
4.8 Vezi ultimile stiri ....................................................................................9
5 Concluzii..........................................................................................................9
6 Cuprins ............................................................................................................9
7 Bibliografie.................................................................................................... 10
7 Bibliografie
Buraga, D. S.-C. (2001). "Web Technologies". Bucharest: MATRIX ROM Publishing.
Buraga, D. S.-C. (2002). "Web Site Design". Iasi: Polirom Publishing House.
Buraga, D. S.-C. (2006). "XML Technolgies"(in Romanian). Iasi: Polirom Publishing
House.