Lekce 6 - NERS - Editor článků v PHP

V minulé lekci, NERS - Registrace uživatelů v PHP, jsme poprvé zaregistrovali uživatele pomocí skriptu a udělali stránku pro administraci NERS.

V dnešním PHP tutoriálu přidáme možnost přihlášení pro NERS.

Přihlašování

Vytvoříme skript prihlaseni.php v kořenovém adresáři. Jeho obsah bude následující:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styl.css" type="text/css" />
    <title>Přihlášení do administrace</title>
</head>

<body>
    <article>
        <header>
            <h1>Přihlášení do administrace</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 />
                <input type="submit" value="Přihlásit" />
            </form>

            <p>Pokud ještě nemáte účet, <a href="registrace.php">zaregistrujte se</a>.</p>
        </section>
    </article>
    <footer>
        Vytvořil &copy; HoBi 2023 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
    </footer>
</body>
</html>

Vidíme PHP direktivu pro výpis chybové zprávy (pokud existuje) a formulář se jménem a heslem. Kód je téměř totožný s tím u registračního formuláře a měl by být tedy srozumitelný.

Nad HTML vložíme následující PHP blok:

<?php
session_start();
require('Db.php');
Db::connect('127.0.0.1', 'ners_db', 'root', '');

if (isset($_SESSION['uzivatel_id'])) {
    header('Location: administrace.php');
    exit();
}

if ($_POST) {
    $uzivatel = Db::queryOne('
        SELECT uzivatele_id, admin, heslo
        FROM uzivatele
        WHERE jmeno=?
    ', $_POST['jmeno']);
    // pokud neexistuje uživatel v databázi nebo se zadané heslo neshoduje s heslem v databázi
    if (!$uzivatel || !password_verify($_POST['heslo'], $uzivatel['heslo']))
        $zprava = 'Neplatné uživatelské jméno nebo heslo.';
    else {
        $_SESSION['uzivatel_id'] = $uzivatel['uzivatele_id'];
        $_SESSION['uzivatel_jmeno'] = $_POST['jmeno'];
        $_SESSION['uzivatel_admin'] = $uzivatel['admin'];
        header('Location: administrace.php');
        exit();
    }
}

První řádky nám zpřístupní session a připojí se k databázi. Pokud je uživatel přihlášený, tak mu přihlašovací stránku zobrazovat nebudeme a přesměrujeme ho rovnou na administraci a skript zastavíme.

Pokud byl odeslán formulář, vybereme z databáze informace o uživateli podle zadaného jména a zkontrolujeme, zda se zadané heslo shoduje s otiskem hesla. Toho docílíme funkcí password_verify(), které zadáme jako parametry heslo a jeho otisk. Funkce nám následně vrátí hodnotu true nebo false, podle toho, zda heslo souhlasí či nikoliv. Pokud uživatele nenajdeme nebo bylo zadáno chybné heslo, uložíme chybovou hlášku. V případě úspěchu uložíme načtené informace o uživateli do session a tím ho přihlásíme. Dále ho přesměrujeme na administraci.

Můžeme se zkusit přihlásit. Pokud jste ještě přihlášení z registrace, tak se odhlaste a přihlaste znovu:

Přihlašování uživatelů v PHP - Databáze v PHP pro začátečníky

Přidělení role administrátora

V našem systému máme u každého uživatele sloupec admin. Ten bude nabývat hodnoty 0 nebo 1 podle toho, zda je uživatel administrátor. Tuto hodnotu může nastavit nově registrovanému uživateli pouze administrátor webu pomocí nástroje phpMyAdmin. Přesuneme se tedy do phpMyAdmin a přepneme hodnotu sloupce admin u našeho účtu na 1 (na políčko stačí jen dvakrát kliknout a hodnotu přepsat).

Administrátorská práva v phpMyAdmin - Databáze v PHP pro začátečníky

Nyní se odhlaste a znovu přihlaste.

Editor článků

Přejděme k editoru článků. Vytvořme soubor editor.php a vložme do něj HTML blok:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styl.css" type="text/css" />
    <title>Editor článků</title>
</head>

<body>
    <article>
        <header>
            <h1>Editor článků</h1>
        </header>
        <section>
            <?php
            if (isset($zprava))
                echo('<p>' . $zprava . '</p>');
            ?>

            <form method="post">
                <input type="hidden" name="clanky_id" value="<?= htmlspecialchars($clanek['clanky_id']) ?>" /><br />
                <label>
                    Titulek<br />
                    <input type="text" name="titulek" value="<?= htmlspecialchars($clanek['titulek']) ?>" />
                </label><br />
                <label>
                    URL<br />
                    <input type="text" name="url" value="<?= htmlspecialchars($clanek['url']) ?>" />
                </label><br />
                <label>
                    Popisek<br />
                    <input type="text" name="popisek" value="<?= htmlspecialchars($clanek['popisek']) ?>" />
                </label><br />
                <label>
                    Klíčová slova<br />
                    <input type="text" name="klicova_slova" value="<?= htmlspecialchars($clanek['klicova_slova']) ?>" />
                </label><br />
                <label>
                    <textarea name="obsah"><?= htmlspecialchars($clanek['obsah']) ?></textarea>
                </label>
                <input type="submit" value="Odeslat" />
            </form>
        </section>
    </article>
    <script src="js/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: "textarea[name=obsah]",
            plugins: [
                "advlist", "autolink", "lists", "link", "image", "charmap", "preview", "anchor",
                "searchreplace", "visualblocks", "code", "fullscreen",
                "insertdatetime", "media", "table"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            entities: "160,nbsp",
            entity_encoding: "raw"
        });
    </script>
    <footer>
        Vytvořil &copy; HoBi 2023 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
    </footer>
</body>
</html>

Kód obsahuje opět jen jednoduchý HTML formulář a výpis chybové zprávy. Data se do formulářových polí vypisují z pole $clanek, které si za chvíli vytvoříme. Formulář má ještě jednu zvláštnost a tou je skryté pole s ID daného článku. Podle tohoto pole poznáme, zda vkládáme nový článek (bude prázdné) nebo zda editujeme existující (bude v něm ID tohoto článku).

Zajímavý je JavaScript na konci souboru, ve které načteme WYSIWYG editor TinyMCE. To je editor vzhledově podobný např. MS Wordu, který nám generuje HTML kód podle toho, co v něm naklikáme. TinyMCE je třeba nejdříve stáhnout na oficiálních stránkách, stáhneme si tzv. "Community" verzi. Archiv extrahujeme a obsah složky tinymce/ (uvnitř složky je skript tinymce.min.js) překopírujeme do kořenové složky skriptů js/. Skript si poté nalinkujeme (soubor js/tinymce/tinymce.min.js).

Druhý skript pro TinyMCE obsahuje nastavení editoru, zvolíme, že editor chceme vytvořit z elementu <textarea> s názvem obsah. Další řádky nastavují pluginy a vypínají převod české diakritiky na entity, což je jinak poměrně nepříjemná záležitost.

Nad HTML kód dodejme obslužný PHP blok:

<?php
session_start();
if (empty($_SESSION['uzivatel_admin']))
    die('Nedostatečná oprávnění.');

require('Db.php');
Db::connect('127.0.0.1', 'ners_db', 'root', '');

$clanek = array(
    'clanky_id' => '',
    'titulek' => '',
    'obsah' => '',
    'url' => '',
    'popisek' => '',
    'klicova_slova' => '',
);

Pokud uživatel není administrátor, zastavíme celý skript s chybovou hláškou. Pro kontrolu přihlášení administrátora nám nestačí isset(), ale musíme použít empty(). V session totiž může existovat klíč uzivatel_admin, ale může mít hodnotu 0.

Dále se připojíme k databázi a do proměnné $clanek si připravíme pole s prázdnými hodnotami. To aby se do formuláře nic nevypsalo a zároveň nám PHP neohlásilo chybu s neexistující proměnnou.

Pokračujeme dále hned pod pole článku:

if ($_POST) {
    if (!$_POST['clanky_id']) {
        Db::query('
            INSERT INTO clanky (titulek, obsah, url, popisek, klicova_slova)
            VALUES (?, ?, ?, ?, ?)
        ', $_POST['titulek'], $_POST['obsah'], $_POST['url'], $_POST['popisek'], $_POST['klicova_slova']);
    } else {
        Db::query('
            UPDATE clanky
            SET titulek=?, obsah=?, url=?, popisek=?, klicova_slova=?
            WHERE clanky_id=?
        ', $_POST['titulek'], $_POST['obsah'], $_POST['url'], $_POST['popisek'], $_POST['klicova_slova'], $_POST['clanky_id']);
    }
    header('Location: index.php?clanek=' . $_POST['url']);
    exit();
} else if (isset($_GET['url'])) {
    $nactenyClanek = Db::queryOne('
        SELECT *
        FROM clanky
        WHERE url=?
    ', $_GET['url']);
    if ($nactenyClanek)
        $clanek = $nactenyClanek;
    else
        $zprava = 'Článek nebyl nalezen.';
}
?>

Pokud byl odeslán formulář, podíváme se do skrytého pole. Pokud je prázdné, vložíme nový článek do databáze. Pokud je v skrytém poli nějaká hodnota, updatujeme článek s tímto ID. SQL příkaz UPDATE jsme si ještě nepředstavovali, ale je velmi jednoduchý. Pomocí příkazu SET jednoduše nastavíme pole která potřebujeme. Co je důležité je nezapomenout na klauzuli WHERE, kde určíme které řádky se mají takto updatovat. Bez ní by se updatovaly všechny články na tyto hodnoty!

Po přidání nebo editaci článku na něj přesměrujeme.

Pokud nebyl odeslaný formulář, podíváme se, zda nemáme v superglobálním poli $_GET URL článku. To by znamenalo, že chceme nějaký editovat a proto se do pole $clanek pokusíme nahrát data z článku s tímto URL. Data se potom předvyplní do polí formuláře. Při neúspěchu vypíšeme chybovou hlášku.

Nyní si editor spusťte a vložte si článek s URL uvod. To bude hlavní stránka našeho webu:

Editor článků TinyMCE v PHP - Databáze v PHP pro začátečníky

Článek uložte do databáze tlačítkem Odeslat. Po odeslání nám prohlížeč zobrazí chybu, jelikož jsme ještě nenaprogramovali výpis článků (soubor index.php)

V další lekci, NERS - Výpis článků v PHP, naprogramujeme výpis uložených článků z databáze a seznam článků pro NERS v PHP.

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

122 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

Nejčastěji vyhledáváné

Lekce 6 - NERS - Editor článků v PHP

Přihlašování

Přidělení role administrátora

Editor článků