Proiectului la materia "Tehnologii Web" – http://tinyurl.com/tehnologii-web

1. Yacks – Your Academic Tasks (B)
Alice - Georgiana Burdujanu
alice.burdujanu@info.uaic.ro
Iulia – Andreea Cojocaru
iulia.cojocaru@info.uaic.ro
Facultatea de Informatică, Universitatea Alexandru Ioan Cuza, Iași
Abstract. Aplicație Web care oferă un raport privind activitățile pe care un student de la Facul-
tatea de Informatică din Iași trebuie sa le realizeze într-o săptămână, acestia putând să se logheze prin in-
termediul unui user si a unei parole. Prin intermediul acestei aplicatii, studenții pot vizualiza materiile la
care sunt înscriși, de a consulta o arhivă a rapoartelor saptămânale pentru un semestru si totodată vor putea
partaja conținutul raportului via o aplicație Web social – de exemplu Facebook, Twitter.
Cuvinte-cheie: Yacks, Web, html5, css3, php5.

2. 1 Introducere
Aplicația ‘Your Academic Tasks’ (Yacks) este o modalitate prin care ne putem organiza
timpul cât mai eficient și plăcut, aceasta datorându-se realizarii de catre aplicatii a unui raport
al activitatilor tuturor săptămânilor curente si vizualizarea lui direct din aplicatie. O altă mo-
dalitate de vizualizare este și prin partajarea raportului pe site-urile de socializare cele mai
frecvente, de exemplu Facebook sau Twitter. Cu ușurință se pot alege materiile opționale, iar
informațiile despre acestea și profesorul respectiv vor fi într-un singur loc.
2 Tehnologii utilizate
2.1 Partea de server a aplicației
2.2.1.1 PHP
PHP (PHP: Hypertext Preprocessor) este un limbaj de programare de tip script, ce este
folosit pe o scară largă în dezvoltarea paginilor și a aplicațiilor Web și care poate fi înglobat în
cadrul documentelor HTML. Cu ajutorul PHP-ul se pot cu ușurință colecta date form, genera
date si conținutul paginilor dinamic sau să trimiți si primi cookie-uri. Scripturile PHP sunt
folosite în trei domenii principale: script pe partea de server, script la linia de comandă și
scrierea de aplicații Desktop.
2.2.1.2 Ajax
Ajax-ul este o tehnică de programare pentru crearea de aplicații web interactive. Intenția
este să facă paginile Web să devină mai rapide. Este o modalitate de a transfera date între cli-
enți si server Web.
Ajax-ul nu este o tehnologie în sine, termenul este folosit pentru definirea aplicațiilor Web
ce folosesc un ansamblu de tehnologii: HTML sau XHTML pentru structura semantică a in-

3. formațiilor, CSS pentru prezentarea informațiilor, Javascript pentru interactivitate,
XMLHttpRequest și XML.
2.1.2 Surse de date
2.1.2.1. MySQL
MySQL este o arhitectură open-source foarte rapidă și un sistem de gestiune a bazelor de
date relațional. Deși este folosit foarte des împreună cu limbajul de programare PHP, cu
MySQL se pot construi aplicații în orice limbaj major.
2.1.2.2. XML
XML(Extensible Markup Language) este un limbaj de marcare pentru crearea de alte
limbaje de marcare cum ar fi: XHTML, RSS, SVG. XML-ul este și un model de stocare a
datelor nestructurate și semi-structurate în cadrul bazelor de date native XML. Avantaje: ex-
tensibilitate, validitate, XML este simplu și accesibil.
2.2 Partea de client a aplicatiei
2.2.1. HTML
HTML(HyperText Markup Language) este un limbaj de marcare utilizat pentru crearea
paginilor web ce pot fi afișate într-un browser. HTML-ul este folosit pentru prezentarea in-
formațiilor – paragrafe, fonturi, tabele etc. Limbajul de marcare este un set de taguri de mar-
care care descrie conținutul unui document.
Ultima versiune a HTML-ului si a XHTML-ului este HTML5. Acesta este o cooperare din-
tre W3C(World Wide Web Consortium) și WHATWG(Web Hypertext Application Technol-
ogy Working Group). Câteva din regulile care s-au stabilit pentru HTML5 sunt: noile proprie-
tăți ar trebui să fie bazate pe HTML, CSS, DOM și JavaScript, o mai bună metoda de tratare a
erorilor, HTML5 trebuie să fie independent.
Noile proprietăți folosite in HTML5 sunt: elementul <canvas> pentru desenarea 2D, <vid-
eo> și <audio> elemente pentru playback media, suport pentru stocarea locală.

4. HTML5 nu este încă un standard oficial și nu toate browserele au un întreg HTML suport.
2.2.2. CSS
CSS(Cascading Style Sheets) este un limbaj de stil folosit pentru a descrie prezentarea unui
document scris într-un limbaj de marcare. Este cea mai comună metodă de a stiliza paginile
web scrise în HTML și XHTML, dar limbajul poate fi aplicat oricărui tip de document XML.
CSS-ul reduce din timp, acesta definește cum anume să se afișeze elementele HTML.
CSS-ul prezintă o sintaxa simplă, iar foaia de stiluri conține o listă de reguli. Fiecare regulă
conține una sau mai mulți selectori. În CSS, selectorii sunt folosiți pentru a declara ce parte
din stilul marcat este aplicat.
2.2.3. JavaScript
JavaScript este un limbaj de programare de tip script care este folosit mai ales pentru intro-
ducerea unor funcționalități în paginile web, codul javascript din aceste pagini fiind rulat de
către browser. Cea mai des întâlnită utilizare a JavaScript-ului este în scriptarea paginilor
web. Se poate îngloba în paginile HTML script-uri pentru diverse activități, cum ar fi verifi-
carea datelor introduse de utilizatori sau crearea de meniuri si alte efecte animate.
3 Arhitectura aplicatiei
Yacks este o aplicatie Web care, prin intermediul unei interfete intuitive, permite studen-
tilor de la Facultatea de Informatica Iasi sa-si creeze un cont de utilizator cu care se pot auten-
tifica ulterior la aplicatia principala. Dupa autentificare aplicatia va oferi prin intermediul unor
pagini web un raport privind activitatile pe care trebuie sa le realizeze studentul intr-o sapta-
mana conform orarului corespunator grupei specificate la crearea contului. Aplicatia este asa-
dar realizata din mai multe module fiecare reprezentat prin cate o pagina web independenta.
• Modulul de autentificare
• Modulul de intregistrare a unui cont utilizator
• Modulul de afisare a raportului saptamanal

5. • Modulul de editare a contului utilizatorului
• Modulul de share a raportului
• Modulul de descarcarea unei arhive a raportului
3.1 Modulul de autentificare
Prin intermediul acestui modul utilizatorul are primul contact cu aplicatia prin inter-
mediul unei pagini in care ii este furnizat un formular pe care e nevoit sa il completeze cu
datele specifice contului sau pentru a putea accesa aplicatia. (Fig.1) In cazul in care datele
introduse nu se potrivesc cu cele de la inregistrare utilizatorul este notificat despre aceasta
printr-un mesaj de tip alerta.
Fig. 1
3.2 Modulul de inregistrare a unui cont utilizator
La prima accesare a aplicaţiei utilizatorul este nevoit să-şi creeze prin inter-mediul
paginii de Register un cont de utilizator format dintr-un username şi o parolă pe care le va
folosi la autentificările ulterioare. Numele de utilizator trebuie să fie un username valid înreg-
istrat pe fenrir (de obicei de forma: prenume.nume). Toate campurile din formularul de înreg-
istrare sunt obligatorii (exeptie facand campul pentru materiile optionale). Pe lângă datele
necesarii autentificarii utilizatorul va specifică încă de la crearea contului şi materiile
opţionale pe care le urmează şi numărul grupei unde este înregistrat sau în funcţie de care
doreşte să-i fie furnizat raportul de activităţi. (Fig.2)

6. Fig.2
3.3. Modulul de afisare a raportului saptamanal
Dupa cum ii spune si numele acest modul furnizeaza un raport saptamanal al activitati-
lor pe care utilizatorul logat trebuie sa le desfasoare conform orarului specific grupei cu care
s-a inregistrat la crearea contului si a informatiilor de pe siteurile disciplinelor aferente
orarului. Pe aceasta pagina utilizatorul are posibilitatea de a selecta saptamana pentru care
doreste sa-i fie afisat raportul si de a vizualiza intr-un tabel informatiile aferente saptamanii
respective. (Fig. 3)
După cum îi spune şi numele acest modul furnizează un raport săptămânal al activi-
tăţilor pe care utilizatorul logat trebuie să le desfăşoare conform orarului specific grupei cu
care s-a înregistrat la crearea contului şi a informaţiilor de pe siteurile disciplinelor aferente
orarului. Pe această pagină utilizatorul are posibilitatea de a selecta săptămâna pentru care
doreşte să-i fie afişat raportul şi de a vizualiza într-un tabel informaţiile aferente săptămânii
respective.
Informaţiile ce pot fi vizualizate conţin detalii privind: numele disciplinei şi tipul ac-
tivităţii (C – curs, L –laborator, S-seminar), ziua din săptămâna, intervalul orar şi numărul săli
în care se desfăşoară şi numele profesorului care preda disciplină respectivă. Pe lângă aceste
informaţii globale care vor fi aceleaşi pentru fiecare săptămâna dintr-un semestru, utilizatorul
va putea vizualiza în fiecare săptămâna un document în format pdf, pentru cursurile la care
acestea sunt disponibile pe pagină profesorului corespunzător prin accesarea unui link dis-
ponibil în dreptul numelui materiei.

7. Totodată coloana corespunzătoare numelui profesorului va furniza şi o legatură spre
pagină web a profesorului în cazul în care acesta are o astfel de pagină.
Fig. 3
3.4 Modulul de editare a contului utilizatorului
Acest modul permite utilizatorului să-şi schimbe oricare din datele de înregistrare in-
troduse la crearea contului, mai puţin username-ul. (Fig. 4)
Prin această pagină de editare a datelor personale utilizatorul îşi poate schimbă mate-
riile opţionale sau şi le poate şterge din planificarea activităţilor prin introducerea unui spaţiu
în câmpul asociat materiilor opţionale din formulă. De asemenea va fi capabil să-şi schimbe
grupa (care conţine şi anul de studiu) astfel încât în anul următor să aibă acces la raportul
săptămânal specific anului de studiu.

8. Fig. 4
3.5 Modulul de share a raportului
Acest modul ofera posibilitatea de a vizualiza raportul intr-o pagina separata si de a
da share paginii respective pe diferite retele de socializare cum ar fi : Facebook, Twitter, Red-
dit, Wordpress, Google+. Serviciul web folosit fiind sharethis.com.
3.6 Modulul de descarcarea unei arhive a raportului
Prin accesarea meniului “Download archive” pe calculatorul utilizatorului se va
descarca o arhiva ce va contine cate un raport saptamanal pentru fiecare saptamana pentru
care a vizualizat raportul in aplicatie.

9. 4 Detalii de implementare
Pentru implementarea acestei aplicatii am folosit cele mai recente tehnologii si limbaje de
programare (HTML5, CSS3, PHP5, JavaScript sau Ajax). Ca support pentru baza de date
aplicatia foloseste MySQL, un sistem de gestiune a bazelor de date relationale, in care datele
sunt memorate in tabele. Fiecare implementare a structurii modulelor descrise mai sus va fi
detaliata in sectiunea urmatoare.
4.1 Opțiunile de alegere
Utilizatorul, în momentul intrării pe aplicație are de ales între două opțiuni: register și
login. Daca aceta nu are cont, trebuie neapărat să își creeze unul pentru a putea continua sa
acceseze aplicatia. Opțiunea se alege în felul următor:
$pages = array('login', 'register');
if (!isset($_GET['_page']) || !in_array($_GET['_page'], $pages))
list($_page) = $pages;
else
$_page = $_GET['_page'];
include "site/{$_page}.php";
4.2 Modulul de inregistrare a unui cont utilizator
Dacă studentul nu are cont, acesta trebuie să își creeze un nou cont prin introducerea unui
username, a unei parole care va apărea criptată în baza de date (prin md5), a numelui, materiei
opționale și grupa din care face parte. Pentru a-si putea crea un astfel de cont utilizatorul
trebuie sa fie inscris la studiille de licenta la Facultatea de Informatica Iasi si sa fie inregistrat
in baza de date a facultatii cu un nume de cont unic.
Pentru fiecare câmp introdus, se verifică dacă acesta este introdus corect. Avem un array
numit errors unde punem mesajele de eroare pentru fiecare camp, daca este cazut. Un exem-
plu concret al validitatii email-ului introdus de user:
if (strlen($_POST['password']) < 6)
$errors[] = "Password too short !";
if (!preg_match("/^[a-zA-Z0-9]([w.-]*[a-zA-Z0-9])?@[a-zA-Z0-9][w.-]*[a-
zA-Z0-9].[a-zA-Z][a-zA-Z.]*[a-zA-Z]$/", $_POST['email'])) {
$errors[] = 'Email address incorrect!';
if (!preg_match("/^[1-3][A|B]Gr.[1-7]/", $_POST['group']))

10. Atunci când se introduce un username, acesta va apărea in baza de date, împreună cu toate
celelalte informații legate de user, însă trebuie verificat daca username-ul nu există deja în
baza de date.
if ($check != 1)
$errors[] = "There is no " . $_POST['username'] . " on fen-
rir server";
else {
$resultUser = mysql_query("SELECT user FROM `user` WHERE us-
er='" . $_POST['username'] . "'", $yacksDB);
while ($rowUser = mysql_fetch_array($resultUser)) {
$xUser = $rowUser['user'];
if ($xUser == $_POST['username'])
$errors[] = "User " . $_POST['username'] . " already
registered!";
break;
}
}
După ce ne-am introdus toate datele în formular, acestea vor fi puse in baza de date sub
forma:
$userInDB = mysql_real_escape_string($_POST['username']);
$passInDB = mysql_real_escape_string(md5($_POST['password']));
$nameInDb = mysql_real_escape_string($_POST['name']);
$emailInDb = mysql_real_escape_string($_POST['email']);
$materiiOptionaleInDb =
mysql_real_escape_string($_POST['materiiOptionale']);
$groupInDb = mysql_real_escape_string($_POST['group']);
mysql_query("INSERT INTO `user` (`user`, `pass`, `name`, `email`, `mate-
riiOptionale`, `group`, `hash`) VALUES ('" . $userInDB . "', '" . $passInDB
. "', '" . $nameInDb . "', '" . $emailInDb . "', '" . $materiiOptionaleInDb
. "', '" . $groupInDb . "', '" . $hash . "' );", $yacksDB);
Inainte de a adauga informatii in baza de date informatiile sunt transformate cu ajutorul
functiei mysql_real_escape_string, care adauga caracterul escape, backslash, inainte.
Aceasta functie este folosita pentru a preveni atacurile de tip SQL injection.
Contul este creat și va apărea un mesaj care va informa utilizatorul că cont-ul este creat și că
se poate intra pe aplicație:
function myFunction()
{
alert("Account created!");

11. }
myFunction()
4.3 Modulul de autentificare
Utilizatorul, în urma creării unui cont, are posibilitatea de a se loga si de a intra în aplicație.
Se va introduce username-ul și parola care va fi criptată prin md5. Dacă în câmpurile intro-
duse de utilizator se află un username si o parolă, atunci aplicația se va conecta la baza mea de
date și va selecta informațiile despre user-ul respective care au fost înregistrare la partea de
Register, daca exista.
$yacksDB = mysqli_connect(DB_HOST, DB_NAME, DB_PASS, DB_USER) or die
("could not connect to mysql");
$sqlCommandcheckUserAndPass = "SELECT * FROM `user` WHERE us-
er='".$userInput."'"." AND pass='".$passInput."'";
$querycheckUserAndPass = mysqli_query($yacksDB, $sqlCommandcheck-
UserAndPass)or die(mysql_error());
$row2 = mysqli_fetch_array($querycheckUserAndPass);
$_SESSION['user_info']['id'] = $row2['id'];
$_SESSION['user_info']['user'] = $row2['user'];
$_SESSION['user_info']['pass'] = $row2['pass'];
$_SESSION['user_info']['email'] = $row2['email'];
$_SESSION['user_info']['materiiOptionale'] = $row2['materiiOptionale'];
$_SESSION['user_info']['group'] = $row2['group'];
$_SESSION['user_info']['hash'] = $row2['hash'];
Se va creea sesiuni cu eticheta ”user_info” unde voi plasa toate numele câmpurilor din baza
mea de date.
4.3 Modulul de afisare a raportului saptamanal
Pentru reprezentarea raportului saptamanal ne-am folosit de informatiile preluate din orarul
complet al studentilor pe ani de studiu disponibil la adresa:
http://thor.info.uaic.ro/~orar/globale/orar_complet.html pe care l-am transformat intr-un doc-
ument XML avand tagurile specifice fiecarei informatii extrase de pe site.
$xml = new XMLWriter;
for ($i = 0; $i < 6; $i++) {
$h2 = $dom -> getElementsByTagName('h2');
$an = $h2 -> item($i) -> nodeValue;

12. $elimin = array("Orar Informatica, anul ");
$anul = trim(str_replace("Orar Informatica, anul ", '', $an));
$tables = $dom -> getElementsByTagName('table') -> item($i);
$rows = $tables -> getElementsByTagName('tr');
foreach ($rows as $row) {
$nrcoloane = $row -> getElementsByTagName('td') -> length;
if ($nrcoloane == 1)//linia curenta este o zi
{
$cols = $row -> getElementsByTagName('td');
$z = $cols -> item(0) -> nodeValue;
$zi = trim($z);
} elseif ($nrcoloane > 1)//linia curenta este o intrare normala
{
$cols = $row -> getElementsByTagName('td');
$xml -> startElement('ora');
$xml -> writeElement('zi', $zi);
$ora1 = $cols -> item(0) -> nodeValue;
$de_la = trim($ora1);
$xml -> writeElement('de_la', $de_la);
//cod asemanator
$semian = preg_replace("/[^1-9a-zA-Z.]/", "", $grupa);
$l=strlen($semian);
if($l<=2){
$g=substr($semian,0,2);
$xml -> writeElement('grupa', $g);
}
if($l==6){
$g1=substr($semian,0,6);
$xml -> writeElement('grupa', $g1);
}
}
//cod asemanator
$mat = $cols -> item(3) -> nodeValue;
$disciplina = trim($mat);
$xml -> writeElement('disciplina', $disciplina);
$type = $cols -> item(4) -> nodeValue;
$tip = trim($type);
$xml -> writeElement('tip', $tip);
$prof = $cols -> item(5) -> nodeValue;
$profesor = trim($prof);
$xml -> writeElement('profesor', $profesor);

13. $s = $cols -> item(6) -> nodeValue;
$sala = trim($s);
$xml -> writeElement('sala', $sala);
$xml -> endElement();
}
Raportul activitatilor specific fiecarui utilizator este pus la dispozitie in pagina principala prin
reprezentarea intr-un tabel a informatiilor specifice in functie de grupa utilizatorului din doc-
umentul DOM corespunzator fisierului XML creat anterior:
$doc = new DomDocument;
$doc->load ("orar.xml");
try {
$xpath = new DOMXPath($doc);
$arts = $xpath->query("/orar/ora"); ?>
<table>
<tr>
<th>Day</th>
<th>From</th>
<th>To</th>
<th>Discipline</th>
<th>Type</th>
<th>Professor</th>
<th>Class No.</th>
</tr>
<?php
foreach ($arts as $art){
$grupa = $art->getElementsByTagName("grupa");
$zi = $art->getElementsByTagName("zi");
$de_la = $art->getElementsByTagName("de_la");
$pana_la = $art->getElementsByTagName("pana_la");
$disciplina = $art->getElementsByTagName ("disciplina");
$tip = $art->getElementsByTagName("tip");
$profesor = $art->getElementsByTagName("profesor");
$sala = $art->getElementsByTagName("sala");
<tr>
<td><? echo $zi->item(0)->nodeValue ?></td>
<td><? echo $de_la->item(0)->nodeValue ?></td>
<td><? echo $pana_la->item(0)->nodeValue ?></td>
<td><? echo "<a
href='http://students.info.uaic.ro/~iulia.cojocaru/yacksA1c/details.php?obj
_page=".$obj_page."' target="_blank">";

14. echo $_disciplina ?></td>
<td><? echo $tip->item(0)->nodeValue ?></td>
<td><? echo $profesor->item(0)->nodeValue ?></td>
<td><? echo $sala->item(0)->nodeValue ?></td></tr>
4.5 Modulul de editare a contului utilizatorului
Editarea oricarei informatii privind contul utilizatorului se realizeaza efectiv printr-un up-
date in baza de date la campul corespunzator informatiei care se doreste a fi schimbata.
if (!empty($_POST['name']))
mysql_query("UPDATE user SET name='".$nameFromForm."' WHERE us-
er='".$userFromSession."'",$yacksDB);
if (!empty($_POST['password'])){
mysql_query("UPDATE user SET pass ='".md5( $passwordFormForm)."' WHERE
user ='".$userFromSession."'",$yacksDB );
mysql_query("UPDATE user SET hash='".$hash."' WHERE us-
er='".$userFromSession."'",$yacksDB);
}
if (!empty($_POST['email']))
mysql_query( "UPDATE user SET email = '".$emailFormForm."' WHERE user =
'".$userFromSession."'",$yacksDB);
if (!empty($_POST['materiiOptionale']))
mysql_query("UPDATE user SET materiiOtionale =
'".$materiiOptionaleFormForm."' WHERE user =
'".$userFromSession."'",$yacksDB);
4.6 Modulul de share a raportului
Pentru a realiza share-ul raportului am creat mai intai raportul pe saptamana respectiva ca
fiind un tabel intr-o pagina HTML, i-am creat un URL si apoi prin apelul unui javascript am
realizat share-ul. Acest javascript reprezinta serviciul web folosit, adica: sharethis.com/.
<script type = "text/javascript">
var switchTo5x = true;
</script>
<script type = "text/javascript" src =
"http://w.sharethis.com/button/buttons.js"> </script>
<script type="text/javascript">

15. stLight.options ({publisher: "452ca9e1-4a8c-4985-926d-f87af28f4528",
doNotHash: false, doNotCopy: false, hashAddressBar: true});
</script>;
4.7 Logout
Delogarea se face prin ștegerea sesiunii care s-a creat si redirectarea spre pagina de login
(pricipala).
unset($_SESSION['user_info']);
header("location: index.php");
5. Concluzii
Această aplicaţie îşi propune să reprezinte un instrument util pentru studenţii de la
Facultatea de Informatică, licenţă, prin oferirea posibilităţii de a accesa de pe o singură pagină
web informaţiile necesare organizării timpului într-o săptămâna de studiu.
Datorită arhitecturii structurale vor putea fi adăugate uşor noi funcţionalităţi pentru
îmbunătăţirea constanţa a experienţei utilizatorilor şi a performanţei aplicaţiei. Organizarea
cât mai eficientă a activităţile de zi cu zi devine din ce în ce mai im-portanţa, o asemenea
aplicaţie bine realizată şi actualizează poate salva considerabil timpul unui student ajutând la
eficientizarea acestuia.
În timp aplicaţia ar mai putea fi actualizată din multe puncte de vedere, atât pe partea
de client cât şi pe server. Unele funcţionalităţi suplimentare ar putea viza posi-bilitatea că un
utilizator care are cont să beneficieze de un serviciu de recuperare în cazul în care a uitat pa-
rolă. De asemenea s-ar putea crea o lista de opţiuni cu materii din toţi anii, utilizatorii fiind
capabili să selecteze materii din anii anteriori în cazul unor restante.
6. Bibliografie
1. Sabin Buragat, Tehnologii XML, Polirom, Iaşi, 2006
2. Sabin Buraga - http://thor.info.uaic.ro/~busaco/teach/courses/web/web-film.html
3. w3Schools - http://www.w3schools.com/
4. Faculty of Computer Science, University of Iasi - infoiasi.ro
5. “Programming PHP” by Rasmus Lerdorf, Kevin Tatroe, Peter MacIntyre
6. HTML and CSS: Design and Build Websites by Jon Duckett
7. ShareThis share Buttons - link