Aplicatie Web de Administrare a Pensiunii Sticletii Bucovinei

1.Introducere 3

1.1 Motivatia temei 3

1.2 Concept aplicatie web 3

1.3 Concept aplicație QR 5

1.4 Istoric privind QR 5

2. Limbaje de programare folosite la dezvoltarea aplicației web 6

2.1. PHP 6

2.2 JavaScript. 7

2.4 CodeIgniter 10

2.5 Psql 12

2.6 Apache 12

3.Tehnologii folosite la utilizarea aplicației QR 13

3.1 Instrucțiuni de instalare a aplicației QR pentru Android 13

4.Proiectarea bazei de date 16

5.Implementarea aplicației 17

6.Instrucțiuni de folosire 17

6.1 Instrucțiuni de folosire aplicație web 17

6.2 Instrucțiuni de folosire administrator 17

6.3 Instrucțiune de folosire utilizator 20

7.Concluzii 20

8. Bibliografie 21

1.Introducere

În ziua de azi, Web-ul reprezintă o parte importantă din viața umană.

Web-ul a devenit foarte popular în ultimul deceniu, aducând astfel o platformă puternică de diseminare a informațiilor și extragere a cunoștințelor, precum și analiza informațiilor.

În urma cu câțiva ani, tehnologiile Web erau folosite doar de marile companii datorită, în principal, costurilor ridicate ale licențelor programelor de dezvoltare. În prezent, datorită dezvoltării tot mai accentuate a soluțiilor Open Source, oricine își poate permite realizarea de aplicații web.

Motivația temei

Lucrarea de față are ca scop realizarea unei aplicații web pentru gestionarea cazărilor dintr-o pensiune din momentul rezervării până la check-out, dar și a unei aplicații de calcularea costului biletului de acces la sala de sport a pensiunii pe baza codului qr scanat la intrarea și părăsirea acesteia.

Aplicațiile vor fi utilizate atât de către angajații pensiunii, dar și de clienți, dificultatea în folosirea acestora fiind redusă, pentru a veni în ajutorul persoanelor fără cunoștințe temeinice de utilizarea tehnologiei.

Concept aplicatie web

O aplicație Web este o aplicație accesibiliă dintr-un program de navigare(„Browser Web”), și este aflată în general pe un alt calculator (numit și „server”) decât calculatorul folosit de utillizator (numit și „server” al aplicației), ambele conectate în rețeaua Internet. Programele de navigare pe Internet(Mozilla FireFox, Internet Explorer, Opera, Chrome) comunică cu aplicația din server prin protocolul HTTP și limbajul HTML.

Fig.1 Conceptul Client-Server

http://www.slideshare.net/busaco/web01-concepte

Serverul web este aplicație care are responsabilitatea de a accepta și interpreta o cerere de tip HTTP, ASP, PHP, etc. de la o aplicație client(web browser) și de a oferi un răspuns sub formă de pagini web care conțin documente HTML și alte resurse asociate. Conținutul unui rãspuns era la început static , iar mai apoi dinamic (paginile Web conțin, pe lângã fragmente HTML și date adăugate de server și rezultate din prelucrãri si/sau din baze de date folosite de server).

Conceptul esențial al spațiului World Wide Web îl reprezintă conceptul de comunicare , pe care de altfel se bazează orice rețea de calculatoare .

Fig.2 Arhitectura unei aplicatii web

http://www.slideshare.net/busaco/web01-concepte

Figura de mai sus evidențiază arhitectura stratificată a unui model de aplicație web.

Concept aplicație QR

Aplicația QR este o aplicație scanner pentru mobile care permite scanarea automată a mai multor tipuri de coduri direct de pe telefonul mobil, și deschide aplicația care trebuie, cum ar fi browserul web, sau diferite aplicații.

 Codurile QR stochează adrese URL fiind astfel foarte utile pentru navigarea pe internet de pe mobil. Cu ajutorul unui QR code nu mai este nevoie să tastezi o adresa url din browserul telefonului, operațiune care poate fi destul de greoaie mai ales dacă adresa este lungă, trebuie doar ca telefonul să scaneze QR code-ul iar browserul telefonului îl redirecționeaza către URL-ul in cauză.

1.4 Istoric privind QR

Codul QR (cunoscut ca și Quick Response Code) este o matrice de coduri de bare, un cod bidimensional, creat și folosit pentru prima dată in industria auto.

   Creat in 1994 de Denso, o companie (filiala) a grupului Toyota, pentru a urmări componentele vehiculelor în procesul de fabricație, codul QR a fost conceput pentru a crește lizibilitatea și viteza de decodare a conținutului mare de informații pe care acesta trebuia să-l încorporeze.

   Precum știți, codul QR constă din mici module (de obicei negre) așezate într-un pătrat pe un fond alb. 

Fig.3 Exemplu de QR

În zilele noastre acest tip de cod QR a devenit mult mai popular în afara industriei pentru lizibilitatea sa rapidă și a capacității foarte mari de stocare a informațiilor comparativ cu tradiționalul UPC (Universal Product Code), cunoscutul cod de bare de pe produsele pe care le cumpărăm zilnic. Cantitatea de date ce poate fi stocată în codul QR depinde de tipul de date, versiune si nivelul de corectare a erorii. Capacitatea maxima este astfel: doar date numerice – Max. 7089 caractere, alfanumerice – Max. 4296 caractere.

Un cod de bare obișnuit poate stoca maxim 20 de caractere ceea ce face ca un Cod QR să fie mult mai performant. Partea buna a acestor coduri QR este aria largă de întrebuințare în aplicații: pentru urmărirea produselor comerciale, Marketingul produselor/fidelizare (cupoane de reducere, stocarea informațiilor despre companii: adresa, e-mail, telefon, cod poștal, adresa web, etc),  bilete de transport, transport produse, recreere, restaurante, imobiliare, cărți de vizită, publicitate (flyere, reclame, bannere, reviste/ziare, cărți), companiile de recrutare de forța de muncă/personal, stocarea informațiilor personale de către instituții guvernamentale, etc.

2. Limbaje de programare folosite la dezvoltarea aplicației web

2.1. PHP

PHP este un limbaj de scripting ce permite modificarea paginilor web înainte ca acestea să fie transmise de server către browserele utilizatorilor. PHP poate insera text într-un fișier HTML deja definit, poate defini un fișier HTML de la zero, poate să afișeze o imagine sau să redirecționeze utilizatorul către altă pagină. În cadrul acestui proces, PHP poate consulta baze de date, fișiere externe sau orice altă resursă, poate trimite email-uri sau executa comenzi ale sistemului de operare. Modul în care PHP modifica/definește o pagina ce va fi afișată de browser este prin instrucțiunile scrise de programator și delimitate de etichetele php. Astfel, orice se află intre aceste tag-uri va fi executat de interpretorul PHP si înlocuit cu rezultatul execuției. Ce este în afara lor rămâne neschimbat și este transmis către browser.

Scripturile PHP pot fi incluse și în fișiere cu cod HTML, ca în următorul exemplu (dar salvate cu extensia ".php"):

Preluarea datelor trimise către server prin intermediul metodei POST, în cadrul unui script PHP se face prin intermediul vectorului predefinit $_POST[’nume_câmp_din_formular’]. Analog, dacă datele ar fi trimise către server prin intermediul metodei GET , preluarea lor se face prin intermediul vectorului predefinit $_GET[’nume_câmp_formular].

Interpretorul PHP acționează ca o componentă adițională, o extensie a serverului web care este invocată de ori câte ori o pagină PHP este accesată. Această componentă procesează codul-sursa din pagina și apoi transmite rezultatul înapoi la web-server, ajungând în final în browserele utilizatorilor.

2.2 JavaScript.

Limbajul JavaScript este un limbaj de tip script, ce se folosește preponderent în paginile și aplicațiile web suportat de browserele Web care poate fi integrat direct într-o pagina HTML.

Este folosit ca o componentă a browserului web a cărei implementare permite scripturilor client-server să interacționeze cu utilizatorul, să controleze comportamentul paginii web, să ușureze astfel si traficul dintre server și client.

JavaScript ruleaza pe partea client-side, folosit pentru a proiecta/programa modul in care paginile web se comporta in urma unui eveniment.

Navigatoarele WWW interpretează scripturile JavaScript din paginile HTML. Ele citesc pagina, interpretează marcajele și o afișează, executând în același timp scripturile JavaScript pe măsura întâlnirii lor în cadrul paginii. Rezultatul acestui proces de interpretare/execuție este vizualizat de utilizator în fereastra navigatorului.

Javascript poate realiza următoarele: deschiderea unei pagini, deplasarea mouse-ului într-un anumit punct sau ștergerea unui anumit câmp dintr-un formular. În figura de mai jos este exemplificată o mini-aplicație care afișează un mesaj:

2.3 JQuery

jQuery este o bibliotecă construită cu JavaScript care ajută la încărcarea conținutului dinamic în pagini, și tratează evenimente de utilizator, animă elemente de pagină, fără griji cu privire la diferențele în modul în care browserele pot interpreta cod.

Caracteristicile fundamentale se adresează următoarelor nevoi:

Accesarea unor porțiuni ale paginii;

Modificarea aspectului unei pagini.

Adăugarea de animații în pagină.

Extragerea de informații de pe un server fără a face refresh la o pagină.

Răspunde la interacțiunea utilizatorului cu pagina.

Cu jQuery putem sa preluăm elementele html și extragem sau să le modificăm proprietățile ce țin de CSS.Pentru a extrage o anumită proprietate css vom folosi sintaxa:

$( 'selector').css('proprietate');

Exemplu extrage proprietate:

<script type="text/javascript">

<!–

$(document).ready(function() {

$('h2').click(function() {

a = $(this).css('background-color');

b = $(this).css('font-family');

c = $(this).css('width');

alert(a+", "+b+", "+c);

});

});

//–>

</script>

<h2 style="background-color:#f0f111;font-family:chiller;

width:10em;">

Un element h2</h2>

Acest cod va afisa:

Adăugare, ștergere, verificare clase

jQuery permite cu ușurință adăugarea, ștergerea și comutarea claselor CSS , sintaxele:

$('selector').addClass('nume-clasa'); – adaugă clasa cu numele "nume-clasa" la elementul respectiv

$('selector').removeClass('nume-clasa'); – șterge clasa cu numele "nume-clasa" la elementul respectiv

$('selector').toggleClass('nume-clasa'); – adaugă clasa respectiva daca aceasta nu exista, dacă există o șterge

$('selector').hasClass('nume-clasa') – verifică dacă elementul respectiv conține acea clasă.

Exemplu:

<script type="text/javascript">

<!–

$(document).ready(function() {

$('#ceva').click(function() {

$(this).addClass('cls1');

});

$('#cevaa').click(function() {

$(this).toggleClass('cls2');

});

});

//–>

</script>

<span id="ceva">Dati un click in acest span </span><br />

<span id="ceva">Dati mai multe click-uri in acest span</span>

Rezultatul codului fiind:

2.4 CodeIgniter

CodeIgniter este un framework PHP , dezvoltat pentru cei care construiesc web site-uri folosind PHP.Avantajele folosirii acestui cadru de dezvoltare sunt urmatoarele:

Încărcarea selectivă doar a resurselor de care are nevoie aplicația;

Ușurința construirii unor aplicații ample și complete.

Eficiența

Asigură un grad crescut de siguranță utilizatorilor

Robustețe

Din punct de vedere al modului de programare, CodeIgniter este compatibil atât pe PHP4 cât și pe PHP5. El oferă un set bogat de librării ceea ce oferă posibilitatea de a crea cele mai frecvente sarcini intălnite. De asemenea CodeIgniter folosește tiparul MVC-Model View Controller, acesta fiind o cale de organizare a aplicației în trei părti diferite:

Model-ul : partea de interacțiune cu baza de date. El are în responsabilitate acțiunile si operațiile asupra datelor si autentificarea utilizatorilor.

View-ul se ocupa de generarea unui output pentru utilizator, este partea ce va avea grija de cum vede utilizatorul informația procesata de controller..Modelul executa anumite funcții, view-ul primește rezultatele, și le trimite la browser.

Pentru partea de vederi foarte mulți programatori utilizează bootstrap-uri. Acestea reprezintă o facilitate din punct de vedere grafic, însa limitează posibilitate utilizatorului de a dezvolta interfața grafica la lucrurile oferite de bootstrap. 

Controller-ul : partea ce gestionează si traduce acțiunile utilizatorului in operații pe model.

Aceasta face legatura între model și view, între acțiunile userului și partea decizională a aplicației.

Fig.2 Modelul MVC

http://www.moock.org/lectures/mvc/

Instalarea CodeIgniter

Pentru început descărcăm framework-ul și îl dezarhivăm. In Root Folder-ul serverului local( public html ) creăm un folder cu numele noii aplicații, după care în acest nou folder creat mutam folderul descărcat.

În folderul proiectului, se găsește folderul application, mai apoi un alt folder config, înăuntrul căruia se afla fișierul config.php pe care îl vom deschide cu un editor de text.

Cautăm linia următoare :

$config['base_url'] = '';

și o modific în felul următor:

$config['base_url'] = 'http://localhost/Exemplu'; // Exemplu este numele folderului…

Daca aplicația trebuie să se conecteze la o bază de date, trebuie sa edităm si fișierul "application\config\database.php".

Fișierul index.php reprezintă punctul de intrare într-o aplicație de acest tip și inițializează resursele folosite de CodeIgniter.

Router-ul examinează cererea HTTP si determină ce resurse doresc să fie accesate, și în cazul în care în cache se găsește o astfel de resursă, preia resursa și o transmite ca răspuns.

Între router si controler se afla un zid de securitate care validează datele primite de la utilizator.

Controler-ul încarcă datele, diferitele resurse, și procesează datele cererii primite.

2.5 Psql

PostgreSQL este un limbaj open source ce utilizează un model client/server. O sesiune PostgreSQL este reprezentată de procese:

Procesul Server care gestionează fișierele bazei de date, realizează conexiuni la bazele de date dinspre aplicațiile client, realizează acțiunile cerute de client pe bazele de date.

Aplicația Client a utilizatorului este un alt proces , care se ocupă de executarea operațiilor pe baza de date.

Sistemul de gestiune de baze de date PostgreSQL poate fi definit ca fiind: relațional, foarte extensibil, cu orientare obiectuală.

2.6 Apache

  Apache joacă un rol cheie in creșterea World Wide Web și continuă să fie cel mai popular web server, servind ca platformă de referință pentru celelalte servere web.

Serverul Apache este caracterizat ca fiind un software gratuit și unul dintre cele mai populare servere HTTP.Protocolul HTTP (HyperText Transfer Protocol) este un protocol de tip cerere-răspuns, bazat pe TCP/IP, folosit in transferurile informațiilor multimedia.

Caracteristicile serverelor Web

 utilizarea modulelor (legate sau încărcate dinamic) care oferă posibilitatea extinderii capabilităților de bază oferite;

conexiuni securizate prin criptarea fluxurilor de date;

gestionarea simultană a mai multor site-uri Web, asigurând așa-numita găzduire virtuală (virtual hosting), folosind aceeași adresă IP (modalitate utilizata de toți furnizorii de servicii internet – Internet Service Provider);

asigurarea compresiei conținutului , pentru reducerea mărimii răspunsului;

posibilitatea de a fi configurate cu ajutorul unui fișier text sau al unei interfețe grafice

În mod obișnuit, pentru a adăuga noi funcții unui server web se folosește modelul CGI(Common Gateway Interface ). Acesta poate astfel permite server-ului pornirea unui proces extern ce preia informații privind o anume cerere, prin intermediul unor variabile de mediu și care trimite datele de răspuns printate. Fiecare cerere este administrată într-un proces de o instanță separată a programului (script-ului) CGI.

3.Tehnologii folosite la utilizarea aplicației QR

O aplicație QR este ușor de instalat și foarte utilă pentru toate tipurile de telefon. Astfel avantajul major în acest caz, este ca fiecare client își poate verifica propriul abonament de acasă, fără a se deplasa propriu-zis la sala de sport.

În prezent aplicații QR pentru smartphone-uri se găsesc chiar pentru fiecare sistem de operare: IOS, Symbian, BlackBerry, WindowsPhone, Bada, Java, Android.

3.1 Instrucțiuni de instalare a aplicației QR pentru Android

3.1.1 Primul pas constă în descărcarea aplicației

3.1.2 Următorul pas este cel de instalare

La al treilea pas acceptăm termenii și condițiile de folosire , după care va începe instalarea propriu-zisă.

3.1.3 După ce instalarea a avut loc cu succes, se poate deschide aplicația prin apăsarea butonului OPEN

Acum, tot ce a rămas de făcut este de a îndrepta telefonul în fața codului de scanat.

4.Proiectarea bazei de date

5.Implementarea aplicației

6.Instrucțiuni de folosire

6.1 Instrucțiuni de folosire aplicație web

6.2 Instrucțiuni de folosire administrator

Pentru a avea drepturile unui administrator ne vom loga ca în imaginea de mai jos:

Se va deschide prima pagina „Raport General”, care oferă o statistică a clienților, abonamentelor și încasărilor.

Meniul „Clienți” cuprinde lista tuturor acestora (Id, Nume, Cnp, Abonament Activ, Data adăugării și acțiuni de editare si ștergere). Tot aici se poate căuta un client după una din caracteristicile de mai sus.

Un alt meniu de mare folos este „Editare Abonamente Standard”, care vine in ajutorul administratorului atunci când se dorește modificarea unor abonamente (prețul, timpul și valabilitatea unui astfel de abonament).

Secțiunea Editare Timp Suplimentar, va fi accesată atunci când se dorește oferirea unui timp suplimentar drept bonus, sau mulțumire celui care este un client fidel, sau doar unor oaspeți de seamă.

6.3 Instrucțiune de folosire utilizator

7.Concluzii

Zi de zi tehnologia evoluează, apar noi idei, concepte care imediat prind contur și se materializează în gadget-uri care ne oferă o serie de opțiuni, de aplicații și de… comoditate.

8. Bibliografie

http://andrei.clubcisco.ro/cursuri/f/f-sym/5master/aac-dai/dai01.doc

http://www.slideshare.net/busaco/web01-concepte

http://cod-qr.blogspot.ro/2012/03/codul-qr-ce-este-utilizare-cititoare-si.html?m=1

http://www.marplo.net/php-mysql/scriere_scripturi.html

http://www.moock.org/lectures/mvc/

http://zetcode.com/db/postgresqljavatutorial/

http://www.pcadvisor.co.uk