17. diel - Hra tetris v MonoGame: Webový server

V minulej lekcii, Hra tetris v MonoGame: Dokončenie , sme dokončili hru Robotris v Monogame a C# .NET. Nasledujúce 2 lekcie sú akýsi bonus a vytvoríme si v nich online skóre tabuľku. V dnešnom tutoriálu sa zameriame na serverovú časť aplikácie.

Serverová časť

Jednotlivé inštalácia našej hry budú komunikovať s jedným serverom, na ktorom sa bude nachádzať databázy hráčov. Server tak bude predstavovať centrálny bod, cez ktorý sa budú dáta zdieľať. API (rozhranie) tohto servera bude obsahovať 3 vstupné body:

• Načítanie skóre - Vráti výsledky TOP 100 hráčov z databázy. Toto rozhranie vracia XML súbor s dátami v tom istom formáte, v akom sme ich už ukladali do počítača.
• Uloženie - Uloží nový výsledok jedného hráča do databázy. Údaje sa serveru pošlú jednoducho ako parametre v URL adrese.
• Výpis tabuľky - Vráti HTML stránku s najlepšími výsledkami. S týmto bodom nebude komunikovať samotná hra, ale bude k dispozícii pre návštevníkov webovej stránky hry.

Php vs ASP.NET

Teraz teda potrebujeme vytvoriť webové stránky hry. Mohli by sme to urobiť v C# .NET, však tvorba webových aplikácií v C# nie je tak častá. Oveľa pravdepodobnejšie je, že už máte nejaké svoje webové stránky v PHP alebo že časom budete chcieť na tieto stránky pridať niečo, čo bude PHP vyžadovať (napr. Nejaký populárny redakčný systém). Rozhodol som sa teda siahnuť po technológiu, v ktorej bude tých pár riadkov servera jednoznačne ľahšie na web nasadiť. Server si napíšeme v PHP as MySQL databáz. Nebojte, bude naozaj krátky a nebude to nič ťažké Keby ste chceli predsa len server napísať v C #, čo neodporúčam, môžete využiť projekt priložený v záverečnej lekciu, kde bude takýto server pripravený. Alebo si môžete naštudovať ASP.NET kurz a vytvoriť si server sami, nie je to zložité.

Keďže chceme nahrávať skóre na internet, dnešné lekcie predpokladá, že máte zariadený nejaký webhosting

Databázy

Začneme s databázu. K jej vytvorenie môžete buď využiť populárne rozhranie phpMyAdmin a v ňom danej tabuľky naklikať alebo na databázu spustiť priamo SQL kód, ktorý si uvedieme nižšie.

Pripojte sa teda do svojej MySQL databázy. Pripojovacie údaje vám zaslal váš poskytovateľ webhostingu. Ak databázu vytvorenú nemáte, čo je na webhostingu nepravdepodobné, vytvorte si novú databázu napr. S názvom robotris_db. SQL príkaz je nasledujúci:

CREATE DATABASE `robotris_db` CHARACTER SET utf8 COLLATE utf8_czech_ci;

Tabuľka

V databáze nám postačí jediná tabuľka s výsledkami hráčov. Samozrejme by sme mohli ďalej urobiť aj užívateľské kontá a prihlasovanie do hry, ale vzhľadom k jednoduchosti nám to takto postačí. Tabuľka robotris_skore bude mať nasledujúce stĺpce:

• robotris_skore_id - ID riadku tabuľky, dátový typ INT, primárny kľúč, autoinkrement
• prezdivka - Prezývka hráča, VARCHAR(255)
• body - Počet bodov, BIGINT
• level - Dosiahnutý level, INT
• rady - Počet radov, INT
• datum - Dátum vloženie rekordu, DATETIME

Všimnite si použitie dátového typu BIGINT pre ukladanie skóre. To je u podobných hodnôt dobrá praktika, aby skóre zvlášť vytrvalých podvodnikov na serveri nepretieklo cez limit typu INT.

SQL príkaz na vytvorenie tabuľky je nasledujúci:

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áze máme hotovú. Ak ste čakali niečo zložitejšieho, musím vás sklamať

Súbory servera

Prejdime na PHP skripty. Náš server bude mať celkom 3 súbory pre každý bod serverového API.

Robotris_skore_u­loz.php

K vloženie nového výsledku do databázy si vytvoríme súbor robotris_skore_uloz.php. Na ten potom pristúpime napr. Týmto spôsobom:

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

Obsah súboru bude nasledujúci:

<?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();
    }

Nezabudnite si na jednom z prvom riadku doplniť názov databázy a vaše užívateľské meno a heslo! Ak ste na lokálnom počítači, je vaše meno pravdepodobne root a heslo prázdny reťazec. Ak skript spúšťate na webhostingu, zadajte údaje, ktoré vám boli zaslané vaším poskytovateľom pri zriadení hostingu. Príklad takýchto údajov môže byť napr. dbname=mujwebcz', 'mujwebczdb1', 'vasetajneheslo'

Kód je úplne triviálne. Na začiatku sa pripojí k databáze a pripraví si pole dát z parametrov odovzdaných metódou GET (to sú tie z URL adresy). Následne sa vytvorí SQL dotaz pre vloženie nového riadku do databázy a spustí sa s týmito dátami. Ak sa čokoľvek nepodarilo, výnimka sa zachytí v bloku catch.

Výpis výnimky je teraz pre naše diagnostické účely, na produkciu si riadok s funkciou print() zakomentujte.

Testovacie dáta

Skúsme si teraz súbor otvoriť v prehliadači s rôznymi dátami a tak vložiť niekoľko testovacích používateľov (adresu si upravte podľa vášho umiestnenia 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

Pozrite sa do databázy cez phpMyAdmin a overte, že v nej dáta naozaj sú.

Robotris_skore_nac­ti.php

Teraz je na rade kód, ktorý najlepšie výsledky naopak vráti. Vytvoríme druhý skript, súbor robotris_skore_nacti.php. Opäť sa pripojíme k databáze, vyberieme 100 najlepších výsledkov a tie vrátime vo formáte XML. Kód je opäť triviálne:

<?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();
    }

Snáď ani netreba ďalšieho opisu, len sa opäť pripojíme k databáze a vytvoríme nový XML súbor, do ktorého potom uložíme jednotlivé riadky získané z databázového dopytu ako elementy <hrac>.

Výsledné XML vyzerá nasledovne, už ho poznáme z minulých lekcií, len nám ho teraz vracia 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äť si nezabudnite zmeniť pripojovacie údaje a po odskúšaní skriptu zakomentovat funkciu print().

Robotris_skore_vy­pis.php

Blížime sa do finále. Posledné skript robotris_skore_vypis.php už nie je súčasťou komunikácie medzi hrou a serverom, ale vypíše tabuľku najlepších hráčov ako webovú stránku. Tak sa na TOP výsledky môžeme pozrieť nielen v hre, ale aj na webe. V kóde opäť nie je nič zložité:

<!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ázok nad skóre tabuľkou si môžete stiahnuť nižšie:

Výsledok potom vyzerá nasledovne:

Server máme týmto hotový, všetky súbory sú prípadne voľne k stiahnutiu v archíve pod článkom. V budúcej lekcii, Hra tetris v MonoGame: Webový klient , naučíme Robotris so serverom komunikovať a tým hru kompletne dokončíme

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.