Licenta Cora 02.07.9 [303368]

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDIU CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT IF

Proiect de diplomă

COORDONATOR ȘTIINȚIFIC

dr.ing. Daniela Maștei

ABSOLVENT: [anonimizat]

2017

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

DEPARTAMENTUL CALCULATOARE ȘI TEHNOLOGIA INFORMAȚIEI

TEMA_________

Lucrare de finalizare a studiilor a student: [anonimizat]

1). Tema lucrării de finalizare a studiilor:

[anonimizat]

2). Termenul pentru predarea lucrării: 05.07.2017

3). Elemente inițiale pentru elaborarea lucrării de finalizare a [anonimizat]5, CSS3, MySql, jQuery

4). Conținutul lucrării de finalizare a studiilor : Introducere; [anonimizat], Notepad++, [anonimizat], CSS3, HTML5, JavaScript, MySQL; [anonimizat]; Descriere frontend; Descrierea backend; Concluzii; Bibliografie.

5). Material grafic: prezentare powerpoint.

6). Locul de documentare pentru elaborarea lucrării:

Internet, [anonimizat]

7). Data emiterii temei 01.10.2016

Coordonator științific

dr.ing. [anonimizat].ing. Daniela Maștei

ABSOLVENT: [anonimizat]

2017

[anonimizat]. [anonimizat] m-am hotărât să creez o astfel de aplicație. Am proiectat acest sistem pentru a [anonimizat], să fie în contact cu clienții și să gestioneze situația camerelor unui hotel.

Ca avantaje ale acestui sistem sunt:

Securitatea: aplicația este accesată doar de personalul autorizat;

Performanța și eficiență: [anonimizat] a datelor.

Sistemul este format din două module: unul reprezentat prin formularul de rezervare și al doilea reprezentat prin partea de administrare a rezervărilor.

[anonimizat].

[anonimizat] a hotelului, [anonimizat], [anonimizat], și are acces la lista cu rezervări.

Pentru realizarea acestui proiect am folosit tehnologii de ultimă generație HTML 5, CSS3, Bootstrap, JQuery, [anonimizat], [anonimizat]++. [anonimizat]. [anonimizat], telefon sau tabletă.

Programe și tehnologii folosite

În acest capitol voi enumera principalele caracteristici ale aplicațiilor sau a soft-[anonimizat].

2.1 XAMPP

XAMPP este un acronim pentru:

X (de la "cross", care înseamnă cross-platform) – se poate folosi pe diferite sisteme de operare

Apache HTTP Server

MySQL – pentru gestionarea bazelor de date

PHP – limbaj de programare folosit în dezvoltarea paginilor web

Perl

Este un utilitar de dezvoltare, care permite designerilor și programatorilor web să testeze munca pe calculatoarele personale, fără a avea nevoie de acces la Internet. Se poate utiliza pe orice platformă (Windows, Unix) și este ușor de instalat, și gratuit.

Fig. 2.1 – Panelul de control XAMPP pentru pornirea și oprirea serviciilor Apache, MySql

Am ales să folosesc acest program deoarece este o soluție gratuită și eficientă pentru dezvoltarea platformelor online, oferindu-mi acces la bazele de date și la partea de front-end și back-end a website-ului.

2.2 Notepad++

Notepad ++ este gratuit, este un editor de cod sursă și înlocuiește Notepadul (accesoriu din platforma Windows), care acceptă mai multe limbi. Făcând parte din mediul MS Windows, utilizarea lui este guvernată de licența GPL.

Bazat pe o componentă puternică de editare numită Scintilla, Notepad ++ este scris în C ++ și utilizează API-ul și STL-ul pur Win32, care asigură o viteză de execuție mai mare și o dimensiune mai mică a programului. Prin optimizarea cât mai multor rutine posibil fără a pierde ușurința de utilizare, Notepad ++ încearcă să reducă emisiile de dioxid de carbon mondiale. Atunci când se utilizează mai puțină putere CPU, PC-ul poate să accelereze și să reducă consumul de energie, ducând la un mediu mai ecologic. [1]

Fig. 2.2 – Aplicația Notepad ++

2.3 Adobe Photoshop CC 2015

Adobe Photoshop este un software folosit pentru editarea pe calculator a imaginilor digitale, program produs și distribuit de compania americană Adobe Systems și se adresează în special profesioniștilor domeniului. [2]

Adobe Photoshop este cel mai cunoscut program de editare a imaginilor digitale, grafică pentru tipar, fotografii, videoclipuri și website de pe piață. Este un program cu o interfață intuitivă și care permite efectuarea de modificări necesare în mod curent profesioniștilor și nu numai: editare de luminozitate și contrast, culoare, focalizare, aplicare de efecte pe imagine sau pe zone (selecții), retușare de imagini degradate, număr arbitrar de canale de culoare, suport de canale de culoare pe 8, 16 sau 32 biți, efecte third – party etc. Deoarece furnizează instrumente solide, la standard industrial, Photoshop este efectiv indispensabil, și oferă profesioniștilor și nu numai o interfață prietenoasă și ușor de utilizat.[2]

Alături de aplicația Photoshop (ajuns la versiunea CC, succesorul versiunii CS6), este inclusă și aplicația ImageReady, cu un impresionant set de instrumente Web pentru optimizarea și previzualizarea imaginilor (dinamice sau statice), prelucrarea pachetelor de imagini cu ajutorul sistemului droplets-uri (mini-programe de tip drag and drop) și realizarea imaginilor rollover (imagini ce își schimbă aspectul la trecerea cu mouse-ul peste), precum și pentru realizarea de GIF – uri animate. [2]

Am ales acest soft pentru editarea fotografiilor, și pentru crearea logo-ului hotelului.

Fig. 2.3 – Imaginea de start a Photosshop CC

2.4 HTML 5

Noțiunea de website (sau pur și simplu site, ori „site web”) reprezintă o grupă de pagini web multimedia (care conțin texte, imagini fixe, imagini mișcătoare și chiar sunete), ce sunt accesibile în internet în principiu oricui, de obicei pe o temă anume, și conectate între ele prin hyperlinkuri. Diversele situri web pot să aparțină unei companii, unui proiect, unei rețele de utilizatori, unei persoane particulară, unei administrații publice sau multe altele.

HTML (Limbajul de Marcare a Hipertextului) este limbajul care dă înfățișarea Webului. El constă într-o varietate de elemente numite etichete (tags), care pot fi folosite la orice, de la definirea tipurilor de stil și a anteturilor și până Ia introducerea conținutului specific, cum ar fi imagini, sunete, cuvinte în realitatea virtuală și mini-aplicații Java. [3]

O pagină Web este un fișier care conține atât text, cât și tag-uri HTML. Tag-urile HTML marchează textul pentru a defini cum este el afișat ca pagină dintr-un document Web. HTML-ul conține sute de tag-uri care sunt folosite pentru formatarea paginilor Web și pentru a crea hiperlegături către alte documente sau către alte pagini de pe Web. De exemplu, tag-ul HTML <strong> și </strong> este folosit pentru a defini text în formatul „bold”, iar <p> și </p> sunt folosite pentru a semnala prezența unui nou paragraf. Un alt tip de tag este cel care nu are închidere, spre exemplu tagul <hr /> se folosește pentru a afișa pe pagină o bară orizontală. [3]

HTML este independent de platformă, ceea ce înseamnă că se pot crea sau „coda” fișiere HTML pe un anumit tip de computer și după aceea se poate folosi orice alt computer pentru a vizualiza acel fișier ca și o pagină de Web; pagina arată exact la fel indiferent de sistemul de operare și calculatorul de pe care se vizualizează acea pagina Web.[3]

Am ales să folosesc HTML 5 deoarece au fost adăugate tag-uri noi pentru a ușura introducerea fișierelor multimedia în pagină. Dintre aceste sunt: fișierele audio, video, grafică, documentele interactive etc. Alte elemente noi in HTML 5 sunt tag-urile <header>, <nav> <figure> și <footer>, fiecare marcând o zonă concretă. [4]

2.5 CSS 3

Cu ajutorul unui Cascading Style Sheet (CSS) putem descrie modul de reprezentare al unei pagini HTML, într-un fișier separat. [5]

• avantaje:

conținutul este separat de prezentare;

modul de afișare și layout-ul tuturor paginilor de pe un server web sunt definite într-un singur loc;

se poate utiliza atât pentru pagini HTML cât și pentru documente XML; [5]

• dezavantaje:

CSS – urile nu sunt suportate de toate browserele;

• sintaxa fișierelor CSS este foarte simplă – aceasta constă dintr-o listă de:

selectori (pentru alegerea tag-urilor) și

descriptori (pentru a indica ce vrem să facem cu acestea)

Exemplu: h1 {color: green; font-family: Verdana} spune că tot ce este inclus în tag-ul h1 va fi afișat în verde utilizând fontul Verdana.

• un fișier CSS va conține deci o listă cu astfel de perechi (selector, descriptor):

selectori pot fi simple tag-uri HTML sau XML, dar se pot defini și moduri de combinare a tag-urilor;

descriptori sunt definiți în standard-ul CSS.

Sintaxa generală este:

selector {proprietate: valoare}

– unde

selector este tagul care va fi afectat (acesta este case sensitive dacă și numai dacă limbajul documentului este case sensitive), ex: HTML este case – insensitive.

proprietate și valoare descriu modul de afișare al acelui tag;

Spațiile și punct și virgulă sunt opționale;

Punct și virgulă este utilizată pentru a separa perechile proprietate: valoare.

Utilizarea CSS-urilor

Exista trei moduri de utilizare a CSS-urilor:

– Style sheet extern

Acesta este cel mai puternic;

Se aplică atât la HTML cât și XML;

Toate elementele de sintaxa CSS pot fi utilizate.

– Style sheet intern

Se aplică numai la HTML, nu și la XML;

Toate elementele de sintaxă CSS pot fi utilizate.

– Styles sheet inline

Se aplică numai la HTML, nu și la XML;

Nu toate elementele de sintaxă CSS pot fi utilizate. [5]

Am ales această platformă deoarece oferă o mulțime de lucruri noi pentru a îmbunătăți un website. Multe dintre noile opțiuni nu sunt axate pe funcționalitate, dar pe parcursul anilor webmasterii au observat că utilizatorii vor pe lângă funcționalitate, un design modern și bestial.

Unele facilități, ca meniurile, sunt necesare în aproape orice website. Dar cu CSS3, funcționalitatea și designul cresc exponențial. În momentul trecerii peste un link apar submeniurile, meniuri orizontale, meniuri cu colțuri rotunjite, submeniuri cu taburi, submeniuri cu conținut descriptiv, mega-meniuri. Este mai util să fie vizualizată o parte din pagină pentru a fi identificate eventualele erori care ar putea să apară. [6]

Facilitați noi:

Box Shadow;

Text Shadow – poți adăuga umbră la conținut, sau mai bine zis la un anumit font;

Adăugarea fonturilor mai ușoară – pentru a adăuga un font, trebuie doar să ai sursa acestuia, să-l încarci, iar apoi să-l chemi la un element. Poți face asta foarte ușor prin @font-face.

Fundale multiple;

Border images;

Nivelul opacității;

Transform – acest cod permite alegerea dimensiunii suprafeței în momentul traversării acesteia cu mouse – ul;

Colțuri rotunjite;

Redimensionarea elementelor. [6]

2.6 Design Responsive

Un website este responsive dacă acesta poate să – și adapteze layout-urile (designul) paginilor în funcție de mediul de vizualizare (de exemplu: rezoluția ecranului – desktop, laptop, tableta, telefon), fără să sufere deteriorări majore, pentru a le oferi utilizatorilor o navigare mai ușoară.

În anul 2010 Ethan Marcotte introduce pentru prima oară conceptul de Responsive Design însă a câștigat popularitate în ultimii 2 ani.  Acesta se bazează pe 3 elemente esențiale:

Griduri fluide. Acestea recunosc mai multe rezoluții, astfel că pe măsură ce rezoluția se schimbă, elementele conținute în pagină își modifică dimensiunea sau se rearanjează,

Imagini flexibile, care își pot modifică înălțimea sau lățimea în funcție de grid,

Media queries [7]

Caracteristici:

Gridurile fluide au înlocuit dimensiunile fixe datorită multitudinii de rezoluții existente în prezent. Se bazează pe calculul proporțiilor și își pot modifica lățimea și înălțimea în funcție de rezoluție. Dimensiunile se măsoară în procente și unități relative și nu în pixeli. [7]

Imaginile flexibile au capacitatea de a-și modifica dimensiunile în funcție de rezoluția dispozitivului și dimensiunea gridului. Este indicat să fie salvate pe server mai multe dimensiuni pentru fiecare poză, iar mai apoi sa fie încărcată dimensiunea potrivită rezoluției.

Interogările media (media queries) sunt importante deoarece se pot încărca diferite proprietăți CSS în funcție de rezoluție. Dispozitivul și rezoluția acestuia este recunoscută automat astfel încărcându-se proprietățile CSS corespunzătoare. [7]

Un design responsive atrage după sine și mărirea timpului alocat creării designului și implementării acestuia HTML CSS. Se creează de la 3 la 5 layout-uri în locul unei versiuni, fiecare dintre ele trebuind să fie și implementate. În funcție de rezoluție se va alege imaginea potrivită, care va exista pe server în variante diferite de dimensiune, în locul unei singure imagini cum se întâmpla înainte. [7]

Avantajele

Accesibilitate – există o versiune de site funcțională pe toate dispozitivele. Nu mai sunt necesare versiuni speciale de mobil, care trebuie dezvoltate separat, prin urmare se eficientizează costurile;

Simple sharing – un singur URL pentru toată lumea;

Experiența bună de navigare – fiindcă se adaptează rezoluției, se elimină erorile de navigare, apariția scroll-urilor orizontale, întâlnirea butoanelor prea mici pentru a fi apăsate, etc. [7]

Dezavantajele

Costuri – crește volumul de muncă, astfel, cresc și costurile;

Compatibilitate – pot apărea mai ușor incompatibilități între browsere sau erori de afișare.[7]

2.7 BOOTSTRAP

Bootstrap a fost dezvoltat de Mark Otto și Jacob Thornton la Twitter, și a fost lansat ca o platformă open source în August 2011 pe GitHub.

Bootstrap este un framework gratuit pentru frontend, pentru o dezvoltare web mai rapidă și mai ușoară;

Bootstrap include șabloane de design HTML și CSS pentru tipografii, formulare, butoane, tabele, navigație, modalități, caruseluri de imagine și multe alte pluginuri JavaScript;

Bootstrap oferă, de asemenea, posibilitatea de a crea cu ușurință desene sau modele responsive; [8]

Avantaje:

Ușor de utilizat: Oricine are cunoștințe de bază despre HTML și CSS poate începe să utilizeze Bootstrap;

Caracteristici responsive: CSS reactiv la Bootstrap se adaptează la telefoane, tablete și desktop – uri;

Abordarea mobilă: în Bootstrap 3, stilurile mobile sunt parte a cadrului de bază;

Compatibilitate cu browserul: bootstrap este compatibil cu toate browserele moderne (Chrome, Firefox, Internet Explorer, Safari și Opera. [8]

2.8 MySQL

Am ales să folosesc MySQL deoarece este un sistem gratuit și necostisitor de gestiune a bazelor de date. Față de alte sisteme de baze de date acesta are următoarele caracteristici:

Viteză – acesta este rapid;

Ușurința în utilizare – un sistem de baze de date relativ simplu, dar cu performanțe ridicate, care se poate configura mult mai ușor;

Costul – este gratuit pentru majoritatea utilizărilor interne;

Suport pentru limbajele de interogare; [9]

Dintre caracteristici se poate menționa faptul că se pot conecta mai mulți clienți simultan sau folosirea mai multor baze de date simultan;

Conectivitate și securitate – bazele de date se pot folosi de oriunde prin internet, fiind accesibile unui număr de persoane care au dreptul de acces la acestea;

Portabilitate – rulează pe sisteme Unix și Non-Unix;

Distribuție liberă – se pot folosi sursele de informare de pe Internet, iar în cazul în care nu se cunoaște funcționalitatea unei componente, se poate găsi online.

MySQL are în componență următoarele instrumente:

Server SQL – pentru accesul la baza de date;

Programe client pentru accesul la server;

O bibliotecă client pentru scrierea programelor.

Acest sistem de gestionare a bazelor de date este necesar pentru a-mi atinge scopul, în dezvoltarea unei aplicații online de gestionare a rezervărilor făcute de clienții unui hotel deoarece îmi oferă anumite avantaje:

Timp redus de afișare a înregistrării;

Timp redus în găsirea înregistrării;

Ordinea în regăsirea flexibilă;

Format flexibil al datelor de ieșire;

Acces simultan la înregistrări pentru mai mulți utilizatori;

Acces de la distanță. [9]

Printre cele mai utilizate instrucțiuni sunt:

CREATE TABLE – crearea tabelelor din baza de date, un exemplu foarte bun este următorul: CREATE TABLE Users (id int(11) NOT NULL, goup_id int(11) NOT NULL, active tinyint(1) NOT NULL, …. PRIMARY KEY (id));

INSERT INTO – introducerea informațiilor în tabele create, mai ales în funcțiile de add ale controller-elor: INSERT INTO Users VALUES (1, 2, 1, ‚Silviu’, … ‚ 2015-06-11 00:00:00’);

UPDATE – editarea înregistrărilor din baza de date și este utilizată în funcțiile de edit ale „controller”-elor: UPDATE Users SET active=0 WHERE id=1;

DELETE – ștergerea informațiilor din baza de date în funcțiile de delete din controller-e: DELETE FROM Users WHERE id=1;

SELECT – cea mai folosită comandă SQL, pe baza unor condiții setate în partea de „WHERE” a interogării se pot selecta exact ce înregistrări se doresc: SELECT * FROM Users;

2.9 PHP

Este un limbaj de programare și este acronim pentru Personal Home Pages, dar a devenit acronim recursiv pentru PHP: Hypertext Preprocessor.

Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web. Se folosește în principal înglobat în codul HTML, dar începând de la versiunea 4.3.0 se poate folosi și în mod „linie de comandă” (CLI), permițând crearea de aplicații independente. Este unul din cele mai importante limbaje de programare web open – source și server – side, existând versiuni disponibile pentru majoritatea web serverelor și pentru toate sistemele de operare. Este disponibil sub licența PHP și Free Software Foundation îl consideră a fi un software liber. [10]

Caracteristici:

Familiaritatea – este ușor de folosit, mai ales de cunoscătorii limbajului C;

Simplitatea – nu sunt necesare biblioteci, sintaxa limbajului fiind destul de liberă. Codul PHP este trecut între niște marcaje speciale;

Securitatea – conține măsuri de siguranță foarte eficiente;

Flexibilitatea – a fost integrat pentru numeroasele servere web existente: Apache, IIS, Zeus, etc. astfel acesta se dezvoltă constant;

Gratuitatea.

Câteva dezavantaje:

Case sensitivity;

Tratarea erorilor;

Tipurile de variabile nu sunt fixate automat ca și în ASP, rezultând de aici o lipsă de optimizare a resurselor în PHP. [11]

2.10 jQuery

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

jQuery oferă perspectivă manipulării evenimentelor în JavaScript dincolo de elementele de bază de selecție și manipulare ale arborelui DOM, astfel atribuirea unui eveniment să se facă într-un singur loc în interiorul codului sau să încorporeze funcționalități JavaScript – de exemplu efectele „fade – in” și „fade – out” în momentul ascunderii elementelor, animațiilor – manipulând proprietățile CSS-ului. [13]

Prezentarea aplicației

3.1 Baza de date

Pentru îndeplinirea tuturor cerințelor proiectului am implementat o bază de date relațională pentru stocarea datelor. Cu ajutorul aplicației phpMyAdmin din cadrul XAMPP am realizat în figura 2.1 structura bazelor de date și a tabelelor.

Fig. 3.1 – Structura tabelelor în cadrul phpMyAdmin

Baza de date este formată din 5 tabele după cum urmează: tabelul users, tabelul settings, tabelul email, tabelul rooms, tabelul bookings.

În tabelul users sunt înregistrate datele administratorilor / utilizatorilor aplicației, respectiv numele, parola și adresa de email. Aceasta este accesată în momentul logării în aplicație.

În tabelul settings se regăsesc datele cu privire a denumirea hotelului, modul de plată, limba, email, formatul datei, moneda. Modificările care se aplică în acest tabel apar în formularul de rezervare al camerei.

În tabelul email se regăsesc informațiile cu privire la informațiile care apar în momentul accesării de către administrator a formularului de confirmare sau infirmare a rezervării. În momentul confirmării rezervării administratorul transmite clientului un mail de confirmare care conține câmpurile expeditor, destinatar, subiect și mesaj.

În tabelul rooms apar detaliile camerelor, respectiv numele și prețul acestora. Aceste date se regăsesc în formularul de rezervare.

În tabelul booking se înregistrează informațiile solicitate în momentul completării formularului de rezervare, respectiv datele personale, perioada, felul camerei, numărul și felul persoanelor adulți și copii.

3.2 Descriere frontend

Frontend este acea parte a site-ului sau a aplicației web care o vedem prima oară și care interacționează cu utilizatorii / vizitatorii. Acesta are două părți: designul și partea de cod. În cazul de față este creat printr-o combinație de HTML, CSS și PHP, având și câteva elemente de jQuery. Prin combinarea acestor elemente am creat o interfață user friendly, care oferă o navigare simplă și intuitivă. Are un design atractiv, cu un aspect modern care atrage prin liniile, culorile,și formele care pot convinge utilizatorul să își continue navigarea.

3.2.1 Prima pagină

Pagina web este structurată în 3 părți distincte, respectiv: header, conținutul (body) și footer.

În partea de header se regăsesc informațiile cu privire la site (titlu, descriere, metadata), avem logo-ul, și meniul.

Meta este un tag html care nu apare afișată în pagină, ci este accesată doar la nivel de sistem. Aceste taguri meta sunt folosite pentru descrierea paginii, autor, ultima modificare, titlul paginii, denumirea sitului, keywords. Sunt preluate și procesate de motoarele de căutare, făcându-le mai vizibile în cazul unei căutări pe web.

Fig. 3.2 – Header – ul website – lui

Logo-ul a fost creat prin utilizarea programului Photoshop, prin editarea de vectori.

Meniul este structurat astfel: pagina de principală, pagina Despre, pagina Galerie, pagina Rezervare, pagina Administrare și pagina de contact.

În partea de footer (baza site-ului) sunt conținute link-urile rapide către paginile site-ului, o mică descriere a hotelului, abonarea la fluxul de știri și legăturile cu paginile personale ale hotelului (Facebook, Instagram, Youtube,..).

Fig. 3.3 – Footer-ul website-ului

În prima pagină se regăsește o imagine responsive, un videoclip care prezintă hotelul și un carusel cu imagini cu camerele din hotel, turismul zonal și delicatesele din cadrul restaurantului hotelului. Sistemul de rezervare online este creat astfel încât să poată fi folosit și la alt hotel, pensiune sau cabana, din țară sau din străinătate. Pentru proiect am folosit imagini din Brașov doar pentru a exemplifica modul de folosire al sistemului.

Fig. 3.4 – Videoclip care prezintă hotelul

Videoclipul a fost preluat de pe pagina www.youtube.com, și prezintă descrierea hotelului în cel mai mic detaliu, de la servicii, la personal și management. Pentru a integra videoclipul în pagină a fost folosită tehnologia “embedded” (încorporat). Am folosit tag-ul iframe pentru încorporarea videoclipului de pe platforma youtube, respectiv prezentarea hotelului care l-am folosit ca exemplu. Iframe permite încadrarea unei pagini web sau web API într-o zonă cu mărime definită. Aceasta permite folosire în pagina personală a unei alte aplicații sau a unei porțiuni din aceasta fără a-i modifica funcționalitatea, astfel se poate porni / opri clipul, se poate derula, modifica volumul, precum și rularea pe ecran complet.

Pentru crearea caruselului de imagini am folosit tehnologii CSS3, pentru animații. [14]

Am folosit această tehnologie pentru obținerea unei mișcări mai fluente a imaginilor, deoarece permite modificarea timpilor de trecere între imagini și efectul de tranziție între acestea. Permite adăugarea unui număr mare de imagini care pot fi configurate separat.

Fig. 3.5 – Carusel de imagini

3.2.2 Pagina Despre:

Această pagină, după cum apare și în titlu conține o mică descriere a hotelului care poate influența decizia vizitatorului astfel încât să rezerve o cameră.

Fig. 3.6 – Pagina Despre

3.2.3 Pagina Camere:

Această pagină, conține informații despre camerele disponibile în cadrul hotelului, respectiv dimensiune, dotări, preț.

Fig. 3.7 – Pagina Camere

În momentul accesării butonului detalii, se deschide o altă pagină, în care se regăsesc în detaliu caracteristicile camerei. Informațiile cu privire la dotările camerelor au fost preluate ca exemplu, doar informativ de pe website-ul http://hotelbelvederebv.ro.

Fig. 3.8 – Exemplu de cameră [16]

Fig. 3.9 – Caracteristici cameră [16]

Această pagină conține un carusel de imagini reprezentative, realizat tot cu tehnologie CSS3. Imaginile sunt responsive, astfel se redimensionează în funcție de dimensiunea ecranului.

Imaginile introduse în carusel fac parte din clasa img-responsive, definită într-un fișier exterior style.css. Acestea sunt configurate să își modifice dimensiunea în funcție de ecranul pe care sunt vizualizate cu ajutorul width: 100%, fără să depășească delimitările ecranului. Se poate vizualiza o anumită imagine prin acționarea săgeților direcționale, denumite si icoane Font Awesome, identificate în cod prin fa fa-angle-left pentru partea stângă și fa fa-angle-right pentru partea dreaptă. Aceste icoane sunt special concepute pentru a fi folosite în frame-uri.

3.2.4 Pagina Galerie:

Această pagină, conține imagini culese de pe internet, reprezentând obiectivele turistice și delicatesele din cadrul restaurantului hotelului.

Am folosit pentru crearea acesteia scriptul Blueimp Gallery, ale cărei setări se află în fișierul blueimp-gallery.min.css.

Blueimp Gallery poate fi folosit atât pentru o galerie video cât și de imagini deoarece se poate personaliza în funcție de necesități, este gratuit, adaptat la atingere, optimizat atât pentru browserele web mobile cât și pentru desktop. Dispune de navigare cu mouse-ul și tastatura, efecte de tranziție, funcționalitate de prezentare, suport complet pe ecran și încărcare de conținut la cerere și poate fi extinsă pentru a afișa tipuri suplimentare de conținut.

Această aplicație a fost preluată de pe situl GitHub, și am folosit partea de lightbox. Este un script javascript ce folosește elemente css, pentru a conferi fluiditate imaginilor, elemente de tranziție care pot fi configurate.

Fig. 3.10 – Galerie imagini – obiective turistice

Fig. 3.11 – Galerie imagini – restaurant

Pentru modul de expunere al imaginilor în pagină am folosit comanda CSS3 wowload fadeInUp. Aceasta conferă imaginilor o mișcare în momentul în care se parcurge pagina cu ajutorului butonului scroll al mouse-ului.

3.2.5 Pagina Rezervare:

Această pagină, conține un formular format din mai multe câmpuri care are ca și condiție obligativitatea completării acestora, în vederea transmiterii datelor de rezervare. Interfața de rezervare este creată în 2 limbi: română și engleză, pentru a putea fi folosită și de persoane din afara țării. Aceasta se poate configura pentru a putea fi folosită și pentru alte limbi în funcție de necesități.

Fig. 3.12 – Formular rezervare – limba română și limba engleză

În momentul în care se accesează butonul exemplificat prin steagul țării, este accesat un cod PHP care va prelua informațiile din fișierul romana.php sau english.php, cu ajutorul căruia va fi tradus acest formular.

În funcție de necesități se pot adăuga și alte limbi, prin modificare fișierului, respectiv traducerea acestuia, și introducerea acestuia în codul sursă. În cadrul codului sursă al paginii de rezervare sau în contul de administrare apar anumite variabile ca de exemplu name, phone, date, manage, care sunt traduse automat în limba selectată folosind variabila $lang. Din fișierul exterior romana.php se preia traducerea cuvântului definit, care ulterior este afișată automat, de exemplu pentru [‘PHONE’] apare telefon, prin apelarea funcției echo $lang[PHONE].

Alegerea camerei este posibilă prin accesarea câmpului destinat pentru acest lucru.

Informațiile din câmpul de selectare al camerei sunt preluate din tabela rooms, și care pot fi modificate din pagina de administrare a acestora.

Fig. 3.13 – Selectarea camerei

Pentru selectarea perioadei de rezervare, se accesează câmpurile check in și check out.

Fig. 3.14 – Câmp Check in

Fig. 3.15 – Câmp Check out

Am folosit tehnologia datepicker, special creată pentru paginile web responsive create cu ajutorul bootstrap.[15]

Datepicker este o tehnologie jQuery care permite alegerea perioadei de rezervare, prin afișarea unui mini calendar din care se poate selecta data, combinația zi-luna-an.

Prin aplicarea butonului de rezervare, formularul completat este transmis administratorului site-ului, care va confirma sau infirma rezervarea. Acest formular este înregistrat automat în tabelul bookings, și se regăsește în pagina de administrare a rezervărilor.

3.2.6 Pagina Contact:

Această pagină, conține google maps API, care identifică poziția hotelului pe hartă, pentru a oferi indicații de deplasare pentru utilizator.

Fig. 3.16 – Google maps – poziția hotelului

Poziția pe hartă a fost preluată de pe pagina https://www.google.ro/maps?source=tldso și pentru a fi integrată în pagină a fost folosită tehnologia “embedded” (încorporat).

Am folosit tag-ul iframe pentru încorporarea unei porțiuni din harta API Google, respectiv poziția hotelului care l-am folosit ca exemplu. Iframe permite încadrarea unei pagini web sau web API într-o zonă cu mărime definită. Aceasta permite folosire în pagină personală a unei alte aplicații sau a unei porțiuni din aceasta fără a-i modifica funcționalitatea, respectiv putem mări micșora harta, obține informații de direcționare, și alte funcții disponibile pe platformă.

Formularul de contact conține câmpurile nume, email, telefon și mesaj. Pentru a se transmite formularul este obligatoriu a fi completate toate câmpurile. În momentul transmiterii acestuia, administratorul va recepționa un mail cu mesajul utilizatorului. Acesta este transmis direct administratorului pe adresa de mail a acestuia sau în funcție de cum este configurat pe mai multe adrese.

Fig. 3.17 – Formular contact

3.2.7 Pagina Administrare:

Această pagină, permite accesul la partea de administrare a rezervărilor. Pentru a avea acces la aplicație trebuie completate toate câmpurile din pagina de acces. Acest formular accesează informații din tabelul users unde sunt reținute datele de acces ale utilizatorilor.

Fig. 3.18 – Formular login administrator

Cuvântul care apare în codul de securitate este preluat din fișierul words/en.php. Se pot adăuga sau modifica aceste cuvinte în funcție de necesitate. Cuvintele sunt preluate aleatoriu din fișierul en.php, le este modificat stilul de scriere după care sunt transformate în poze. Cuvintele sunt transformate în poze deoarece există anumite softuri care testează integritatea aplicațiilor sau forțează securitatea acestora prin introducerea de caractere aleatorii, care ulterior să le permită accesul. Captcha a fost dezvoltat pentru a determina dacă utilizatorul este o persoană sau o aplicație pe un calculator.

Pentru a se verifica veridicitatea datelor introduse s-a folosit tehnologie PHP.

După completarea tuturor câmpurilor aplicația verifică informațiile făcând o interogare în tabela users. Parola introdusă în câmpul specific, este transformată prin folosirea algoritmului md5 într-un șir de caractere, care ulterior este comparat cu șirul aflat în tabelă, în dreptul userului specificat. În cazul în care sunt identice se permite intrarea în aplicație, altfel apare o atenționare LOGIN ERROR.

3.3 Descriere backend

Back End – ul de obicei constă în trei părți: un server, o aplicație de interfață și o bază de date. Rolul principal al acestuia este cel de management de conținut. În cazul de față o reprezintă gestionarea rezervărilor din cadrul hotelului, și administrarea solicitărilor de rezervare.

Acesta se poate accesa folosind formularul de logare descris mai sus. După aplicarea butonului ”Logare” se realizează direcționarea pe pagina principală de administrare.

Fig. 3.19 – Prima pagină – administrare

Prima pagină conține ultimele 10 rezervări, cost total al rezervărilor finalizate pozitiv și negativ, și listele cu rezervările noi. Aceste date se preiau din tabela bookings.

În partea din stânga se află un meniu de unde se pot accesa noile rezervări, toate rezervările, administrarea camerelor și setările aplicației de administrare.

Fig. 3.20 – Administrare camere

În cadrul paginii de administrare a camerelor, se pot adăuga prin apăsarea butonului “Adăugare noua” sau șterge prin apăsarea butonului “Ștergere” .

Pentru ștergere am folosit javascript. Acest script este folosit și la adăugarea de camere. Prin apăsarea butonului ștergere, este apelată funcția java, click, care are ca funcționalitate declanșarea comenzilor PHP din fișierul delete_room.php. Acestea permit ștergerea unei camere, fiind eliminată și din tabelul rooms. Fiecare cameră are un identificator denumit id, preluat din tabela rooms. În momentul declanșării butonului ștergere se preia informația, se identifică poziția care urmează a fi modificată iar ulterior se efectuează operația de ștergere. După ștergere se reinițializa identificatorii și în baza de date și pe site.

Prin apăsarea butonului adăugare nouă, este apelată funcția java, click, care are ca funcționalitate declanșarea comenzilor PHP din fișierul add_room.php. Acestea permit adăugarea unei camere noi și o așează în coada listei. Noii înregistrări i se alocă un identificator, care se folosește inclusiv în pagina de rezervare. Aceste înregistrări apar în tabelul rooms, putând fi modificate și manual din aplicația phpMyadmin unde se pot vizualiza toate informațiile.

Datele care sunt introduse în câmpurile din pagina de setări sunt înregistrate în tabela settings, și se mai regăsesc în formularul de rezervare. Acestea pot modifica modul de plată al camerei.

Fig. 3.21 – Administrare – setări

În cadrul paginii lista nouă sunt afișate ultimele 10 intrări care urmează să fie administrate în ordine descrescătoare.

Prin apăsarea butonului Administrare în cadrul paginii Lista noua, ne direcționează către pagina prin care confirmăm sau infirmăm rezervarea.

Fig. 3.22 – Administrare – lista nouă

Fig. 3.23 – Administrare – toată lista de rezervări

În cadrul acestei pagini administratorul poate să transmită vizitatorului un mesaj de confirmare, prin apăsarea butonului de “Trimite mail”. Prin accesarea butonului trimitere mail apare o fereastră ce conține următoarele câmpuri: expeditor, destinatar, subiect. Acestea sunt inserate folosind tehnologia PHP. Următoarele câmpuri sunt afișate în conținutul email-ului transmis de administrator, respectiv: expeditor, subiect și mesaj.

Am creat o pagină în care apar toate înregistrările, fie că s-au finalizat pozitiv sau negativ, astfel acestea putând fi preluate într-un fișier exterior.

Fig. 3.24 – Administrare – toată lista de rezervări

În partea de header a paginii apare automat userul care a accesat aplicația. Această porțiune este de fapt un meniu HTML, care reacționează în momentul în care este accesată prin click. Prin accesare butonului de administrare, apare un submeniu nou care ne oferă mai multe opțiuni: delogare, Profilul meu și setări. Structura meniului este exemplificată în figura 3.25.

Fig. 3.25 – Submeniu administrator

Pagina Profilul meu permite modificarea datelor administratorului respectiv nume, e-mail și parola. În cadrul paginii se află un formular HTML format din mai multe câmpuri. Câmpurile email și parola sunt în legătură cu tabela users, adică în momentul modificării acestora se modifică și în tabel.

Fig. 3.26 – Administrare – profilul meu

Prin accesarea butonului de delogare, administratorul părăsește aplicația, ajungând înapoi pe pagina de logare. Am folosit functia session_destroy, care șterge datele temporare create pentru userul care s-a logat și funcția unset definită și pentru user și pentru parola, care duce la ștergerea caracterelor, sau a datelor cu privire la acestea.

Concluzii

Datorită plăcerii de a călători, de a merge în excursii, am intrat în contact cu acest gen de aplicații, și pentru că trebuia să valorific ce am studiat timp de 4 ani, am dezvoltat această aplicație de rezervare hotelieră.

Aplicația beneficiază de un aspect prietenos, realizat în așa fel încât să fie ușor de folosit. A fost creată pentru a îndeplini următoarele cerințe importante: evidența rezervărilor, modificare caracteristicilor hotelului, denumire, camere, informații și administrarea mai ușoară a rezervărilor.

Am folosit limbaje de programare performante, de ultimă generație pentru realizarea unei interfețe grafice interactivă și atractivă. Am folosit PHP deoarece conferă o securitate aplicației care împreună cu bazele de date oferă protecție contului de administrare. HTML, CSS și Javascript au fost folosite pentru dezvoltarea interfeței, pentru stilizarea acesteia, pentru a deveni mai prietenoasă. Tehnologiile sunt folosite și sunt populare la nivel global, astfel sunt în continuă dezvoltare, iar în cazul apariției unor erori acestea se pot remedia ușor.

A fost creată pentru a putea fi folosită pe orice mijloc de comunicare cu acces la internet, având un design responsive.

Din ce mi-am propus inițial, am realizat următoarele obiective: un sistem de rezervări hotelier online prin care utilizatorul poate rezerva camera, un administrator care gestionează înregistrările, și toate rezervările care se salvează automat într-o listă. Administratorul are acces securizat la o platformă unde poate modifica informațiile care apar pe site, precum și are legătură cu utilizatorii cărora le confirmă sau infirmă rezervarea.

Deoarece timpul alocat implementării obiectivelor a fost scurt, următoarele obiective urmează să le pun în aplicare ulterior: plata online securizată, verificarea disponibilității camerelor, crearea de conturi pentru utilizatori pe diferite niveluri de acces, automatizarea rezervărilor camerelor, precum și implementarea unui sistem de room service.

În realizarea acestui proiect am fructificat și dezvoltat cunoștințele acumulate pe parcursul celor 4 ani, precum și în timpul liber. Pentru a fi în pas cu tehnologiile această aplicație se va dezvolta în continuare.

Bibliografie

[1] https://notepad-plus-plus.org/ – site aplicație notepad++ consultat la 10.01.2017 & 17.06.2017

[2] https://ro.wikipedia.org/wiki/Adobe_Photoshop consultat la 10.01.2017 & 17.06.2017

[3] Chuck Musciano, Bill Kennedy, HTML and XHTML, the definitive guide, Editura O'Reilly Media, Inc., 2002

[4] http://www.tutorialehtml.com/tutoriale-html5/ce-este-nou-in-html5.php consultat la 10.01.2017 & 17.06.2017

[5] Cascading Style Sheets, level 1, W3C Recommendation 17 Dec 1996, revised 11 Jan 1999,

[6] Ștefănescu Marian, Programare web, webdesign, https://www.code-it.ro/html-5-si-css3-designul-la-un-nou-nivel/ , consultat la 10.01.2017 & 17.06.2017

[7] Roxana Olaru, Ce inseamna design responsive? http://webblog.bestwebimage.ro/2014/03/ ce-inseamna-design-responsive/ – consultat la 10.01.2017 & 17.06.2017

[8] http://www.emte.siculorum.ro/~pallaszlo/webtech/labor/L9/Bootstrap.docx consultat la 10.01.2017 & 17.06.2017

[9] Paul Dubois, MYSQL, editura Teora 2001

[10] Rasmus Lerdorf, Kevin Tatroe, Peter MacIntyre, Programming PHP, Editura O'Reilly Media, Inc., 2006

[11] http://www.seap.usv.ro/~valeriul/lupu/html_php_mysql.pdf – generalități PHP, Html, Mysql, de pe site-ul Universității Ștefan cel Mare – Suceava – consultat la 10.01.2017 & 17.06.2017

[12] https://jquery.org/history/ consultat la 10.01.2017 & 17.06.2017

[13] Jonathan Chaffer, Karl Swedberg, Learning jQuery, Editia a IV – a, Editura Packt, 2013

[14] http://daneden.me/animate – aplicație de elemente CSS – animații dezvoltate de Daniel Eden – consultat la 15.02.2017 & 08.05.2017

[15] http://www.eyecon.ro/bootstrap-datepicker/ – cod sursă pentru implementarea selectării perioadei de rezervare – accesat la 11.11.2016

[16] Conținut preluat de pe website http://hotelbelvederebv.ro/ – consultat la 10.02.2017

DECLARAȚIE DE AUTENTICITATE A

LUCRĂRII DE FINALIZARE A STUDIILOR

Titlul lucrării: Sistem online de rezervare hotelieră, utilizând tehnologia PHP

Autorul lucrării: CORA BOGDAN – CRISTIAN

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii examenului de finalizare a studiilor organizat de către Facultatea Inginerie Electrică și Tehnologia Informației din cadrul Universității din Oradea, sesiunea iulie a anului universitar 2016 – 2017.

Prin prezenta, subsemnatul Cora Bogdan – Cristian, CNP 1831128124247,

declar pe proprie răspundere că această lucrare a fost scrisă de către mine, fără nici un ajutor neautorizat și că nici o parte a lucrării nu conține aplicații sau studii de caz publicate de alți autori.

Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau alte surse folosite fără respectarea legii române și a convențiilor internaționale privind drepturile de autor.

Oradea,

05.07.2017 Semnătura