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.

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-

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ă.

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

• 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)

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.

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.

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.

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']))

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!");

}

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;

$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);

$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\">";

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">

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