Tehnologii Web Si Aplicatii Responsive Pentru Rezervari Online

Tehnologii web și aplicații responsive pentru rezervări online

Cuprins

Capitolul 1. Aspecte generale

1.1. Introducere

1.2. Motivația alegerii temei

1.3. Definiții și explicații

Capitolul 2. Avantajele unei aplicații web

2.1. Gradul foarte mare de accesibilitate

2.2. Un feed-back mai bun și mai rapid din partea utilizatorilor

2.3. Costuri scăzute pentru producătorul aplicației

2.4. Câștig de pe urma popularității și al publicității

2.5. Un oarecare dezavantaj

Capitolul 3. Tehnologii și limbaje de programare

3.1. Tehnologii server-side

3.1.1. Java, Java EE, Servlet, JSP

3.1.2. PHP

3.2. Tehnologii client-side

3.2.1. Nici o aplicație web fără HTML, CSS și JavaScript

3.2.2. HTML

3.2.3. CSS

3.2.4. JavaScript

3.2.5 JQuery

3.2.6. AJAX

3.2.7. Bootstrap

3.3 Bazele de date

3.3.1. Informații generale

3.3.2. MySQL

Capitolul 4. Aplicația

4.1. Descriere

4.2. Aplicații asemănătoare

4.3. Prezentarea funcționalităților aplicației realizate

4.3.1. Prima pagină

4.3.2. Căutarea trenurilor pentru o rută selectată

4.3.3. Ȋnregistrarea unui utilizator nou

4.3.4. Autentificarea utilizatorilor

4.3.5. Efectuarea unei rezervări

4.4. Cazuri de utilizare

4.4.1. Diagrama cazurilor de utilizare

4.4.2. Specificarea cazurilor de utilizare

4.5. Continuarea proiectului ȋn viitor

Capitolul 5. Concluzii

Bibliografie

Capitolul 1. Aspecte generale

1.1. Introducere

Ȋn prezent, deplasarea dintr-un loc ȋn altul, fie că vorbim despre un alt oraș sau chiar despre o altă țară, ȋși face tot mai des prezența ȋn viața noastră. Indiferent dacă deplasarea este ȋn interes de muncă sau vorbim despre petrecerea timpului liber deseori ne confruntăm cu problema alegerii mijlocului de transport potrivit. Evoluția infrastructurii și a mijloacelor de transport, chiar dacă România nu este un bun exemplu, dar și a standardelor de siguranță, ar trebui să ne facă să alegem trenul ca mijloc de transport. Acesta ne oferă o călătorie rapidă și liniștită pe parcursul căreia putem admira peisajele pe care le străbatem, putem servi masa la vagonul restaurant sau putem să dormim la vagonul cușetă sau de dormit pentru a fi sută la sută odihniți când vom ajunge la destinație.

Pentru că trăim ȋntr-o societate ȋn care evenimentele se succed cu o viteză ridicată și ȋn care fiecare oră contează, ne dorim să realizăm cât mai multe lucruri, ȋntr-un timp cât mai scurt, precum: citire/transmitere de e-mail-uri, realizare de documente office, cumpărături, dar și rezervări on-line pentru diferite evenimente sau pentru transport. Ȋn acest sens progresul tehnologic ne ȋntinde o puternică mână de ajutor. Ȋn ultimii ani au apărut pe piață o mulțime de dispozitive mobile, cele mai cunoscute fiind smartphone-urile și tabletele, care ne ajută să ne ȋndeplinim ȋn tocmai planurile. Totuși, pentru a le putea folosi la maximum aceste dispozitive au nevoie de aplicații specifice fiecărui domeniu de utilizare și de legatură la internet.

Creștrea semnificativă a numărului de dispozitive mobile a dus la dezvoltarea de către firmele de specialitate a aplicațiilor care să funcționeze pe tablete și smartphone-uri sau modificarea celor deja existente având ȋn vedere că noile dispozitive nu dispun de resurse hardware la fel de mari ca cele ale unui laptop sau desktop (PC). De asemenea s-a constatat că aplicațiile care deja existau, sub forma de pagini web și care se puteau accesa de pe orice desktop sau laptop conectat la internet trebuie să suporte o modificare ȋn ceea ce priveste conținutul și structurarea informației deoarece noile dispozitive sunt dotate cu ecrane mult mai mici decat 17''(inch), o dimensiune des ȋntalnită in cazul desktop-urilor și al laptop-urilor. Navigarea ȋn cadrul aplicațiilor care nu sunt potrivite ca și rezoluție unui anumit tip de dispozitiv este dificilă din cauza necesității deplasării cu ajutorul scrool-bar-urilor. Această problemă a redimensionării paginilor ȋn funcție de dispozitivul cu care sunt deschise ȋși găsește rezolvare odată cu aplicarea tehnicilor de design web adaptativ sau cu alte cuvinte „responsive web design”. Despre aceste tehnici se va vorbi ȋntr-un capitol următor.

Numărul aplicațiilor web a crescut semnificativ odată cu extinderea rețelelor de internet și cu creșterea numărului de persoane care beneficiază de aceste facilități. Tot odată s-a observat că acest nou mod de stocare și funcționare al aplicațiilor prezintă numeroase avantaje atât pentru utilizatori, dar și pentru firmele din domeniu. Datorită acestor avantaje, care vor fi prezentate ȋntr-un capitol viitor, ȋn momentul de față tot mai multe firme ȋși dezvoltă produsele ȋn această direcție.

1.2. Motivația alegerii temei

Informatica este știința care se ocupă cu procesarea sistematică a informației utilizând ca mijloc calculatoarele. Aceasta ȋși are originile ȋn matematică, iar de la momentul separării lor, informatica a cunoscut o evoluție foarte rapidă dacă este să o comparăm cu alte știinte care ȋși au rădăcinile ȋnaintea erei noastre precum matematica, medicina, etc. Datorită acestei ascensiuni, al numărului mare de descoperiri din domeniu, al faptului că zilnic apare ceva nou și a faptului că informatica este prezentă ȋn foarte multe alte domenii, contribuind la dezvoltarea lor, aceasta știință m-a captivat și m-a făcut să doresc să aprofundez acest domeniu. Desigur, subramurile informaticii sunt numeroase, iar prezentarea lor ȋntr-o singură lucrare este imposibilă, iar dacă totuși s-ar ȋncerca acest lucru am fi supuși riscului de a omite destul de multe aspecte ale acestui domeniu.

Din multitudinea de materii studiate ȋn cadrul celor trei ani ȋn care am fost student al Facultății de matematică și informatică, specializarea informatică, din cadul Universiții Babeș-Bolyai, două din ele mi-au atras atenția ȋn mod special și am dezvoltat o pasiune pentru acestea: „Programarea Web” și „Design Web și Optimizare”. Lucrurile ȋnvățate aici stau la baza dezvoltării aplicațiilor web, al caror număr este ȋntr-o continuă creștere ȋn mometul de față datorită numeroaselor avantaje oferite.

O pasiune care nu are legătură cu dezvoltarea profesională este cea legată de trenuri. Fiind o persoană activă ȋmi place să călătoresc și ȋn general aleg trenul ca mijloc de transport. Planificându-mi călătoriile și folosind aplicațiile web oferite de către transportatorii feroviari am observat că s-ar putea aduce câteva ȋmbunătățiri și m-am gândit că dezvoltarea lucrării de licență ȋmi oferă posibilitatea să fac acest lucru, ȋn plus oferindu-mi posibilitatea să creez o legătură ȋntre cele două pasiuni pe care le am. Lucrarea de față face obiectul acestei legături, iar din punct de vedere teoretic voi prezenta tehnologiile și limbajele ce stau la baza dezvoltării aplicațiilor web atât din perspectiva clientului web cât și din cea a server-ului care răspunde cererilor clientului ȋn corelație cu partea practică ce reprezintă un model (prototip) de aplicație pentru domeniul prezentat mai sus.

1.3. Definiții și explicații

Aplicație web = este un sistem software bazat pe tehnologiile și standardele World Wide Web (W3C), stocat pe un calculator numit server web si care este disponibil unui client web prin intermediul unui browser de internet respectându-se protocoalele web;[1]

Server web = este un calculator care stochează pagini web, aplicații, baze de date, imagini, etc., care are instalat un program ce primește cereri de la mai mulți clienți, le procesează, iar apoi răspunde clienților transmițându-le informațiile cerute;[2]

Client web = este un calculator care prin intermediul unui browser adresează cereri unui server web. Răspunsul va fi primit tot prin intermediu browser-ului;[3]

Browser sau navigator = este un program care permite comunicarea dintre client si server, afisează răspunsurile primite de la server. Răspunsurile pot consta ȋn pagini web, imagini, muzică, diverse aplicații, etc. Cele mai cunoscute browsere de internet sunt: Microsoft Internet Explorer, Mozila Firefox, Google Chrome, Opera, Safari;[4]

Protocol web = este un set de reguli, un limbaj comun, ce formează un standard asupra modului de comunicare dintre doua calculatoare. Cele mai des folosite protocoale web sunt: HTTP (HyperText Transfer Protocol), HTTPS (Secure HyperText Transfer Protocol sau HyperText Transfer Protocol/Secure), FTP (File Transfer Protocol);[4]

Aplicație stand-alone = este un sistem soft care este instalat și rulează pe un calculator independent, ne fiind necesară o legătură la internet;

URL (adresă uniformă pentru localizarea resurselor) = secvență de caractere standardizată, folosită pentru denumirea, localizarea și identificarea unor resurse de pe internet, inclusiv documente text, imagini, clipuri video, expuneri de diapozitive, etc.;[5]

PC = personal computer sau calculator personal (nu se referă la acele dispozitive de dimensiuni mici cu care se efectuează calcule matematice simple).

Capitolul 2. Avantajele unei aplicații web

Ȋn capitolul anterior la secțiunea „Introducere” am menționat că dezvoltarea aplicațiilor pe web vine cu o serie de avantaje care au determinat dezvoltatorii de soft să se axeze pe această ramură. Ȋn continuare voi prezenta avantajele oferite de aplicațiile web.

2.1. Gradul foarte mare de accesibilitate

A deține o aplicație stocată pe un server oferă posibilitatea oricărui utilizator de internet să accesese acest produs respectând desigur condițiile impuse de proprietarul aplicației respective. De cele mai multe ori el are nevoie de un cont, format dintr-un nume de utilizator și dintr-o parolă și eventual un abonament dacă serviciul accesat este contra cost. Mai mult, datorită existenței dispozitivelor mobile, utilizatorul nu este legat de masa pe care ȋi este așezat calculatorul. El se poate bucura de servicile oferite de aplicație inclusiv pe drumul de acasă spre serviciu, ȋn parc sau oriunde acesta are o legatură la internet.

2.2. Un feed-back mai bun și mai rapid din partea utilizatorilor

Scopul oricărei aplicații este deservirea cerințelor utilizatorilor ei de aceea părerea lor ajută și contează cel mai mult. Aceștia ȋți pot spune cel mai bine ce anume funcționează ȋn cadrul aplicației și ce nu, pot avea sugestii și reclamații la adresa produsului oferit. Fiind o aplicație web mesajele de acest gen se pot transmite rapid, direct din cadrul paginii web, fără alte aplicații intermediare cum este ȋn cazul produselor soft instalate pe calculatoare unde pentru a trimite observațiile trebuie să accesezi un serviciu de e-mail ceea ce necesită timp ȋn plus.

2.3. Costuri scăzute pentru producătorul aplicației

Dacă ȋn cazul aplicațiilor stand-alone, pentru instalarea și mentenanța acestora este necesară deplasarea de personal la locația clientului, ȋn momentul ȋn care vorbim despre o aplicație web, aceste operațiuni se pot efectua de la distanță, direct pe serverul destinat aplicației astfel firma producătoare eliminând costurile necesare deplasării personalului ei. Același lucru este valabil și ȋn momentul ȋn care se face o ȋmbunătățire (un update) al aplicației. Noua versiune este ȋncărcată sau adaugată celei vechi fără a fi nevoie de intervenția utilizatorului, pentru a descărca pachetul ce conține update-ul și a-l instala. Se elimină astfel posibilitatea ajungerii ȋn impas a clientului, iar timpul ȋn care noua versiune este disponibilă se reduce.

2.4. Câștig de pe urma popularității și al publicității

Dacă vorbim despre aplicațiile web destinate publicului larg, precum cele de vânzări on-line, de rezervări, hărți, etc., faptul că site-ul este disponibil non-stop face ca popularitatea lui să crească ceea ce duce la o creștere a imaginii producătorului și chiar la posibile contracte de publicitate. Astfel se poate obține ȋncă o sursă de venit.

2.5. Un oarecare dezavantaj

Pentru că indiferent de ce domeniu discutăm „totul are un preț” există și câteva dezavantaje ale aplicațiilor web. Unul din ele ar fi faptul că informațiile sunt supusentru instalarea și mentenanța acestora este necesară deplasarea de personal la locația clientului, ȋn momentul ȋn care vorbim despre o aplicație web, aceste operațiuni se pot efectua de la distanță, direct pe serverul destinat aplicației astfel firma producătoare eliminând costurile necesare deplasării personalului ei. Același lucru este valabil și ȋn momentul ȋn care se face o ȋmbunătățire (un update) al aplicației. Noua versiune este ȋncărcată sau adaugată celei vechi fără a fi nevoie de intervenția utilizatorului, pentru a descărca pachetul ce conține update-ul și a-l instala. Se elimină astfel posibilitatea ajungerii ȋn impas a clientului, iar timpul ȋn care noua versiune este disponibilă se reduce.

2.4. Câștig de pe urma popularității și al publicității

Dacă vorbim despre aplicațiile web destinate publicului larg, precum cele de vânzări on-line, de rezervări, hărți, etc., faptul că site-ul este disponibil non-stop face ca popularitatea lui să crească ceea ce duce la o creștere a imaginii producătorului și chiar la posibile contracte de publicitate. Astfel se poate obține ȋncă o sursă de venit.

2.5. Un oarecare dezavantaj

Pentru că indiferent de ce domeniu discutăm „totul are un preț” există și câteva dezavantaje ale aplicațiilor web. Unul din ele ar fi faptul că informațiile sunt supuse atacurilor cibernetice tot mai des ȋntalnite ȋn zilele noastre, iar pentru a putea sta liniștiți trebuie să investim ȋntr-un plan competitiv de securitate ceea ce ar putea implica un anumit cost suplimentar. De asemnea există posibilitatea unei defecțiuni tehnice a serverului fapt care ar putea duce la paralizarea completă a activității ȋn cadrul aplicației. Din fericire acest minus poate fi contracarat prin folosirea unui server secundar.

Capitolul 3. Tehnologii și limbaje de programare

3.1. Tehnologii server-side

3.1.1. Java, Servlet, JSP

ă[6]

standard ale [7]

Componentele standard ale aplicațiilor web dezvoltate ȋn Java sunt servleții și paginile JSP.

Servlet-urile sunt componentele software scrise ȋn Java care sunt folosite pe partea de server pentru a returna rezultate sub formă de documente HTML către clienți. Aceste componente extind funcționalitatea serverului [8]. Mai jos avem structura de bază a unui servlet:

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class UnServlet extends HttpServlet {

  public void doGet(HttpServletRequest request, HttpServletResponse response)

      throws ServletException, IOException {

PrintWriter out;

String title = "Simple Servlet ";

//se seteaza tipul continutului

response.setContentType("text/html");

//se trimite rasuns catre client

out = response.getWriter();

out.println("<HTML><HEAD><TITLE>");

out.println(title);

out.println("</TITLE></HEAD><BODY>");

out.println("<H1>" + title + "</H1>");

out.println("<P>Raspuns de la  UnServlet.");

out.println("</BODY></HTML>");

out.close();

  }

}

Există trei etape pe care orice servlet le va parcurge și anume:

1) Crearea și inițializarea servlet-ului. La ȋncărcarea ȋn memorie se apelează metoda init(ServletConfig cfg);

2) Preluarea cererii de la client și rezolvarea acesteia;

3) Distrugerea servlet-ului și eliberarea memoriei apelând metoda destroy().

Paginile JSP fac parte din tehnologia Java server side și permit folosirea ȋn cadrul aceluiași fisier atât cod Java cât și HTML. Fiecare pagină JSP este transformată dinamic de către container ȋntr-un servlet pe care acesta ȋl compilează automat. Comparativ cu servlet-urile, ȋntr-o pagina JSP codul Java, numit și scriplet, este delimitat de către tag-urile <% și %>, iar codul HTML este plasat direct ȋn pagină fără a mai fi nevoie de apelarea funcției de printare (out.print). Există câteva obiecte ce sunt predefinite ȋn cadrul paginilor JSP [9]:

1) request: Cererea, obiect de tipul HttpServletRequest primit ca parametru ȋn cadrul metodelor doGet() sau doPost();

2) response: Răspunsul, obiect de tipul HttpServletResponse primit ca parametru ȋn cadrul metodelor doGet() sau doPost();

3) session: Sesiunea HTTP, obiect de tipul HttpSession, identic cu cel obținut ȋn cadrul unui servlet cu request.getSession();

4) application: Aplicatia web ȋnsăși, obiect de tipul ServletContext, identic cu cel obtinut ȋn cadrul unui servlet cu request.getSession().getServletContext();

5) page: Referință la obiectul unic servlet generat din pagina curentă JSP;

6) out: Stream de ieșire cu o funcționalitate asemănătoare cu cel obținut ȋn cadrul unui servlet folosind response.getWriter(); este util la afișare din cardrul scriplet-ilor.

3.1.2. PHP

PHP sau Hypertext Preprocessor este un limbaj de programare folosit ȋn special pentru dezvoltarea aplicațiilor web și a paginilor web dinamice. Originea limbajului PHP se regăsește ȋn anul 1994 când programatorul Rasmus Lerdorf scria o serie de script-uri Perl, ȋn interes personal, pentru a determina câți vizitatori strânge pagina sa web. Mai târziu aceste script-uri au fost rescrise ȋn C, iar datorită faptului că erau destul de complexe ȋncât să poată interacționa cu bazele de date și cu formele HTML, Rasmus Lerdorf decide ca implementarea să poarte numele de „Personal Home Page / Forms Interpreter. Astfel ia naștere PHP/FI. Acest proiect open-source a luat amploare dupa apariția ȋn 1998 a versiunii 3.0, o nouă versiune a interpretorului PHP. Ȋn anul 2000 a fost lansat PHP 4.0 având la bază Zend Engine 1.0. PHP 5 a fost lansat ȋn vara anului 2004, iar ca și noutate această versiune a adus o mai mare pronunțare a orientării obiect, suport ȋmbunătățit pentru MySQL și MSSQL, controlul erorilor prin tratarea de excepții, etc. Versiunea aceasta are la bază Zend Engien II. Ultima versiune, PHP 6, la care ȋncă se lucrează și care va fi disponibilă după scoaterea din uz a versiunii PHP 4.

Datorită caracteristicilor sale, PHP este unul din cele mai populare limbaje de programare server-side. Sintaxa limbajului combină sintaxele unor limbaje precum Perl sau C, făcând astfel din PHP un limbaj familiar. Este simplu și eficient deoarece nu necesită includerea de biblioteci și folosește mecanisme de alocare a resurselor. Există un set flexibil și eficient de măsuri de siguranță, ceea ce ȋi conferă PHP-ului statutul de limbaj sigur. De asemenea este un limbaj flexibil deoarece este modularizat pentru a ține pasul cu diferitele tehnologii și poate fi integrat pe multe tipuri de server: Apache, IIS, Zeus, etc. La fel ca la ȋnceput, PHP este open-source ceea ce a dus la o adaptare rapidă la nevoile web-ului, a crescut eficiența și securizarea codului.[10]

Fișierele PHP au extensia .php. Ele conțin și cod HTML, iar cel PHP se definește cu ajutorul tag-urilor <?php și ?>. Mai jos avem un exemplu simplu al unui fișier .php care rulat pe server va afișa cu ajutorul funcției echo mesajul dintre ghilimele:

<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>

La fel ca ȋn orice limbaj de programare, ȋn PHP se pot utiliza variabile. Acestora nu trebuie să le fie precizat tipul pentru că acest lucru se face automat ȋn funcție de valoarea pe care o are variabila. Declarearea variabilelor se face prin folosirea simbolului $.

<?php

$avion = "Airbus";

$numar = 380;

?>

Variabilele din PHP pot fi de 3 tipuri: globale, locale și statice. La fel ca ȋn alte limbaje, variabilele globale sunt cele declarate ȋn afara funcțiilor, doar că aici ele nu sunt accesibile din interiorul nici unei funcții. Variabilele locale sunt cele declarate și valabile ȋn interiorul funcției unde au fost declarate, iar variabilele statice ȋși păstrază valoarea chiar dacă s-a terminat de executat funcția ȋn interiorul căreia a fost definită.

Tipurile de date interne din PHP sunt: boolean, integer, float, string, null, etc.

Funcțiile ȋn PHP se definesc cu ajutorul cuvântului rezervat function, iar pentru a returna o valoare se va folosi cuvântul return:

function numeFunctie(arg1, arg2, … , argn){

bloc de instructiuni ce se vor executa la apelul funcției;

return rezultat;

}

Ȋn cadrul limbajului PHP avem posibilitatea de a utiliza instrucțiuni condiționale (if, if/else, switch) și repetitive (for, foreach, while, do/while), sintaxa lor fiind asemănătoare cu cea din alte limbaje.

Comentarile se definesc folosind simbolurile //.

Variabilele $G LOBALS, $_, $_POST sunt câteva din așa numitele variabile superglobale (Superglobals). Acestea sunt predefinite și pot fi accesate de oriunde din script-ul PHP. $_ și $_POST sunt cele mai des ȋntâlnite deoarece cu ajutorul acestora se accesează informații trimise din interiorul unei forme HTML. Diferența dintre cele două este aceea că informațiile transmise folosind prima variabilă vor fi vizibile ȋn cadrul URL-ului. Acest lucru poate compromite securitatea parolelor și a altor informații confidențiale.

<html>
<body>
<form action="send.php" method="get">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
<input type="submit">
</form>
</body>
</html>

URL: …wamp/www/send.php?name=Ion&password=test

<html>

<body>
<form action="send.php" method="post">

………

</form>

</body>

</html>

URL: … /wamp/www/send.php

Variabila $_SERVER reține informații precum adresa IP a serverului, versiunea serverului, locația script-ului, etc.

3.2. Tehnologii client-side

3.2.1. Nici o aplicație web fără HTML, și JavaScript

Dacă ȋn momentul ȋn care am vorbit despre implementarea funcționalitățiilor unei aplicații web sau partea de server a aplicației, am avut posibilitatea de a alege din mai multe tehnologii, ȋn cazul structurării conținutului și al designului aplicației trebuie să urmăm o cale bine stabilită.

Fig. 3.1 HTML, CSS, JS ȋn orice pagina web

Ȋn momentul accesării aplicației web calculatorul nostru devine, prin intermediul browserului, un client al serverului care gazduiește aceea aplicație adresându-i acestuia una sau mai multe cereri. Serverul va răspunde cererii inițiale prin returnarea paginii web dorite de client. Acest răspuns este compus din două componente: structură și design. Structura reprezintă modul ȋn care informația din pagina web este prezentată clientului, văzută din perspectiva așezării ȋn pagina: paragrafe, fonturi, tabele, liste, etc. De această structură se ocupa limbajul de marcare HTML (HyperText Markup Language). -ul (Cascading Style Sheets) se ocupa de partea ce ține de aspect: culori, imagini de fundal, margini rotunjite, etc.; Acesta este un standard dezvoltat pentru a controla modul de afișare a elementelor dintr-o pagină web, cu alte cuvinte formatarea elementelor unui document HTML. Deși JavaScript s-ar putea ȋncadra și capitolul tehnologiilor server-side, deoarece acest limbaj de programare introduce funcționalități ȋn paginile web, acesta face parte din limbajele dedicate client-side pentru că funcționalitățiile introduse sunt vizibile și accesibile direct ȋn cadrul paginii web ne fiind necesară transmiterea unei cereri către server. Aceste trei limbaje stau la baza oricărei aplicații web, iar o descriere mai detaliată a acestora se va face ȋn secțiunile urmatoare.

3.2.2. HTML

HTML sau HyperText Markup Language este un limbaj de marcare folosit pentru afișarea paginilor web ȋntr-un browser. Acest limbaj se utilizează din 1990 perioadă ȋn care ȋncepeau să apară primele pagini web ce conțineau la ȋnceput doar text. De atunci și până ȋn prezent limbajul a cunoscut mai multe versiuni, ultima fiind cea de HTML 5 lansată ȋn toamna anului 2011, dar care este ȋn curs de dezvoltare. Totuși cea mai uzuală versiune rămâne cea lansată ȋn decembrie 1997 și anume 4.0 la care s-au adăugat ultimele modificari ȋn 2001 trecându-se astfel la versiunea 4.01. HTML 4.01 are trei variante: Strict, Transitional, cea mai folosită și Frameset. [11]

Pe lângă informația sub formă de text sau imagine pe care dorim să o afișăm, HTML mai conține și elemente care marchează această informație. Aceste marcaje sunt asemenea unor instrucțiuni pe care browserul web le va citi, le va interpreta și astfel va putea să afișeze ȋn fereastra sa pagina dorită de noi. Orice pagină web conține astfel de margaje numite și etichete sau tag-uri. Cele mai multe tag-uri sunt pereche, ele fiind formate dintr-o etichetă de ȋnceput (<etichetă>) și o alta care marchează sfârșitul tag-ului (</eticheta>). Iată câteva exemple: <html>…</html>, <title>…</title>, <p>…</p>, etc. Totuși există și câteva marcaje care nu sunt pereche. De exemplu tag-ul asociat inserării unei imagini ȋn documentul nostru, <img … > sau inserearea unei legături (link) spre o locație din afara documentului nostru, <link … >. De asemenea, elementele HTML pot conține și atribute. Rolul atributelor este de a preciza informații adiționale despre elementul din care fac parte. Ele apar întotdeauna în tag-ul de început, după numele elementului și se găsesc sub forma de nume_atribut="valoare_atribut". Există și excepții ȋn cazul atributelor. De exemplu atributul ismap al tag-ului <img … > care nu are valoare, simpla apariție a sa este suficientă pentru ca browserul să ȋl poată citi. Există și atribute care se folosesc cu preponderență și ele sunt comune multor tag-uri. Acestea sunt id și class. Ele sunt folosite atunci când se dorește stilizarea elementului ce le conține cu ajutorul limbajului . Primul atribut ne ajută să identificăm un element exact din cadrul paginii ȋn timp ce al doilea ne facilitează gruparea mai multor elemente ce dorim să fie asemanătoare [11]. De exemplu:

<p id="text1">Salut</p>

<p>Salut</p>

Se poate observa că avem aceleași două cuvinte ȋn fiecare din tag-urile <p>. Singura diferență este aceea că primul tag are setat atributul id.

#text1 {

color: blue;

}

Mai sus avem un fragment de cod care se va aplica elementului cu id-ul #text1. Rezultatul:

Salut

Salut

Pentru atributul class avem următorul exemplu:

<p class="c1">Andrei</p> <!–paragraf–>

<h3 class="c1">Bogdan</h3> <!–header–>

.c1 {

color: red;

}

Rezultatul:

Andrei

Bogdan

Ȋn continuare va fi prezentată structura generală a unui document HTML.

<!DOCTYPE html>

<html>

<head>

<title>Titlul paginii</title>

</head>

<body>

<p>Conținutul efectiv al paginii</p>

</body>

</html>

Se poate observa că structura unui document HTML este formată din 3 părți. Prima linie a documentului este dedicată precizării versiunii de HTML folosită. Ȋn cazul de față <!DOCTYPE html> specifică faptul că documentul este scris ȋn HTML 5. Se pot folosi și alte versiuni, moment ȋn care prima linie va arăra altfel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> pentru versiunea 4.01 Strict;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> pentru versiunea 4.01 Transitional;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> pentru versiunea XHTML 1.1.

Ȋntregul conținut al paginii se va regăsi ȋntre marcajele <html> și </html>.

Spațiul cuprins ȋntre marcajele <head> și </head> este rezervat mai multor tipuri de declarații. Cele mai des ȋntâlnite sunt petru titlu, meta, stil (style) și script.

<title>Titlul paginii</title> – ȋntre aceste marcaje se va regăsi titlul paginii web care va fi afișat ȋn browserul de internet;

<meta …> – ȋn cadrul acestui marcaj pot fi adăugate informații referitoare la pagina web. Aceste informații nu vor fi vizibile ȋn browser, dar sunt accesibile lui. De obicei ȋn cadrul acestui marcaj sunt adăugate cuvinte cheie pentru pagina web, o descriere a paginii, numele autorului și ultima modificare efectuată;

<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>

Ȋn interiorul marcajului style se pot seta aspecte ale designului paginii web, dar cel mai bine este ca stilurile folosite să fie separat, ȋntr-un alt fișier, cu extensia .css care va fi menționat ȋn sectiunea head cu ajutorul tag-ului link:

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

<script type="text/javascript" src="jquery.min.js"></script>

Ȋn cadrul tag-ului script se vor menționa locațiile externe precum biblioteci de funcții JavaScript sau JQuery.

Fig. 3.2 Structura documentului HTML

Elementul <body> apare după tag-ul <head> și conține partea de pagină care se vede în fereastra principală a browser-ului. În interiorul acestuia se poate află orice, de la serii de paragrafe până la forme, imagini, tabele, etc. Iată câteva din cele mai uzuale tag-uri:

<p>…</p> – marchează un paragraf;

<button type="button">Click Me!</button> – reprezintă un buton ce va putea fi apăsat;

<div>…</div> – reprezintă o anumită secțiune din documnetul HTML;

<form action="demo.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form> – delimitează o zonă ȋn care utilizatorul v-a putea introduce câteva date, iar vând se va apăsa butonul submit se va rula fisierul demo.php, datele fiind transmise prin metoda get.

<table>
  <tr>
    <th>…</th>
  </tr>
  <tr>
    <td>…</td>
  </tr>
</table> – mai sus este prezentată structura de bază a unui table in HTML. Tag-ul <table>…</table> marchează ȋnceputul și sfârșitul tabelului, <th>…</th> reprezintă capul de tabel, <tr>…</tr> delimitează un rând, iar <td>…</td> o coloană;

<ol>

<li>…</li>

<li>…</li>

</ol> – reprezintă o lista ordonata, iar <li>…</li> un item din acea listă. Există de asemena și marcajul pentru o lista neordonată. Acesta este:

<ul>

<li>…</li>

</ul>

Pe lângă tag-urile prezentate mai sus mai există nenumărate altele. Acestea se pot studia din diverse resurse atât web cât și tipărite.

a

3.2.3. CSS

este abrevierea de la Cascading Style Sheets și reprezintă un standard ȋn formatarea elementelor unui document HTML.[12]

Deși de cele mai multe ori găsim -ul ȋn strânsă legătură cu HTML-ul, el mai poate fi utilizat și la formatarea documentelor XML și XHTM. -ul se ocupă în general cu aspectul și controlul grafic al elementelor din pagină, cum ar fi: textul, imaginile, fondul, culorile și așezarea acestora în cadrul ferestrei paginii. folosește stiluri, acestea înglobează, sub un anumit nume, atribute de formatare care se aplică asupra unui element individual din pagină, asupra unui grup de elemente sau la nivelul întregului document. Acest lucru ajută foarte mult ȋn momentul ȋn care se dorește să se facă o modificare de ordin estetic ȋn cadrul unei pagini web. Pur și simplu se va lucra ȋn interiorul fișierului .css rareori intervenindu-se asupra celui .html. Astfel timpul și costul realizării modificărilor va fi mai mic. Ȋmpărțirea paginii web ȋn documentul de structură și ȋn cel de design ba chiar și ȋn cel care conține anumite script-uri ajută la ȋntelegerea mai usoară a documentelor respective. Imaginați-vă ce s-ar ȋntâmpla dacă toate aceste fișiere ar fi unite intr-unul singur? Cine ar mai putea descifra ceea ce se află ȋn document?[12]

Cum separarea stilului de conținut nu este ȋncă o regulă

[13]

[13]

[13]

[13]

[14]

ă

3

4 Validarea formei folosind JavaScript

[15]

[15]

.[15]

[16]

[16]

[16]

[16]

T

[17]

5

[18]

Mai jos avem o imagine ce ne arată un mod ȋn care poate arăta un filtru ȋntr-o aplicație ce se ocupă cu găzduirea de filme.

6

[19]

[19]

pxpx

7

3.3 Bazele de date

3.3.1. Informații generale

Aplicațiile de dimensiuni mari, care sunt accesate de către un număr mare de utilizatori și care oferă funcționalități multiple au nevoie ca informațiile folosite să fie „depozitate„ undeva. Bazele de date reprezintă o alegere bună. Acestea oferă posibilitatea stocării informaților și a datelor pe un suport extern, extinderea lor și o viteză mare cu care datele pot fi regăsite, acesta fiind puncul lor forte. Chiar dacă ȋn primă instanță bazele de date pot părea o chestiune simplă și usor de folosit, această impresie este rapid schimbată deoarece lucrul cu cantități mari de date, de ordinul milioanelor de elemente, care trebuie să poată fi accesate rapid de către mii de utilizatori prin intermediul internetului, nu este deloc o treabă ușoară. La aceasta se mai adaugă și nevoia disponibilității non-stop.

De cele mai multe ori baza de date este memorată ȋnr-un anumit număr de fișiere, ȋn funcție de marimea și caracteristicile ei. Aceste fișiere sunt manipulate cu ajutorul sistemelor de gestiune a bazelor de date.

Există mai multe tipuri (modele) de baze de date: modelul ierarhic, modelul XML (cel mai nou), modelul orientat obiect și cel relațional. Cel din urmă este cel mai utilizat, datele fiind memorate sub formă de tabele, iar baza de date relațională conține de asemenea indecși, proceduri stocate, declanșatori, utilizatori sau grupuri de utilizatori, tipuri de date, dar și mecanisme de securitate și de gestiune a tranzacțiilor.

Sistemele de gestiune a bazelor de date sau SGBD reprezintă totalitatea programelor utilizate pentru crearea, interogarea și ȋntreținerea unei baze de date. SGBD-urile pun la dispoziția utilizatorilor două interfețe și anume cea de definire a bazei de date și cea de utilizare a ei.

3.3.2. MySQL

MySQL este cel mai popular sistem de gestiune a bazelor de date relaționale produs de suedezii de la MySQL AB. Acest SGBD este open-source distribuit sub licență publică GNU și este o componentă cheie a stivei LAMP/WAMP (Linux/Windows, Apache, MySQL, PHP).

Ȋn general MySQL este folosit ȋmpreună cu limbajul de programare specific aplicațiilor web, PHP. Totuși există multe scheme API disponibile astfel ȋncât se pot dezvolta aplicații ȋn orice limbaj precum C, C++, C#, JAVA, Perl, Pyton, etc. MyODBC este o interfață ce permite limbajelor de programare să interacționeze cu bazele de date MySQL. Un bun exemplu ȋn acest caz este ASP sau Visual Basic. MySQL poate rula pe majoritatea platformeor software existente.

Administrarea bazelor de date MySQL se poate face fie din modul linie de comandă fie prin interfață grafică descărcată de pe internet. O astfel de aplicație este MySQL Administrator și MySQL Query Browser. Un alt instrument de managment al acestor baze de date este și aplicația phpMyAdmin care este scrisă ȋn PHP și este disponibilă gratuit.

Capitolul 4. Aplicația

4.1. Descriere

Aplicația realizată este destinată publicului larg, tuturor celor care doresc să ȋși planifice o călătorie sau pur și simplu să se informeze ȋn legătură cu servicile de transport feroviar oferite de căte firma care deține și acest produs (firma este una fictivă). Aplicația web este disponibilă ȋn mod gratuit și se poate accesa de pe orice dispozitiv conectat la internet fără a se ȋntâmpina probleme de afișaj, grație folosirii tehnologiilor destinate dezvoltării web adaptative.

Odată ajuns pe prima pagină utilizatorul dispune de un motor de căutare prin intermediul căruia va vedea ce trenuri sunt disponibile ȋntre localitățile de plecare și sosire al căror nume le-a introdus ȋnainte de a ȋncepe căutarea. De asemenea, ȋn partea de sus a ecranului utilizatorul poate vedea câteva fotografii prin intermediul cărora ȋși va putea da seama de calitatea servicilor oferite și de logistica de care dispune operatorul de transport. Totuși, pentru realizarea de rezervări la un anumit tren, utilizatorul va trebui să se autentifice ȋn cadrul aplicației cu un cont creat ȋn prealabil. Acestea ar fi ȋn mare facilitățile oferite de aplicație, iar ȋntr-o secțiune viitoare se va face o prezentare mai amplă a acestora.

Ȋn cadrul realizării aplicație web s-au folosit mai multe tehnologii printre care HTML pentru structurarea paginilor, pentru stilizarea lor, JavaScript și JQuery pentru diverse funcționalități precum afișarea imaginilor ȋn cadrul unui slide-show, iar pentru partea de responsive web design s-a folosit Bootstrap. Toate acestea se regăsesc ȋn partea de client a aplicației. Ȋn ceea ce privește partea de server s-a folosit limbajul PHP, iar bazele de date sunt gestionate de către MySQL. Aplicația rulează local pe un server Apache care este oferit ȋmpreună cu sistemul de gestiune al bazelor de date, MySQL și cu limbajul PHP de către WAMP server, o platformă sub Windows dedicată dezvoltării de aplicații web dinamice.

4.2. Aplicații asemănătoare

Trenul reprezintă de mult timp un important mijloc de transport. Astfel, odată cu dezvoltarea tehnologiilor web au apărut și aplicațile destinate acestui sector. Ȋn continuare voi prezenta aplicația web oferită de către Călători, operatorul de transport feroviar de persoane din România.

Călători este principalul operator de transport feroviar de călători din România. Acesta a luat naștere ȋn anul 1998 ȋn urma reoganizării fostului . Pentru a face mai accesibile informațiile referitoare la trenurile puse la dispoziție, Călători oferă publicului larg o aplicație web care este disponibilă la adresa www.cfrcalatori.ro. Această aplicație este dezvoltată de către societatea comercială Informatică Feroviară, principalul producător și furnizor de servicii software pentru transporturile pe calea ferată.

Fig. 4.1 Prima pagină a www.cfrcalatori.ro

După cum se poate observa ȋn imaginea de mai sus, aplicația este compusă din mai multe secțiuni. Un motor de căutare a trenurilor ȋn funcție de localitățile de plecare și sosire, ȋn partea stângă, un meniu vertical ȋn partea dreaptă, iar ȋn partea de jos sunt zonele dedicate sondajelor, comunicatelor de presă și al noutăților. Ȋn partea stângă sus se găsește un buton Cumpără Bilete . Prin apăsarea acelui buton vom ajunge la o pagină de logare. De aici vom ajunge la pagina dedicată cumpărării de bilete online.

Pentru efectuarea unei rezervări trebuie să urmăm mai mulți pași, fiecare din el având dedicată o altă pagina web

Fig. 4.2 Alegerea rutei și a datei călătoriei

După ce am selectat data și ruta dorită și apăsat butonul ȋnainte vom fi redirecționați spre pagina unde vor fi afișate trenurile disponibile. Ȋn dreptul fiecărui tren avem două legaturi: info-preț și cumpăr. Prin selectarea celei de-a doua vom fi redirecționați spre pagina unde vom alege căte bilete dorim să cumpărăm și de ce tip să fie acestea. Ȋn cazul alegerii vagonului cușetă cu 6 locuri, avem posibilitatea de a preciza unde am dori să avem locul (sus, mijloc sau jos), doar că nu știm dacă va fi disponibil acel loc, repartizarea făcându-se ȋn limita disponibilității. După acestă fază, trebuie să completăm numele și prenumele nostru și să apăsăm un nou buton cumpără, apoi vom fi redirecționați spre pagina unde vom efectua plata.

Fig. 4.3 Alegerea trenului dorit Fig. 4.4 Alegerea tipuli de bilet

Faptul că nu avem o afișare ȋn timp real a disponibilității locurilor, idiferent de vagon, aduce un minus destul de mare rezervării online de bilete. Ȋn acest caz noi rezervăm locul, dar nu știm și alte detalii precum cât de aglomerat ar fi compartimentul ȋn care suntem repartizați.

După cum se poate observa din imaginile prezentate, paginile web ale acestei aplicații sunt destul de ȋncărcate. Se folosește un stil ȋnghesuit de aranjare ȋn pagină, iar după părerea mea funcționalitățile principale nu sunt destul de evidențiate ȋn special ȋn cadrul primei pagini. De asemenea s-ar putea face mai atractivă secțiunea destinată rezervării de bilete online prin adăugarea unor elemente funcțional-estetice care să ȋi permită utilizatorului o mai mare mobilitate și libertate ȋn acțiunea sa de rezervare a unui loc.

4.3. Prezentarea funcționalităților aplicației realizate

Studiind aplicațile web din domeniul transportului feroviar de călători, atât cele din țară, dar și câteva din străinătate, am ajus să le descopăr punctele tari și punctele slabe. Odată cu necesitatea realizării lucrării de licență mi-am dat seama că aceasta ar fi un bun prilej de a crea o legătură ȋntre pasiunea mea legată de programarea web și pasiunea pentru domeniul feroviar. Astfel m-am hotărât să prezint ideile care după părerea mea ar aduce multe benieficii precum un grad mai mare de ȋndeplinire a dorințelor utilizatorilor, o navigare mai ușoară ȋn cadrul paginii web și tot odată creșterea numărului utilizatorilor ceea ce ȋnseamnă un grad mai mare de popularitate.

4.3.1. Prima pagină

Se cunoaște foarte bine faptul că prima impresie este importantă și ca utilizatorul dorește să ajungă ȋn locul dorit (ȋn cadrul paginilor web) ȋntr-un timp cât mai scurt și fără prea multe acțiuni. De aceea, pentru aplicația mea am adoptat un stil de aranjare ȋn pagină aerisit, facilitând astfel navigarea cu ușurință ȋn cadrul paginii. Ȋn acest sens prima pagină conține cinci elemente.

Ȋn partea superioară se găsește o prezentare de imagini ce se ȋntinde pe toată lățimea paginii și care ocupă aproximativ 25% din ȋnălțimea unei pagini web (așa cum apare ea afișată ȋn browser). Ȋn cadrul acestei prezentări apar imagini reprezentând atât interiorul cât și exteriorul mijloacelor de transport folosite, pentru ca viitorii clienți să ȋși poată face o idee ȋn legătură cu gradul de confort oferit de către companie.

Așezat imediat sub galeria de imagini, o bară orizontală de meniu ȋi va oferi utilizatorului posibilitatea de a vedea rutele pe care operează compania, tarifele de călătorie ȋn funcție de tipul biletului și de distanța parcursă, o galerie mai vastă de imagini, etc.

Fig. 4.5 Galeria foto și meniul

Următoarea secțiune a paginii este dedicată zonei de căutare a trenurilor pentru o anumită rută și pentru autentificarea sau după caz ȋnregistrarea utilizatorului pentru a putea efectua rezervări la un anumit tren. Astfel ȋn parte stângă a paginii vom avea motorul de căutare al trenurilor, format din 3 câmpuri și un buton de căutare, caută trenuri. Cele trei câmpuri sunt cele pentru alegerea stației de plecare, al stației de destinație și cel pentru alegerea datei călătoriei. Pentru alegerea datei dorite utilizatorul va avea acces la un calendar implementat folosind un pachet JQuery. Ȋn partea dreaptă, simetric față de axa verticală a paginii avem zona de autentificare formată din două câmpuri, unul pentru introducerea numelui de utilizator și celălalt pentru introducerea parolei. Mai jos este plasat butonul de conectare. Pentru utilizatorii fără cont, sub acestă zonă există o legătură, prin butonul creează cont, spre pagina unde se poate face ȋnregistrarea unui utilizator nou.

Ȋn cele din urmă, ȋn partea de jos a paginii avem o secțiune dedicată anunțurilor. Aici vor fi postate de către companie eventuale anunțuri ȋn legătură cu trenuri suplimentare sau anulate, reduceri de preț sau introducerea de noi facilități pentru călători.

Datorită proiectării aplicației folosind tehnologiile pentru paginile web adaptative, conținutul afișat va fi diferit ȋn funcție de dispozitivul de pe care se accesează pagina. De exemplu utilizatorii de desktop sau laptop vor vedea ȋntreg conținutul menționat mai sus, dar cei care utilizează tablete sau smartphone vor vedea doar esențialul paginii și anume motorul de căutare și zona de autentificare, dar acestea vor fi dispuse vertical.

Fig. 4.6 Pagina principală a aplicației

4.3.2. Căutarea trenurilor pentru o rută selectată

Căutarea trenurilor disponibile pentru o anumită rută este principala funcționalitate a aplicației web. Pentru a intra ȋn posesia informaților dorite utilizatorul indiferent dacă este ȋnregistrat pe site sau este un simplu vizitator trebuie să meargă la motorul de căutare al trenurilor, să introducă numele celor două localități ȋntre care va avea loc călătoria, să aleagă data călătoriei și să apese pe butonul caută trenuri. După aceste acțiuni, utilizatorul va fi redirecționat către pagina ȋn care se afișează trenurile disponibile. Ȋn cadrul acestei pagini vor putea fi vizualizate informații precum rangul și numărul trenului, durata călătoriei, distanța și prețul. Ȋn cazul ȋn care motorul de căutare este accesat de către un utilizator ȋnregistrat, pe lângă informațile de mai sus el va mai avea posibilitatea de a efectua o rezervare la trenul dorit.

Fig. 4.7 Motorul de căutare al trenurilor

4.3.3. Ȋnregistrarea unui utilizator nou

Ȋnregistrarea unui utilizator nou se face accesând secțiunea crează cont de sub zona de autentificare. Ȋn următoarea pagină va apărea un formular ce trebuie completat cu datele utilizatorului și după ce se va face o verificare dacă toate câmpurile au fost completate cu date corecte ca și tip și dacă numele de utilizator introdus nu este deja folosit, prin apăsarea butonului ȋnregistrare contul va fi creat și adăugat ȋn baza de date. Ȋn cadrul aplicației fiecare utilizator ȋnregistrat are un nume de utilizator unic.

Fig. 4.8 Tabela utilizatori din baza de date

Fig. 4.9 Forumularul de ȋnregistrare

4.3.4. Autentificarea utilizatorilor

Autentificarea utilizatorilor se face pe baza numelui de utilizator și al parolei pe care aceștia le-au completat la crearea contului. După autentificare, utiliatorul va fi redirecționat către motorul de căutare al trenurilor.

Fig. 4.10 Formularul de autentificare

4.3.5. Efectuarea unei rezervări

Efectuarea rezervărilor este disponibilă doar utilizatorilor autentificați. Aceștia trebuie să ȋși aleagă unul din trenurile disponibile pentru ruta aleasă și să apese pe butonul rezervă bilet. După efecuarea acestui pas, utilizatorul va fi redirecționat către o pagină unde vor fi vizibile datele referitoare la trenul ales și unde va vedea compunerea (numărul de vagoane și tipul lor) trenului sub forma de imagini. Acesta va putea să ȋși aleagă vagonul dorit prin selectarea acestuia moment ȋn care va apărea dispunerea locurilor ȋn vagon și dacă acestea sunt ocupate sau nu.

Fig. 4.11 Selectarea vagonului dorit

Locurile libere vor avea culoarea verde, cele ocupate roșu, iar cele selectate de utilizator vor fi de culoare galbenă. Disponibilitatea locurilor va fi ȋn timp real pentru toate trenurile, astfel eliminându-se redistribuirea pe alt loc decât cel dorit, iar imediat după ce un loc v-a fi rezervat, acesta se va colora ȋn roșu pentru ceilalți utilizatori.

Fig. 4.12 Dispunerea locurilor selecatate ȋn compartiment

După selectarea manuală a locurilor și al tipului biletelor, se va afișa prețul comenzii, iar utilizatorul va avea de ales dacă plătește online, ȋn acest caz fiind redirecționat spre pagina destinată plăților sau dacă dorește ridicarea personală a biletelor cu cel puțin 30 de minute ȋnaintea plecării trenului de la chișeul din gară. Ȋn cazul plății online acesta va primi un cod al comenzii ȋmpreună cu un document ce conține detaliile legate de comandă, cu acest document prezentându-se la urcarea ȋn tren la controlorul de bilete.

4.4. Cazuri de utilizare

4.4.1. Diagrama cazurilor de utilizare

Diagrama cazurilor de utilizare este o reprezentare grafică a interacțiunii dintre utilizatori și aplicație. Mai jos avem diagrama cazurilor de utilizare ale aplicație dezvoltate și prezentate ȋn paragrafele anterioare.

Fig. 4.13 Diagrama cazurilor de utilizare

4.4.2. Specificarea cazurilor de utilizare

Specificarea cazului de utilizare: Accesare motor de căutare – vizitator

Descriere: Utilizatorul caută trenurile pentru ruta dorită.

Precondiții: Utilizatorul a accesat pagina web.

Postcondiții: Utilizatorul a găsit trenurile pentru ruta dorită.

Scenariu:

1. Utilizatorul accesează pagina web;

2. Utilizatorul introduce stația de plecare;

3. Utilizatorul introduce stația de sosire;

4. Utilizatorul selectează data călătoriei;

5. Utilizatorul apasă butonul Caută trenuri;

6. Aplicația afișează trenurile pentru acea rută.

Specificarea cazului de utilizare: Citește anunțuri

Descriere: Utilizatorul citește anunțurile din rubrica destinată acestui lucru.

Precondiții: Utilizatorul a accesat pagina web.

Postcondiții: Utilizatorul a citit anunturile dorite.

Scenariu:

1. Utilizatorul accesează pagina web;

2. Utilizatorul accesează un mesaj din rubrica Anunțuri;

3. Utilizatorul citește anunțul.

Specificarea cazului de utilizate: Ȋnregistrare

Descriere: Utilizatorul ȋși crează un cont ȋn cadrul aplicație.

Precondiții: Utilizatorul apasă butonul Crează cont.

Postcondiții: Utilizatorul și-a creat cont ȋn cadrul aplicației.

Scenariu:

1. Utilizatorul accesează pagina web;

2. Utilizatorul accesează pagina de ȋnregistrare apăsând butonul Crează cont;

3. Utilizatorul introduce datele sale ȋn cadrul formularului;

4. Utilizatorul apasă butonul Ȋnregistrare;

5. Dacă datele introduse au fost complete și corecte, aplicația creează un cont și redirecționeaza clientul pe pagina principala.

Scenariu alternativ:

5a. Datele nu sunt corecte sau numele de utilizator există deja.

Specificarea cazului de utilizare: Autentificare

Descriere: Utilizatorul se autentifică ȋn cadrul aplicației pentru a putea face rezervări online.

Precondiții: Utilizatorul deține un cont ȋn cadrul aplicației.

Postcondiții: Utilizatorul este redirecționat spre motorul de căutare dedicat utilizatorilor autentificați.

Scenariu:

1. Utilizatorul accesează pagina web;

2. Utilizatorul introduce numele său de utilizator și parola;

3. Utilizatorul apasă butonul Autentificare;

4. Utilizatorul este redirecționat spre motorul de căutare dedicat utilizatoriloi autentificați.

Specificarea cazului de utilizare: Accesare motor de căutare

Descriere: Odată autentificat, utilizatorul caută trenul la care dorește să rezerve un bilet.

Precondiții: Utilizatorul s-a autentificat.

Postcondiții: Utilizatorul găsește trenul la care dorește să facă rezervare.

Scenariu:

1. Utilizatorul introduce stația de plecare;

2. Utilizatorul introduce stația de sosire;

3. Utilizatorul selectează data călătoriei;

4. Utilizatorul apasă butonul Caută trenuri;

5. Aplicația afișează trenurile pentru acea rută.

Specificarea cazului de utilizare: Rezervă bilet

Descriere: Utilizatorul va rezerva un bilet la trenul dorit.

Precondiții: Utilizatorul este autentificat și a folosit motorul de căutare pentru a găsi trenul dorit.

Postcondiții: Utilizatorul a reușit să facă rezervarea.

Scenariu:

1. Utilizatorul selectează trenul dorit;

2. Utilizatorul alege vagonul ȋn care dorește să călătorească;

3. Utilizatorul alege locul dorit;

4. Utilizatorul selectează tipul biletului;

5. Utilizatorul alege să ridice personal biletele;

6. Finalizează comanda.

Scenariu alternativ:

5a. Utilizatorul plătește online biletele;

6a. Utilizatorul primește pe e-mail un document ce conține detaliile rezervarii;

7. Finalizează comanda.

4.5. Continuarea proiectului ȋn viitor

Această lucrare ȋmpreună cu aplicația dezvoltată constituie o premiză a unui proiect mai amplu ce se va dezvolta ȋn viitor. Ȋn acest sens se va avea ȋn vedere implementarea funcționalităților ce implică informații ȋn timp real, precum selectarea unui anumit vagon (ȋn unele zile numărul vagoanelor unui tren poate să difere), selectarea manuală a locurilor și actualizarea ȋntr-un timp căt mai scurt. De asemenea dezvoltarea modalităților de plătă online cu cardul, ȋntr-ucât necesită dezvoltarea unui parteneriat cu firmele din domeniu (VISA, MasterCard, etc.). Tot ȋn viitor numărul trenurilor și numărul gărilor deservite va crește și nu ȋn ultimul rând se va implemeta planificarea călătoriei folosind legături ȋntre trenuri.

Ȋn ceea ce privește securitatea aplicație, tot ȋn viitor se vor adopta măsuri importante ȋn acest sens. Securitatea datelor utilizatorilor este esențială pentru a crește ȋncrederea lor ȋn aplicație.

Ȋn viitor se va pune problema utilizării unui framework adaptativ datorită faptului că suportul și eficiența aplicației va crește, iar costurile de mentenanță vor scădea.

Capitolul 5. Concluzii

Avântul societății spre tehnologie a făcut ca standardele din domeniu informatic să crească. Numărul mare de dispozitive mobile conectate la internet a făcut ca cererea de aplicații pe acest domeniu să crească. Astfel firmele au fost nevoite să investească tot mai mult ȋn dezvoltarea aplicațiilor web. Chiar dacă ȋn prezent dezvoltarea aplicaților web nu este așa de legată de adaptabilitatea față de dispozitivul pe care rulează, acest lucru fiind doar o recomandare, ȋn viitor acest lucru va fi o obligativitate dacă se va dori ca produsul să aibă succes pe piață și să fie bine văzut de către utilizatori.

Lucrarea de față, mai exact capitolele 2 și 3 constituie un bun punct de plecare pentru tinerii dezvoltatori de software web, ȋntr-ucât face o trecere ȋn revistă a tehnologiilor utilizate atât pe partea de server side cât și pe cea de client side și ȋn plus oferă un fundament minim necesar ȋn domeniu prin prisma prezentării aspectelor generale ale limbajelor de programare amintite.

Capitolul 4, cel destinat aplicației poate atrage atenția firmelor atât din domeniul transportului feroviar cât și din cel rutier cu privire la o serie de idei inovatoare ȋn domeniul rezervărilor online. Aplicate, aceste idei ar duce cu siguranță la o mai mare utilizare a aplicaților firmelor și implicit la un număr mai mare de călători.

Ȋn concluzie putem afirma cu tărie că implicarea tehnologiei de ultimă generație ȋn cadrul aplicaților web, indiferent de domeniul la care facem referire, aduce multe avantaje atât producătorilor și furnizorilor cât și utilizatorilor, dând astfel naștere unei puternice legături ȋntre aceste entități care se va materializa ȋntr-un sens pozitiv.

Bibliografie

[1] http://websistem.ro/aplicatie-web/

[2] http://whatis.techtarget.com/definition/Web-server

[3] http://www.techopedia.com/definition/24352/web-client-j2ee

[4] http://ro.wikipedia.org/wiki/Browser

[5] http://compnetworking.about.com/od/internetaccessbestuses/g/bldef-url.htm

[6] http://en.wikipedia.org/wiki/Java_%28programming_language%29

[7] http://docs.oracle.com/javaee/

[8] http://www.oracle.com/technetwork/java/index-jsp-135475.html

[9] http://docs.oracle.com/javaee/5/tutorial/doc/bnagy.html

[10] Robin Nixon: Learning PHP, MySql, JavaScript and , O’Reilly Media Inc, , 2012

[11] REALIZAREA PAGINILOR . LIMBAJUL DE EDITARE HTML

http://telecom.etc.tuiasi.ro/telecom/staff/lscripca/discipline%20predate/rcso_lab/LAB_RC_6.pdf

[12] http://edinagavrus.files.wordpress.com/2012/02/css.pdf

[13] http://www.w3schools.com/css/default.asp

[14] http://ro.wikipedia.org/wiki/JavaScript

[15] http://www.w3schools.com/js/

[16] http://www.evl.uic.edu/luc/bvis546/Essential_Javascript_–_A_Javascript_Tutorial.pdf

[17] http://en.wikipedia.org/wiki/JQuery

[18] http://ro.wikipedia.org/wiki/Ajax_%28programare%29

[19] http://getbootstrap.com/

Bibliografie

[1] http://websistem.ro/aplicatie-web/

[2] http://whatis.techtarget.com/definition/Web-server

[3] http://www.techopedia.com/definition/24352/web-client-j2ee

[4] http://ro.wikipedia.org/wiki/Browser

[5] http://compnetworking.about.com/od/internetaccessbestuses/g/bldef-url.htm

[6] http://en.wikipedia.org/wiki/Java_%28programming_language%29

[7] http://docs.oracle.com/javaee/

[8] http://www.oracle.com/technetwork/java/index-jsp-135475.html

[9] http://docs.oracle.com/javaee/5/tutorial/doc/bnagy.html

[10] Robin Nixon: Learning PHP, MySql, JavaScript and , O’Reilly Media Inc, , 2012

[11] REALIZAREA PAGINILOR . LIMBAJUL DE EDITARE HTML

http://telecom.etc.tuiasi.ro/telecom/staff/lscripca/discipline%20predate/rcso_lab/LAB_RC_6.pdf

[12] http://edinagavrus.files.wordpress.com/2012/02/css.pdf

[13] http://www.w3schools.com/css/default.asp

[14] http://ro.wikipedia.org/wiki/JavaScript

[15] http://www.w3schools.com/js/

[16] http://www.evl.uic.edu/luc/bvis546/Essential_Javascript_–_A_Javascript_Tutorial.pdf

[17] http://en.wikipedia.org/wiki/JQuery

[18] http://ro.wikipedia.org/wiki/Ajax_%28programare%29

[19] http://getbootstrap.com/