Documentatie Your Academic Tasks

240 views
201 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
240
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Documentatie Your Academic Tasks

  1. 1. Yacks – Your Academic Tasks (B)Alice - Georgiana Burdujanualice.burdujanu@info.uaic.roIulia – Andreea Cojocaruiulia.cojocaru@info.uaic.roFacultatea de Informatică, Universitatea Alexandru Ioan Cuza, IașiAbstract. 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 lacare sunt înscriși, de a consulta o arhivă a rapoartelor saptămânale pentru un semestru si totodată vor puteapartaja conținutul raportului via o aplicație Web social – de exemplu Facebook, Twitter.Cuvinte-cheie: Yacks, Web, html5, css3, php5.
  2. 2. 1 IntroducereAplicația ‘Your Academic Tasks’ (Yacks) este o modalitate prin care ne putem organizatimpul cât mai eficient și plăcut, aceasta datorându-se realizarii de catre aplicatii a unui raportal 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 maifrecvente, de exemplu Facebook sau Twitter. Cu ușurință se pot alege materiile opționale, iarinformațiile despre acestea și profesorul respectiv vor fi într-un singur loc.2 Tehnologii utilizate2.1 Partea de server a aplicației2.2.1.1 PHPPHP (PHP: Hypertext Preprocessor) este un limbaj de programare de tip script, ce estefolosit pe o scară largă în dezvoltarea paginilor și a aplicațiilor Web și care poate fi înglobat încadrul documentelor HTML. Cu ajutorul PHP-ul se pot cu ușurință colecta date form, generadate si conținutul paginilor dinamic sau să trimiți si primi cookie-uri. Scripturile PHP suntfolosite în trei domenii principale: script pe partea de server, script la linia de comandă șiscrierea de aplicații Desktop.2.2.1.2 AjaxAjax-ul este o tehnică de programare pentru crearea de aplicații web interactive. Intențiaeste 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 Webce folosesc un ansamblu de tehnologii: HTML sau XHTML pentru structura semantică a in-
  3. 3. formațiilor, CSS pentru prezentarea informațiilor, Javascript pentru interactivitate,XMLHttpRequest și XML.2.1.2 Surse de date2.1.2.1. MySQLMySQL este o arhitectură open-source foarte rapidă și un sistem de gestiune a bazelor dedate relațional. Deși este folosit foarte des împreună cu limbajul de programare PHP, cuMySQL se pot construi aplicații în orice limbaj major.2.1.2.2. XMLXML(Extensible Markup Language) este un limbaj de marcare pentru crearea de altelimbaje de marcare cum ar fi: XHTML, RSS, SVG. XML-ul este și un model de stocare adatelor 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 aplicatiei2.2.1. HTMLHTML(HyperText Markup Language) este un limbaj de marcare utilizat pentru creareapaginilor 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 aerorilor, 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. 4. HTML5 nu este încă un standard oficial și nu toate browserele au un întreg HTML suport.2.2.2. CSSCSS(Cascading Style Sheets) este un limbaj de stil folosit pentru a descrie prezentarea unuidocument scris într-un limbaj de marcare. Este cea mai comună metodă de a stiliza paginileweb 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 partedin stilul marcat este aplicat.2.2.3. JavaScriptJavaScript 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 decătre browser. Cea mai des întâlnită utilizare a JavaScript-ului este în scriptarea paginilorweb. 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 aplicatieiYacks 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 unorpagini 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. 5. • Modulul de editare a contului utilizatorului• Modulul de share a raportului• Modulul de descarcarea unei arhive a raportului3.1 Modulul de autentificarePrin 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 cudatele specifice contului sau pentru a putea accesa aplicatia. (Fig.1) In cazul in care dateleintroduse nu se potrivesc cu cele de la inregistrare utilizatorul este notificat despre aceastaprintr-un mesaj de tip alerta.Fig. 13.2 Modulul de inregistrare a unui cont utilizatorLa prima accesare a aplicaţiei utilizatorul este nevoit să-şi creeze prin inter-mediulpaginii de Register un cont de utilizator format dintr-un username şi o parolă pe care le vafolosi 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ă datelenecesarii autentificarii utilizatorul va specifică încă de la crearea contului şi materiileopţionale pe care le urmează şi numărul grupei unde este înregistrat sau în funcţie de caredoreşte să-i fie furnizat raportul de activităţi. (Fig.2)
  6. 6. Fig.23.3. Modulul de afisare a raportului saptamanalDupa 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 cares-a inregistrat la crearea contului si a informatiilor de pe siteurile disciplinelor aferenteorarului. Pe aceasta pagina utilizatorul are posibilitatea de a selecta saptamana pentru caredoreste sa-i fie afisat raportul si de a vizualiza intr-un tabel informatiile aferente saptamaniirespective. (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 cucare s-a înregistrat la crearea contului şi a informaţiilor de pe siteurile disciplinelor aferenteorarului. Pe această pagină utilizatorul are posibilitatea de a selecta săptămâna pentru caredoreşte să-i fie afişat raportul şi de a vizualiza într-un tabel informaţiile aferente săptămâniirespective.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ă acesteinformaţii globale care vor fi aceleaşi pentru fiecare săptămâna dintr-un semestru, utilizatorulva putea vizualiza în fiecare săptămâna un document în format pdf, pentru cursurile la careacestea sunt disponibile pe pagină profesorului corespunzător prin accesarea unui link dis-ponibil în dreptul numelui materiei.
  7. 7. Totodată coloana corespunzătoare numelui profesorului va furniza şi o legatură sprepagină web a profesorului în cazul în care acesta are o astfel de pagină.Fig. 33.4 Modulul de editare a contului utilizatoruluiAcest 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 schimbegrupa (care conţine şi anul de studiu) astfel încât în anul următor să aibă acces la raportulsăptămânal specific anului de studiu.
  8. 8. Fig. 43.5 Modulul de share a raportuluiAcest modul ofera posibilitatea de a vizualiza raportul intr-o pagina separata si de ada 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 raportuluiPrin accesarea meniului “Download archive” pe calculatorul utilizatorului se vadescarca o arhiva ce va contine cate un raport saptamanal pentru fiecare saptamana pentrucare a vizualizat raportul in aplicatie.
  9. 9. 4 Detalii de implementarePentru implementarea acestei aplicatii am folosit cele mai recente tehnologii si limbaje deprogramare (HTML5, CSS3, PHP5, JavaScript sau Ajax). Ca support pentru baza de dateaplicatia foloseste MySQL, un sistem de gestiune a bazelor de date relationale, in care datelesunt memorate in tabele. Fiecare implementare a structurii modulelor descrise mai sus va fidetaliata in sectiunea urmatoare.4.1 Opțiunile de alegereUtilizatorul, în momentul intrării pe aplicație are de ales între două opțiuni: register șilogin. Daca aceta nu are cont, trebuie neapărat să își creeze unul pentru a putea continua saacceseze 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 utilizatorDacă studentul nu are cont, acesta trebuie să își creeze un nou cont prin introducerea unuiusername, a unei parole care va apărea criptată în baza de date (prin md5), a numelui, materieiopționale și grupa din care face parte. Pentru a-si putea crea un astfel de cont utilizatorultrebuie sa fie inscris la studiille de licenta la Facultatea de Informatica Iasi si sa fie inregistratin 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 arraynumit 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. 10. Atunci când se introduce un username, acesta va apărea in baza de date, împreună cu toatecelelalte informații legate de user, însă trebuie verificat daca username-ul nu există deja înbaza 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] . " alreadyregistered!";break;}}După ce ne-am introdus toate datele în formular, acestea vor fi puse in baza de date subforma:$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 ajutorulfunctiei 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. 11. }myFunction()4.3 Modulul de autentificareUtilizatorul, î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 dedate și va selecta informațiile despre user-ul respective care au fost înregistrare la partea deRegister, 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 bazamea de date.4.3 Modulul de afisare a raportului saptamanalPentru reprezentarea raportului saptamanal ne-am folosit de informatiile preluate din orarulcomplet 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. 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. 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 prinreprezentarea 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><?phpforeach ($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 "<ahref=http://students.info.uaic.ro/~iulia.cojocaru/yacksA1c/details.php?obj_page=".$obj_page." target="_blank">";
  14. 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 utilizatoruluiEditarea 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)." WHEREuser =".$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 raportuluiPentru a realiza share-ul raportului am creat mai intai raportul pe saptamana respectiva cafiind un tabel intr-o pagina HTML, i-am creat un URL si apoi prin apelul unui javascript amrealizat 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. 15. stLight.options ({publisher: "452ca9e1-4a8c-4985-926d-f87af28f4528",doNotHash: false, doNotCopy: false, hashAddressBar: true});</script>;4.7 LogoutDelogarea 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. ConcluziiAceastă aplicaţie îşi propune să reprezinte un instrument util pentru studenţii de laFacultatea 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. Organizareacât mai eficientă a activităţile de zi cu zi devine din ce în ce mai im-portanţa, o asemeneaaplicaţie bine realizată şi actualizează poate salva considerabil timpul unui student ajutând laeficientizarea acestuia.În timp aplicaţia ar mai putea fi actualizată din multe puncte de vedere, atât pe parteade client cât şi pe server. Unele funcţionalităţi suplimentare ar putea viza posi-bilitatea că unutilizator 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 fiindcapabili să selecteze materii din anii anteriori în cazul unor restante.6. Bibliografie1. Sabin Buragat, Tehnologii XML, Polirom, Iaşi, 20062. Sabin Buraga - http://thor.info.uaic.ro/~busaco/teach/courses/web/web-film.html3. w3Schools - http://www.w3schools.com/4. Faculty of Computer Science, University of Iasi - infoiasi.ro5. “Programming PHP” by Rasmus Lerdorf, Kevin Tatroe, Peter MacIntyre6. HTML and CSS: Design and Build Websites by Jon Duckett7. ShareThis share Buttons - link

×