Aplicatie Informatica Privind Construirea intr-un Site Dinamic Utilizand Tehnologiile PHP si Mysql [311239]

Programul de studii: Învățământ la distanță

Specializare: Informatică

Lucrare de licență

Teste online utilizând PHP/HTML5+CSS3/Bootstrap

Autor: Alexandru-Marius Turtoi

Coordonator științific: Conf. Dr. Livia Sângeorzan

Brașov, 2020

CUPRINS

Introducere

Din cele mai vechi timpuri omul a [anonimizat] a inventat calculatorul – o [anonimizat], [anonimizat], [anonimizat]. [anonimizat], ce a [anonimizat] „țină minte” [anonimizat].

Orice calculator poate fi privit ca un fel de mașină de tocat sau robot de bucătărie în care introducem tot felul de date „primare” [anonimizat], viața, făcând-o chiar mai frumoasă.

„Cuțitele” și „mecanismele” acestei mașini de tocat sunt circuitele și componentele electronice numite la un loc „hardware”, [anonimizat] ”software”.

[anonimizat], urmează să acced pe o [anonimizat] o aplicație numită: ” Teste online pentru încadrarea directă în Inspectoratul General al Situațiilor de Urgență/ [anonimizat] ”.

[anonimizat], decontarea contravalorii chiriei pentru cei ce nu au în proprietate o locuință, [anonimizat], [anonimizat] a carierei, [anonimizat], [anonimizat], iar din acest motiv o astfel de aplicație ar avea o [anonimizat], [anonimizat], [anonimizat], acces la tot ce îi interesează fără să caute orbește pe motoarele de căutare teste online.

Circuitul e simplu, iar presiunea aplicării rapid este și ea simplificată: este creată o [anonimizat], cât și teste culese de la examenele de încadrare directă aplicate în trecut. Toți cei interesați pot face cont de utilizator și se pot loga pentru a [anonimizat].

Prezenta lucrare cuprinde aspecte teoretice și practice ale modalităților de concepere și implementare a aplicației.

Lucrarea este structurată în 5 capitole, [anonimizat].

Capitolul 1 – Concepte generale reprezintă partea introductivă a lucrării, un scurt istoric privind aplicațiile web și funcționalitatea lor, dar și evoluția și aplicabilitatea lor în viața de zi cu zi.

Capitolul 2 – Tehologiile utilizate la realizarea aplicației de teste online reprezintă o scurtă introducere a principalelor noțiuni legate de Internet. Sunt prezentate noțiuni de bază privind elemente ale limbajului HTML și reguli CSS, framework-ul Bootstramp în relație cu HTML și CSS, dar și elemente de limbaj PHP, JavaScript și MySQL.

Capitolul 3 – Analiza și proiectarea aplicației prezintă scopul și obiectivele aplicației, proiectarea bazei de date, noțiuni teoretice, proiectarea practică a bazei de date și proiectarea interfeței, acest capitol este de fapt preambulul aplicației, interfața cu utilizatorul, și modalitatea de stocare a informațiilor și a datelor.

Capitolul 4 – Prezentarea aplicației ” Teste online pentru încadrarea directă în Inspectoratul General al Situațiilor de Urgență/ admitere în școlile cu profil militar –pompieri ”

și implementarea și utilizarea aplicației cu interfață grafică reprezintă descrierea aplicației.

Implementarea acestei aplicații a fost realizată folosind limbajul de server side scripting PHP datorită felxibilității acestuia, dar și sistemul de gestiune a bazelor de date relaționale MySQL, datorită faptului că ambele sunt accesibile publicului în mod gratuit, fără restricții, sistemul Open Source fiind cel mai potrivit produs pentru accesarea și administrarea bazelor de date prin Internet.

De asemenea, este prezentat modul de creare a bazei de date a aplicației ” Teste online pentru încadrarea directă în Inspectoratul General al Situațiilor de urgență/ admitere în școlile cu profil militar-pompieri”. (ex : administrator si utilizatori).

Capitolul 5 – Concluzii prezintă opinia mea personală despre utilitatea aplicației realizate și posibilitățile de dezvoltare ale acesteia.

1. CONCEPTE GENERALE

Web-ul este omniprezent în viața oamenilor, începand chiar de la vârste foarte mici. Prin intermediul său aceștia schimbă idei și informații, dar și imagini, muzică, filme, programe de calculator. Vechiul Web este diferit de noul Web, cel vechi aparținea în totalitate administratorilor siturilor și firmelor în proprietatea cărora se aflau acestea, în schimb noul Web se caracterizează prin interactivitate și utilizabilitate ridicată, încredere totală acordată utilizatorilor, participare colectivă și descentralizare. Situri sau aplicații ca Youtube, MySpace, Twitter, Facebook, Hi5, Google Maps, Waze, Wikipedia, bogurile, Messenger, My banking sau serviiciile Gmail sunt exemple foarte bune care ilustrează evoluția Web-ului.

Utilizatorii au posibilitatea de a-și construi ei înșiși situri și aplicații Web, ori cei care au cunoștințe de programare Web, construiesc ei înșiși de la zero astfel de aplicații, sau folosesc instrumente gata create, procesul de dezvoltare a siturilor fiind în mare măsură automatizat.

1.1. Scurt istoric privind aplicațiile web și funcționalitatea lor

Cel mai de succes și mai dinamic dintre serviciile de Internet este World Wide Web. Web-ul reprezintă un spațiu informațional alcătuit din resurse situate în locații cunoscute sub numele de noduri, utilizate prin intermediul unui sistem hypertext folosind modul de identificare URI (Uniform Resource Identifier). Resursele Web sunt organizate în pagini Web și livrate utilizatorilor de către un program denumit server Web. Utilizatorii folosesc pentru vizualizarea paginilor Web un program-client cunoscut sub numele de browser sau navigator Web.

Aplicația Web este o colecție interconectată de pagini Web având un conținut generat dinamic (determinat parțial de opțiunile utilizatorilor), creată cu scopul de a oferi o funcționalitate specifică (ex: magazin virtual, motor de căutare, client de email, client pentru acesarea bazelor de date).

O aplicație Web este rezidentă pe un server, fiind accesată prin intermediul unei rețele de Internet sau intranet-de către utilizatori, care folosesc un client Web-browser.

Aplicația Web este structurată în general pe trei niveluri:

– primul nivel- browserul Web;

– al doilea nivel-tehnologia utilizată pentru generarea dinamică a conținutului;

– al treilea nivel- surse de date, reprezentate de baze de date (BD) și/sau fișiere XML.

1.2. Evoluția și aplicabilitatea acestora în viața de zi cu zi

Aplicațiile Web au devenit deosebit de populare, odată cu răspândirea clienților pentru accesarea acestora, instalați pe diverse platforme (ex. Windows, UNIX/Linux, Mac OS). Odată cu dezvoltarea WWW, a apărut necesitatea ca alicațiile Web să prezinte, măcar parțial, caracteristicile aplicațiilor desktop. În acest scop au fost dezvoltate o serie de tehnologii Web, atât pentru client (în special), cât și pentru server.

Funcționalitățile aplicațiilor Web sunt oferite, în cea mai mare parte de server, fiind livrate utilizatorilor prin intermediul unei rețele (Internet sau intranet). Din acest motiv, utilizatorii folosesc un client care nu necesită performanțe deosebite, numit thin client (browserul Web). În schimb, aplicațiile desktop sunt bazate pe un client cu performanțe deosebite, numit thick client (sau fat client), care oferă cea mai mare parte a funcționalității acestora.

1.3. Componentele mediului de lucru

Pentru a implementa, depana și extinde aplicațiile Web este necesar un ansamblu de instrumente software, cunoscut sub numele de mediu de lucru.

Mediul de lucru cuprinde:

– sistemul de operare;

– un browser Web- folosit pentru afișarea interfeței cu utilizatorul al aplicației;

– un server Web- livrează conținut static sau dinamic browser-ului;

– un server de aplicații- utilizat pentru generarea dinamică a conținutului și pentru interacțiunea cu bazele de date;

– un server de baze de date- folosit pentru stocarea și gestionarea unor date folosite în aplicație;

– un instrument software-utilizat pentru facilitatea dezvoltării aplicației.

2. ANALIZA SISTEMULUI INFORMATIC ȘI TEHNOLOGIIILE INFORMATICE UTILIZATE LA REALIZAREA APLICAȚIEI DE TESTE ONLINE

O aplicație web este un sistem software pe model client-server bazat pe tehnologiile și standardele consorțiului World Wide Web (W3C) care oferă resurse web specifice cum ar fi conținut și servicii prin intermediul unei interfețe numită browser web.

Modelul client/server este o arhitectură sau o structura a aplicației ce descrie relația dintre 2 entități, un furnizor de servicii care preia cererile, le procesează și returnează un răspuns, și cel care solicită serviciile, denumit client. Clienții și serverele comunica printr-o rețea de calculatoare, de obicei prin Internet, având suporturi hardware diferite, dar acestea pot fi situate și pe aceiași mașină.

În cazul aplicațiilor web, browser-ul este clientul care are capacitatea de a trimite cereri unui server web, acesta returnând răspunsul dorit. Într-o astfel de aplicație, pentru partea de front-end, cea a clientului, se folosesc tehnologiile: HTML5, CSS3, JavaScript, Bootstrap care au scopul de a se ocupă cu prezentarea stilizată a informațiilor, reprezentând interfață. Iar partea de server care se ocupă cu procesarea datelor și a informațiilor, cu stocarea acestora reprezintă partea de back-end și e realizată cu ajutorul tehnologiilor: PHP, MySQL

2.1. Tendințe și scop

Prin dezvoltarea aplicației de ” Teste online pentru încadrarea directă în Inspectoratul General al Situațiilor de Urgență/ admitere în școlile cu profil militar –pompieri ” se urmărește realizarea unui sistem informatic tip WEB pentru evidența testelor cu întrebări actualizate din tematica și bibliografia de fizică și matematică, pentru admiterea la școlile cu profil militar-pompieri și pentru încadrarea directă a persoanelor interesate să acceadă în sistemul militar.

Părțile care vor putea utiliza aplicația vor fi : administratorul și utilizatorul (candidat/profesor).

Proiectul poate fi privit ca o platformă unde toți cei interesați de sistemul militar, își pot testa cunoștințele la fizică și matematică. Administratorul poate modifica baza de date, adăugând o nouă categorie de teste, poate adăuga întrebări în baza de date, poate modifica baza de date a utilizatorilor, prin adăugarea/limitarea accesului utilizatorilor și are acces la statistici cu privire la numărul utilizatorilor, testele susținute, notele obținute de utilizatori. Utilizatorul are acces la un formular de înregistrare, după care va putea folosi serviciile oferite de aplicație, el poate susține un test din baza de date cu subiecte alese aleator din bibliografia și tematica pentru concurs/examen. Utilizatorul își poate verifica nivelul de pregătire comparativ cu alți utilizatori ai aplicației Web.

Scopul pentru care sistemul informatic este creat și dezvoltat este acela de a facilita, printr-o conversie offline-online, înscrierile tuturor celor interesați, pentru a-și verifica nivelul de pregătire în comparație cu alte persoane interesate de accederea în sistemul militar, în funcție de filiera aleasă. Aplicația face posibil primul contact dintre persoanele interesate și școlile militare sau instituțiile care organizează concursuri de ocupare a posturilor vacante prin încadrare directă, adică acele acțiuni de dinainte de a intra în procesul real de înscriere-recrutare. Parcursul poate fi rezumat la: persoanele interesate aleg filiera de accedere în sistem, iar școlile sau instituțiile care recrutează candidați cunosc cu aproximație câți candidați urmează să se înscrie la concursuri, dar și numărul celor interesați de această oportunitate și le este ușor să își pună la punct resursele.

Sistemul informatic va fi unul de tip sistem circuit-deschis, adică va putea aplica orice persoană pentru un cont, limitele fiind apreciate și menținute de administrator.

2.1. Elemente ale limbajului HTML și reguli CSS

Limbajul HTML (HyperText Markup Language) este folosit pentru a scrie paginile Web. Termenii ”document HTML” și ”pagina Web” sunt sinonime. Paginile Web sunt fișiere cu extensia ”.htm” sau ”.html”. Aceste fișiere se numesc fișiere sursă și conțin: text, imagini, sunete, filme, programe, legături (link-uri către alte pagini Web).

HTML nu este un limbaj de programare, nu utilizează instrucțiuni, ca Pascalul sau C-ul, ori comenzi ca Fox-ul, ci etichete, acestea fiind denumite și balize, elemente sau tag-uri. Sintaxa oricărei etichete este ( figura nr.1.1.) :

Figura 1. 1

Un fișier HTML se poate realiza manual, scriind etichetă cu etichetă în Notepad sau cu ajutorul editoarelor HTML, precum Homesite, Adobe Golive, Microsoft Frontpage, Macromedia Dreamweaver (aplicația aleasă de profesioniști) CoffeCup HTML Editor, Netscape Composer.

HTML 5 este cea mai folosită versiune HTML de la acest moment, iar mai jos la figura 1.2. este prezentată structura acestuia.

Figura 1. 2.

Atributele elementelor HTML sunt specifice și comune. Atributele comune pot fi clasificate în următoarele categorii: de bază pentru internaționalizare, pentru evenimente și de stil.

Atributul de stil comun al elementelor HTML este style. Acesta specifică informații de formatare CSS pentru elementul curent.

Foile de stiluri în cascadă furnizează o modalitate unitară pentru setarea aspectului elementelor prin intermediul cărora sunt construite interfețele cu utilizatorul ale aplicațiilor web. Limbajul CSS poate fi utilizat pentru a controla practic orice aspect al paginii începând cu dimensiunea corpului de literă, culori și spațiere, până la poziționarea elementelor.

O foaie de stil conține declarații ale stilurilor utilizate în document, de fapt stilurile CSS sunt proprietăți ale elementelor HTML.

CSS nu este chiar un limbaj de programare. Nu este nici limbaj de marcare — este un limbaj de stilizare. Asta înseamnă că îți permite să aplici selectiv stiluri, elementelor din documentele HTML.

O foaie de stiluri CSS consistă pentru orice versiune dintr-o listă de reguli, numite și instrucțiuni, iar acestea sunt de două tipuri reguli at(at-rules) și seturi de reguli(rule-sets). Declarațiile pot fi înconjurate de un număr oarecare de spații albe.

O regulă CSS include două părți principale:

Un selector –de exemplu: h1

O declarație bloc inclusă între acolade – de exemplu {color: red}

Figura 1. 3

Selectorul însoțit întotdeauna de o declarație-bloc reprezintă legătura dintre documentul HTML și regulă, specificând care elemente sunt afectate de declarație.

Declarația are două părți: proprietatea de stil (exemplu: color) și valoarea proprietății (exemplu: red), stabilind efectul aplicat selectorului (în exemplul anterior toate elementele h1 vor fi afectate de declarație, continutul textual al acestora fiind colorat în roșu). Proprietatea este o caracteristica a selectorului.

În cadrul CSS formatarea utilizează un model orientat pe o boxă de afișare sau casetă, (figura 1.4), însemnând că fiecărui element îi corespund una sau mai multe zone dreptunghiulare numite boxe, exceptându-le pe cele a căror proprietate display are valoarea non.

FIGURA 1.4 Model de formatare CSS

Orice boxă are până la 4 părți componente și anume o zonă centrală în care e afișat conținutul, înconjurată opțional cu o zonă de completare (padding), un chenar (border) și o margine (margin). Zona de umplere reprezintă spațiul aflat între zona de conținut și chenar, marginea este zona cuprinsă între chenar și muchia boxei. Dimensiunile zonei de completare, chenarului și marginii sunt stabilite prin intermediul unor proprietăți de stil CSS corespunzătoare.

Prezentarea unei pagini Web poate fi influențată simultan de mai multe foi de stiluri. Acest aspect e motivat de următorii factori:

Modularitatea – un proiectant Web poate combina foile de stiluri, utilizând astfel mai multe definiții.

Balanța autor/cititor – atât autorul cât și cititorul unei pagini web pot influența prezentarea acesteia prin intermediul foilor de stiluri. Se știe că browserele actuale permit utilizarea de către cititor a unor stiluri personale.

Stilurile importate se află în cascadă în ordinea importării.

În specificațiile CSS sunt definite următoarele categorii de propietăți:

Proprietăți ale fonturilor (corpurilor de literă);

Proprietăți de culoare și fundal;

Proprietăți ale textului;

Proprietăți ale boxelor de afișare;

Proprietăți de clasificare.

2.2. Framework-ul Bootstrap- n generale

Bootstrap 4.0

Bootstrap este un framework compatibil cu HTML, JavaScript și CSS. Este gratuit și conține script-uri JavaScript, tag-uri și clase HTML și o librărie CSS imensă. Acestea reduc considerabil timpul de creare a aplicațiilor și îmbunătățesc aspectul acestora.

2.2.1.Error: Reference source not foundp

Este gândit pentru a produce compatibilitate pe toate rezoluțiile, indiferent de gadget. Acest concept se numește ,,Responsive”. Este cea mai importantă componentă Bootstrap iar acest lucru îl caracterizează.

Ce se întâmplă de fapt este că Bootstrap împarte pagina web în 12 părți egale. În funcție de fiecare ecran, putem împărți pagina cu ajutorul claselor ,,col”. Practic prin adăugarea unor clase de tipul ,,col” vom putea să-i spunem ecranului cât spațiu să ocupe un anumit element din pagina HTML. Există mai multe tipuri de clase ,,col” și acestea sunt:

.col- –acestea atribuie coloane pentru rezoluțiile ,,xs”, adică pentru ecrane foarte mici, cu rezoluția de până la 576 pixeli.

.col-sm- – pentru ecrane mici, cu rezoluția mai mare sau egală cu 576 pixeli

.col-md- – pentru ecrane medii, cu rezoluția mai mare sau egală cu 768 pixeli

.col-lg- – pentru ecrane mari, cu rezoluția mai mare sau egală cu 992 pixeli

.col-xl- – pentru ecrane foarte mari, cu rezoluția mai mare sau egală cu 1200 pixeli

Coloanele trebuie să fie copii clasei ,,row” iar acestea trebuie să fie înglobate într-un container de tip ,,container” sau „container-fluid”.

Numărul de coloane va fi specificat la sfârșitul clasei. Codul va fi de tipul ,,col-md-6”, ceea ce înseamnă că această clasă va arăta elementului că are mărimea de 50%. Acest rezultat provine din faptul că Boostrap are numărul de coloane egal cu 12, deci 6 va fi jumătate din ecran. Indiferent de rezoluția acestuia, acest element va fi împărțit în două. Dacă, să presupunem că avem ,,col-sm-3” la 4 elemente, atunci pe un ecran de maxim 576 pixeli fiecare element se va întinde pe un sfert din pagină. Vom exemplifica aceste lucruri în figura 1.41, prima dată în cod și apoi vizual.

Figura 1. 2

Am folosit Bootstrapt pentru a face aplicația ” Teste online pentru încadrarea directă în Inspectoratul General al Situațiilor de Urgență/ admitere în școlile cu profil militar –pompieri ” compatibilă cu cât mai multe rezoluții. Datorită acestuia, proiectul este ,,responsive” cu toate tipurile de display-uri. Pentru a duce acest lucru la bun sfârșit, m-am folosit și de componenta CSS ,,media-queries”, care schimbă proprietățile CSS a unui element în funcție de rezoluție.

De exemplu putem seta ca un element de tip text să aibă proprietatea că are o mărime de 30 pixeli pentru o rezoluție de până la 600 pixeli iar 50 pixeli pentru o rezoluție de până la 2000 pixeli. Când navigatorul/browserul va detecta acea rezoluție, fișierul CSS va știi ce proprietăți să atribuie elementului respectiv.

Ilustrarea minimală a sistemului ,,Responsive”, pentru proiectul ” Teste online pentru încadrarea directă în Inspectoratul General al Situațiilor de Urgență/ admitere în școlile cu profil militar –pompieri ”, va avea loc în figura

Figura

2.2.2 Bootstrap în relație cu HTML și CSS

2.3. Elemente ale limbajului PHP și baze de date MySQL

Prin PHP ( acronim recursiv pentru PHP: Hypertext Preprocessor), se înțelege atât limbajul de scripting, cât și serverul de aplicații, cel din urmă are rolul de a procesa și interpreta scripturile scrise utilizând acest limbaj. Limbajul PHP e destinat în mod special pentru dezvoltarea Web, codul PHP, putând fi încapsulat în XHTML.

Rasmus Lerdorf a creat în 1994 un utilitar CGI numit PHP (Personal Home Page), pentru a număra vizitatorii site-ului său.

MySQL- copiat de la razvan

Este un sistem de gestionare a bazelor de date și relațiile dintre acestea. Numele vine de la Structured Query Language(SQL) iar ca întreg, MySQL poate fi privit ca un server SQL. Este absolut gratuit și open-source și chiar dacă este folosit foarte mult în relația cu PHP, a început să fie folosit cu foarte multe limbaje de programare Java, C++, Perl etc.

Pentru a crea o bază de date este de preferat să avem un panou de control, fie de tip WEB sau DESKTOP. Există foarte multe software-uri pentru gestiunea bazelor de date cu MySql. De exemplu pentru PHP se poate folosi PHP MY ADMIN, loc unde pot fi configurate tot ce înseamnă baze de date relaționale. Ca și programe gratuite pentru DESKTOP, bazele de date pot fi configurate cu MySQL Workbench, Heidi SQL etc.

Ca și explicație minimală, MySql poate fi privit ca pe un loc unde se creează tabele, se inserează date în acestea și se fac diverse operații cu acele date salvate.

3.Analiza și proiectarea aplicației

Aplicația este bazata pe arhitectura MVC (Model-View-Controller) – un șablon software care separa reprezentarea informației de interacțiunea utilizatorului cu aceasta. Cu ajutorul acestui șablon se obține o organizare mai bună a aplicației. Desparte logica site-ului de partea de design, se pot face modificari cu ușurință la desing-ul aplicației fără necesitatea modificării codului în partea de backend1.

De asemenea permite refolosirea codului(DRY2)

MVC a fost descris pentru prima oara in anul 1979 de catre TrYgve Reenskaug care pe vremea aceea lucra la Smalltalx din cadrul Xerox PARC. Implementarea originala este descrisa in detaliu in lucrarea applications Programming in smalltalk-80: How ti use M-V-C

Model:

Se ocupă de comportarea și datele aplicației, are conexiune directă cu baza de date

Are rolul de a face operațiuni ce țin de baza de date, stocheaza sau caută în baza de date,

Comunică doar cu Controller-ul

View:

Conține informația prezentată utilizatorului

De obicei este format din HTML și CSS

Comunica doar cu Controller-ul

Controller:

Proceseaza request-ul utilizatorului

Prelucreaza datele primite

Primește date de la Model

Adauga date în baza de date prin intermediul Modelului

Este intermediarul dintre View și Model.

Fig. #.#

Structura directoarelor

Directorul parinte se imparte in 2 subfoldere si un fisier .htaccess

fireschool

│ .htaccess

├───app

└───public

Fișierul .htaccess este un fisier de configurare, pentru utilizare pe servere web care suporta Apache care oferă posibilități de executare a unor funcții(în acest caz rescrie URL-ul din fireschool/public în fireschool/ )

Directorul app este directorul principal, care conține toată funcționalitatea aplicației, este format din 6 subfoldere, un fișier .htaccess și fișerul bootstrap.php

─app

│ .htaccess

│ bootstrap.php

├───config

├───controllers

├───helpers

├───libraries

├───models

└───views

├───admin

├───automat

├───candidate

├───includes

├───teacher

└───users

În cazul directorului app fișierul .htaccess blochează afișarea directorului, este o măsura de siguranță, astfel nu se poate ajunge în directorul app din URL.

Directorul public este format din trei directoare, de asemenea încă un fișier .htaccess, acesta redirecționează totul prin fișierul index.php, acesta din urmă fiind punctul de intrare către fișierele din interiorul directorului app.

─public

│ .htaccess

│ index.php

├───css

├───img

└───js

3.2. Proiectarea bazei de date

3.2.1. Noțiuni teoretice

Pentru realizarea unei aplicații cu baze de date este necesara existența unui sistem de baze de date, ce reprezintă un set de elemente interconectate prin intermediul cărora se realizeaza colectarea, stocarea și procesarea datelor.

MySQL este, la ora actuala, cel mai popular SGBD open-source din lume, și este foarte des întâlnit împreună cu limbajul de programare PHP. Acesta a fost denumit după fiica co-fondatorului Michael Widenius, My. SQL vine de la Structured Query Language.

Unitatea primară a bazei de date este tabela. O tabela este o colecție de intrări de date înrudite și e alcătuită din rânduri (înregistrări) și coloane (câmpuri). Informațiile se pot stoca într-un mod clasificat și ordonat.

MySQL se ocupă de interogări, înserări, ștergeri și modificări asupra informațiilor dintr-o baza de date, cât și cu controlul utilizatorilor care au acces la o baza de date. SQL este un limbaj specific pentru gestiunea datelor în SGBD-uri.

3.2.2. Proiectarea practică a bazei de date

Proiectarea bazei de date a fost facuta cu ajutorul instrumentului software phpMyAdmin, un software gratuit destinat sa se ocupe de administrarea MySQL pe web. PhpMyAdmin accepta o gama larga de operatii pe MySQL si MariaDB. Operatiunile utilizate frecvent(gestionarea bazelor de date, tabele, coloane, relatii, indexuri, utilizatori, permisiuni etc) pot fi efectuate prin interfata utilizatorului in timp ce se pot utiliza direct orice instructiuni SQL.

În proiectarea conceptuala a bazei de date vor fi urmăriți următorii pași:

Determinarea scopului bazei de date. Baza de datte necesară aplicației păstrează informații despre utilizatori, tipul acestora, notele obținute la teste, întrebări și tipul acestora, testele generate.

Împartirea informațiilor în tabele. Se realizeaza prin găsirea celor mai importante entități sau subiecte din descrierea problemei reale. Observam astfel ca principalele entități sunt, utilizatori, întrebări, materii, note, test

Transformarea elementelor de informații în coloane. Vom decide ce informații vor fi stocate în fiecare tabelă. Fiecare element devine un câmp afișat sub forma unei coloane a tabelului

Specificarea cheilor primare. Se alege coloana sau coloanele care vor identifica în mod unic fiecare înregistrare din tabelă.

Configurarea relațiilor dintre tabele. Trebuie decis modul în care se asociaza datele dintr-un tabel cu datele din alte tabele. Se observă că a fost ținut cont de acest lucru prin prezenta cheilor straine care în alte tabele au rolul de chei primare

Structura bazei de date este prezentata în figura #.#

Tabelele utilizate sunt:

grades – tabel în care vor fi stocate notele candidatilor după sustinerea unui test, cheia primara este id-ul, de asemenea avem o cheie secundara idCandidat identificata cu id-ul utilizatorului care a susținut un test.

materii – tabel în care sunt stocate tipurile de materii pentru care utilizatorul poate sustine un exame

questions – tabelul în care sunt stocate întrebările, cheia primara este id-ul, de asemenea avem cheie secundara materie, identificata cu id-ul materiei din tabela materii.

4. meditatii – tabela ce conține date despre profesorii înregistrați ca utilizatori ai aplicației.

5. test – tabela cu ajutorul căreia se realizeaza un test, în interiorul tabelei stocam id-ul intrebării din tabela questions și coloana submitted care stocheaza date despre statusul intrebării după sustinerea testului.

6. users – tabela care conține toți utilizatorii aplicației, avem de asemenea o cheie străina type, aici este prezent id-ul tipului de utilizator din tabela user_type.

7. user_type – tabela ce stocheaza tipurile de utilizatori ale aplicației.

Schema conceptuala a bazei de date este data de reprezentarea grafica a

tabelelor împreuna cu relațiile dintre ele, aceasta este prezentata în figura #.#

3.3. Proiectarea interfeței

Interfața (GUI1 ) este unul dintre cele mai importante elemente ale unei aplicații, deoarece reprezintă partea vizuală cu care interacționeaza utilizatorul. Scopul interfeței este acela de a face interacțiunea utilizatorului cât de simplă și eficientă posibil pentru ca acesta să iși atingă obiectivele. Acest tip de gândire a interfeței este de cele mai multe ori user-centered design și anume aspect centrat pe utilizator și după cum spune denumirea se referă la faptul că atunci când se proiectează o interfață, persoana care folosește aplicația trebuie să fie cel mai important element luat în considerare. Procesul de dezvoltare a interfeței trebuie să balanseze funcționalitatea tehnică și elementele vizuale pentru a creea un sistem care este nu doar operațional ci și utilizabil și adaptabil la schimbările de care are nevoie utilizatorul. Aspectul referitor la prezentarea informației este descris în articolul 12 al standardului ISO 9241 referitor al organizarea informatiei(aranjare, aliniere, grupare, etichetare, locație), prin șapte atribute:

 claritate: conținutul informației este redat rapid și exact;

 discriminabilitate: informațiile redate pot fi distinse eficient;

 simplitate: utilizatorii nu sunt supraîncărcați cu informații inutile;

 consistență: un aspect unic, conform cu aștepțările utilizatorilor;

 detectabilitate: atenția utilizatorului este direcționată către informația necesară;

 lizibilitate: informația este ușor de citit;

 înțelegere: informația este ușor de înțeles, neambiguă și ușor recunoscută;

Aspectul aplicației este unul clasic pentru o aplicație web.

4. Prezentarea aplicației de ”Teste online pentru încadrarea directă în Inspectoratul General al Situațiilor de Urgență/ admitere în școlile cu profil militar –pompieri ”.

Scopul aplicației este acela de a pune la dispoziție o bază de date cu întrebări și oferirea posibilității utilizatorilor să se autoevalueze susținând un test generat aleator din baza de date, de asemenea candidatul are posibilitatea să consulte o baza de date cu profesori disponibili să îi îndrume pentru în încercarea lor de a ocupa unul din locurile scoase la concurs.

Cazurile de utilizare sunt exemplificate în tabelul de mai jos

Mai jos este prezentata diagrama cazurilor de utilizare:

Domeniile claselor utilizate în cadrul sistemului informatic sunt:

Cont admin

Cont candiat

Cont profesor

Teste

Materii

Meditatii

Note

Intrebari

În urma identificării claselor, a fost construita diagrama de clase, prezentată în figura de mai jos

Diagramele de activitate

Diagrama de activitate login

2.Diagrama de activitate pentru crearea unui nou cont de utilizator

3.Diagrama de activitate pentru sustinerea unui test

Aaaaaaaaaaaaaaaaaa

4.Diagrama de activitate pentru adăugarea unei noi întrebări

4.1. Implementarea aplicației

Pentru dezvoltarea aplicației am folosit tehnologiile prezntate în capitolul 2 al curentei lucrări. Atfel, am folosit ca și mediul de lucru editorul Atom, acesta are suport pentru pluginuri scrise în Node.js și Git Control încorporat, dezvoltat de GitHub. Serverul web utilizat este Apache care conține modulele MySQL și PHP, iar pentru crearea structurii bazei de date am folosit utilitarul phpMyAdmin. În timp ce partea care s-a ocupat de funcționalitatea aplicației a fost realizată în PHP și MySQL, partea ce tine de interfața grafică a fost realizată utilizând HTML5, CSS, Bootstrap.

Am folosit facilitățile de programare orientată pe obiecte ale PHP-ului, cu care am implementat clase pentru entitățile cu care lucrează aplicația și implicit abstractizarea aplicației. Datorită faptului că PHP lucrează cu obiecte implementarea arhitecturii MVC în cadrul aplicației a fost mult mai ușoară.

Consider că utilizarea unei arhitecturi de tipul MVC, este foarte utilă deoarece impune o anumită rigurozitate în elaborarea codului sursă, care în acest mod este mai ușor de organziat, urmărit și depanat. În plus foarte multe funcții și metode pot fi utilizate în mai multe module ceea ce duce la o programare eficientă.

Aplicația este folosită de trei tipuri de utilizatori, în funcție de tipul de utilizator este afișat după logare meniul corespunzător. Administratorul are posibilitatea să manipuleze întreaga baza de date, interacțiunea cu baza de date a candidatului rezumându-se doar la stocarea notelor obținute și generarea de de grafice cu privire la evoluția sa.

Pentru a putea folosi arhitectura MVC în directorul app am creeat un alt director denumit libraries ce conține trei fișiere php, primul fișier este controller-ul principal și are următoarea structura:

Toate celelalte controllere pe care le vom creea vor extinde acest controller principal, deoarece acesta cuprinde metodele pentru a incărca modelul și view-ul.

În cadrul directorului libraries avem de asemenea un fisier denumit core.php, acesta este “inima” aplicației, cu ajutorul acestui fișier creem URL-ul și incărcăm controller-ul de baza.

În interiorul acestui fișier am creeat o clasa numita Core, am declarat un controller curent, în cazul în care nu există un controller-ul pe care încercăm să îl folosim, va fi folisit automat controller-ul predefinit, la fel și in cazul metodei. Controller-ul curent si metoda curenta vor fi schimbate in functie de schimbarea URL-ului, de aceea am creeat o metoda getUrl cu ajutorul căreia rescriem URL-ul sub forma unui vector astfel vom schimba controller-ul curent, primul element al vectorului fiind setat ca si controller curent, următorul element al vectorului fiind metoda, celelalte elemente fiind reprezentate de parametri.

Structura clasei Core este ceva mai complexă, și este reprezentata in figura de mai jos.

De asemenea am creeat un fișiet config.php în care sunt definite câteva constante care vor fi folosite în interiorul aplicației. Constantele sunt folosite la nivelu bazei de date, dar și în cadrul view-urilor.

Autentificarea/Înregistrarea utilizatorilor

Pentru autentificarea/înregistrarea utilizatorilor, am creat un model, în cadrul modelului am creeat doua metode, register si login ale căror cod este exemplificat mai jos.

De asemenea a fost necesara creearea unui controller și a unui view. Datele completate de utilizatori în cadrul view-ului sunt procesate cu ajutorul controller-ului, acesta folosind modelul pentru a confrunta datele introduse cu baza de date, în funcție de rezultatul interogării fiind afișat view-ul utilizatorului. O parte din codul controller-ului arată în felul următor:

După autentificare utilizatorului îi va fi afișat view-ul corespunzător tipului său. Acest lucru este posibil cu ajutorul unei metode din cadrul controller-ului User

.

$user->id; este echivalentul id-ului utilizatorului în baza de date, relația se păstrează și pentru celelalte valori.

4.2. Implementarea bazei de date și funcționalității acesteia

În interiorul directorului libraries am creeat fisierul Database.php care conține detaliile legăturii cu baza de date și metode cu ajutorul cărora căutăm date sau le inserăm în interiorul bazei de date. Pentru conectarea la baza de date am folosit extensia PDO1 . Aceasta oferă un nivel de abstractizare pentru accesarea datelor, ceea ce înseamnă că indiferent de ce baza de date utilizăm, vom folosi aceleași funcții pentru a trimite interogări și pentru a primi date. Mai jos este exemplificat codul care face legatura către baza de date:

În cadrul fișierului am creat metode pentru scrierea unei instructiuni SQL, pentru asignarea valorilor, pentru executarea unei instrucțiuni după cum urmează:

Aceste metode au fost folosite în cadrul modelului în funcție de tipul de utilizator pentru afișarea, inserarea, editarea sau ștergerea informațiilor din baza de date, de exemplu metoda query este folosita in codul de mai jos pentru a selecta toate coloanele din tabela questions:

4.3. Implementarea interfeței și a funcționalității acesteia

Pentru o mai ușoară creare de noi pagini în directorul views am creeat un director denumit includes, care conține header-ul, footer-ul și bara de navigatie a aplicației.

Pentru fiecare tip de utilizator a fost creeat un director care conține fișiere specifice, de exemplu pentru candidat, avem un fișier de forma:

În browser acest fișier va lua forma:

Este inclus header-ul cu ajutorul constantei definite în fișierul config.php

În cadrul header-ului este inclusă bara de navigație, după care este afișat conținutul și inclus footer-ul tot între tag-urile php:

Structura acestui fișier este aplicată tuturor fișierelor din cadrul directorului view, datele afișate vor fi diferențiate în fincție de tipul de utilizator și de metoda folosită.

4.4.Utilizarea aplicației

În momentul de față aplicația rulează pe un server local. Pentru a putea folosi aplicația este necesară pornirea serverului, apoi accesând in browser adresa: ”localhost/fireschool”.

După accesarea acestei adrese va fi afișată utilizatorului pagina de start, aceasta conține informații minimale din această pagina utilizatorul poate merge la pagina de autentificare, sau la pagina de inregistrare.

Utilizând link-ul din bara de navigație, utilizatorul este redirecționat către o nouă pagină unde își poate crea un cont nou, sau se poate autentifica completând câmpurile necesare.

În figura de mai sus este prezentat formularul de autentificare.

Dacă nu au fost completate corespunzător vor fi afișate mesaje de eroare, pentru exemplificarea mesajelor de eroare am folosit figura #.# în care este prezentat un formular de înregistrare completat necorespunzător, mesajele de eroare sunt valabile și pentru formularul de autentificare.

După autentificare utilizatorul este redirecționat către pagina corespunzătoare în funcție de tipul utilizatorului.

Pentru administrator va fi afișată următoarea interfață în care îi sunt prezentate date în legătură cu utilizatorii existenți pe platformă, numărul de întrebări actual al bazei de date și un link extern către legislația în viguare actualizată la zi.

Dacă alege meniul ”Utilizatori”, acesta vede detaliile utilizatorilor, poate șterge un utilizator, de asemenea are posibilitatea de a se întoarce la meniul anterior prin butonul ”inapoi” din partea de sus a paginii.

Administratorul are de asemenea acces către pagina întrebărilor de unde poate adăuga o nouă întrebare le poate modifica/șterge pe cele existente sau se întoarce la meniul anterior.

Formularul pentru adăugarea unei noi întrebări are o structură simplă și intuitivă și înglobează funcționalitatea mesajelor de eroare în cazul în care sunt câmpuri lăsate necompletate.

Din punct de vedere al tipului de utilizator denumit candidat interfața grafică are forma:

Din acest meniu el poate alege fie un test de matematică, fie un test de fizică, fie un test care să simuleze condițiile de examen, cu întrebări din ambele materii generate aleator din baza de date a întrebărilor.

Pagina de test va fi aceiași indiferent de opțiunea aleasă, diferența este făcută de conținutul întrebărilor.

După finalizarea testului va fi afișată o pagină în care este prezentată nota obținută intr-un tabel cu rubrici separate pentru valorile întrebărilor greșite, corecte și a celor fără răspuns.

Și în final, o poză cu tine de când erai mai mică

P.S pentru profesor nu e gata treaba!

5. Concluzii

Bibliografie