Licenta2018 Paulsimea [309287]

Licență

Licenta2018 Paulsimea [309287]

Byadmin ianuarie 1, 2024

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

PROIECTAREA ȘI IMPLEMENTAREA UNUI MAGAZIN PENTRU O SALĂ DE JOCURI

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

DEPARTAMENTUL CALCULATOARE ȘI TEHNOLOGIA INFORMAȚIEI

TEMA___

Proiectul de finalizare a studiilor a student: [anonimizat]

1). Tema proiectului de finalizare a studiilor:

Proiectarea și implementarea unui magazin pentru o sală de jocuri

2). Termenul pentru predarea proiectului 3.07.2018

3). Elemente inițiale pentru elaborarea proiectului de finalizare a studiilor

HTML5,CSS3,Bootstrap, PHP, MySql, JavaScript, jQuery.

4). Conținutul proiectului de finalizare a studiilor

Introducere

Capitolul I. Teorie fundamentală

Capitolul II. Tehnologii și limbaje de programare utilizate

Capitolul III. Prezentarea aplicației

Concluzii

Bibliografie

5). Material grafic: prezentare Power Point

6). Locul de documentare pentru elaborarea proiectului:

[anonimizat], internet, lucrări de laborator.

7). Data emiterii temei 20.10.2017

Coordonator științific

ș.l. dr. ing. Maștei Daniela

Cuprins

Introducere

Tema lucrării este “Proiectarea și implementarea unui magazin pentru o sală de jocuri”.

Am ales să creez acest site cu scopul de a promova 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, Bootstrap, JavaScript, PHP, MySQL, Jquery.

Lucrarea este structurată pe următoarele capitole: [anonimizat], [anonimizat] 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. Pe finalul secolului XX, limbajul JavaScript a fost extins ca funcționalitate semnificativ prin introducerea API-ului numit XMLHttpRequest, cu ajutorul căruia se putea programa operații precum să efectueze și să proceseze răspunsurile la mici cereri HTTP dintr-o pagină web, fără a reîncărca însă întreaga pagină. La început, datele acelor cereri mici erau transferate de la client la server în format XML, ceea ce a dus la denumirea de AJAX(Asynchronous JavaScript and XML), însă pe măsură ce limbajele de programare server-side au introdus suportul, a devenit preferențial standardul JSON(JavaScript Object Notation). [1]

Pe partea de server, CGI a început să fie urmat de apariția specificației Java ServLet, care a fost inclusă mai apoi în Java Enterprise Edition, ceea ce 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)

Î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 pe 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

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]

Aplicațiile HTML5 pot fi pornite pentru a rula în modul offline. HTML5 oferă o funcție de stocare offline, numită un cache al cererii pentru stocarea de fișiere. Dacă utilizatorul este deci offline, browser-ul mai are încă acces la fișierele necesare. Aceste fișiere pot fi HTML, CSS, Javascript, sau oricare alte resurse necesare pentru a vizualiza o pagină de web. [7]

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.

Am folosit acest limbaj pentru a structura și a da sens conținutului web, de exemplu, definind paragrafe, titluri și tabele de date sau încorporând imagini.

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

CSS extinde funcționalitățile HTML, permițând redefinirea etichetelor HTML existente. Funcționează ca HTML, însă nu este HTML.

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]

În cazul aplicației pe care am realizat-o, am folosit un fișier inclus extern cu extensia .css pentru a modela și a defini paginile web.

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

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]

Fiind un limbaj de scripting, JavaScript mi-a permis să creez un conținut dinamic actualizat.

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 pe care l-am realizat are 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 gaming de unde clienții să-și poată comanda un produs.

Pentru partea de front-end am creat interfața pentru utilizatori iar, pe parte de back-end pentru managementul conținutului am creat o bază de date de unde administratorul actualizează conținutul.

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

Lucrarea pe care am realizat-o este constituită dintr-un site de prezentare pentru sala de jocuri, și o pagină de magazin care poate fi accesat de pe site. 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.

Aceste pagini au ca scop informarea utilizatorului pentru ca acesta să-și facă o idee concretă legată de sala de gaming.

Figura 4 Pagina principală a site-uli

Site-ul are o interfață ușor de folosit, este de tip “one page”, iar navigarea printre pagini este de tip “scrolling” pentru a oferi utilizatorului posibilitatea de a sări rapid la diferite secțiuni ale paginii. Pentru crearea paginilor am utilizat Bootstrap, un framework care mi-a permis realizarea de pagini responsive. În pagina din figura 4 am utilizat clasele ‘navbar’ și ‘carousel’ iar pentru design am folosit CSS care pe baza selectorilor și proprietăților m-au ajutat la stilizarea mai multor elemente ȋn cadrul realizării aplicației, de exemplu pentru setarea culorii meniului sau a scrisului din meniu am setat: background #fff și font-family: sans-serif(figura 5).

Figura 5 Cod CSS pentru stilizare meniu

Figura 6 Pagina Servicii

Pentru a crea o interfață cât mai simplă și prietenoasă am folosit biblioteca Font Awesome. Font Awesome este o bibliotecă pentru fonturi bazată pe CSS și LESS. În pagina servicii, am utilizat această bibliotecă pentru adăugarea de icon-uri.

Pentru adăugarea de icon-uri, am creat clase specifice, de exemplu, pentru icon-urile respective din figura 6 am adăugat clasele: fa fa-desktop, fa fa-users, fa fa-gamepad respectiv fa fa-trophy (figura 7).

Figura 7 Exemplu cod html pentru adăugare de icon din cadrul aplicației

Am ales să utilizez această librărie deoarece este ușor de integrat într-o aplicație web.

Figura 8 Pagina Galerie

Bootstrap conține un sistem de grid pe 12 coloane. Cu ajutorul acestui sistem de grid am împărțit pagina Galerie în 3 coloane de dimensiuni egale făcând-o astfel accesibilă și de pe alte dispozitive(figura 9).

Figura 9 Pagina Galerie vizualizată de pe smartphone

Figura 10 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 11 Pagina Contact

Pentru ca site-ul să fie accesat atât de pe calculatoare cât și smartphone-uri sau tablete m-am folosit de tehnologia Bootstrap acesta oferindu-mi de asemenea, structuri predefinite precum meniul de navigare, carousel, formulare și gridurile responsive. Bootstrap împarte pagina web în 12 coloane cu valori procentual-egale, iar unind aceste coloane am obținut box-urile dorite pentru a adăuga conținutul. Aceste 12 coloane oferă multe variante de structurare a paginii care ajută la tranzițiile dintre ecranele de diferite dimensiuni.

3.3 Prezentarea paginii magazin

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

Figura 12 Pagina principală magazin

Pentru afișarea produselor, a categoriilor și brandurilor în pagina de magazin am utilizat funcțiile Cat (), Brand(), Product() prezentate în figura 10.

Figura 13 Funcții pentru preluarea înregistrărilor din baza de date

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. Am utilizat metoda POST pentru a trimite date către server, cu scopul de a crea / actualiza o resursă, iar GET pentru a solicita date dintr-o resursă specificată.

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 14 Înregistrare utilizator

În figura 14 avem pagina de autentificare pentru utilizator, cu câmpurile respective care trebuie completate pentru ca utilizatorul sa se poată înregistra și comanda un produs.

În momentul autentificării dacă nu sunt completate toate câmpurile, atunci nu se va putea face autentificarea, iar câmpurile necompletate corespunzător vor indica eroare. Pentru afișarea erorilor am folosit clasa ‘alert-warning’ care indică o acțiune negativă și instrucțiunea echo pentru afișarea mesajului (figura 15). Pentru o bună securizare, nu pot exista 2 adrese de email la fel, iar parola unui id trebuie să fie de minim 6 caractere.

Figura 15 Exemplu cod pentru afișare eroare

Figura 16 Pagina Cărucior

În pagina cărucior utilizatorul are opțiunea de adăuga sau șterge produse. Prin apăsarea butonului “Ready to Checkout” utilizatorul va fi direcționat pe pagina de paypal(figura 17), iar acesta va trebui să-și introducă datele pentru finalizarea plății. Acestea se realizează pe bază de ‘sesiuni’ create în php și pe bază de interogări MySQL.

Figura 17 Plata produsului cu paypal

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

Figura 18 Cod php pentru metoda de plată

Figura 19 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.

Pentru finalizarea plății am creat o ‘sesiune’ php care face posibilă trimiterea datelor. Pe baza de interogări SQL se verifică în baza de date informațiile necesare pentru preluarea datelor, astfel în momentul în care utilizatorul face o comandă pe baza metodelor POST care trimite date către server și GET pentru a solicita date dintr-o resursă specificată, comanda utilizatorului se înregistrează în baza de date iar pe baza idu-ului, acesta v-a primi un cod pentru tranzacția respectivă.

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

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

Brands

Cart

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Licenta2018 Paulsimea [309287] (ID: 309287)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Licenta2018 Paulsimea [309287]

Copyright Notice

POLITICA DE COEZIUNE UN PILON ESENȚIAL PENTRU [622101]

Au ΧVΙΙΙème sіèϲle, les Françaіs sοnt nοmbreux à adhérer aux rrіnϲіres des rhіlοsοrhes des [615679]

Familia tradițională și Familia modernă [624524]

V . Schächinger [608561]

Ciprian.vasca@yahoo.com 521 Suport Curs Gazon An Iii Text

PEDAGOGIA ÎNVĂȚĂMÂNTULUI PRIMAR ȘI PREȘCOLAR [627747]

Copyright Notice

Similar Posts