Lekce 5 - Kontaktní formulář

V minulé lekci, Propojení kontroleru a pohledu, jsme propojili pohled s kontrolerem. Dokonce jsme také přidali již jednu součást webu, kterou je chybová stránka.

V dnešním dílu si do webu zkusíme naprogramovat od nuly novou funkčnost po vzoru MVC. Půjde o kontaktní formulář. V principu nás již nic nového nepotká, základ systému máme hotový.

Šablona

Ve složce pohledy/ si vytvořme kontakt.phtml, kam vložíme jednoduchý HTML kód s formulářem. Formulář bude obsahovat pole pro e-mailovou adresu návštěvníka (abychom mu mohli odpovědět), dále pole pro antispam (realizujeme jako zadání aktuálního roku), textové pole se zprávou a odesílací tlačítko.

<h1>Kontaktní formulář</h1>

<p>Kontaktujte nás odesláním formuláře níže.</p>

<form method="post" id="form-email">
    <label>
        Vaše emailová adresa<br />
        <input type="email" name="email" required="required" value="<?php if (isset($_POST['email'])) echo(htmlspecialchars($_POST['email'])); ?>" />
    </label><br />
    <label>
        Antispam - zadejte aktuální rok<br />
        <input type="text" name="rok" required="required" />
    </label><br />
    <label>
        <textarea name="zprava"><?php if (isset($_POST['zprava'])) echo(htmlspecialchars($_POST['zprava'])); ?></textarea>
    </label><br />
    <input type="submit" value="Odeslat" />
</form>

Kód je jen čisté HTML. Všimněte si využití HTML5 validátorů. Validovat bychom měli i na straně PHP, ale to nyní opomeneme. Formulář jsme vytvořili opravdu co nejjednodušeji, rozložení jsme docílili pouze pomocí tagů <br />. Pokud uživatel již odeslal nějaká data a server je odmítl, měla by aplikace tato data znovu vložit do formuláře, k tomu ty funkce echo(). Pro složitější formuláře by se vyplatilo používat knihovnu, která ho sama vygeneruje a také po odeslání zvaliduje i na serveru, případně sama vyplní. To je ale v současné době nad rámec našich schopností, až budete pokročilejší, můžete se podívat do místní sekce PHP knihovny, kde se taková knihovna vyrábí.

Aby formulář nějak vypadal, přidáme nějaké minimum stylů do našeho style.css:

input[type="submit"] {
    background: #6FA4F8;
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    border: 0px;
}

input[type="submit"]:hover {
    background: #2976f8;
    color: #EEEEEE;
    cursor: pointer;
}

input[type="text"], input[type="email"], input[type="password"] {
    width: 250px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    padding: 0.3em;
}

input[type="submit"] {
    padding: 10px 25px;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    font-weight: bold;
}

textarea {
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    width: 483px;
    height: 90px;
}

Model

K odeslání e-mailu je zapotřebí nějaká logika. Veškerou logiku aplikace budeme psát do modelů. Kontrolery často svádí k jejich přetěžování a začátečníci se do nich snaží psát i logiku, ale nesmíme zapomínat na to, že slouží jen k propojení. Jediné, čím se zatěžují, je zpracování parametrů od uživatele a volání příslušné logiky, která už není jejich součástí.

Vytvoříme si tedy model pro odeslání emailu na určitou adresu. Do složky modely/ si přidejte soubor OdesilacEmailu.php. Bude v něm následující třída:

class OdesilacEmailu
{

    /**
     * Odešle email jako HTML, lze tedy používat základní HTML tagy a nové
     * řádky je třeba psát jako <br /> nebo používat odstavce. Kódování je
     * odladěno pro UTF-8.
     * @param string $komu E-mailová adresa příjemce
     * @param string $predmet Předmět e-mailu
     * @param string $zprava Obsah e-mailu jako HTML řetězec
     * @param string $od E-mailová adresa odesílatele
     * @return bool TRUE, pokud se odeslání e-mailu podařilo, FALSE, pokud ne
     */
    public function odesli(string $komu, string $predmet, string $zprava, string $od): bool
    {
        $hlavicka = "From: " . $od;
        $hlavicka .= "\nMIME-Version: 1.0\n";
        $hlavicka .= "Content-Type: text/html; charset=\"utf-8\"\n";
        return mb_send_mail($komu, $predmet, $zprava, $hlavicka);
    }

}

Třída obsahuje pouze jednu metodu odesli(), která bere v parametrech adresu příjemce, předmět, zprávu a adresu odesílatele. Uvnitř sestavíme hlavičku a email odešleme pomocí funkce mb_send_mail(). Ta obaluje obyčejnou PHP funkci mail() a dodává jí podporu UTF-8 kódování.

Ti bystřejší si všimli, že email se posílá jako HTML. Všechny emaily v našem redakčním systému budeme posílat jako HTML, máme tak možnost psát klasický text i text nějak ozdobený. Pouze nesmíme zapomínat, že místo \n píšeme <br />;.

Kontroler

Nakonec vytvoříme onoho prostředníka, kterým bude KontaktKontroler. Uveďme si rovnou celý jeho kód, který si záhy popíšeme:

<?php

class KontaktKontroler extends Kontroler
{
    public function zpracuj(array $parametry): void
    {
        $this->hlavicka = array(
            'titulek' => 'Kontaktní formulář',
            'klicova_slova' => 'kontakt, email, formulář',
            'popis' => 'Kontaktní formulář našeho webu.'
        );

        if (isset($_POST["email"])) {
            if ($_POST['rok'] == date("Y")) {
                $odesilacEmailu = new OdesilacEmailu();
                $odesilacEmailu->odesli("[email protected]", "Email z webu", $_POST['zprava'], $_POST['email']);
            }
        }

        $this->pohled = 'kontakt';
    }
}

Kontroler KontaktKontroler dědí z Kontroler a implementuje metodu zpracuj(). Pokud jsme u metody v rozšiřované třídě specifikovali datový typ parametrů, nebo návratový datový typ, musíme přesně ty samé datové typy specifikovat i ve třídě, která rodičovskou třídu rozšiřuje. V metodě nastavíme nějakou hlavičku a podíváme se, zda přišel formulář. Pokud ano, zkontrolujeme rok. Při úspěchu vytvoříme model OdesilacEmailu a předáme mu parametry od uživatele. Samotnou logiku již provede model, kontroler ho pouze volá. Nakonec nastavíme pohled na kontakt. Emailovou adresu [email protected] si samozřejmě nahraďte svým emailem.

Můžeme novou stránku vyzkoušet, přejděme na URL /kontakt a měli bychom vidět něco takového:

Princip jak náš redakční systém ke stránce došel je snad jasný, ale opakování je matka moudrosti. Směrovač podle prvního parametru v URL (kontakt) zjistí, voláme KontaktKontroler a předá mu řízení aplikace. Pokud jsme formulář již odeslali, KontaktKontroler vytvoří model OdesilacEmailu a předá mu data od uživatele. Model e-mail s daty odešle. Kontroler nakonec vypíše svou šablonu.

Pokud nemáte na localu zprovozněný SMTP server, email vám nedorazí a budete si aplikaci muset vyzkoušet na produkci nebo mi věřit, že je to takhle správně

Zprávy

Bylo by opravdu skvělé, kdybychom po odeslání emailu zobrazili uživateli zprávu, že byl odeslán. Nebo naopak, že se to z nějakého důvodu nepovedlo. Pokazit se mohlo samotné odesílání nebo uživatel špatně zadal antispamovou kontrolu. Jistě bychom mohli do šablony vložit nějakou proměnnou s textem zprávy a v EmailKontroler ji nastavovat. Takovou funkčnost ale jistě nebudeme potřebovat jen zde, ale v mnoha dalších kontrolerech a modelech. Proto zobrazování zpráv integrujeme do našeho redakčního systému.

V další lekci, Založení databáze a přístupy k ní v PHP, si připravíme databázi a pobavíme se o možných přístupech k ní.

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š.