Formulář pro rychlou zpětnou vazbu v PHP a jQuery. PHP obsahuje zranitelnost: od teorie k praxi
Ahoj přátelé! Rád bych vám představil univerzální skript pro odesílání dat z formulářů na email. Skript je ideální pro weby, jako je vstupní stránka, weby s vizitkami atd. Náš skript Feedback Forms vyniká mezi množstvím ostatních skriptů na internetu tím, že má schopnost propojit neomezený počet formulářů s různými poli na jedné stránce a je schopen odesílat dopisy více příjemcům.
Tak. Začněme. Začněme schopnostmi skriptu.
Skript funguje na základě knihovny, takže první věc, kterou musíme udělat, je připojit ji. K tomu doporučuji používat hostované knihovny Google.
Promluvme si o zbývajících souborech podrobněji:
feedback.js je hlavní soubor skriptu, který je zodpovědný za odeslání formuláře AJAX.
jquery.arcticmodal.js,
jquery.arcticmodal.
- poskytují možnost zobrazovat formuláře v modálním okně.
jquery.jgrowl.js,
HTML a požadované atributy.
Povinným atributem pro všechny prvky formuláře je atribut name="" - nezbytný pro následné přizpůsobení formuláře.
Pro tlačítko (type="button") musíte zadat class="feedback" . Rád bych také upozornil na skutečnost, že jako tlačítko může fungovat jakákoli HTML značka s třídou „feedback“ Volání formuláře v modálním okně Chcete-li volat formulář v modálním okně, musíte nejprve definovat akci pro kliknutí na značku, například div s třídou modal_btn
Volání formuláře v modálním okně $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal ());
Vzhledem k tomu, že formulář by měl být viditelný pouze v modálním okně, je třeba jej skrýt umístěním do prvku div s atributem style="display: none;" a také zabalit do několika standardních prvků div pro úpravu modálního okna.
Vymysleli jsme tedy základní nastavení pro připojení našeho skriptu pro odesílání formulářů na e-mail. Pojďme se nyní podívat dovnitř a zjistit, jak nakonfigurovat pole, oznámení a vše ostatní, co tam je.
Příklad nastavení pro jeden formulářNastavení pro všechny formuláře jsou uložena v souboru feedback\index.php$form["form-1"] = array("fields" => array("name" => array("title" => "Name", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Pole [ %1$s ] může obsahovat chybu", "minlength " => "Minimální délka pole [ %1$s ] je menší než povolená délka - %2$s", "maxlength" => "Maximální délka pole [ %1$s ] je větší než povoleno - %2$s",)), "tell " => array("title" => "Telefon", "validate" => array("preg" => "/^((8|\+) [\- ]?)?(\(?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5", ), "messages" => array("preg" => "Pole [ %1$s ] může obsahovat chybu", "minlength" => "Minimální délka pole [ %1$s] je menší než povolená délka - %2$s",)),), "cfg" => array(" charset" => "utf-8", "subject" => "Předmět e-mailu", "title" => "Nadpis" v těle e-mailu", "ajax" => true, "validate" => true, "from_email" = > " [e-mail chráněný]", "from_name" => "noreply", "to_email" => " [e-mail chráněný], [e-mail chráněný]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "adresa77", "okay" => "Zpráva odeslána - OK", "kurva" => "Zpráva odeslána - CHYBA", "spam" => "Spamový robot", "upozornit" => "color-modal-textbox", "usepresuf" => false)) // Další formulář $form["form-2"] = array("fields" => array(.....
Chcete-li přidat nastavení pro nový formulář, musíte následovat příklad pole $form["form-1"] a vytvořit nové pole $form[""]
Pamatujete si, co jsem řekl o povinném atributu name=""?
Nastal tedy čas říct vám, proč je to stále potřeba.
name="" je alfanumerický klíč pro pole, musí být jedinečný pro pole $form[""]
Příklad html kódu pro přehlednost
Nyní pochopíme pole a k čemu jsou potřebná.
$form["form-1"] = pole();
$form["form-2"] = pole();
atd.
- "pole" => pole();
- "title" => "Vaše jméno" - název prvku formuláře, zobrazí se v případě chyb nebo v šabloně
- "validate" => array();
- - pole, obsahuje pravidla ověření formulářových prvků
- "preg" => "%%" - regulární výraz
- "minlength" => "3" - minimální velikost pole
- "maxlength" => "35" - maximální velikost pole
- "substr" => "35" - vždy oříznuto na N znaků
- "zprávy" => pole();
- - pole obsahující ověřovací zprávy, jmenovitě:
- "preg" => "Prvek formuláře neodpovídá regulárnímu výrazu"
- "maxlength" => "Maximální délka pole [ %1$s] překračuje povolený limit - %2$s" - chyba ověření, klíč (preg) neodpovídá ověřovacímu klíči
- "cfg" => pole();
- - Řada nastavení formuláře.
- "charset" => "utf-8" - kódování
- "předmět" => "Předmět dopisu", - Předmět dopisu
- "title" => "Nadpis v těle dopisu", - Nadpis v těle dopisu [e-mail chráněný]
- "ajax" => true, - toto je formulář Ajax TODO (pokud není potřeba, nastavte jej na hodnotu false)
- "validate" => true, - (true) pokud chceme ověřit formulář na serveru, nahradí js validaci "ajax" => true. Když je vypnuto (false), nemusíte nastavovat nastavení pole. TODO [e-mail chráněný]"from_email" => "myemail", - odesílatel, zadejte název pole (name = "myemail"), a pokud nepotřebujete e-mail od uživatele, pak útržek [e-mail chráněný], [e-mail chráněný], [e-mail chráněný]",)
- "from_name" => "myname", - odesílatel, zadejte název pole (name="myname"), a pokud nepotřebujete uživatelské jméno, pak útržek No-reply
- "to_email" => "
- ", - e-mail příjemce. Chcete-li odeslat na několik adres, uveďte je oddělené čárkami. Příklad ("to_email" => "
- "to_name" => "noreply1", - Jméno příjemce. Při odesílání na více adres uveďte jména příjemců oddělená čárkami. Příklad ("to_name" => "noreply1, noreply2, noreply3",)
- "geoip" => true, - zjistit polohu pomocí typu TODO
- "referer" => false, - přidejte URL stránky, ze které byl formulář odeslán
- "antispamjs" => "address77", - Antispamová metoda je založena na skrytém (display:none) původně vyplněném poli, které po načtení stránky automaticky vymaže javascript, to nedokáže předvídat ani chytrý robot a pak je zablokováno.
- "okay" => "Zpráva uživateli", - Pokud je formulář úspěšně odeslán, zobrazí se zpráva uživateli, můžete použít html tagy.
- "fuck" => "Zpráva pro uživatele", - Zpráva pro uživatele, která se zobrazí, když dojde k chybě při odesílání formuláře, můžete použít html tagy.
- "spam" => "Zpráva uživateli", - Zpráva uživateli, zobrazí se v případě podezření na spamový robot, můžete použít html tagy.
- "notify" => "color-modal", - jaký typ upozornění zobrazit, textové pole - bloky v horním rohu stránky, barva - barevné zvýraznění ve formuláři, modální - modální okno ve středu stránky, žádné - zakázat. Můžete kombinovat například: barevně modální - chyby ve vyplňování polí se zvýrazněním a stav odeslání textu v modálním okně TODO
- "usepresuf" => false - Ať už se použije vlastní dodatek k předmětu nebo k názvu dopisu, v případě malé změny můžete zadat například %%cfg.title.suffix%%, k tomu musí být skryté pole ve formuláři, další podrobnosti viz f -qiu presuf()
Za prvé, aby bylo možné formulář odeslat v šabloně, musíte v nastavení formuláře povolit použití souboru šablony - "tpl" => true ,
Za druhé, musíte vytvořit soubor šablony s příponou *.tpl ve složce (feedback/tpl/), v souladu s názvem formuláře (name="form-1").
Příklad: (feedback/tpl/form-1.tpl)
| Nadpis v těle e-mailu | |
| %%name.title%% | %%name.value%% |
| %%tell.title%% | %%tell.value%% |
jméno, řekni atd. - Toto jsou atributy (name="") polí, která uživatel vyplní.
title – Název prvku formuláře, který se nastavuje v poli nastavení prvku formuláře.
value – Hodnota prvku formuláře.
To je pro dnešek vše, ale scénář rozhodně není dokonalý, takže komentáře a popisy chyb jsou vítány a v budoucích verzích budou opraveny.
P.S. Skript byl vyvinut týmem
Není žádným tajemstvím, že velmi často musíte nějak komunikovat s návštěvníky vašeho webu. Samozřejmě můžete jednoduše zadat svůj e-mail (jako já), nebo můžete nabídnout jiný způsob - toto je formulář pro zpětnou vazbu. To samozřejmě vyžaduje znalost PHP. Ale abyste nemuseli psát vše od začátku, poskytnu vám velmi dobrý skript formuláře zpětné vazby.
Po stažení rozbalte archiv na svůj web (dejte pozor, abyste nic nesmazali). Teď to nastavíme. Chcete-li to provést, otevřete soubor "config.php". A změňte hodnoty následujících proměnných:
Nyní můžete spustit soubor index.php skriptu. V důsledku toho se před vámi objeví formulář. Můžete jej vyplnit a odeslat.
Nyní vyvstává otázka: "Jak vložit tento formulář zpětné vazby na svůj web?" Chcete-li to provést, vyhledejte soubor, který je zodpovědný za vaši stránku zpětné vazby (ať je to „feedback.html“). Okamžitě změňte příponu na php (tj. „feedback.php“). Zkopírujte kód ze skriptu index.php do souboru se stránkou zpětné vazby (feedback.php). Nyní můžete mezi značkami a dělat, co chcete, jen nemazat to, co jste vložili z index.php. Nedotýkejte se ani toho, co je mezi štítky, pokud přesně nevíte, co děláte.
A nakonec, pokud se vám nelíbí vzhled formuláře, můžete to opravit v souboru „styling.css“.
Pokud máte ještě nějaké dotazy nebo máte nějaké chyby ve skriptu (netestoval jsem to), napište mi na e-mail, abych to mohl opravit.
Abyste nebyli závislí na práci cizích skriptů, naučte se je vytvářet sami. Můj videokurz "PHP a MySQL od nuly k guruovi" vás naučí:
V této lekci se seznámíme s funkcí mail() na příkladu vytvoření formuláře zpětné vazby v PHP a následného odeslání přijatých dat emailem.
K tomu si vytvoříme dva soubory – forma.php a mail.php. První soubor bude obsahovat pouze formulář s poli pro zadání uživatele. Uvnitř značky formuláře je tlačítko "Poslat" a atribut action, který odkazuje na handler - mail.php, což je místo, kde jsou data z formuláře přístupná po kliknutí na tlačítko "Poslat". V našem příkladu jsou data formuláře odeslána na webovou stránku s názvem „/mail.php“. Tato stránka obsahuje PHP skript, který zpracovává data formuláře:
Data formuláře jsou odesílána metodou POST (zpracována jako $_POST). $_POST je pole proměnných předávaných aktuálnímu skriptu pomocí metody POST.
Níže vidíte obsah souboru forma.php, jehož pole vyplňuje uživatel sám na nějakém webu. Všechna pole pro zadávání dat musí mít atribut name, hodnoty zapisujeme sami na základě logiky.
Formulář zpětné vazby v PHP zaslaný e-mailem
Formulář zpětné vazby v PHP
Zanechat zprávu:
Vaše jméno:
E-mail:
telefonní číslo:
Zpráva:
Textová oblast může obsahovat neomezený počet znaků-->
Takto vypadá formulář vizuálně v prohlížeči.
Dále napíšeme kód pro soubor mail.php. Vymýšlíme si vlastní názvy proměnných. V PHP proměnná začíná znakem $ a poté názvem proměnné. Textová hodnota proměnné je uzavřena v uvozovkách. Pomocí proměnných se obsah formuláře odešle na email administrátora jednoduchým umístěním názvu prvku formuláře do hranatých závorek – hodnoty názvu.
Data z pole $_POST budou tedy přenesena do odpovídajících proměnných a odeslána na poštu pomocí funkce mail. Vyplňte náš formulář a klikněte na tlačítko Odeslat. Nezapomeňte uvést svůj email. Dopis přišel okamžitě.
Téměř každý web má formulář pro zpětnou vazbu. A samozřejmě existuje spousta různých implementací. V tomto článku napíšeme formulář zpětné vazby, který bude používat ověření HTML5 a vyskakovací oznámení se zvukem. A samozřejmě samotný požadavek bude odeslán pomocí ajaxu. Kromě toho příklad poskytne dvě možnosti zpracování požadavku: přes ajax a běžný požadavek POST. V případě požadavku POST budou použity flash zprávy založené na relaci. Více detailů pod střihem...
Náš projekt tedy bude mít následující strukturu:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | . ├── css │ ├── jquery.jgrowl.css │ ├── main.css │ └── normalizovat.css ├── ├── ├── chráněné obrázky └ p — │ ├── bootstrap. php │ ├── bliká.php │ ├── func.php │ └── session.php ├── zvuky │ ├── upozornění.mp3 └ ─ index .php |
Soubor index.php bude obsahovat formulář zpětné vazby. Poté, co uživatel vyplní formulář a klikne na tlačítko Odeslat, bude skriptu feedback.php odeslán požadavek ajax. Což zase po zpracování požadavku vrátí výsledek. Je zde nuance. Skript zkontroluje, který požadavek přišel a v závislosti na tom buď vrátí výsledek ve tvaru json, nebo zapíše flash zprávu do session a poté ji přesměruje zpět na index.php. To znamená, že v případě jakýchkoli chyb v javascriptu bude požadavek stále zpracován jednoduchým POST požadavkem. A v tomto případě má programátor flexibilní nástroj, který mu umožňuje vždy opustit ajax.
Flash zprávy jsou typem dat relace, která se vymažou poté, co jsou poprvé vyžádány. Je to velmi pohodlný nástroj pro předávání zpráv mezi požadavky.
Aby se nekomplikovalo rozvržení a také aby se sjednotily notifikace pro uživatele, jsou v příkladu použity pop-up growl zprávy podobné těm, které se používají v OSX. K tomu používáme dobrý jQuery plugin jGrowl, který má flexibilní systém přizpůsobení a stylingu.
Začněme tedy HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | Formulář zpětné vazby Jméno: E-mail: Zpráva: Odeslat //nějaký kód |
Jak můžete vidět z kódu výše. V příkladu se nepoužívá. Pro takové věci to prostě není nutné. Přesto budou data ověřena na serveru.
JavaScript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $(document) .ready (funkce () ( buzz.defaults .formats = [ "ogg" , "mp3" ] ; buzz.defaults .preload = true ; if (buzz.isSupported () ) ( var noticeSound = new buzz. zvuk ("zvuky/oznam" ) ; ) $.jGrowl .defaults .position = "vpravo nahoře" ; $.jGrowl .defaults .closer = false ; $.jGrowl .defaults .beforeOpen = funkce (e, m, o) ( if (noticeSound) noticeSound.play () ; ); $("form#feedback-form" ) .on ("submit" , funkce (e) ( e.preventDefault () ; $(this ) .ajaxSubmit (( dataType : "json" , success: function (response) ( $.jGrowl (response.message, ( theme: response.type ) ) ; if (response.type == "success" ) $("form#feedback-form" ) [ 0 ] .reset () ; , chyba: function () ( $("form#feedback-form" ) .unbind ("submit" ) .submit () ; ) ) ) ); |
Výše uvedený kód je velmi jasný. Nastavení upozornění a přehrávání zvuku. A také implementace operace formuláře bez opětovného načítání stránky pomocí knihovny ajaxForm.
Nyní přejdeme k implementaci zpracování požadavků:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | //feedback.php vyžadují __DIR__ . |
"/protected/bootstrap.php" ;
