Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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é:

Kontaktní formulář
localhost/kontakt

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 .


 

Stiahnuť

Stiahnuté 1838x (9.4 kB)
Aplikácia je vrátane zdrojových kódov v jazyku PHP

 

Predchádzajúci článok
Prepojenie kontroleru a pohľadu
Všetky články v sekcii
Jednoduchý redakčný systém v PHP objektovo (MVC)
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
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 university Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity (1)

 

 

Komentáre

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:13.5.2019 9:02

Nějak si neumím představit jaké problémy si mohu ušetřit, stejně se volá vždy jen jedna akce kontroleru v jeden čas. To bys musel z POST něco mazat a pak na to zapomenou v jiné akci nebo něco podobného, což se nikdy nestane. Nemám rád tohle hnidopíchání do tutoriálů pro začátečníky, že neobsahují v první lekci desetivrstvou architekturu a neuronovou síť. Je to tutoriál pro vysvětlení MVC architektury začátečníkům, na používání $_POST pro čtení dat odeslaných metodou POST není v kontroleru nic špatného. Kdyby jsi napsal, že je lepší řešení a postnul tenhle kód, tak no problem, ale psát pod tento článek, že je "velmi nešťastně napsaný" je docela mimo a ubližuje to jak autorovi, tak lidem, co se z toho učí.

Editované 13.5.2019 9:03
Odpovedať
13.5.2019 9:02
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:13.5.2019 9:20

Mne se to nechtelo vypisovat, protoze si myslim, ze s classy vetsi zkusenosti. Ja bych to napsal asi nejak takto nebo jinak.

<?php
class KontaktKontroler extends Kontroler
{
var $form_data;
        function __construct($form_data)
        {
        $this->form_data = $form_data;
        }
        public function zpracuj($parametry)
        {
                $form = $this->form_data;
                $this->hlavicka = array(
                        'titulek' => 'Kontaktní formulář',
                        'klicova_slova' => 'kontakt, email, formulář',
                        'popis' => 'Kontaktní formulář našeho webu.'
                );

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

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

---

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

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

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

Nebo to nazvat nejak rozumne, obecne. Zrovna mne nenapada nic lepsiho nez $form_data, $form, $post, $mail_form.

Ps nejsou tu ty edit. tlacitka. Aspon code by mohlo byt.

Editované 13.5.2019 9:21
 
Odpovedať
13.5.2019 9:20
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovedá na Peter Mlich
David Čápka:13.5.2019 9:37

Tvoje řešení je hezký. Dále v navazujícím kurzu se to pak i podobně dělá (formuláře se wrappují do třídy a s POST se již nepracuje). Tady mi to přišlo ještě OK.

Odpovedať
13.5.2019 9:37
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Alma Mater
Člen
Avatar
Alma Mater:17.5.2019 4:11

Citujem z Lekcie 1

Pohled přijme data od kontroleru a vloží je do připravené šablony. Hotová stránka je zobrazena uživateli, který často o celé této kráse ani netuší :)

A kde je konkrétne napísané ako pohled prijme data od kontroleru?? Kontroler ukladá data do premenných to mi je jasné....

// Nastavení proměnných pro šablonu.... SmerovacKontroler si ukladá data z vnoreného kontroleru
                $this->data['titulek'] = $this->kontroler->hlavicka['titulek'];
                $this->data['popis'] = $this->kontroler->hlavicka['popis'];
                $this->data['klicova_slova'] = $this->kontroler->hlavicka['klicova_slova'];

Skôr vychádza že kontroler prijíma data a metodou vypisPohled() na premenné iba odkazuje ($this->data) a ($this->pohled). Pohled (Šablona) si premenne len dosadí...

Otazkou vlastne je, či je vôbec vhodne písat, že pohled prijíma data od kontrolera.Ked jedine kontroler prijíma data a ukladá ich do premennych a potom na ne odkazuje. Tým, že kontroler zobrazí vystúp, pohled o kontrolerovi nevie, čiže pohled nevie co ma prijat.... len vie co ma dosadiť. Preto sa mi zdá..ze medzi pohľadom a kontrolerom je to trochu abstraktné :-), alebo Davidove texty:-)?

Odpovedať
17.5.2019 4:11
Kopírovanie je jednoduchá forma zdieľania informácii, aby sa šírili tam kde chýbajú..Autorské právo je demonštrácia m...
Avatar
Michal Šmahel:18.5.2019 14:17

Ahoj, bylo by lepší hned v původním příspěvku zmínit danou citaci, aby bylo jasné, co hodláš rozebírat. Navíc se jedná o 5. lekci, komentář patří tedy trochu jinam.

Pro úplné pochopení této problematiky je třeba znát princip funkčnosti include a require, tedy skládání souborů se zdrojovým kódem v PHP. Načtení pohledu a předání dat funguje právě na tomto principu. Zakládá to na tom, že když připojíš HTML soubor nebo soubor generující HTML kód, tento kód se přidá k tomu, co se odešle klientovi. Předání dat funguje tak, že se v kontroleru rozbalí pole s získanými daty od dílčích kontrolerů. Jelikož je PHP kód ve výsledku všechen v jednom souboru (include a require vlastně jen připojují obsah daného souboru k prvnímu souboru, který byl načten), jsou proměnné rozbalené v kontroleru dostupné i v šabloně.

Ještě tě zajímalo, jak řídící kontroler data získá. Je to poměrně jednoduché. Dílčí kontrolery (ty, které tento řídící vytvoří a zavolá na nich zpracování) získaná data ukládají do třídní vlastnosti $data (pole). Tato vlastnost je veřejná, je k ní tedy možnost přistupovat zvenčí - například z řídícího kontroleru. Dále je tu vlastnost $head, do níž dílčí kontrolery ukládají údaje do HTML hlavičky. Za funguje stejně. Řídící kontroler si jen data přečte z těchto vlastností a uloží si je do své vlastnosti data (samozřejmě dojde k jejich spojení). Z této vlastnosti jsou poté rozbaleny na jednotlivé proměnné (název klíče = název proměnné) a použity v šabloně.

David to v článku popisuje správně. Pro lepší pochopení architektury (MVC) využívá určité abstrakce, kdy nenazývá věci podle implementace, ale filozofie architektury. Implementaci však také podrobně popisuje, problém bych v tom neviděl.

Odpovedať
18.5.2019 14:17
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Odpovedá na Alma Mater
Michal Šmahel:18.5.2019 14:20

Zapomněl jsem tě označit.

Odpovedať
18.5.2019 14:20
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Alma Mater
Člen
Avatar
Alma Mater:13.6.2019 4:06

Cely systém funguje napr. z podzlozky cms na localhost v XAMPP v3.22 , na adrese (http://localhost/cms) pri tychto zmenach:

1. V subore Kontroler.php iba pridame nazov zlozky do url:

public function presmeruj($url)
        {
                         // tu pridame nazov zlozky cms do url
                header("Location: /cms/$url");
                header("Connection: close");
        exit;
        }

2.V súbore SmerovacKontro­ler.php, doplnime:

private function parsujURL($url)
        { ...
// tu doplnime funkciu, ktora odstrani prvu hodnotu z pola,  v nasom pripade cms..
array_shift($rozdelenaCesta);
return $rozdelenaCesta;
}

3. V subore rozlozeni.phtml nastavime cestu ku korenovej zlozke:

<base href= "/cms/" />

... vsetko...plati aj pre webhosting

Poznamka: Zmeny v suboroch je lepsie vykonat cez NetBeans, pretoze klasicky Notepad pri zmenach v suboroch pridava biele znaky, alebo ine neviditelne znaky, ktore napr. pri ostrom webhosting budú vypisovat chybu 500. Treba sa ujistit.ci sa nepridavaju neviditelne znaky pri zmenach v suboroch.Pokial sa pridavaju system nebude fungovat...
Subor htacces nie je potrebne menit.Vynimocne mozete skusit odkomentovat # RewriteBase / ak by vam system na webhostingu nefungoval, osobne som to vsak nepotreboval. System funguje aj pod PHP 5.6, PHP 7.1 PHP 7.2, PHP 7.3

Odpovedať
13.6.2019 4:06
Kopírovanie je jednoduchá forma zdieľania informácii, aby sa šírili tam kde chýbajú..Autorské právo je demonštrácia m...
Avatar
Alma Mater
Člen
Avatar
Alma Mater:13.6.2019 4:23

Ked chceme aby redakcny system fungoval na subdomene webhostingu napr. na adrese

http://cms.nazov_domeny.sk alebo https://cms.nazov_domeny.sk

1.V administracii webhostingu vytvorime korenovu zlozku pre subdomenu:cms­.nazov_domeny­.sk

2.V subore rozlozeni.phtml zmenime korenovu zlozku :

<base href="http://cms.nazov_domeny.sk/" />
// alebo
<base href="https://cms.nazov_domeny.sk/" />

......vsetko...

Editované 13.6.2019 4:26
Odpovedať
13.6.2019 4:23
Kopírovanie je jednoduchá forma zdieľania informácii, aby sa šírili tam kde chýbajú..Autorské právo je demonštrácia m...
Avatar
Odpovedá na Alma Mater
FiftypiSoftware:25.8.2019 12:50

Ahoj, díky, toto jsem hledal. Zkoušel jsem x možností, ale array_shift($roz­delCesta); mě nenapadlo. Vždycky přesmerování skončilo chybou too_many_redirects.

 
Odpovedať
25.8.2019 12:50
Avatar
Libor Melich
Člen
Avatar
Libor Melich:31. júla 18:46

Ahoj, po pridaní dodatočného kódu do style.css sa mi tá novo pridaná časť kódu neprejavuje na stránke. Nevie niekto prosím kde robím chybu? Je to blbosť ale aj tak ma to trápi :D

Odpovedať
31. júla 18:46
Live long and prosper, my friend.
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!