Răileanu Laurențiu -Gabriel Documentare bi bliografică [617806]

UNIVERSITATEA VALAHIA DIN TÂRGOVIȘTE

FACULTATEA DE INGINERIE ELECTRICĂ, ELECTRONICĂ ȘI TEHNOLOGIA
INFORMAȚIEI

SPECIALIZAREA: AUTOMATICĂ ȘI INFORMATICĂ APLICATĂ

LUCRARE DE DIPLOMĂ

COORDONATOR : ABSOLVENT: [anonimizat]. Luminița DU ȚĂ Răileanu Laurențiu -Gabriel

IULIE 2019

Răileanu Laurențiu -Gabriel Documentare bi bliografică

2

Aplicație web responsive de
manageriat rezervari

Răileanu Laurențiu -Gabriel Documentare bi bliografică

3
Cuprins

Introducere ………………………….. ………………………….. ………………………….. ………………………….. …… 5
CAPITOLUL I – Documentare bi bliografică ………………………….. ………………………….. ……………… 6
1.1. Introducere în tematica lucrării ………………………….. ………………………….. ………………. 6
1.1.1. Obiectivul lucrării ………………………….. ………………………….. ………………………. 6
1.2. Tehnologiile web fol osite în aplicații simiare ………………………….. ……………………….. 7
1.3. Prezentarea aplicațiilor similare găsite ………………………….. ………………………….. ……. 7
1.3.1. Partea de client ………………………….. ………………………….. ………………………….. . 7
1.3.2. Partea de admin ………………………….. ………………………….. ………………………… 10
1.4. Îmbunătățiri ale propriei aplicații ………………………….. ………………………….. ………….. 12
CAPITOLUL II – Tehnologii web folosite ………………………….. ………………………….. ……………… 13
2.1. Tehnologii folosite ………………………….. ………………………….. ………………………….. …… 13
2.1.1. HTML 5 ………………………….. ………………………….. ………………………….. ……… 13
2.1.2. SASS ………………………….. ………………………….. ………………………….. ………….. 14
2.1.3. CSS 3 ………………………….. ………………………….. ………………………….. …………. 16
2.1.4. jQuery ………………………….. ………………………….. ………………………….. ………… 17
2.1.5. Framework -ul Bootstrap ………………………….. ………………………….. ……………. 18
2.1.6. PHP ………………………….. ………………………….. ………………………….. ……………. 20
2.1.7. Laravel framework 5.8 ………………………….. ………………………….. ………………. 21
2.1.8. Serverul Apache ………………………….. ………………………….. ……………………….. 21
2.1.9. MySQL ………………………….. ………………………….. ………………………….. ………. 22
2.2. Structura aplicației ………………………….. ………………………….. ………………………….. ….. 23

Răileanu Laurențiu -Gabriel Documentare bi bliografică

4 CAPITOLUL III – Instalarea mediilor de lucru ………………………….. ………………………….. ……….. 25
3.1. Instalarea XAMP -ului ………………………….. ………………………….. ………………………….. . 25
3.2. Descărcarea și instalarea Composer -ului ………………………….. ………………………….. …. 26
3.3. Instalarea Shell -ului ………………………….. ………………………….. ………………………….. …. 27
3.4. Instalarea framework -ului Lara vel ………………………….. ………………………….. ………….. 28
3.5. Integrarea shell -ului în editor ………………………….. ………………………….. …………………. 31
3.6. Încărcarea proiectului pe platforma GitHub ………………………….. …………………………. 33
CAPITOLUL IV – Descrierea aplciației ………………………….. ………………………….. …………………. 36
4.1. Baza de date ………………………….. ………………………….. ………………………….. ……………. 35
4.1.1. Crearea tabelelor destinate rezervărilor ………………………….. ……………………. 36
4.2. Interfața părții de client ………………………….. ………………………….. …………………………. 37
4.3. Interfața adminului ………………………….. ………………………….. ………………………….. …… 39
Concluzii ………………………….. ………………………….. ………………………….. ………………………….. ……. 43
Bibliografie ………………………….. ………………………….. ………………………….. ………………………….. … 44

Răileanu Laurențiu -Gabriel Documentare bi bliografică

5
Introducere

Lucrarea se constitue ca o aplicație web destin ată îmbunătățirii proc esului de rezervare și
checkout, cu scopul de a face cât mai practică preluarea și gestionarea rezervărilor într -un
restaurant.
În elaborarea aplicației am utilizat tehnologii actuale, des întâlnite în aplicațiile web
similare. Aceste tehnologii sunt: programarea în PHP 7, limbaj ul SQL, server -ul Appache, My
SQL, SASS, HTML 5, CSS 3, jQuery, precum și numeroase librării și framework -uri derivate
din limbajele menționate, cum ar fi de exemplu Bootstrap, Laravel și laravel -admin.
Tema a f ost aleasă pe baza faptului că îmi doresc să p rofesez ca programator web, deci
trebuie să -mi lărgesc cunoștintele în domeniul de dezvoltare web și să elaborez mai eficient
aplicațiile pe baza limbajelor pe care le cunosc deja.
Lucrarea este structurată pe 4 capitole , astfel :
În primul capitol este pre zentată o aplicație similară și tehnologiile abordate de autori ,
precum și beneficiile utilizării unei astfel de aplicație.
În cel de -al doilea capitol sunt prezentate tehnologiile web utilizate în aplicația mea .
Capitolul 3 p rezintă instalarea instrumente lor necesare pentru a începe creearea
componentelor efective.
În capitolul 4 se află descrierea celor două componente ale aplicației, anume partea de
client și partea de admin istrator .
La finalul lucrării sunt trecute concluziile și observațiile, urmate de către bibliografie.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

6
CAPITOLUL I
Documentare bi bliografică

1.1. Introducere în t ematica lucrării

1.1.1. Obiectivul lucrării

Prin tema aleasă (Aplicație web responsive de manageriat re zervări) se va î ncerca a oferi o
platformă prin intermediul căreia o societate comercială , un restaurant în speță , va beneficia de
un canal de comunicare mai ușor, mai modern, mai actual și mult mai productiv cu clienții să i.
Tema a fost aleasă în baza următorului exemplu practic: o întâlnire între p rieteni ce se văd o da tă
pe an î n preajma Crăciunului. Deși la prima vedere, organizarea unui astfel de eveniment pare
floare la ureche , în anul 2018, s -au întâmpinat o serie de probleme:
– Rezervare telefonică preluată de către personal neatrenat.
– Indexarea rezervărilor în scris în epoca tehnologiilor web.
– Dată fiind perioada relativ aglomerată a anului , preluarea ș i managerierea bulk -ului
de rezervări devine un task dificil ce poate duce la scăderea profitului și scăderea
imagini i restaurantului respectiv.
După surprinzătoarea întâmpinare a acestor probleme, în anul 2018, am început să mă
documentez cu privire la alte modalități de rezervare abordate de către alte restaurante. Am aflat
cu stupoare ca problemele evidențiate mai sus sunt foarte comune și că deși am întâmpinat și
câteva formulare, ceva care aducea mai mult cu secolul în care traim, tot nu este îndeajuns
rezolvării unor probleme aparute în prezent .
Aplicația își propune următoarele servicii:
– Ușurarea procesului de booking pentru utilizatori .
– Un sistem informatic unde cererile clienților pot fi prelucrate cu ușurință .
– Aplicabilitatea aplicați ei pe o gamă largă de device -uri (smartphone, tablete, desktop
PC etc.).
– Îmbunătățirea marketingului ș i a imaginii de ansamblu afacerii.
– Maximizarea profitului prin eficientizarea folosiri spațiului disponibil.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

7

1.2. Tehnologiile web folosite în aplicații similar e

Una din cele mai relevante aplicații relevante similare gasite este oferită de PHPJabbers
[1], un grup de programatori ce oferă diferite servicii sau aplicații contra cost. D ezvoltarea
acesteia s -a realizat cu ajutorul limbajului PHP, baze de date MySQL, în timp ce interfețele
grafice au fost scrise folosind HTML, SCSS și JavaScript.
PHP, conform [2] , este un limbaj utilizat global, gratuit, specific dezvoltării aplicațiilor
web și este folosit cel mai adesea cu limbajul HTML.
HTML sau Hyper Text Markup Language, potrivit [3] , este un limbaj ce descrie structura
paginilor web prin blocuri reprezentate de tag -uri.
SCSS [4] este un preprocessor de CSS. El ajută la scrierea mai ef icienta a limbajului
CSS. SCSS nu poate fi citit direct de browser, din această cauză este necesară rularea lui pentru
a transforma blocurile de SCSS în blocuri de CSS.
JavaScript, potrivit [5], este utilizat pentru creearea de noi funcționalitati în aplic ațiile
web, acesta fiind un limbaj de programare orientat pe obiect.

1.3. Prezentarea aplicațiilor similar e găsite

Aplicația celor de la PHPJabbers vine cu 2 interfețe, una pentru utilizatorii care vor
urmării completarea unei rezervari și una pentru deținat orii aplicației pentru a putea controla și
gestiona rezervarile.

1.3.1. Partea de client

Aceasta fiind partea cea mai importanta dintre cele două, deoarece ea trebuie sa ofere
posibilitatea și accesabilitatea unui numar larg de persoane, cu nivele de studii di ferite și cu
apartența unor clase sociale diferite.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

8  Un input de tip text, dar restilizat prin prezența unui plugin de JavaScript ce face asemanarea
acestuia cu unul de tip dată, în care utilizatorul va completa cu data la care dorește sa facă
rezervarea.
 Un input de tip text, dar restilizat tot prin prezența unei librării JS pentru a -i oferii
functionalitațiile unui input tip timp, în care utilizatorul va completa cu timpul în care va fi
prezent.
 Un input de tip număr, în care utilizatorul va adresa pentru cate persoane este facută
rezervarea.
 Un buton de verificare a disponibilității restaurantului la data, ora și numărul de persoane
introduse .

Figura 1. Pagina de cautare a locurilor disponibile prezentată in exemplul oferit de [1]

După verificarea disp onibilitații survenită în urma completarii cu informațiile necesare
utilizatorului îi va fi prezentată o hartă a restaurantului cu locurile disponibile la data și ora
dorite, cele gri fiind indisponibile.

Figura 2. Afisarea locurilor disponibile prezent ate in exemplul oferit de [1]

Răileanu Laurențiu -Gabriel Documentare bi bliografică

9

După ce utilizator ul și-a ales masa dorită, acesta va fi redirecționat pe pagina de
finalizare comandă, unde va trebui sa furnizeze datele personale necesare infăptuirii rezervării
prin completarea unui formular .
 Un input tip select unde va fi specificat modul de adresare dorit.
 Un input tip text în care utilizatorul își va scrie numele mic.
 Un input tip text în care utilizatorul își va scrie numele de familie.
 Un input tip text în care utilizatorul își va scrie email -ul.
 Un input tip text în care utilizatorul își va scrie telefonul.
 Un camp pentru codurile de discount.
 Un input tip select pentru selectarea metodei de plată.
 Un input tip checkbox pentru darea acordului cu privire la termenii si condițiile
site-ului.

Figur a 3. Formularul de finalizare prezentat in exemplul oferit de [1]

Răileanu Laurențiu -Gabriel Documentare bi bliografică

10 Schimbarea datelor rezervării pot fi modificate în orice moment înainte sa fie acționat
butonul de submit prin intermediul ancorei de la inceputul paginii “change selection” (figura 3) .
În acest caz utilizatorul va fi redirecționat cu un pas în urmă (figura 2) unde va trebui să își
aleagă iar mesele și sa completeze datele necesare (figura 3).

1.3.2. Partea de admin

Partea de admin a aplicației cuprinde mai multe module, dar în cazul lucrării ne vom axa
pe 2 module principale și anume “Panou de control” și “Rezervari”; celelalte module fiind lasate
pentru eventuale viitoare dezvoltari, cum ar fi “Utilizatori” și “Vouchere”.
Panoul de control sau Dashboard va cuprinde informații legate de rezervăr ile în
desfăsurare, numărul de invitați ce trebuie să sosească, scurtături către pagina de vizualizărilor
tuturor rezervărilor și a altor informații.
Funcționalitați ale Dashboard -uli:
 Fereastra ce arată totalul rezervărilor și numărul celor noi, număr ce poate fi folosit în
viitoare campanii de marketing.
 Fereastra invitațiilor, unde sunt descrise mesele rezervate si numarul de invitați
așteptați.
 Fereastra caștigurilor pe ultimele 7 zile.
 Fereastra de redirecționare către submodulul “Orar” sau de editare directa a unei
rezervari.
 Butonul de tip “Burger”, prezent de altfel pe toate paginile din admin cu rolul de a
deschide și închide meniul (figura 4) .

Figura 4. Acționarea butonului de meniu prezentat in exemplul oferit de [1]

Răileanu Laurențiu -Gabriel Documentare bi bliografică

11

Figura 5. Panoul de con trol prezentat in exemplul oferit de [1]

Modul ul în care sunt prezentate toate rezervarile oferă o privire mai amplă a rezervărilor
în curs care pot fi vizualizate, modificate sau șterse. Printr -un submodul numit “Orar”,
utilizatorul cu drepturi de admin istrator poate vedea datarea calendaristica a tuturor rezervarilor
sau zilele în care este zi libera.
Funcționalitați ale modulului Rezervari:
 Adaugarea unei rezervari direct de către administrator.
 Căutarea / filtrarea rezervarilor.
 Posibilitatea de șterg ere a rezervărilor.
 Posibilitatea de editare a rezervărilor.

Figura 6 . Submodulul de gestionare a rezervarilor prezentat in exemplul oferit de [1]

Răileanu Laurențiu -Gabriel Documentare bi bliografică

12 1.4. Îmbunatățiri ale propriei aplicații

Pentru aplicația mea am urmarit îmbunătațirea pe cât posibila atât a interfețelor grafice
cât și funcționalitaților sale cu scopul de a face procesul de rezervare mai ușor, mai placut, atât
pentru client cât și pentru și pentru deținatorii de afaceri în contextual current.
Făcând diferența cu aplicația gasită, aplicația pr oprie va fi alcatuită fară modulele de
marketing sau a facilitaților care pot fi adaugate ulterior în urma evoluției pe piața în cauză , cum
ar fi de exemplu trimiterea de SMS -uri sau email -uri de notificare a abonaților, clienților.
Tehnologiile folosite v or fi similare celor utilizate de dezvoltatorii de la PHPJabbers,
framework -ul de back -end principal fiind Laravel. În schimb în materie de front -end se va folosi
framework -ul Bootstrap, care vine cu o lista lunga de clase de utilitate de CSS, sau module
precum modale, pop -uri, tab -uri și multe altele pentru a eficientiza scrierea javascriptului.
Design -ul promite o interfața mai atractiva și ușor de utilizat publicului întins respectând
norme de “User Experience / User Interface”.
Din punctul de vedere al modului de funcționare, aplicația va replica funcționabilitatea
exemplului prezentat și al altor aplicații din această categorie, optimizarea principală fiind faptul
ca ea va putea fi folosită de pe orice dispozitiv, atât partea de client cât și cea de adm in.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

13
CAPITOLUL II
Tehnologiile web folosite

2.1 . Tehnologii folosite

Pentru înfaptuirea acestei lucrări voi avea în vedere următoarele tehnologii web:
– HTML 5
– SASS
– CSS 3
– jQuery
– Framework -ul Bootstrap pentru partea de front end
– PHP
– Framework -ul Laravel pentru partea de back end
– Server apache
– MySQL

2.1.1 HTML 5

HTML (Hyper Text Markup Language) este un limbaj creat în anul 1990, folosit în
construcția paginilor web, afișarea informațiilor, a paragrafelor, a tabelelor, a titlurilor ș.am.d.;
pagini care sunt accesate în fiecare zi în navigatoare (Chrome, Opera, Firefox, Safari etc.).
Fișierele scrise in acest limbaj au extensia “html” sau “htm”. Acestea au la bază utilizarea
tag-urilor (etichetelor), principiul acestora fiind faptul că trebuie să exi ste o etichetă de
deschidere și de închidere.

Definiția unui tag:
<tag>…</tag>

Structura principală a unui fisier html conține:
– Versiunea curenta HTML:

Răileanu Laurențiu -Gabriel Documentare bi bliografică

14  HTML 4.01 Strict
 HTML 4.01 Transitional
 HTML 4.01 Frameset
 HTML 5
– Tag-ul <head> </head> ce va conțin e titlul documentului, etichete pentru script -uri,
stiluri, informatii meta.
– Tag-ul <body></body> ce va conține restul informațiilor, paragrafe, heading -uri,
imagini, ș.a.m.d..

Definiția structurii unei pagini web:

<!DOCTYPE HTML>
<html>
<head>
<title >Titlu</title>
</head>
<body>
</body>
</html>

După standardizarea HTML 4 dn 1997, în octombrie 2011 HTML 5 a fost dat in
dezvoltare, prioritațiile acestuia fiind integrarea particularitaților HTML 4 dar și adaugarea unor
caracteristi noi (XHTML1, DOM2H TML, <header>, <section>, <audio>, <video>, ș.a.m.d.). S –
a avut in vedere ca browserele vechi sa ignore caracteristicile noi ale HTML 5 pentru a nu trata
apariția lor ca erori, lucru pe care browserele noi îl puteau face, să recunoască sintaxe incorecte
și să recomande tratarea acestora.
HTML 5 a ramas din 2011 și pana în prezent cel mai folosit limbaj de construire a
paginilor web. În jurul acestora construindu -se o mulțime de tool -uri pentru imbunătațirea
codului, a performanței de afișare pentru indexare a SEO.

2.1.2 SASS

Potrivit [6] abrevierea SASS provine de la “Syntactically awesome style sheet” și este
un limbaj gandit de către Hampton Catlin si dezvoltat de Natalie Weizenbaum cu scopul de a
ușura sintaxa necesară scrierii limbajului CSS.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

15 Extens ia fișierelor scrise cu ajutorul acestui limbaj este “.sass” sau “.scss”, cea din urma
fiind relative mai nouă, prescurtarea acesteia provenind de la “Sassy CSS”.
Acest limbaj este un preprocessor de CSS, folosește formatarea tip bloc a CSS -ului si
princi piul parantezelor pentru a separa coloanele de semicoloane în interiorul blocului respectiv.
Apariția lui a adus numroase inovații dezvoltatorilor web, deoarece a facut posibilă utilizarea
variabilelor, mixinurilor, crearea blocurilor în interiorul altor b locuri precum și selectori de
moștenire. Cea mai importantă inovație din punctul meu de vedere este însă posibilitatea de a
folosi funcții repetitve cu text final:
– @for
– @each
– @while
Aceste funcții fiind similare cu cele utilizate în limbajele de programar e precum PHP
pentru logica lor și Blade pentru modul de scriere al acestora. În acest fel a fost introdusă puțină
programare și printe rândurile CSS -iștilor și celor axati mai mult pe creearea de animatii.
Două alte inovații puternice ale acestui limbaj su nt :@mixin și @include.
Mixinurile dau posibilitatea definirii stilurilor care sunt destinate reutilizării pe parcursul
unui fișier de stiluri. Fac mai ușoară evitarea claselor non -semantice și distribuirea colețiilor de
stiluri în librării. Diferența dint re un mixin și o clasă obișnuită de CSS constă în faptul ca
mixinul poate încapsula alte mixinuri în definirea lui, poate utiliza variabile ca parametrii, iar
numele lor tratează cratimele și sublinierea ca identice.
În primele zile ale Sass -ului în identi ficarea numelor mixinurilor, erau admise doar
sublinierile dar odata ce Sass a adăugat suport pentru cratime ca să fie mai asemănătoare cu
sintaxa CSS, cele două metode de scriere a numelor au devenit echivalente pentru a face
migrația la versiunile noi ma i ușor.
Definiția unui mixin:

@mixin patrat($marime, $raza: 0) {
width: $marime;
height: $marime;

@if $raza != 0 {
border -radius: $raza;
}
}
.obiect {
@include patrat(100px, $raza: 4px);

Răileanu Laurențiu -Gabriel Documentare bi bliografică

16 }

SASS -ul trebuie convertit însă în sintaxa standard ă de CSS pentru a putea fi citită de
către browser întocmai ca predecesorul sau LESS. Ca semantică însă SASS -ul este complet
asemănător cu CSS -ul.

2.1.3 CSS 3

După construcția unei pagini web cu ajutorul etichetelor html, CSS (Cascading Style
Sheets) v a ajuta la stilizarea paginii respective. Aplicarea stilurilor se poate face prin mai multe
procedee:
– Eticheta <style> </style> , ce poate fi folosită oriunde în document, dar se recomandă
ca aceasta sa fie integrată la sfârsitul etichetei <head> deoarece p ot aparea erori de
afișare grafica daca DOM -ul va incărca conținutul paginii primul si stilurile după.
– Atributul “style” folosit direct în eticheta.

<p style=”color:red; text -transform:uppercase;” ></p>

– Importarea unui fișier separat ce are extensia “css ”. Această metodă, care este și cea
mai folosită, se realizează prin eticheta <link> , care este un tag ce se închide singur și
este amplasat în interiorul etichetei <head></head> .

<link rel="stylesheet" type="text/css" href="css.css">

CSS 3 este ultima v ersiune CSS și are ca obiectiv extinderea versiuni 2.1. Aceasta aduce
mult așteptate noutați, cum ar fi:
– Margini rotunjite (border -radius: 4px).
– Umbre (box -shadow: 0 0 5px black).
– Gradienți (linear -gradient(to right, red, blue)).
– Tranziții (transition: all .4s ease 0s).
– Animații (aniamtion: exemplu 2s linear 1s infinite).
– Selectori (:nth -child(n), :last -of-type(n)).

Răileanu Laurențiu -Gabriel Documentare bi bliografică

17 – Media Queries sau breakpoints, similară ca logică interogărilor bazelor de date, unde
putem schimba stiluri doar pe o anumita rezoluție, lucru care stă la baza principiului
“responsive”.
– Posibilitatea creării schemelor cu coloane, grile ce utilizează “flex -box” sau “grid –
box”.
– Suport pentru browsere diferite prin utilizarea prefixelor ( -webkit – specific Google
Chrome, Safari, -moz- specific Mozi lla Firefox, -ms- specific Internet Explorer, -o-
specific Opera).

2.1.4 jQuery

Librăria JavaScript originară din 2006, după ce, conform [7], John Resig influențat de alte
librării noi apărute printre rândurile dezvoltatorilor web, s -a decis să creeze o bibliotecă ce
manipulează DOM -ul (Document Object Model) devenind în numai puțin de 9 ani cea mai
folosită librărie de JavaScript fiind folosită de peste 63% de site -uri web din top 1 milion.
Numărul deși fiind de -a lungul anilor în creștere, abia în an ul 2018 acesta a inceput sa își piardă
din popularitate în fața limbajelor mai noi cum ar fi ReactJS, VUE sau Angular.
jQuery -ul a reușit sa facă mai ușoara selectarea și manipularea elementelor prezente în
document. De exemplu selectarea unui array de ele mente în detrimentul selectării unui singur
obiect, lucru înfăptuit până atunci prin originarul JavaScript, sau abilitatea de a găsi elemente
după prorietați. UX -ul (User eXperience) dezvoltat din acel moment fiind unul mult mai
puternic, mai detaliat, da torită ușurinței cu care elementele au fost legate de evenimente și
stilizate în așa fel încât experientța utilizatorului fiind una mult mai plăcută.
Principale caracteristici care au propulsat jQuery în a fi folosit in proporție de 22.4% în
majoritatea si te-urilor din lume sunt următoarele:
– Extensibilitatea. Creearea de noi evenimente, metode, elemente. Foarte mulți
programatori au îmbrățișat aceste adiții, extinzând propriile librării de jQuery numite
plugin -uri, acestea fiind folosite de alții la randul lor.
– Eliminarea incompatibilităților dintre browsere. Motoarele JavaScript obșnuiau sa
aibă particularitați diferite pentru browsere diferite, anumite secvențe de cod puteau
fi citite de unele, dar returnând erori în altele.
– Abilitatea de a înlănțui funcți i în număr mare, sub denumiri ușor de scris și de înțeles.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

18 – Ajax.
– Parsarea codurilor JSON.
– Animații și efecte.
– Utilizarea gratuită, licența acestuia aparținând MIT -ului.

În topul celor mai populare zece milioane de website -uri din lume, conform W3Tech,
qQuery este folosit de circa 73% din acestea.
Versiunea curentă la care se află această librărie este 3.0, iar din cauza utilizării sale la
scară mare, a update -urilor constante și a faptului ca după ce un site este scris folosind o
versiune mai veche trecer ea la o versiune nouă poate aduce foarte multe bătăi de cap
programatorilor deoarece odată ce o resursă este updatată, celelalte resurse care erau legată de
acestea puteau returna erori sau chair să nu mai funcționeze deloc. Ca raspuns la această
problema jQuery a mai venit cu o librărie adițională pentru cei care folosesc librarii vechi dar
doresc updatarea versiunii de jQuery. Această librărie oferită tot gratuit se numeste jQuery
Migrate și oferă posibilitatea celor care și au construit website -ul pe un jQuery cu o versiune
veche cum ar fi 1.12.x sau 2.2.x să folosească sintaxa versiunii 3.0 fara a crea discrepanțe cu
celelalte librării utilizate.

2.1.5 Framework -ul Bootstrap

Conform [8], Bootstrap care a fost numit inițial “Twitter Blueprint”, a fost dezvoltat de
către Jacob Thoronton și Mark Otto la Twitter. Înainte de apariția acestuia au existat un număr
mare de astfel de librării pentru interfața visual a aplicațiilor web, ele dovedindu -se pline de
lipsuri și greu de utilizat.
După o perioadă de ca teva luni, timp în care a fost dezvoltat de către un grup mic de
programatori, Bootstrap a apărut în august 2011 ca fiind un proiect gratuit destinat oricărui
dezvoltatori web. Dezvoltarea lui a continuat în timp ce s -a format o mica comunitate de
contribu itori .
Câteva luni mai târziu, ianuarie anul următor, a fost lansată versiunea a doua unde au fost
introduse suport pentru iconuri si numeroase componente noi ca și de altfel ajustări
componentelor deja existente. Această versiune a focută sa suporte ti pul de design responsive,
lucru prezent și astazi și unul din motivele principale pentru care bootstrap încă este utilizat.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

19 Urmatoarea versiune a aparut în august 2013, iar modul ei principal de funcționare și
utilizare s -a bazat pe tipul de design minimal ist, lipsit de umbre și efecte 3D. Cu atât mai mult
principalul dispozitiv pentru care a fost dedicată această versiune a fost mobilul, datorită
creșterii producției și cererii de telefoane inteligente, majoritatea traficului site -urilor web
provenind de p e telefoane.
Versiunea 4 care este și cea actuală, a apărut în ianuarie 2018 și a adus următoarele
îmbunătățiri:
– Majoritatea codului de bază a fost rescris.
– Preprocesorul de css, LESS, a fost înlocuit de preprocesorul SASS.
– Nu s-a mai oferit suport pent ru browserele mai vechi.
– Gridul de design responsive a fost construit în jurul “display:flex”, sau flexbox.
– Au fost adaugate clase de utilitate cât și componente noi.
– Componentele neutilizate au fost înlaturate : panel, pager, thumbnail.
– Unitățile de bază au trecut de la pixeli la ems și mărimea lor globală a fost
crescută.
– Înmulțirea punctelor de transfer de la un dispozitiv la celălalt.
Unul din motivele principale pentru care Bootstrap ar trebui instalat pe o pagină web este
gama largă de opțiuni de culo ri, mărimi, fonturi și generarea planului compozițional al paginii
respective. Factorul primordial al acestui motiv fiind libertatea cu care programatorul îsi poate
alege opțiunile.
Odata instalat, framework -ul prevede definiții pentru toate elementele HT ML. Rezultatul
final este o înfățișare uniformă a tuturor elementelor pe toate browserele web. Cu atât mai mult,
dezvoltatorii au avantajul de a schimba stilurile predefinite după bunul plac îndeplinind orice
dorință personalizată pe care o au pentru pagin a lor web.
Bootstrap vine și cu o gamă largă de componete in forma pluginurilor jQuery. Ele
asigura interfețe grafice cum ar fi tooltip -uri, cutii de dialog, carusele și multe altele. Fiecare
dintre aceste componente consistă în a avea o proprie structură HTML, stiluri declarate și în
anumite cazuri acompanierea scripturilor. Ele extind funcționalitățile de bază ale elementolor
HTML.
Cele mai proeminente componente pentru care Bootstrap este folosit sunt componentele
de layout, ele afectând întreaga pagină. Cum majoritatea traficului web se mută în cantități cât
mai mari pe telefon, factorul responsive al paginii este foarte important în construirea ei.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

20 Bootstrap 4 vine cu 4 marimi predefinte pentru device -uri: telefoane mici, telefoane mari, tablete
și desk topuri.

2.1.6 PHP

PHP este, conform [9], un limbaj de programare care se bazează pe partea de server, cu
care se se poate realiza colectarea de date din formulare, generare de conținut dinamic sau
trimiterea și recepționarea de texte codificate numite și “cookie”. Acestea sunt utilizate pentru
monitorizarea comportamentului user -ilor care poate ușura, spre exemplu, un proces de checkout
al unui coș de cumpărături sau o autentificare. În ciuda faptului ca cookie -urile sunt de fapt
inofensive, există păr eri greșite despre acestea cum că ar purta coduri executabile malițioase sau
ar ajuta la spionarea utilizatorilor, lucruri false, cookie -ul fiind alcătuit din text.
O alternativă la folosirea cookie -urilor sunt sesiunile de PHP, care potrivit [10] ele
implică soluții de a ține memorate anumite date ale utilizatorului din accesari mai vechi codului.
PHP este utilizat mai ales în următoarele aspecte:
– Scrierea codului pe server, cel mai utilizat mod al PHP. Pentru acest lucru avem
trei dependințe, analizator ul (care ne va arăta erorile, log -urile), server -ul (pe care
este nevoie ca PHP sa fie instalat) și un browser.
– Scrierea PHP fara dependința de browser și navigator ci doar a analizatorului.
Această scriere se folosește de obicei pentru scripturi care se r ulează regulat.
– Scrierea aplicațiilor web de serviciu, deși se cunoaște ca acest limbaj de
programare nu este cel mai potrivit în creearea aplicațiilor cu interfețe grafice și
este recomandat programatorilor experimentați.
Sistemele de operare ce suporta P HP sunt Linux, Unix, Mac OS X, Windows și altele.
Deci utilizatorul are libertatea de a -și alege sistemul de operare dorit cât si tehnica de
programare dorită, orientată pe obiecte (POO) sau procedurală.
Cu ajutorul PHP se pot afișa atât texte (HTML, XHTML , XML) cât și fișiere PDF,
imagini, elemente Flash. Conținutul dinamic al unei pagini este stocat într -un sistem de cache
unde nu este necesară neapărat afișarea lor.
Conectarea la baze de date are o susținere larga utilizând PHP, ea fiind foarte ușoara,
necesare fiind fișiere cu extensiile de lucru ale bazelor de date (mysql), sau folosind ODBC care
este independentă față de alte baze de date sau sisteme de operare.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

21 Facilitățiile oferite de PHP cuprind funcții de editare a texului, echipamente de procesare
a fișierelor XML.
În ultimii ani s -a sesizat o scadere în căutarea de programatori PHP datorată dezvoltării
limbajelor de scripting menite browserului, librăriilor de javascript, care pot face aplicațiile web
mult mai rapide, cel mai dorit lucru la moment ul actual pe piața web.

2.1.7 Laravel framework 5.8

Laravel este un framework gratuit utilizat în special de dezvoltatorii de PHP. A fost creat
de Taylor Otwell cu intenția ca acesta să fie folosit în dezvoltarea aplicațiilor model -view –
controller (MVC ) și stratificat după Symfony.
Crearea lui a survenit în urma neputinței framework -ului CodeIgniter de a asigura anumite
pachete, pe care Tom le credea necesare, și anume suport preinstalat de autentificare și
autorizare pentru utilizator.
Prima versiune b eta a Laravel a fost lansata în anul 2011 pe 9 iunie. Aceasta fiind
precedată de versiunea 1 în decursul aceleiași luni.
A doua versiune, mult așteptată deoarece framework -ul deja stârnise interes prin rândurile
programatorilor, a aparut în luna septembrie a anului 2011. O mulțime de îmbunatațiri au fost
aduse de către creator si restul comunitații. Laravel fiind licențiat MIT si de folosința gratuita,
codul sursa a fost la dispoziția tuturor celor care voiau să ajute la dezvoltarea sa.
Versiunea a treia la nsata în februarie 2012 a adus una din cele mai așteptate caracteristici,
și anume “command -line-interface” (CLI) numit Artisan, suportul pentru migrarea bazelor de
date și intregi pagini de documentație pentru uzul programatorilor de php.
Framework -ul a d evenit din ce in ce mai popular, acesta fiind în prezent la versiunea 5.8 și
unul din cele mai utilizate framework -uri de php din lume.

2.1.8 Serverul Apache

Potrivit [11], Apache este un server Hypertext Transfer Protocol (HTTP) de tip open
source uti lizat de 65.2 % din paginile web existente.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

22 Apache a fost dezvoltat inițial de Robert McCool, în anul 1995, apoi a fost achiziționat
de Apache Software Foundation în 1999. Succesul acestuia rezultă ușurinței de utilizare, a
securitații, flexibilitații și î n special comunitații ce participă la suportul aplicației.
Este utilizat de câteva din cele mai prestigioase site -uri din lume. Așadar și navigatorul
de la Google utilizeaza o versiune special denumită GWS (Google Web Server).

2.1.9 MySQL

MySQl a fo st creat de către o companie suedeza în anul 1995, dezvoltarea sa începând
însă în anul 1994. A fost creat inițial ca un proiect personal, bazat pe un limbaj vechi numit
ISAM, despre care creatorii săi îl considerau greu și neflexibil. Așadar, au creat o i nterfață SQL
nouă, dar au menținut același API ca mSQL oferind ocazia celor care foloseau acest program
licențiat sa treacă pe MySQL.
Folosit în special cu limbajul de scripting PHP, MySQL poate ajuta la dezvoltarea
aplicațiilor scrise în orice alt limbaj de programare cunoscut. Accesarea acestuia se poate face
face, conform [12], C, C++, C#, Java, PHP, Perl etc., prin API -uri specific limbajului utilizat.
Administrarea bazelor de date se face prin folosirea liniei de commandă sau prin interfața
grafică c e poate fi descarcată de pe internet.
MySQL este oferit sub 2 forme, forma open -source și cea deținută de Enterprise Server.
Cea din urmă se diferențiază printr -o serie de extensii care se pot instala sub forma de pluginuri
de server, dar per ansamblu cel e 2 forme a u un număr mare de similarități fiind amândouă
construite pe acelaș cod.
Versiunea curenta a MySQL este 5.6 care vine cu următoarele caracteristici majore:
– Suport cross -platform
– Proceduri de stocare
– Coduri procedural ce se execută automat ca ră spuns la anumite evenimente
– Structuri de control
– Scheme de informații
– Suport SSL
– Cautare elastică
– Cache pe interogări

Răileanu Laurențiu -Gabriel Documentare bi bliografică

23 2.2 . Structura aplicației

Tema pe care am ales -o “Aplicație web responsive de manageriat rezervări” dorește să
îmbunătațească un principiu simplu de funcț ionare , în cazul de față, al restaurantelor și anume,
de a ușura atât pentru client cât si pentru deținatorii restaurantelor procesul de rezervare.
Dezvoltarea aplicației mele va facilita utilizarea ei pe orice dispozitiv. Interacțiunea
telefonică cu angajații va fi necesară doar in cazuri speciale, izolate în care utilizatorului îi va fi
prea greu să înteleagă modul de funcționare , editare sau stergere a rezervarii. De asemenea
aplicația caută sa ușureze munca angajaților printr -un sistem ușor de monitorizare a rezervărilor
corelate cu programul restaurantului, al bucatariei și al altor factori.
Dezvoltarea ulterioară a acestei aplicații o poate integra în orice domeniu ce necesită
principiul de rezervare/programare.
Prin înfaptuirea sa dor esc să -mi largesc setul de cunoștinte cu noi definiții în materie de
back -end development, PHP, baze de date, libraria de javascript care vine cu framework -ul
Laravel, și anume VUE.js, și a mai aprofunda cunoștințele pe care le am deja în materie de front
end development.
Aplicația client va avea următoarea schema bloc:

Figura 7 . Schema bloc a părții de client

Răileanu Laurențiu -Gabriel Documentare bi bliografică

24
1. Pagina de start a căutarii – formularul unde vor fi introduce datele de disponibilitate,
data, ora, numărul de clienți.
2. Pagina de selec ție a locurilor disponibile – în cazul în care nu există locuri disponibile,
utilizatorul va trebui sa revină la primul pas și să completeze formularul cu alte date
pentru a verifia disponibilitatea la alt moment; în cazu în care există locuri disponibile,
utilizatorul va trebui să le aleagă pe cele care îl interesează.
3. Pagina de completare a datelor – pentru finalizarea procesului, utilizatorul va trebui să
completeze campurile necesare trimiterii cererii către server, în cazul în care acesta se
razgândeșt e cu privire la ceva el poate reveni la primul pas în care va introduce din nou
datele pe care le vrea.
4. Pagina de primire a confirmarii – va înștiința clientul că cerea lui a fost aprobată și este
așteptat la data la care a fost completat formularul.

Aplicația admin va avea următoarea funcționalități:
1. Panoul de control – unde vor fi listate toate rezervările confirmate sau în curs de
combinare, fiecare cu câte o scurtătura către pagina lor de editare. Va mai fi prezent un
loc destinat meselor rămase pe acc esibile pe ziua curentă.
2. Pagina rezervărilor – va oferi o privire mai amplă decât cea listarea din panoul de
control, fiecare element din listare va duce către pagina de editare sau va putea fi șters,
funcționalitate care nu va fi prezentă în dashboard.
3. Pagina de orar – afișarea rezervărilor pe într -un format calendaristic, din nou cu hyper –
linkuri către paginile de editare.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

25
CAPITOLUL III
Instalarea mediilor de lucru

3.1. Instalarea XAMP -ului

Pentru a instala mediul de dezvoltare necesar oferit de XAMP am intrat pe pagina web
“https://www.apachefriends.org/ro/index.html ” și am selectat installer -ul potrivit sistemului meu
de operare și anume “Windows 10”.

Figura 8 . Selectarea installer -ului necesar in funcție de sistemul de operare

După instalarea acestuia, în ruta D: \Projects \xampp \htdocs vom crea folderul laravelapps
unde vom instala frameworkul de php pe care îl vom folosi.

Figura 9 . Crearea folderului “laravelapps”
În continuar e pentru a instala frameworkul vom urma pașii înscriși în documentația site –
ului web “ https://laravel.com/docs/5.8 ”. Documentația ne oferă mai multe variante pentru

Răileanu Laurențiu -Gabriel Documentare bi bliografică

26 instalarea acestui pachet, iar eu am ales -o pe cea care implică mai întai instalarea unui manager
de dependințe pentru acesta numit “Composer”. Folosind Composer mi -a fost mai ușor să
instalez sau să updatez anumite pachete pe care le -am folosit.

3.2. Descărcarea și instalarea Composer -ului

Pentru a inst ala Composer am intrat pe pagina web “ https://getcomposer.org/download/ ”
unde am dat click pe butonul download. De aici am fost redirecționat pe pagina de “Success
download” de unde am descarcat arhiva nece sară. Mai departe, dupa ce instalarea a pornit am
dat click pe butonul “run” și am selectat calea necesară. Composer -ul trebuie instalat in folderul
executabilul „php.exe” din folderul “php” din mediul de dezvoltare instalat anterior, XAMP.

Figura 10. Butonul de download al Composer -ului

Figura 11. Ruta necesară instalării Composer -ului

Răileanu Laurențiu -Gabriel Documentare bi bliografică

27

3.3. Instalarea Shell -ului

După ce am instalat Composer am mai instalat un shell oferit de GIT. Acesta este
asemănător și powershell -ului oferit de Windows, dar care ar e sintaxa mai vizibilă și oferă mai
multe posibilitați userului precum prescurtări, pagini de ajutor și helpers în caz de eroare.
Pentu a -l descarca am intrat pe pagina web “ https://git -scm.com/downloads ” unde am
selectat din nou installer -ul necesar sistemului meu de operare.

Figura 12. Butonul de descarcat softul “git”

Instalarea se face foarte ușor, accesând doar buton “run” și “next”. După ce și acest
pachet a fost instalat vom observa că prin utilizare a click -ului dreapta vom avea o nouă opțiune,
o prescurtare catre noul shell.

Figura 13. Deschiderea shell -ului

Răileanu Laurențiu -Gabriel Documentare bi bliografică

28 După ce am instalat toate aceste dependințe pot reveni la documentația oferită de Laravel
pentru a instala frameworkul.

3.4. Instalar ea framework -ului Laravel

Acest framework PHP gratuit vine cu o documentație stufoasă disponibilă la linkul :
https://laravel.com/docs/5.8 . De aici am gasit pașii necesari instalării oricărei versiu ni de laravel
care suportă ajutor. Eu am folosit cea mai nouă versiune la data începerii proiectului meu și
anume versiunea 5.8.

Figura 14. Instrucțiunile necesare instalării Laravel folosind Composer

În folderul “laravelapps” (figura 9 ) creat in fold erul “htdocs” după instalarea XAMP -ului
am dat click dreapta, Git Bash Here unde mi -a pornit shell -ul instalat anterior. În shell voi vedea
in prima linie ruta pe care ma aflu, dacă as fi folosit shell -ul Windows -ului ar fi trebuit să ajung
la această rută prin navigarea din folder in folder folosind instrucțiunea “cd”.

Figura 15. Ruta după deschiderea shell -ului

Răileanu Laurențiu -Gabriel Documentare bi bliografică

29 După ce am rulat comanda din figura 14, am asteptat între 2 și 3 minute ca Composer -ul
să preia datele din contul de pe GitHub al celor de la L aravel și să imi poata instala local un
proiectul schelet oferit de către aceștia. Schelet pe car e se va construi aplicația mea.

Figura 16. Începerea instalării pachetelor necesare
După apariția liniei “ Application key set successfully. ” se constată ca f ramewor k-ul
a fost instalat cu succes.

Figura 17. Finalizarea instalării

Răileanu Laurențiu -Gabriel Documentare bi bliografică

30 Pentru a putea accesa scheletul în browser trebuie rulată urmatoarea comandă furnizată
de catre documentația Laravel și anume comanda “php artisan serve”. Dar daca nu ne aflam in
folderul tocmai creat de catre comanda composer aceasta nu va funcționa. Pentru a viziona lista
folderelor accesibile am rulat comanda “ls”, iar pentru a intra in folderul necesar, de exmplu test,
am scris “cd test”. Abia după ce am ajuns în acest folder po t da co manda oferită de
documentație.

Figura 18. Pașii necesari rulării comenzii “php artisan serve”

După rularea acesteia, pachetul artisan a atribuit portul 8000 adresei mele locallhost
(127.0.0.1) unde voi putea vedea sch eletul oferit de către Larav el.

Figura 19. Scheletul oferit de Laravel

Răileanu Laurențiu -Gabriel Documentare bi bliografică

31

3.5. Integrarea shell -ului în editor

Am deschis folderul proiectului meu folosind Visual Studio Code (VSCode), un editor
gratuit dezvoltat de către Microsoft, unde am integrat shell -ul git în terminalul acestuia . În acest
mod nu voi mai avea nevoie să am 2 ferestre separate deschise ci voi putea folosi direct editorul
pentru a rula comenzile necesare.
Încorporarea shell -ului git în editor se poate face prin urmatorii pași:
1. Shit + P – va deschidea panoul de cauta re unde am scris “User Settings”.
2. În meniul din stanga am parcurs următoarea Features > Terminal.
3. Am dat scroll până în dreptul câmpului “Integrated > Shell:Windows”,
4. Am selectat calea unde a fost instalat pachetul de la git și anume C: \Program
Files \Git\bin\bash.exe.

Figura 20 . Integrarea shell -ului de la git in editorul VSCode

Mai departe am rulat comanda “npm install” pentru a instala pachetele de frontend cu
care acest framework vine. Aceste pachete pot fi vizualizate în fișierul “package.json”.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

32 Printre aceste pachete vom observa:
– Axios
– Bootstrap
– Jquery
– Laravel -mix
– pooperJS
– SASS
– SASS Loader
– Vue

Figura 21. Fișierul package.json cu pach etele și versiunile lor curente

Răileanu Laurențiu -Gabriel Documentare bi bliografică

33

Figura 22. Rularea comenzii “npm install”
În figura 22 putem observa rezultat ul rulării comenzii “npm install” unde sunt listate
numărul de pachete instalate, peste 900 și numărul vulnerabilităților găsite.
În dreapta ecranului a aparut un nou folder intitulat “node_modules” care va încapsula
toate pachetele instal ate prin comanda “npm install”.

3.6. Încărcarea proiectului pe platforma GitHub

Din motive de securitate am încărcat proiectul pe platforma github pentru a avea un
backup în cazul unei întâmplări nefericite. Pentru aceast lucru m -am logat în contul pe care îl
aveam deja și a m dat click pe butonul “new”.

Figura 25. Crearea unui nou repository

Răileanu Laurențiu -Gabriel Documentare bi bliografică

34
După aceea am fost redirecționat pe pagina de creeare unde a trebuit sa completez
următoarele câmpuri:
– Numele repository -ului
– Descrierea care este opțională
– Tipul repository -ului , pub lică (poate fi urmarită de alții) sau privată (doar eu am
access și cei pe care îi invit)
La sfarșitul completării pașilor de mai sus am dat click pe butonul “Create repository”.

Figura 26. Formularul de creare a unui repository pe GitHub
Pentru a fina liza urcarea proiectului pe paltforma, ne vor aparea pașii necesari acestei
proceduri.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

35

Figura 27. Instru cțiunile urcării proiectului de pe local pe GitHub

Răileanu Laurențiu -Gabriel Documentare bi bliografică

36
CAPITOLUL IV
Descrierea aplicației

4.1. Baza de date

Pentru a atinge scopul lucrăr ii, datele necesare procesului de rezervare vor fi atribuite
următoarelor trei tabele: reservations, reservation_tables și tables . Celelalte tabele prezente au
apărut în urma parcurgerii documentației oferite de pachetul laravel -admin, acestea generându -se
automat dupa scrierea anumitor comenzi în shell. Tabelele generate automat sunt în număr de 9
și au denumirea : admin_menu, admin_operation_log, admin_permissions, admin_roles,
admin_role_menu, admin_role_permissions, admin_role_users, admin_users,
admin_ user_permissions, migrations. Aceste tabele sunt încapsulate in folderul
Database/migrations și pentru a le genera se folosește comanda php artisan migrate împreuna cu
comanda php artisan db:seed .
Ulterior alte tabele destinate adminului pot fi generate au tomat după bunul plac.

Figura 28. Baza de date

Răileanu Laurențiu -Gabriel Documentare bi bliografică

37

4.1.1 Crearea tabelelor destinate rezervărilor

Cele trei tabele destinate rezervarilor au fost făcute manual cu ajutorul interfeței
phpmyadmin.
Prima tabelă, tabela reservations, va înregistra datele provenit e din checkout.Tabela
necesită 10 coloane care vor avea următoarele trăsături:

Figura 29. Tabela reservations

Următoarea tabelă, intitulată reservation_tables, cuprinde 7 coloane care au următoarele
caracteristici:

Figura 29. Tabela reservations_ta bles

Ultima tabelă facută manual se numește tables, în interiorul acesteia sunt înregistrate
toate mesele restaurantului, fiecare masă cu un id unic și un nume. Tabela este alcătuita din 4
coloane cu următoarele trăsături:

Răileanu Laurențiu -Gabriel Documentare bi bliografică

38

Figura 29. Tabela tables

4.2. Interfața pă rții de client

Utilizând tehnologia jquery împreuna cu un plugin open -source denumit Tempus
Dominus Bootstrap 4 [ 18] pe care l -am definit in tagul head, pentru stiluri, și tagul script, pentru
scrupturi, al index -ului, am pus funcționalitățil e necesare pe inputul în care utilizatorul va selecta
data în funcție de regulile setate în c od, una dintre dependințe fiind de exemplu data pe care o
poate selecta clientul nu poate fi o zi anterioara zilei curente. Un alt exemplu din figura de mai
jos (f igura 30) este setarea denumirilor de tip calendaristic în limba română și a formatului
calendaristic specific zonei noastre geografice, plugin -ul folosit are presetat limba engleză și
formatul calendaristic englez, cu Sunday ca fiind prima zi a săptămânii .

Figura 30. Utilizarea plugin -ului oferit de [18]

Tot prin același plugin menționat mai sus, vom pune funcționalitățile pe inputul de
selecție al datei . Componentul grafic generat ajută utilizatorul să selecteze o oră prin acționarea
butoanelor și nu doar a scrisului efectiv în interiorul inputului.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

39 $('#timepicker').datetimepicker({
format: 'HH:mm'
});

Pentru ultimul input, cel de selecție al numărului de persoane, funcționalitatea lui a fost
facută manual. Printre funcționalitățile lui se n umără:
 Singurul tip de date permin este integer, tastarea caracterelor de tip string nu vor
fi afișate în interiorul inputului

$('#guests').keypress(function(){
var keycode = event.keyCode;
if (keycode > 48 && keycode < 57){
return true;
} else {
return false;
}
});

 Prezența butoanelor de incrementare și decrementare a numărului de invitați așteptați .
Număr ce nu poate fi mai mic de 1, altfel va fi afișată o eroare.

După acționarea butonului “Ca uta” panoul cu mesele restaurantuli va fi disponibil. Mesele
prezente vor avea mai multe statusuri, statusul de masa disponibil rezervării reprezentat prin
containerul de culoare “ #b08f5a ”, statusul de masă indisponibilă, sau masă rezervată, boxul acestei
mese este rosu, iar la trecerea cu mouse -ul peste acesta cursorul va indica neputința de selectare a
mesei respective, iar ultimul status, cel de masă selectată, este marcat cu verde și seminifică că una din
mesele cu statusul disponibil a fost selectată pentru rezervare.

Figura 31. De la stanga spre dreapta mesele cu status disponibil, indisponibil și selectat

Mesajul de deasupra panoului va prelua datele din inputurile completate în pasul anterior
cu ajutorul următorului script:

Răileanu Laurențiu -Gabriel Documentare bi bliografică

40 map.find('#head -text')
.text(`Mese disponibile pentru
${form.find(`input[name="guests"]`).val()} persoane pe ${form.find(`input[name="date"]`).val()}
la ${form.find( `input[name="time"]`).val()}`);

După ce mesele dorite sunt selectate și butonul “Rezerva” a fost acționat , utilizatorul va
fi redirecționat în pagina de checkout unde este un formular care are următoarele câmpur i
necesare finalizării acțiunii: Nume, Prenume, Email, Telefon și Alte mentiuni. Câmpurile cu
steluță sunt obligatorii. Dacă datele au fost completate corect și butonul “Finalizeaza rezervarea”
a fost acționat, utilizatorul va fi redirecționat în pagina de confirmare.(figura 32)

Figura 32. Pagina de confirmare a rezervării

4.3. Interfața de administrare

Laravel -admin este o interfață administrativă de construcție pentru framework -ul
Laravel , care ajută la construirea unor blocuri masive de backend cu doar câteva linii de cod.
Această interfață este open -source și este licențiată MIT oferind posibilitatea oricui de a o
descărca, instala și modifica.

Instalarea se face pe conform documentației oferite de către [14], aceasta va consta în
următorii pași:

Răileanu Laurențiu -Gabriel Documentare bi bliografică

41 1. Framework -ul Laravel instalat cu cel puțin versiunea 5.5 și o conexiune către o
bază de date, dacă aceste cerințe sunt întrunite se poate rula cu success comandă
următoare în shell :

composer require encore/laravel -admin

2. Pentru descărcarea stilurilor predefinite și a resturilor resurselor necesare se va
rula urmatoarea comandă:

php artisan vendor:publish –provider=”Encore \Admin \AdminServiceProvider”

3. Ultima comandă necesară este:

php artisan admin:install

Adminul în starea lui inițială poate fi accesat pe ruta “/admin” unde utilizatorul se poate
loga cu date prestabilite, username „admin”, password „admin”, date ce pot fi modificate
ulterior.

Figur a 23. Formularul de logare în admin

Răileanu Laurențiu -Gabriel Documentare bi bliografică

42

Figura 24. Dashboard -ul oferit de laravel -admin

În partea de admin sunt listate toate componentele în panoul de navigare din stânga
paginii. Componentele lui, dupa cum am discutat anterior, se pot genera dupa bunul plac urmând
documentatia oferită de [14]. Atât backend -ul cât si frontend -ul acestor componente fiind
asigurat de libraria open -source laravel -admin.

Componentele adminului vor sunt:
 Componenta “Dashboard”, unde vor fi listate informațiile de ansamblu.
 Componenta “Rezervări”, unde vor fi listate toate rezervarile din baza de date. În
această componentă cel care va manageria rezervările are la dispoziție mai multe
funcționalități și anume: filtrare, exportare în format csv, adăugare și editare.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

43

Figura 33. Modulul “Rezervari” cu listarea rezervărilor

Figura 34. Pagina de editare a unei rezervări

 Componenta “Restaurant”, unde este listat programul pe zilele saptamanii al
restaurantului.
 Componenta “Utilizatori”, unde administratorul poate crea noi cont uri pentru
angajații săi pentru a evita folosirea unui singur cont.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

44
Concluzii

Pentru a duce la capăt obiectivul ales am folosit tehnologii noi familiar e oricărui web
developer începător. Tehnologii le web, care sunt într -o dinamică constantă, primesc upd ate-uri
zi de zi, c e trec de la o versiune la cealaltă foarte repede cu scopul eficientizării scrierii, citirii și
înțelegerii sale pentru o gamă cat mai largă de programatori. Pe baza acestor tehno logii web am
folosit o mulțime de pachete sau plugin -uri d e tip open -source dezvoltat e de alte persoane și
lasate la dispoziția oricui vrea să le folosească. Personal, cred că documentarea față de aces te
tipuri de pachete, deja realizate și pregatite folosiri i în interiorul unei aplicații , este foarte
importa ntă deoarece se economisește foarte mult timp . Astfel, programtorul nu mai este nevoit
să construiască de la zero module sau să “reconstruiască roata” în fie care aplicație pe care o va
concepe . Capacitatea de a urmări o documentație este foarte importantă , în opinia mea, ca și de
altfel reîmprospătarea pachetului de cunoștințe al fiecarei tehnologii cunoscute , deoarece cum
am precizat mai sus, ele sunt în continuă evoluție.
Aplicația dezvoltată se adresează oamenilor din toate categoriile sociale și sper ca po ate
rezolva una din tre problemele des întâlnite , deși neobișnuite pentru anul și nivelul de
tehnologizare în care ne aflăm , și anume posibilitatea de a face o rezervare fără a sta la coadă,
sau fară posibilitatea unei erori de scriere, uitare sau de oricar e altă natură umana, atât într -o
perioadă aglomerată cum ar fi Craciunul, cât și în orice weekend al anului.
Partea de admin istrare ajută la o gestionare mai bună a rezervărilor viitoare și prin
trecerea la o bază de date se vor putea evi ta greșelile de na tură umană. Că utarea unei anum ite
rezervări, de exemplu, este mult mai ușor de găsit și editat printr -un filtru de căutare, decât prin a
răsfoi pagină după pagină într -o perioadă aglomerată.
Interfața grafică este ușor de intuit și utilizat pe orice dispoz itiv. C onceptul de
responsivitate a stat la baza implementării grafice doarece traficul pe majoritatea site -urilor web
din ziua de astăzi provine de pe telefoane mobile, partea de desktop având și ea acordată atenția
necesară pentru publicul care vede mai multă comoditate în acționarea PC -ului.

Răileanu Laurențiu -Gabriel Documentare bi bliografică

45
Bibliografie

[1] https://www.phpjabbers.com/ , consultat la data de 18/12/2018
[2] https://www.php.net/manual/r o/intro -whatis.php , consultat la data de 18/12/2018
[3] https://www.w3schools.com/html/html_intro.asp , consultat la data de 18/12/2018
[4] https://sass -lang.com/ , consultat la data de 18/12/2018
[5] https://ro.wikipedia.org/wiki/JavaScript , consultat la data de 18/12/2018
[6] https://en.wikipedia .org/wiki/Sass_(stylesheet_language) , consultat la data de 20/12/2018
[7] https://en.wikipedia.org/wiki/JQuery , consultat la data de 21/12/2018
[8] https://en.wikipedia.org/wiki/Bootstrap_(front -end_framework) , consultat la data de 21/12/2018
[9] https://www.php.net/manual/ro/intro -whatcando.php , consultat la data de 22/12/2 018
[10] https://php.net/manual/ro/features.sessions.php , consultat la data de 23/12/2018
[11] https://ro.wikipedia.org/wiki/Apache_(server) , consultat la data de 2/1/2019
[12] https://ro.wikipedia.org/wiki/MySQL,consnultat la data de 5/1/2019
[13] Learn PHP 7 – Steve Prettyman, consultat la data de 6/1/2019
[14] http://laravel -admin.org/docs/#/ – consultat la 23/4/2019
[15] https://www.apachefriends.org/ro/index.html , consultat la 23/4/2019
[16] http s://git -scm.com/downloads , consultat la 23/4/2019
[17] https://laravel.com/ , consultat la 23/4/2019
[18] https:// tempusdominus.github.io/bootstrap -4/, consultat la 29/4/2019