Licenta Cora 27.06 [304463]

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:

Sistem de rezervări al unui hotel utilizând tehnologia PHP

2). Termenul pentru predarea lucrării: 07.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], CSS, HTML, JavaScript, MySQL; [anonimizat]; [anonimizat]-ului –; [anonimizat]-ului –; Concluzii, Bibliografie.

5). Material grafic:

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

Internet, [anonimizat]

7). Data emiterii temei 01.10.2016

Coordonator științific

dr.ing. Daniela Maștei

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDIU CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT IF

Sistem de rezervări al unui hotel utilizând tehnologia PHP

COORDONATOR ȘTIINȚIFIC

dr.ing. Daniela Maștei

ABSOLVENT: [anonimizat]

2017

Introducere

Având în vedere faptul că tendința oamenilor de a [anonimizat]. Astfel am proiectat acest sistem pentru a ușura procesul de management al rezervărilor unui hotel. [anonimizat].

Ca avantaje ale acestui sistem sunt:

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

Performanța și eficiență: este un sistem eficient deoarece evidența înregistrărilor este fără erori care pot apărea în cazul introducerii manuale a datelor.

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

[anonimizat].

Administratorul poate modifica structura hotelului (număr de camere și felul acestora), [anonimizat] a hotelului, etc.

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

Programe și tehnologii folosite

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

1.1 XAMPP

XAMPP este un acronim pentru:

X (de la "cross", [anonimizat]) – [anonimizat] – 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. 1.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.

1.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. 1.2 – Aplicația Notepad ++

1.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. 1.3 – Imaginea de start a Photosshop CC

1.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]

1.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}

– sau

selector, …, selector {

proprietate: valoare;

. . .

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. Submeniuri când treci peste un link, meniuri orizontale, meniuri cu colțuri rotunjite, submeniuri cu taburi, submeniuri cu conținut descriptiv, mega-meniuri. Userii ar aprecia sa vadă un pic mai mult din pagină înainte de a pierde potențialul timp. [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 îți permite să alegi cât de mare vrei să fie o suprafață când treci cu mouse – ul peste ea;

Colțuri rotunjite;

Redimensionarea elementelor. [6]

1.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 modifica î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ă, după cum am specificat mai sus, prin urmare, cresc și costurile;

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

1.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 front-end, 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 vă 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]

1.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. Conform www.mysql.com /benchmark.com MySQL este cel mai rapid sistem de baze de date;

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 putem 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 poate 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;

1.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. Conform statisticilor este instalat pe 20 de milioane de site-uri web și pe 1 milion de servere web. 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 exitente: 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]

1.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

2.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 prezentat în figura 4.1.1??????? structura bazelor de date și a tabelelor.

Fig. 2.1 – Structura tabelelor în cadrul phpMyAdmin

Fig. 2.2 – Tabela Users

În această tabelă sunt conținute informațiile utilizatorilor.

Fig. 2.3 – Tabela cu setări

În această tabelă sunt conținute informațiile care apar în momentul în care se efectuează rezervarea (email, moneda, modul de plată). Această tabelă este accesată și modificată de administrator din contul acestuia. Aceste informații se regăsesc și în formularul de rezervare al camerei.

Fig. 2.4 – Tabela cu informațiile de administrare

În această tabelă sunt conținute informațiile care se transmit de către administrator persoanei care face rezervarea. Această tabelă este accesată de administrator în momentul confirmării sau infirmării rezervării.

Fig. 2.5 – Tabela cu informațiile despre camere

În această tabelă sunt conținute informațiile cu privire la prețul și denumirea camerelor. Această tabelă este accesată de administrato pentru modificarea numărului de camere, denumire și preț.

Fig. 2.6 – Tabela cu informațiile despre rezervare

În această tabelă sunt conținute informațiile care sunt solicitate în momentul completării formularului de rezervare. Aceste informații sunt transmise administratorului care gestionează rezervările camerelor.

Descrierea front – end – ului

Front – end – ul 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.

3.1 Prima pagină

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

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

Fig. 3.1 – Header – ul website – lui

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

Î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 mediul online (Facebook, Instagram, Youtube,..).

Fig. 3.2 – Footer-ul website-ului

Ca și conținut al primei pagini putem menționa o imagine reprezentativă a orașului Brașov, un videoclip care prezintă hotelul și un carusel de imagini reprezentând camerele din hotel, turismul zonal și delicatesele din cadrul restaurantului hotelului.

Fig. 3.3 – Videoclip (Youtube) 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) astfel:

<div class="embed-responsive embed-responsive-16by9 wowload fadeInLeft"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ n6fd2a8SEs" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe></div>

Fig. 3.4 – Carusel de imagini

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

3.2 Pagina “Despre”:

Această pagină, după cum apare și în titlu conține o mică descriere a hotelului care stârnește imaginația cititorului, ducând-ul cu gândul la un loc de relaxare.

Fig. 3.5 – Pagina “Despre”

3.3 Pagina “Camere”:

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

Fig. 3.6 – Pagina “Camere”

În momentul accesării butonului detalii, se deschide o altă pagină, în care se regăsesc în detaliu caracteristicile camerei.

Fig. 3.7 – Exemplu de cameră

Fig. 3.8 – Caracteristici cameră

3.4 Pagina “Galerie”:

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

Fig. 3.9 – Galerie imagini – obiective turistice

Fig. 3.10 – Galerie imagini – restaurant

3.5 Pagina “Rezervare”:

Această pagină, conține mai multe câmpuri care sunt necesare a fi completate, î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.11 – Formular rezervare – prezentare generală

Fig. 3.12 – Formular rezervare – engleză

În momentul în care se accesează butonul exemplificat prin steagul țării, este accesat un cod un PHP care va prelua informațiile dintr-un fișier cu terminația php, cu ajutorul căruia va fi tradus acest formular.

Fig. 3.13 – Cod PHP – traducere formular

Fig. 3.14 – Fișier folosit la traducere

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

Fig. 3.15 – Selectarea camerei

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

Fig. 3.16 – Câmp Check-in

Fig. 3.17 – Câmp Check-out

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

Fig. 3.18 – Cod sursă Datepicker – http://www.eyecon.ro/bootstrap-datepicker/

Prin aplicarea butonului de rezervare, formularul completat este transmis administratorului site-ului, care va confirma sau infirma rezervarea.

3.6 Pagina “Contact”:

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

Fig. 3.19 – 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) astfel:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9933.46088443 0251!2d-0.13301252240929382!3d51.50651527467666!2m3!1f0!2f0!3f0!3m2!1i1024!2i76 8!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C+ UK! 5e0!3m2!1sen!2snp!4v1414314152341" width="100%" height="300" frameborder="0" ></iframe>

Prin completarea câmpurilor, și transmiterea acestora, administratorul va recepționa un mail cu mesajul utilizatorului.

Fig. 3.20 – Formular contact

3.7 Pagina “Administrare”:

Această pagină, conține câmpurile de acces la partea de administrare a rezervărilor făcute la hotel.

Fig. 3.21 – Formular login administrator

Descrierea back – end – ului

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” suntem direcționați pe pagina principală de administrare.

Fig. 4.1 – Prima pagină – administrare

Î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. 4.2 – 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” .

Fig. 4.3 – Administrare – setări

Fig. 4.4 – Administrare – lista nouă

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. 4.5 – Administrare – toată lista de rezervări

În cadrul acestei pagini putem să transmitem vizitatorului un mesaj de confirmare, prin apăsarea butonului de “Trimite mail”.

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

Prin accesare butonului de administrare, apare un meniu nou care ne oferă mai multe opțiuni: delogare, Profilul meu și setări.

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

Fig. 4.8 – Administrare – profilul meu

În cadrul profilului se pot schimba detaliile contului precum și parola.

Concluzii

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] https://www.code-it.ro/html-5-si-css3-designul-la-un-nou-nivel/ – articol: Programare web, webdesign, autor:Ștefănescu Marian, consultat la 10.01.2017 & 17.06.2017

[7] http://webblog.bestwebimage.ro/2014/03/ce-inseamna-design-responsive/ – articol Ce inseamna design responsive?, autor:Roxana Olaru, – 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