Licenta Scrisa 1 [305907]

UNIVERSITATEA ”TITU MAIORESCU” DIN BUCUREȘTI

FACULTATEA DE INFORMATICĂ

LUCRARE DE LICENȚĂ

PORTAL TURISTIC PENTRU

PROMOVARE

COORDONATOR ȘTIINȚIFIC:

Conf.univ.dr.ing. Mironela PÎRNĂU ABSOLVENT: [anonimizat]

2016

CUPRINS

1. Introducere……………………………………………………………………………………………………………..

1.1. Importanta subiectului………………………………………………………………………………….

1.2. Descrierea portalului…………………………………………………………………………………….

1.3. Descrierea tehnologiilor utilizate……………………………………………………………………

6. Concluzii………………………………………………………………………………………………………………..

7. Bibliografie…………………………………………………………………………………………………………….

8. Anexe…………………………………………………………………………………………………………………….

CAPITOLUL 2

PROIECTAREA GENERALĂ A PORTALULUI

2.1. [anonimizat] a călători, de a [anonimizat] a și le însuși. Dacă în trecut o persoană obișnuită era limitată la a vedea o parte foarte mică a Terrei, [anonimizat], posibilitățile de a descoperi și de a vizita locuri străine sunt mult mai multe.

Să ne gândim la toate atracțiile turistice prezente astăzi. Sunt atât de numeroase încât o [anonimizat]. [anonimizat]. [anonimizat], perioada, [anonimizat] i se prezintă anumite oferte care se potrivesc cel mai bine dorinței utilizatorului respectiv.

Portalul Travelfinder deține o abordare inovatoare asupra prezentării catalogului de oferte. Caracteristica diferentiatoare a acestuia este inversarea perspectivei tradiționale de găsire a ofertei cele mai avantajoase luată după preț (orientarea către ofertă) în aceea de ghid în alegerea unei destinații și a unei date optime de vacanță în funcție de resursele și gusturile utilizatorului (orientarea către client).

Această aplicație este perfectă pentru persoanele care nu sunt decise asupra destinației și datei de plecare. Aceasta le va ușura căutarea de oferte interesante în locații diverse și le va oferi o perspectivă globală asupra posibilelor destinații, a atractivității și a distribuției prețurilor în funcție de diverse date de plecare.

2.2. Tema portalului

Portalul Travelfinder este o soluție ideală pentru a ușura căutarea făcută de utilizatori. Această versiune de Travelfinder este destinată celor care au un program încărcat și nu au timp să își caute o destinație și celor care sunt deschiși noilor posibilități de vizitare pe care Travelfinder le oferă. Site-ul este structurat în 4 [anonimizat] 4 tipuri de utilizatori diferiți:

Administrator global : [anonimizat]area și ștergerea lor, adăugarea de țări, orașe, evenimente, atracții turistice, oferte, poze, editarea și ștergerea acestora, adăugarea grupurilor de utilizatori din admin, editarea acțiunilor și restricțiilor făcute de aceștia și ștergerea lor, adăugarea utlilizatorilor în admin și ștergerea lor, editarea rezervărilor și achitarea lor

Manager : are acces la editarea paginilor în site, adăugarea de țări, orașe, evenimente, atracții turistice, oferte, poze, editarea și ștergerea acestora, editarea rezervărilor și achitarea lor

Utilizator logat : are posibilitatea de a edita contul său, poate vizualiza rezervările făcute de acesta, poate modifica anumite părți ale unei rezervări în cazul în care rezervarea nu a fost achitată deja, cât și de a anula rezervarea atâta timp cât nu a fost achitată

Utilizator nelogat : are posibilitatea de a face rezervări, fără a le putea schimba sau anula mai apoi

Cele 4 tipuri de utilizatori au privilegii diferite, așa cum este prezentat mai sus. Administratorul global are acces la toate funcționalitățile adminului și prin el trec toate informațiile care trebuie adăugate, modificate sau șterse. Managerul are anumite restricții date de către administratorul global, neputând adăuga, modifica sau șterge utilizatori sau grupuri de utilizatori. Pe partea de frontend, utilizatorul logat își poate modifica datele personale cât și anumite părți ale unei rezervări făcute greșit sau chiar ștergerea ei dacă nu a fost achitată între timp de către manager în admin. Utilizatorul nelogat poate doar să facă rezervări.

Acest portal este foarte util atât persoanelor nedecise asupra destinației de vacanță, cât și persoanelor care doresc să viziteze alte destinații turistice mai puțin mediatizate.

2.3. Planificarea structurii portalului

Portalul este structurat în 3 părți: partea de administrare, partea de interacțiune cu utilizatorul și baza de date. În partea de administrare au acces doar administratorul global și utilizatorii asignați de acesta pentru a gestiona modulele și informațiile din ele. În partea de interacțiune cu utilizatorul este prezentată interfața grafică prin care se alege o destinație, o ofertă și se rezervă acea ofertă, cât și paginile de logare și înregistrare. În partea de baze de date sunt stocate toate datele adăugate din admin sau din interfața grafică.

2.3.1. Platforma de Administrare

Fișierul predefinit pentru intrarea în admin dacă nu ai fost logat în prealabil este dashboard.php, ceea ce înseamnă că atunci când accesăm serverul prin comanda http://localhost/travelfinder/admin/, serverul va trimite fișierul de bază și anume dashboard.php, url-ul schimbându-se în următorul: http://localhost/travelfinder/admin/dashboard/login (Fig 2.1).

Fig. 2.1 Pagina de logare in admin

Prima pagină a adminului este pagina de autentificare. Pentru a putea intra pe prima pagină a platformei de administrare, trebuie întâi să te autentifici. Acest lucru este imposibil dacă datele personale nu au fost introduse în prealabil de către administratorul global. În felul acesta, nu orcine poate intra să modifice datele și ofertele afate în platformă. Odată datele introduse corect, și anume Username și Parolă, autentificarea a avut loc și ești redirecționat către pagina principală a platformei de administrare. Am configurat url-ul astfel încât atunci când un utilizator autentificat folosește link-ul http://localhost/travelfinder/admin, acesta să îl ducă pe pagina de Dashboard (panoul de control) (Fig 2.2).

Fig 2.2 Dashboard

Dashboard-ul este conceput astfel încât să fie ușor de urmărit și de utilizat. În partea stânga sus puteți observa numele portalului. Sub el se află navigarea platformei, în care se află modulele ce conțin informațiile care sunt prezentate apoi și în site-ul web, cât și informațiile despre utilizatorii adminului. În dreapta numelui este un buton de comutare a navigării din deschis în închis. Dashboard-ul prezintă de asemenea informații despre fiecare modul în parte și câte informații sunt adăugate în fiecare dintre ele, cât și un link care trimite utilizatorul în modulul respectiv.

Modulele navigării sunt următoarele:

Dashboard

Rezervări oferte

Administrare pagini

Administrare oferte

Administrare țări

Administrare orașe

Administrare agenții

Utilizatori

Grupuri de utilizatori

În afară de Dashboard și de rezervări oferte, fiecare modul are două opțiuni, acelea fiind de adăugare și de a vedea lista cu datele din acel modul. Conținutul secțiunilor cât și opțiunea de adăugare le voi explica în Capitolul 4, în Prezentarea Portalului.

2.3.2. Interfața grafică

Prima pagină a interfeței grafice este index.php. La fel ca mai sus, am configurat calea astfel încât comanda care accesează serverul pentru a trimite pagina principală este http://localhost/travelfinder, fără a mai fi nevoită să mai adaug /index.php (Fig. 2.3).

Fig. 2.3 Pagina principală

In partea stângă observați căutarea, care are mai multe câmpuri:

Plecare din:

Durată vacanță:

Buget:

Tip vacanță și activități:

Această căutare afișează în timp real orașele pe harta alăturată unde există oferte care se potrivesc specificațiilor date de utilizator în căutare. În partea din dreapta se află linkurile de autentificare și înregistrare. În josul paginii sunt afișate un număr de 11 oferte care l-ar mai putea interesa pe utilizator, un newsletter la care se poate abona pentru a primi informații despre ultimele oferte adăugate în website cât și un footer cu link-uri către alte pagini ale website-ului, parteneri și social media.

În afară de pagina principală, portalul mai este alcătuit din:

pagină de autentificare

pagină de înregistrare

pagină de oraș

pagina de evenimente

pagină de atracții turistice

pagină de ofertă

pagină de rezervare

pagină de cont

pagină de text

pagină de contact

Fiecare pagină va fi explicată în capitolele 4 si 5 de la implementare și până la modul în care a fost creată și ce conține.

2.3.3. Baza de date

Am realizat baza de date folosind programul Wamp Server. Pentru a ajunge la baza de date a portalului, am folosit aplicația phpMyAdmin. Pentru deschiderea ei, se pornește Wamp-ul, iar apoi se tastează în caseta de text a browser-ului folosit comanda http://localhost/phpmyadmin. În partea stângă a aplicației se va alege din arborele cu baze de date, baza de date "travelfinder". Odată selectată aceasta, următoarele tabele vor apărea:

agencies

ci_sessions

contact

countries

offers

offers_categories

offers_gallery

offers_types

offers _user_reservation

offers _user_reservation_pers

towns

towns_attractions

towns_events

towns_gallery

users

users_groups

users_groups_access

Fiecare tabelă are un id cu index-ul primary key (cheie primară) și autoincrementat, astfel încât id-ul este unic, este folosit pentru a identifica tabela și numărul este incrementat automat de către baza de date la fiecare nouă linie introdusă. Astfel se pot face referințe și concatenări între tabele fără riscul de a exista două câmpuri identice. Fiecare tabelă în parte are câmpuri care stochează datele introduse în acea tabelă. Spre exemplu, la users_groups, există două câmpuri: group_id și group_name. Group_id este primary key și autoincrementat, și conține numerele id-ului grupurilor de utilizatori. Group_name conține numele grupului de utilizatori asignat câmpului group_id. Astfel, grupul superadmin-ului, adică administratorul global, are id-ul 11 și numele Superadmin (Fig. 2.4).

Fig. 2.4 Baza de date

Unele tabele conțin mult mai multe câmpuri decât în exemplul prezentat mai sus, altele, ca și ci_sessions, creat de către Framework, nu conțin niciun câmp. Voi vorbi mai mult despre conținutul fiecărei tabele în Capitolul 4.2.

Baza de date este necesară pentru a stoca informațiile adăugate atât din Admin cât și din Interfața grafică. Dacă aceasta nu ar exista, singurele informații care ar fi existat pe website ar fi fost cele adăugate direct din cod, asftel website-ul neputând fi unul dinamic, utilizatorul având o interacțiune minimă cu interfața. Baza de date este imperativă pentru a stoca informații despre oferte, utilizatori, rezervări și toate celelalte informații aflate în portal.

După cum observați, structura aplicației Travelfinder este complexă, pentru a asigura utilizatorilor o funcționalitate completă și ușoară, indiferent dacă aceștia sunt cei ce întroduc informații în admin sau cei care fac căutări și rezervări în website.

CAPITOLUL 3

TEHNOLOGII UTILIZATE

3.1. Introducere în tehnologiile utilizate

INTERNETUL

Internetul, uneori numit pur și simplu "Net", este un sistem global de rețele de calculatoare; o rețea de rețele în care utilizatorii unui calculator pot, în cazul în care au permisiunea necesară, să primească informații de la orice alt calculator (și uneori să vorbească direct cu utilizatorii altor calculatoare).

În zilele noatre, Internetul este o parte fundamentală a vieții fără de care nu ne-am putea lipsi. Ne-am învățat cu posibilitatea de comunicare instantanee, cumpărături făcute din comfortul casei noastre, posibilitatea de a avea acces la informații diverse și în timp real, de a lucra de acasă pentru companii locale sau străine și multe altele. Internetul este văzut drept "cea mai mare descoperire a secolului XX" prin prisma faptului ca a simplificat viețile a milioane, poate miliarde de oameni în întreaga lume.

Accesul la Internet oferă posibilități infinite unei persoane. Aceasta poate face atât călătorii virtuale în lumea întreagă, prin poze, video-uri și hărți online, cât și practic, analizând oferte de turism și cumpărând online vacanța dorită, toate acestea în timp ce utilizatorul stă în fața calculatorului, tabletei sau altui dispozitiv ce este legat la Internet.

Internetul a fost creat de către Agenția Avansată de Proiecte de Cercetare (Advanced Research Projects Agency-ARPA) a Guvernului SUA în 1969 și a fost cunoscut inițial sub numele de ARPANet. Scopul inițial a fost de a crea o rețea care ar permite utilizatorilor unui computer de cercetare de la o universitate să "vorbească" cu calculatoare de cercetare de la alte universități.

Internetul a cunoscut o dezvoltare foarte rapidă. Dacă în 1985, aproximativ 2000 de calculatoare erau legate la Internet, majoritatea fiind utilizate de laboratoare de cercetare ale Guvernului American și de către universități, din 1994 a fost extins pentru a servi milioane de utilizatori pentru o multitudine de scopuri în toate colțurile lumii.

Într-o chestiune de câțiva ani, Internetul s-a consolidat într-o platformă foarte puternică, care a schimbat pentru totdeauna modul în care facem afaceri și modul în care comunicăm. Internetul, ca niciun alt mijloc de comunicare, a furnizat un mediu internațional în lume. Internetul a devenit sursa universală de informații pentru milioane de oameni, acasă, la școală sau la locul de muncă, preconizându-se o creștere din ce în ce mai mare în următorii ani (Fig. 3.1).

Fig. 3.1 Cresterea Utilizării Internetului

Dacă în anii '80 rețeaua de rețele era legată la un număr foarte restrâns de calculatoate, în prezent a ajuns să fie folosită de mai mult de 3 miliarde de oameni din întreaga populație de 7.2 miliarde de oameni, numărul celor care folosesc Internetul crescând cu circa 200 milioane pe an. Această creștere s-a datorat lui Tim Berners-Lee în 1989, care a creat primul prototip al World Wide Web (WWW) la CERN în Geneva.

Internetul în România s-a dezvoltat relativ recent, însă a cunoscut o creștere tehnologică nemai-întâlnită, România situându-se pe locul 3 mondial la viteza Internetului (Fig. 3.2).

Fig. 3.2 Top țări la viteza de Internet

Această viteză se datorează mai multor factori. Unul dintre ei este acela că numărul de utilizatori din România este mult mai scăzut comparativ cu alte țări (rata internetului de penetrare este de aproximativ 50%). Un al doilea factor este cel al competiției. În trecut, existau așa-numitele rețele de cartier, care aveau un număr redus de clienți și care în felul acesta puteau furniza viteze mari la Internet. Odată cu apariția marilor companii de telecomunicații, aceștia au fost nevoiți să descopere metode de a furniza viteze mari la Internet pentru a putea atrage clienții.

Tot din pricina competiției și a supra-aglomerării pieței, România este una din cele mai ieftine furnizoare de Internet. Cu toate acestea, românii nu sunt educați să exploateze Internetul ca pe o sursă infinită de informații și de oportunități. Acest lucru se datorează faptului că România este împărțită între o lume a gadgeturilor și a tehnologiei, și o lume care nu știe de existența Internetului, aflată la sate și răspândită pe tot teritoriul României.

Marile companii românești au înțeles însă importanța Internetului și al utilizării acestuia. Elementul de bază al economiei prezente este comerțul electronic, acesta neputând exista fără Internet. Prin aceasta rețea de rețele, companiile își pot îmbunătăți eficiența și stoca informațiile mult mai ușor și cu mai puține erori, se pot extinde pe piața globală, reduc costurile de mediatizare, cresc alternativele de vânzare cât și spațiul în care se vinde, și este o cale ușoară și rapidă de a se face cunoscuți și de a furniza informații despre companie și serviciile ei.

Din păcate, resursele informaționale în rețeaua română nu sunt foarte semnificative. Din această cauză, informațiile căutate de cele mai multe persoane sunt găsite pe site-uri străine, exportul de informații român fiind mult mai mic decât importul de informații străin.

WORLD WIDE WEB, PAGINI WEB ȘI SERVERE WEB

Fără îndoială, cel mai dinamic și mai de succes dintre serviciile Internet este World Wide Web.

Prin World Wide Web (WWW) înțelegem că este un spațiu informațional open source (sursă deschisă) în care documente și alte resurse web sunt identificate prin URL-uri (Uniform Resource Locator), interconectate prin linkuri hypertext și pot fi accesate prin intermediul Internetului. World Wide Web a fost inventat de către omul de știință englez Tim Berners-Lee în 1989. El a scris primul browser web în 1990 în timp ce era angajat la CERN în Elveția.

A devenit cunoscut ca fiind simplu Web-ul. World Wide Web a fost esențial pentru dezvoltarea epocii de informare și reprezintă principalul instrument pe care miliarde de oameni îl folosesc pentru a interacționa pe Internet.

Tim Berners-Lee a dezvoltat trei tehnologii esențiale odată cu World Wide Web:

un sistem de identificare unic și global pentru resursele de pe Web cât și în alte părți, Identificatorul Universal de Documente (UDI), mai târziu cunoscut ca și Localizator Uniform de Resurse (URL) și Identificatorul Uniform de Resurse (URI);

limbajul de publicare Hypertext Markup Language (HTML);

Hypertext Transfer Protocol (HTTP);

Un Localizator Uniform de Resurse (URL), denumit în mod obișnuit și informal adresă web, este o referință la o resursă web care specifică locația de pe o rețea de calculatoare și un mecanism de recuperare a acesteia. O adresă URL este un tip specific de URI, cu toate că mulți oameni folosesc cei doi termeni alternativ. O adresă URL implică mijloacele necesare pentru a avea acces la o resursă indicată, ceea ce nu este valabil pentru orice URI. URL-urile apar cel mai frecvent la pagini web de referință (http), dar sunt de asemenea folosite pentru transferul de fișiere (FTP), e-mail (mailto), acces la baze de date (JDBC), precum și multe alte aplicații.

Hypertext Transfer Protocol, prescurtat HTTP, este protocolul de bază utilizat de către World Wide Web. HTTP definește modul în care mesajele sunt formatate și transmise, precum și ce servere Web și browsere ar trebui să ia ca răspuns la diverse comenzi. De exemplu, atunci când scrieți o adresă URL în browser, această acțiune trimite defapt o comandă HTTP către serverul de web pentru a prelua și transmite pagina Web solicitată.

HTTP este de asemenea un protocol stateless (nu se menține o stare a sesiunii de la o cerere la altă) și asincron (un document HTML este încărcat de browser, de îndată ce părți ale acestuia sunt disponibile).

HTTP este utilizat de serverele web pentru a comunica pagini web pentru browserele web. HTTP este utilizat când browser-ul web se conectează la un server web, cere o pagină de web de pe server și descarcă pagina. Acest protocol este standardul comun care permite oricărui browser să se conecteze la orice server, oriunde în lume (Fig. 3.3).

Fig. 3.3 Protocolul HTTP

Un Web Server (server web) este un program care utilizează HTTP pentru a servi fișierele care formează pagini Web către utilizatori, ca răspuns la cererile lor, care sunt transmise de către clienții HTTP ale calculatoarelor. Computerele și aparatele dedicate acestui mecanism pot fi numite de asemenea Servere Web.

Fiecare server Web are o adresă IP și, eventual, un nume de domeniu. De exemplu, dacă introduceți URL-ul http://localhost/travelfinder în browser, acest lucru trimite o cerere către serverul Web care găzduiește site-ul. Serverul preia mai apoi pagina numită index.php, care este setată ca fiind pagina principală a site-ului, și o trimite browser-ului pentru a fi afișată.

Orice computer poate fi transformat într-un server Web prin instalarea software-ului de server și conectarea aparatului la Internet. Procesul este un exemplu al modelului client/server. Toate calculatoarele care găzduiesc site-uri web trebuie să aibă programe de Server Web. Serverele Web care conduc piața sunt, printre altele, Apache (serverul web cel mai răspândit pe scară largă), Microsoft Information Server (IIS) și nginx (pronunțat engine X) de la NGNIX.

Orice Server își face disponibile serviciile sale la Internet prin folosirea unor porturi numerotate, câte unul pentru fiecare serviciu care este disponibil pe server. De exemplu, în cazul în care o mașină server execută un server Web și un server FTP (File Transfer Protocol), serverul Web va fi în mod tipic disponibil pe portul 80, iar serverul FTP va rula pe portul 21. Clienții se conectează la un serviciu cu o anumită adresă de IP și pe un port specific.

O pagină Web (webpage) este un document scris în mod obișnuit în Hypertext Markup Language (HTML), care poate fi accesat prin Internet sau altă rețea folosind un browser de Internet. O pagină Web este accesată prin introducerea unei adrese URL și poate conține text, grafice și hyperlink-uri către alte pagini web și fișiere. Prima pagină Web a fost creată la CERN de Tim Berners-Lee pe 6 august, 1991.

Un site Web se referă la o locație centrală, care conține mai mult de o pagină Web. Într-un cuvânt, un site Web este o sumă de mai multe pagini Web. De exemplu, http://localhost/travelfinder este considerat un site Web, deoarece cuprinde mai multe pagini diferite.

Fig. 3.4 Schema URL

În exemplul de mai sus al unei adrese URL (Fig. 3.4), pagina Web este "edit.php" și este întotdeauna ultima parte a adresei URL. Pentru URL-uri care nu au la final extensiile .htm, .html, .php, .cgi, .pl, sau altă extensie de fișier, serverul încarcă implicit pagina Web index.php din acel director. De exemplu, la adresa URL a paginii de contact a portalului (http://localhost/travelfinder/contact), nu există nici o pagină Web. În acest caz, fișierul predefinit index este încărcat din directorul contact/.

TEHNOLOGII WEB CLIENT-SERVER

Arhitectura client-server este o arhitectură de rețea în care fiecare calculator sau proces în rețea este fie un client, fie un server. Serverele sunt calculatoare puternice sau procese de gestionare dedicate unității de disc (servere de fișiere), imprimante (servere de imprimare) sau trafic de rețea (servere de rețea). Clienții sunt PC-uri sau stații de lucru pe care furnizorii pot rula aplicații. Clienții se bazează pe servere pentru resurse, cum ar fi fișiere, dispozitive și chiar putere de procesare.

Modelul de computare client-server este o structură de aplicații distribuite care partiționează sarcini sau sarcini de lucru între furnizorii de resurse sau de servicii, acestea fiind numite servere, și cereri de servicii, numiți clienți. Deseori, clienții și serverele comunică printr-o rețea de calculatoare pe hardware-uri separate, dar atât clientul cât și serverul pot exista în același sistem. Un server gazdă rulează una sau mai multe programe de server care împărtășesc resursele lor cu clienții. Un client nu împărtășește niciuna dintre resursele sale, în schimb solicită conținutul unui server sau o funcție de serviciu. Prin urmare, clienții inițiază sesiuni de comunicare cu serverele care așteaptă cererile primite.

Caracteristica client-server descrie relația dintre programele care au cooperat într-o aplicație. Componenta de server asigură o funcție sau un serviciu la unul sau mai mulți clienți, care inițiază cereri de astfel de servicii.

Clienții și serverele fac schimb de mesaje printr-un model de mesagerie cerere-răspuns: Clientul trimite o cerere, iar serverul returnează un răspuns. Acest schimb de mesaje este un exemplu de comunicare inter-process. Pentru a comunica, calculatoarele trebuie să aibă un limbaj comun, iar acestea trebuie să respecte niște reguli astfel încât atât clientul cât și serverul știu la ce să se aștepte. Limbajul și regulile de comunicare sunt definite într-un protocol de comunicații. Toate protocoalele client-server operează în stratul de aplicație (application layer). Protocolul de application-layer definește modelele de bază ale dialogului. Pentru a formaliza schimbul de date și mai mult, serverul poate pune în aplicare un API(cum ar fi un serviciu web). Un API este un strat de abstractizare pentru resurse ca baze de date și software-uri personalizate. Prin restricționarea comunicării într-un format de conținut specific, acesta facilitează parsarea. Prin abstractizarea accesului, acesta facilitează schimbul de date cross-platform.

Un server poate primi cereri de la mai mulți clienți într-o perioadă foarte scurtă de timp. Deoarece calculatorul poate efectua un număr limitat de sarcini în orice moment, se bazează pe un sistem de programare pentru a acorda prioritate cererilor primite de la clienți pentru a le acoperi pe toate în timp. Pentru a preveni abuzul și pentru a maximiza timpul de funcționare, software-ul de server limitează modul în care un client poate utiliza resursele serverului. Chiar și așa, un server nu este imun la abuz. Un refuz de atac de serviciu exploatează obligația unui server de a procesa solicitările prin bombardarea lor cu solicitări fără încetare. Acest lucru împiedică capacitatea serverului de a răspunde la solicitările legitime.

CATEGORIILE TEHNOLOGIILOR WEB

Limbaje de markup

"Markup"(marcaj) se referă la ideea de a lua conținut simplu web de text și adăugarea de indicații privind modul în care textul ar trebui formatat. Hypertext Markup Language (HTML) este modul uzual de a marca text pentru site-urile web. Cascading Style Sheets (CSS) poate fi folosit cu HTML pentru a specifica formatarea pentru diferite elemente HTML în contexte diferite. XML (Extensible Markup Language) este o altă tehnologie de marcare web, dar este mai mult utilizată pentru schimbul de date în web între diferite software-uri sau întreprinderi, mai degrabă decât pentru crearea de pagini web. HTML este suportat de către toate browserele (prin definiție), iar CSS este suportat de către aproape toate versiunile noi de browser.

Script-uri orientate către client

"Script" este un termen de programare general pentru programe software scurte bazate pe text. Scripturile orientate către client sunt încorporate în paginile web HTML, care execută în software-ul web browser-ului utilizatorului (execută pe partea de "client" a arhitecturii client-server în loc de serverul web). Aceste script-uri pot fi utilizate pentru a face calcule simple, verifica datele, afișa informații calculate pe o pagină, răspunde mișcării mouse-ului și click-urilor făcute de acesta, pune noi ferestre de browser pe ecran, arăta și ascunde texte și imagini, schimba stilurile textelor, crea meniuri drop-down și efecte similare. Scripturile de limbaj orientate către client nu au funcționalitatea completă care ar fi disponibilă într-un limbaj de programare cu drepturi depline (cum ar fi C sau Java), și pentru motive de securitate, ele sunt limitate la a face calcule și acțiuni bazate pe conținut, marcaj și date încorporate din pagina HTML pe care este utilizatorul, împreună cu informațiile introduse de către utilizator în formularele din acea pagină, și reacțiile la lucruri pe care utilizatorul le face în fereastra browser-ului (cum ar fi mutarea mouse-ului).

Cel mai frecvent utilizat limbaj de script orientat către client este JavaScript, fiind susținut pe cele mai multe browsere relativ recente; din păcate, fiecare browser are propria variație de JavaScript, deoarece nu există standarde globale pentru limbă. Alte limbaje de scripturi orientate către client, care sunt susținute doar de un număr limitat de browsere, sunt VBScript și JScript. De obicei, este nevoie de un dezvoltator de software pentru a scrie script-uri orientate către client, dar multe dintre ele pot fi cumpărate sau descărcate deja pre-scrise, pentru a putea fi utilizate și modificate de către web designeri mai puțin cunoscători.

Script-uri orientate către server

Uneori, este de dorit să avem pagini web care să fie generate dinamic dintr-o bază de date de fiecare dată când un utilizator le accesează, în funcție de autentificarea utilizatorului sau generate din intrările anterioare ale utilizatorului într-un formular web. Proprietarul site-ului dorește de obicei să păstreze ascunse de vizitator datele și logica generării paginii, astfel că un script orientat către client nu este de dorit (deoarece scripturile orientate către client sunt bazate pe text, încorporate în pagina HTML în sine și pot opera doar pe date care sunt de asemenea încorporate în pagina HTML, ele nu păstrează nici datele și nici programul secret). De aceea, practica obișnuită este să se stocheze datele într-un program de baze de date care rulează pe un server web (sau poate pe un server de baze de date separat), și să genereze paginile HTML pe care utilizatorul le vede cu ajutorul unor programe sau scripturi care rulează de asemenea pe server.

Aceste așa-zise scripturi și programe "orientate către server" pot fi destul de complexe și pot fi scrise în orice limbaj de programare. Când serverul web primește o cerere (de la browser-ul utilizatorului) pentru o anumită pagină, acesta pasează cererea către un script sau program orientat către server, care poate să adune informații dintr-o bază de date, citește informațiile înregistrate de utilizator în formulare, face manipulări de text sau efectuează calcule numerice; programul pune mai apoi rezultatul în format HTML. Rezultatul final este pasat înapoi către serverul web, care îl trimite către browser-ul utilizatorului pentru a fi afișat ca o pagină de HTML standard.

Cele mai utilizate programe de baze de date sunt MySQL și Microsoft SQLServer; unele pagini web folosesc de asemenea Oracle, PostgreSQL și alte baze de date. Și, în timp ce programele orientate către server pot fi scrise în orice limbaj de programare, cele mai utilizate limbaje sunt PHP, Perl și ASP/Visual Basic/C#; unele programe orientate către server sunt de asemenea scrise în JSP/Java, C++ și alte limbaje. De obicei, un dezvoltator software este nevoit să scrie scripturi orientate către server, dar unele scripturi pre-scrise pot fi cumpărate sau downloadate pentru a fi utilizate de către web designeri mai puțini tehnici (cum ar fi scripturi pentru cărucioare de cumpărături, cărți de oaspeți, formulare de email, bloguri și forumuri).

Servere Set-Up

Serverele web au setări și preferințe care pot fi folosite pentru a controla accesul la fișiere (incluzând protecția parolelor), ce vede utilizatorul dacă fac cerere către o pagină inexistentă, și alte comportamente. Serverul web Apache utilizează un fișier text denumit ".htaccess" pentru a stoca preferințele.

3.2. HTML

Ted Nelson definește în anul 1965 hypertext-ul (text non-linear) ca fiind un "material scris sau grafic interconectat într-o manieră complexă care în mod convențional nu poate fi reprezentat pe hârtie. El poate conține cuprinsuri ale propriului său conținut și relațiile dintre diverse părți componente; poate de asemeni să conțină adnotări, adăugiri și note de subsol pentru cei care doresc să îl examineze."

Hyper Text Markup Language (HTML) este limbajul standard de marcare folosit pentru a crea pagini web. Împreună cu CSS și JavaScript, HTML este o tehnologie de bază utilizată atât pentru a crea pagini web, cât și pentru a crea interfețe de utilizator pentru aplicații de mobil și de web. Browserele web pot citi fișierele HTML și le transformă în pagini web vizibile sau sonore. HTML descrie structura semantică a unui website laolaltă cu indicii pentru prezentare, făcându-l astfel un limbaj de marcare, mai degrabă decât un limbaj de programare.

HTML oferă utilizatorilor mijloacele necesare pentru:

publicări de documente cu headere, tabele, fotografii, liste, texte

regăsiri de informații cu ajutorul hyperlink-urilor

formulare pentru tranzacții cu servere la distanță sau pentru activități specifice comerțului

includere de video-uri, sunete, calcule tabelare și alte aplicații în documente

HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language). SGML este un meta-limbaj. Nu este niciodată tastat, dar SGML este folosit pentru a descrie un limbaj structurat specific tipului de document care definește modul în care documentele specifice pot fi structurate.

HTML este de asemenea un limbaj bazat pe etichete (tag-uri) și le folosește pentru a identifica elementele sale. Crearea unui document HTML ține pur și simplu de a pune conținut în interiorul etichetelor relevante. De exemplu, dacă trebuie creat un paragraf pentru text, se folosește eticheta <p> pentru a marca începutul paragrafului cu text, și </p> pentru a termina paragraful. Defapt, întregul document HTML în sine se află în interiorul a două etichete-începe cu <html> și odată ce întregul document este terminat, se închide cu </html>.

La fel ca exemplele de mai sus, majoritatea elementelor HTML sunt identificate ca o pereche de etichete: prima etichetă (cea de deschidere) marchează începutul unui element și a doua etichetă (cea de închidere) marchează capetele acestui element. Cu toate acestea, există câteva elemente HTML care funcționează foarte bine și cu o singură etichetă. Aceste elemente nu au niciun conținut și prin urmare, tot ce au nevoie este eticheta de deschidere. Din moment ce ei nu anexează niciun conținut, ele sunt de asemenea cunoscute ca elemente goale, elemente nule sau elemente singulare.

În ceea ce privește structura, un document HTML are două etichete principale: head și body (cap și corp). Secțiunea de head este identificată prin eticheta pereche <head> și </head> și conține meta-informații ale paginii HTML (cum ar fi titlul paginii). Secțiunea de body este identificată prin eticheta pereche <body> și </body> și cuprinde conținutul propriu-zis al paginii HTML. Cu toate acestea, etichetele head și body sunt opționale. Astfel, este posibil ca o pagină HTML să fie validă fără să aibă etichetele <head>, </head>, <body> și </body>. Browserele nu afișează etichetele HTML, dar le folosesc pentru a interpreta conținutul paginii. Etichetele și numele atributelor sunt case-insensitive. Spre exemplu, elementul de cap <head> poate fi scris și <HEAD> și ar însemna același lucru. La fel și la atribute.

Exemplu: Travelfinder

În acest exemplu se poate vedea structura de bază a unui document standard HTML (Fig. 3.5):

Fig. 3.5 Structura unui document HTML si ce afiseaza

(Textul între <html> și </html> descrie pagina web, iar textul între <body> și </body> este conținutul vizibil al paginii. Textul de marcare "<title>Travelfinder</title>" definește titlul paginii de browser.)

Acest limbaj de marcare poate încorpora script-uri scrise în alte limbi, cum ar fi JavaScript care afectează comportamentul paginilor web HTML. Marcajul HTML poate face referință browser-ului, de asemenea, și la Cascading Style Sheets (CSS), pentru a defini aspectul și dispunerea de text și a altor elemente. World Wide Web Consortium (W3C), mentinător atât al standardelor HTML cât și ale celor CSS, a încurajat utilizarea CSS-ului peste HTML-ul de prezentare încă din anul 1997.

3.3. CSS3

CSS (Cascading Style Sheets) este folosit alături de HTML pentru a defini stiluri pentru paginile web, inclusiv proiectarea, amenajarea și variațiile de afișare pentru diferite dispozitive și dimensiuni de ecran.

HTML nu a fost destinat să conțină etichete pentru formatarea paginilor web, ci pentru a descrie conținutul unei pagini web, cum ar fi :

<h1>Portal turistic pentru promovare</h1>

<p>Numele portalului este Travelfinder.</p>

Când etichetele precum <font> și atributele de culoare și stil au fost adăugate în HTML3.2, lucrurile au devenit foarte complicate pentru dezvoltatorii web. Crearea de site-uri de dimensiuni mari, în cazul în care s-ar fi adăugat fonturi și culori pentru fiecare pagină, ar fi devenit un proces lung, greu și costisitor. Pentru a rezolva această problemă, World Wide Web Consortium (W3C) a creat CSS.

Împreună cu HTML și JavaScript, CSS este o piatră de temelie în tehnologia folosită de cele mai multe site-uri pentru a crea pagini web care să atragă privirea și interfețe de utilizator pentru aplicații web și de mobil.

CSS este destinat în primul rând pentru a permite separarea conținutului documentului de prezentarea documentului, inclusiv aspecte cum ar fi layout-ul, culorile și fonturile . Această separare a îmbunătățit accesibilitatea conținutului, oferă mai multă flexibilitate și control în specificarea caracteristicilor de prezentare , face posibil ca mai multe pagini HTML să împartă aceeași formatare prin specificarea CSS-ului relevant într -un fișier .css separat , și reduce complexitatea și repetarea în conținutul structural.

Un rule-set CSS (regulă-setată CSS) constă într-un selector și un bloc de declarație (Fig. 3.6):

Fig. 3.6 Selector si bloc de declaratie CSS

Selectorul ghidează către elementul HTML căruia i se atribuie stilul. Blocul de declarație conține una sau mai multe declarații separate de punct și virgulă (";"). Fiecare declarație conține un nume de proprietate și o valoare, separată de două puncte ( ":"). Blocurile de declarație sunt întotdeauna scrise între acolade ("{ }").

Selectorii CSS sunt folosiți pentru a "găsi" (sau selecta) elemente HTML după numele elementului, id, clasă, atribut, și altele. Selectorii sunt de trei tipuri:

Selector de element

Selector de id

Selector de clasă

Selectorul de element găsește elemente după numele acestora. Spre exemplu, putem selectă toate elementele "body" de pe o pagină, scriind o singură dată stilurile pentru aceste elemente:

body{ background: #f6f6f6; font-family: 'Source Sans Pro', sans-șerif; }

În acest exemplu, toate elementele "body" vor avea background-ul gri deschis, fontul va fi Source Sans Pro și acesta va fi sans-șerif.

Selectorul de id folosește atributul de id al unui element HTML pentru a selecta un element specific. ID-ul unui element trebuie să fie unic într-o pagină, astfel încât selectorul id este folosit pentru a găsi un element unic.

Pentru a selecta un element cu un id specific, se scrie la începutul id-ului elementului dorit un diez ("#"):

#contact-map h2{ margin-bottom:35px; font-size:3.4rem; color:#5a5a5a;}

Regula de stil de mai sus va fi aplicată elementului HTML cu id = "contact-map h2".

Selectorul de clasă selectează elemente cu un atribut de clasă specifică. Pentru a face acest lucru, notația selectorului de clasă este punct ("."), urmat de numele clasei. Se poate specifica și faptul că doar anumite elemente HTML pot fi afectate de o clasă. Elementele HTML pot face referire de asemenea la mai mult de o singură clasă:

.blue .active{ background: #0faba2; }

În exemplul de mai sus, toate elementele care vor conține clasa class="blue active" vor fi de culoare albastru intens.

Dacă mai mulți selectori au aceleași stiluri, aceștia se pot grupa într-un singur rând, separați de virgulă, pentru a minimiza codul scris:

a,a:hover{ color:#000; text-decoration: none;}

Atunci când un browser citește o foaie de stil, acesta va formata documentul HTML în conformitate cu informațiile din foaia de stil. Astfel, există 3 moduri de a introduce o foaie de stil:

Foaie de stil externă

Foaie de stil internă

Stilul inline

Foaia de stil extern oferă posibilitatea de a schimba aspectul unui întreg site prin scrierea stilurilor într-un singur fișier.

Fiecare pagină trebuie să includă o trimitere la fișierul extern prin intermediului elementului <link>. Acest element <link> merge în interiorul etichetei <head>:

<link rel="stylesheet" href="<?php echo $baseurl ?>client/frontend/css/main.css" />

Acest link îi atribuie paginii HTML conținutul fișierului main.css și îi arată calea către acel fișier.

O foaie de stil externă poate fi scrisă în orice editor de text. Fișierul nu trebuie să conțină tag-uri HTML și trebuie salvat cu extensia ".css".

Foaia de stil internă poate fi folosită dacă o singură pagină are un stil unic. Ele sunt definite prin elementul <style> scris interiorul etichetei <head> unei pagini HTML:

<head><style> body { background-color: #f9f9f9; } </style></head>

În această pagină doar, culoarea de fundal va fi # f9f9f9 și nu #f6f6f6, care este culoarea inițială.

Un stil inline poate fi utilizat pentru a aplica un stil unic unui singur element. Pentru a utiliza stiluri inline, se adaugă atributul "style" la elementul ales. Atributul style poate conține orice proprietate CSS:

<img src="<?php echo $baseurl . $this->config->item('adm_agencies_path') . $item->logo?>" style="max-height: 100px;"/>

Acestei imagini i se dă atributul de a avea o înălțime de maxim 100px în momentul în care aceasta este adăugată.

În momentul în care avem în cod mai mult de două moduri de stilizare, se pune întrebarea care dintre stiluri va fi utilizat în pagina HTML. În general vorbind, se poate spune că toate stilurile vor "cădea în cascadă" într-o nouă foaie de stil "virtuală", unde numărul 1. are cea mai mare prioritate:

Stilul inline (în interiorul unui element HTML)

Foi de stil externe si interne (în secțiunea de <head>)

Prestabilirea browser-ului

3.4. PHP

PHP (acronim recursiv pentru PHP: Hypertext Preprocessor) este un limbaj de programare cu care se pot face o mulțime de lucruri: evaluează datele din formular trimise de la browser, construiește conținut web personalizat pentru a fi utilizat de browser, este conectat la o bază de date (sau mai multe), și chiar trimite și primește cookie-uri (mici pachete de date pe care browser-ul le utilizează pentru a-și aminti lucruri, cum ar fi dacă sunteți logat pe Travelfinder).

PHP este de asemenea un limbaj de scripting open source utilizat pe scară largă, care este potrivit în special pentru dezvoltarea aplicațiilor web și poate fi integrat în HTML.

<!DOCTYPE HTML>
<html>
    <head>
        <title> Travelfinder </title>
    </head>
    <body>
        <?php
            echo "Acesta este un script PHP";
        ?>
    </body>
</html>

În loc de o mulțime de comenzi pentru a afișa HTML (așa cum este cazul în C sau Perl), paginile PHP conțin HTML cu un cod încorporat care face ceva (în exemplul de mai sus, afișează textul"Acesta este un script PHP "). Codul PHP este scris între instrucțiuni de procesare speciale: "<?php" și "?>" care permit să facă schimbarea între limbajul PHP și limbajul HTML, acest lucru numindu-se "modul PHP".

Ceea ce deosebește PHP de un script client-side precum JavaScript este faptul că in PHP, codul este executat pe server, generând HTML care este apoi trimis către client. Clientul primește mai apoi rezultatul rulării acelui script, dar nu vede și codul de bază. PHP ne dă posibilitatea de a configura serverul Web pentru a procesa toate fișierele HTML cu PHP, în felul acesta neexistând nici o cale prin care utilizatorii să vadă codul de bază.

Cel mai bun lucru în utilizarea PHP este acela că este extrem de ușor de învățat de către începători, însă oferă în același timp multe caracteristici avansate pentru un programator profesionist.

PHP este axat în principal pe scripturi server-side, astfel încât poate fi utilizat ca oricare alt program CGI, cum ar fi să colecteze datele de formular, să genereze pagini cu conținut dinamic sau să trimită și să primească cookie-uri.

Există 3 domenii principale unde sunt folosite scripturi PHP:

Scripturi server-side

Scripturi in linie de comandă

GUI

Scripturile server-side sunt cele mai importante pentru PHP și este scriptul folosit pentru realizarea acestui portal. Pentru a folosi acest domeniu este nevoie de 3 lucruri: un analizator PHP (CGI sau un modul de server), un server Web și un browser Web. Altfel spus, pentru a rula pe un server Web, trebuie să existe o conexiune PHP instalată, iar pentru a accesa afișarea programului PHP este nevoie de un browser Web care să vadă pagina PHP prin intermediul serverului.

CGI (Common Gateway Interface) este un mod standard pentru serverele Web să interacționeze cu programe executabile instalate pe un server care generează pagini Web dinamice. Astfel de programe sunt cunoscute sub numele de scripturi CGI sau pur și simplu CGI. Ele sunt, de obicei, scrise într-un limbaj de scripting, dar pot fi scrise în orice limbaj de programare.

Scripturile în linie de comandă sunt scripturi PHP care rulează fără un server sau browser. Este nevoie doar ca analizatorul PHP să îl folosească în acest fel. Aceste scripturi pot fi de asemenea folosite pentru sarcini simple cum ar fi procesarea de text.

Scrierea aplicațiilor grafice (GUI). PHP nu este, probabil, cel mai bun limbaj pentru a crea o aplicație desktop cu o interfață grafică de utilizator, dar dacă este folosit cum trebuie, se pot utiliza anumite caracteristici avansate ale PHP în aplicațiile client-side. De asemenea, se pot scrie aplicații cross-platform în acest fel, adică aplicații ce rulează pe mai multe platforme diferite.

PHP poate fi utilizat pe toate sistemele de operare majore, inclusiv Linux, multe variante Unix, Microsoft Windows, Mac OS W, RISC OS și altele. PHP este susținut de asemenea de majoritatea serverelor moderne, cum ar fi Apache, IIS și altele. PHP funcționează fie ca un modul, fie ca un procesor CGI.

Astfel, PHP oferă libertatea de a alege sistemul de operare și serverul Web dorit. Programul oferă de asemenea posibilitatea de a utiliza programarea procedurală, cât și cea orientată către obiect, sau ambele.

PHP nu este limitat în afișarea HTML-ului. Abilitățile PHP includ afișarea imaginilor, a fișierelor PDF și chiar filme Flash. Se poate afișa cu usurință orice text, cum ar fi XHTML și orice alt fișier XML. PHP poate genera automat aceste fișiere și le poate salva în sistemul de fișiere în loc să le printeze, formând astfel un cache server-side pentru conținutul dinamic.

Unul dintre cele mai puternice și mai importante caracteristici ale PHP-ului este suportul pentru o gamă largă de baze de date. Scrierea unei baze de date pentru o pagină Web este incredibil de simplă, folosindu-se de obicei una dintre extensiile specifice de baze de date (de exempu, pentru mysql).

Etichetele PHP

Atunci când PHP parsează un fișier, acesta caută tag-uri de deschidere și de închidere ale PHP-ului, și anume "<?php" si "?>", care îi spun programului să interpreteze doar codul dintre etichete. Parsarea în acest mod permite PHP-ului să fie încorporat în tot felul de documente, deoarece tot ce este în afara acestor etichete este ignorat.

PHP permite, de asemenea, scrierea cu tag-ul deschis scurt <? (acest lucru este descurajat însă, deoarece este disponibil doar dacă este activat utilizând directiva fișierului de configurare short_open_tag php.ini, sau în cazul în care PHP a fost configurat cu opțiunea –enable-short-tags).

Dacă un fișier este format numai din cod PHP, este de preferat ca în acest caz să se omită tag-ul de închidere al PHP-ului de la sfârșitul fișierului. Acest lucru previne liniile albe accidentale care sunt adăugate după eticheta PHP de închidere, ceea ce poate provoca efecte nedorite deoarece PHP va începe să afișeze buffere de ieșire atunci când nu există nicio intenție din partea programatorului de a trimite afișări în acel moment în script.

Ieșirea din HTML

Totul în afara unei perechi de etichete de deschidere și închidere este ignorat de către parser-ul PHP. Acest lucru permite fișierelor PHP să aibă conținut mixt și să fie încorporate în documente HTML, spre exemplu pentru a crea șabloane.

<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-tag"></i> <?php echo $action ?> agentie</h3>
</div>

În acest exemplu, PHP citește și afișează doar informația pe care a găsit-o între etichetele de deschidere și închidere, și anume va afișa valoarea conținută de variabila $action, în acest caz "Adăugare", restul fiind afișat de browser.

Acest lucru funcționează așa cum era de așteptat, deoarece atunci când interpretatorul PHP lovește un tag de închidere ?>, începe să afișeze tot ce a găsit până în momentul în care lovește un nou tag de deschidere <?php. Excepție de la regulă este în momentul în care instrucțiunea PHP se află în mijlocul unei declarații condiționale, caz în care interpretatorul va aștepta rezultatul înainte de a lua o decizie pentru a sări peste ceva.

Tipuri de primitive

PHP suportă 8 tipuri de primitive:

Patru tipuri de scalare: boolean, întreg, float (sau double), șir

Două tipuri de compuși: mulțime, obiect

Două tipuri speciale: resource, NULL

Variabile PHP

Variabilele în PHP sunt reprezentate printr-un semn dolar ("$") urmat de numele variabilei respective. Trebuie reținut faptul că numele variabilei este case-sensitive.

Numele de variabile respectă aceleași reguli ca și alte etichete în PHP. Un nume de variabilă valid începe cu o literă sau un underscore ("_") urmat de orice număr de litere, numere sau underscore-uri. Variabila $this este o variabilă specială care nu poate fi atribuită.

În mod implicit, variabilele sunt întotdeauna atribuite ca valoare. Acest lucru înseamnă că, atunci când se atribuie o expresie unei variabile, întreaga valoare a expresiei originale este copiată în variabila de destinație.

Exemplu:

"Agencies.php"

public function add()
{
//instrucțiuni
$dates['action'] = 'Adaugare';
//instrucțiuni

$this->load->view($this->config->item('admin_path') . 'agencies/form', $dates);
}

"form.php"

<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-tag"></i> <?php echo $action ?> agentie</h3>
</div>

În acest exemplu se arată cum variabilei $action i se atribuie valoarea "Adăugare" în fișierul Agencies.php și este apoi utilizată în fișierul form.php pentru a afișa "Adăugare agenție" în browser. (Fig.3.7).

Fig. 3.7 Adăugare agenție

Constante PHP

O constantă este un identificator (nume) pentru o valoare simplă. După cum sugerează și numele, această valoare nu poate fi schimbată în timpul execuției scriptului. O constantă este din sine case-sensitive. Prin convenție, identificatorii constantelor sunt întotdeauna litere mari.

Numele unei constante urmează aceleași reguli ca orice etichetă în PHP. Un nume de constantă validă începe cu o literă sau underscore, urmată de orice număr de litere, cifre sau underscoruri.

Expresii PHP

Expresiile sunt cele mai importante pietre de temelie ale PHP. În acest limbaj de programare, aproape tot ce se scrie este o expresie. Cel mai simplu mod și cel mai precis de a defini o expresie este "orice lucru care are o valoare este o expresie".

Cele mai multe forme de expresii sunt constante și variabile. Spre exemplu, atunci când scriu $dates['action']='Adaugare', asignez 'Adaugare' în variabila $dates['action']. "Adăugare" este o expresie cu valoarea 'Adaugare'. După acest lucru, este de așteptat ca valoarea lui $dates['action'] să fie de asemenea 'Adaugare', astfel încât, dacă aș scrie $dates['action']=$dates['exemplu'], mă aștept ca scriptul să se comporte ca și cum aș fi scris direct $dates['exemplu']='Adaugare'. Cu alte cuvinte, $dates['action'] este de asemenea o expresie cu valoarea "Adăugare".

Un exemplu mai complex de expresii este scrierea funcțiilor:

public function index()
{
$dates['metatitle'] = "Administrare Agentii | " . $this->config->item('admin_website_name');
$dates['list'] = $this->db->get('agencies')->result();
$this->load->view($this->config->item('admin_path') . 'agencies/list', $dates);
}

Funcțiile sunt expresii care conțin valoarea returnării valorilor din interiorul ei. În exemplul de mai sus, ceea ce returnează funcția este încărcarea în template-ul agencies/list.php a variabilei $dates, ceea ce înseamnă că valoarea funcției index() este $dates. De obicei, funcțiile nu returnează o valoare statică, ci calculează sau lucrează acea valoare.

Superglobale PHP

Superglobalele sunt variabile încorporate care sunt întotdeauna disponibile în toate scopurile (statice sau globale) dintr-un script. Nu este nevoie de a crea o variabilă globală $a pentru putea le accesa în sau cadrul funcțiilor sunt metodelor.

Aceste variabile superglobale referă:

$GLOBALS-în toate variabilele disponibile și scope-ul global

$_SERVER-informații de mediu ale serverului metoda executării

$_GET-un array asociativ de variabile dat scriptului curent prin intermediul parametrilor URL

$_POST-un array asociativ de variabile dat scriptului curent prin în HTTP POST

$_FILES-un array asociativ de elemente încărcate metoda scriptul curent prin în HTTP POST

$_COOKIE-un array asociativ de variabile dat scriptului curent prin HTTP Cookies

$_SESSION-un array asociativ care conține variabile de sesiune ale scriptului curent

$_REQUEST-un array asociativ care conține și mod predefinit conținutul la $_GET, $_POST metoda $_COOKIE

$_ENV-un array asoviativ de variabile dat scriptului curent prin de mediu

Metodele GET si POST

Sunt două modalități prin care clientul browser-ului poate trimite informații la serverul Web:

prin Metoda GET

prin Metoda POST

Metoda GET trimite informațiile criptate ale utilizatorului odată cu cererea paginii. Pagina și informațiile codificate sunt separate prin caracterul "?":

http://www.test.com/index.htm?name1=value1&name2=value2

PHP oferă superglobala $_GET că și array asociativ pentru a avea acces la toate informațiile trimise utilizând metoda GET. Aceasta produce un șir lung de caractere care apare în câmpul de scriere al browser-ului. Este limitată la a trimite până la 1024 de caractere. Această metodă nu trebuie niciodată utilizată în cazul în care există parole sau alte informații sensibile care urmează să fie trimise la server. De asemenea, nu poate fi utilizat pentru a trimte serverului date binare, cum ar fi imagini sau documente Word. Datele transmise pein metoda GET pot fi accesate folosind variabila de mediu QUERY_STRING.

Metoda POST transferă informația prin intermediul headerelor HTTP. Informația este codificată așa cum s-a descris în cazul metodei GET și pus într-un antet numit QUERY_STRING.

PHP oferă superglobala $_POST ca și array asociativ pentru a avea acces la toate informațiile trimise utilizând metoda POST. Aceasta nu are nicio restricție privind mărimea datelor ce urmează să fie transmise. Ea poate fi utilizată pentru a trimite atât date ASCII, cât și binare. Datele transmise prin POST sunt trecute prin headerul HTTP, în acest caz securitatea depinde de protocolul HTTP.

Exemplu:

if(isset($_POST['save']))
{ //instrucțiuni }

În acest exemplu se verifică dacă datele din formular au fost trimise prin POST prin intermediul butonului de 'save', iar dacă rezultatul este TRUE, se trece la executarea instrucțiunilor.

Variabila PHP $_REQUEST însumează conținutul atât al variabilelor $_GET și $_POST, cât și variabilei $_COOKIE. $_REQUEST poate fi folosit pentru a obține rezultatul datelor trimise de formular atât prin metoda GET cât și prin metoda POST.

3.5. JavaScript

JavaScript (JS) este un limbaj de programare ușor, interpretat, cu funcții de prima clasă. El este cunoscut cel mai bine drept limbajul de scripting pentru paginile Web. JS este un limbaj de scripting bazat pe prototipuri, multi-paradigm, care suportă atât stiluri de programare orientate pe obiect, cât și imperative și funcționale.

Deoarece HTML și CSS nu sunt limbaje de programare, în 1995 Brendan Eich de la Netscape a creat un program de scripting pentru browser. În acest fel, când fișierele erau transmise de la un calculator la altul, pe lângă HTML și CSS se mai trimitea și un cod care făcea interacțiunea mult mai plăcută și mai dinamică. Acest limbaj de programare era JavaScript.

Se pot face destul de multe cu JavaScript, cum ar fi carusele, galerii pentru imagini, layout-uri fluctuante și răspunsuri la click-urile pe butoane. Se pot crea de asemenea jocuri, grafice animate 2D și 3D, aplicații complete bazate pe baze de date și multe altele.

JS este în sine un program destul de compact, dar flexibil, iar dezvoltatorii au scris o mulțime de instrumente pentru a avea acces la o cantitate de funcționalități suplimentare, cu foarte puțin efort. Acestea includ:

API-uri (Application Programming Interfaces) construite în browserele Web, care oferă diverse funcționalități cum ar fi crearea de HTML în mod dinamic și setarea de stiluri CSS, generarea de grafice 3D și sample-uri audio și altele

API-uri terțe pentru a permite dezvoltatorilor să integreze funcționalitatea în site-urile lor din alte proprietăți, cum ar fi Facebook sau Twitter

Framework-uri și biblioteci terțe care pot fi aplicate la HTML pentru a permite construcția rapidă de site-uri și aplicații

JavaScript rulează pe partea de client al Web-ului, care poate fi folosit pentru a proiecta sau programa modul în care paginile se comportă la apariția unui eveniment. JS este ușor de învățat și de asemenea este un limbaj de scripting puternic, utilizat la scară largă pentru a controla comportamentul paginilor Web.

Spre deosebire de concepțiile populare greșite, JavaScript nu este Java. Acestea sunt două limbaje de programare complet diferite cu funcții diferite. Într-un cuvânt, JavaScript este un limbaj dinamic de scripting care suportă construcția de obiecte bazate pe prototip. Sintaxa de bază este similară în mod intenționat cu cea a lui C++ și Java, pentru a reduce numărul de concepte noi necesare învățării limbajului. Construcțiile limbajului, cum ar fi if-urile, buclele for și while, blocurile switch și try… catch, toate funcționează aproximativ la fel ca în limbajele de mai sus.

JavaScript funcționează atât ca un limbaj procedural cât și ca un limbaj orientat către obiect. Obiectele sunt create prin programare în JavaScript, prin atașarea unor metode și proprietăți obiectelor de altfel goale în timpul rulării, spre deosebire de definițiile clasei sintactice comune în limbajele compilate cum ar fi C++ și Java. Odată ce un obiect a fost construit, acesta poate fi folosit ca model (prototip) pentru crearea de obiecte similare.

Capacitățile dinamice ale JavaScriptului includ construcție de obiecte executabile, liste de parametri variabili, funcții de variabile, crearea de scripturi dinamice, introspecția obiectelor, și recuperare de cod sursă (programele JavaScript pot decompila corpurile funcționale înapoi în textul lor sursă).

Exemplu JavaScript (Fig. 3.8):

Fig. 3.8 Exemplu JavaScript

Funcția începe cu semnuul "$" care este un selector de jQuery ce permite selectarea oricărui element de pe pagină. Astfel, dacă id-ul "#range6" există, se aplică în acest id funcția "ionRangeSlider" cu parametrii: min, max, type, step, postfix, prettify, hasGrid și valorile acestora.

3.6. JQuery

jQuery este o bibliotecă JavaScript ușoară, în genul "scrie puțin și face mult". Scopul jQuery-ului este de a face utilizarea JavaScript mult mai ușoară. Acesta ia o mulțime de sarcini comune, care necesită multe linii de cod în JavaScript pentru a putea fi realizate și le înfășoară în metode care pot fi apelate cu o singură linie de cod.

jQuery simplifică, de asemenea, o mulțime de lucruri complicate de JavaScript, cum ar fi apeluri Ajax și manipulare DOM.

Biblioteca jQuery conține următoarele caracteristici:

manipulare HTML/DOM

manipulare CSS

metode si evenimente HTML

efecte si animații

AJAX

alte utilități

jQuery pune la dispoziție de asemenea și plugin-uri sau extensii. Un plugin jQuery este o nouă metodă utilizată pentru a extinde obiectul prototip al jQuery. Extinzând obiectul prototip, acesta permite tuturor metodelor jQuery să moștenească orice metodă adăugată. În acest fel, nu se încarcă biblioteca principală, iar plugin-urile pot fi încărcate doar când este nevoie de ele. Cel mai cunoscut set de plugin-uri este jQuery UI (jQuery User Interface). Acesta oferă extensii pentru interacțiuni de bază, teme de culori și altele.

3.7.MySQL

MySQL este un sistem open-source de management al bazelor de date (RDBMS). În Iulie 2013, a fost numit al doilea cel mai utilizat SGBD și cel mai utilizat model client-server și open-source. Este numit după fiica creatorului său Michael Widenius, My, iar "SQL"este abrevierea de la "Structured Query Language". MySQL a fost produs, deținut și sponsorizat de către compania suedeză MySQL AB, care este deținută în prezent de Oracle Corporation. MySQL este distribuit sub termenii de Licență Publică Generală GNU.

O bază de date este o colecție de date structurată. Pentru a o putea accesa, modifica, șterge sau adăuga informații suplimentare, este nevoie de un sistem de gestiune al bazelor de date (SGBD) cum este MySQL.

O bază de date relațională este o bază de date ce memorează informațiile primite în tabele separate în loc de a le memora într-un singur tabel. Acest model permite creșterea vitezei, accesibilității datelor și flexibilității lucrului cu datele. Tabelele sunt legate între ele prin relații, astfel putându-se crea combinații între date din tabele diferite.

MySQL este o alegere populară de bază de date pentru utilizarea în aplicații web și este o componentă centrală în stiva software open-source de aplicații web numită LAMP (acronim pentru "Linux, Apache, MySQL, PHP").

MySQL este oferit sub două forme: versiunea open-source MySQL Community Server și versiunea proprietară Enterprise Server. Diferența dintre cele două este că MySQL Enterprise Server are o serie de extensii care se instalează drept plugin-uri, însă în rest ambele versiuni sunt aproximativ la fel, împărțind același cod sursă.

Cu toate că MySQL a început ca o alternativă de nivel scăzut la bazele de date puternice, acesta a evoluat rapid și treptat. Este în continuare cel mai frecvent SGBD utilizat pentru implementări mici și medii cu un singur server, fie ca un component într-o aplicație Web bazată pe LAMP, fie ca un server de baze de date. O mare parte din ce atrage la MySQL este acordată de simplitatea sa relativă și ușurința de utilizare, care este dat de un ecosistem de instrumente open-source, cum ar fi phpMyAdmin.

MySQL poate fi utilizat împreună cu PHP, rezultând astfel un cross-platform (o aplicație poate fi dezvoltată în Windows și să ruleze pe o platformă Unix).

PHP este unul dintre limbajele middleware (software care pune la dispoziție anumite servicii aplicațiilor software care nu sunt accesibile din sistemul de operare). În alte cuvinte, PHP, împreună cu alte limbaje precum Perl, ASP, ColdFusion, etc, lucrează cu serverul Web pentru a interpreta cererile făcute de browser, le procesează, apoi îi spune serverului ce trebuie să trimită înapoi ca și răspuns browser-ului după ce a terminat de interacționat cu alte programe de server pentru a duce cererile la bun sfârșit (Fig. 3.9).

Fig. 3.9 Tranzactie cu baza de date Web

MySQLi si PDO

PHP 5 și versiunile mai noi de atât pot lucra cu o bază de date MySQL utilizând:

extensia MySQLi ("i" vine de la "improved" – "îmbunătățit")

PDO (PHP Data Objects)

Versiunile mai vechi de PHP utilizau de asemenea și extensia MySQL. Această extensie a fost dezaprobată în anul 2012.

Atât MySQLi cât și PDO au avantaje și dezavantaje. PDO poate lucra cu 12 sisteme de baze de date diferite, în timp ce MySQLi funcționează numai cu bazele de date MySQL. Astfel, dacă ești nevoit să schimbi sau să utilizezi altă bază de date, procesul este ușurat cu PDO. Tot ce trebuie schimbat este string-ul de conexiune și câteva query-uri. Nu se recomandă MySQLi pentru acest proces, deoarece codul ar trebui rescris de la zero, incluzând toate query-urile. Ambele sunt orientate către obiect, MySQLi oferind în plus și un API procedural. De asemenea, ambele suportă Prepared Statements (Declarații Pregătite). Prepared Statements protejează de injectările SQL și sunt foarte importante pentru securitatea aplicațiilor Web.

Structura bazei de date MySQL

MySQL este o bază de date relațională, ceea ce ii permite sa împartă datele primite în mai multe tabele pentru o mai ușoară folosire a datelor. MySQL este deci structurat astfel:

tabele – baza de date este împărțită în tabele cu date; tabelele au un nume, un număr de coloane pentru tipurile de informații introduse și linii pentru înregistrările făcute în tabelă

coloane – denumite și câmpuri sau atribute, coloanele au un nume unic tabelei și fiecare coloană are un tip de dată asociat

linii – liniile sunt înregistrările făcute în tabela respectivă cu informațiile corespunzătoare coloanelor

valori – înregistrarea făcută la intersecția dintre linie și coloană; acestea trebuie să aibă tipul de date corespunzător coloanelor

chei – sunt câmpuri ce au o valoare unică, corespunzătoare fiecărei înregistrări dintr-un tabel; există mai multe tipuri de chei, printre care: Primary Key, Unique Key, Foreign Key, Compound Key, Index

Exemplu (Fig. 3.10, Fig. 3.11, Fig. 3.12):

Fig. 3.10 Baza de date Fig. 3.11 Înregistrări tabela Agencies

Fig. 3.12 Structura tabela Agencies

Relații MySQL

În MySQL se pot defini trei relații majore:

Relație una-la-una – Aceasta apare când există exact o înregistrare dintr-o primă tabelă care corespunde cu exact altă înregistrare într-o tabelă relațională (Fig 3.13)

Fig 3.13 Relație una-la-una între tabelele users_groups și users_groups_access

Relație una-la-mai-multe – O înregistrare dintr-o tabelă este legată la mai multe înregistrări din altă tabelă

Relație mai-multe-la-mai-multe – Mai multe linii din prima tabelă sunt legate la mai multe linii din a doua tabelă

Tipuri de câmpuri MySQL

Există trei tipuri de date care apar în coloanele MySQL: tip dată, tip numeric și tip șir de caractere.

Tipurile pentru dată și timp. Acestea sunt utilizate pentru a preciza modul cum se vor înregistra datele de timp. Acestea sunt: DATE (YYYY-MM-DD), TIME (HH:MM:SS), DATETIME (YYYY-MM-DDHH:MM:SS), TIMESTAMP (acesta oferă posibilitatea de a adăuga date automat, el fiind compus de obicei din 14 caractere-YYYYMMDDhhmmss).

Tipurile numerice. Acestea sunt de două tipuri, întregi și float. Tipurile de date numerice întregi sunt utilizate pentru numere rotunde, pozitive și negative, într-un anumit interval. Acestea sunt: TINYINT, SMALLINT, MEDIUMINT, INT, INTEGER, BIGINT. Tipurile de date numerice flotante sunt date care nu sunt exacte, care sunt numere scrise cu virgulă, etc. Acestea sunt: FLOAT, DOUBLE, REAL, DECIMAL, NUMERIC.

Tipurile de șir de caractere în MySQL sunt: CHAR, VARCHAR, BINARY, BLOB, TEXT, SET și ENUM. Valorile CHAR și VARCHAR sunt similare, dar diferă în modul în care sunt stocate și găsite. Ele diferă de asemenea și prin lungimea maximă de caractere care este reținută. Valorile BINARY sunt similare cu CHAR și VARCHAR, diferența fiind că ele conțin șiruri binare în loc de șiruri de caractere. Valorile BLOB sunt tratate ca șiruri binare (șiruri de octeți). Ei nu au niciun set de caractere, sortarea și compararea lor se bazează pe valorile numerice alte octeților în valorile coloanei. Valorile TEXT sunt tratate ca șiruri nonbinare (șiruri de caractere). Ele au un set de caractere, iar valorile sunt sortate și comparate pe baza interclasarii setului de caractere. Tipul ENUM este un șir de obiecte cu o valoare selectată dintr-o listă de valori la momentul creării coloanei. Tipul SET este un șir de obiecte care poate avea zero sau mai multe valori, fiecare fiind selectată în momentul creării coloanei.

Comenzi de bază in MySQL

Comenzile în MySQL nu sunt case-sensitive, adică ele pot fi scrise atât cu litere mari cât și cu litere mici fără să îi schimbe efectul. Câteva dintre comenzile de bază în MySQL sunt:

CREATE DATABASE-creează o bază de date

CREATE TABLE-creează o tabelă

INSERT-adaugă câmpuri de înregistrări într-o tabelă

UPDATE-modifică valorile câmpurilor dintr-o tabelă

SELECT-selectează date din baza de date pentru a le folosi; este cea mai complexă comandă din MySQL, cu ea putându-se face foarte multe operațiuni

DROP TABLE/DATABASE-închide un tabel sau o bază de date

SHOW-listează tabelele care există în baza de date respectivă

ALTER TABLE-modifică coloanele dintr-o tabelă

DELETE TABLE/DATABASE-șterge o tabelă sau o bază de date

JOIN-alătură înregistrările mai multor tabele; sunt trei tipuri de JOIN: INNER JOIN, LEFT JOIN, RIGHT JOIN

Conexiunea cu MySQL

Înainte de a utiliza toate acțiunile de mai sus și de a avea acces la datele din baza de date, trebuie mai întâi să avem posibilitatea de a ne conecta la server (Fig. 3.14):

Fig. 3.14 Conectarea proiectului la baza de date "travelfinder"

În imaginea de mai sus se poate vedea cum am conectat baza de date "travelfinder" la proiectul Travelfinder. În fișierul database.php din directorul config, am modificat hostname = 'localhost', username = 'root', password = '', database = 'travelfinder' și dbdriver = 'mysqli'. După aceste modificări, baza de date poate fi folosită spre a fi modificată prin ajutorul codului.

3.8. Bootstrap

Bootstrap este un framework de frontend gratuit utilizat pentru o dezvoltare web mai rapidă și mai ușoară. Acesta include template-uri bazate pe CSS și HTML pentru tipografie, formulare, butoane, navigare, modale, carusele și multe altele, precum și plugin-uri de JavaScript opționale.

Inițial denumit Twitter Blueprint, Bootstrap a fost dezvoltat de Mark Otto și Jacob Thornton la Twitter ca un framework pentru a menține consecvența între instrumentele interne. Înainte de Bootstrap, erau folosite diverse biblioteci pentru dezvoltarea interfeței, ceea ce a dus la inconsistențe și o sarcină de întreținere ridicate.

Una din multele utilizări ale Bootstrap-ului este acela de a crea website-uri responsive într-un mod ușor și eficient.

Web Design-ul Responsive este cel care utilizează CSS și HTML pentru a scala, ascunde, minimiza, lărgi sau mișca conținutul site-ului pentru a se vedea și a arăta bine pe orice rezoluție. Definit inițial de Ethan Marcotte în "In a List Apart", designul responsive răspunde la nevoile utilizatorilor și la dispozitivele pe care le utilizează. Layout-ul se schimba în funcție de dimensiunea și capacitatea dispozitivului utilizat. Astfel, același conținut al unui site poate fi redat într-o singură coloană pe rezoluția de mobil, pe două coloane pe rezoluția de tabletă și full width pe rezoluția de laptop și calculator.

Apariția designului responsive a ușurat munca a numeroși dezvoltatori web care, odată cu explozia de dispozitive cu rezoluții diferite, erau nevoiți să implementeze două, trei sau mai multe designuri pentru fiecare rezoluție în parte. Spre exemplu, existau pentru același site 3 designuri, unul pentru desktop-uri, unul pentru tablete și încă unul pentru mobil. Apariția designului responsive a însemnat sărirea acestor pași și implementarea unui singur design pentru toate rezoluțiile. Acest lucru este posibil datorită celor 3 caracteristici ale sale:

grila fluidă permite ca fiecare element să poată fi scalat în procente în loc de unități absolute precum pixeli, points, etc.

imaginile flexibile sunt de asemenea scalate în unități relative, astfel încât să existe coeziune între elemente și să nu iasă din elementul de container odată ce rezoluția se schimbă

media queries permit paginii Web să folosească diferite reguli de stil CSS bazate pe caracteristicile dispozitivului pe care apare site-ul, în alte cuvinte să se folosească de dimensiunea rezoluției browser-ului pentru a afișa site-ul în conformitate cu acea dimensiune

Designul Web devine din ce în ce mai important, în acest moment cantitatea de trafic mobil reprezentând mai mult de jumătate din traficul total de internet. Această tendință a devenit atât de răspândită, încât Google a început să stimuleze rating-urile site-urilor care sunt mobile-friendly (mobil-prietenoase) dacă acestea au fost accesate de pe un dispozitiv mobil.

Bootstrap este compatibil cu cele mai recente versiuni ale browserelor, deși unele nu sunt acceptate pe toate platformele. Începând cu versiunea 3.0, Bootstrap a adoptat o filozofie de design mobile-friendly, punând preț în felul acesta pe designul responsive standard.

Bootstrap este modular și constă în principal dintr-o serie de stylesheet-uri Less care implementează diferite componente ale setului de instrumente, Un stylesheet denumit bootstrap less include componentele pentru stylesheet. Dezvoltatorii pot adapta fișierul Bootstrap în sine, selectând componentele pe care vor să le utilizeze în proiect.

Utilizarea limbajului de stylesheet-uri Less permite utilizarea de variabile, funcții și operatori, selectori imbricați și altele.

Sistemul de grilă și design responsive vine în mod standard cu un layout de lățime 1170px. În mod alternativ, dezvoltatorii pot utiliza un layout cu lățime variabilă. Pentru ambele cazuri, setul de instrumente are patru variante pentru a putea fi utilizate pe mai multe rezoluții și dispozitive: telefoane mobile, portret și landscape, tablete și calculatoare cu rezoluție mică și mare. Fiecare variantă ajustează lățimea coloanelor.

Sistemul de grile funcționează în felul următor:

există trei mari componente-containere, rânduri și coloane

containerele – ".container" este folosit pentru lățime fixă și ".container-fluid" pentru lățime totală (centrează conținutul site-ului și ajută la alinierea elementelor grilei)

rândurile – grupuri orizontale de coloane care asigură alinierea corespunzătoare a coloanelor

coloanele – clase care indică numărul de coloane utilizate din cele 12 per rând. Astfel, dacă doresc să am 3 coloane de lățime identică, voi folosi ".col-sm-4"

lățimea coloanelor "width" este setată în procente, astfel încât ele să fie întotdeauna fluide și să se redimensioneze în relație cu elementul părinte

coloanele au padding orizontal "padding" astfel încât să se formeze spațiere între coloane

există 5 niveluri de grile, câte una pentru fiecare punct de rupere responsive (ex. ".col-sm-4" se aplică pe dispozitive mici, medii, mari și extra-mari)

Bootstrap oferă un set de stylesheet-uri care dau definiții de stil de bază pentru toate componentele cheie ale HTML. Acestea asigură un aspect modern și uniform pentru formatarea de text, tabele și elemente de formular.

3.9. Framework

CodeIgniter este un framework pentru dezvoltatori care construiesc aplicații folosind PHP. Scopul său este acela de a permite să se dezvolte proiecte mult mai rapid decât dacă s-ar scrie un cod de la zero, prin furnizarea unui set bogat de bibiloteci pentru sarcinile necesare în mod obișnuit, precum și o interfață simplă și o structură logică pentru a avea acces la aceste biblioteci. CodeIgniter permite concentrarea în mod creativ pe proiect prin minimizarea cantității de cod necesar pentru o anumită sarcină.

CodeIgniter este licențiat sub licență MIT, astfel încât să poată fi folost în mod liber. De asemenea, este un framework light weight (greutate ușoară). Sistemul de bază necesită doar câteva biblioteci. Acest lucru este în contrast puternic cu multe framework-uri care necesită mult mai multe resurse. El este din această cauză foarte rapid.

URL-urile generate de CodeIgniter sunt curate și prietenoase motorului de căutare. În loc de a folosi standardul "șir de interogare" al abordării URL sinonim sistemelor dinamice, CodeIgniter utilizează o abordare bazată pe segmente:

http://localhost/travelfinder/contact

În mod implicit fișierul index.php este inclus în URL, dar acesta poate fi îndepărtat folosind un fișier .htaccess simplu.

CodeIgniter folosește metoda MVC (Model-View-Controller), ceea ce permite o separare ușoară între partea de logică și partea funcțională. Acest lucru este deosebit de bun în proiectele în care designerii lucrează cu fișierele șablon, deoarece codul conținut în aceste fișiere este redus la minim.

CodeIgniter se bazează pe modelul de dezvoltare Model-View-Controller. MVC este o abordare software care separă logica de prezentare. În practică, aceasta permite paginilor Web să conțină scripturi minime, deoarece prezentarea este separată de scripturile PHP.

Model-ul reprezintă structurile de date. În mod tipic, clasele modelului vor conține funcții care ajută să se preia, însereze și actualizeze informațiile din baza de date.

View-ul este informația care este prezentată utilizatorului. În View va fi de obicei pagina Web, dar în CodeIgniter, un View poate fi de asemenea și un fragment de pagină precum un antet sau un subsol.

Controller-ul servește ca și intermediar între Model și View, precum și între orice alte resurse necesare pentru a procesa cererea HTTP și a genera o pagină Web.

Funcționarea acestui model de dezvoltare se face în modul următor (Fig. 3.15):

Fig. 3.15 Structura MVC

Browser-ul face o cerere de tip HTTP. Controller-ul o preia, o analizează și face o cerere de date către Model, le preia și le trimite apoi în View. View-ul preia la rândul său acele date și le transformă în pagina HTML pe care mai apoi o trimite prin URL către browser pentru a fi randată.

CodeIgniter are o abordare destul de liberă în ceea ce privește MVC, deoarece Model-urile nu sunt necesare. Dacă nu este nevoie de separare adăugată, sau se constată că menținerea Model-urilor necesită mai multă comlexitate decât este nevoie, acestea se pot ignora sau se poate construi aplicația folosind doar Controller-ul și View-ul.

CAPITOLUL 4

IMPLEMENTAREA PORTALULUI

4.1. Prezentarea portalului

PAGINA PRINCIPALĂ

Fișierul predefinit pentru accesarea site-ului Travelfinder este index.php. Acest lucru înseamnă că atunci când trimitem o cerere serverului prin comanda http://localhost/travelfinder/, acesta va răspunde trimițând fișierul de bază predefinit, adică prima pagină a site-ului-index.php (Fig. 4.1). Am modificat fisierul .htaccess pentru a nu mai afisa la sfarsitul URL-ului index.php.

Fig. 4.1 Pagina principala a site-ului Travelfinder

După cum se observă, pagina principală a site-ului este pagina de căutare a ofertelor prin intermediul hărții. Pagina este concepută astfel încât utilizatorii să aibă o experiență plăcută și să găsească informațiile necesare rapid și ușor. Pagina este alcătuită din două părți, partea de căutare prin intermediul hărții și partea de sugestii destinații.

Căutarea prin intermediul hărții se face prin completarea câmpurilor din formularul Căutare. Apariția ofertelor pe hartă se întâmplă prin funcții care apelează anumite evenimente. Astfel, când utilizatorul scrie în câmpul "Plecare din:", se apelează funcția de autocompletare, și când se dă click pe rezultatul autocompletarii, se apelează funcția "căutare".

Căutarea este făcută prin API-ul de la Google Maps. Atunci când funcția de căutare este apelată, se face o cerere de tip AJAX către server care returnează un răspuns în urma solicitării. Serverul returnează un vector de tip JSON ce conține coordonatele orașelor care au fost găsite în urma solicitării. Apoi, acest vector este parcurs prin funcția de JavaScript 'each' apelându-se funcții ale API-ului pentru afișarea markerelor pe hartă. Același lucru se întâmplă și pentru celelalte câmpuri și slidere. În orice punct al completării câmpurilor, se verifică întotdeauna dacă au mai fost setați alți parametri decât cei inițiali, astfel încât căutarea să poată fi schimbată în orice moment.

În momentul scrierii datelor în formularul de căutare, se afișează markerele pe hartă cu orașele care îndeplinesc condițiile selectate. În momentul în care se face click pe unul din markeri, (Fig. 4.2) se deschide un pop-up (fereastră) în care apar detalii despre oraș, câteva atracții și evenimente și maxim 3 oferte.

Fig. 4.2 Pop-up oras

function showMarker(markerId){
// get marker information from marker list
var marker = markerList[markerId];
// check if marker was found
if( marker ){
$.get( baseurl + 'ajax/load_single_marker/' + marker.id, function(data){
infowindow.setContent(data);
infowindow.open(map,marker);
});
}else{
alert('Error marker not found: ' + markerId);
}
}

Pop-up orasului este afisat prin functia showMarker() ce primeste ca parametru id-ul orasului si il parseaza intr-o cerere de tip AJAX. Dupa ce a fost procesata cererea, raspunsul venit de la server este plasat in functia API-ului Google Maps pentru afisarea pop-upului. Script-ul de PHP apelat prin cererea AJAX face o cautare dupa id-ul orasului si creaza HTML-ul pop-up-ului ce urmeaza a fi afisat.

Sugestiile de destinatii sunt cele mai noi destinatii de orase adaugate pe site (Fig. 4.3). Ordinea lor este luata din baza de date in mod descrescator din punct de vedere al datii introducerii oraseului prin admin. Aducerea mouse-ului pe una din orase activeaza evenimentul de hover. Hover-ul este format dintr-un vector cu 12 culori, si cand se parcurg orasele din baza de date se schimba si pozitia curenta a valorii vectorului. Astfel, culorile sunt altele la fiecare oras pe care este pus mouse-ul. Odata ce vectorul se termina, acesta se reia de la capat (Fig. 4.4). Apasarea butonului "Afiseaza mai multe oferte" apeleaza o functie de JavaScript care face o cerere de tip AJAX catre serverul de PHP care incarca urmatoarele 12 destinatii adaugate pe site, procesul repetandu-se de fiecare data cand este selectat butonul pana cand sunt afisate toate orasele din baza de date.

Fig. 4.3 Sugestii destinatii

Fig. 4.4 Cod sugestii destinatii

PAGINA DE ORAS

Pagina de oras poate fi accesata atat prin selectarea unei sugestii de destinatii, cat si prin selectarea butonului "Descopera destinatia si ofertele" din pop-up-ul unui oras selectat de pe harta. Motivul pentru care Sugestiile de Destinatii duc catre pagina de oras este atat pentru ca intr-un anumit oras pot exista mai multe oferte care sa se potriveasca cautarilor utilizatorului, cat si pentru ca in acest fel, cautarea este mai curata si mai rapida (Fig. 4.5 – 4.7).

Fig. 4.5 Pagina de oras – Descriere

Fig. 4.6 Pagina de oras – Evenimente si atractii

Fig. 4.7 Pagina de oras – Oferte pachete

Partea de descriere este alcatuita din slide-ul cu imagini reprezentative al orasului respectiv, numele orasului si tara din care face parte, informatii despre clima in momentul de fata si o descriere sumara despre oras. Clima este preluata prin API-ul de la http://api.openweathermap.org/. Atunci cand pagina de oras este accesata se trimite o cerere de tip GET catre API avand ca parametrii numele orasului si coordonatele. Acest script face o modificare la fiecare jumatate de ora a vremii fiecarui oras ce este accesat. Functia care preia vremea se numeste weather(), si apeleaza functia de PHP file_get_contents() pentru preluarea datelor returnate de catre API. API-ul returneaza un vector de tip JSON cu informatii legate de vreme precum o scurta descriere, gradele la momentul actual si valorile maxime si minime din ziua curenta (Fig. 4.8).

Fig. 4.8 Parte de cod ce reprezinta afisarea numelui orasului, a tarii din care face parte si clima

Slide-ul contine imagini adaugate din "Galerie foto" din panoul de administrare. In coloana de "Adauga poza", se scrie numele imaginii in campul "Nume", se incarca imaginea dorita, iar apoi se apasa butonul "SALVEAZA" (Fig. 4.9).

Fig. 4.9 Cod adaugare galerie oras

Se selecteaza orasul dorit, se introduce numele fisierului prin metoda POST in forma 'Nume_Imagine-Nr-Data_Introducerii_Timestamp' si se incarca imaginea in calea adm_towns_path in doua moduri, 'thumb/' si 'big/', si se concateneaza cu 'town_id/', astfel incat in orasul respectiv sa fie cele doua imagini, "big" si "thumb". I se atribuie de asemenea lui "thumb" variabilele $w si $h care iau valorile din 'adm_towns_w' = 326px si 'adm_towns_h' = 197px. Toate aceste date sunt mai apoi introduse in baza de date.

In coloana de "Galerie foto -oras-" se pot vizualiza imaginile adaugate precum se si pot sterge. Actiunea de "vezi foto" este facuta printr-un link care imi gaseste calea catre imaginea mare, iar actiunea de stergere este facuta prin functia de JavaScript "onclick" si imi returneaza calea catre imaginile ce trebuie sterse atat din baza de date cat si din calea adm_towns_path.

Partea de evenimente afiseaza evenimentele in ordinea adaugarii lor. Data in care are loc actiunea este data prin urmatorul cod (Fig. 4.10):

Fig. 4.10 Cod ce afiseaza ziua si luna evenimentului

In codul de mai sus se observa cum $d si $m iau valorile zilei si respectiv al lunii din tabela events din baza de date, iar apoi sunt afisate in browser cu stilul clasei "towns-events-date".

De asemenea, se mai poate observa faptul ca evenimentele sunt ascunse daca numarul lor este mai mare de 3. Pentru a afisa rezultatele ascunse, se da click pe butonul "Mai multe evenimente" (Fig. 4.11).

Fig. 4.11 Mai multe evenimente

Pentru a limita marimea textului care este afisat, am folosit functia CodeIgniter-ului word_limiter si i-am dat valoarea 15 pentru a limita numarul cuvintelor ce vor fi afisate din tabelul events, campul event_description la doar 15. Pentru ca utilizatorul sa poata vedea toata descrierea evenimentului, trebuie sa dea click pe link-ul "Detalii", care il va trimite pe pagina de eveniment folosind url-ul de baza, si anume localhost/travelfinder/, urmat de evenimente/ si apoi numele url-ului evenimentului luat din baza de date (Fig. 4.12).

Fig. 4.12 Cod ce arata limitarea textului si link-ul ce contine calea catre pagina evenimentului

In panoul de administrare, pentru a adauga un nou eveniment turistic, se selecteaza "Administrare orase" din sidebar, apoi din dropdown se selecteaza "Lista", care va afisa lista cu toate orasele existente in baza de date. Pentru a adauga un eveniment, se alege orasul dorit si la coloana "Actiuni" se selecteaza butonul de "Adauga Evenimente".

In coloana de "Adaugare eveniment", se introduc numele evenimentului, data si detaliile si se apasa butonul "SALVEAZA". Datele sunt salvate mai apoi prin metoda POST in baza de date si se afiseaza mesajul "Evenimentul a fost adaugat cu succes!" (Fig. 4.13).

Fig. 4.13 Adaugarea evenimentelor din admin

Coloana "Evenimente -oras-" da adminului posibilitatea de a modifica sau de a sterge un eveniment adaugat. Am utilizat plugin-ul de la Bootstrap denumit Modal plugin pentru a afisa "modifica" intr-o fereastra pop-up care apare peste cea de evenimente (Fig. 4.14). Dupa ce datele noi sunt introduse in campurile "Nume eveniment", "Data eveniment" si "Detalii eveniment", se pot face doua actiuni, si anume sa se inchida fereastra prin intermediul butonului "Inchide", sau sa se salveze datele prin intermediul butonului "Salveaza". Actiunea de Salvare este realizata in codul sursa, si anume se verifica daca butonul "Salveaza" a fost apasat, daca da atunci datele sunt introduse in baza de date cu ajutorul metodei POST si se afiseaza mesajul "Evenimentul a fost modificat cu succes!" (Fig. 4.15).

Stergerea evenimentului apeleaza functia de JavaScript delete_town_event () care creaza o fereastra in care apare mesajul "Esti sigur ca doresti sa stergi evenimentul?". Daca actiunea este confirmata, se face stergerea din baza de date si apoi se apeleaza plugin-ul de jQuery jGrowl care afiseaza mesajul "Evenimentul a fost sters cu succes!" (Fig. 4.16).

Fig. 4.14 Pop-up modificare eveniment

Fig. 4.15 Cod adaugare si editare eveniment

Fig. 4.16 Mesaj stergere

Partea de atractii turistice afiseaza obiectivele turistice in ordinea adaugarii lor. Ea este alcatuita din titlul "ATRACTII", atractiile propriu-zise, buton de "Detalii" si buton de "Mai multe atractii". Imaginea obiectivelor este afisata prin urmatorul cod (Fig. 4.17):

Fig. 4.17 Cod afisare imagine atractii – attractions.php

Adaugarea imaginilor in baza de date se face in modul urmator (Fig. 4.18):

Fig. 4.18 Cod imagine atractii – Admin_Model.php

In codul de mai sus observam ca daca este prima data cand este adaugata o poza, aceasta este redimensionata si salvata cu o cale de configurare adm_attract_path care are ca valoare calea 'uploads/towns_attractions', doi parametri adm_attract_w si adm_attract_h care redimenioneaza imaginea la 134px lungime si inaltime si o variabila care inregistreaza numele imaginii si care este mai apoi concatenata cu data introducerii imaginii in format timestamp. Toate aceste date sunt mai apoi introduse in baza de date in tabela towns_attractions.

Daca exista deja o inregistrare facuta in baza de date a unei imagini, cu alte cuvinte daca suntem in modul de modificare a atractiei turistice, atunci se gaseste obiectivul turistic dorit dupa id-ul atractiei si se sterge fisierul cu imaginea initiala din calea adm_attract_path, dupa care datele sunt actualizate in baza de date.

In panoul de administrare, pentru a adauga un nou obiectiv turistic, se selecteaza "Administrare orase" din sidebar, apoi din dropdown se selecteaza "Lista", care va afisa lista cu toate orasele existente in baza de date. Pentru a adauga o atractie, se alege orasul dorit si la coloana "Actiuni" se selecteaza butonul de "Adauga Atractii Turistice".

In coloana de "Adaugare obiectiv turistic", se introduc de la tastatura datele pentru campurile "Nume", "Detalii" si se incarca un fisier cu o imagine la "Poza" , iar apoi se apasa butonul "SALVEAZA". Datele sunt trimise mai apoi prin metoda POST catre server care mai apoi le introduce in baza de date, iar imaginea este salvata in fisierul uploads/towns_attractions.

In coloana de "Obiective turistice -oras-" se pot vedea atractiile deja introduse si avem posibilitatea de a le modifica sau sterge prin selectarea butoanelor "modifica" sau "sterge".

Daca se selecteaza "modifica", apare un pop-up creat cu Modal plugin in care se introduc datele noi si imaginea noua, si se apasa mai apoi unul din butoanele afisate: "Inchide" si "Salveaza". Daca se selecteaza "Inchide", datele sunt sterse si modificarea nu are loc. Daca se apasa butonul "Salveaza", datele sunt introduse prin metoda POST in baza de date, imaginea initiala este stearsa din adm_attract_path si este salvata imaginea adaugata in locul ei.

Daca se selecteaza "sterge", apare mai intai un pop-up de JavaScript care intreaba "Esti sigur ca doresti sa stergi obiectivul turistic?". Daca se apasa butonul "OK", atunci se sterg datele cu obiectivul respectiv din baza de date si imaginea din calea adm_attract_path.

Partea de Oferte pachete afiseaza toate ofertele turistice pe care acel oras le detine. O oferta este formata din poza ofertei, titlul, detalii despre oferta (durata, plecare, transport), o mica descriere a ofertei si link de "Detalii", pretul per persoana, agentia care are oferta si buton de "Rezerva" (Fig. 4.19).

Fig. 4.19 Oferta pachet turistic

Codul care afiseaza detaliile despre oferta este (Fig. 4.20):

Fig. 4.20 Cod afisare detalii oferta

Dupa cum se poate observa, durata vacantei este preluata din baza de date, din campul "days", plecarea este preluata din baza de date prin functia date(), iar transportul este afisat cu litera mare prin functia ucfirst(). Textul este limitat prin functia word_limiter(), iar link-ul "Detalii" duce catre pagina de oferte al pachetului respectiv. Pretul este preluat din baza de date in format integer. Functia is_file() verifica daca exista fisierul cu imaginea pentru agentia partenera ofertei, in cazul in care aceasta exista in calea specificata, ea este afisata.

In panoul de administrare, managerul/administratorul global are doua optiuni la partea de oferte: adaugarea si listarea ofertelor.

Adaugarea unei oferte se face selectand din sidebar "Administrare oferte" si apoi dand click pe link-ul "Adaugare", care deschide pagina pentru adaugarea unei noi oferte in baza de date (Fig. 4.21).

Fig. 4.21 Adaugare oferte

In coloana "Detalii generale" se alege tara din care se va face plecarea si apoi orasul din tara respectiva, tara si orasul in care se va ajunge, agentia partenera, tipul de oferta, categoria de oferta, poza, zilele vacantei, tipul de transport si daca va fi publica pe site sau nu.

In coloana "Continut oferta" se scrie titlul ofertei, iar in tab-urile "Descriere", "Tarife", "Servicii" si "Informatii utile" se adauga descrierea ofertei. Campurile "Pret" si "Pret redus" se completeaza cu valorile dorite, iar "Data expirarii ofertei" se alege cu ajutorul plugin-ului 'datepicker'.

Campurile de dropdown sunt preluate din baza de date prin functiile de Codeigniter ale librariei database ($db->get_where(), $db->query(), $db->get()):

function get_offer_types()
{
$agencies = $this->db->get('offers_types')->result();
$return[""] = '-selecteaza tipul ofertei -';
foreach($agencies as $a)
{
$return[$a->id] = $a->name;
}
return $return;
}

Functia result() returneaza un vector cu obiecte, fiecare obiect reprezentand un rand din baza de date. Pozitiile vectorului sunt parcurse si puse intr-un nou vector $return ce va contine ca si cheie id-ul inregistrarii si ca si valoare campul de nume, astfel incat vectorul rezultat sa poata fi adaugat ca parametru la functia de afisare form_dropdown ce va crea un dropdown cu pozitiile noului vector:

<div class="form-group">
<label for="offer_type_id">Tip de oferta <span class="required">*</span>:</label>
<?php echo form_dropdown('offer_type_id', $types, $type_err, 'class="form-control" id="offer_type_id"'); ?>
</div>

Clasa de CSS "alert-info" informeaza cu privire la datele ce trebuie introduse in campurile pentru oferta. Astfel, "Oras de plecare" sugereaza faptul ca in campurile "Tara" si "Oras" trebuie scris locul din care se va face plecarea in vacanta, "Localizare oferta" arata faptul ca in campurile de mai jos trebuie introduse datele pentru destinatia vacantei, iar "Optiuni" face referire la detaliile suplimentare ale ofertei.

Listarea ofertelor este afisata printr-un plugin de JavaScript numit EasyUI Datagrid care returneaza vectori de tip JSON. In acest datagrid sunt listate toate ofertele din baza de date. Pentru a restrange datele, se utilizeaza filtrarea din partea de sus a paginii, care contine urmatoarele campuri: "Categorie", "Oras"(Alege Tara -> -selecteaza orasul-), "Titlu"si "Status" (Fig. 4.22). Optiunile avute de fiecare oferta in parte sunt "Modifica oferta", "Galerie poze oferta" si "Sterge oferta".

Fig 4.22 Listare oferte

PAGINA DE EVENIMENTE

In pagina de evenimente se poate ajunge apasand link-ul "Detalii" din sectiunea de "EVENIMENTE" din pagina unui oras sau apasand link-ul "mai mult" din pagina de index, in pop-up-ul orasului ce apare pe harta. Pagina de evenimente este alcatuita dintr-o imagine statica full-width, breadcrumbs, titlul evenimentului, data la care are loc acesta si descrierea (Fig. 4.23).

Fig. 4.23 Pagina de eveniment

Breadcrumbs-ul (calea catre pagina respectiva) este creat printr-o serie de afisari a unor date, si anume: Tara > Oras > Nume_Eveniment. Stilul background-ului este dat in CSS de clasa "breadcrumb-page". Imaginea de background este incarcata din codul sursa, prin calea 'client/frontend/img/text_background.png ' .Titlul este afisat cu litere mari prin functia strtoupper (nume_eveniment), iar data este afisata in modul zi:luna:an cu functia date (d:m:Y, strtotime (data_evenimentului)). Textul este formatat prin functia de PHP htmlspecialchars_decode (descriere_eveniment) (Fig. 4.24).

Fig. 4.24 Cod pagina evenimente

PAGINA DE ATRACTII

In pagina de atractii se poate ajunge apasand link-ul "Detalii" din sectiunea de "ATRACTII" din pagina unui oras sau apasand link-ul "mai mult" din pagina de index, in pop-up-ul orasului ce apare pe harta. Pagina de obiective turistice este alcatuita dintr-o imagine statica full-width, breadcrumbs, titlul atractiei, imaginea si descrierea ei (Fig. 4.25).

Fig. 4.25 Pagina de atractii

Atat partea de sus a paginii care contine imaginea full-width, breadcrumbs si titlul, cat si descrierea sunt la fel ca la Pagina de Evenimente. Diferenta dintre cele doua pagini este inserarea imaginii atractiei in pagina, realizata prin urmatoarele randuri de cod:

<?php if(is_file('uploads/towns_attractions/'.$attraction->attraction_photo)): ?>
<img src="<?php echo $baseurl . 'uploads/towns_attractions/'.$attraction->attraction_photo ?>" class="img-responsive">
<?php endif; ?>

Codul de mai sus afiseaza imaginea obiectivului turistic daca aceasta exista in calea 'uploads/towns_attractions/imagine_atractie' si ii da un max-width de 100% prin clasa 'img-responsive'.

PAGINA DE TEXT

Pagina de Text contine imaginea full-width, breadcrumbs si titlul paginii, cat si textul propriu-zis. Paginile de text se gasesc in partea de footer a site-ului, acestea fiind: Despre noi, Conditii de participare, Termeni si conditii, Conditii de asigurare si Contact (Fig. 4.26).

Fig 4.26 Gasirea Paginilor de Text

Paginile pot fi administrate din panoul de administrare, unde pot fi adaugate noi pagini, pot fi editate sau sterse.

PAGINA DE OFERTA

In aceasta pagina se poate ajunge prin doua modalitati: selectand o oferta din sugestiile de destinatii din pop-up-ul deschis pe harta paginii principale, sau selectand butonul "Rezerva" al unui pachet turistic din pagina de oras.

Pagina este alcatuita din imaginile adugate prin panoul de administrare in "Galerie poze oferta", taburile de "Descriere", "Tarife", "Servicii", "Informatii utile", si tab-ul "Rezerva acum". Actiunea de deschidere a taburilor este facuta printr-o functie de JavaScript. Primul tab ia valoarea de "active", adica este intotdeauna deschis in momentul in care se intra pe pagina de oferta. "Descriere" contine, pe langa textul luat din campul "description" din tabela "offers", si detaliile pachetului turistic, si anume pretul, durata, plecarea si transportul. Taburile "Tarife", "Servicii" si "Informatii utile" contin numai text.

Formularul de rezervare este trimis catre pagina de rezervare cu id-ul ofertei prin metoda POST. Odata ce s-a dat click, este apelata functia rezervation_first_step ce primeste ca parametru ID-ul ofertei. Aceasta functie introduce in baza de date campurile completate din formular, plus ID-ul sesiunii curente. ID-ul sesiunii este introdus in baza de date pentru a putea face legatura cu pagina de rezervare, astfel incat daca o rezervare nu este completata in pasul al doilea sa se poata retine cumpurile completate in pasul 1.

PAGINA DE REZERVARE

Formularul din pagina de rezervare reprezinta pasul al doilea din procesul de rezervare. Acesta contine date detaliate despre client, precum si datele sale de facturare. Validarea formularului se face prin plugin-ul jQuery Validate si returneaza erori atunci cand campurile nu sunt completate sau datele completate nu corespund cu cerintele campului. Formularul contine doua optiuni la sectiunea de facturare, fiecare optiune avand propriile sale campuri. Selectarea datelor de facturare corespunzatoare se face atunci cand utilizatorului da click pe campul radio persoana fizica / persoana juridica. In momentul in care este bifata una dintre optiuni este apelata o functie de javascript ce preia valoarea campului si ataseaza clasa hide celeilalte optiuni.

Cand se da click pe butonul "Rezerva acum" este apelata functia de PHP rezervation_second_step() ce introduce datele din formular in baza de date prin metoda POST. In aceasta functie se face o verificare a sesiunii utilizatorului. Daca sesiunea exista atunci datele din formular sunt introduse in tabelele offers_user_rezervation si offers_user_rezervation_pers. Dupa ce se face introducerea in baza de date este resetata sesiunea utilizatorului prin functia de PHP session_regenerate_id() si se face o redirectionare catre o pagina in care este afisat un mesaj de succes.

Administratorul website-ului poate vedea in partea de administrare in sectiunea Rezervari toate rezervarile facute. In aceasta sectiune se pot vedea toate detaliile rezervarilor facute, avand optiunile de modificare a statusului rezervarii si de generare a facturii proforme.

Statusul rezervarii este modificat atunci cand se da click pe butonul "Efectueaza plata" si este apelata functia de CodeIgniter update() ce schimba campul "platit" din 0 in 1, 0 insemnand neplatit, 1 insemnand platit.

Atunci cand se da click pe butonul "Generare factura" este apelata functia generate_invoice(). Aceasta functie primeste ca parametru ID-ul rezervarii necesar pentru selectarea rezervarii respective. Generarea PDF-ului se face prin libraria DomPDF. Parametrul de generare este codul HTML ce contine datele utilizatorului, pretul facturii, precum si alte detalii referitoare la plata. Functia $dompdf->stream() primeste ca parametru numele fisierului ce urmeaza a fi descarcat, acesta fiind data curenta concatenata cu string-ul "_invoice".

PAGINA DE LOGARE

Pagina de logare permite utilizatorilor inregistrati sa se autentifice pentru a putea sa isi acceseze optiunile alocate contului lor. Formularul de autentificare contine campul de utilizator si parola. Aceste doua campuri sunt obligatorii, validarea facandu-se prin plugin-ul jQuery Validate.

In momentul in care campurile completate sunt valide, se trimit datele prin metoda POST apelandu-se apoi functia resolve_user_login din clasa User_Model. Aceasta functie cauta in baza de date daca datele introduse corespund unei inregistrari din tabela users. Daca a fost gasita o inregistrare atunci sunt initializate niste variabile de sesiune cu datele utilizatorului si statusul logarii, apoi facandu-se o redirectionare catre pagina de cont a utilizatorului.

PAGINA DE INREGISTRARE

Pagina de inregistrare permite vizitatorilor sa isi creeze un cont in website pentru a avea posibilitatea de a face rezervari la ofertele curente. Validarea formularului de inregistrare se face prin plugin-ul jQuery Validate. Atunci cand un vizitator completeaza campurile formularului in mod corect se trimit datele prin metoda POST si apoi este apelata functia create_user din clasa User_Model. Aceasta functie creaza o noua inregstrare in baza de date in tabela users cu campurile completate, campul parolei fiind criptat prin metoda de criptare PASSWORD_BCRYPT a functiei de PHP password_hash(). Dupa introducerea in baza de date este afisat un mesaj de succes pentru crearea contului.

PAGINA DE CONT

Aceasta pagina permite utilizatorlui sa isi modifice datele de contact, adresa de email si telefonul. Atunci cand este dat click pe butonul "Salveaza", datele sunt trimise catre server prin metoda POST si apoi sunt modificate campurile din tabela users pentru ID-ul ce a facut cererea. Update-ul in baza de date se face prin functia de CodeIgniter $db->update() ce primeste ca parametrii numele tabelei, un vector ce are ca si cheie numele campurilor din baza de date si ca si valori campurile completate in formular, si un vector ce contine campul dupa care se face modificarea si valoarea, in acest caz fiind campul user_id cu valoarea utilizatorului autentificat.

PAGINA DE CONTACT

Pagina de contact contine datele de contact ale companiei TravelFinder, harta catre sediu si un formular de contact ce da posibilitatea utilizatorilor sa isi exprime opiniile despre oferte, sau sa puna intrebari ce necesita raspunsuri din partea administratorilor.

Formularul de contact este validat prin plugin-ul jQuery Validate. Atunci cand datele introduse de vizitator sunt validate, este apelata de catre plugin functia submitHandler. In aceasta functie este definita o functie anonima in cadrul careia se face o cerere de tip AJAX ce transmite catre serverul de PHP datele din formular, ca ulterior sa le introduca in baza de date in tabela contact. In aceasta tabela este retinuta si ora la care a fost facuta inregistrarea in format TIMESTAMP.

4.2. Baza de date

Baza de date a fost creata cu programul WampServer utilizand aplicatia phpmyadmin. Pentru a accesa continutul bazei de date Travelfinder, mai intai trebuie deschis programul WampServer si apoi se introduce in casuta de text a browserului link-ul "http://localhost/phpmyadmin" (Fig. 4.27).

Fig. 4.27 Structura bazei de date travelfinder

Ierarhia este in felul urmator: baza de date curenta este travelfinder, iar toate comenzile si tabelele care se creeaza in interiorul ei i se vor adresa acesteia. Tabelele contin campuri cu tipuri de date care vor cuprinde informatiile adaugate din admin sau de pe site.

Informatiile din baza de date pot fi vazute in doua moduri:

modul Browse

modul Structure

Modul Structure afiseaza campurile cu numele si tipurile de date anexate lor. Spre exemplu, tabela "towns" contine atat date de identificare cat si date de continut pentru un oras adaugat (Fig. 4.2.2). Campurile tabelei sunt: "town_id" (INT valoare intreaga, PRIMARY, AUTO-INCREMENT), "country_id" (INT valoare intreaga, FOREIGN), "town" (VARCHAR, lungime 100), "offers_number" (INT valoare intreaga), "town_url" (VARCHAR, lungime 255), "description" (TEXT), "lat" (VARCHAR, lungime 30), "long" (VARCHAR, lungime 30), "weather_api_id" (INT valoare intreaga), "weather_api_time" (INT valoare intreaga), "weather_temp" (VARCHAR, lungime 5) si "weather_api_description" (VARCHAR, lungime 100).

Campul "town_id" este cheie primara pentru aceasta tabela (PRIMARY KEY), acest lucru insemnand ca este folosit pentru a identifica tabela in relatia cu alte tabele si este unic, si auto-incrementat (AUTO-INCREMENT), ceea ce inseamna ca valoarea numarului este incrementata automat de catre baza de date la fiecare noua linie introdusa. "country_id" este cheie straina (FOREIGN KEY) in aceasta tabela, campul acesta fiind folosit pentru a identifica in mod unic un oras de tara careia ii revine. Campurile "town" si "description" contin inregistrarile din panoul de administrare, "offers_number" contine numarul de oferte afisate in acel oras, "town_url" contine link-ul catre pagina de oras respectiv, "lat" si "long" sunt datele geografice necesare pentru marker-ul orasului pe harta paginii principale, iar "weather_api_id", "weather_api_time", "weather_temp" si "weather_api_description" contin datele obtinute prin API-ul de pe site-ul http://openweathermap.org/.

Modul Browse afiseaza ca si coloane, campurile cu numele si tipul de date din Structure, iar liniile sunt formate din inregistrarile facute prin intermediul panoului de administrare. Inregistrarile sunt ordonate in mod crescator dupa cheia primara.

Schema relatiilor dintre tabele este urmatoarea (Fig. 4.28):

Fig. 4.28 Schema relatiilor dintre tabele

4.3. Crearea si implementarea elementelor de design

Aplicatia Travelfinder a fost conceputa astfel incat sa fie usor de inteles si parcurs de catre utilizatorii care sunt in cautarea unei oferte turistice atractive pentru vacanta lor. Designul aplicatiei si dispunerea informatiilor este user-friendly (prietenoasa utilizatorilor), astfel incat din orice punct al aplicatiei, utilizatorul sa poata accesa prima pagina sau informatiile de interes, fiind in acelasi timp placuta vederii.

Programul folosit pentru realizarea designului aplicatiei este Adobe Photoshop CS5. Usurinta pe care acest program o asigura pentru crearea de template-uri web l-a facut cea mai buna optiune pentru aceasta aplicatie. De asemenea, separarea elementelor de design pe layere a facilitat taierea si implementarea site-ului, putandu-se astfel prelua usor imagini si icoane sau masurand elementele si distantele dintre ele cu ajutorul instrumentelor puse la dispozitie de catre Photoshop.

4.3.1. Logo

Logo-ul aplicatiei a fost creat in Photoshop in mod vectorial, acest lucru determinand mentinerea unei calitati superioare a fisierului indiferent de dimensiunea sa. Astfel, logo-ul Travelfinder va putea fi micsorat sau marit in functie de necesitati, fara ca marginile sale sa aiba bleed (culoarea dintre pixelii unei imagini 2D se amesteca unii cu altii din cauza compresiei sau scalarii fisierului). Daca logo-ul ar fi fost de tip raster, atunci scalarea imaginii nu ar fi fost posibila fara pierderea calitatii. Am utilizat astfel modul vectorial, deoarece in continuare, logo-ul va putea fi folosit si pentru elemente de branding ale aplicatiei, unde dimensiunea si rezolutia logo-ului trebuie sa fie mult mai mare. Dezavantajul utilizarii modului vectorial fata de modul raster este acela ca sursa fisierului va avea dimensiuni mai mari datorate layerelor si shape-urilor multiple. (Fig. 4.31)

Fig. 4.29 Logo

4.3.2. Layout

Realizarea layout-ului a fost facuta pe o rezolutie de 72PPI si o latime a template-ului de 1400px. PPI este acronim pentru Pixels per Inch (pixeli per inch) si se refera la rezolutia de afisare a unei fotografii sau imagini. Pentru aplicatii si site-uri web, rezolutia clasica de creare a template-urilor necesare este de 72PPI. Latimea (width) template-ului folosit este de 1400px, insa majoritatea elementelor sunt incadrate intr-o latime de 1000px. Am folosit aceasta latime deoarece se incadreaza in media rezolutiilor de monitoare si laptopuri, fara a fi nevoie de a se scala elementele pentru a intra in rezolutia necesara.

Structura layout-ului este asemanatoare in majoritatea template-urilor. Astfel, toate template-urile au header (antet) si footer (subsol). Header-ul este format intotdeauna din logo, iar in unele pagini contine si breadcrumbs si link-urile de Logare / Inregistrare. Footer-ul este format din Newsletter, link-uri catre paginile de text si Contact, agentiile partenere si butoane de social-media. Mai mult decat atat, exista 3 structuri compozitionale ale template-urilor.

1. Structura cu harta (Pagina principala) (Fig. 4.30)

Fig. 4.30 Structura cu harta

2. Structura cu imagini sau slide cu imagini (Pagina de Oras, Pagina de Eveniment, Pagina de Atractii, Contact) (Fig. 4.31)

Fig. 4.31 Structura cu slide

3. Structura fara imagini sau slide (Pagina de oferta, Pagina de rezervare, Pagina de Logare, Pagina de Inregistrare, Pagina de Cont) (Fig. 4.32)

Fig. 4.32 Structura fara imagini sau slide

4.3.3 Design responsive

Acesta este o abordare de design care vizeaza crearea de aplicatii si site-uri Web ce ofera o vizionare si interactiune optima de lectura si navigare cu minim de redimensionare, panoramare si scroll, pe o gama larga de dispozitive (computere, laptop-uri, tablete, mobile, etc.).

Bootstrap include un sistem de grid-uri puternic pentru construirea de template-uri de toate formele si marimile. Am folosit Bootstrap4 Grid, un sistem bazat pe 12 coloane cu latime standard de 1170px. In acest caz, am utilizat un layout cu latime variabila, dimensiunea pe latime a elementelor template-urilor fiind de 1000px.

De asemenea, am folosit conceptele de design UI / UX. UX Design inseamna User Experience Design (Experienta Utilizatorului), in timp ce UI Design inseamna User Interface Design (Interfata Utilizatorului). Ambele elemente au fost esentiale pentru a crea aplicatia Travelfinder si colaboreaza strans una cu cealalta. Rolurile lor sunt diferite insa: UX este un domeniu analitic si tehnic, iar UI este apropiat de designul grafic. Ca si o comparatie, daca ne gandim la Travelfinder ca la un organism uman, oasele reprezinta codul pe care il da structura. Organele il reprezinta designul UX, iar UI este partea cosmetica a corpului.

Toate aceste elemente au dus la realizarea partii responsive a aplicatiei Travelfinder.

CAPITOLUL 5

UTILIZAREA SI EXPLOATAREA SITE-ULUI

Necesitatea unui numar din ce in ce mai mare de oameni de a gasi rapid si usor informatii cu privire la destinatiile turistice a determinat o crestere exploziva a website-urilor si a portalurilor turistice. Ceea ce diferentiaza Travelfinder de restul site-urilor Web la ora actuala este modul de cautare a destinatiilor turistice. Astfel, daca toate aplicatiile de turism au cautarea ofertelor dupa destinatie si pret, cautarea Travelfinder joaca rol de ghid catre gasirea celei mai bune destinatii turistice dupa preferintele utilizatorului si perioadei in care acesta este dispus sa plece in vacanta.

Pentru a se intelege cat mai bine structura si functionalitatea portalului, mai jos am sa explic cele doua moduri in care aceasta aplicatie poate fi folosita: modul administrator si modul utilizator.

5.1. Modul Administrator

Rolul super-adminului este acela de a manipula datele ce trebuie introduse, modificate sau sterse in aplicatie. Pentru a face acest lucru, el trebuie mai intai sa se logheze in pagina http://localhost/travelfinder/admin/dashboard/login (Fig. 5.1). Daca datele sale sunt regasite in baza de date dupa ce le introduce in campuri si apasa butonul "Logare", atunci este redirectionat catre pagina panoului de control http://localhost/travelfinder/admin (Fig. 5.2). Aici el poate accesa paginile ori dand click pe box-urile "Utilizatori", "Tari", "Orase", "Oferte", "Agentii" si "Rezervari", ori selectand un link din sidebar (navigarea din partea stanga) si dand click pe unul din link-urile din dropdown-ul ce se deschide.

Fig. 5.1 Pagina de logare in admin

Fig. 5.2 Pagina de panou de administrare

Rezervari Oferte

Modulul de rezervari oferte afiseaza lista cu rezervarile ce s-au facut prin site-ul Web. Tabela contine informatii privind data in care a fost trimisa rezervarea, date despre cumparatorul ofertei, numele ofertei, statusul rezervarii (Platit si Neplatit) si doua actiuni: "vezi rezervare" si "sterge rezervare".

Daca se apasa butonul "vezi rezervare", se trimite o cerere catre server pentru a returna pagina view.php, care afiseaza informatiile utilizatorului pe care le-a adaugat in momentul in care a facut rezervarea ofertei dorite. De asemenea, administratorul poate face doua actiuni: sa emita factura fiscala ce contine datele furnizorului si clientului precum si date despre pret, si sa efectueze plata, aceasta actiune schimband statusul rezervarii din "Neplatit" in "Platit".

Daca se apasa butonul "sterge rezervare", apare o fereastra de JavaScript care cere o reconfirmare a faptului ca se vrea stergerea rezervarii, iar daca se apasa butonul "OK" atunci inregistrarea este stearsa din baza de date.

Administrare pagini

In acest modul sunt introduse si sunt listate paginile de tip text din cadrul portalului. Aici se pot selecta doua actiuni: cea de adaugare si cea de listare. Pagina de adaugare contine campuri in care sunt introduse date care mai apoi sunt afisate in pagina creata. Pagina de listare contine toate paginile care au fost adaugate, precum si optiunile "editeaza", "adauga imagini" si "adauga video". Butonul "editeaza" duce catre pagina de modificare, unde se pot schimba atat numele paginii cat si informatiile din aceasta. Butoanele "adauga imagini" si "adauga video" duc catre pagina de redirectionare, deoarece actiunile "Poze" si "Video" nu exista in controlerul "Administrare pagini" din modulul "Grupuri Utilizatori".

Administrare oferte

Acest modul contine tot doua actiuni: adaugare si listare. Pentru a adauga o noua oferta, se aleg intai tara si orasul de plecare, tara si orasul de destinatie si alte detalii despre oferta, precum agentia partenera, tipul si categoria ofertei, poza, zile, transport, text, pret si data. Pentru a adauga oferta se apasa pe butonul "SALVARE". Pagina "Lista" afiseaza ofertele existente. In partea de sus a listarii exista o filtrare a pachetelor turistice pentru a restrange lista de oferte. Exista de asemenea trei butoane de actiuni, "Modifica oferta", "Adauga poze" si "Sterge oferta".

Butonul "Modifica oferta" permite administratorului sa schimbe datele cu privire la oferta. Butonul de "Adauga poze" trimite catre pagina de galerie, unde se pot adauga mai multe poze ofertei respective si se pot vizualiza imaginile adaugate deja la dimensiunea lor originala sau se pot sterge. Butonul "Sterge oferta" activeaza functia de JavaScript delete_easyui_item ce afiseaza un pop-up care reconfirma faptul ca se vrea stergerea ofertei. Daca se apasa butonul "OK", atunci stergerea are loc.

Administrare tari

Modulul de tari contine doua actiuni, adaugare si lista. In "Adaugare", se completeaza campurile si se apasa butonul "SALVEAZA", iar in "Lista" se pot vedea inregistrarile facute pana in acel moment, butonul de editare al tarii si butonul de stergere. Actiunile acestor butoane sunt la fel ca cele descrise mai sus.

Administrare orase

Si pentru acest modul, actiunile sunt aceleasi: "Adaugare" si "Lista". In pagina de adaugare se completeaza campurile cu numele orasului, tara din care face parte si detalii despre orasul respectiv. In pagina "Lista" se pot vizualiza orasele introduse si se pot face 5 actiuni: "Modifica oras", "Adauga poze", "Adauga atractii turistice", "Adauga evenimente" si "Sterge oras". Actiunile de modificare, galerie si stergere sunt aceleasi ca cele de mai sus.

In pagina de atractii turistice, administratorul poate adauga obiective cu datele si poza necesare si sa selecteze butonul "SALVEAZA". Datele sunt astfel salvate in baza de date si sunt mai apoi afisate in partea din dreapta, unde se pot mai apoi modifica sau sterge atractiile.

In pagina de evenimente turistice sunt aceleasi actiuni ca la obiective, cu diferenta ca in loc de incarcarea unei poze este un camp de selectare a datii cand se tine evenimentul respectiv.

Administrare agentii

Rolul modului acesta este de a promova agentiile care sunt partenere. Modulul contine doua link-uri, "Adaugare" si "Lista", unde se adauga numele si logo-ul agentiei si respectiv unde se vizualizeaza, editeaza si sterg agentiile deja existente.

Utilizatori

Modulul acesta contine utilizatorii care au acces in panou de administrare. Acestia pot fi adaugati ori de catre superadmin, ori de catre ceilalti utilizatori. Astfel, se selecteaza grupul din care utilizatorul va face parte, se completeaza campurile cu datele persoanei si apoi se trimite formularul catre baza de date spre a fi memorat. La partea de listare, se pot vedea utilizatorii actuali, iar ca si actiuni exista doar butonul de stergere, neexistand posibilitatea de a modifica datele odata introduse in sistem.

Grupuri utilizatori

Modulul grupurilor de utilizatori este foarte important, deoarece prin acesta se dau accesele si restrictiile utilizatorilor. Pentru a adauga un nou grup, se selecteaza "Adaugare", apoi se completeaza campul cu numele grupului, si se asigneaza accesele la fiecare modul existent. Actiunea de listare este la fel ca cele prezentate mai sus.

5.2. Modul Utilizator

Interfata aplicatiei este proiectata in asa fel incat utilizatorului sa ii fie simplu sa navigheze prin el si sa gaseasca toate informatiile de care are nevoie.

Presupunem ca intra pe prima pagina un utilizator care doreste sa cumpere o oferta turistica pentru a pleca in vacanta intr-o anumita perioada si care are un anumit buget, insa nu este hotarat asupra destinatiei. Primul lucru pe care acesta il va face va fi de a folosi Cautarea pentru a i se da anumite oferte. In acelasi timp in care completeaza campurile, destinatiile care intrunesc conditiile vor aparea pe harta sub forma de markeri. Daca se da click pe unul dintre ei, apare o fereastra cu cateva detalii despre orasul respectiv, sunt afisate cateva atractii si evenimente turistice din acel oras, cat si 3 cele mai bune oferte. Daca utilizatorului ii place una din cele 3 oferte afisate, da click pe ea si il trimite direct catre pagina de oferta. Daca nu este multumit de rezultate, el poate da click pe butonul "Descopera destinatia si ofertele", care il va duce pe pagina de oras. De asemenea, mai jos de harta sunt afisate sugestii de destinatii care trimit catre orasul indicat. Daca se doreste vizualizarea mai multor destinatii, se apasa butonul "Mai multe orase" care va incarca un numar suplimentar de 12 orase de fiecare data cand este apasat.

Utilizatorul a vazut o sugestie de destinatie atractiva. In momentul in care da click pe aceasta, el este purtat catre pagina de oras, unde va gasi informatii cu privire la orasul respectiv, evenimente si atractii si pachete turistice. Daca utilizatorul observa o oferta care ii place, va apasa butonul "Rezerva", care il va trimite pe pagina de oferta. Aici i se prezinta detalii mai amanuntite legate de oferta, precum perioada plecarii, durata, transport si informatii despre ce se va intampla in acea vacanta. Daca persoana este atrasa de oferta, va accesa tab-ul "Rezerva acum" unde va completa cateva campuri cu date despre numarul de persoane si tipul camerei si va vedea totalul de plata pentru o singura persoana. Apasand butonul "Continua", utilizatorul este trimis catre pagina de rezervare, unde va introduce datele personale si de facturare si va apasa butonul "Rezerva acum!". In acest moment, datele din formular vor fi salvatein baza de date si vor fi afisate in panou de administrare drept rezervare neplatita, asteptand confirmarea din partea unui administrator.

In cazul in care utilizatorul doreste sa isi faca un cont pe acest site, el va putea accesa pagina de Inregistrare / Logare in orice punct al navigarii sale pe aplicatie. Astfel, daca selecteaza "Logare", va fi trimis catre pagina de autentificare unde va trebui sa introduca datele sale de logare. Daca nu doreste inca sa se logheze / inregistreze, poate pleca de pe aceasta pagina dand click pe butonul "Continuare" din a treia coloana. Daca nu are cont deja facut, poate intra in pagina de Inregistrare ori prin a doua coloana din pagina de Logare, ori dand click pe link-ul "Inregistrare" din orice pagina de pe site in partea din dreapta-sus. In aceasta pagina el va trebui sa completeze campurile cu date personale si sa isi creeze contul apasand butonul "Inregistrare".

Odata facut acest pas, utilizatorul este trimis in pagina de cont, unde are posibilitatea de a-si modifica unele date si sa le salveze pe cele noi. De asemenea, odata logat, in partea din dreapta-sus va aparea mesajul "Bine ai venit, nume_utilizator" si link-urile "Contul Meu" si "Delogare".

In cazul in care utilizatorul doreste sa afle mai multe despre firma Travelfinder, poate face acest lucru dand click pe link-urile de la "UTILE" din footer-ul paginilor, iar daca vrea sa contacteze firma, selecteaza link-ul "Contact" care il va duce pe pagina unde poate completa campurile cu feedback / intrebari care vor fi salvate in baza de date.