Soft educațional în informatică Coordonator științific: Lector univ. dr. Ralf Fabian Student Văcăroiu Sabina Sibiu 2017 Cuprins Introducere… [627952]

UNIVERSITATEA „LUCIAN BLAGA” DIN SIBIU
FACULTATEA DE ȘTIINȚE
DEPARTAMENTUL DE MATEMATICĂ ȘI INFORMATICĂ
MATEMATICĂ INFORMATICĂ
LUCRARE DE LICENȚĂ
Student: [anonimizat]
2017

UNIVERSITATEA „LUCIAN BLAGA” DIN SIBIU
FACULTATEA DE ȘTIINȚE
DEPARTAMENTUL DE MATEMATICĂ ȘI INFORMATICĂ
MATEMATICĂ INFORMATICĂ
Soft educațional în informatică
Coordonator științific:
Lector univ. dr. Ralf Fabian
Student: [anonimizat]
2017

Cuprins
Introducere ……………………………………………………………………………………………………………… 1
0.1 Ce este OpenBook? ………………………………………………………………………………………. 1
0.2 Scopul aplicației …………………………………………………………………………………………….. 1
0.3 Tehnologii folosite ………………………………………………………………………………………….. 1
0.4 Cum este împărțită aplicația ……………………………………………………………………………. 1
0.5 Modul de funcționare a aplicației ………………………………………………………………………. 2
0.6 Arhitectura aplicației ………………………………………………………………………………………. 2
0.6.1 Ce este un design pattern ………………………………………………………………………… 2
0.6.2 Ce înseamnă MVC ………………………………………………………………………………….. 2
0.6.3 Ce este un Model ……………………………………………………………………………………. 3
0.6.4 Ce este un View ……………………………………………………………………………………… 3
0.6.5 Ce este un Controller ………………………………………………………………………………. 3
0.6.6 Ce este un Service Layer …………………………………………………………………………. 3
0.6.7 Ce este un Repository Pattern ………………………………………………………………….. 3
0.6.8 Ce este dependency injection …………………………………………………………………… 3
Capitolul 1: Tehnologii ………………………………………………………………………………………………. 4
1.1 Apache ………………………………………………………………………………………………………… 4
1.2 MySQL …………………………………………………………………………………………………………. 4
1.3 PHP …………………………………………………………………………………………………………….. 4
1.3.1 Ce este un framework ……………………………………………………………………………… 4
1.4 Composer …………………………………………………………………………………………………….. 4
1.5 Laravel …………………………………………………………………………………………………………. 4
1.6 HTML …………………………………………………………………………………………………………… 5
1.7 CSS …………………………………………………………………………………………………………….. 5
1.7.1 SASS ……………………………………………………………………………………………………. 5
1.8 npm ……………………………………………………………………………………………………………… 5
1.9 Angular ………………………………………………………………………………………………………… 5
1.10 Angular Material …………………………………………………………………………………………… 5
1.11 Bootstrap ……………………………………………………………………………………………………. 5
1.12 JavaScript …………………………………………………………………………………………………… 6
1.12.1 Ecma …………………………………………………………………………………………………… 6
1.13 Ionic …………………………………………………………………………………………………………… 6
Capitolul 2: Server ……………………………………………………………………………………………………. 7
2.1 Ce este un server ………………………………………………………………………………………….. 7
2.2 Ce este un API ………………………………………………………………………………………………. 7
2.2.1 Despre REST …………………………………………………………………………………………. 7
2.2.2 Ce este HTTP ………………………………………………………………………………………… 7
2.2.3 Utilizarea REST ca mijloc de comunicare în aplicație ……………………………………. 7
2.2.4 URI ……………………………………………………………………………………………………….. 7
……………………………………………………………………………………………………………………… 7
2.3 Metode de acces …………………………………………………………………………………………… 8
2.3.1 GET ………………………………………………………………………………………………………. 8
2.3.2 POST ……………………………………………………………………………………………………. 8

2.3.3 PUT ………………………………………………………………………………………………………. 8
2.3.4 DELETE ………………………………………………………………………………………………… 8
2.4 Mesajele de eroare ………………………………………………………………………………………… 8
2.4.1 200 ……………………………………………………………………………………………………….. 8
2.4.2 201 ……………………………………………………………………………………………………….. 8
2.4.3 204 ……………………………………………………………………………………………………….. 8
2.4.4 400 ……………………………………………………………………………………………………….. 8
2.4.5 401 ……………………………………………………………………………………………………….. 9
2.4.6 403 ……………………………………………………………………………………………………….. 9
2.5 Baza de date ………………………………………………………………………………………………… 9
2.6 Scopul aplicației …………………………………………………………………………………………….. 9
2.7 Funcționalitate ………………………………………………………………………………………………. 9
2.7.1 Migrarile ………………………………………………………………………………………………… 9
2.7.2 Baza de date ………………………………………………………………………………………….. 9
2.7.2 Rutele ………………………………………………………………………………………………….. 10
2.7.3 Modele ………………………………………………………………………………………………… 10
2.7.4 Service ………………………………………………………………………………………………… 11
2.7.5 Repository ……………………………………………………………………………………………. 11
……………………………………………………………………………………………………………………….. 11
Capitolul 3: Aplicația Web ……………………………………………………………………………………….. 12
3.1 Scopul aplicației …………………………………………………………………………………………… 12
3.2 Funcționalitate …………………………………………………………………………………………….. 12
3.2.1 Înregistrare …………………………………………………………………………………………… 12
……………………………………………………………………………………………………………………. 13
3.2.2 Autentificare …………………………………………………………………………………………. 14
3.2.3 Categorii ………………………………………………………………………………………………. 15
3.2.4 Cursuri ………………………………………………………………………………………………… 16
3.2.5 Lecția ………………………………………………………………………………………………….. 17
3.2.6 Test …………………………………………………………………………………………………….. 19
3.2.7 Pagina principală …………………………………………………………………………………… 21
3.2.8 Despre ………………………………………………………………………………………………… 22
3.2.9 FAQ …………………………………………………………………………………………………….. 23
3.3 Administrator ……………………………………………………………………………………………….. 24
3.3.1 Categorii ………………………………………………………………………………………………. 24
……………………………………………………………………………………………………………………. 26
……………………………………………………………………………………………………………………. 26
3.3.2 Cursuri …………………………………………………………………………………………………. 27
3.2.3 Test …………………………………………………………………………………………………….. 29
Capitolul 4: Aplicația mobilă …………………………………………………………………………………….. 32
4.1 Scopul aplicației …………………………………………………………………………………………… 32
4.2 Funcționalitate …………………………………………………………………………………………….. 32
4.2.1 Autentificare …………………………………………………………………………………………. 32
4.2.2 Înregistrare …………………………………………………………………………………………… 33
4.2.3 Categorii ……………………………………………………………………………………………….. 34
4.2.4 Cursuri ………………………………………………………………………………………………… 35
4.2.5 Lecții …………………………………………………………………………………………………….. 37
4.2.6 Despre …………………………………………………………………………………………………. 40
……………………………………………………………………………………………………………………. 40
4.2.7 FAQ ……………………………………………………………………………………………………… 41

4.2.8Profil ……………………………………………………………………………………………………… 43
……………………………………………………………………………………………………………………. 43
4.2.9 Pagina principală ……………………………………………………………………………………. 44
Concluzii ……………………………………………………………………………………………………………….. 45
Bibliografie ……………………………………………………………………………………………………………. 46

Introducere
0.1 Ce este OpenBook?
OpenBook este o aplicație de e-learning care poate fi accesată atât în mediul online, cât și
pe platforma android.
0.2 Scopul aplicației
Scopul aplicației OpenBook este de a încuraja studiul aprofundat în programarea de orice
tip.
Aplicația oferă cursuri video sau scrise și teste pentru a vedea progresul pe care îl face
utilizatorul.
0.3 Tehnologii folosite
Pentru realizarea acestei aplicații s-au folosit tehnologii actuale, precum Laravel, Angular,
Ionic, Angular Material, Boostrap și alte tehnologii.
0.4 Cum este împărțită aplicația
Aplicația este formată din server (serverul API făcut pe Laravel) si aplicațiile de consum
(aplicația web și aplicația mobilă).
1

0.5 Modul de funcționare a aplicației
Figura 0.1
Din figura 0.1 putem obeserva că atunci când se accesează oricare aplicație aceasta
trimite o cerere către API care mai departe trimite o cerere la Controller, mai departe face o cerere
către Service urmând ca acesta să facă o cerere către Repository, care accesează un Model și
apoi face o cerere la baza de date.
Baza de date va trimite un răspuns la Repository care va comunica cu Modelul și vor trimite
un răspuns către Service , acesta va trimite un răspuns Controller-ului ce va trimite un răspuns
Api-ului, care va trimite la rândul său un răspuns aplicației, care aceasta din urmă o va afișa.
0.6 Arhitectura aplicației
Pentru realizarea aplicației OpenBook s-au folosit mai multe design pattern-uri, cum ar fi:
MVC, Service Pattern, Repository Pattern, IoC Pattern.
0.6.1 Ce este un design pattern
Design patterns sunt cele mai bune metrode prin care un programator reușește să rezolve
probleme comune, în aproape orice limbaj când dezvoltă o aplicație sau un sistem.
0.6.2 Ce înseamnă MVC
MVC sau Model View Controller este un design pattern, un model arhitectural care împarte
o aplicație în trei părți distinctive pentru a separa reprezentarea internă a informație primite, de cea
prezentată și accesată de către un utilizator .
2

0.6.3 Ce este un Model
Modelul reprezintă componenta centrală a pattern-ului, el are legătură cu logica și regulile
aplicație.
0.6.4 Ce este un View
View este reprezentația vizuala a informației, el generează o noua reprezentație vizuală în
funcție de modificările aduse informației transmise.
0.6.5 Ce este un Controller
Cea de-a treia parte, controller-ul acceptă informația și o transformă într-o comandă pe
care o trimite mai departe
0.6.6 Ce este un Service Layer
Service Layer este un design pattern, aplicat pentru a organiza serviciile într-un set de
straturi logice.
Gruparea serviciilor pe straturi reduce inpactul făcut de către modificari. Acesta simplifică
menținerea seviciilor.
Majoritatea modificărilor aduse informației afectează numai stratul în care modificările sunt
făcute, fără să aducă schimbări mari asupra altor straturi.
0.6.7 Ce este un Repository Pattern
Repository-ul este mediator între stratul unde se află sursa informației și restul straturilor .
El centralizează informația și aduce o arhitectură flexibilă, care poate fi implementată peste
tot în aplicație, făcând implementarea acestora mai ușoară, mai ales când aplicația se dezvoltă .
0.6.8 Ce este dependency injection
Dependency injection este o tehnică unde un obiect suplimentează dependințele altui
obiect.
O dependință este un obiect care poate fi folosit.
Injectarea este o dependință transmisă mai departe unui obiect dependent care îl va folosi.
3

Capitolul 1: Tehnologii
1.1 Apache
Apache sau mai exact Apache HTTP Server este un server web gratuit și are un rol foarte
important în dezvoltarea aplicațiilor.
Prima versiune 1.3 este lansată în 1998, versiune actuală este 2.4.25.
1.2 MySQL
MySQL este un sistem de gestiune a bazelor de date și este cel mai des folosit împreună
cu limbajul PHP. Versiunea actuală de MySQL este 5.7.
1.3 PHP
PHP sau PHP: Hypertext Preprocessor este un limbaj script foarte folosit și este cel mai
des folosit în web development în combinație cu HTML.
Versiunea actuală este 7.1.6 prima versiune fiind publicată în 1998. PHP poate fi folosit în
combinație cu HTML și există pe majoritatea serverelor, sistemelor de operare sau platformelor
deoarece este gratuit.
1.3.1 Ce este un framework
În general un framework este o structură de concepte, practici și criterii care ajută la
dezvoltarea și construirea unei structuri.
În sistemele computaționale un framework este o structură stratificată indicând ce fel de
program poate fi construit. Unele framework-uri pot include programe, interfețe sau oferă mijloace
de programere. Un Framework poate fi un set de funcții înauntrul unui sistem.
1.4 Composer
Composer este o unealtă care ajută la organizarea dependințelor în PHP dând voie
declararea librăriilor de care depinde aplicația dezvoltată și le instalează sau updatează.
1.5 Laravel
Laravel este un framework pentru aplicații web, la baza lui stă PHP. Laravel încearcă să
ușureze dezvoltarea proiectelor web prin : sistem ușor și rapid de creare de rute, stocare de cache
și sesiuni, migrări de baze de date etc.
Versiunea actuală este 5.4, prima versiune fiind publicată in iunie 2011.
Pentru a instala Laravel pe un server este nevoie ca serverul să ruleze PHP cu cel puțin
versiunea 5.6.4.
Laravel utilizează Composer pentru a administra dependințele. Înainte de a folosi Laravel
trebuie instalat Composer pe server.
4

1.6 HTML
HyperText Markup Language sau HTML este un limbaj de marcare utilizat pentru crearea
paginilor web ce pot fi afișate într-un browser. Scopul HTML-ului este prezentarea informațiilor,
paragrafelor, fonturilor, tabelelor etc.
Specificațiile HTML sunt dictate de către World Wide Web Consortium sau W3C.
Versiunea actuală este HTML5.
1.7 CSS
CSS sau Cascading Style Sheets este un standard pentru formatarea elementelor unui
document HTML. Stilurile se pot atașa pe elementele HTML prin intermediul unor fișiere externe
sau în cadrul documentului.
Versiunea actuală este CSS4.
1.7.1 SASS
Sass sau Syntactically Awesome Stylesheets este un limbaj script care este interpretat în
CSS.
1.8 npm
Npm este o unealtă care face ca lucrul cu JavaScript să fie mai ușor întreținând și
updatând pachetele și codul care este utilizat în aplicație.
1.9 Angular
Angular este o platformă care încurajează dezvoltarea de aplicații web, mobile sau de desktop ,
la baza lui stând JavaScript.
Angular este creat și este dezvoltat în continuare de Google, prima versiune fiind publicată în
2010, versiunea actuială fiind 4.2.3.
1.10 Angular Material
Angular material este un framework pentru HTML și CSS care este bazat pe Angular și
care crează site-uri responsive și înfrumusețate acestora pentru browsere de mobil și calculatoare.
Ca și Angular, el este dezvoltat de Google, prima versiune apărând în 2010, versiunea
actuală fiind angular material.
Angular material se instalează cu ajutorul npm.
1.11 Bootstrap
Bootstrap este un framework pentru HTML CSS și JavaScript care realizează web site-uri
responsive pentru browserele mobile.
El este gratuit, versiunea actuală este Bootstap3, este creat și dezvoltat de Twiter și a fost
lansat în 2011.
5

1.12 JavaScript
JavaScript este un limbaj de programare orientată pe obiect . Este folosit pentru
introducerea unor funcționalități în paginilor web, codul Javascript din aceste pagini fiind rulat de
către browser. Limbajul este bine cunoscut pentru folosirea sa în construirea site-utrilor web.
Deși în numele lui este compus din Java și cuvântul Script, între JavaScript și limbajul
Java nu există nicio legătură. La fel ca și Java, JavaScript are o sintaxă apropiată de cea a
limbajului C.
A fost inventat în anul 1995 și a devenit un standatd ECMA.
1.12.1 Ecma
Ecma este o organizație pentru standarde pentru sistemele de informații si comunicare. El
și-a dobândit numele în 1994 când European Computer Manufacturers Association(ECMA), își
schimbă numele, în consecință numele nu mai este considerat un acronim și nu se mai scrie cu
toate literele mari.
Organizația a fost fondată în anul 1961 pentru a standardiza sistemele computaționale în
Europa.
1.13 Ionic
Ionic este un kit de dezvoltarea aplicațiilor software folosit pentru a dezvolta aplicații
mobile. Are la bază Angular și frunizează unelte și servicii pentru dezvoltarea de aplicații mobile
hibrid folosind tehnologii web cum ar fi HTML5, CSS sau Sass.
Aplicațiile pot fi construite cu aceste tehnologii web și apoi distribuite prin magazinele de
aplicații native pentru a putea fi instalate. Prima versiune a fost lansată în 2015.
6

Capitolul 2: Server
2.1 Ce este un server
Un server este un program de aplicație care furnizează servicii altor aplicații client, aflate pe
calculatoare diferite sau pe același calculator, acesta asteaptă conexiuni din partea aplicațiilor client.
2.2 Ce este un API
API sau mai exact Application Programming Interface este mijloc comun de comunicare
între mai multe aplicații.
2.2.1 Despre REST
REST este acronim pentru Representational State Transfer și este o conexiune prin HTTP
utilizată la comunicarea între diferite tehnologii. Aplicațiile se folosesc de REST prin operațiile
CRUD (Create Read Update Delete).
Din cauză că are la bază protocolul HTTP este independent de o platformă, lucru care face
posibilă implementarea acestuia pe orice sistem de operare cu orice limbaj de programare.
2.2.2 Ce este HTTP
HTTP este un acronim pentru Hypertext Transfer Protocol și este o metodă prin care se
accesează informațiile. Acesta oferă un mod de c omunicare prin care paginile web se pot transfera
de la un computer aflat la distanță la un alt compute r.
2.2.3 Utilizarea REST ca mijloc de comunicare în aplicație
Aplicația OpenBook este conectată prin REST la baza de date cu ajutorul operațiilor
CRUD. Folosindu-se de partea vizuală a aplicației, acesta poate adauga informații în baza de date,
o poate modifica, o poate șterge sau poate afișa informațiile din baza de date.
Aplicația transferă informața prin ULI și afișează înformație în concordanță cu URI-ul
accesat.
2.2.4 URI
URI sau Uniform Resource Identifier este o secvență formată din litere și cifre, care este
universală și care aparține unei resurse de pe Internet, cum ar fi un site web sau un document.
Acesta poate fi identic cu URL-ul ( Uniform Resource Locator ).
7

2.3 Metode de acces
Metodele de accest sunt metodele prin care informația este trimisă și primită în aplicație.
2.3.1 GET
GET este o metodă care accesată prin HTTP cere serverului informații.
Metoda GET poate fi prinsă, poate rămân în istoricul browserului, nu poate fi folosită cu
informații sensibile, are limită de lungime de date și el trebuie folosit doar pentru a aduce date.
2.3.2 POST
POST este o metodă care accesată prin HTTP trimite informații pentru a fi procesate,
pentru o anumită resursă. Metoda POST nu poate fi prinsă, ea nu rămâne în istoricul browser-ului
și nu are restricție de lungime de date precum metoda GET .
2.3.3 PUT
PUT este o metodă care este folostiă prin accesarea URI, schimbând o anumită informație
existentă folosindu-se de URI, cu o informație nouă.
2.3.4 DELETE
Metoda DELETE este folosita pentru a șterge informațiile folosindu-se de URI. Un răspuns
corect trebuie să fie mesajul 200 . Răspunsul metodei nu poate rămâne în istoricul browser-ului.
2.4 Mesajele de eroare
Mesajele de eroare sunt răspunsuri de la HTTP în consecință cu informațiile trimise către
server și care anunță utilizatorul când acesta trimite date corespunzătoare sau nu.
2.4.1 200
200 este mesajul standar de la HTTP și semnifică faptul că cerința este în regulă și că
aceasta a fost îndeplinită cu succes.
2.4.2 201
201 este mesajul de succes primit de la HTTP pentru o cerință de creare a unei noi
informații.
2.4.3 204
204 este mesajul de la HTTP pentru o cerință procesată cu succes, dar care nu returnează
nici un conținut.
2.4.4 400
400 este mesajul de la HTTP pentru o cerință procesată, dar care nu a putut fi înțeleasă de
către server. Utilizatorul trebuie să aducă modificări informație trimise înainte de a mai face o
cerere.
8

2.4.5 401
401 este mesajul de la HTTP pentru o cerință care trebuie satisfăcută de autentificarea
utilizatorul. Dacă aceasta este deja satisfăcută și mesajul 401 încă persită, atunci înseamă că
datele întroduse nu sunt corecte. Este folosită atunci când o autentificare este posibilă, dar a
eșuat sau nu a fost furnizată.
2.4.6 403
403 este mesajul de la HTTP pentru o cerință trimisă, dar serverul refuză să răspundă.
2.5 Baza de date
O bază de date este o colecție de informații organizate. Baza de date este o colecție de
scheme, tabele, rapoarte și alte obiecte.
2.6 Scopul aplicației
Aplicația API va conecta informațiile preluate de către aceasta, din baza de date, cu partea
vizuală a aplicațiilor, astfel afișând informația din baza de date în orice aplicație.
2.7 Funcționalitate
2.7.1 Migrarile
Migrările sunt modul de control asupra bazei de date, ele permit dezvoltatorului aplicației să
modifice și să dea mai departe cu ușurință schema bazei de date a aplicației, astfel încât baza de
date nu trebuie făcută manual.
2.7.2 Baza de date
În baza de date avem tabelele:
–users cu coloanele:
–id: int – primary key și auto-increment
–name: string
–email: string
–password: string
–created_at: date
–updated_at: date
–categories cu coloanele:
–id: string – primary key și auto-increment
–title: string
–description: text
–created_at: date
–updated_at: date
–courses cu coloanele:
–id: int – primary key și auto-increment
9

–title: string
–description: text
–user_id: int – foreign key cu tabela users prin coloana id
–created_at: date
–updated_at: date
–chapters cu coloanele:
–id: int – primary key și auto-increment
–title: string
–description: text
–course_id: int – foreign key cu tabela courses prin coloana id
–created_at: date
–updated_at: date
–lessons cu coloanele:
–id: int – primary key și auto-increment
–title: string
–description: text
–type: enum – permite 3 valori (video, text, quiz)
–votes cu coloanele:
–id: int – primary key și auto-increment
–user_id: int care este conectat cu coloana id din tabelul utilizatori
–course_id: int care este conectat cu coloana id din tabelul cursuri
–value: enum – permite valorile 1, 2, 3, 4 și 5
–updated_at: date
–created_at: date
Aplicația OpenBook este împarțită în mai multe părți: categorii, cursuri, lecții, fișiere,
utilizatori și vot.
2.7.2 Rutele
Rutele sunt modul în care informația din aplicație se accesează. Acestea pot fi accesate cu
metodele GET, POST, PATCH sau DELETE. Rutele sunt denumite conform informației care va fi
afișată și preluată. De exemplu:
GET /users – Afișează lista de utilizatori
POST /users – Adaugă un utilizator nou
GET /users/1 – Afișează informații despre utilizatorul cu ID-ul 1
PATCH /users/1 – Actualizează informații despre utilizatorul cu ID-ul 1
DELETE /users/1 – Șterge utilizatorul cu ID-ul 1
2.7.3 Modele
Conectarea la informația din baza de date se face pe bază de modele. Pentru a ne conecta
la tabla users din baza de date avem un model numit User. Modelul User ne permite să facem
acțiuni de tip CRUD (Create, Read, Update, Delete), dar și să avem relații între coloane pentru a
permite afișearea mai ușoară a informațiilor din alte tabele prin foreign key.
10

2.7.4 Service
Pentru a creea o clasă de tip service în aplicație, este nevoie de o interfață pentru a defini
metodele acesteia, după care se face implementarea. Când se cere un obiect de tipul inferfeței o
să se returneze prin Dependecy Injection implementarea acesteia.
2.7.5 Repository
Similar serviciilor, un repository este definit cu ajutorul unei interfețe, iar implementarea se
face într-o clasă separată. La fel ca la service, se aplică Dependency Injection.
2.8.6 Controller
Rutele aplicației au nevoie de un controller pentru a face legătura către informație prin
servicii.
11

Capitolul 3: Aplicația Web
3.1 Scopul aplicației
Scopul aplicației web este de a prelua, trimite, accesa informații din baza de date pentru
utilizatorul acestuia.
3.2 Funcționalitate
În aplicația web se găsesc mai multe pagini HTML, care sunt conectate prin API la baza de
date și între ele prin rute.
3.2.1 Înregistrare
Pagina de înregistrare permite utilizatorului să creeze un cont pentru a putea viziona sau
lectura cursurile din aplicație.
Figura 3.2.1.0
12

În figura 3.2.1.0 și figura 3.2.1.1 putem observa un formular pentru înregistrarea
utilizatorului.Acesta trebuie să completeze câmpure Nume , Adresa de email cât și cele două
câmpuri pentru parolă pentru a putea fi înregistrat.
Figura 3.2.1.01
13

3.2.2 Autentificare
Pagina de autentificare permite utilizatorului să se autentifice în contul creat pentru a
lectura sau viziona cursurile.
Figura 3.2.2.0
Figura 3.2.2.1
În figura 3.2.2.0 și 3.2.2.1 se poate observa un formular de autentificare. Utilizatorul trebuie
să completeze câmpurile Adresa de email și Parolă pentru a se putea autentifica în cont.
14

3.2.3 Categorii
Pagina de categori prezintă liste cu cursuri cu numele și descrierea lor, organizate pe
categorii ,utilizatorului aplicație.
Figura 3.2.3
În figura 3.2.3 se poate vedea o categorie cu o listă de cursuri pe care utilizatorul o poate
răsfoi.
15

3.2.4 Cursuri
Pagina de curs prezintă utilizatorului aplicației, detalii despre curs, cum ar fi: titlul,
descrierea, numărul de voturi, autorul, lista cu capitole și lecții.
Figura 3.3.4
16

3.2.5Lecția
Pagina de lecție prezintă utilizatorului documentul, videoul sau testul respectiv.
Pagina de lecție este de 3 tipuri:
–Video, prezentată în figura 3.2.5.2
–Document prezentata în figura 3.2.5.1
–Test prezentată în figura 3.2.6.1
Figura 3.2.5.1
17

În figura 3.2.5 este reprezentat lecția tip document, numele acestuia, numele cursului,
autorul cu descriera, o listă cu lecțiile din capitol și o listă cu capitolele
Figura 3.2.5.2
18

3.2.6 Test
Pagina pentru test prezintă utilizatorului detalii despre testul respecti. Întrebarile sunt de trei
tipupr: cu răspuns multiplu, cu un singur răspuns sau cu răspuns adevărat/fals.
Figura 3.2.6.1
19

În figura 3.1.6.1 se poate observa întrebarea respectiva, titlul testului, descrierea testului,
răspunsurile din care se poate alege, lista întrebărilor, atât lista capitolelor cu lecții cât și numele
cursului cu descrierea.
20

Figura 3.2.6.2
Figura 3.2.6.3
În figurile 3.2.6.2 și 3.2.6.3 se observă tipuri diferite de întrebări.
21

3.2.7 Pagina principală
Pagina principală introduce utilizatorului aplicația OpenBook, îi pune la dispoziție informații
despre cursurile disponibile și mijloace pentru descărcarea aplicației mobile.
Figura 3.2.7
22

3.2.8 Despre
Pagina despre informează utilizatorul despre aplicația OpenBook și scopul acesteia.
Figura 3.2.8
În figura 3.2.8 se observă detalii despre aplicația Openbook.
23

3.2.9 FAQ
Pagina FAQ( Frequentrly Answered Questions ) pune la dispoziția utilizatorului o listă cu
întrebări des întâlnite despre aplicație și răspunsuri pentru aceste întrebări.
Figura 3.2.9
În figura 3.2.9 se observă lista cu întrebările în partea stângă și răspunsul întrebării
selectate în partea dreaptă.
24

3.3 Administrator
Pagina de administrator ajută pe cel care administrează aplicația să introducă informațiile
necesare ușor, punându-i la dispoziție formulare.
3.3.1 Categorii
Pagina de categori prezintă liste cu cursuri cu numele și descrierea lor, organizate pe
categorii ,utilizatorului aplicație.
Figura 3.3.1.1
În figura 3.3.1.1 se observă un tabel cu categoriile care sunt în baza de date.
25

Figura 3.3.1.2
Figura 3.3.1.3
În figura 3.3.1.3 se observă încărcarea formularului de adăugare a unei categori. În figura
3.3.1.2 se observă completarea unui formular de adăugare a unei noi categorii
26

Figura 3.3.1.4
În figura 3.3.1.4 se observă editarea unei categorii și vizualizarea acesteiaîn partea
dreaptă.
27

3.3.2 Cursuri
Pagina de curs prezintă utilizatorului aplicației, detalii despre curs, cum ar fi: titlul,
descrierea, numărul de voturi, autorul, lista cu capitole și lecții.
Figura 3.3.2.1
În figura 3.3.2.1 se observă un tabel cu cursurile existente.În figura3.3.2.2 se observă
editarea unui curs.
Figura 3.3.2.2
28

Figura 3.3.2.3
În figura 3.3.2.3 se observă editarea unui curs.
Figura 3.3.2.4
În figura 3.3.2.4 se observă vizualizarea unui curs în curs de editare.
29

3.2.3 Test
Pagina pentru test prezintă utilizatorului detalii despre testul respecti. Întrebarile sunt de trei
tipupr: cu răspuns multiplu, cu un singur răspuns sau cu răspuns adevărat/fals.
Figura 3.3.2.5
Figura 3.3.2.6
Figura 3.3.2.7
În figura 3.3.2.7 cât și în figura 3.3.2.6 se observă alegerea răspunsului corec într-un
test.Figura 3.3.2.5 reprezintă alegerea tipului de întrebare.
30

Figura 3.3.2.8
În figura 3.3.2.8 se observă adăugarea multimplelor întrebări pentru a crea un test.
31

Figura 3.3.2.9
În figura 3.3.2.9 se observă vizualizarea unui test înainte de a salva modificarile.
32

Capitolul 4: Aplicația mobilă
4.1 Scopul aplicației
Scopul aplicației mobile este accesarea informație mai ușor și mai accesibil, astfel încât
utilizatorul să poată accesa informația oriunde dorește.
4.2 Funcționalitate
În aplicația mobilăse găsesc mai multe pagini HTML care sunt conectate prin API la baza
de date și înte ele de către rute.
4.2.1 Autentificare
Pagina de autentificare permite utilizatorului să se autentifice în contul creat pentru a
lectura sau viziona cursurile.
Figura 4.2.1
În figura 4.2.1 se poate obeserva un formular
de autentificare a utilizatorului .Câmpurile email
și parolă sunt obligatorii pentru a putea fi făcută
autentificarea.
33

4.2.2 Înregistrare
Pagina de înregistrare permite utilizatorului să creeze un cont pentru a putea viziona sau
lectura cursurile din aplicație.
Figura 4.2.2
În figura 4.2.2 se poate observa un formular de înregistrare pentru utilizatori . Câmpurile
Nume, Email cât și cele două câmpuri parolă sunt obligatorii pentru a putea face înregistrarea.
34

4.2.3 Categorii
Pagina de categori prezintă liste cu cursuri cu numele și descrierea lor, organizate pe categorii
,utilizatorului aplicație.
Figura 4.2.3
În figura 4.2.3 putem observă lista categoriilor disponibile.
35

4.2.4 Cursuri
Pagina de curs prezintă utilizatorului aplicației, detalii despre curs, cum ar fi: titlul,
descrierea, numărul de voturi, autorul, lista cu capitole și lecții.
Figura 4.2.4.1
În figura 4.2.4 se poate observa o listă de cursuri dintr-o categorie.
36

Figura 4.2.4.2
În figura 4.2.4.2 se poate observa un curs cu titul autorul voturile descrierea și o listă de
lecții și capitole afișate.
37

4.2.5 Lecții
Pagina de lecție prezintă utilizatorului documentul, videoul sau testul respectiv.
Pagina de lecție este de 3 tipuri:
–Video, prezentată în figura
–Document prezentata în figura
–Test prezentată în figura
Figura 4.2.5.1
În figura 4.2.5.1 se observă o lecție de tip text cu titluiși autorul afișat.
38

Figura 4.2.5.2
În figura 4.2.5.2 se observă un test cu numele descrierea întrebările descrierea întrebărilor
și răspunsurile posibile.
39

Figura 4.2.5.3
În figura 4.2.5.3 se poate observa o lecție de tipul video cu cursul, autorul și descrierea
lecției.
40

4.2.6 Despre
Pagina despre informează utilizatorul despre aplicația OpenBook și scopul acesteia.
Figura 4.2.6
În figura4.2.6 se poate observa o pagină care informează utilizatorul ce anume face
aplicația OpenBook.
41

4.2.7 FAQ
Pagina FAQ( Frequentrly Answered Questions ) pune la dispoziția utilizatorului o listă cu
întrebări des întâlnite despre aplicație și răspunsuri pentru aceste întrebări.
Figura 4.2.7.1
În figura 4.2.7.1 se poate observa o listă de întrebări frecvent întebate.
42

Figura 4.2.7.2
În figura 4.2.7.2 se poate observa răspunsul unei întrebari frecvent întrebate.
43

4.2.8Profil
Pagina de profil introduce utilizatorului un formular pentru a putea schimba datele conntuli
cât și cursurile pe care le-a vizionat sau care îl interesează.
Figura 4.2.8
În figura 4.2.8 se poate observa o pagină de profil a unui utilizator. Aceasta conține un
formular de schimbare a datelor profilului și o listă de cursuri pe care utilizatorul le-a început.
44

4.2.9 Pagina principală
Pagina principală introduce utilizatorului aplicația OpenBook, îi pune la dispoziție informații
despre cursurile disponibile și mijloace pentru descărcarea aplicației mobile.
Figura 4.2.9
În figura 4.2.9 se observă pagina principală a aplicației aceasta se poate observa o
listă cu cursuri care sunt cele mai votate de către utilizatori.
45

Concluzii
Aplicația OpenBook este o aplicație complexă care îmbină tehnologiile web, baza de date,
limbajele de server și serverul într-un mod armonios.
Tehnologiile folosite sunt de actualitate și reușesc să transforme o aplicație banală într-o
aplicție complexă.
46

Bibliografie
www.php.net – Pentru informațiile despre PHP
www.angular.io – Pentru informațiile pentru Angular
www.material.angular.io – Pentru informațiile despre material angular
www.laravel.com – Pentru informațiile despre Laravel
www.ionicframework.com – Pentru informațiile despre ionic
www.getbootstrap.co m- Pentru informațiile despre Boostrap
www.apache.org – Pentru informațiile despre Apache
www.mysql.com – Pentru informații despre MySQL
www.w3schools.com – Pentru informații despre CSS, SASS și HTML
www.javascript.com – Pentru informații despre JavaScript
47