Střední průmyslová škola elektrotechnická

a Vyšší odborná škola Pardubice

STŘEDNÍ PRŮMYSLOVÁ ŠKOLA

ELEKTROTECHNICKÁ

MATURITNÍ PRÁCE – WEBOVÉ STRÁNKY

březen 2019 Matěj Hůlek, 4.D

„Prohlašuji, že jsem maturitní práci vypracoval(a) samostatně a použil(a)

jsem literárních pramenů, informací a obrázků, které cituji a uvádím v seznamu

použité literatury a zdrojů informací a v seznamu použitých obrázků a neporušil

jsem autorská práva.

Souhlasím s umístěním kompletní maturitní práce nebo její části na školní

internetové stránky a s použitím jejích ukázek pro výuku.“

V Pardubicích dne ........................... ................................................

podpis

Střední průmyslová škola elektrotechnická a Vyšší odborná

škola

Pardubice

MATURITNÍ ZKOUŠKA – PROFILOVÁ ČÁST – MATURITNÍ PROJEKT

zadání maturitní práce

Obor: 18-20-M/01 Informační technologie

Školní rok: 2018/19

Třída: 4.D

Jméno a příjmení žáka: Matěj Hůlek

Téma maturitní práce: Webové aplikace

Vedoucí maturitní práce: Čestmír Bárta

Pracoviště vedoucího: SPŠE a VOŠ Pardubice, Karla IV. 13

Zadání:

Komunitní web ke hře World of Tanks, kde můžou hráči hlasovat a komentovat

jednotlivá vozidla. Případně upravovat svůj profil

Maturitní práce bude tvořena praktickou částí podle zadání a písemnou prací.

Praktická část bude uložena a zpřístupněna na školním serveru.

Součástí praktické části budou:

webové stránky umístěné na přidělené adrese na školním serveru včetně ukázkových

dat uložených v databázi,

veškerá administrace databáze proveditelná ve webových stránkách projektu,

ktrá bude obsahovat vkládání, editaci i mazání údajů prostřednictvím uživatelských

formulářů a bude zahrnovat nahrávání a mazání obrázků či jiných souborů,

Součástí písemné práce bude:

jméno a příjmení žáka, třída a název práce,

prohlášení o autorských právech, použitých zdrojích a souhlas s umístěním ukázky

webu na školní internetové stránky a souhlas s použitím ukázek pro výuku,

analýza tématu práce,

návrh projektu, popis oprávnění přístupu uživatelů, popis použité databáze,

grafický návrh designu, popis způsobu řešení responzivity webu,

popis funkcí webových stránek,

zhodnocení splnění zadání,

seznam použitých technologií s popisem méně známých technologií, licence

k použitému software, skriptům a knihovnám,

adresa webových stránek umístěných na školním serveru, seznam přístupových údajů

registrovaného uživatele a administrátora webu,

seznam použité literatury, zdrojů informací a zdrojů obrázků použitých na webu,

seznam obrázků použitých v písemné práci,

přílohy – E-R diagram databáze, Use Case diagram administrace, screenshoty

vytvořených webových stránek.

pevně vložené a podepsané CD nebo DVD obsahující kopii adresáře webových

stránek ze školního serveru, vyexportovanou databázi ve formátu SQL, v případě

potřeby popis specifických požadavků na konfiguraci serveru a písemnou práci

v elektronické podobě ve formátu PDF a ve formátu DOCX nebo ODT.

Způsob zpracování písemné práce

Zpracování písemné práce bude odpovídat požadavkům dle souboru

Maturitni prace – Formalni stranka dokumentace.pdf dostupným na www.spse.cz.

Dodržení stanovených pravidel bude jedním z kritérií hodnocení písemné práce.

Pokyny k obsahu a rozsahu písemné práce

Písemná práce bude obsahovat minimálně 15 stránek vlastního textu (počítáno bez

vložených obrázků a ukázek kódu), obrázky větší než ½ stránky budou uvedeny

v příloze. Do tohoto počtu se nezapočítávají úvodní listy, zadání, obsah, seznamy

přístupových údajů, technologií, obrázků, literatury a přílohy.

Kritéria hodnocení maturitní práce

Hlavní kritéria

splnění zadání – práce splňující zadání na méně než 50 % bude hodnocena známkou

nedostatečně,

míra vlastního podílu na řešení,

náročnost a rozsah práce,

dodržení stanovených pravidel pro zpracování písemné práce.

Vlastní maturitní práce tvoří jednu část třetí profilové zkoušky; druhou částí je její

obhajoba.

Hodnocení maturitní práce:

vedoucí maturitní práce a oponent hodnotí maturitní práci podle stanovených kritérií

hodnocení známkou výborně až nedostatečně.

Požadavek na počet vyhotovení maturitní práce

Maturitní práci odevzdáte ve stanoveném termínu vedoucímu maturitní práce, a to ve

dvou vyhotoveních. Praktickou část ponecháte na školním serveru beze změny.

Termín odevzdání maturitní práce:

Vedoucí maturitní práce:............................................................................................

Dne: ................. Ing. Ladislav Štěpánek, ředitel školy.............................................

Anotace

Komunitní web ke hře World of Tanks (WOT) od společnosti Wargaming (WG) kde hráči mohou hodnotit a komentovat jednotlivé tanky, případně upravovat svůj profil

Klíčová slova:

World of Tanks, Wargaming, API, PHP, JS, MySQL, CSS, HTML, Bootstrap,

tanky

Annotation

World of Tanks (WOT) community site from Wargaming (WG) where players can rate and comment on individual tanks, or edit their profile

Keywords:

World of Tanks, Wargaming, API, PHP, JS, MySQL, CSS, HTML, Bootstrap,

tanks

1 Obsah2 Úvod...........................................................................................................10

3 Použité technologie a vývojová prostředí...................................................11

3.1 HTML..............................................................................................................11

3.2 CSS..................................................................................................................12

3.3 JavaScript........................................................................................................13

3.4 PHP..................................................................................................................14

3.5 MySQL............................................................................................................15

4 Analýza obdobných webových stránek......................................................16

4.1 Fórum World of Tanks....................................................................................16

4.1.1 Kladné stránky............................................................................................16

4.1.2 Záporné stránky..........................................................................................16

5 Struktura webu............................................................................................17

5.1 Grafické provedení..........................................................................................17

5.1.1 Bootstrap.....................................................................................................17

5.1.2 Hlavička......................................................................................................18

5.1.3 Patička.........................................................................................................18

5.2 index.php.........................................................................................................18

5.3 profile.php.......................................................................................................18

5.4 report.php........................................................................................................19

5.5 list.php.............................................................................................................19

5.6 tank.php...........................................................................................................19

5.7 adminer.php.....................................................................................................20

5.8 Doprovodné soubory.......................................................................................20

6 API..............................................................................................................21

6.1 WOT API........................................................................................................21

6.2 Přihlášení uživatele.........................................................................................22

6.2.1 login.php.....................................................................................................22

6.3 Aktualizace databáze vozidel..........................................................................23

7 AJAX..........................................................................................................24

7.1 Fetch API.........................................................................................................25

8 Hlasování....................................................................................................26

8.1 BUFF...............................................................................................................26

8.2 NERF...............................................................................................................26

8.3 OK...................................................................................................................26

8.4 More................................................................................................................26

9 Komentáře...................................................................................................28

9.1 Vzhled komentáře...........................................................................................28

9.1.1 Jméno hráče................................................................................................28

9.1.2 Profilový obrázek........................................................................................28

9.1.3 Statistiky.....................................................................................................28

9.1.4 Hlas.............................................................................................................29

9.2 Akce u komentáře............................................................................................30

9.3 Odpovědi na komentáře..................................................................................30

9.4 Zablokovaní uživatelé.....................................................................................31

10 PHPMailer................................................................................................32

11 Databáze...................................................................................................33

11.1 phpMyAdmin..................................................................................................33

11.2 PDO.................................................................................................................33

11.3 Tabulka accounts.............................................................................................34

11.4 Tabulka vehicles..............................................................................................34

11.5 Tabulka votes..................................................................................................35

11.6 Tabulka detailedvotes......................................................................................35

11.7 Tabulka comments..........................................................................................36

11.8 Tabulka reports................................................................................................36

11.9 Tabulka reportbugs..........................................................................................37

11.10 Vztahový model databáze............................................................................37

Závěr.................................................................................................................38

Seznam přístupových údajů..............................................................................39

Seznam použité literatury.................................................................................40

Seznam použitých obrázků...............................................................................41

Ukázka webu na různých zařízeních................................................................43

..........................................................................................................................44

..........................................................................................................................45

..........................................................................................................................45

..........................................................................................................................45

..........................................................................................................................46

..........................................................................................................................47

2 Úvod

Ve hře WOT je přes 500 vozidel, různého typu, úrovní, zaměření a herního

stylu. Jejich balancování zdaleka není dokonalé a to i přes to, že WG přidává nové

aktualizace přibližně každé 2-3 měsíce, kde se o vyvážení vozidel snaží. Problém je,

že neexistuje žádné centrální místo, kde by hráči mohli sdělit své názory WG.

Existuje sice oficiální fórum WOT, ale to má tisíce různých větví a jeho schopnosti

jsou velmi omezené. Web BUFF.it by mněl být právě tím centrálním místem, kde by

hráči mohli komunikovat a sdílet jejich názory na vyvážení vozidel.

10

3 Použité technologie a vývojová prostředí

3.1 HTML

HTML (Hypertext Markup Language) je značkovací jazyk pro tvorbu

webových stránek, které jsou propojeny hypertextovými odkazy. HTML je hlavním z

jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci

dokumentů na Internetu.

V roce 1989 spolupracovali Tim Berners-Lee a Robert Cailliau na propojeném

informačním systému pro CERN. V té době se pro tvorbu dokumentů obvykle

používaly jazyky TeX, PostScript a také SGML. Berners-Lee si uvědomoval, že

potřebují něco jednoduššího a v roce 1990 byl tedy navržen jazyk HTML a protokol

HTTP. Zároveň také Tim Berners-Lee napsal první webový prohlížeč, který nazval

WorldWideWeb.

Jazyk HTML je charakterizován množinou značek (tzv. tagů) a jejich

vlastností (atributů) definovaných pro danou verzi. Tento zápis byl převzat ze SGML

a dále upravován v závislosti na aktuálních trendech Internetu.

Obrázek 1 Ukázka HTML syntaxe

11

3.2 CSS

Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou

CSS) je v informatice jazyk pro popis způsobu zobrazení elementů na stránkách

napsaných v jazycích HTML, XHTML nebo XML.

Jazyk byl navržen standardizační organizací W3C, autorem prvotního návrhu

byl Håkon Wium Lie. Byly vydány CSS1, CSS2 a CSS3. Dne 7. června 2011 byla

dokončena revize CSS 2.1.

Hlavním smyslem je umožnit návrhářům oddělit vzhled dokumentu od jeho

struktury a obsahu. Původně to měl umožnit už jazyk HTML, ale v důsledku

nedostatečných standardů a konkurenčního boje výrobců prohlížečů se vyvinul jinak.

Starší verze HTML obsahují celou řadu elementů, které nepopisují obsah a

strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů

a vyhledávání informací není takový vývoj žádoucí.

12

Obrázek 2 Ukázka CSS syntaxe

3.3 JavaScript

JavaScript je multiplatformní, objektově orientovaný, událostmi řízený

skriptovací jazyk, jehož autorem je Brendan Eich z tehdejší společnosti Netscape.

Jeho syntaxe (zápis zdrojového textu) patří do rodiny jazyků C/C++/Java, ale

JavaScript je od těchto jazyků zásadně odlišný, sémanticky (funkčně, pricipiálně) jde

o jiný jazyk.

Slovo Java je součástí jeho názvu pouze z marketingových důvodů. JavaScript

byl v červenci 1997 standardizován asociací ECMA (European Computer

Manufacturers Association) a v srpnu 1998 ISO (International Organization for

Standardization).

Standardizovaná verze JavaScriptu je pojmenována ECMAScript a z ní byly

odvozeny i další implementace, jako je například ActionScript. JavaScript byl

původně obchodní název implementace společnosti Netscape, kde byl vyvíjen

nejprve pod názvem Mocha, později LiveScript, ohlášen byl společně se společností

Sun Microsystems v prosinci 1995 jako doplněk k jazykům HTML a Java.

Pro verzi firmy Microsoft je použit název JScript. Ten je podporován

platformou .NET.

13

Obrázek 3 Ukázka JavaScriptu

3.4 PHP

PHP (rekurzivní zkratka PHP: Hypertext Preprocessor, česky „PHP:

Hypertextový preprocesor“, původně Personal Home Page) je skriptovací

programovací jazyk. Je určený především pro programování dynamických

internetových stránek a webových aplikací například ve formátu HTML, XHTML či

WML. PHP lze použít i k tvorbě konzolových a desktopových aplikací. Pro

desktopové použití existuje kompilovaná forma jazyka.

Při použití PHP pro dynamické stránky jsou skripty prováděny na straně

serveru – k uživateli je přenášen až výsledek jejich činnosti. Interpret PHP skriptu je

možné volat pomocí příkazového řádku, dotazovacích metod HTTP nebo pomocí

webových služeb. Syntaxe jazyka je inspirována několika programovacími jazyky

(Perl, C, Pascal a Java). Jazyk PHP je nezávislý na platformě, rozdíly v různých

operačních systémech se omezují na několik systémově závislých funkcí a skripty lze

většinou mezi operačními systémy přenášet bez jakýchkoli úprav.

PHP je nejrozšířenějším skriptovacím jazykem pro web, ke květnu 2017 měl

podíl přes 82 %. Oblíbeným se stal především díky jednoduchosti použití a bohaté

zásobě funkcí. V kombinaci s operačním systémem Linux, databázovým systémem

(obvykle MySQL nebo PostgreSQL) a webovým serverem Apache je často využíván

k tvorbě webových aplikací. Pro tuto kombinaci se vžila zkratka LAMP – tedy

spojení Linux, Apache, MySQL a PHP, Perl nebo Python.

14

Obrázek 4 Ukázka PHP syntaxe

3.5 MySQL

MySQL je systém řízení báze dat uplatňující relační databázový model,

vytvořený švédskou firmou MySQL AB, nyní vlastněný společností Oracle

Corporation. Jeho hlavními autory jsou Michael „Monty“ Widenius a David

Axmark. Je považován za úspěšného průkopníka dvojího licencování – je k dispozici

jak pod bezplatnou licencí GPL, tak pod komerční placenou licencí.

MySQL je multiplatformní databáze. Komunikace s ní probíhá – jak už název

napovídá – pomocí jazyka SQL. Podobně jako u ostatních SQL databází se jedná o

dialekt tohoto jazyka s některými rozšířeními.

Pro svou snadnou implementovatelnost (lze jej instalovat na GNU/Linux, MS

Windows, ale i další operační systémy), výkon a především díky tomu, že se jedná o

volně šiřitelný software, má vysoký podíl na v současné době používaných

databázích. Velmi oblíbená a často nasazovaná je kombinace GNU/Linux, Apache,

MySQL a PHP, jako základní software webového serveru („technologie LAMP“).

MySQL bylo od počátku optimalizováno především na rychlost, a to i za cenu

některých zjednodušení: má jen jednoduché způsoby zálohování, a až donedávna

nepodporovalo pohledy, triggery, a uložené procedury. Tyto vlastnosti jsou

doplňovány teprve v posledních letech, kdy začaly nejčastějším uživatelům produktu

– programátorům webových stránek – již poněkud scházet.

15

Obrázek 5 Ukázka SQL

4 Analýza obdobných webových stránek

Analýza obdobných webových stránek je v tomto případě obtížná, jelikož se

jich na internetu moc nenachází. Sice existuje několik komunitních webů k dané hře,

ale většinou s naprosto odlišným obsahem.

4.1 Fórum World of Tanks

Adresa: http://forum.worldoftanks.eu

Jediný web, o kterém by se dalo říct, že má k mému webu blízko, je právě

komunitní fórum WOT, přesněji tedy určité větvě vytvořené hráči na dané téma.

4.1.1 Kladné stránky

Zobrazení profilu hráče u komentáře

Hlasování

4.1.2 Záporné stránky

Pořád se jedná pouze o fórum

Velmi omezené možnosti

Celkové hlasování by nebylo vůbec přehledné

Většinou hlasování mezi pár tanky

16

5 Struktura webu

5.1 Grafické provedení

Vzhled a responzivita je řešena pomocí volně stažitelné sadě nástrojů

Bootstrap, doplněnou o vlastní CSS a JS soubory, které slouží především pro lepší

responzivitu specifických částí webu nebo zpracování určitých dat na straně klienta.

Všechny soubory, které jsem vytvořil já a nepatří do sady nástrojů začínají

předponou own- (own-style.css, own-script-index.js)

Stejným způsobem začínají i vlastní nadefinovaní tyly.

5.1.1 Bootstrap

Odkaz na oficiální stránku Bootstrapu: https://getbootstrap.com/

Bootstrap je jednoduchá a volně stažitelná sada nástrojů pro tvorbu webu a

webových aplikací. Obsahuje návrhářské šablony založené na HTML a CSS, sloužící

pro úpravu typografie, formulářů, tlačítek, navigace a dalších komponent rozhraní,

stejně jako další volitelná rozšíření JavaScriptu.

Pro použití Bootstrapu jsou nutné základní znalosti HTML a CSS, interaktivní

prvky jako jsou tlačítka, boxy, menu a další kompletně nastavené a graficky

zpracované elementy je totiž možné vložit pouze pomocí HTML a CSS.

Výhodou tohoto souboru nástrojů je snadné zpracování jakéhokoliv

uživatelského rozhraní ve webové aplikaci a nerozhoduje, zda to je například

uživatelské rozhraní v administraci back-endových nebo front-endových aplikací.

Bootstrap je kompatibilní s poslední verzí všech hlavních prohlížečů a

elegantně se přizpůsobuje použití na starších prohlížečích jako je Internet Explorer 8.

Od verze 2.0 také podporuje responzivní design.

To znamená, že se rozložení stránky dynamicky přizpůsobuje s ohledem na

používané zařízení (stolní PC, tablet, mobilní telefon).

17

Obrázek 6 Ukázka použití kombinace Bootstrap a vlastních stylů

5.1.2 Hlavička

Hlavička je stejná pro všechny stránky, bez ohledu na přihlášení uživatele

nebo jeho oprávnění.

Hlavička je fixní, takže při pohybu skrz stránku je stále připevněna nahoře.

Také se zde nachází tlačítko pro přihlášení uživatele.

5.1.3 Patička

Patička je stejná pro všechny stránky, bez ohledu na přihlášení uživatele nebo

jeho oprávnění.

Nacházejí se zde rychlé odkazy na sociální sítě Facebook nebo Youtube a

odkaz na stránku report.php.

5.2 index.php

Jedná se o výchozí stránku, kde je uživatel přivítán a krátce seznámen s daným

webem. Uživatel zde může vidět 5 nejlepších vozidel dle typu a 10 nejlepších

vozidel dle úrovně.

5.3 profile.php

Stránka sloužící pro úpravu profilu. Přihlášený uživatel zde může přidat

vlastního avatara, zakázat nebo povolit zobrazování statistik a jména. Tyto změny se

následně projeví v komentářové sekci.

Dále je zde možnost aktualizace manuální aktualizace statik, administrátor zde

může aktualizovat databázi veškerých vozidel.

18

Obrázek 7 Ukázka hlavičky

Obrázek 8 Ukázka Patičky

5.4 report.php

Tato stránka slouží především pro komunikaci se správcem webu, především

potom pro nahlášení nějaké chyby.

Kromě základního a detailního popisu chybu zde může uživatel také uvézt

svůj e-mail nebo přidat přílohu.

Zablokovaný uživatel může poslat danou správu specificky jako žádost o

odblokování

5.5 list.php

Výpis všech vozidel v databázi s možností rychlého hlasování s možností

filtrování podle národnosti, typu, úrovně a prémiového statusu

Omezené množství zobrazených vozidel na jednu stránku případně doplněnou

stránkováním

5.6 tank.php

Tato stránka slouží pro zobrazení určitého vozidla s jeho statikami. Kromě

základní možnosti hlasování je zde možnost pro detailní hlasování, kde uživatel

může navrhnout hodnotu jednotlivých statistik.

Dále je zde možnost přidávání komentářů a odpovědi na komentáře.

U komentářů se zobrazuje uživatelův avatar, statistiky a jméno, což může být

ovlivněno podle nastavení profilu uživatele, který příspěvek přidal. U komentářů se

taky zobrazuje hlas uživatele a případné navržené statistiky.

Komentáře mohou být mazány, upravovány, nahlašovány a v případě

administrátora může být i uživatel rovnou zablokován.

Veškeré operace, kromě přidávání nového komentáře fungují přes Ajax

19

5.7 adminer.php

Tato stránka je určena pouze pro administrátory, mohou zde spravovat

zablokované uživatele, zaslané chyby, nahlášené příspěvky a žádosti o odblokování.

V listu zablokovaných uživatel se může vyhledávat dle jména. Pokud uživatel

u nahlášené chyby nebo žádosti o odblokování uvede e-mail, může na tento e-mail

poslat odpověď, pokud je přidaná příloha, mže se jí administrátor stáhnout.

Nahlášené příspěvky jsou řazeny podle toho, kolik hráčů daný příspěvek

nahlásilo.

5.8 Doprovodné soubory

Všechny doprovodné PHP soubory jsou uloženy ve složce /src.

Pokud se jedná o doprovodný soubor ke konkrétní stránce, tak obsahuje

předponu src (src.index.php), ostatní soubory žádnou předponu neobsahují.

Ve složce se nachází složka bugAttachments, která slouží pro ukládání příloh

k nahlášeným chybám a složka avatars, kam jsou ukládány profilové obrázky

uživatelů.

Do obou složek se ukládají soubory stejným způsobem a to tak, že je vytvořen

dvou úrovňový adresář podle hashe souboru.

Příklad: máme soubor obrázek.png. Je získána hash hodnota souboru pomocí

PHP funkce hash_file. Následně je přejmenován na hodnotu hashe a uložen do dvou

úrovňové složky, které jsou pojmenovány podle 0-2 a 3-5 znaku hashe.

(obrázek.png > avatars/5b9/ac6/5b9ac6e2a9b91ab88028128f0fcf8.png)

20

6 API

Adresa na WOT API: https://developers.wargaming.net/

API (zkratka pro Application Programming Interface) označuje v informatice

rozhraní pro programování aplikací. Tento termín používá softwarové inženýrství.

Jde o sbírku procedur, funkcí, tříd či protokolů nějaké knihovny (ale třeba i

jiného programu nebo jádra operačního systému), které může programátor využívat.

API určuje, jakým způsobem jsou funkce knihovny volány ze zdrojového

kódu programu. Rozhraní, které se vytváří při kompilaci a je využíváno při běhu

programu, se nazývá ABI.

6.1 WOT API

API od společnosti Wargaming pro hru World of Tanks, je celkem pokročilé a

pro vývojáře přátelské, snadno se v něm orientuje.

Každý, kdo chce toto API použít, si musí zaregistrovat svojí aplikaci, která

musí být nastavená buď jako typu Server (má striktně nastavené IP adresy, z kterých

se může na API dotazovat) nebo typu Mobile (nemá striktně nastavené IP adresy).

Vývojářovi je přiděleno ID, které potom musí uvádět u dotazů na API.

21

6.2 Přihlášení uživatele

Přihlášení probíhá přes API metodou OpenID. Uživatel je přesměrován na

stránku WOT, kde se musí přihlásit, potom je opět přesměrován zpět na stránku

login.php.

6.2.1 login.php

Tato stránka se používá pro kontrolu a zpracování dat přihlášeného uživatele.

Jelikož data dostává prostřednictvím URL adresy, která může být podvržena,

je nutné, aby se server doptával API, jestli je Access Token korektní.

Jakmile je uživatel ověřen, tak zkontroluje, jestli se jedná o nového nebo již

dříve přihlášeného uživatele, uloženého v databázi. Následně je spočítáno WN8

uživatele (přepočet wn8 se u konkrétního uživatele, provádí jednou za 14 dní)

WN8 je neoficiální statistika, která je ale mezi hráči WOT velmi populární.

Počítá se pomocí předem definované formule, v které je zapotřebí použít tzv.

„očekáváné hodnoty“ a momentální statistiky hráče s daným vozidlem.

Očekávány hodnoty jsou hodnoty, které se rovnají průměrným statistikám

všech hráčů s daným vozidlem. Tyto hodnoty se mění prakticky každou vteřinou.

Očekávané hodnoty získávám z webu modxvm: https://modxvm.com

Pro získání momentálních statistik s jednotlivými vozidly se musím opět

doptávat na API.

22

6.3 Aktualizace databáze vozidel

Aktualizace vozidel je proces, který by se měl provádět po vydání nové

aktualizace do WOT. Tento proces pracuje s mnohem více daty, vyžaduje mnohem

více výpočtů a dotazů na API, aktualizace tedy trvá mnohem déle, než přihlášení.

Nejdříve je získán seznam všech vozidel ve hře, následně se doptává na možné

namontovatelné moduly jednotlivých tanků, výhodou je, že se můžeme doptávat na až

100 vozidel najednou.

Zde nastává problém, jelikož chceme získat nejlepší dosažitelnou konfiguraci

vozidla, ale tu nám API neposkytne. Nejlepší modul je tedy určen podle toho, kolik

zkušeností je potřebné pro jeho vyzkoumání a to platí pro každý typ modulu (věž,

dělo, pásy, motor, rádio).

Nakonec musíme získat statistiky vozidla (rychlost střelby, čas zaměření,

výdrž atd..), podle konkrétní konfigurace. Nevýhodou je, že se musíme na každé

vozidlo dotazovat zvlášť, provede se tedy několik stovek dotazů na API.

Kontrola toho, kterým vozidlům se statistiky změnily a kterém ne, by bylo

velmi časově náročné. Je tedy jednoduše celá tabulka vozidel vyprázdněna a potom se

do ní veškerá vozidla znovu vloží.

23

Obrázek 9 Ukázka PHP funkce pro získání nejlepší konfigurace vozidla

7 AJAX

AJAX (Asynchronous JavaScript and XML) je v informatice obecné označení

pro technologie vývoje interaktivních webových aplikací, které mění obsah svých

stránek bez nutnosti jejich kompletního znovunačítání za pomoci asynchronního

zpracování webových stránek pomocí knihovny napsané v JavaScriptu.

Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější

prostředí, ale vyžadují použití moderních webových prohlížečů.

Mezi výhody patří odstranění nutnosti znovunačtení a překreslení celé stránky

při každé operaci, které jsou nutné u klasického modelu WWW stránek. Pokud

například uživatel klikne na tlačítko pro udělení hlasu v nějaké anketě, celá stránka

se musí znovu načíst ze serveru, třebaže se na ní jen například aktualizují výsledky

hlasování a veškerý zbytek obsahu zůstává stejný.

Prostřednictvím AJAXu proběhne odeslání hlasu uživatele na pozadí, server

zašle jen ty části stránky, které se změnily, a jen tyto části se uživateli na stránce

aktualizují a překreslí. Taktéž nedochází k nepříjemnému efektu, kdy se po dané akci

v průběžně načítané stránce postupně přizpůsobují a „za běhu“ formátují a

zarovnávají její blokové elementy, obrázky atd.

24

7.1 Fetch API

Fetch API poskytuje rozhraní pro načítání zdrojů. Jeho použití je velmi

podobné použití XMLHttpRequest, ale nové rozhraní API poskytuje výkonnější a

flexibilnější sadu funkcí.

Fetch poskytuje obecnou definici objektů Request a Response (a dalších věcí,

které se týkají požadavků na síť).

Jedinou nevýhodou Fetch API je, že není podporováno prohlížečem Internet

Explorer

Tuto technologie používám hned na několika místech jako např.: u hlasování,

obsluhy komentářů (editace, mazání), odesílání e-mailů atd…

25

Obrázek 10 Ukázka syntaxe Fetch API v JS

Obrázek 11 Ukázka obsluhy dotazu na serveru v PHP

8 Hlasování

Hlasování je možná nejhlavnější části celého webu. Je to hlavní způsob jak se

hráči mohou vyjádřit ke stavu daného vozidla.

Jsou hlavní 3 volby, pro které může hráč hlasovat (moc slabý, vyvážený, příliš

slabý), dále je tu ještě jedna speciální volba.

Veškeré hlasování na všech stránkách probíhá přes AJAX, díky tomu je

možné i dynamicky měnit vzhled stránky.

8.1 BUFF

Volba BUFF, neboli zlepšit znamená, že vozidlo je v momentálním stádiu hry

příliš slabé a potřebovalo by zlepšit.

8.2 NERF

Volba NERF, neboli zhoršit znamená, že vozidlo je v momentálním stádiu hry

příliš silné a potřebovalo by v nějakém ohledu zhoršit.

Podlé této statistiky se určují nejlepší vozidla, jelikož jsou logicky nejsilnější.

8.3 OK

Volba OK znamená, že vozidlo je v momentálním stádiu hry vyvážené a

nepotřebuje být nijak upravováno.

Tato volba značí, že vozidlo je v dokonalé rovnováze. Jedná se o ideální stav,

kterého by v ideálním případě měla dosáhnout všechna vozidla, což je ale utopické.

8.4 More

Nejedná se přímo o hlas, jako spíš o přímý návrh hráče na úpravu konkrétních

statistik vozidla.

Hráč zde může sám navrhnout úpravu základních 15 statistik, tento návrh se

potom zobrazuje u jeho komentářů, stejně jako ostatní 3 základní hlasy, na kterých

26

není přímo závislá. Hráč tedy může hlasovat pro BUFF, NERF nebo OK a zároveň i

pro More.

27

Obrázek 12 Ukázka rychlého hlasování na stránkách index.php a list.php

Obrázek 13 Ukázka hlasování na stránce tank.php

9 Komentáře

Druhým způsobem, kterým se hráči mohou vyjádřit ke stavu vozidla se

samozřejmě komentářová sekce, která se nachází pod každým vozidlem.

K přidávání komentářů musí být uživatel přihlášen, jinak se mu nezobrazí

formulář pro přidání komentáře nebo odpovědi na komentář.

9.1 Vzhled komentáře

Každý komentář má jasně daný vzor, podle kterého se řídí, ale jeho vzhled se

může měnit na základě hlasování a nastavení profilu hráče, který komentář přidal.

U komentáře se kromě samotného textu komentáře mohou zobrazovat tyto

informace:

9.1.1 Jméno hráče

Pokud má uživatel v profilu nastavené, aby se ostatním uživatelům

nezobrazovalo jeho jméno, tak se na místě jméno zobrazí pouze nápis *anonym*.

Toto využijí ti hráči, kteří chtějí zůstat v anonymitě.

Veškerá komunikace přes AJAX je napsaná tak, aby se nedalo zjistit ID hráče

ve hře.

9.1.2 Profilový obrázek

Každý hráč si může v nastavení profilu nahrát vlastní obrázek, který se potom

zobrazuje u komentářů.

Pokud si uživatel nenastaví profilový obrázek, je mu přidělen výchozí.

9.1.3 Statistiky

U uživatele se zobrazují statistiky, na základě kterých se dá vyvodit výpovědní

hodnota názoru daného hráče o daném vozidle.

V nastavení profilu hráče se dá nastavit, aby se statistky u jeho příspěvků

nezobrazovaly.

28

9.1.3.1 WN8

Podle WN8 můžeme vyvodit tzv. „skill“, neboli dovednost hráče. Čím větší,

tím lepší.

Pokud by třeba špatný hráč (~400 wn8) argumentoval, že se jedná o špatné

vozidlo a naopak dobrý hráč (1500+ nw8) argumentoval, že se jedná o velmi dobré

vozidlo, dalo by se vyvodit, že se jedná o vozidlo, které potřebuje vysokou zručnost.

9.1.3.2 WR

Win rate ukazuje procento vyhraných bitev hráče. Čím větší tím lepší.

Z této statistiky se dá vyčíst herní styl hlavně u lepších hráčů. Pokud má dobrý

hráč vysoký WR dá se usoudit, že se snaží podporovat svůj tým. Pokud ho má ovšem

naopak nízký, dá se usoudit, že se snaží hrát na sebe a svůj tým nepodporuje.

9.1.3.3 Battles

Počet bitev je statika, podle které se dá porovnávat v poměru k WN8.

Pokud má hráč velký počet bitev, ale malé WN8 dá se usoudit, že nemá pro

danou hru vlohy. Pokud má ale naopak malý počet bitev a vysoké WN8 , dá se

usoudit, že se buďto jedná o velmi talentovaného hráče nebo o tzv. „reroll“.

9.1.4 Hlas

Dále se u komentáře zobrazuje hlas a návrh statistik hráče, který se dá

rozkliknou a zobrazit.

29

Obrázek 14 Ukázka komentáře

9.2 Akce u komentáře

U každého komentáře se v pravé části obrazovky zobrazuje seznam možných

akcí. Uživatel svůj příspěvek může smazat nebo editovat, cizí komentáře může pouze

nahlásit.

Administrátor může smazat kterýkoliv komentář a má i možnost rovnou hráče,

který komentář přidal zablokovat

9.3 Odpovědi na komentáře

Na každý komentář se dá odpovědět. Odpověď má stejnou strukturu jako

klasický komentář, jediný rozdíl je v to, že u zprávy je připnuto jméno hráče,

kterému jsme odpověděli.

Pokud odpovíme sami sobě, tak ve zprávě připnuté jméno není.

30

Obrázek 15 Ukázka menu akcí u komentáře

Obrázek 16 Ukázka komentářové struktury

9.4 Zablokovaní uživatelé

Zablokovaní uživatelé nemohou přidávat komentáře nebo na ně odpovídat.

Své staré komentáře nemohou editovat, pouze je mohou smazat.

31

10 PHPMailer

Odkaz na PHPMailer: https://github.com/PHPMailer/PHPMailer

Administrátor může na stránce adminer.php odpovědět, pokud je k dané

zprávě uveden e-mail. K tomuto používám knihovnu PHPMailer.

Knihovna umožňuje kromě odeslání e-mailů, také odesílání přílohy, HTML i

alternativního obsahu nebo inline obrázky. Odeslání přes PHP mail() funkci, SMTP i

sendmail.

PHPMailer patří mezi nejpoužívanější knihovny pro odesílání emailů v PHP.

Je použit ve WordPressu, Drupalu, Joomla a mnoha dalších CMS. Vzhledem k tomu,

že se autor zabývá email marketingem a tuto knihovnu sám používá, je velmi často

aktualizována a chyby rychle opravovány.

Podporuje odesílání pomocí interní funkce mail() v PHP, přímo programem

sendmail či přes SMTP a nabízí také podepsání zprávy DKIM. Obsah emailu lze mít

typu multipart, tedy HTML i textový obsah zároveň. Připojování příloh je

samozřejmostí, dokáže ale také připojit inline obrázky přes CID.

32

Obrázek 17 Ukázka funkce pro odesílání e-mailů

11 Databáze

11.1 phpMyAdmin

Programový systém phpMyAdmin je nástroj napsaný v jazyce PHP

umožňující jednoduchou správu obsahu databáze MySQL prostřednictvím webového

rozhraní.

V současné době umožňuje vytvářet/rušit databáze, vytvářet/upravovat/rušit

tabulky, provádět SQL příkazy a spravovat klíče. Jedná se o jeden z

nejpopulárnějších nástrojů pro správu databáze. Je k dispozici v 72 jazycích.

11.2 PDO

Asi nejvýznamnější novinkou v PHP 5.1 je rozšíření PDO umožňující

jednotným způsobem pracovat s rozličnými databázemi.

Na rozdíl od knihoven ADOdb nebo PEAR DB se nesnaží vytvořit kompletní

abstrakci skrývající rozdíly mezi jednotlivými databázemi, ale naopak k nim

poskytuje nízkoúrovňový přístup se všemi jejich specifickými vlastnostmi pomocí

jednotného rozhraní.

Používání PDO je samozřejmě doporučované a přestože klasická rozšíření pro

práci s databázemi zatím nejsou označená jako zastaralá (v některých případech

obsahují širší funkčnost), jednou k tomu pravděpodobně dojde.

33

Obrázek 18 Ukázka PHP funkce pro získání dat z databáze pomocí PDO

11.3 Tabulka accounts

V této tabulce se ukládají všichni uživatelé, kteří se kdy na web přihlásili.

Kromě statistik hráče, se zde ukládá i nastavení profilu a oprávnění uživatele.

11.4 Tabulka vehicles

V této tabulce jsou uložena všechna vozidla i s jejich statistikami.

34

Obrázek 19 Ukázka tabulky accounts

Obrázek 20 Ukázka tabulky vehicles

11.5 Tabulka votes

V této tabulce se ukládají jednotlivé hlasy hráčů k daným vozidlům.

11.6 Tabulka detailedvotes

V této tabulce se ukládají návrhy úprav statistik hráče k určitému vozidlu.

35

Obrázek 21 Ukázka tabulky votes

Obrázek 22 Ukázka tabulky detailedvotes

11.7 Tabulka comments

V této tabulce se ukládají jednotlivé komentáře k danému vozidlu a to i

odpovědi na komentáře.

11.8 Tabulka reports

V této tabulce se ukládají nahlášené komentáře.

36

Obrázek 23 Ukázka tabulky comments

Obrázek 24 Ukázka tabulky reports

11.9 Tabulka reportbugs

V této tabulce se ukládají nahlášené chyby nebo žádosti o zrušení zablokování

účtu.

11.10 Vztahový model databáze

37

Obrázek 25 Ukázka tabulky reportbugs

Obrázek 26 Ukázka vztahového modelu databáze

Závěr

Tento projekt by v nejlepším případě mněl fungovat jako centrální místo, kde

by hráči mohli komunikovat a hlasovat pro vozidla dle jejich bojových schopností.

Tyto statistiky by byly inspirací pro Wargaming, který by na základě, těchto dat

zlepšoval jejich hru.

Největším problémem je asi způsob ukládání velkého množství dat, jako jsou

např. komentáře, jednotlivé hlasy nebo avatary.

Do budoucna by se musel tento web především dostat do povědomí komunity,

aby jej hráči začali využívat. Dále by se dal vylepšit vzhled webu a přidat podrobné

grafy, které by například ukazovaly průměrné hodnocení tanku na základě

průměrného hodnocení hráče.

38

Seznam přístupových údajů

Úroveň oprávnění Přihlašovací email Heslo

Administrátor buffit.wot@gmail.com spsesenpai

Uživatel spse.user@gmail.com spseuser

39

Seznam použité literatury

1. Hypertext Markup Language [online]. Wikipedie: Otevřená encyklopedie, 2004,

12. 1. 2019, 21:36 [cit. 2019-03-12]. Dostupné z:

https://cs.wikipedia.org/wiki/Hypertext_Markup_Language

2. Kaskádové styly [online]. Wikipedie: Otevřená encyklopedie, 2004, 12. 1. 2019,

21:34 [cit. 2019-03-12]. Dostupné z: https://cs.wikipedia.org/wiki/Kask

%C3%A1dov%C3%A9_styly

3. JavaScript [online]. Wikipedie: Otevřená encyklopedie, 2004, 12. 1. 2019, 21:35

[cit. 2019-03-12]. Dostupné z: https://cs.wikipedia.org/wiki/JavaScript

4. PHP [online]. Wikipedie: Otevřená encyklopedie, 2004, 28. 2. 2019, 13:38 [cit.

2019-03-12]. Dostupné z: https://cs.wikipedia.org/wiki/PHP

5. MySQL [online]. Wikipedie: Otevřená encyklopedie, 2004, 11. 9. 2018, 10:43 [cit.

2019-03-12]. Dostupné z: https://cs.wikipedia.org/wiki/MySQL

6. Bootstrap [online]. Wikipedie: Otevřená encyklopedie, 2004, 28. 2. 2019, 09:25

[cit. 2019-03-12]. Dostupné z: https://cs.wikipedia.org/wiki/Bootstrap

7. API [online]. Wikipedie: Otevřená encyklopedie, 2004, 3. 5. 2018, 11:03 [cit.

2019-03-12]. Dostupné z: https://cs.wikipedia.org/wiki/API

8. AJAX [online]. Wikipedie: Otevřená encyklopedie, 2004, 21. 8. 2018, 12:12 [cit.

2019-03-12]. Dostupné z: https://cs.wikipedia.org/wiki/AJAX

9. PHPMailer [online]. Blog Pavel Kulteč, 2007, 24.10.2017 13:58 [cit. 2019-03-12].

Dostupné z: https://www.kutac.cz/blog/weby-a-vse-okolo/phpmailer-vse-pro-

spravne-odeslani-emailu/

10. PhpMyAdmin [online]. Wikipedie: Otevřená encyklopedie, 2007, 16. 12. 2018,

11:58 [cit. 2019-03-12]. Dostupné z: https://cs.wikipedia.org/wiki/PhpMyAdmin

11. PDO [online]. ITnetwork, 2006, 7.7.2012 [cit. 2019-03-12]. Dostupné z:

https://www.itnetwork.cz/php/ostatni/php-prace-s-mysql-pouziti-ovladace-pdo

40

Seznam použitých obrázků

Obrázek 1 Ukázka HTML syntaxe.................................................................................13

Obrázek 2 Ukázka CSS syntaxe.....................................................................................14

Obrázek 3 Ukázka JavaScriptu.......................................................................................15

Obrázek 4 Ukázka PHP syntaxe.....................................................................................16

Obrázek 5 Ukázka SQL..................................................................................................17

Obrázek 6 Ukázka použití kombinace Bootstrap a vlastních stylů................................19

Obrázek 7 Ukázka hlavičky............................................................................................20

Obrázek 8 Ukázka Patičky.............................................................................................20

Obrázek 9 Ukázka PHP funkce pro získání nejlepší konfigurace vozidla.....................25

Obrázek 10 Ukázka syntaxe Fetch API v JS..................................................................27

Obrázek 11 Ukázka obsluhy dotazu na serveru v PHP..................................................27

Obrázek 12 Ukázka rychlého hlasování na stránkách index.php a list.php...................29

Obrázek 13 Ukázka hlasování na stránce tank.php........................................................29

Obrázek 14 Ukázka komentáře......................................................................................31

Obrázek 15 Ukázka menu akcí u komentáře..................................................................32

Obrázek 16 Ukázka komentářové struktury...................................................................32

Obrázek 17 Ukázka funkce pro odesílání e-mailů..........................................................34

Obrázek 18 Ukázka PHP funkce pro získání dat z databáze pomocí PDO....................35

Obrázek 19 Ukázka tabulky accounts............................................................................36

Obrázek 20 Ukázka tabulky vehicles.............................................................................36

Obrázek 21 Ukázka tabulky votes..................................................................................37

Obrázek 22 Ukázka tabulky detailedvotes.....................................................................37

Obrázek 23 Ukázka tabulky comments..........................................................................38

Obrázek 24 Ukázka tabulky reports...............................................................................38

41

Obrázek 25 Ukázka tabulky reportbugs.........................................................................39

Obrázek 26 Ukázka vztahového modelu databáze.........................................................39

Obrázek 27 Index.php na PC..........................................................................................45

Obrázek 28 Index.php na Telefonu................................................................................45

Obrázek 29 list.php na PC..............................................................................................46

Obrázek 30 list.php na telefonu......................................................................................46

Obrázek 31 report.php na PC.........................................................................................47

Obrázek 32 report.php na telefonu.................................................................................47

Obrázek 33 profile.php na telefonu................................................................................48

Obrázek 34 profile.php na PC........................................................................................48

Obrázek 35 tank.php na telefonu....................................................................................49

Obrázek 36 tank.php na PC............................................................................................49

42

Ukázka webu na různých zařízeních

43

Obrázek 27 Index.php na PC

Obrázek 28 Index.php na Telefonu

44

Obrázek 29 list.php na PC

Obrázek 30 list.php na telefonu

45

Obrázek 31 report.php na PC

Obrázek 32 report.php na telefonu

46

Obrázek 33 profile.php na PC

Obrázek 34 profile.php na telefonu

47

Obrázek 35 tank.php na PC

Obrázek 36 tank.php na telefonu