5. diel - Kontaktný formulár

V minulej lekcii, Prepojenie kontroleru a pohľadu , sme prepojili pohľad s kontrolerom. Dokonca sme tiež pridali už jednu súčasť webu, ktorou je chybová stránka. V dnešnom dieli si do webu skúsime naprogramovať od nuly novú funkčnosť po vzore MVC. Pôjde o kontaktný formulár. V princípe nás už nič nové nestretne, základ systému máme hotový.

Šablóna

V priečinku pohľady si vytvorme kontakt.phtml, kam vložíme jednoduchý HTML kód s formulárom. Formulár bude obsahovať pole pre emailovú adresu návštevníka (aby sme mu mohli odpovedať), ďalej pole pre antispam (realizujeme ako zadanie aktuálneho roka), textové pole so správou a odosielacie tlačidlo.

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

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

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

Kód je len čisté HTML. Všimnite si využitie HTML 5 validátorov. Validovať by sme mali aj na strane PHP, ale to teraz zabudneme. Formulár sme vytvorili naozaj čo najjednoduchšie, nepoužili sme v ňom labely a rozloženie sme docielili iba pomocou
. Ak používateľ už odoslal nejaké dáta a server je odmietol, mala by aplikácia tieto dáta znovu vložiť do formulára, k tomu tie funkcie echo (). Pre zložitejšie formulára by sa oplatilo používať knižnicu, ktorá ho sama vygeneruje a tiež po odoslaní zvaliduje aj na serveri, prípadne sama vyplní. To je ale v súčasnej dobe nad rámec našich schopností, až budete pokročilejšie, môžete sa pozrieť do miestnej sekcie PHP knižnice, kde sa takáto knižnica vyrába.

Aby formulár nejako vyzeral, pridáme nejaké minimum štýlov do nášho styl.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

Na odoslanie emailu je potrebná nejaká logika. Všetku logiku aplikácie budeme písať do modelov. Kontrolery často zvádza k ich preťažovaniu a začiatočníci sa do nich snaží písať aj logiku, ale nesmieme zabúdať na to, že slúži len k prepojeniu. Jediné, čím sa zaťažujú, je spracovanie parametrov od užívateľa a volanie príslušnej logiky, ktorá už nie je ich súčasťou.

Vytvoríme si teda model pre odoslanie emailu na určitú adresu. Do zložky models si pridajte súbor OdesilacEmailu. Bude v ňom nasledujúce trieda:

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.
    public function odesli($komu, $predmet, $zprava, $od)
    {
        $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);
    }

}

Trieda obsahuje len jednu metódu odišli (), ktorá berie v parametroch adresu príjemcu, predmet, správu a adresu odosielateľa. Vnútri zostavíme hlavičku a email odošleme pomocou funkcie mb_send_mail (). Tá obaľuje obyčajnú PHP funkciu mail a dodáva jej podporu UTF8 kódovania.

Tí bystrejší si všimli, že email sa posiela ako HTML. Všetky emaily v našom RS budeme posielať ako HTML, máme tak možnosť písať klasický text aj text nejako ozdobený. Iba nesmieme zabúdať, že namiesto "\ n" píšeme
.

Kontrolér

Nakoniec vytvoríme onoho prostredníka, ktorým bude KontaktKontroler. Uveďme si rovno celý jeho kód, ktorý si vzápätí popíšeme:

<?php

class KontaktKontroler extends Kontroler
{
    public function zpracuj($parametry)
    {
        $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';
    }
}

Kontrolér dedí z kontrolér a implementuje metódu spracuj (). V metóde nastavíme nejakú hlavičku a pozrieme sa, či prišiel formulár. Ak áno, skontrolujeme rok. Pri úspechu vytvoríme OdesilacEmailu (model) a odovzdáme mu parametre od užívateľa. Samotnú logiku už vykoná model, kontrolér ho iba volá. Nakoniec nastavíme pohľad na "kontakt". admin @ adresa.cz si samozrejme nahraďte svojím emailom.

Môžeme novú stránku vyskúšať, prejdime na url kontakt a mali by sme vidieť niečo také:

Princíp ako RS ku stránke došiel je snáď jasný, ale opakovanie je matka múdrosti. Smerovač podľa prvého parametra v URL ( "kontakt") zistí, voláme KontaktKontroler a predá mu riadenie aplikácie. Ak sme formulár už odoslali, KontaktKontroler vytvorí model OdesilacEmailu a predá mu dáta od užívateľa. Model email s dátami odošle. Kontrolér nakoniec vypíše svoju šablónu.

Ak nemáte na locale sprevádzkovaný SMTP server, email vám nedorazí a budete si aplikáciu musieť vyskúšať na produkciu alebo mi veriť, že je to takto správne

Správy

Bolo by naozaj skvelé, keby sme po odoslaní emailu zobrazili užívateľovi správu, že bol odoslaný. Alebo naopak, že sa to z nejakého dôvodu nepodarilo. Pokaziť sa mohlo samotné odosielanie alebo užívateľ zle zadal antispamovú kontrolu. Iste by sme mohli do šablóny vložiť nejakú premennú s textom správy a v EmailKontroler ju nastavovať. Takúto funkčnosť ale isto nebudeme potrebovať len tu, ale v mnohých ďalších kontroléry a modeloch. Preto zobrazovania správ integrujeme do nášho redakčného systému. O tom pojednáva ďalšie lekcie, Založenie databázy a prístupy k nej v PHP .

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