Lekce 17 - Hra tetris v MonoGame: Webový server

V minulé lekci, Hra tetris v MonoGame: Dokončení, jsme dokončili hru Robotris v Monogame a C# .NET. Následující 2 lekce jsou jakýsi bonus a vytvoříme si v nich online skóre tabulku.

V dnešním tutoriálu se zaměříme na serverovou část aplikace.

Serverová část

Jednotlivé instalace naší hry budou komunikovat s jedním serverem, na kterém se bude nacházet databáze hráčů. Server tak bude představovat centrální bod, přes který se budou data sdílet. API (rozhraní) tohoto serveru bude obsahovat 3 vstupní body:

• Načtení skóre - Vrátí výsledky TOP 100 hráčů z databáze. Toto rozhraní vrací XML soubor s daty v tom samém formátu, v jakém jsme je již ukládali do počítače.
• Uložení - Uloží nový výsledek jednoho hráče do databáze. Údaje se serveru pošlou jednoduše jako parametry v URL adrese.
• Výpis tabulky - Vrátí HTML stránku s nejlepšími výsledky. S tímto bodem nebude komunikovat samotná hra, ale bude k dispozici pro návštěvníky webové stránky hry.

PHP vs ASP.NET

Nyní tedy potřebujeme vytvořit webové stránky hry. Mohli bychom to udělat v C# .NET, nicméně tvorba webových aplikací v C# není tak častá. Mnohem pravděpodobnější je, že již máte nějaké své webové stránky v PHP nebo že časem budete chtít na tyto stránky přidat něco, co bude PHP vyžadovat (např. nějaký populární redakční systém). Rozhodl jsem se tedy sáhnout po technologii, ve které bude těch pár řádků serveru jednoznačně snadnější na web nasadit. Server si napíšeme v PHP a s MySQL databází. Nebojte, bude opravdu krátký a nebude to nic těžkého Kdybyste chtěli přecijen server napsat v C#, což nedoporučuji, můžete využít projekt přiložený v závěrečné lekci, kde bude takovýto server připravený. Nebo si můžete nastudovat ASP.NET kurz a vytvořit si server sami, není to složité.

Jelikož chceme nahrávat skóre na internet, dnešní lekce předpokládá, že máte zařízený nějaký webhosting

Databáze

Začneme s databázi. K jejímu vytvoření můžete buď využít populární rozhraní phpMyAdmin a v něm dané tabulky naklikat nebo na databázi spustit přímo SQL kód, který si uvedeme níže.

Připojte se tedy do své MySQL databáze. Připojovací údaje vám zaslal váš poskytovatel webhostingu. Pokud databázi vytvořenou nemáte, což je na webhostingu nepravděpodobné, vytvořte si novou databázi např. s názvem robotris_db. SQL příkaz je následující:

CREATE DATABASE `robotris_db` CHARACTER SET utf8 COLLATE utf8_czech_ci;

Tabulka

V databázi nám postačí jediná tabulka s výsledky hráčů. Samozřejmě bychom mohli dále udělat i uživatelské účty a přihlašování do hry, ale vzhledem k jednoduchosti nám to takto postačí. Tabulka robotris_skore bude mít následující sloupce:

• robotris_skore_id - ID řádku tabulky, datový typ INT, primární klíč, autoinkrement
• prezdivka - Přezdívka hráče, VARCHAR(255)
• body - Počet bodů, BIGINT
• level - Dosažený level, INT
• rady - Počet řad, INT
• datum - Datum vložení rekordu, DATETIME

Všimněte si použití datového typu BIGINT pro ukládání skóre. To je u podobných hodnot dobrá praktika, aby skóre zvláště vytrvalých pařanů na serveru nepřeteklo přes limit typu INT.

SQL příkaz k vytvoření tabulky je následující:

CREATE TABLE `robotris_skore` (
  `robotris_skore_id` int(11) AUTO_INCREMENT,
  `prezdivka` varchar(255) COLLATE utf8_czech_ci NOT NULL,
  `body` bigint(20) NOT NULL,
  `level` int(11) NOT NULL,
  `rady` int(11) NOT NULL,
  `datum` datetime NOT NULL,
  PRIMARY KEY (`robotris_skore_id`)
);

A databázi máme hotovou. Pokud jste čekali něco složitějšího, musím vás zklamat

Soubory serveru

Přejděme na PHP skripty. Náš server bude mít celkem 3 soubory pro každý bod serverového API.

robotris_skore_u­loz.php

K vložení nového výsledku do databáze si vytvoříme soubor robotris_skore_uloz.php. Na ten poté přistoupíme např. tímto způsobem:

https://www.mujweb.cz/robotris_skore_uloz.php?prezdvika=KAREL&body=9999&level=99&rady=99

Obsah souboru bude následující:

<?php

    try
    {
        $dbh = new PDO('mysql:host=127.0.0.1;dbname=', '', '');

        $data = array($_GET['prezdivka'], $_GET['body'], $_GET['level'], $_GET['rady']);
        $insert = $dbh->prepare("INSERT INTO robotris_skore (prezdivka, body, level, rady, datum) VALUES (?, ?, ?, ?, NOW())");
        $insert->execute($data);

        $dbh = null;
    }
    catch (PDOException $e)
    {
        print "Chyba: " . $e->getMessage() . "<br />";
        die();
    }

Nezapomeňte si na jednom z prvním řádku doplnit název databáze a vaše uživatelské jméno a heslo! Pokud jste na lokálním počítači, je vaše jméno pravděpodobně root a heslo prázdný řetězec. Pokud skript spouštíte na webhostingu, zadejte údaje, které vám byly zaslány vaším poskytovatelem při zřízení hostingu. Příklad takových údajů může být např. dbname=mujwebcz', 'mujwebczdb1', 'vasetajneheslo'

Kód je naprosto triviální. Na začátku se připojí k databázi a připraví si pole dat z parametrů předaných metodou GET (to jsou ty z URL adresy). Následně se vytvoří SQL dotaz pro vložení nového řádku do databáze a spustí se s těmito daty. Pokud se cokoli nepovedlo, výjimka se zachytne v bloku catch.

Výpis výjimky je nyní pro naše diagnostické účely, na produkci si řádek s funkcí print() zakomentujte.

Testovací data

Zkusme si nyní soubor otevřít v prohlížeči s různými daty a tak vložit několik testovacích uživatelů (adresu si upravte dle vašeho umístění skriptu):

http://www.mujweb.cz/robotris_skore_uloz.php?prezdivka=DAVID&body=9999&level=99&rady=99
http://www.mujweb.cz/robotris_skore_uloz.php?prezdivka=KAREL&body=8888&level=88&rady=88
http://www.mujweb.cz/robotris_skore_uloz.php?prezdivka=JANA&body=7777&level=77&rady=77

Podívejte se do databáze přes phpMyAdmin a ověřte, že v ní data opravdu jsou.

robotris_skore_nac­ti.php

Nyní je na řadě kód, který nejlepší výsledky naopak vrátí. Vytvoříme druhý skript, soubor robotris_skore_nacti.php. Opět se připojíme k databázi, vybereme 100 nejlepších výsledků a ty vrátíme ve formátu XML. Kód je opět triviální:

<?php

    try
    {
        $dbh = new PDO('mysql:host=127.0.0.1;dbname=', '', '');

        $out = new XMLWriter();
        $out->openMemory();
        $out->startDocument('1.0','UTF-8');
        $out->setIndent(TRUE);
        $out->startElement('hraci');

        $result = $dbh->query('SELECT prezdivka, body FROM robotris_skore ORDER BY body DESC LIMIT 100');
        foreach ($result as $row)
        {
            $out->startElement('hrac');
            $out->writeElement('prezdivka', $row['prezdivka']);
            $out->writeElement('body', $row['body']);
            $out->endElement();
        }

        $out->endElement();
        $out->endDocument();
        echo $out->outputMemory(TRUE);

        $dbh = null;
    }
    catch (PDOException $e)
    {
        print "Chyba: " . $e->getMessage() . "<br />";
        die();
    }

Snad ani netřeba dalšího popisu, pouze se opět připojíme k databázi a vytvoříme nový XML soubor, do kterého poté uložíme jednotlivé řádky získané z databázového dotazu jako elementy <hrac>.

Výsledné XML vypadá následovně, již jej známe z minulých lekcí, pouze nám jej nyní vrací webová stránka:

<?xml version="1.0" encoding="UTF-8"?>
<hraci>
 <hrac>
  <prezdivka>DAVID</prezdivka>
  <body>9999</body>
 </hrac>
 <hrac>
  <prezdivka>KAREL</prezdivka>
  <body>8888</body>
 </hrac>
 <hrac>
  <prezdivka>JANA</prezdivka>
  <body>7777</body>
 </hrac>
</hraci>

Opět si nezapomeňte změnit připojovací údaje a po odzkoušení skriptu zakomentovat funkci print().

robotris_skore_vy­pis.php

Blížíme se do finále. Poslední skript robotris_skore_vypis.php již není součástí komunikace mezi hrou a serverem, ale vypíše tabulku nejlepších hráčů jako webovou stránku. Tak se na TOP výsledky můžeme podívat nejen ve hře, ale i na webu. V kódu opět není nic složitého:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Robotris - webové skóre</title>
    <style type="text/css">
        #skore-tabulka
        {
            width: 80%;
            margin: 0 auto;
            border-collapse: collapse;
        }

        #skore-tabulka td
        {
            border: 1px solid red;
            background-color: #F86969;
        }

        #skore-tabulka th
        {
            border: 1px solid red;
            background-color: #F83737;
        }
    </style>
</head>

<body>

<p style="text-align: center;">
    <img src="skore_tabulka.png" alt="Robotris - skóre tabulka" />
</p>

<?php

    try
    {
        $dbh = new PDO('mysql:host=127.0.0.1;dbname=', '', '');

        echo '
        <table id="skore-tabulka">
        <tr>
            <th>Pořadí</th>
            <th>Přezdívka</th>
            <th>Body</th>
            <th>Level</th>
            <th>Řady</th>
            <th>Datum</th>
        </tr>';

        $result = $dbh->query('SELECT * FROM robotris_skore ORDER BY body DESC');

        $i = 1;
        foreach ($result as $row)
        {
            echo '
            <tr>
                <td>' . $i . '</td>
                <td>' . htmlspecialchars($row['prezdivka']) . '</td>
                <td>' . $row['body'] . '</td>
                <td>' . $row['level'] . '</td>
                <td>' . $row['rady'] . '</td>
                <td>' . $row['datum'] . '</td>
            </tr>';
            $i++;
        }

        echo "</table>";

        $dbh = null;
    }
    catch (PDOException $e)
    {
        print "Chyba: " . $e->getMessage() . "<br />";
        die();
    }

?>

</body>
</html>

Odkazovaný obrázek nad skóre tabulkou si můžete stáhnout níže:

Výsledek poté vypadá následovně:

Server máme tímto hotový, veškeré soubory jsou případně volně ke stažení v archivu pod článkem.

V příští lekci, Hra tetris v MonoGame: Webový klient, naučíme Robotris se serverem komunikovat a tím hru kompletně dokončíme .

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.