PROJEKT WEBOVÉ STRÁNKY Conor Anthony McGregor Adam Lindovský IT3B, Brno 2016 Střední škola technická a ekonomická Brno příspěvková organizace
Obsah Výběr tématu... 3 Návrh a grafický design... 4 Generátor... 5 Snímek úvodní stránky... 5 Dynamická struktura... 6 Databáze... 8 Generátor... 9 Použité nástroje... 10 Závěr... 11 Zdroje... 12 2
Výběr tématu McGregora jsem si vybral, protože se rád dívám na UFC a je to můj nejoblíbenější bojovník. Sleduji ho již delší dobu a přišel mi jako dobrý nápad o něm udělat web. Zároveň je Conor nejlepším bojovníkem současnosti, a to mu dodává na větší sledovanosti jak mé, tak i ostatních lidí. 3
Návrh a grafický design Barvy jsem volil podle Irské národní vlajky, tudíž zelenou a oranžovou. Barvy jsem hledal na internetu a použil jsem nástroj kapátko v PsPadu, čím jsem si vybral barvu, kterou jsem potřeboval. Na pozadí jsem použil již zmiňovaného bojovníka McGregora. Layout jsem dělal čistě podle sebe. 4
Generátor Snímek úvodní stránky 5
Dynamická struktura Můj PHP skript, který mám na své stránce použitý, řeší obsluhu Generátoru. PHP kód je obsažen v souborech generatorpostav.php, bojuj.php, boj.php a db.php. Ukázkový kód: Výpis vytvořených postav $sql="select rasa.nazev, postavy.jmeno,postavy.stamina, postavy.sila, postavy.pohyblivost, postavy.stesti,rasa.stamina AS rasastamina, rasa.sila AS rasasila, rasa.pohyblivost AS rasapohyblivost, rasa.stesti as rasastesti FROM postavy INNER JOIN rasa ON rasa.id = postavy.id_rasy ORDER BY postavy.`id` ASC"; $rs=$conn->query($sql); while($radek = $rs->fetch_assoc()){ echo "Jméno: "; echo $radek["jmeno"]; echo ", Rasa: "; echo $radek["nazev"]; echo ", Stamina: "; echo $radek["stamina"]+$radek["rasastamina"]; echo ", Síla: "; echo $radek["sila"]+$radek["rasasila"]; echo ", Obratnost: "; echo $radek["pohyblivost"]+$radek["rasapohyblivost"]; echo ", Štěstí: "; echo $radek["stesti"]+$radek["rasastesti"]; echo"<br/>"; }?> 6
Výpis informací o zápasnících $sql = "SELECT * FROM `zapasy_historie` WHERE id_zapasu = '".$idzapasu."'"; $postupboje = $conn->query($sql);?> <h3>boj <?php echo $levy["jmeno"];?> vs <?php echo $pravy["jmeno"];?></h3> <h2><?php echo $levy["jmeno"];?></h2> <h3>hp: <?php echo $levy["hp"];?> </h3> <h3>dmg: <?php echo $levy["dmg"];?> </h3> <h3>stamina: <?php echo $levy["stamina"]+$levy["rasastamina"];?> </h3> <h3>síla: <?php echo $levy["sila"]+$levy["rasasila"];?> </h3> <h3>pohyblivost: <?php echo $levy["pohyblivost"]+$levy["pohyblivost"];?> </h3> <h3>štěstí: <?php echo $levy["stesti"]+$levy["stesti"];?> </h3> <hr> <h2><?php echo $pravy["jmeno"];?></h2> <h3>hp: <?php echo $pravy["hp"];?> </h3> <h3>dmg: <?php echo $pravy["dmg"];?> </h3> <h3>stamina: <?php echo $pravy["stamina"]+$pravy["rasastamina"];?> </h3> <h3>síla: <?php echo $pravy["sila"]+$pravy["rasasila"];?> </h3> <h3>pohyblivost: <?php echo $pravy["pohyblivost"]+$pravy["pohyblivost"];?> </h3> <h3>štěstí: <?php echo $pravy["stesti"]+$pravy["stesti"];?> </h3> 7
Databáze Databázi používám pro ukládání dat z generátoru. V tabulce Rasa jsou na pevno definovány jednotlivé rasy a jejich vlastnosti. V tabulce Postavy jsou už již sečtené náhodně generované hodnoty vlastností a vlastnosti rasy. Tabulka Zapas nám uchová ID dvou vybraných hráčů. Poslední tabulka ZapasyHistorie zaznamenává způsobené zranění u jednotlivých zápasů a která ze stran jej způsobila. 8
Generátor Na stránce Aréna si může uživatel vytvořit vlastní postavu. Po kliknutí na tlačítko BOJUJ! Bude uživatel přesměrován dále, kde si bude moci vybrat, které dvě postavy se proti sobě utkají. Poté už jen stačí kliknout na odkaz dvou vybraných bojovníků, který ukáže vlastnosti daných bojovníků, průběh boje a vítěze. 9
Použité nástroje Wampserver 3.0.6 lokální server test HTML a PHP scriptů MySQL Workbench tvorba DB W3C online validátor validační nástroje pro ověření validity HTML a CSS SEO test hledání základních chyb na webu Page Speed Insights text rychlosti načítání stránek Výstřižky vystřihování potřebných obrázků Malování zpracování layoutu NotePad++ psaní kódu 10
Závěr Internetovou stánku jsem tvořil poprvé a jde to určitě znát. Velikou výhodou bylo, že jsme měli v tvorbě volnou ruku, ať už s výběrem tématu anebo grafickém designu. Kámen úrazu byly databáze, které mi z počátku nefungovaly, ale po větším nastudování jsem pochopil, jak databáze fungují, a tak jsem daný problém vyřešil. Celou práci hodnotím jako kladnou zkušenost pro tvorbu dalších webů. 11
Zdroje Conor McGregor: Wikipedie otevřená enciklopedie [online]. [cit. 08.01.2017]. Dostupné z: https://cs.wikipedia.org/wiki/conor_mcgregor Conor McGregor: Osobnosti.cz [online]. [cit. 08.01.2017]. Dostupné z: http://zivotopis.osobnosti.cz/conor-mcgregor.php 12