PROGRAMUL DE STUDIU CALCULATOARE FORMA DE ÎNVĂȚĂMÂNT IF Proiect de diplomă COORDONATOR ȘTIINȚIFIC Șef lucrări. dr.Ing. Maștei Daniela ABSOLVENT Simea… [309286]

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDIU CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT IF

Proiect de diplomă

COORDONATOR ȘTIINȚIFIC

Șef lucrări. dr.Ing. Maștei Daniela

ABSOLVENT: [anonimizat]

2018

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDIU CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT IF

Site Web pentru sală de jocuri

COORDONATOR ȘTIINȚIFIC

Șef lucrări. dr.Ing. Maștei Daniela

ABSOLVENT: [anonimizat]

2018

Cuprins

Introducere

Tema lucrării este “Crearea și implementarea unui site web pentru o sală de jocuri pe calculator și consolă”.

Am ales să creez acest site pentru o [anonimizat], web design și baze de date.

Pentru realizarea acestei aplicații am folosit editorul de cod Brackets și pentru gestiunea bazei de date am utilizat XAMPP. [anonimizat]: HTML, CSS, JavaScript, PHP, MySQL, Jquery.

Acest site este util pentru:

Promovarea sălii de gaming

Acces la pagina de magazin pentru utilizatori

Lucrarea este structurată pe 3 capitole:

Teorie fundamentală

Tehnologii și limbaje de programare utilizate

Prezentarea aplicației Web

Capitolul 1.

Teorie fundamentală

Aplicația web

Aplicațiile web sunt programe care rulează într-o [anonimizat](World Wide Web). [anonimizat], susceptibilă la erori și costisitoare. Comoditatea browserelor de a le folosi drept client a dus la eliminarea acelei probleme. Astfel, [anonimizat] .[1]

Webul a apărut prima dată cu scopul de a [anonimizat]. Ca primă dezvoltare în scopul folosirii unui server web a fost apariția CGI(Common Gateway Interface) la începutul anului 1990. CGI a [anonimizat]. Următorul pas a fost de a [anonimizat], un limbaj având ca scop în scriptarea comportamentului browserului și introducerea unor elemente dinamice. [anonimizat] a [anonimizat], cu ajutorul căruia se putea programa operații precum să efectueze și să proceseze răspunsurile la mici cereri HTTP dintr-o [anonimizat] a reîncărca însă întreaga pagină. [anonimizat], ceea ce a dus la denumirea de AJAX(Asynchronous JavaScript and XML), [anonimizat], a devenit preferențial standardul JSON(JavaScript Object Notation). [1]

[anonimizat] a [anonimizat] a [anonimizat] a dus ca Java să devină un limbaj de programare preponderent în cadrul aplicațiilor web de pe partea de server. Alte exemple de limbaje de programare dedicate programării server-side au fost PHP(open-source project), ASP(Active-Server-Pages dezvoltat de Microsoft) și Ruby.[1]

1.2 Baze de date

Datorită dezvoltării rapide a industriei software și a calculatoarelor electronice ce a dus la necesitatea stocării unui volum tot mai mare de date s-a impus perfecționarea modulului de organizare și structurare a datelor care permit accesul rapid la datele stocate, pentru regăsirea și prelucrarea acestora. Pentru a efectua mai multe operații diferite de prelucrare, accesul rapid la date trebuie să rezolve probleme legate de viteza de regăsire a datelor și să asigure accesul mai multor utilizatori. [2]

Există două tipuri de date și anume: date simple care sunt independente unele de altele din punct de vedere al reprezentării lor în memorie și datele compuse care reprezintă colecții de date între care există anumite relații structurale. [3]

Organizarea datelor presupune:

Definirea, structurarea, ordonarea și gruparea datelor în colecții de date omogene

Stabilirea relațiilor între date

Stocarea datelor pe un suport informațional

Obiectivele principale în organizarea datelor sunt:

Accesul rapid la date

Spațiul de memorie internă și externă ocupat de date să fie cât mai mic

Datele să apară o singură dată în sistem

Flexibilitatea datelor

O bază de date reprezintă un set centralizat și structurat a datelor stocate pe un sistem informatic. Aceasta oferă facilități pentru regăsirea, adăugarea, modificarea și ștergerea datelor atunci când este nevoie și oferă facilități pentru transformarea datelor extrase în informații utile. [3]

Din punct de vedere al serviciilor pe care le oferă, baza de date reprezintă o colecție de date care poate să descrie întreaga activitate a unei organizații și care furnizează acces la diferite informații, care sunt prezentate în diferite formate. [3]

Avantajele folosirii bazelor de date în locul fișierelor de date sunt:

Partajarea informațiilor

Consistența, integritatea, securitatea, și independența datelor

Transparența

MySQL este un sistem de gestiune a bazelor de date relaționle, ce nu conține interfață grafică pentru administrarea sau gestionarea datelor din bazele de date și este produs de compania suedeză MySQL AB și distribuit sub Licența Publică Generală GNU. Este cel mai popular SGBD open-source la ora actuală fiind o componentă cheie a stivei LAMP(Linux, Apache, MySQL, PHP). Administrarea MySQL se face în două moduri: din linia de commandă sau folosind browserul și accesând aplicația phpMyAdmin scrisă în PHP. [4]

Cele mai utilizate comenzi cu bazele de date sunt:

CREATE : se creează o bază de date sau un tabel

DROP: se șterge o bază de date sau un tabel

INSERT: se inserează înregistrări în tabel

DELETE: se șterg înregistrări din tabel

UPDATE: se updatează datele dintr-o bază

SELECT: se selectează un tabel

ALTER: se alterează un tabel

Utilizatorii unei baze de date pot efectua mai multe operații asupra datelor și anume:

Inserare de date (insert)

Ștergere de date (delete)

Modificarea datelor (update)

Citirea bazei de date (query) pentru a extrage anumite date

În limbajul MySQL întâlnim anumite tipuri de date(Tabelul nr. 1).

Tabelul nr. 1

Capitolul 2.

Tehnologii și limbaje de programare utilizate

În acest capitol am enumerat principalele soft-uri care le-am folosit la crearea aplicației Web și principalele caracteristici ale acestora.

XAMPP

XAMPP este un acronim pentru:

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

Apache HTTP Server

MySQL – pentru gestionarea bazelor de date

PHP – limbaj de programare folosit în dezvoltarea paginilor web

Perl

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

Figura 1 – Panelul de control XAMP pentru pornirea și oprirea serviciilor Apache, MySql

Am ales să folosesc acest program deoarece este o soluție gratuită și eficientă, acesta oferindu-mi acces atât la bazele de date cât și la partea de front-end și back-end a website-ului.

Brackets

Brackets este un editor de cod sursă scris în HTML, CSS și JavaScript folosit pentru dezvoltarea de site-uri web. A fost creat de Adobe Systems, licențiat sub licența MIT, și este în prezent menținut pe GITHUB de Adobe și de alți dezvoltatori. Brackets este disponibil pentru descărcarea pe mai multe platforme, pe MAC, Windows și este disponibil cu majoritatea distribuțiilor Linux. Scopul principal al programului Brackets este funcționalitatea de editare live html, css si js.

Acesta oferă mai multe caracteristici și anume:

Editare rapidă

Quick Docs

Previzualizare Live

JsLint

Open source

Figura 2 – Editorul de cod Brackets

Limbajul HTML

Termenul de website (sau simplu site, ori „site web”) reprezintă o grupă de pagini web multimedia(care conțin texte, imagini fixe, imagini mișcătoare și sunete), acestea fiind accesibile în internet oricui, pe o temă anume, și conectate între ele prin hyperlinkuri. Există diferite site-uri web care pot să aparțină unei companii, unui proiect, unei rețele de utilizatori, unei persoane particulare, unei administrații publice sau multe altele. [5]

Limbajul HTML(HyperText Markup Language) a fost impus pentru crearea paginilor web. Acesta este un limbaj de marcare și are ca scop să prezinte intr-un anumit format informațiile precum: tabele, paragrafe, culori, fonturi.

HTML este un limbaj de marcare destinat prezentării documentelor text pe o singură pagină. Este un limbaj care dă infățișare Webului. Acesta constă dintr-o varietate de elemente care se numesc etichete(tags), care se pot folosi la diferite sarcini precum, definirea tipurilor de stil și a anteturilor, precum și la introducerea conținutului specific, cum ar fi imagini, sunete, cuvinte în realitate virtuală și aplicații Java. [5]

HTML oferă mijloace prin care conținutul unui document să poată fi adnotat cu diferite tipuri de metadate și indicații de redare. O pagină Web este un fișier care conține text și tag-uri HTML. Tag-urile HTML marchează textul pentru a defini cum este el afișat ca pagină dintr-un document Web. Tag-urile au 3 părți: deschiderea, conținutul și închiderea. Ele sunt folosite pentru formatarea paginilor Web și pentru a crea hiperlegături către alte documente sau către alte pagini de pe Web. Un prim exemplu de tag este <html> care spune browser-ului că a început un cod în HTML. Un al doilea tag, <body> marchează faptul că incepe partea vizibilă sau conținutul paginii în HTML. Tag-urile de închidere sunt </body> și </html> care spun browser-ului că s-a încheiat conținutul paginii și documentul HTML. Alte exemple de tag-uri ar fii <strong>, </strong> care este folosit pentru a defini textul în format “bold”, iar <p>, </p> sunt folosite pentru a marca apariția unui nou paragraf. [5]

HTML este independent de platformă, adică se pot crea fișiere HTML pe o anumită platformă și se poate folosi orice alt calculator pentru a vizualiza acel fișier ca și o pagină Web.

2.4 Limbajul HTML5

HTML5 este un limbaj de programare folosit pentru a structura și prezenta conținutul pentru WWW(World Wide Web).

Reprezintă a cincea revizuire a standardului HTML, care a fost creat în anul 1990 și standardizat din anul 1997 ca HTML4, HTML5 din anul 2011, luna octombrie, este in curs de dezvoltare. Obiectivele principale ale acestuia au fost acelea de a îmbunătății limbajul cu un suport pentru aparițiile cele mai recente multimedia, menținându-l ușor de citit în același timp de oameni, de computere și device-uri cum ar fii: browsere web, parsere. HTML5 propune să-și însumeze atât HTML4, cât și XHTML1 și DOM2HTML. [6]

Standardul HTML5 a fost publicat de către W3C ca Working Draft în anul 2008, un nou stadiu de „Recomandare W3C” fiind așteptat în anul 2014

Creatorii standardului și-au propus să păstreze lucrurile cât mai simple, ușurând munca dezvoltatorilor:

față de HTML 4 sau XHTML un document HTML5, pentru a putea fi valid are nevoie de un doctype foarte simplificat (<!DOCTYPE html>)

unele atribute acum nu mai sunt obligatorii, simplificând și mai mult codul necesar, de exemplu, type pentru <script> sau <link rel="stylesheet"> [7]

HTML5 are multe caracteristici noi sintactice, caracteristici care cuprind elemente ca <header>, <audio> și <video>, și elemente HTML, precum integrarea conținutului SVG(Scalable Vector Graphics) care a înlocuit utilizarea tag-ului <object>. Aceste noutăți au ca scop de a facilita includerea și manipularea conținuturilor multimedia în web dar și grafice fără a mai fi nevoie să se apeleze la proprietățile de plugin și API. Elemente noi precum <article>, <header>, <section> au scopul de a îmbunătății conținutul semantic al documentelor. [6]

HTML5 include o funcție Drag and Drop, care permite dezvoltarea de aplicații interactive. Cu Drag & Drop avem posibilitatea să mutăm orice element în locul dorit. HTML5 introduce multe elemente noi de intrare, cum ar fi selectoare de culori, pop-up calendare și altele.

2.5 Limbajul CSS

CSS provine din expresia Cascading Style Sheets și este un limbaj de stilizare al elemntelor html, al tagu-urilor html. Cu ajutorul unui CSS descriem modul de reprezentare al paginii HTML, într-un fișier separat. CSS lucrează cu o anumită ierarhie, oferă libertatea să suprascriem un stil deja folosit. [8]

CSS are mai multe avantaje:

Conținutul este separate de prezentare

Are control asupra layout-ului documentelor dintr-o singură pagină de stiluri

Permite ca modul de afișare si layout-ul paginilor de pe un server web să fie definite intr-un singur loc

Se poate utiliza pentru pagini HTML, cât și pentru documente XML [8]

Sintaxa fișierelor CSS constă dintr-o listă de:

Selectori – folosiți pentru alegerea tag-urilor

Descriptori – pentru a indica ce vrem să facem cu acestea

Exemplu: h1{color: blue; font-family: sans serifs; font-size: 12px} spune că tot ce este inclus in tag-ul h1 va fi afișat in albastru utilizând fontul sans serif și mărimea fontului de 12px.

Un fișier CSS conține o listă cu astfel de perechi(selectori, descriptori). Selectorii pot fi simple tag-uri HTML sau XML iar descriptorii sunt definiți în standard-ul CSS. [8]

Există trei moduri de utilizare a CSS-urilor:

Style sheet extern:

Se aplică la HTML și XML și se pot utiliza toate elementele de sintaxă CSS

Style sheet intern:

Se aplică numai la HTML și se pot utiliza toate elementele de sintaxă CSS

Style sheet inline:

Se aplică numai la HTML și nu se pot utiliza toate elementele de sintaxă CSS

2.6 Limbajul CSS3

CSS3 oferă o mulțime de lucruri noi pentru a îmbunătății un website. Cea mai mare schimbare o reprezintă includerea modulelor. Avantajul modulelor este acela că permite specificațiilor să fie completate și aprobate mai repede, deoarece segmentele sunt completate și aprobate în bucăți. [8]

Caracteristici noi CSS3:

Selectorii:

Permit proiectantului/dezvoltatorului să selecteze niveluri mult mai specifice ale documentului

Pseudo-clase structurale precum nth-child

Pseudo-clasă țintă pentru a modela numai elementele care sunt vizate în URL

Efecte de text și layout

Text shadow – se poate adăuga umbră la conținut sau la anumit font

Pseudo-clase precum first-letter și first-line

Mediu paginat și conținut generat

CSS3 suportă mai multe opțiuni in mediile paginate precum: rularea antetelor și subsolurilor, numerotarea paginilor, anumite proprietăți pentru imprimarea conținutului generat, inclusiv proprietăți pentru notele de subsol și referințele încrucișate [8]

Multi-column layout

Oferă proprietăți care permit proiectanților să-și afișeze conținutul în mai multe coloane, cu definiții cum ar fi decalajul dintre coloane, numărul de coloane și lățimea coloanei.

Ruby

Are capacitatea de a adăuga adnotări mici in partea de sus sau lângă cuvinte, cele mai des utilizate in limba chineză sau japoneză. Ele sunt utilizate în general pentru a da pronunția sau sensul ideogramelor dificile. [8]

2.7 Limbajul PHP

PHP este un limbaj de programare folosit pentru dezvoltarea paginilor și aplicațiilor web. Limbajul a fost inițial dezvoltat de inventatorul său Rasmus Lerdorf, iar odată cu creșterea de utilizatori, dezvoltarea a fost preluată de o nouă entitate, numită The PHP Group.

Limbajul PHP a apărut în anul 1994 din nevoia lui Rasmus Lerdorf de a afla câte persoane îi viziteaza CV-ul online. El a denumit setul de scripturi create PHP, acronimul pentru Personal Home Page. Limbajul a evoluat în urmatorii ani, iar succesul adevărat a început să îl cunoască de când Zeev Suraski și Andi Gutmans au rescris motorul PHP de la cap coadă, motor care poartă versiunea 4 a PHP numele Zend. Fiind open-source, PHP beneficiază de suport activ din partea comunității online, acesta fiind și motivul creșterii numărului site-urilor bazate pe PHP. [11]

PHP este cel mai cunoscut limbaj de scripting folosit pentru crearea site-urilor Web interactive. Denumirea este un acronim recursiv pentru Hypertext PreProcessor. Diferența față de alte limbaje de scripting precum JavaScript, este faptul că PHP este un interpretor server-side adică operațiile sunt executate de către server și nu pe calculatorul utilizatorului. [11]

Sunt trei domenii principale, unde sunt utilizate scripturile PHP:

Scripting pe partea serverului – acesta este cel mai tradițional și de bază domeniu al PHP

Scripting în linia de comandă – se poate crea un script PHP care poate rula fără server și fără navigator web

Scrierea aplicațiilor de birou

Una dintre cele mai semnificative facilități ale PHP este susținerea unui larg domeniu de baze de date. Accesarea unei baze de date se face utilizând una din extensiile de lucru cu baze de date sau utilizând un nivel de abstractizare precum POO, sau conectarea la orice bază de date ce susține standardul “Open Database Connection” cu ajutorul extensiei ODBC. [11]

În implementarea aplicației am folosit PHP în cadrul căruia sunt comenzile SQL. Aplicația accesează fișierele PHP pentru a primi date și informații care sunt returnate cu ajutorul SQL.

2.8 Limbajul SQL

Un sistem de gestionare a bazelor de date relaționale (RDBMS) este un instrument esențial în multe medii, de la utilizări în mediul de afaceri, cercetare și contexte educaționale, la livrarea conținutului pe internet. [12]

SQL(Structured Query Language) este un limbaj de programare specific pentru manipualrea datelor în sistemele de manipulare a bazelor de date relaționale (RDBMS). Acesta are ca scop inserarea datelor, interogații, actualizare și ștergere, modificarea și crearea schemelor, precum și control asupra accesului la date.

Instrucțiunile SQL pot fi grupate în:

instrucțiuni de definire a datelor: permit descrierea structurii bzei de date

instrucțiuni de manipulatea datelor: adaugă, șterge, modifică înregistrări

instrucțiuni de selecție a datelor, care permit consultarea bazei de date

instrucțiuni de procesarea tranzacțiilor

instrucțiuni de control al cursorului

instrucțiuni pivind controlul accesului la date

MySQL este un sistem de gestiune a bazelor de date relaționale, fiind cel mai popular SGBD open-source la ora actuală. MySQL are multe calități printre care : [12]

Viteza: MySQL este rapid și devine mai rapid.

Ușurință în utilizare: MySQL este un sistem de baze de date de înaltă performanță, relativ simplu, mai puțin complex de instalat și administrat decât sistemele mai mari

Înțelege SQL (Language Structured Query)

Capabilitatea: Serverul MySQL este multi-threaded, astfel încât mulți clienți se pot conecta la el în același timp. Fiecare client poate utiliza simultan mai multe baze de date

Am utilizat limbajul SQL pentru a adăuga,a șterge, a interoga și actualiza date din baza de date . Comenzile SQL se află în fișiere PHP.

2.9 Limbajul JavaScript

JavaScript abreviat adesea ca JS este un limbaj de programare orientat pe obiecte bazându-se pe conceptul prototipurilor. Alături de HTML și CSS, JavaScript este unul dintre cele trei tehnologii de bază ale World Wide Web.

A fost dezvoltat prima dată de firma Netscape, cu numele de Live Script. Este un limbaj de script care lărgea capacitățile HTML, prin oferirea unei alternative parțiale la utilizarea unui număr mare de scripturi CGI, pentru a prelucra informațiile din formulare și pentru a adăuga dinamism în paginile web. După ce limbajul Java a fost lansat, Netscape a început să lucreze cu firma Sun, pentru a crea un limbaj de script cu o sintaxă și semantică asemănătoare cu a limbajului Java, iar din motive de marketing numele limbajului a fost schimbat în JavaScript.[9]

JavaScript permite inserarea de script-uri în paginile web, care se execută în cadrul paginii web, mai precis în cadrul browser-ului utilizatorului, ușurând astfel și traficul dintre server și client. De exemplu pentru a colecta date de la utilizator într-o pagină web, se pot adăuga scripturi JavaScript pentru validarea corectitudinii a introducerii și apoi pentru a trimite serverului doar date corecte spre a fi procesate. JavaScript conține o listă de funcții și comenzi cu scopul de a ajuta ajuta la operațiile matematice, la manipulări de șiruri, și sunete, imagini, obiecte și ferestre ale brwser-ului, link-uri URL și verificări ale introducerii datelor în formulare.[9]

Pentru inserarea unui cod JavaScript într-un document HTML, se folosește tagul <script> și respectiv </script>. Aceste taguri marchează locul în care începe, respectiv se sfârșește scriptul. [9]

Pentru a insera scripturi în documente HTML se pot folosi 4 metode și anume:

Metoda 1 – plasarea de script în antet-ul paginii (între <head> și </head>)

Metoda 2 – plasarea de script în corpul paginii (între <body> și </body>)

Metoda 3 – utilizarea fișierelor sursă

Metoda 4 – crearea unui gestionar de evenimente

Există câteva aspecte fundamentale ale limbajului JavaScript și anume:

JavaScript poate fi introdus în HTML – codul JavaScript este găzduit de obicei în documentele HTML și executat în interiorul lor. Obiectele din JavaScript au etichete HTML, pe care le reprezintă în așa fel încât programul să fie inclus pe partea de client a limbajului. JavaScript folosește HTML pentru a putea lucra în cadrul aplicațiilor web.

Este dependent de mediu – este un limbaj de scriptare întrucât software-ul care rulează programul de lucru este de fapt browser-ul web(Opera, Firefox, etc.).

Este un limbaj interpretat – codul scriptului este interpretat de browser înainte de a se executa. JavaScript nu are nevoie de compilări sau preprocesări, el rămâne integrat în documentul HTML. Dezavantajul acestui limbaj este faptul că rularea durează mult deoarece navigatorul web citește și procesează comenzile JavaScript atunci când user-ul apelează acele funcții. Avantajul este faptul că se poate actualiza ușor codul sursă.

Este un limbaj flexibil – putem să declarăm o variabilă de un anume tip, sau putem să lucrăm cu o variabilă cu toate că nu-i cunoaștem tipul specificat înainte de a o rula.

JavaScript este un limbaj bazat pe obiecte – adică modelul de obiect JavaScript nu este bazat pe moștenire ci pe instanță

Este condus de evenimente – o mare parte a codului JavaScript este făcut pentru a răspunde la evenimentele generate de un utilizator sau de un sistem. Obiectele HTML, de tip butoanele, au fost îmbunătățite pentru a accepta handlere sau evenimente

Este multifuncțional – se poate utiliza într-o multitudine de contexte cu scopul de a rezolva anumite probleme grafice, matematice, etc.

JavaScript evoluează – este un limbajul care evoluează, fapt pozitiv care poate însă să genereze și probleme, programatorii trebuie să verifice în permanență ce versiune să utilizeze pentru ca aplicațiile să fie disponibile unui număr mare de utilizatori de browsere diferite

Acoperă diverse contexte – programarea în acest limbaj este îndreptată către partea de client, însă se poate folosi JavaScript și pe partea de Server. JavaScript este limbaj nativ pentru anumite instrumente de dezvoltare web, precum Macromedia Dreamweaver sau Borland IntraBuilder. [9]

2.10 jQuery

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a simplifica traversarea documentelor HTML, gestionarea evenimentelor, animarea și interacțiunile AJAX pentru dezvoltarea web rapidă. jQuery este un set de instrumente JavaScript concepute pentru a simplifica diverse sarcini prin scrierea unui cod mai puțin. [13]

jQuery are mai multe caracteristici precum:

selecția de elemente în arborele DOM folosind motor propriu de selecții open source precum Sizzle, un proiect născut din jQuery

parcurgerea și modificarea arborelui DOM (inclusiv suport pentru selectori CSS3 și Xpath simpli)

efecte și animații

înregistrarea și modificarea evenimentelor din browser

manipularea de elemente CSS

cereri de tip AJAX

utilități – funcția each

extensii

Plugin-urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery. Arhitectura sa permite programatorilor să dezvolte subaplicații bazate în biblioteca principală care extind funcțiile de bază jQuery cu funcții specifice plugin-ului. Astfel biblioteca principală poate ocupa puțin spațiu, iar extensiile necesare în anumite pagini web pot fi încărcate la cerere, doar când este nevoie de ele. Există un set de extenii principal numite jQuery UI (jQuery User Interface). jQuery UI oferă un set de extensii pentru interactivitate de bază, efecte mai complexe decât cele din biblioteca de bază și teme de culori. Avantajul UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea bibliotecii principale, minimând riscul de incompatibilitate. [14]

Există două moduri de a utiliza jQuery:

Instalare locală – se poate descărca biblioteca jQuery pe mașina locală

Versiune bazată pe CDN – se poate include direct biblioteca jQuery în codul HTML din Rețeaua de livrare a conținutului (CDN – Content Delivery Network). [13]

Capitolul 3.

Prezentarea aplicației

3.1 Structura website-ului

Site-ul web realizat se adresează oricărui tip de utilizator având un meniu simplu și o interfață ușor de folosit. Scopul implementării acestui site este promovarea unei săli de gaming din Oradea care poate fi accesat de orice persoană pasionată de jocurile pe calculator sau consolă. Site-ul are și o pagină de magazin cu diferite echipamente de unde clienții să-și poată comanda ce produs doresc.

Structura webstite-ului este aproximativ aceeași atât pentru utilizatori cât și pentru administrator. Site-ul conține partea de front-end care reprezintă interfața pentru utilizatori iar pe parte de back-end pentru managementul conținutului administratorul actualizează conținutul din baza de date.

Figura 3 Harta site-ului

În figura 3 se află harta site-ului care conține structura ierarhică a paginilor site-ului.

3.2 Prezentarea meniului principal

Pagina principală prezentată în Figura 4 este asociată cu butonul Home din meniu. Tot în cadrul paginii principale sunt afișate și restul paginilor:

Servicii

Galerie

Preț

Magazin

Sponsori

Echipa

Contact

Harta

Figura 4 Pagina principală a site-uli

Site-ul are o interfață ușor de folosit, este de tip “one page”, iar navigare printre pagini este de tip “scrolling”. Scopul adăugării de navigare "scrolling" este de a oferi utilizatorului posibilitatea de a sări rapid la diferite secțiuni ale paginii.

Figura 5 Pagina Servicii

Figura 6 Pagina Galerie

Figura 7 Pagina Magazin

În pagina magazin am introdus cele mai vândute 3 produse și un buton prin care utilizatorul va avea acces la pagina principală a magazinului.

Figura 8 Pagina Contact

3.3 Prezentarea paginii magazin

În pagina principală magazin avem un meniu cu butoanele: Home, Product, Buton de căutare, Cart, SingIn.

Figura 9 Pagina principală magazin

Utilizatorul are urmatoarele posibilități:de a se înregistra, a căuta produsul dorit în bara de search, de a adăuga sau șterge produse din cărucior și de a comanda un produs

Figura 10 Înregistrare utilizator

Figura 11 Pagina Cărucior

În pagina cărucior utilizatorul are opțiunea de adăuga sau șterge produse. În dreapta jos este butonul “Ready to Checkout” unde utilizatorul va fi direcționat pe pagina de paypal, iar acesta va trebui să-și introducă datele pentru finalizarea plății.

Figura 12 Plata produsului cu paypal

Figura 13 Finalizarea plății

Prin introducerea datelor și finalizarea plății acesta va primi un mesaj cum că plata a fost finalizată și i se va afișa codul tranzacției.

Prin accesarea butonului Continue Shopping acesta va fi redirecționat pe pagina principală unde își va putea continua cumpărăturile și vedea istoricul de comenzi.

Figura 14 Istoric comenzi

3.4 Administrarea aplicației

Administrarea este un aspect important pentru o aplicație web, întrucât o aplicație care este actualizată conferă încredere utilizatorilor. În cadrul acestei aplicații doar administratorul are posibilitatea de a modifica conținutul paginilor.

Administratorul website-ului administrează paginile statice dar și cele dinamice de pe acest site. Paginile dinamice sunt mai ușor de administrat deoarece sunt actualizate din baza de date.

3.5 Baza de date

Aplicația web utilizează o bază de date creată cu ajutorul sistemului de gestiune a datelor phpMyAdmin. În figura 15 avem baza de date. Numele bazei de date este “simnetsite” și conține 7 tabele și anume:

Brands

Cart

Categories

Orders

Products

Users

User_info

Figura 15 Tabelele bazei de date

Figura 16 Tabelul User_info

În figura 16 avem tabela User_info care cuprinde 8 câmpuri și reprezintă datele de autentificare pentru fiecare utilizator.

Figura 17 Tabelul Products

În figura 17 avem tabelul pentru produse. Fiecare produs are un id unic, o categorie, un brand, un titlu, preț, o descriere, o imagine și un cuvânt cheie prin care poate fi căutat în bara de search.

Figura 18 Tabelul pentru comenzi

Tabelul pentru comenzi conține 6 câmpuri și anume:

Un id unic pentru fiecare commandă

Id-ul utilizatorului care a făcut comanda

Id-ul produsului comandat

Cantitatea

Id-ul tranzacției care este diferit la fiecare comandă

Statusul comenzii

Figura 19 Tabelul pentru cărucior

Tabelul pentru cărucior ilustrat în figura 19 conține 6 câmpuri: id, p_id, ip_add, user_id, qty. Acest tabel înregistrează in baza de date produsele care se află în cărucior.

3.6 Diagrama conceptuală a bazei de date

Diagrama prezentată in figura 20 conține un număr de 6 tabele care sunt legate între ele prin legătura 1 la n. Unul sau mai multe produse aparțin unei singure categorii și unui anumit Brand. Fiecare utilizator dispune de un cărucior unde se află unul sau mai multe produse. Fiecare user poate avea mai multe comenzi, iar comanda conține unul sau mai multe produse.

Doar administratorul are acceusl la oricare dintre operațiile de ștergere, adăugare și actualizare a bazei de date.

Figura 20 Diagrama conceptuală a bazei de date

3.7 Descrierea funcțională a modulelor

Pentru preluarea înregistrărilor din baza de date am folosit anumite funcții și anume:

Cat()

Brand()

Product()

function cat(){

$.ajax({

url : "action.php",

method: "POST",

data : {category:1},

success : function(data){

$("#get_category").html(data);

}

})}

function brand(){

$.ajax({

url : "action.php",

method: "POST",

data : {brand:1},

success : function(data){

$("#get_brand").html(data);

}

})}

function product(){

$.ajax({

url : "action.php",

method: "POST",

data : {getProduct:1},

success : function(data){

$("#get_product").html(data);

}

})}

Funcțiile cat(), brand() și product() le-am folosit pentru a prelua înregistrările de categorii, brand și produs din baza de date, pentru a le afișa în pagina de magazin ori de câte ori pagina este încărcată. Pentru aceste funcții am folosit jQueri.ajax și am utilizat metodele POST și GET. Metoda POST este folosită pentru a trimite date către server, cu scopul de a crea / actualiza o resursă. GET este folosit pentru a solicita date dintr-o resursă specificată.

În figurile 21 respectiv 22 am prezentat o parte din limbajul de programare php pentru selectarea și afișarea produselor și a categoriilor din baza de date. Pentru aceasta am folosit funcția isset() și metodele POST și GET.

Funcția isset () este utilizată pentru a verifica dacă o variabilă este setată sau nu. Această funcție returnează false dacă variabila de testare conține o valoare NULL.

Figura 21 Cod php pentru selectarea produselor

Figura 22 Cod php pentru selectarea categoriilor

Pentru metoda de plată am folosit funcția checkOutDetails prezentată în codul de mai jos.

function checkOutDetails(){

$('.overlay').show();

$.ajax({

url : "action.php",

method : "POST",

data : {Common:1,checkOutDetails:1},

success : function(data){

$('.overlay').hide();

$("#cart_checkout").html(data);

net_total();

}

})}

CheckOutDetails () funcționează pentru două scopuri: În primul rând, se va activa php isset ($ _ POST ["Common"]) în pagina action.php și în interiorul acesteia există două funcții isset și anume: isset ($_POST ["getCartItem"]) și isset ($_POST ["checkOutDetails"]).GetCartItem este folosit pentru a afișa elementul de coș în meniul derulant, iar checkOutDetails este folosit pentru a afișa elementul de coș în pagina Cart.php.

Figura 23 Cod php pentru metoda de plată

Persoanele care plătesc prin PayPal Payments Standard interacționează cu formularele HTML și cu variabilele de intrare HTML ascunse pe care le-am plasat pe site. Așa cum se poate observa în figura 23 am folosit tag-ul form care include două atribute: action și method și am utilizat variabile precum cmd a cărui valoare determină metoda de plată PayPal Standard Checkout pe care am utilizat-o pentru a obține plata.

3.8 Securitatea aplicației

Aplicația beneficiază de o securizare bună deoarece conectarea se face prin intermediul unui id și o parolă cu diferite grade de acces.

Restricții aplicate asupra tipurilor de utilizatori :

Nu pot să existe 2 id-uri cu același nume

Nu pot să existe id-uri cu câmpuri necompletate

Parola unui id trebuie sa fie de minim 6 caractere

La înregistrare toate câmpurile sunt obligatorii

Toate câmpurile au o lungime determinată

Nu se pot lăsa câmpuri goale

Parola trebuie sa fie corectă

Concluzii

Aplicația implementată este utilă și contribuie cu succes la promovarea sălii de gaming. Este o aplicație simplă care se adresează oricărei persoane pasionate de jocurile pe calculator sau consolă.

Site-ul este bine structurat pentru ca fiecare utilizator să găsească în cel mai scurt timp informația de care are nevoie.

Implementarea aplicației a fost realizată cu ajutorul tehnologiilor cele mai des întâlnite în dezvoltarea de aplicații web, cum ar fi: HTML, CSS, Bootstrap, PHP, MySQL, JavaScript, Jquery. Bootstrap este o tehnologie eficientă care m-a ajutat să salvez din timpul de dezvoltare necesar pentru site-ul web, acesta oferind structuri predefinite necesare în crearea site-ului: meniul de navigare, carousel, formulare și cel mai important grid-urile responsive.

Principalele dezvoltări viitoare ar cuprinde adăugarea unei opțiuni care permite utilizatorului să selecteze limba în care dorește să se afișeze conținutul, adăugarea de animații cu scopul de a capta instantaneu atenția utilizatorilor, crearea unei baze de date pentru introducerea anumitor evenimente în pagina de prezentare a site-ului.

Bibliografie

[1] Aplicație web https://ro.wikipedia.org/wiki/Aplicație_web

Consultat la data de 17.04.2016

[2] Baze de date http://www.prouniversitaria.ro/carte/baze-de-date

Consultat la data de 18.04.2016

[3] Baze de Date relaționale. Teorie și Aplicații în Visual FoxPro, Cornelia Gyorodi, R. Gyorodi, G.Pecherle, Editura Mediamira, 2008.

[4] MySQL https://ro.wikipedia.org/wiki/MySQL

Consultat la data de 19.04.2016

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

[6] Mark Pilgrim, HTML5: Ghidul începătorului, Brașov, 2011, p. 10

[7] HTML5 https://ro.wikipedia.org/wiki/HTML5

Consultat la data de 20.04.2016

[8] Introducere în CSS https://marplo.net/css/introducere

Consultat la data de 20.04.2016

[9] Limbajul JavaScript https://web.ceiti.md/lesson.php?id=16

Consultat la data de 25.04.2016

[10] Pavel Năstase, Foarea Năstase, Internet World Wide Web, JavaScript-HTML-Java, Editura Economică, 1998

[11] Despre PHP http://etutoriale.ro/articles/16/1/Despre-PHP/

Consultat la data de 25.04.2016

[12] Paul Dubois, MYSQL, editura Teora 2001

[13] Despre jQuery http://www.tutorialspoint.com/jquery/jquery_tutorial.pdf

Consultat la data de 10.05.2016

[14] jQuery https://ro.wikipedia.org/wiki/JQuery

Consultat la data de 15.05.2016

DECLARAȚIE DE AUTENTICITATE A

LUCRĂRII DE FINALIZARE A STUDIILOR

Titlul lucrării

Site Web pentru sală de jocuri

Autorul lucrării

Simea Paul Alexandru

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

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

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

Oradea,

25.06.2018 Semnătura