Aplicatie Web Pentru Testare Cunostintelor

Cuprins

Capitolul I 4

Introducere 4

Capitolul II 5

Fundamentare teoretică 5

II.1 Stabilirea scopului website-ului 5

II.2 Baze de date 6

II.2.1 Clasificarea sistemelor de baze de date 6

II.2.2 Securitatea și protecția datelor in bazele de date 7

II.2.3 MySQL 7

II.2. Tehnologii utilizate 9

II.2.1 HTML 9

II.2.2 CSS 11

III.3.PHP 12

III.4 JavaScript 13

III.5 XAMPP 14

III.6 SQL 15

III.6 jQuery 16

III.7 Notepad++ 18

III.8 Bootstrap 18

Capitolul III 20

Prezentarea aplicației 20

III.1 Structura website-ului 20

IV.2 Administrarea aplicației 20

IV.3 Baza de date 21

Bibliografie 26

Capitolul I

Introducere

Am ales ca temă pentru lucrarea de diplomă să creez o aplicație web pentru testarea cunoștințelor, deoarece sunt pasionat de concursurile care testează cultura generală, concursuri precum "Vrei să fii milionar?", "Te crezi mai deștept decât un copil de clasa a 5a?", "Cine știe câștigă" etc.

Scopul aplicației este acela de a testa cunoștințele utilizatorilor. Aplicația a fost creată pentru a fi ușor de utilizat și este destinată oricărui tip de utilizator.

Numele site-ului este “Crezi ca știi?”, este conceput ca utilizatorii să își poată testa cunoștințele în două moduri, anume, o testare cu patru variante de răspuns și o testare de tip adevărat/fals. Întrebările sunt de cultură generala, din diverse domenii, precum geografie, matematica, informatica s.a.

La finalul testării, utilizatorul va afla un procentaj, acesta reprezentând răspunsurile sale corecte din totalul de întrebări. De asemenea va putea introduce numele său, pentru a putea compara rezultatul său cu top zece scoruri maxime realizate de alți utilizatori.

Site-ul este structurat în doua părți :

Utilizator : la care are acces utilizatorul ,acesta poate doar sa vizualizeze interfața site-ului sau să aleagă tipul de testare dorit, cu patru variante sau adevărat/fals.

Administrator: aici au acces doar cel care administrează site-ul. Pentru a accesa aceasta pagina e nevoie de o adresa email și o parolă, dacă autentificarea e corecta, administratorul va fi redirecționat pe o pagina unde poate adaugă întrebări, poate adăuga administratori sau să își schimbe parola.

Pagina poate fi accesată momentan doar în localhost, accesul fiind posibil cu ajutorul programului Xampp

Capitolul II

Fundamentare teoretică

Proiectarea unui site Web reprezintă un caz particular de proiectare a unei interfețe cu utilizatorul. Grija deosebită acordată proiectării interfeței cu utilizatorul, indiferent de tipul aplicației software dezvoltate, se datorează faptului că utilizatorul final percepe complexitatea și utilitatea aplicației exclusiv prin intermediul interfețelor. Realizarea unei interfețe deplin funcționale, ergonomice, productive și agreabile este o activitate complexă și dificilă, care necesită combinarea mai multor tehnologii și conlucrarea unor echipe diverse de profesioniști (graficieni, programatori, experți în relații cu publicul și chiar utilizatorul final).

II.1 Stabilirea scopului website-ului

Pentru a putea identifica nevoile utilizatorilor este nevoie, să stabilim cu precizie scopului website-ului. Este necesar să stabilim un set de obiective ce vor fi atinse prin dezvoltarea site-ului, formulând apoi, într-o fraza , scopul site-ului pe care îl dezvoltăm. Scopul identificat trebuie să conțină elemente ce denota eficientizarea activității organizației sau firmei pentru care dezvoltăm aplicația. Scopul trebuie enunțat astfel încât succesul respectivului site să poată fi evaluat și cuantificat în termeni calitativi și cantitativi. [1]

Un prim pas în stabilirea scopului sitului poate fi făcut printr-o bună cunoaștere a tipului de vizitator căruia ne adresăm, adică a audienței site-ului. Structurarea site-ului și stabilirea designului se face în concordanță cu nevoile și așteptările potențialilor vizitatori. Nu trebuie să pierdem din vedere gradul de instruire în domeniul IT al vizitatorilor, astfel încât să putem furniza o interfața ușor de folosit în egala măsura atât de către novici cât și de către utilizatorii experimentați. Din punct de vedere al experienței și interesului manifestat de vizitatori, putem identifica trei categorii de utilizatori. [1]

Utilizatorii novici și cei ocazionali. Acești utilizatori vor fi atrași de structura clară a site-lui și de navigarea facilă în cadrul structurii informaționale furnizate. Pagina de primire trebuie să fie organizată judicios, să aibă un design atractiv și să ofere de la prima privire o imagine generala privind informația ce poate fi găsita. Studii efectuate de specialiști relevă faptul ca mai puțin de 10% din cititorii unei pagini web derulează documentul pentru a vedea partea inferioara a paginii. [1]

Utilizatorii frecvenți și experții. Această categorie de utilizatori apreciază, în primul rând, accesul rapid și acuratețea informațiilor obținute. Utilizatorii experți nu au răbdare să utilizeze meniuri grafice complicate, care se încarcă relativ greu; sunt apreciate meniurile text, care permit accesul rapid la informația dorită. [1]

Utilizatorii internaționali și utilizatorii cu dizabilități. Daca situl nostru se adresează unei largi categorii de vizitatori, care ar putea cuprinde și utilizatori din alte tari, atunci trebuie să furnizam în cadrul interfeței facilități pentru aceștia: traduceri în limbile de larga circulație internațională pentru informațiile cele mai importante, atenție sporită la convențiile locale privitoare la dată, timp și unități de măsura. [1]

Pentru utilizatorii cu dizabilități (persoane nevăzătoare, hipoacuzici, etc) trebuie să furnizam facilitați de accesibilizare a sitului, cum ar fi: posibilitatea schimbări dimensiunii fontului, atașarea de texte explicative elementelor grafice, realizarea de scurtături pentru accesul la elementele importante, variante text ol pentru paginile principale etc. [1]

II.2 Baze de date

O bază de date este o colecție de date bine structurate și organizate. Principalele roluri ale bazelor de date sunt: stocarea sau memorarea datelor și organizarea sau structurarea datelor.

Bazele de date ne permit memorarea unor cantități foarte mari de date, dar și regăsirea datelor cu ajutorul unor criterii de căutare(care sunt legate intr-un mod direct de structurarea datelor), dar și prelucrarea unor volume mari de date(ordonare,agregare și filtrare).

O bază de date are următoarele proprietăți:

este o colecție logică de date ce are cel puțin un înțeles

este construită și populată de date despre un domeniu bine precizat. Are un grup de utilizatori și se adresează unui anumit grup de aplicații

O bază de date reprezintă câteva aspecte ale lumii reale creând orizontul propriu. Schimbările orizontului sunt reflectate în baza de date

[21]

II.2.1 Clasificarea sistemelor de baze de date

Bazele de date se clasifică în :

Modelul de date relațional

Modelul de date orientat

Modelul de date obiect-relațional

Modelul de date ierarhic

Modelul de date rețea

Majoritatea sistemelor de baze de date sunt sisteme multiutilizator, adică permit accesul concurent (în același timp) a mai multor utilizatori la aceeași bază de date. Există și un număr redus de sisteme monoutilizator, adică suportă accesul doar al unui utilizator (la un moment dat). [21]

Există două categorii de sisteme de baze de date:

Sisteme de baze de date centralizat – sistem de baze de date în care datele și sistemul de gestiune sunt stocate pe un singur calculator.

Sisteme de baze de date distribuit poate avea atât datele, cât și sistemul de gestiune, distribuite pe mai multe calculatoare interconectate printr-o rețea de comunicație.

[21]

II.2.2 Securitatea și protecția datelor in bazele de date

Securitatea bazelor de date se face folosind diverse controale de securitate asupra : datelor informaționale, aplicațiilor sau funcțiilor stocate, sistemului bazei de date, serverelor si link-urile de rețea asociate. Securitatea implică mai multe tipuri sau categorii de controale, precum tehnice, procedurale/administrative și fizice.

Riscurile de securitate ale unei baze de date include:

Activitate neautrorizata , neasistata a catre utilizatorilor autorizati,administratorii de retea sau managerii de retea/sistem.

Infectii malware cauzate de acces neautorizat, sau scurgere de informatii din partea personalului,stergerea sau modificarea datelor baze de date

Supraincarcarea,constrangeri de performanta sau limitarea capacitatii

Daune fizice asupra serverelor, cauzate de incendii, inundații, supraîncălzire, descărcare statică

Defect de design și erori de programare în baza de date

Coruperea și/sau pierderea datelor din cauza unei comenzi invalide, greșeli în baza de date sau în sistemul de administrare a proceselor, sabotaj etc.

[21]

II.2.3 MySQL

MySQL este un sistem relational de management al bazelor de date (RDBMS).Este open source și este cel mai utilizat program RDBMS.Acronimul SQL înseamnă Structured Query Language (Limbaj structurat de interogare) .

SQL este cel mai popular limbaj pentru adăugarea,accesarea si managementul conținutului dintr-o baza de date.Cele mai notabile caracteristici sunt procesarea rapida, usurinta si flexibilitatea.MySQL este o parte esentiala a oricarei aplicatii open source PHP.

Utilizatorii pot folosi instrumente de linie de comandă, aplicații desktop sau aplicații web cu care se pot administra și crea baze de date MySQL

Utilizatorii unei baze de date pot efectua mai multe operații asupra datelor:

Inserarea de date (insert)

Ștergerea de date (delete)

Modificarea datelor (update)

Citirea bazei de date (query) pentru a extrage anumite date

[22] [23]

Bazele de date relaționale sunt de departe cel mai folosit tip de baze de date. Acestea au o bază teoretică solidă în algebra relațională. [22] [23]

II.2. Tehnologii utilizate

II.2.1 HTML

HTML (HyperText Markup Language ) este un limbaj de programare conceput în scopul creării paginilor web.Aceste site-uri web pot fi vizualizate de orice persoană care e conectată la internet. E relativ ușor de învățat, conceptele de bază se pot învăța într-o singură ședere. În ciuda acestui fapt, HTML deține unelte puternice, care permit utilizatorului să creeze pagini web de la primul contact. [6]

HyperText e metoda cu care se poate naviga pe web, dând click pe texte speciale numite hyperlink-uri, utilizatorii sunt redirecționați pe pagina următoare. Faptul că e hyper înseamnă că nu e liniar, adică se poate naviga pe internet pe orice pagină dorim, printr-un simplu click.Markup(marcaj), e ceea ce marcajele specifice HTML, fac textului din interiorul acestora.

HTML consistă dintr-o serie de coduri scurte, scrise de către autorul site-ului

într-un fișier text. – acestea sunt etichete. Textul este după aceea salvat într-un fier html, și văzut într-un browser, Internet Explorer de exemplu. Browser-ul citește fișierul html și traduce textul într-o formă vizibilă, redând pagina așa cum a dorit autorul site-ului. [6]

Pentru a realiza viziunea sa, autorul unui site trebuie să folosească corect etichetele, putând folosi de la un editor de texte rudimentar ca și Notepad până la un editor grafic puternic ca și Adobe Dreamweaver. [6]

Etichetele sunt ce separă textul normal de codul HTML. Diferite etichete vor realiza diferite lucruri, de la editarea titlurilor sau texturilor, până la adăogarea de imagini sau tabele. Atunci când browser-ul reda pagina web, nu putem vedea etichetele, dar putem vedea efectul lor. [6]

Standardul HTML a trecut prin mai multe etape de dezvoltare, ajungând în prezent la versiunea a5a.

HTML5 poate fi definit ca un ansamblu de tehnologii care constituie web-ul modern si face posibile crearea de conținuturi multimedia, animații și aplicații tot mai sofisticate.

Standardul HTML5 a fost publicat de către W3C ca Working Draft în anul 2008, un nou stadiu de „Recomandare W3C” fiind așteptat în anul 2014. WHATWG continuă să lucreze la HTML, dar renunță în cele din urmă. În acest mod, specificațiile pentru HTML sunt considerate un „standard viu”, limbajul HTML5 rămânând doar un instantaneu al evoluției sale. [6]

Creatorii HTML5 au dorit să dezvolte limbajul HTML dar și să păstreze simplitatea versiunilor anterioare, și în același timp să ușureze munca dezvoltatorilor.

Îmbunătățiri aduse odată cu standardul HTML5:

Accesibilitate

HTML5 face crearea site-urilor accesibil mai ușoară din doua motive: semanticile și ARIA.Noile etichete(header,footer,nav,section,aside etc) permit cititoarelor de ecran(programe software care permit oamenilor cu probleme de vedere sau oamenilor orbi să citească textul afișat pe ecranul unui calculator, cu un sintetizator de discurs sau un dispozitiv Braille), să acceseze mai ușor conținutul, astfel se creează o experiență mai buna pentru oamenii care utilizează astfel de dispozitive.

ARIA este o specificație W3C,care asignează roluri specifice elementelor dintr-un document HTML. În trecut acest lucru a fost trecut cu vederea datorită faptului că nu era valid, dar HTML5 validează aceste atribute. De asemenea,HTML5 are roluri incorporate care nu pot fi suprascrise, făcând asignarea rolurilor o sarcină foarte ușoară.

Cod mai ordonat

HTML5 permite scrierea codului, într-o manieră mai ordonată și descriptive, cu ajutorul codului semantic, care permite separarea sensului de stil și de conținut.

Stocare inteligentă

Una din noile caracteristice HTML5 este stocarea locala. E o încrucișare intre vechile module cookie și bazele de date de partea clienților. E mai buna decât un modul cookie, fiindcă permite stocarea de-alungul mai multor ferestre. Are o securitate și performanță mai bună, iar datele vor persista chiar și după ce browser-ul este închis.

Drag and Drop

HTML5 include funcția Drag and Drop, care permite dezvoltatorilor de aplicații interactive, având posibilitatea de a muta orice element în locul dorit.

Suportă dispozitivele mobile

Tot mai multă lume utilizează telefoane inteligente sau tablete, acest lucru înseamnă ca tot mai mulți utilizatori vor folosi browser-e mobile pentru a vizita pagini web sau aplicații. HTML5 e una din cele mai bune unelte pentru dezvoltatorii de site-uri și aplicații.

Avantajele utilizării limbajului HTML

Ușor de folosit

Sintaxă flexibilă

E suportat de aproape orice browser

E utilizat in majoritatea daca nu în toate website-urile

E foarte similar cu sintaxa XML, care e tot mai des folosit pentru stocarea de date

E gratuit, nu trebuie sa cumperi nici un software.

Ușor de învățat de către oricine.

Dezavantajele utilizării limbajului HTML

E un limbaj static, nu poate produce output dinamic de unul singur.

Uneori, structura documentelor HTML e greu de analizat.

Securitatea oferita de HTML e limitată. [7][8][9]

II.2.2 CSS

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style.

CSS a fost proiectat cu scopul separări conținutului documentului de prezentarea documentului, incluzând elemente ca aspect, culoare, și fonturi. Această separare poate îmbunătăți accesibilitatea la conținut, oferind un control și o flexibilitate mai mare. De asemenea permite ca mai multe pagini HTML să împartă aceeași stilizare.

Prin specificarea CSS-ului relevant într-un fișier cu extensia .css, se reduce complexitatea si repetiția în structura conținutului.CSS face posibilă separarea prezentării instrucțiunilor din conținutul HTML într-un fișier separate sau o secțiune de stilizare a fișierului HTML.

Această separare a formatării si a conținutului face posibilă prezentarea aceleași pagini în diferite stiluri pentru diferite metode de redare. Poate fi folosit si pentru afișarea paginilor web în funcție de mărimea ecranului sau a dispozitivului pe care este vizionat.

Un alt avantaj al CSS este schimbarea estetica aplicata design-ului graphic a unui document(sau sute de documente) poate fi aplicată repede și ușor, prin editarea câtorva linii într-un fișier, în comparație cu editarea rând cu rând a fiecărui document.

Avantajele utilizării CSS:

Controlul aspectului mai multor documente cu un singur fișier de stilizare.

Control mai precis al aspectului

Aplicarea de aspecte diferite pentru diferite tipuri mediat(ecran,printare etc)

Tehnici numeroase si avansate

Dezavantajele utilizării CSS:

Probleme de viteză: descărcarea unui fișier HTML si a unui fișier CSS va dura mai mult timp decât descărcarea unui fișier HTML. Acest dezavantaj va fi compensat doar dacă utilizatorul descarcă mai multe pagini folosind acelaș CSS.

Sintaxă diferită față de HTML:CSS a fost dezvoltat independent de HTML și folosește o sintaxă diferită, așa că un dezvoltator web va fi nevoit să învețe două sintaxe diferite.

Necesită accesul la un fișier extern: daca fișierul HTML va fi salvat pe disc fără asocierea fișierului de stilizare, acesta va pierde formatarea în modul offline. Similar, orice pagina web care depinde de un fișier de stilizare va pierd formatarea daca acesta este pierdut.

Poate fi ușor suprascris: fiindcă CSS este un sistem deschis bazat pe text nu exista securitatate construită, oricine cu drepturi citire/scriere poate conrupe formatarea fișierului CSS sau să schimbe link-urile paginilor web.[10][11]

III.3.PHP

PHP este un limbaj de programare. Numele PHP provine din limba engleză și este un acronim recursiv : Php: Hypertext Preprocessor. Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web.

Este unul din cele mai importante limbaje de programare web open-source și server-side, existând versiuni disponibile pentru majoritatea web serverelor și pentru toate sistemele de operare.

Spre deosebire de fișierele .html care o dată create pe discul local cu un editor de texte pot fi deschise imediat tot local, direct în browser-ul de Internet, pentru a rula codul PHP este absolut necesar ca fișierele să fie puse în directorul în care rezidă documentele serverului web, iar vizualizarea lor să fie făcută prin intermediul acestuia. În mod implicit, un fișier care conține un script PHP trebuie să fie salvat cu extensia .php.

Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor caracteristici :

Familiaritatea : sintaxa limbajului este foarte ușoară combinând sintaxele unora din cele mai populare limbaje Perl sau C;

Simplitatea : sintaxa limbajului este destul de liberă. Nu este nevoie de includere de biblioteci sau de directive de compilare, codul PHP inclus într-un document executându-se între marcajele speciale;

Eficiența : PHP-ul se folosește de mecanisme de alocare a resurselor, foarte necesare unui mediu multiutilizator, așa cum este web-ul;

Securitate : PHP-ul pune la dispoziția programatorului un set flexibil și eficient de măsuri de siguranță;

Flexibilitate : fiind apărut din necesitatea dezvoltării web-ului, PHP a fost modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii. Nefiind legat de un anumit server web, PHP-ul a fost integrat pentru numeroasele servere web existente: Apache, IIS, Zeus, server, etc.;

Gratuitate : este probabil cea mai importantă caracteristică a PHP-ului. Dezvoltarea PHP-ului sub licența open-source a determinat adaptarea rapidă a PHP-ului la nevoile web-ului, eficientizarea și securizarea codului.

Spre deosebire de C, nu este case-sensitive (deci nu face diferența între literele mari și cele mici) în ceea ce privește cuvintele rezervate ale limbajului (instrucțiunile) respectiv funcțiile (fie că e vorba de cele predefinite ale limbajului, fie că e vorba de cele definite de către utilizator). În schimb, este case-sensitive în ceea ce privește numele de variabile. Astfel, fie că scriem for fie FOR, limbajul va recunoaște instrucțiunea repetitivă cu contor. În schimb, dacă folosim identificatorii $a respectiv $A, va fi vorba de două variabile distincte.

PHP poate rula pe majoritatea sistemelor de operare, de la UNIX, Windows, sau Mac OS X și poate interacționa cu majoritatea serverelor web. Codul dumneavoastră PHP este interpretat de serverul WEB și generează un cod HTML care va fi văzut de utilizator (clientului fiindu-i transmis numai cod HTML).[12]

III.4 JavaScript

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru accesul la obiecte încastrate (embedded obiect) în alte aplicații.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.

Browser ele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Obiect Model sau DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcționeze pe toate browserele. În practică, însă, standardul W3C pentru DOM este incomplet implementat. Deși tendința browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilități majore, cum este cazul Internet Explorer.

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucât operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată.

Avantaje JavaScript

Viteza. JavaScript este foarte rapid deoarece orice funcție a codului poate fi rulată imediat, în comparative cu contactarea server-ului și așteptarea unui răspuns.

Simplicitatea. E relative simplu de învățat si implementat/

Versatilitate. Se “înțelege” bine cu celelalte limbaje și poate fi utilizat într-o mare varietatea de aplicații. Spre deosebire de PHP, JavaScript poate fi înserat în orice pagină web fără să conteze extensia fișierului.

Dezavantaje JavaScript

Securitatea. Datorită faptului că, codul este executat pe calculatoarele utilizatorilor, în unele cazuri poate fi exploatat pentru scopuri malițioase. Acesta fiind unul din motivele pentru care oamenii aleg să dezactiveze JavaScript.

Încrederea în utilizatorul de la final. JavaScript e uneori interpretat diferit de diferite browsere. În timp ce scripturile de parte server vor produce acelaș rezultat, scripturile de parte client sunt puțin imprevizibile.[14][15]

III.5 XAMPP

XAMPP, este un pachet de programe gratuit, open source și cross-platform web server, care constă în Apache HTTP Server, MySQL databile și interpretoare pentru scripturile scrise în limbajele de programare PHP și Perl. Acest software este util pentru crearea paginilor dinamice, utilizând limbaje de programare ca PHP, JSP, Servlets.

Pentru a instala XAMPP, trebuie descărcat kitul de instalare în unul din formatele ZIP, TAR, 7z sau EXE, fără a fi nevoie de modificarea configurării componentelor instalate. XAMPP este actualizat cu regularitate pentru toate componentele: Apache/MySQL/PHP și Perl. El vine, de asemenea, cu alte module, cum ar fi OpenSSL și phpMyAdmin.

Deși instalarea sa poate fi făcută în mai multe feluri, cel mai la îndemână este să folosim o versiune de tip „Installer” a sa. Adresa de unde poate fi descărcat pachetul gratuit este: http://www.apachefriends.org/en/xampp-windows.html. Aici găsim mai multe versiuni pentru Windows, Linux, sau OS X. Descărcați versiunea potrivită pentru dumneavoastră pașii de instalare sunt ușor de urmat. După instalare, rulați fișierul xampp-control.exe. Toate căile din configurație vor fi reactualizate automat. De acum, trebuie doar să pornim serverele Apache și MySQL. Acest lucru se face din Panoul de Control XAMPP.

Pot exista mai multe instanțe de XAMPP pe un singur computer, și fiecare instanță poate fi copiată pe alt computer.

În mod oficial, designerii XAMPP au avut intenția de a îl utiliza numai ca utilitar de dezvoltare, pentru a permite designerilor și programatorilor web să își testeze munca pe calculatoarele proprii, fără a avea nevoie de acces la Internet. Pentru a face posibil acest lucru, multe caracteristici de securitate importante sunt dezactivate în mod implicit. In practică, totuși, XAMPP este uneori utilizat pentru a servi pagini web în World Wide Web. Un utilitar special este asigurat pentru a proteja prin parolă cele mai importante părți ale pachetului.

XAMPP deasemeni asigură suport pentru crearea și manipularea bazelor de date în MySQL și SQLite între utilizatori.

Odată ce XAMPP este instalat, poți trata adresa de localhost a serverului XAMPP ca pe un server la distanță, prin conectarea utilizând protocolul client FTP. Utilizarea unui program ca FileZilla are multe avantaje atunci când instalezi un [CMS[content management system]] (CMS) ca Joomla. Te poți deasemeni conecta la o gazdă locală prin FTP utilizând editorul HTML propriu. Pentru utilizatorul FTP implicit "newuser", parola FTP implicită este "wampp".

Utilizatorul MySQL implicit este "root", iar acesta nu are o parolă MySQL implicită. Cu programul batch resetroot.bat din subdirectorul mysql al directorului unde este instalat XAMPP, puteți reseta acest utilizator încât să aibă parola vidă.[15]

III.6 SQL

SQL(Structured Query Language) e un limbaj de programare, creat pentru manipularea datelor din sistemul de management relațional al bazei de date (RDBMS – Relational Database Management System).SQL constă în un limbaj de definire al datelor, limbaj de manipulare a datelor și un limbaj de control a datelor.Domeniul SQL include inserarea datelor, interogare, updatarea și stergerea datelor, crearea și modificarea unei baze de date și controlul accesului la date.

Limbajul SQL e divizat în mai multe elemente de limbaj:

Clauze, care consistă în declarații și interogări

Expresii, care pot produce valori scalare și tabele formate din rânduri și coloane

Predicate, specifică condițiile care pot fi evaluate de SQL

Înterogări, recuperează datele pe baza unui criteriu specific

Declarații, au un efect persistent asupra bazei de date și tabele, pot controla tranzacții,conecțiuni, sesiuni sau diagnostice

Există 3 metode de bază privind implementarea limbajului SQL:

apelare directă (Direct Invocation): constă în introducerea instrucțiunilor direct de la prompter

modulară (Modul Language): folosește proceduri apelate de programele aplicație

încapsulată (Embedded SQL): conține instrucțiuni încapsulate în codul de program

La aplicația realizată am folosit atât metoda încapsulată de apelare a instrucțiunilor SQL pentru manipularea datelor, cât și apelarea directă pentru executarea instrucțiunilor de creare a bazei de date împreună cu constrângerile definite pentru aceasta

Instrucțiunile SQL pot fi grupate în înstrucțiuni de:

definire a datelor, care permit descrierea structurii BD

manipulare a datelor: adaugă, șterge, modifică înregistrări

selecție a datelor, care permit consultarea BD

procesarea tranzacțiilor

control al cursorului

acces la date

[16]

III.6 jQuery

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a îmbunătăți și ușura procese precum traversarea arborelui DOM în HTML,managementul inter-browser al evenimentelor, animații și cereri tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante existente, și să respecte filosofia "Unobtrusive JavaScript". [17][18]

Ca să lucrați cu jQuery trebuie mai intâi să includeti librăria de funcții jQuery în pagina HTML, ca orice fișier cu cod JavaScript.

Puteți găsi și descărca ultima versiune de la pagina http://jquery.com/. Salvați librăria jQuery pe server, într-un fișier cu extensia ".js", apoi includeți-l în documentul HTML, folosind următoarea sintaxă (in sectiunea HEAD): <script type="text/javascript" src="jquery_file.js"></script> . [17][18]

Sau, în loc de a avea fișierul cu jQuery pe serverul dumneavoastră, o metodă alternativă de a include librăria jQuery este prin Google: <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> . [17][18]

jQuery se poate folosi pentru a rezolva următoarele probleme specifice programării web:

selecții de elemente în arborele DOM folosind propriul motor de selecții open source Sizzle, un proiect născut din jQuery

parcurgere și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și XPath simpli)

înregistrarea și modificarea evenimentelor din browser

manipularea elementelor CSS

efecte și animații

cereri tip AJAX

extensii ( vezi mai jos )

utilităti – versiunea browser-ului, funcția each.

[17][18]

Plugin-urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery. Arhitectura sa permite programatorilor să dezvolte subaplicații bazate în biblioteca principală care extind funcțiile de bază jQuery cu funcții specifice plugin-ului. În acest fel biblioteca principală poate ocupa foarte puțin spațiu, iar extensiile necesare în anumite pagini web pot fi încarcate la cerere, doar când este nevoie de ele. Există un set de extensii principal numit jQuery UI( jQuery User Interface) [5]. jQuery UI ofera un set de extensii pentru interactivitate de bază, efecte mai complexe decât cele din biblioteca de bază și teme de culori. Avantajul jQuery UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea bibliotecii principale, minimizând riscul de incomptibilitate. [17][18]

Orice programator poate crea o extensie și jQuery oferă publicare în catalogul de pe pagina proiectului în diversele categorii disponibile. [17][18]

III.7 Notepad++

Notepad++ este un editor de text gratuit pentru Windows, găzduit la Sourceforge. Programul permite editarea codului sursă specific unui număr mare de limbaje de programare, precum C, C++, Pascal, Cobol, HTML, PHP. [19]

Facilități remarcabile sunt:

Colorare sintactică pentru 48 de limbaje de programare (se poate modifica de către utilizator);

Tipărirea color a codului sursă (WYSIWYG);

Autocompletare = deducerea și întregirea automată a cuvântului de cod din biblioteca utilizată;

Interfață cu mai multe ferestre (utilizează tab-uri);

Suport pentru căutări/înlocuiri cu expresii regulate PERL;

Suport pentru macroinstrucțiuni.

[19]

Notepad++ se bazează pe motorul Scintilla, fiind programat în C++ și utilizând Win32 API și biblioteca STL, asigurând astfel o execuție rapidă și un consum redus de resurse. [19]

Folosind acest program am realizat toată aplicația.Codul HTML, CSS, JavaScript, jQuery și PHP l-am scris în acest editor. [19]

III.8 Bootstrap

Bootstrap e o colecție gratuită de unelte pentru crearea site-urilor și aplicațiilor web. Conține șabloane pentru tipografii, form-uri, butoane, navigație și alte componente de interfață, precum și extensii JavaScript, șabloane bazate pe HTML și CSS. Scopul lui este să ușureze dezvoltarea site-urilor dinamice și a aplicațiilor web.[20]

Bootstrap e compatibil cu majoritatea browser-elor, iar începând cu versiunea 2.0 suporta și web design responsive. Asta înseamnă că aspectul paginilor web sunt ajustate dinamic, luând în considerare dispozitivul folosit pentru navigare(calculator personal, tabletă, telefon inteligent). [20]

Bootsrap oferă o serie de foi de stilizare care permit utilizatorului să stilizeze componentele HTML mult mai ușor. Acestea oferă o aparență uniformă, modernă pentru formatarea textelor, tabelelor precum și elementelor de tip form. [20]

În adiția elementelor obișnuite HTML, Bootstrap conține alte elemente de interfață des folosite. Printre acestea se numără: butoane cu funcții avansate(opțiune de grupare a butoanelor cu drop-down de exemplu), etichete,capabilitșți avansate de tipografie, miniaturi de imagini, mesaje de avertizare ți o bară de progresie. Componentele sunt implementate în clase CSS, care trebuie sa fie aplicate anumitor elemente HTML în pagină. [20]

Capitolul III

Prezentarea aplicației

III.1 Structura website-ului

Aplicația web realizată se adresează oricărui tip de utilizator având o interfață ușor de folosit, un meniu simplu și instrucțiuni clare. Este o aplicație utilă pentru oricine dorește să își testeze cultura generală, având la dispoziție două tipuri de testare, prima cu patru variante de răspuns, iar a doua este o testare de tip adevărat/fals.

Site-ul conține atât partea de front-end care reprezintă interfața pentru utilizatori cât și o parte de back-end pentru managementul conținutului, interfața pentru administrator. Structura site-ului este diferită pentru utilizatori, față de administratorul sau administratorii site-ului. Utilizatorii pot doar să își testeze cunoștințele, pe când administratorii au posibilitatea logării, odată logat, administratorul are următoarele opțiuni: adăugare administrator, adăugare întrebare și schimbare parole.

IV.2 Administrarea aplicației

Administrarea web este unul din cele mai importante aspecte al dezvoltării web, dar omis de cele mai multe ori. În cazul în care un site nu are un administrator web priceput, acesta nu va funcționa corect pentru foarte multă vreme.

Un alt motiv care încurajează administrarea este securitatea, care este probabil cea mai importantă parte a slujbei de administrator. Dacă serverul web nu este securizat poate deveni o țintă pentru hack-eri. Aceștia pot ataca clienți în mod direct, pot modifica serverul să trimită mesaje spam sau alte lucruri malițioase.

Datorită faptului că lumea este în continuă schimbare și că internetul e un mediu dinamic e nevoie de administrare. Astfel pentru a menține utilizatorii interesați administratorul poate adăuga alte întrebări în cele doua testări, iar dacă consideră că numărul de administratori e prea mic în comparație cu fluxul de utilizatori, orice administrator odată logat poate adăuga alți administratori.

Administratorul site-ului administrează paginile statice precum și cele dinamice . Paginile dinamice sunt mai ușor de administrat deoarece sunt actualizate din baza de date. Acest site a fost realizat în mare parte din pagini dinamice în scopul unei administrări mai rapide.

IV.3 Baza de date

Aplicația web utilizează o baza de date creată cu ajutorul sistemului de gestiune a datelor phpMyAdmin versiunea 4.3.11. Numele bazei de date este „db-quiz” și conține 6 tabele, baza de date fiind ilustrată în figura IV.3.1

Figura IV.3.1 Baza de date

Baza de date este structurată în 6 tabele iar legăturile sunt reprezentate cu ajutorul secțiunii Designer din phpMyAdmin. În figura x se poate observa structura tabelară a bazei de date precum și câmpurile celor 6 tabele

Figura IV.3.2 Structura bazei de date

Din cele 6 tabele, 2 tabele sunt independente, nu au legături cu alte tabele din baza de date. Aceste tabele sunt administrator și scoruri_maxime. Am să încep descrierea tabelelor din baza de date cu acestea.

Tabela administrator conține cinci câmpuri: id, nume, prenume, adresa_email, parola. Câmpul id conține codul unic al administratorilor, iar restul câmpurilor reprezintă numele administratorului, adresa de email și parola.

Câmpurile adresa_email și parola sunt obligatorii la autentificare, daca unul dintre acestea nu este completat se va afișa mesajul “Nu v-ați autentificat”, iar dacă ambele câmpuri sunt completate, se verifică dacă adresa de email și parola sunt valide.

Tabelele intrebari_mc și rapsunsuri_mc sunt legate prin foreign_key-ul intrebare_id după cum se poate observa in figură x, astfel fiecărui răspuns îi corespunde id-ul întrebării de care aparține. Atunci când este introdus un răspuns ,diferența dintre un răspuns greșit și unul corect se face cu ajutorul câmpului corect, căruia îi putem atribui valoarea 1 sau 0,unde 1 înseamnă corect, iar 0 greșit.

IV.4 Interfața aplicației web

Am conceput această aplicație în principal pentru oamenii care vor sa își testeze cunoștințele. Interfața web a fost concepută în așa fel încât să fie ușor de folosit pentru orice vizitator al aplicației,indiferent că e novice sau expert în navigarea unui astfel site.

Utilizatorii au parte de o multitudine de întrebări adunate din diferite domenii în această aplicație. La finalul testării, indiferent că e vorba de testarea cu variante multiple de răspuns sau de testarea adevărat/fals, utilizatorul va avea posibilitatea să afle un procentaj al răspunsurilor corecte din totalul de întrebări, dar nu va ști la care întrebări a răspuns greșit. Am ales această variantă deoarece în acest mod, vizitatorii site-ului vor dori să își testeze cunoștințele în repetate rânduri,până vor avea un procentaj mai mare.

Aplicația conține atât o parte de front-end cât și o parte de back-end pentru managementul conținutului, interfața pentru administatori.

În următoarele 2 subcapitole vom prezenta cele 2 tipuri de interfețe ale aplicației:

Interfața utilizator

Interfața de administrare

IV.4.1 Interfața utilizator

Interfața utilizator sau front-end-ul reprezintă partea vizibilă a aplicației, aceasta este partea în care vizitatorii au acces la conținutul și funcționalitatea site-ului Web, în funcție de drepturile de acces aferente care au fost stabilite în partea de administrare (în acest caz doar de vizualizare și testare).

Aplicația web e ușor de utilizat de către oricine,pe pagina principală se gasesc instrucțiuni clare despre tipurile de testare și cum se poate alege tipul de testare.

Site-ul web are în structură sa o pagină statică,anume prima pagină.Aceasta e statică deoarece conținutul său nu se va schimba foarte des.Celelalte pagini sunt toate dinamice deoarece iși extrag anumite date din alte aplicații folosind funcții PHP.

În figura 1 este afișată pagina principală a aplicației. Aceasta conține un slideshow cu imagini care se modifica automat la trei secunde.Dupa acesta se afla un mesaj de bun venit și informații despre cele două testări și despre posibilitatea de a compara scorul maxim personal cu top zece scoruri ale altor utilizatori.Cele două butoane „Variante multiple” și „Adevărat sau fals” ,după cum spune numele lor.în funcție de alegere utilizatorul va fi redirecționat spre testarea aleasă.

Fig IV.4.1 Pagina Principală

În funcție de alegerea facută utilizatorul va fi redirecționat spre testarea aleasă.Astfel în figura

IV.4.2 se află pagina testarea cu variante multiple,iar în figura IV.4.3 se află pagina cu testarea adevărat/fals.În prima testare găsim o interfață formată din titlul paginii, întrebare și cele patru variante de răspuns, sub formă de butoane radio. În a doua testare regăsim un format similar primei testări,singura diferență este că aici sunt doar două variante de răspuns,tot sub forma unor butoane radio.

Fig IV.4.2 Pagina Testare Variante Multiple

Fig IV.4.3 Pagina Testare Adevărat/Fals

La finalul oricărei testări va apărea pagina din fig IV.4.4. Aceasta conține un mesaj prin care anunță utilizatorul că a terminat testarea, și este rugat să introducă numele său și să dea click pe Finish.

Fig IV.4.4 Nume scor maxim utilizator

După ce utilizatorul introduce numele său, acesta își va putea compara scorul cu top zece scoruri maxime realizate de altți utilizatori.Pagina aceasta o gasim in figura IV.4.5. De asemenea avem posibilitatea de a reveni pe pagina principală.

Fig IV.4.5 Top zece scoruri maxime

IV.4.2 Interfața de administrare

Interfața de administrare sau back-end-ul aplicației este accesibil doar administratorului sau administratorilor în funcție de caz. Administratorul are drepturi depline asupra aplicației, putând astfel administra orice conținut din aplicație.

În figura IV.4.6 este afișată pagina de logare a administratorului.Dupa ce s-a logat în mod corect,anume a introdus adresa de email și parola corect,acesta e direcționat pe pagina din figura IV.4.7 unde putem observa opțiunile pe care le are administratorul, anume: deconectare, adaugare întrebări, adăugare administratori și posibilitatea de a schimba parola.De asemenea administratorul este întampinat cu un mesaj de bun venit în colțul din dreapta sus,care conține și numele administratorului.

Figura IV.4.6 Logare administrator

Figura IV.4.7 Opțiuni administrator

În cazul în care administratorul alege opțiunea „Deconectare”,acesta va fi direcționat spre pagina principală a aplicației.Dacă alege opțiunea „Adauga intrebari”,administratorul va avea trei opțiuni: adăugare întrebare cu variante multiple de răspuns, adăugare întrebare de tip adevărat/fals sau întoarcere la pagina de administrare.Dacă administratorul alege să adauge întrebări acesta va fi direcționat pe pagina din figura IV.4.8.Aici el are două opțiuni, să adauge o întrebare cu variante multiple de răspuns, anume patru, sau să adauge o întrebare de tip adevărat sau fals.

Figura IV.4.8 Adăugare întrebări

În figura IV.4.9 este reprezentat formularul de adăugare a unei întrebări cu variante multiple.Există un chenar în care administratorul tastează întrebarea,și incă patru chenare în care poate adăuga variantele de răspuns.În dreptul celor patru chenare, exista un buton radio, care validează dacă varianta de răspuns este corectă sau nu.Administratorul fiind nevoit doar să bifeze răspunsul corect,și după introducerea întrebării și a răspunsurilor să dea click pe butonul adaugă.

Figura IV.4.9 Adăugare întrebări cu variante multiple

Formularul de adăgarea a unei întrebări(fig.IV.4.10) adevarat/fals este asemenător cu formularul de adăugarea a unei întrebări cu variante multiple, doar că în cazul acesta, administratorul poate bifa dacă întrebarea este adevărată sau falsă.

Figura IV.4.10 Adăugare întrebări adevarat/fals

Opțiunea „Adauga administratori” a fost introdusă în cazul în care un singur administrator nu se poate descurca cu numărul de utilizatori, care în timp vor dori testări cu întrebări noi, sau vor avea diferite cereri sau nemulțumiri în legătură cu aplicația.Astfel administratorul principal dacă simte nevoia, poate adăuga alți administratori, iar odată cineva devenit administrator poate adăuga și el la rândul său administratori.Modul în care se adaugă un administrator este reprezentat în figura IV.4.11.

Figura IV.4.10 Adăugare administrator

Internetul este un loc care se schimbă mereu, iar unul dintre cele mai importante lucruri pe care trebuie să le aibă o aplicație web este securitatea.Astfel administratorul are opțiunea de a schimba parola personală oricând dorește.Formularul de schimbare a parolei este reprezentat în figura IV.4.11

Figura IV.4.11 Schimbare parolă administrator

V.Concluzii

Aplicația prezentată este una utilă și testează cu succes cunoștințele generale ale utilizatorilor.Este o aplicație simplă de utilizat care se adresează oamenilor de toate vârstele, de la adolescenți la adulți și chiar seniori.

Aplicația web este compatibilă cu toate browser-ele de pe piață.Principalele caracteristici ale acestei aplicații web sunt simplitatea și accesibilitatea.

Simplitatea reiese din modul ușor de utilizare,de către orice persoană indiferent de nivelul lor de experiență a utilizării unor aplicații de genul. Site-ul este structurat în așa mod ca fiecare vizitator să înceapă să își testeze cunoștințele în cel mai scurt timp posibil.

Este accesibilă deoarece este compatibilă cu toate browser-ele și poate fi folosită de orice tip de utilizator.De asemenea este o aplicație responsive, adică interfața se va adapta în funcție de dispozitivul utilizat(calculator personal, tabletă, telefon inteligent).

Aplicația a fost structurată în așa fel încât orice modificare, extindere să poată fi facută într-un mod cât mai accesibil. Baza de date poate fi îmbunătățită și ea relativ ușor în orice moment, interfața XAMPP de gestionare a bazelor de date fiind una simplă de utilizat.

Principalele dezvoltări viitoare ar cuprinde adăugarea unor variante ajutătoare în timpul testării,care să ajute utilizatorii să răspundă corect la întrebări, adăugarea unui chat care să faca comunicarea dintre utilizatori mai ușoară, de asemenea un mod multiplayer, în care utilizatorii pot juca împotriva altor utilizatori.

Bibliografie

[1]Scopul unui site, http://www.creeaza.com/referate/informatica/php/Etapele-dezvoltarii-unui-sit-w527.php

[2] Baza de date, http://www.marplo.net/javascript/jquery-elemente-baza-js

[3] Cornelia Gyorodi. Baze de date relaționale, teorie și aplicații. Editura TREIRA, Oradea, 2000.

[4]MySQL, www.seap.usv.ro/~valeriul/lupu/mysql.doc

[5]Baze de date, http://vega.unitbv.ro/~cataron/Courses/BD/BD_Cap_5.pdf

[6] HTML, https://ro.wikipedia.org/wiki/HyperText_Markup_Language

[7] HTML,http://www.yourhtmlsource.com/starthere/whatishtml.html

[8]HTML, http://www.answers.com/Q/What_are_the_advantages_and_disadvantages_of_using_HTML

[9] HTML,http://sitedesign.ro/blog/220-creare-site-html-avantaje-si-dezavantaje

[10]CSS, http://www.brighthub.com/internet/web-development/articles/25619.aspx

[11]CSS, https://en.wikipedia.org/wiki/Cascading_Style_Sheets

[12]PHP, https://ro.wikipedia.org/wiki/PHP

[13] JavaScript, https://ro.wikipedia.org/wiki/JavaScript

[14] JavaScript, http://www.mediacollege.com/internet/javascript/pros-cons.html

[15]XAMPP https://ro.wikipedia.org/wiki/XAMPP

[16] SQL,http://vega.unitbv.ro/~cataron/Courses/BD/BD_Cap_5.pdf

[17]jQuery, https://ro.wikipedia.org/wiki/JQuery

[18] jQuery, http://www.marplo.net/javascript/jquery-elemente-baza-js

[19]Notepad++ https://ro.wikipedia.org/wiki/Notepad%2B%2B

[20]Bootstrap, https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

[21] Baze de date, http://licenta.ucoz.ro/Gestiunea_Bazelor_de_Date.doc

[22]MySQL, https://ro.wikipedia.org/wiki/MySQL

[23]MySQL, http://forum.b-zone.ro/topic/143388-mysql/