document€¦ · web viewmysql bylo od počátku optimalizováno především na rychlost, a to i...
TRANSCRIPT
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 [email protected] spsesenpai
Uživatel [email protected] 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