Portalul de Gaming Polygame

CUPRINS

1. Intoducere 3

1.1 Scopul lucrării 3

1.2 Scurt istoric 4

1.3 Realizări în domeniul portalelor de gaming 5

1.4 Top 10 principii pentru a realiza un web-design reușit 6

2. Descrierea aplicației 10

2.1 Prezentarea tehnologiilor software folosite 10

2.1.1 Baze de date 10

2.1.2 HTML 11

2.1.3 CSS 12

2.1.4 PHP 13

2.2 Prezentarea interfetei grafice a aplicatiei 15

2.2.1 Structurarea layout-ului în Adobe Photoshop 15

2.2.2 Implementare HTML și CSS 16

3. Functionalitatea portalului "PolyGame" 27

3.1 Baze de date și PHP 27

3.1.1 Baze de date 27

3.1.2 PHP 31

4. Concluzii 44

5. Dezvoltari ulterioare 45

6. Bibliografie 46

Intoducere

Scopul lucrării

Această lucrare de licență, portalul de gaming POLYGAME, vrea să creeze o comunitate de gameri în România, un loc de unde aceștia își pot achiziționa jocuri video, pot vedea ultimele apariții de jocuri video ale marilor companii din domeniu și se pot relaxa jucând o colecție impresionantă de minigame-uri online.

Ideea de POLYGAME a venit tocmai de la polivalența și complexitatea jocurilor video. După cum bine stim, mulți dintre studenții Universității Politehnica din București sunt pasionați ai jocurilor video, acest lucru fiind o altă semnificație a sintagmei "POLY".

Portalul va conține o bază de date cu o varietate mare de jocuri video, structurate în funcție de genul lor, compania din care fac parte, anul lansării etc. Utilizatorii vor trebui să se autentifice pe această platformă, pentru a avea acces minigame-urile din baza de date, pentru a putea cumpăra jocuri, sau pur și simplu pentru a putea juca online jocurile noastre. În final, utilizatorii vor putea să se autentifice folosind un username și o parolă setate anterior.

Totodată, va conține un motor de căutare care îi va ajuta pe utilizatori să găsească jocul dorit în doar câteva momente și o interfață grafică prietenoasă unde vor putea găsi rapid și eficient informația dorită.

Scurt istoric

Lucrarea de licență face parte dintr-un domeniu dezvoltat în rândul tehnologiei : jocurile video. Reprezintă un portal de gaming, un loc de relaxare pentru pasionații jocurilor pe computer și totodată are scopul de a ține la curent utilizatorii cu ultimele apariții în domeniu.

Jocurile video au apărut cu mult timp în urmă, prin anii 1950, când oamenii de stiință au început să construiască jocuri simple și să pună bazele inteligenței artificiale, dar au devenit populare abia prin anii 1970, odată cu apariția primelor console de gaming.

De atunci și până în prezent, acest domeniu s-a dezvoltat atât de mult, încât a devenit una dintre principalele forme de divertisment pentru tinerii din ziua de azi, reușind sa interconecteze persoane din diferite colțuri ale lumii și sa creeze comunități întregi de jucători.

În 2015, jocurile video s-au dezvoltat foarte mult din multe puncte de vedere: complexitate, grafică, gameplay etc. Acest lucru le face să fie foarte dorite de oamenii din ziua de azi, mai ales de tineri. Există jocuri care simulează viața reală atât de bine, încât unii oameni își petrec majoritatea timpului în lumea virtuală. Aici pot avea o "familie", un "job", o "masina", o "casa" și mai nou se pot câștiga bani din acest mod de viață, întrucât multe dintre jocuri au propriul lor market de unde poți cumpăra beneficii în joc cu bani reali. Un aspect interesant este dependența creată de jocurile video. Observând amploarea pe care a luat-o acest fenomen, oamenii au realizat ca este nevoie de crearea unor comunități online, forum-uri, market-uri etc. Așa au luat naștere portalele de gaming.

Portalele de gaming au apărut cu mult timp în urmă, din necesitatea de a creea comunități de gameri, reprezentând în esență site-uri web, unde jucătorii iși pot căuta jocurile preferate. Este locul de unde pasionații de jocuri video își pot achiziționa jocuri, le pot descărca, juca și pot vorbi despre ele.

Realizări în domeniul portalelor de gaming

În ziua de azi, există portale de gaming, unde utilizatorii pot să se înregistreze și să exploreze o bază de date impresionantă de jocuri video pentru toate vârstele și de toate genurile.

STEAM este cel mai cunoscut portal de gaming la momentul actual, datând încă din 2003 pe sistemul de operare WINDOWS. În 2010 a fost lansat pentru Mac OS X, iar în 2013 pentru Linux.

Figura 1. Interfața grafică STEAM

STEAM aparține de compania VALVE și a fost creeat din necesitatea de a transmite update-uri pentru jocurile online, cum ar fi Counter-Strike. Creearea patch-urilor și instalarea lor manual de către utilizator, nu făcea decât să deconecteze utilizatorii de la server și să permită pirateria și cheat-ingul. Drept urmare, au decis să creeze un portal unde update-urile și patch-urile să fie instalate automat și să se securizeze jocurile video.

În prezent este cel mai mare portal de gaming din lume, deținând peste 3500 de titluri de jocuri în baza de date și peste 100.000.000 de utilizatori înscriși, dintre care sunt în medie 7.000.000 online constant.

Top 10 principii pentru a realiza un web-design reușit

Pentru a realiza un web-design reușit trebuie avute în vedere mai multe principii de bază. În continuare voi descrie 10 dintre acestea, care mi s-au părut cele mai importante:

1. Originalitatea

Unul dintre principiile de bază pentru un web-design reușit este originalitatea. În prezent, există zeci, poate chiar sute de CMS-uri ( sisteme de administrare a conținutului ), care îți livrează web-site-ul , oferindu-ți un "design personalizat". Am pus ghilimelele de rigoare, întrucât acest "design personalizat" nu reprezintă decât niște interfețe grafice denumite template, care te constrâng foart mult în dezvoltarea propriului website.

Acest lucru face ca website-ul creat cu ajutorul CMS-urilor să semene foarte mult cu alte website-uri găsite pe Internet. Totodată, creând un website original, de la zero, aveți drepturi exclusive asupra interfeței grafice, website-ul dumneavoastră având unicitate.

Acestea sunt câteva din motivele pentru care am ales să creez un website cu un webdesign original și unic, creat inițial în Adobe Photoshop și ulterior adus în formă finală cu ajutorul HTML și CSS.

2. Comunicarea

Persoanele vor să aibă acces la comunicare foarte rapid, deci este foarte important să comunicăm informația pe care vrem să o transmitem mai departe într-un mod clar și concis. De aceea, am creat un website în care putem avea acces la informația acestuia foarte simplu și eficient și am renunțat la fraze lungi și plictisitoare în cadrul său.

3. Logo-ul

Lucrez în domeniul webdesign ca freelancer și am executat multe design-uri grafice. Un aspect esențial al unei companii, aplicații, website și multe altele este Logo-ul. Acesta este un element care conferă unicitate și personalitate website-ului dumneavoastră.

Pentru lucrarea de licență "PolyGame", am executat un logo simplist, "jucăuș", un logo care să ducă cu gândul la gaming. Inițial, el reprezintă o pisica ( are mai multe vieți, ca și jucătorii), care, privită invers, se transformă într-un controller de gaming, gadget nelipsit pe biroul unui iubitor de jocuri video.

Figure 2. Logo-ul "PolyGame" și polivalența ințelesului său

4. Culorile

Paleta de culori este un alt lucru care face un webdesign să fie reușit. Am ales culori complementare, care să creeze o armonie cromatică. Folosirea de culori contrastante între fundal și text este folosită pentru a face informația să fie citită mai ușor.

5. Imaginile

O veche expresie spune că "o imagine face cât o mie de cuvinte". De aceea, trebuie să alegem cu grijă imaginile cu care vom împodobi website-ul și să le targetăm cu atenție potențialilor utilizatori. Imaginile folosite de mine în crearea portalului "PolyGame" sunt imagini ce conțin culori vii, culori care să te ducă cu gândul la domeniul din care face parte website-ul: gaming-ul.

6. Navigarea

Navigarea este un concept care ne arată cât de repede poate ajunge un vizitator al website-ului prin paginile acestuia. M-am ghidat după regulă de "3 click-uri", regulă de bază a navigării website-urilor. Această ne spune că utilizatorii sau vizitatorii website-ului trebuie să poată ajunge oriunde în website în mai puțin de 3 click-uri.

7. Aranjarea în pagină

Dacă punem elemente aleatoriu într-o pagină a website-ului, aceasta va avea un aspect dezordonat, care poate face potențialul client să renunțe la navigarea în website. Trebuie să folosim layout-uri ordonate, aranjate pe secțiuni, coloane și structuri care să confere un echilibru design-ului și un aspect "curat".

8. Timpul de încărcare

În zilele noastre, timpul este cel mai mare dușman al nostru. De aceea, oamenii au nevoie de website-uri care să se încarce în timp util. Am avut în considerare acest lucru, optimizând imaginile (mărime, rezoluție) și renunțând la acestea atunci când ele pot fi înlocuite utilizând CSS.

9. Website responsive

În zilele noastre, un website poate fi accesat de pe mai multe device-uri : smartphone-uri, laptop-uri, tablete, etc. De aceea, am creat un website responsive, website care își modifică rezoluția și poziția elementelor sale pentru ca acesta să fie vizibil pe mai multe tipuri de device-uri.

Pentru acest lucru, am folosit bootstrap și media-query-uri. Am folosit tehnicile min-width ( lățime minimă) și max-width ( lățime maximă ), pentru a putea așeza elementele în funcție de noua rezoluție.

Exemplu:

@ media screen (min-width:500px) = pentru mărimea browser-ului > 500px.

@ media screen (max-width:500px) = pentru mărimea browser-ului < 500px.

Figure 3. Website Responsive

10. Profesionalism

Profesionalismul este sinonim cu punerea tuturor elementelor website-ului în legătură: dimensiuni, palete de culori, font-uri, spațiere, padding, butoane, CSS, imagini etc. Nerespectarea acestei reguli, va duce la un design de prost gust, un design haotic, un design care nu pare de calitate, un design neprofesional.

Oricare ar fi design-ul, trebuie ținut cont de această regulă și trebuie să facem tot posibilul să îmbinăm toate elementele website-ului într-un mod cât mai echilibrat, plăcut, simplist și curat.

Această notă de profesionalism a website-ului poate fi unul dintre cele mai importante lucruri, atât din punct de vedere tehnic, cât și al SEO-ului, sau marketing-ului.

Descrierea aplicației

Prezentarea tehnologiilor software folosite

Baze de date

O bază de date este o colecție de date bine organizată, astfel încât să ușureze accesul unui calculator, permițând mai multor utilizatori sa o acceseze în același timp și răspunzând în timp util cererilor acestora.

SGBD (Sistemul de Gestiune al Bazei de Date) reprezintă aplicațiile ce permit definirea, manipularea, vizualizarea, stocarea și gestionarea interogărilor pentru a acesa datele.

Figura 4. Model tabela al bazelor de date, curs

Bazele de date sunt structurate ca o multitudine de tabele, fiecărei tabelă fiindu-i asociat un nume. Tabelele conțin câmpuri, ce reprezintă variabile cărora le sunt atribuite valori din înregistrarea respectivă. Câmpurile pot avea și atribute suplimentare legate de restricții de integritate (not null, primary key, foreign key etc).

Tipurile de cereri care pot fi executate sunt:

Cereri care introduc limbajul de definire a datelor (DDL)

CREATE – folosit pentru a crea o tabelă în baza de date.

ALTER – folosit pentru a modifica o tabelă existentă.

DROP – folosit pentru a șterge o tabelă.

Cereri care introduc limbajul de manipulare a datelor (DML)

SELECT – folosit pentru a selecta anumite tipuri de înregistrări

INSERT – folosit pentru a adăuga o noua înregistrare

UPDATE – folosit pentru a actualiza datele într-o tabelă

DELETE – folosit pentru a șterge o înregistrare

Cereri care introduc limbajul de control al datelor

GRANT – folosit pentru a oferi privilegii utilizatorilor

REVOKE – folosit pentru a lua privilegii utilizatorilor

HTML

HTML, sau HyperText Markup Language reprezintă un limbaj de marcare, folosit pentru a realiza pagini web. Oricine este implicat în dezvoltarea web, fie că vorbim despre funcționalitate sau grafică, trebuie să aibă cunostințe de HTML. Varianta sa mai dezvoltată, denumită XHTML (eXtensible HTML), este în esență același limbaj doar că are reguli de sintaxă mai stricte.

HTML este la bază un set de coduri logice scrise între "<" ">".

Exemplu: <BODY> sau <TITLE>

Elementele (denumite tag-uri) conțin un element (tag) care le deschide și un element care le închide "/".

Exemplu: <BODY>…</BODY>

Primul cuvânt care apare în interiorul "< >" este elementul sau eticheta ( Exemplu: FONT, BODY, TITLE, HEAD etc). Tot în interiorul "< >" pot apărea dupa element atributele care au rolul de a descrie proprietățile elementului. Acestea sunt urmate de semnul "=", după care între ghilimele sunt scrise valorile lor.

Exemplu: <FONT SIZE="3" COLOR="red"> Acesta este un text roșu cu dimensiunea 3 </FONT>

Fișierele HTML au extensia .HTML sau .HTM și conțin două sub-elemente principale:

HEAD și BODY. Primul este folosit pentru a adăuga titlul, metatag-uri, scripturi JavaScript și still-uri CSS. Cel de-al doilea este folosit pentru a adăuga conținutul documentului ce urmează să fie afișat.

Exemplu:

<html>

<head>

<title> TITLUL </title>

</head>

<body>

CONTINUT

</body>

</html>

CSS

După ce am finalizat structurarea HTML a documentului, vom avea nevoie de stilizare, adică felul și locul în care sunt afișate elementele HTML.

CSS (Cascading Style Sheets) este un limbaj de stiluri utilizat pentru prezentarea elementelor HTML. A fost creat în anul 1994 și agreat de W3C în anul 1996.

CSS reprezintă o tehnologie folosită pentru a aranja vizual paginile web, interfețele pentru aplicații web și interfețele pentru aplicații mobile. O altă utilitate mare a sa este că putem separa aceste instrucțiuni de prezentare vizuală de codul HTML propriu-zis. Prin intermediul său putem seta culori, mărimi, stiluri de fonturi, culori de fundal, design pentru butoane, design pentru meniuri etc.

Codul CSS poate fi scris în interiorul unui fișier cu extensia ".css" sau în interiorul fișierului HTML. În ultimul caz, acest cod va fi scris în interiorul unui tag numit <style>, ce se află în secțiunea <head> a fișierului HTML.

CSS are trei tipuri de obiecte :

selectorul : reprezintă elementul HTML, căruia i se vor aplica proprietățile urmatoare.

Exemplu:

selector

{

prop_1:val 1;

}

clasa : reprezintă un obiect aplicabil etichetelor HTML.

Exemplu:

<div class="nume_clasa">Clasa aplicata etichetei div </div>

Pentru a defini clasa în interiorul CSS-ului, trebuie adăugat "." înaintea numelui clasei.

Exemplu

.nume_clasă

{

prop1:val 1;

}

Identificatorul : (ID) este asemănător claselor, dar numele unui identificator se poate atribui unei singure etichete HTML.

Exemplu:

<div id="nume_identificator">Identificatorul aplicat etichetei div</div>

Pentru a defini identificatorul în interiorul CSS-ului, trebuie adăugat "#" înaintea numelui identificatorului.

Exemplu

#nume_identificator

{

prop1:val 1;

}

proprietatea: reprezintă acele elemente de aspect ce vor urma să fie modificate; au o varietate mare, de la culoare, la dimensiuni, caractere etc.

valoarea : reprezintă acele atribute ale unei proprietăți și diferă modul lor de scriere de la o proprietate la alta.

PHP

PHP, sau "Hypertext Preprocessor", este un limbaj de programare (limbaj de scripting), ce poate fi folosit gratuit sub o licență open-source. A fost creat în anul 1995 și este utilizat în special pentru dezvoltarea funcționalitaților web.

Dacă o pagină HTML include un script PHP, va trebui să-i punem extensia ".php", paginile considerându-se acum "pagini dinamice" HTML.

Codul PHP trebuie scris între etichetele "<?php" și "?>", orice se află între aceste taguri fiind executat de PHP și creat rezultatul. Codul care se află în afara celor 2 etichete rămâne neschimbat atunci când este afișat în browser.

Exemplu:

<html>

<body>

<h1>Astazi sunte în data de :

<?php

print date( 'd/m/Y' );

?>

</body>

</html>

PHP se folosește în strânsă legătură cu bazele de date, cu ajutorul său putând să importăm înregistrări făcute în tabelele bazelor de date în website-ul nostru.

Variabilele din PHP sunt foarte utile, deoarece valoarile lor se pot schimba atunci când se execută codul PHP. Acestea sunt diferite față de celelalte elemente prin intermediul caracterului "$", pus înaintea numelui variabilei. Spre deosebire de alte limbaje de programare, variabilelor din PHP nu trebuie să le specificăm un tip ( cum ar fi int, char, bool etc ).

De asemenea, pe lângă funcțiile predefinite ale limbajului PHP (print, echo, empty etc), putem crea funcții dezvoltate de utilizator. Ele trebuie să fie declarate și implementate. Pentru a executa funcția, va trebui să le apelăm în interiorul codului HTML.

Exemplu:

Prezentarea interfeței grafice a aplicației

Structurarea layout-ului în Adobe Photoshop

În prima fază a realizării lucrării de licență am realizat partea de front-end a portalului. Aceasta reprezintă o interfață între utilizator și back-end ( codul din spatele portalului ).

Pentru a realiza aceasă interfață, în prima fază, am gandit o schemă de culori potrivită și am creat un logo simplist, care să exprime cu precizie domeniul căruia vrem să ne adresăm. În continuare, am structurat layout-ul general al mai multor pagini (acasă, finalizare comandă, listă de produse, pagină de produs etc) în Adobe Photoshop. Toate elementele au fost separate în layere și grupuri de layere, pentru a avea acces la ele. Astfel, am "decupat" fiecare imagine, icoană și ilustrație în parte pentru a avea elementele și dimensiunile ce urmau să ne folosească în implementarea HTML și CSS.

Am evitat să folosesc template-uri legate de partea de layout a website-ului, deoarece portalele de jocuri trebuie să aibă un aspect autentic și totodată nu am vrut să fiu constrâns de folosirea template-urilor. Partea de front-end a unui astfel de web-site este foarte importană, întrucât mulți dintre pasionații acestui domeniu pun accent pe grafică și pe vizual.

Figura 5 Structurarea paginii acasă în Adobe Photoshop

Implementare HTML și CSS

Următorul pas a fost instalarea software-ului XAMPP, care constă în Apache HTTP Server, MySQL database și interpretoare pentru PHP și Perl. Este un software folosit des de programatorii web, pentru că nu necesită conexiune la internet pentru a testa codul scris și totodată are suport pentru a crea și a modifica baze de date în MySQL.

Codul a fost scris în software-ul Sublime Text 2, care îți permite să ai acces la toate fișierele proiectului, acestea găsindu-se într-un sidebar, structurate pe foldere. O altă funcție utilă a acestui software este cea de auto-complete, ajutând foarte mult la scrierea codului.

De asemenea, am folosit Bootstrap, o colecție de unelte pentru crearea paginilor web și a aplicaților web. Este un software foarte util având diferite modele editabile pentru butoane, meniuri și alte elemente, dar este utilizat și pentru a crea un website responsive pentru mai multe tipuri de rezoluții (diferite gadget-uri: PC, Notebook, Mobile etc).

În folderul "css" al proiectului am inclus fișierele folosite de Bootstrap, care au fost importate în fișierul "style.css", prin comanda " @import 'bootstrap.css';", pentru a putea accesa uneltele.

Figura 6. Importare fisierelor Bootstrap "style.css"

Pentru a realiza un website responsive, am avut nevoie atât de media-query-urile setate în bootstrap, cât și de cunoștințe de CSS implementate în fișierul "style.css".

Bootstrap-ul foloseste media-query pe min-width (lațime minimă), ceea ce înseamna ca browser-ul target-ează rezoluția de la mărimea dată în sus. Eu am folosit tehnica opusa, cea cu max-width (lațime maximă), ce target-ează rezoluția de la mărimea selectată în jos.

Exemplu:

@ media screen (min-width:500px) = pentru mărimea browser-ului > 500px.

@ media screen (max-width:500px) = pentru mărimea browser-ului < 500px.

În fisierul "style.css" am descris fiecare clasa în parte. Pentru fiecare element (meniu, buton, chenar, bară etc) al paginilor web am creat o clasă separată, deoarece orice element arată într-un stil diferit.

Fiecare clasă are diferite proprietăți: font, font-size, font-weight, background-color, box-shadow, margin, padding etc. Acestea au fost folosite pentru a transforma layout-ul structurat din Adobe Photoshop în pagina web.

Figura 7. Meniul cu informatii

Exemplu:

.info_bar{

background-color: #fafafa;

-webkit-box-shadow: 0px 2px 4px #d4d4d4;

box-shadow: 0px 2px 4px #d4d4d4;

}

Fișierele în care am scris codul HTML au extensia ".php", deoarece am separat header-ul și footer-ul în 2 fișiere ".php" diferite, pe care le-am inclus în fiecare din paginile portalului.

Am făcut acest "artificiu" pentru a-mi ușura munca, atunci când vreau să fac modificări în header sau footer. Acestea se vor actualiza automat în restul paginilor portalului, fară să fie nevoie să le modificăm pe fiecare în parte.

Header-ul se include astfel:

<?php

$pageTitle = "Homepage"; <!– folosit pentru a seta titlul paginii curente –>

require_once 'header.php';

?>

Footer-ul se include astfel:

<?php

require_once 'footer.php';

?>

În pagina "header.php", vom avea div-uri în care se gasesc cele 2 bare de informații. În prima avem link-uri către paginile acasă, despre noi și contact.

În pagina despre noi sunt prezentate câteva informații despre portalul de gaming "PolyGame", cum ar fi numarul de jocuri din baza noastră de date, numarul de utilizatori înscriși, genurile de jocuri pe care le deținem în baza de date și multe altele.

Pagina de contact pune în legătura utilizatorii și vizitatorii cu administratorii portalului. Aici există un număr de telefon, o adresă de e-mail de unde putem afla informații utile și un formular de contact.

Formularul de contact are mai multe câmpuri care trebuie completate : "Telefon" , "Nume și Prenume", "Adresă de e-mail", "Mesajul tău" și "Codul din imagine". Câmpul "Mesajul tău" trebuie completat cu întrebări sau nelămuriri ale utilizatorului, iar "Codul din imagine" trebuie completat cu un cod captcha. Acesta este o masură de securitate, pentru a observa dacă utilizatorul care completează formularul este o persoană reală, ci nu un program folosit pentru a spam-a web-site-ul. Totodată, avem un buton de abonare la newsletter și unul de legatură cu pagina de Facebook.

Figura 8. Formular de contact

Figure 9. Formular HTML

În acest formular, field-urile pot ava anumite tipuri (ex: e-mail, tel etc), lucru care ajută ca acestea să mențină anumite restricții și să se evite spam-area, sau introducerea greșită a datelor. De exemplu, tipul "e-mail" ne obligă să introducem "@" în acest field, pe cand tipul "tel" ne obligă să avem doar cifre în field.

Unele field-uri le putem seta required, astfel că nu putem apăsa submit fără ca acestea să fie completate.

În plus, putem adăuga pentru Google Chrome anumite pattern-uri, cum se observă în printscreen-ul de mai sus. De exemplu, pentru field-ul "Telefon", avem un pattern care să ne permită să introducem doar numere de telefon cu format francez (care este același cu formatul românesc).

Cea de-a doua bară a header-ului conține informații utile pentru vizitatorii portalului: număr de telefon, program, contact și informații despre promoții.

În continuare, avem zona de header unde vom găsi logo-ul portalului, o bară de căutare și coșul de cumpărături, unde vom găsi produsele ce urmează să fie cumpărate.

Bara de căutare este foarte importantă într-un portal de gaming, întrucât vizitatorii și utilizatorii pot găsi jocul video căutat mult mai repede: după nume, după gen, sau după alte cuvinte cheie.

Figure 10. Logo, bară de căutare și coș de cumpărături

Pagina principală a portalului ( Acasă sau Homepage ), conține un meniu vertical în partea din stânga, unde avem structurate tipurile de jocuri și în partea din dreapta un slider, unde există banner-e sau artwork-uri cu ultimele aparții în domeniul gaming-ului.

Figure 11. Meniu și slider

Am creat acest meniu, deoarece utilizatorii unui portal de jocuri vor să joace un anumit tip de jocuri, fie cele care pot fi achiziționate din magazinul online, fie cele care pot fi jucate direct pe portal. Fiecare element al meniului este descris în HTML sub forma unui link ( " <a href=" ">link</a> "), căruia i se atribuie o clasă de styling din fișierul "style.css".

Figure 12. HTML Meniu cu genurile de jocuri

De asemenea, am introdus o funcționalitate, care permite utilizatorilor să aibă acces la minigame-urile noastre online, doar în cazul în care se autentifică pe portal. Acest lucru a fost creat cu ajutorul variabilei de sesiune "logged_in".

Lângă acest meniu, avem un slider, denumit și carusel, pentru a ține la curent vizitatorii cu ultimele apariții în domeniu, sau cu cele mai jucate jocuri video ale momentului. Acesta este navigabil, având săgeți pentru a putea trece la slide-ul următor sau la precedentul și în partea de jos butoane pentru a putea merge direct la pagina dorită.

Figure 13. HTML Slider

Putem utiliza "data attributes" pentru a controla cu ușurință poziția imaginilor în slider. Astfel, "data-slide" acceptă cuvinte cheie, ca "next"(următorul slide), sau "prev"(slide-ul precedent), care modifică poziția slider-ului față de poziția curentă. De asemenea, am utilizat "data-slide-to" pentru a trece la un slide dorit.

Exemplu:

data-slide-to="2" – schimbă poziția slider-ului la slide-ul cu numărul 2, începând cu slide-ul cu numărul 0

Săgețile de pe slider au fost introduse cu ajutorul "glyphicons", o librărie de icoane și simboluri predefinite, monocromatice, ușor de introdus, având o simplitate și o eleganță deosebită. Acest tip de icoane l-am folosit la search-bar.

Exemplu:

<span class="glyphicons glyphicons-shopping-cart"></span>

Acestea există sub forma unei clase în fișierul "bootstrap.css".

În continuare, vom lista ultimele 6 jocuri video adăugate în baza noastră de date. Fiecare dintre ele are o structură în care avem mai multe informații despre jocul video respectiv : o poză, platforma pe care rulează jocul ( PS4, XBOX ONE, PC), numele acestuia, prețul și un buton "Cumpără" care duce într-o pagină "product-details.php", pagină în care avem mai multe detalii despre jocul respectiv.

Figure 14. Ultimele 6 jocuri adaugate în baza de date

Fiecare joc video reprezintă un div în codul HTML, făcând parte din clasa "product". Primul div e divizat în mai multe div-uri , fiecare având un rol în structurarea acestuia : pentru banda din colțul stânga sus (promoție sau nou), pentru imagine, pentru platforma pe care rulează, pentru nume, pentru preț și pentru buton. Mai jos am introdus codul HTML pentru structura unui produs. Acesta este pentru jocul " The witcher Wild Hunt" și nu este folosit importul din baza de date, ca să ne dăm seama cum funcționează codul.

Figure 15. Cod HTML pentru structura unui joc video

Pagina "products-list.php" repreznită practic magazinul online, unde putem cumpăra jocuri și vedea informații despre acestea. Ca și structură, conține mai multe pagini , fiecare dintre ele conținând 9 jocuri video.

Fiecare dintre ele are o structura în care avem mai multe informații despre jocul video respectiv : o poză, platforma pe care rulează jocul ( PS4, XBOX ONE, PC), numele acestuia, prețul și un buton "Cumpără" care duce într-o pagină "product-details.php", pagină în care avem mai multe detalii despre jocul respectiv.

În partea de jos a acestei pagini, putem observa un sistem de paginație, care conține atât butoane cu numărul paginii pe care ne aflăm, sau la care vrem să ajungem, cât și 2 butoane cu săgeți stânga și dreapta, pe care le putem folosi pentru a naviga între pagini. Funcționalitatea sistemului de paginație va fi prezentată în capitolul următor.

Figure 16. Pagina "products-list.php"

Butonul "Cumpără" ne duce către pagina de "product-details.php", pagină unde vom afla mai multe informații despre jocul video respectiv și unde îl vom putea adauga în cart. Pe această pagină vom putea vedea dacă produsul este în stoc, prețul acestuia și informații extra despre el.

De asemenea, avem un buton de detalii, care extinde fereastra produsului și apare un text suplimentar cu informații suplimentare despre produs. Această pagină conține și o imagine mare cu jocul în format fizic.

Figure 17. Pagina "product-details.php"

La apăsarea butonului cumpără, vom fi trimiși către o pagină denumită checkout.php, pagină în care va apărea un tabel cu produsul cumpărat.

Tabelul conține mai multe coloane : Produs, unde apare numele produsului, Cantitate, unde apare un numar care simbolizează câte produse de același fel am comandat, preț, unde apare prețul produsului și șterge, unde va există un buton care va șterge intrarea cu jocul video din acest tabel.

În continuare putem finaliza comanda și suntem trimiși într-o pagină "Multumesc.php", unde multumim utilizatorului pentru că a apelat la serviciile "PolyGame".

Figure 18. Tabelul paginii "checkout.php"

Sistemul de login al portalului "PolyGame" își are rădăcinile în tabela "users" a bazei de date. Pentru acest lucru trebuie să știm că pentru a ne loga, avem nevoie de un username și o parolă. În cazul nostru un username din baza de date este "admin", cu parola "parolă". Pentru a ne loga, avem în partea din dreapta sus a paginii "acasă" un link numit "Login".

La apăsarea link-ului login va apărea un modal, care va avea loc pentru introducerea username-ului și a parolei și la apăsarea butonului login utilizatorul va fi logat.

Figure 19. Login

Modalul a fost creat cu ajutorul uneltei "Bootstrap", iar în cazul în care sesiunea de logare este adevărată, în bara de sus nu mai apare link-ul de "Login", ci un nou link de "Logout" și un text "Bun venit, ", după care apare numele utilizatorului, importat dinamic din baza de date.

Functionalitatea portalului "PolyGame"

În acest capitol se va prezenata implementarea software a aplicației. În prima parte a lucrării de licență am prezentat mai mult partea de front-end a portalului: design grafic, HTML + CSS, prezentarea paginilor etc.

Acesst capitol explică modul în care a fost dezvoltată lucrarea de către programator, pe când capitolul anterior prezintă mai mult portalul din punct de vedere al utilizatorului.

În această parte vom prezenta tot ce ține de baze de date: descrierea bazei de date, a tabelelor, a câmpurilor, query-uri folosite etc. Tot aici, vom prezenta și funcționalitatea website-ului din punct de vedere al dezvoltării PHP : paginație, partea de import dinamic al produselor din baza de date în website, partea de funcționalitate a sistemului de login, a search-bar-ului, introducerea jocurilor ce pot fi jucate online pe portal etc.

Baze de date și PHP

Baze de date

În spatele portalului de gaming, avem o bază de date ce conține mai multe tabele cu diferite înregistrări.

Aceasta a fost creată în phpMyAdmin, componentă integrată a platformei XAMPP. phpMyAdmin este un sistem gratuit cu ajutorul căruia gestionăm bazele de date MySQL, dezvoltat în limbajul PHP și folosește la modificarea și administrarea bazelor de date într-un browser. Cu ajutorul său se pot crea, șterge și modifică baze de date, tabele, câmpuri și înregistrări.

Bazele de date sunt în strânsă legătură cu PHP-ul, denumit și Duo-ul Dinamic. phpMyAdmin este unul dintre cele mai populare sisteme de gestionare a bazelor de date și este ușor de folosit de catre orice utilizator.

Baza de date a portalului "PolyGame" poartă denumirea de "polygame" și conține mai multe tabele.

Tabela "jocuri" conține toate jocurile ce există în magazinul nostru și ele sunt introduse dinamic cu ajutorul PHP în website-ul nostru.

Figure 20. Tabela "jocuri"

Tabela jocuri conține mai multe câmpuri:

jocuri_id : este câmpul principal al tabelei, reprezentând și primary key-ul. Este de tip int și are opțiunea de auto-increment, deoarece trebuie ca de fiecare dată când adăugăm un joc nou în baza de date, acesta să se incrementeze singur

jocuri_categ : este un câmp care se referă la categoria din care face parte jocul și este de tip varchar

jocuri_gen : este un câmp de tip int, care ne arată pe ce platformă rulează jocul respectiv (PC, PS4, XBOX One). "0" reprezintă PC, "1" reprezintă consola PS4, iar "2" reprezintă consola XBOX One.

jocuri_nume : este un câmp de tip varchar, unde introducem numele jocului.

jocuri_info : este un câmp de tip text, unde vom introduce informații despre jocuri, informații ce apar în pagina de "product-details.php"

jocuri_descr : este un câmp de tip text, unde avem informații referitoare la detaliile amănunțite ale jocului, cum ar fi plot-ul sau storyline-ul.

jocuri_preț : este un câmp de tip int, unde vom introduce prețul actual al jocului

jocuri_preț_redus: este un câmp de tip int, unde vom introduce prețul inițial, înainte ca acesta să fie redus

jocuri_img : este un câmp de tip varchar, unde introducem denumirea exactă a imaginii ce trebuie urcată în pagină "products-list.php". Spre exemplu acest câmp poate lua valoarea : "Fifa_15_small.jpg"

jocuri_img_big : este un câmp de tip varchar, unde introducem denumirea exactă a imaginii ce trebuie urcată în pagină "product-details.php". Spre exemplu acest câmp poate lua valoarea: "Fifa_15_big.jpg"

jocuri_stoc : este un câmp de tip tinyint, sau boolean, câmp ce poate lua valoarea "0", în cazul în care jocul video respectiv nu este în stoc, sau "1" în cazul în care acesta se află în stoc

jocuri_status : este un câmp de tip int, unde introducem "0", în cazul în care produsul este la promoție, afișând în casetă în care se află jocul o bandă roșie cu textul "PROMOȚIE", "1", în cazul în care produsul este unul nou, afișând în casetă în care se află jocul video o bandă galbenă cu textul "NOU" și "2", în cazul în care produsul nu este în niciuna din categoriile de mai sus

Figure 21. Statusul produselor

Cea de-a doua tabelă este tabela de useri, denumită "users" și este destinată utilizatorilor portalului. Fiecare utilizator își poate crea o înregistrare în această tabela, urmând ca, mai apoi, să se autentifice pe website folosind datele personale (username, parolă). Această tabelă conține trei câmpuri:

user_id: care reprezintă primary key-ul tabelei, având opțiune de autoincrement.

user_name: care reprezintă numele user-ului și este de tip varchar

user_password : reprezintă parola user-ului, este de tip varchar și este criptată cu ajutorul MD5. MD5 reprezintă o funcție de criptatre care furnizează o valoare de 128 de biți și este folosită în general pentru securizarea parolelor.

Figure 22. Tabela "users"

A treia tabelă a bazelor de date se numește "jocuri_minigame" și este destinată jocurilor online ce pot fi jucate direct pe portalul "PolyGame". Această tabelă conține 2 câmpuri:

id: care reprezintă id-ul jocului online, fiind și primary-key. Acest câmp este de tip int și are opțiunea de auto-increment.

sursă : câmpul care reprezintă sursa jocului online. Această sursă reprezintă iframe-ul jocului flash care apare pe portalul "PolyGame". Sursa este importată dinamic în php, pentru ca utilizatorul să poată juca jocurile online.

Exemplu:

Iframe-ul jocului cu id=1 :

<iframe marginheight="0" src="http://www.pipoclub.com/webonline/juegopromocioniframei.php" frameborder="2" height="392" width="430" marginwidth="0" scrolling="no">Your browser does not support iframes</iframe>

PHP

Legătura dintre baza de date și portalul de gaming "PolyGame" se realizează cu ajutorul limbajului PHP, care se poate conecta la baza de date și poate modifica sau utiliza această bază de date, prin intermediul unor funcții și al interogărilor.

Înainte să realizăm conexiunea propriu-zisă, în fișierul "config.php" am definit mai multe elemente pe care le-am folosit ulterior la conectarea propriu-zisă:

define("BASE_URL", "/polygame/"); – definirea localizării bazei de date, folderul "polygame"

define("ROOT_PATH", $_SERVER["DOCUMENT_ROOT"]."/polygame/");

define("DB_HOST", "localhost"); – definirea host-ului bazei de date

define("DB_NAME", "polygame"); – definirea numelui bazei de date a portalului, "polygame"

define("DB_USER", "root"); – definirea username-ului cu care ne conectăm la baza de date "root", username creat default de phpMyAdmin, numele lui provenind de la rădăcină, fiind username-ul care are toate privilegiile.

define("DB_PASS", ""); – definirea parolei cu care ne conectăm la baza de date. Nu am setat o parolă, deoarece portalul este folosit doar pe rețea locală și nu am avut nevoie de securitate.

Conectarea propriu-zisă la baza de date este realizată într-un fișier denumit "db.php".

Conectarea la baza de date a fost realizată folosind obiectul PDO. Clasa PDO provine de la "PHP Data Objects" și este o extensie ce ne ajută să realizăm conexiunea între baza de date și PHP. PDO ne ajută la accesarea datelor din baza de date, acest lucru fiind posibil folosind diferite funcții.

Am folosit o structură de cod de tip try/catch. Această structură se descrie prin scrierea codului într-un bloc try, pentru a favoriza catch-ul (prinderea) excepților. Această excepție reprezintă o regulă care schimbă codul care trebuie executat în cazul în care o condiție se îndeplinește. Condiția respectivă poartă numele de excepție.

Try încearcă conectarea la baza de date, folosind username-ul, parolă, numele bazei de date și uneori chiar și portul. Aceste date au fost definite anterior în fișierul denumit "config.php". Dacă nu reușește conectarea la baza de date vom trimite catch, care va semnala o eroare : "Database error".

Aici se crează o variabilă în care se formează un obiect PDO, care cere un username, o parolă și numele bazei de date.

Figure 23. Conectarea la baza de date

La partea de funcționalitate a portalului am avut de ales între 2 tipuri de programare : programare orientată pe obiecte (POO) și programare procedurală. Mereu părerile au fost împărțite vis-a-vis de alegerea unui tip de programare între cele 2. Acesta este un motiv pentru care eu am ales să folosesc un "mix", folosind atât POO, cât și programare procedurală.

Programarea orientată pe obiect a devenit populară în rândul programării după anul 1990. A fost creată pentru a organiza mai rapid și eficient programele și a dobândit o utilitate uriașă pentru programatori.

În general, un program care nu folosește tehnica POO este un program care utilizează funcții și variabile globale. Funcțiile pot utiliza aceste variabile.

Programele care folosesc tehnica POO folosesc mai multe funcții pe care le creăm într-o singură structura, denumită "clasă". Pot fi mai ușor de înțeles, deoarece programatorul analizează fiecare clasă separat, nu toate la un loc. Aceste clase sunt structuri care conțin metode și membrii. Metodele seamănă cu funcțiile din programarea procedurală, iar membrii sunt variabilele. Aceste metode sunt practic seturile de operații pe care membrii clasei le pot executa.

Obiectul este practic o variabilă produsă de o anumită clasă. Obiectele unei clase au aceeași structura, având proprietăți și metode identice, moștenite de la clasă. O altă caracteristică interesantă a claselor este aceea de moștenire, ceea ce ne arată că putem declara clase derivate din alte clase, care să "moștenească" funcționalitățile clasei din care derivă.

Instanțierea clasei sau setarea obiectului se face cu ajutorul operatorului "new".

Exemplu:

$numevar= new numeclasa();

Apelarea metodelor se realizează prin intermediul operatorului "->".

Exemplu:

$numevar->metoda();

Programarea procedurală se bazează pe utilizarea funcțiilor în PHP. În PHP, funcțiile sunt bucăți de cod care sunt apelate apoi în cadrul codului PHP. Sunt utilizate pentru aplicații mai complexe, unde avem nevoie să divizăm problema în mai multe subprobleme, fiecare fiind rezolvată de o funcție.

PHP dispune de o varietate mare de funcții predefinite (ex: rand(), isset(), require() etc), dar totodată oferă programatorului posibilitatea de a crea propriile funcții personalizate. Declararea unei funcții începe prin structura "function", iar conținutul sau este pus între acolade. Ele pot fi apelate în cod ca și restul funcțiilor predefinite.

Exemplu:

<?php

function suma($numar1,$numar2) // declarare funcție

{

return $numar1+$numar2;

}

$suma= suma(2,6); //apelare funcție

echo " suma celor 2 numere este $suma"; //afișare rezultat pe ecran

?>

Pentru declararea funcțiilor și claselor de care am avut nevoie în dezvoltarea portalului "PolyGame", am creat un fișier denumit "functions.php", unde am declarat și descris funcțiile și clasele folosite.

Prima clasă utilizata în portalul "PolyGame" se numește "Joc" . O metodă a clasei "Joc" este funcția fetch_all(), funcție definită și descrisă în figura de mai jos. În interiorul ei avem o interogare care va selecta toate înregistrările din tabela "jocuri", le va introduce într-un membru $query și va returna aceste rezultate într-un vector.

Figure 24. Clasa "Joc"

Va returna rezultatele, folosind funcția predefinită fetchAll(), funcție ce are rolul de a returna într-un vector toate rezultatele din $query, practic toate rândurile interogării de mai sus.

Instanțierea clasei se face în pagina "jocuri.php", unde creăm un obiect "$joc" al clasei "Joc" și în "$jocuri" apelăm metoda fetch_all(), practic "$jocuri" fiind acum un vector cu toate rezultatele interogării.

Exemplu:

$joc=new Joc;

$jocuri=$joc->fetch_all();

În continuare, voi insera jocurile în pagină "jocuri.php" dinamic, luând informațiile din baza de date.

Pentru acest lucru vom parcurge vectorul "$jocuri" cu ajutorul funcției foreach(), funcție ce funcționează doar cu vectori și obiecte. Ea este o metodă simplă de iterație pentru vectori. În cazul funcției foreach(), prima variabilă (obiect) din paranteză este vectorul prin care se face iterația. La fiecare iterație valoarea elementului curent ajunge în cea de-a doua variabilă, iar primul vector se incrementează cu 1, deci trece la următoarea iterație.

În continuare, într-un "div" vom introduce prima dată statusul produsului. Acest status reprezintă un câmp în baza noastră de date, care poate lua valori de la "0" la "2". Pentru a obține această valoare vom folosi sintaxa "$joc['jocuri_status']".

Într-o structură if verificăm dacă valoarea acestui status este "0" sau "1", deoarece trebuie să știm ce imagine ar trebui să încărcăm în structura produsului respectiv. În cazul nostru, valoarea "0" corespunde produselor ce sunt la promoție, valoarea "1" produselor ce sunt noi, iar "2" pentru produsele normale.

Dacă valoarea lui "$joc['jocuri_status']" va fi "0", vom încarcă png-ul imaginii pentru produse la promoție, o bandă cu textul "promoție". Am folosit formatul ".png", deoarece avem nevoie de canalul alpha de transparență. În cazul în care valoarea sa va fi "1", vom încarca png-ul imaginii pentru produse noi, o bandă cu textul "nou".

Pentru a afișa imaginea mică a produsului respectiv, avem nevoie de "$joc['jocuri_img']", care reprezintă un câmp de tip varchar a tabelei "jocuri", câmp în interiorul căruia este introdus numele imagininii respective (Exemplu : " the-witcher-wild-hunt-ps4-coperta.jpg").

În următorul "div", vom insera un text care ne arată pe ce dispozitiv poate rula jocul video curent. Aici ne-am folosit de câmpul "jocuri_gen" al tabelei jocuri, câmp ce poate lua tot valorile "0", "1", sau "2".

Am folosit din nou o structură if, în care am verificat valoarea vectorului "$joc['jocuri_gen']". În cazul în care aceasta este "0", se va afișa textul "PC", pentru "1", se va afișa textul "PS4", iar pentru "2" textul "Xbox One". Urmează să afișăm numele produsului, care va fi extras din "$joc['jocuri_nume']".

În continuare, afișăm prețul produsului, care se află în vectorul "$joc['jocuri_preț']. Într-o structura if verificăm dacă valoarea câmpului "jocuri_preț_redus" este diferită de NULL, în acest caz afișând prețul inițial, fără reducere, preț ce va fi tăiat cu o linie orizontală (a fost creată cu ajutorul clasei CSS "strikeout_price").

Butonul "Cumpără" ne va duce într-o nouă pagină, al cărei URL este dinamic, în funcție de id-ul produsului curent : href="<?php echo BASE_URL; ?>jocuri/joc.php?jocuri_id=<?php echo $joc['jocuri_id']; ?>", pentru ca pagina în care sunt prezentate detaliile jocului curent să fie dinamică.

Următoarea clasă este denumită "Recent" și seamănă, din punct de vedere al structurii, cu clasa "Joc", singura diferența fiind că aceasta este folosită pentru a afișa doar utlimele 3 jocuri din tabela "jocuri" a bazei de date, pe pagina "acasă" a portalului.

Diferența între clasa "Recent" și clasa "Joc" este dată de interogarea din interiorul funcției fetch_all : SELECT * FROM jocuri ORDER BY jocuri_id DESC LIMIT 3. "LIMIT 3" face ca această interogare să selecteze doar 3 jocuri din baza noastră de date. Le-am ordonat în funcție de "jocuri_id" în ordine descrescătoare, pentru a afișa ultimele 3 jocuri introduse în baza noastră de date, deoarece trebuie afișate ultimele jocuri apărute.

Funcția "get_products_all" este asemănătoare funcției fetch_all, doar că aceasta este folosită în continuare în altă funcție "get_products_count", care numără aceste produse selectate anterior în prima funcție.

Figure 25. Funcțiile "get_products_all" și "get_products_count"

În funcția "get_products_all" folosim din nou o structura de tip try/catch. În variabila "$results" vom adăuga toate înregistrările din tabela "jocuri". Ea returnează o variabilă "$products" care are valoarea "$results->fetchAll(PDO::FETCH_ASSOC);". Am folosit funcția fetchAll pentru a returna toate rezultatele din interogarea scrisă în interiorul funcției : "SELECT * FROM jocuri" (selectează toate înregistrările tabelei jocuri).

Funcția "get_products_count" numără câte jocuri avem în tabela "jocuri", folosind funcția predefinită count. "count(get_products_all())" numără toate jocurile, iar funcția curentă returnează acest număr.

Aceste informații ne sunt de folos pentru realizarea paginației din pagina "jocuri.php". Paginația este utilă, deoarece în tabela "jocuri" a bazei de date "polygame" sunt multe înregistrări (produse). Pentru a nu pune utilizatorul în dificultate, să dea scroll la infinit ca să vadă toate produsele noastre, am creat această noțiune de paginație, care face ca pe o pagină să fie afișate doar 9 produse, trecând printr-un click pe altă pagină dorită, unde vom putea vedea alte 9 produse.

Pentru acest aspect avem nevoie și de funcția "get_products_subset", care are ca parametrii poziția de start (primul joc de pe pagina curentă) "$positionStart", poziția finală (ultimul joc de pe pagina curentă) "$positionEnd" și "$all". Această funcție returnează un vector cu toate înregistrările din tabela "jocuri" între pozițiile "$positionStart" și "positionEnd".

Figure 26. Functia "get_products_subset"

Algoritmul funcționează în felul următor : a trebuit să numărăm câte produse avem în total în baza de date, pentru că din această valoarea vom deduce numărul de pagini de care avem nevoie. Acest număr total de produse se împarte la numărul de produse de pe pagină (9 în cazul nostru), pentru a afla numărul de pagini.

Mai jos vom prezenta codul care ne ajută să executăm acest algoritm.

Figure 27. Paginatia

Folosim "$_GET" ca să obținem un vector de variabile cu toate informațiile adunate ca parte a adresei URL, informații ce pot fi văzute de user. Practic, reținem în "$current_page" indicele paginii curente. Ne asigurăm că acest număr este de tip integer, cu ajutorul funcției "intval" ($current_page=intval($current_page).

Numărul total de produse îl aflăm cu ajutorul funcției "count", urmând să calculăm numărul total de pagini în variabila "$total_pages". Numărul total de pagini se calculează cu ajutorul funcției "ceil", care ne arată prima valoare întreagă mai mare ca valoarea dată ca parametru. În cazul meu, valoarea dată ca parametru este numărul total de produse / numărul produselor pe pagină.

Verificăm cu ajutorul unei structuri de tip if dacă numărul paginii curente este mai mare decât numărul total de pagini, caz în care calea merge până la "pg" = numărul total de pagini. În cazul în care numărul paginii curente este mai mic ca 1, calea rămâne doar "ROOT_PATH".

În continuare vom calcula valorile variabilelor "$start" și "$end". Practic, cele 2 variabile ne indică ce produse există pe pagina curentă."$start" va porni de la ((pagina curentă -1) * numărul produselor de pe pagină ) +1, iar "$end" va ajunge la (pagină curentă * numărul produselor de pe pagină).

În final, vom utiliza funcția "get_products_subset", folosind parametrii calculați anterior : "$start", "$end" și "$jocuri", pentru a returna vectorul cu produsele de pe noua pagină curentă. Acesta îl vom reține în variabilă "$jocuri".

În fișierul "pagination.php" construim structura în care va apărea această paginație.

Figure 28. "pagination.php"

Inițializăm o variabilă "$i" cu 0, după care, într-o structura repetitivă de tip "while", cât timp valoarea variabilei i este mai mică decât numărul total de pagini, incrementăm variabila i ("$i += 1;").

În cazul în care valoarea variabilei i este egală cu valoarea paginii curente, înseamnă că pagina pe care am dat click este cea curentă, deci cea activă (folosim clasa "class="pagination_active""). Altfel avem o căsuța cu textul "$i" pe ea, care ne face legătura cu nouă pagină.

Acest fișier "pagination.php" îl introducem în codul fișierului "jocuri.php", chiar înainte de zona de footer.

<?php require_once(ROOT_PATH.'inc/pagination.php'); ?>

Figure 29. Interfata grafica a paginatiei

O altă funcționalitate importantă a portalului "PolyGame" este bara de căutare. Pentru a accesa această bară de căutare , în colțul din stânga sus avem un link cu o iconiță în formă de lupă și textul "caută", ce ne duce spre pagina unde se află bara de căutare.

Funcția dezvoltată de noi se numește "get_products_search" și are ca parametru o variabilă "$s", care reprezintă textul introdus de utilizator ce urmează să fie căutat. În această funcție am declarat un vector "$products", care îl returnăm în final.

Am folosit structura de tip try/catch. În try am reținut într-o variabilă results rezultatele interogării " SELECT * FROM jocuri WHERE jocuri_nume LIKE '%$s%'". Această interogare are rolul de a selecta din tabela "jocuri" toate jocurile care au valoarea câmpului "jocuri_nume" asemănătoare cu variabila "$s". Acest lucru îl facem cu ajutorul lui "LIKE", care ne ajută să căutăm un anumit pattern într-o coloana ce are în componența sa șirul de caractere "$s". "%" se folosește pentru a defini faptul că lipsesc litere înainte și după variabilă "$s".

Exemplu:

Dacă vrem să căutăm jocul "fifa15" și în bara de căutare introducem doar "fif", acest "%" ține locul celorlalte caractere lipsa, în cazul nostru "a15".

În final, în vectorul "$products" vom introduce toate înregistrările din "$results" cu ajutorul funcției "fetchAll" și vom returna acest vector.

Figure 30. Funcția "get_products_search"

Vom avea nevoie de această funcție ce returnează înregistrările al căror nume este asemănător cu parametrul funcției în dezvoltarea implementării fișierului "caută.php".

Aici declarăm o variabilă "search_term", unde ulterior vom reține șirul de caractere pe care l-am introdus în input, pentru a cauta jocul video. Cu ajutorul funcției "trim" am introdus în variabila "$searchterm" valoarea variabilei "s", care este luată cu ajutorul lui "$_GET['s']" din input. GET și POST sunt variabile de request, care nu persistă decât până în următorul request.

Exemplu:

Dacă setez o variabia de POST și fac POST către un fișier, variabila este ținută doar atunci. Când execut alt request, această variabilă se pierde. La fel și "GET" : dacă fac request de "GET" către "caută.php?s=ceva" , "s" se numește variabilă de GET și apare în adresa, pe când "POST"-ul e ascuns. Asta este motivul pentru care folosim POST când se trimit date sensibile, precum username-ul și parola de la autentificare (login).

În cazul în care variabila "$searchterm" este diferită de 0, "chemăm" fișierul "jocuri.php", iar în vectorul "$products" reținem toate înregistrările care corespund căutării dorite, cu ajutorul funcției "get_products_search", definită anterior.

Figure 31. Searchbar

În continuare, vom descrie funcția "get_all_minigames", funcție asemănătoare "get_products_all", care are rolul de a selecta toate înregistrările din tabela "jocuri_minigame" și de a returna aceste rezultate într-o variabilă "$products".

În cazul fișierului "jocuri-online.php", vom folosi funcția descrisă mai sus ca să reținem înregistrările tabelei "jocuri_minigame" într-un vector "$jocuri", urmând mai apoi să introducem într-un "div" IFRAME-ul minigame-ului. Iframe este prescurtarea lui inline frame și reprezintă un element HTML care face posibilă introducerea unui frame într-un bloc. Practic, el permite ca o pagină să fie afișată într-un bloc din altă pagină. Este ușor de folosit, dar are câteva atribute obligatorii. Primul ar fi "SRC", atribut care are valoarea URL-ului paginii ce urmează să fie afișată, al doilea este WIDTH, sau lățimea ferestrei Iframe-ului introdus, iar al treilea atribut obligatoriu este HEIGHT, sau înălțimea ferestrei Iframe-ului.

Această secțiune funcționează în cazul în care utilizatorul portalului are conexiune la internet.

În fișierul "functions.php" există o funcție "get_product_single", care selectează din tabela "jocuri" a bazei de date doar acele jocuri care au "jocuri_id"=parametrul funcției, în cazul nostru variabila "$jocuri_id".

Această funcție o folosim în fișierul "joc.php", pentru a selecta doar jocul care are id-ul în adresa paginii. Inițial, ca să ajungem în pagina "joc.php", am folosit link-ul href="<?php echo BASE_URL; ?>jocuri/joc.php?jocuri_id=<?php echo $joc['jocuri_id']; ?>" , care ne trimite spre ea la apăsarea butonului "Cumpără" din fișierul "jocuri.php". De aici vom lua cu variabila de request $_GET "jocuri-id"-ul link-ului.

În continuare, folosim funcția "get_product_single", pentru a selecta din tabela "jocuri" jocul video care are id-ul egal cu cel din variabila $_GET. Această înregistrare este reținută într-o nouă variabilă, denumită "$joc". În continueare, vom insera produsul dinamic din baza noastră de date în pagina "joc.php", utilizând codul de mai jos:

Figure 32. Fișierul "joc.php"

Spre deosebire de "jocuri.php", aici afișăm detalii suplimentare despre joc. Unul dintre detalii se referă la existența produsului în stoc. Cu ajutorul funcției if, verificăm dacă valoarea câmpului "jocuri_status" este "0" sau "1". În cazul în care valoarea sa este "0", afișăm textul "În stoc" și afișăm textul "Nu este în stoc", în cazul în care valoarea sa este "1".

Sistemul de login al portalului "PolyGame" își are rădăcinile în tabela "users" a bazei de date. În fișierul "functions.php", verificăm în primul rând dacă userul este logat. Acest lucru îl realizăm cu ajutorul variabilei de sesiune "logged_în". Atunci când cineva este logat pe portal, voi ține o sesiune.

Figure 33. Login

O sesiune înseamnă un mod prin care, în PHP, se memorează informații de la o pagină la altă pagină. În momentul în care inițializăm o sesiune ("session_start()"), putem păstra unele variabile, chiar dacă intrăm pe alte pagini ale website-ului. Aceste date rămân valabile până când browser-ul este închis de către utilizator sau când distrug sesiunea ("session_destroy()").

Variabilele de sesiune au forma "$_SESSION["logged_in"]" și sunt folosite pentru a salva datele de pe sesiunea curentă.

După ce am inițializat sesiunea, verificăm dacă variabila "logged_in" nu este setată sau este falsă ("false"). În acest caz, utilizatorul nu este logat. În cazul în care variabila este setată și este adevărată ("true"), utilizatorul este logat.

Dacă utilizatorul nu este logat și dă click pe "Login", apare modalul în care se cere username-ul și parola. Dupa ce au fost introduse de la tastatură de către utilizator, acestea sunt trimise cu ajutorul variabilei de request "$_POST" spre codul PHP. În continuare, se intră în structura if în care se verifică dacă utilizatorul este logat sau nu și se intră pe ramura când nu este logat ("if (isset($_SESSION["logged_in"]) && $_SESSION['logged_in'] == true)"), adică în else-ul codului din paranteză. În cazul în care variabilele de request au fost setate, adică am introdus de la tastatură username-ul și parola, acestea sunt reținute în 2 variabie "$username" și "$password". În variabila "$password", vom reține parola din POST criptată cu ajutorul standardului md5, la fel fiind reținută și în baza de date (măsură de securitate).

Verificăm cu un if dacă vreuna dintre cele 2 variabile este goală (nu a completat câmpul respectiv) și reținem într-o variabilă "$error" textul "Toate câmpurile trebuiesc completate". În continuare, se face o interogare în baza de date unde se verifică dacă există un utilizator creat cu username-ul și parola introduse de la tastatură.

În cazul în care există username-ul cu parola respectivă, se setează variabila de sesiune "logged_in" ca fiind "true" și altei variabile de sesiune "username" îi vom atribui valoarea username-ului introdus, pentru a afișa dinamic mesajul : "Bun venit, username". Se da un refresh paginii curente cu ajutorul Location ("header('Location:'.BASE_URL);").

În continuare, dacă se va da click pe "Logout", se va seta variabila de sesiune "logged_in" ca fiind "false" și variabila de sesiune "username" ca fiind "null";

În fișierul "sidebar.php" am creat secțiunea de jocuri online, ce poate fi accesată doar în cazul în care utilizatorul este logat, adică variabila de sesiune "logged_in" este setată și adevărată.

if (isset($_SESSION["logged_in"]) && $_SESSION['logged_in'] == true)

În fișierul "header.php", verificăm dacă variabila de sessiune "logged_in" este falsă sau nu este setată și în acest caz vom avea link-ul de login, iar altfel vom avea link-ul de logout, care odată apăsat va face variabila falsă din nou.

Concluzii

Portalele de gaming din zilele noastre sunt într-o continuă dezvoltare. De la o zi la alta apar jocuri noi, utilizatori noi, funcționalități noi și metode noi de a interacționa cu jocurile video. Dezvoltarea acestui concept de portal de gaming nu face decât să crească comunitatea de pasionați ai jocurilor video și totodată să îi pună pe aceștia la noi încercări.

Lucrarea de licență "Portalul de gaming PolyGame" este un portal de gaming care oferă utilizatorului o experiență unică, prin complexitatea și varietatea funcționalităților implementate. În ciuda acestora, la exterior, este un portal user-friendly, cu un design grafic unic și cu informația conservată foarte bine, astfel încât utilizatorul poate să ajungă oriunde pe acest website în mai puțin de 3 click-uri.

Principiile folosite în dezvoltarea acestui portal respectă ultimele standarde și tehnologii folosite în zilele noastre, fiind un portal modern, pe placul oricărui pasionat de jocuri video.

În general, portalele de gaming se adresează fie jucătorului care vrea să-și cumpere jocuri de la marile companii de gaming, fie jucătorului care vrea să se relaxeze jucând online minigame-uri interactive.

Spre deosebire de majoritatea portalelor de gaming, portalul "PolyGame" dispune de o bază de date care are atât o colecție impresionantă de jocuri video ce pot fi cumpărate de pe portal, cât și jocuri ce pot fi jucate online pe acest portal. Ideea principală de la care am plecat a fost să creez un loc unde pasionații jocurilor video să fie puși la curent cu ultimele noutăți și totodată să se poată relaxa, jucând o serie impresionantă de minigame-uri online.

În concluzie, sper ca portalul de gaming "PolyGame" să constituie "un prieten bun" pentru toți pasionații de jocuri video, dar și pentru cei care caută un loc de relaxare, având ca obiectiv principal mărirea comunității de gaming.

Dezvoltari ulterioare

Ca orice concept care este la început, există îmbunătățiri și lucruri noi de adăugat în decursul dezvoltării sale. Ideile și îmbunătățirile apar pe parcursul implementării conceptului și trebuie avute în vedere, deoarece orice lucru de succes este într-o continuă schimbare și dezvoltare. Atunci când portalul de gaming "PolyGame" a început să prindă contur, la fel s-a întâmplat și cu ideile referitoare la îmbunătățirea sa.

O prima idee care ar ajuta la îmbunătățirea portalului ar fi aceea de a implementa un sistem de plată mult mai dezvoltat și diversificat. Ca orice client să fie satisfăcut de serviciile portalului, ar trebui să implementăm minim 3 metode de plată principale : ramburs, card bancar și PayPal. De asemenea ar trebui să gândim mai mult dezvoltarea referitoare la back-end-ul aplicației pentru a ușura accesul și modificarea bazelor de date.

Forumul este un lucru destul de important pentru un website de genul portalului de gaming "PolyGame", întrucât cea mai bună metodă de informare despre ultimele apariții sunt chiar discuțiile între utilizatorii portalului. Acest lucru ar spori atât vânzările produselor noastre, cât și numărul utilizatorilor înscriși pe portal.

De asemenea, trăim într-o lume în care majoritatea oamenilor dețin un smartphone cu acces la internet. O idee ar fi o aplicație pentru smartphone, care să poată trimită notificări vis-a-vis de noile apariții pe portalul "PolyGame". Achiziționarea unor server-e de dimensiuni destul de mari ar fi o altă necesitate, întrucât ar trebui să dezvoltăm mai mult baza noastră de date și chiar să creăm server-e pentru jocurile-online, unde vor exista comunități întregi de pasionați ai jocurilor video.

O ultima idee, inovativă, ar fi să ne putem autentifica pe portal cu ajutorul contului de Facebook, urmând mai apoi să cerem acordul utilizatorului ca portalul "PolyGame" să poată avea acces la informațiile de pe pagina sa de facebook. Ar trebui creată o analiză asupra lucrurilor pe care utilizatorul le apreciează pe pagina personală de facebook (sport, mașini, filme etc.), urmând ca mai apoi să îi putem sugera jocuri video care ar putea intra în aria sa de interes.

Bibliografie