Lekce 4 - Programujeme neobjektový redakční systém v PHP (NERS)

V minulé lekci, Formulář a výpis dat z databáze do tabulky v PHP, jsme si udělali krátký úvod do databází, vložili údaje do databáze pomocí formuláře a dozvěděli jsme se také o SQL injekci a XSS.

Úplné základy práce s databázi tedy již ovládáme a nic nám nebrání k tomu, abychom si naprogramovali plnohodnotný redakční systém v PHP.

NERS

V několika málo dílech vytvoříme systém, pomocí kterého se budeme moci na náš web přihlašovat a nahrávat na něj články pomocí editoru. Systém jsem pojmenoval NERS (NEobjektový Redakční Systém). Má tyto atributy:

• Celý systém je napsaný jen základními PHP funkcemi, tedy bez objektů a bez šablon. Jedinou výjimkou je databázový wrapper, bez kterého se bohužel neobejdeme.
• Celý systém je obsažen pouze v 6 PHP souborech.
• Délka žádného souboru systému nepřesahuje 100 řádků (asi o 5 řádků je delší jen editor.php, kde jsem nechal nějaké mezery kvůli přehlednosti).
• Systém stihneme vytvořit velmi rychle a to pouze ve čtyřech tutoriálech.
• Systém obsahuje uživatelské role, registraci, přihlašování, výpis článků a interaktivní editor článků.

Systém byl napsán tak, aby ho mohl používat a rozšiřovat kdokoli bez ohledu na jeho znalosti PHP. Bez objektů, knihoven a všeho dalšího se obešel díky kompromisům, zjednodušením a minimálním požadavkům. Systém není určený pro vážné projekty a neukazuje, jak se v PHP správně programují informační systémy. Ukazuje, jak lze co nejjednodušeji dosáhnout požadovaného výsledku. Pro vážné informační systémy musíte použít MVC framework. Na ITnetworku je na toto téma spoustu pokročilých seriálů a materiálů.

Příprava projektu

Než začneme programovat PHP skripty, připravíme si layout stránky a databázovou strukturu.

Layout

Nejprve budeme potřebovat nějaký layout (HTML kostru), do kterého doprogramujeme pomocí PHP požadované funkce. Určitě ho nebudeme tvořit od znovu, ale vypůjčíme si ho z místního ukázkového webu od Honzy Bittnera. V seriálu Webové stránky krok za krokem si otevřete poslední učební lekci a soubor s kompletním webem je dole pod lekcí. Archiv si stáhněte a prohlédněte. Pokud čemukoli nerozumíte, v seriálu naleznete detailní vysvětlení každé části. Web je jen čisté HTML, takže byste s ním neměli mít problém:

Založíme si nový PHP projekt a přesuneme do něj obsah archivu s HoBiho webem. Všechny HTML stránky z něj odstraňme, nebudeme je potřebovat:

• index.html,
• dovednosti.html,
• kontakt.html,
• omne.html a
• reference.html.

Databáze

Do projektu si vložíme náš wrapper Db.php (ke stažení v 2. dílu tohoto seriálu).

Přejdeme do phpMyAdmin a vytvoříme si nějakou novou databázi, například ners_db. Nezapomeňme nastavit porovnávání na utf8_czech_ci:

Databázi si otevřeme. Nyní si vytvoříme tabulky, budou jen dvě.

Uživatelé

Vytvořte si novou tabulku uzivatele. Bude mít celkem 4 sloupce (pole):

• uzivatele_id - typ int - primární klíč, autoincrement
• jmeno - typ varchar - délka 255
• heslo - typ varchar - délka 255
• admin - typ boolean, výchozí: 0/false (vyberte možnost "Dle zadání" a poté zadejte 0, viz obrázek níže)

Sloupec admin určuje, zda je uživatel administrátor (1/0, respektive true/false).

Naklikaná tabulka by měla vypadat takto:

Nezapomeňte na primární klíč a A_I u pole uzivatele_id. Po zakliknutí A_I by se měl primární klíč nastavit automaticky, jelikož může být toto počítadlo pouze u primárního klíče.

Uložíme tlačítkem Uložit níže.

Články

Přidáme ještě tabulku clanky. Ta bude obsahovat 6 sloupců (polí):

• clanky_id - typ int - primární klíč, autoincrement
• titulek - typ varchar - délka 255
• obsah - typ text
• url - typ varchar - délka 255
• popisek - typ varchar - délka 255
• klicova_slova - typ varchar - délka 255

Naklikaná tabulka:

Opět nezapomeňme na primární klíč a autoinkrementaci u pole clanky_id.

Sloupec url je URL adresa, přes kterou budeme k článku přistupovat. Např. pro článek s titulkem Úvodní článek by URL mohlo vypsat jako uvodni-clanek. Některé systémy články zobrazují jen podle číselného ID, což je však nepříjemné jak pro uživatele, tak pro vyhledávače. Pro text článku zvolíme datový typ text, tzp varchar je vhodný zejména pro kratší texty.

Potvrdíme tlačítkem Uložit. Nyní máme vše připravené pro to, abychom se pustili do samotných PHP skriptů.

PHP Skripty

PHP skriptů bude tedy celkem 6. Každý skript bude rozdělen na dv2 části. V první polovině bude PHP blok s obsluhou, v druhé polovině bude HTML kód se stránkou a nějakou příměsí PHP kódu s výpisem výstupu obsluhy. Tyto 2 části se v aplikaci většinou striktně oddělují do samostatných souborů, ale to pro naše účely zanedbáme. Jak jsem již uváděl, na prvním místě tohoto projektu je jednoduchost, díky které bude návrh aplikace trochu trpět. Malý projekt to zvládne, s něčím větším by to byl již problém.

Jako první se musíme do našeho systému zaregistrovat. Proto do kořenové složky s projektem přidáme soubor registrace.php>

<!DOCTYPE html>
<html lang="cs-cz">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styl.css" type="text/css" />
    <title>Registrace</title>
</head>

<body>
    <article>
        <header>
            <h1>Registrace</h1>
        </header>
        <section>
            <?php
            if (isset($zprava))
                echo('<p>' . $zprava . '</p>');
            ?>

            <form method="post">
                <label>
                    Jméno<br />
                    <input type="text" name="jmeno" />
                </label><br />
                <label>
                    Heslo<br />
                    <input type="password" name="heslo" />
                </label><br />
                <label>
                    Heslo znovu<br />
                    <input type="password" name="heslo_znovu" />
                </label><br />
                <label>
                    Zadejte aktuální rok (antispam)<br />
                    <input type="text" name="rok" />
                </label><br />
                <input type="submit" value="Registrovat" />
            </form>
        </section>
    </article>
    <footer>
        Vytvořil &copy; HoBi 2023 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
    </footer>
</body>
</html>

Je krátký a jednoduchý. Obsahuje HTML strukturu a v ní formulář pro registraci nového uživatele do systému. Uživatel zadá jméno, 2x heslo (pro kontrolu) a zadá aktuální rok, což je jednoduchá ochrana proti spamu. V HTML kódu je malá příměs PHP, která vypisuje text v proměnné $zprava, pokud tato proměnná existuje. Proměnnou budeme používat pro přenos zprávy z PHP bloku do HTML bloku.

Stránka vypadá nyní takto:

V příští lekci, NERS - Registrace uživatelů v PHP, si zaregistrujeme uživatele pomocí skriptu a uděláme stránku pro administraci NERS.