5. díl - Kontaktní formulář

PHP MVC Kontaktní formulář American English version English version

V minulém dílu našeho seriálu tutoriálů pro jednoduchý objektový redakční systém v PHP 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 emailovou 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">
        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 jen čisté HTML. Všimněte si využití HTML 5 validátorů. Validovat bychom měli i na straně PHP, ale to nyní opomeneme. Formulář jsme vytvořili opravdu co nejjednodušeji, nepoužili jsme v něm labely a rozložení jsme docílili pouze pomocí <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 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;
        margin:
}

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í emailu 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 models si přidejte soubor OdesilacEmailu. 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.
        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);
        }

}

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 UTF8 kódování.

Ti bystřejší si všimli, že email se posílá jako HTML. Všechny emaily v našem RS 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($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("admin@adresa.cz", "Email z webu", $_POST['zprava'], $_POST['email']);
                        }
                }

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

Kontroler dědí z Kontroler a implementuje metodu zpracuj(). 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 OdesilacEmailu (model) a předáme mu parametry od uživatele. Samotnou logiku již provede model, kontroler ho pouze volá. Nakonec nastavíme pohled na "kontakt". admin@adresa.cz 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:

Kontaktní emailový formulář v devbook MVC v PHP

Princip jak RS 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 email 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. O tom bude pojednávat další díl.


 

Stáhnout

Staženo 1130x (8.03 kB)
Aplikace je včetně zdrojových kódů v jazyce PHP

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (8 hlasů) :
4.8754.8754.8754.8754.875


 



 

 

Komentáře
Zobrazit starší komentáře (13)

Avatar
IT Man
Redaktor
Avatar
IT Man:

Takže tedy ve složce htdocs? A máš taky nastavený localhost v systémovým souboru hosts?

Odpovědět 29.7.2015 15:46
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
dexit33
Člen
Avatar
Odpovídá na IT Man
dexit33:

Projekt mám ve složce htdocs, localhost mám zaplý přes XAMPP a projekt se mi přes něj spouští.

 
Odpovědět 29.7.2015 15:50
Avatar
IT Man
Redaktor
Avatar
Odpovídá na dexit33
IT Man:

Co máš teda za OS? Pokud Windows, máš nastavený v souboru hosts toto?

127.0.0.1 localhost
Odpovědět 29.7.2015 15:52
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
dexit33
Člen
Avatar
dexit33:

Ano, mám windows a v souboru to takto je.

 
Odpovědět 29.7.2015 15:54
Avatar
dexit33
Člen
Avatar
Odpovídá na dexit33
dexit33:

Už jsem to vyřešil a opravdu jsem měl špatně rozmístěné soubory, měl jsem totiž složku s názvem projektu v htdocs a stačilo vyndat soubory z té složky s projektem a hodit je rovnou do htdocs, takže moje chyba :)

 
Odpovědět 29.7.2015 16:27
Avatar
Pedro
Člen
Avatar
Pedro:

Asi budu za blbce, ale i přes nastavení mb_internal_en­coding na utf-8 a charset na utf-8 se mi na výstupu zobrazují otazníky. Když stáhnu a použiju zdroják odsud tak to funguje v pohodě. Používám NetBeans 8.0.2

 
Odpovědět 13.9.2015 22:46
Avatar
MArtin
Člen
Avatar
Odpovídá na Pedro
MArtin:

Len taky napad: ukladas tie subory v UTF-8 kodovani?

 
Odpovědět 21.10.2015 12:11
Avatar
Pedro
Člen
Avatar
Pedro:

Tohle už jsem vyřešil, a právě že se v UTF-8 neukládaly a v Netbeans jsem nenašel možnost to nastavit, tak jsem přešel na Eclipse a bylo to :)

 
Odpovědět 21.10.2015 12:26
Avatar
Bebbana
Člen
Avatar
Bebbana:

V netbeans to jde krasne nastavit v netbeans.conf souboru (je v adresari /etc v korenove slozce netbeans). Staci vyhledat radek netbeans_defau­lt_options a přepsat ho takhle:

netbeans_default_options="-J-client -J-Xss2m -J-Xms32m -J-XX:PermSize=32m -J-Dapple.laf.useScreenMenuBar=true -J-Dapple.awt.graphics.UseQuartz=true -J-Dsun.java2d.noddraw=true -J-Dsun.java2d.dpiaware=true -J-Dsun.zip.disableMemoryMapping=true -J-Dfile.encoding=UTF-8"

Tím nastavíš kodovani na utf-8 pro všechny vytvořené soubory.

 
Odpovědět 28.11.2015 16:07
Avatar
danhosek
Člen
Avatar
danhosek:

Ahoj, prosím o radu ohledně nastavení cílů v google analytics. Jak vyřešit nastavení cíle pro kontaktní formulář? Přesměrovat na děkovnou stránku, která bude měřená?
Děkuji za tipy a rady.

 
Odpovědět 24. července 1:22
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 23. Zobrazit vše