Ověření formuláře CodeIgniter s příkladem odeslání formuláře
Fiona Brownová
Formulář v CodeIgniter
Formuláře poskytují uživatelům způsob interakce s aplikací a odesílání dat. Může být použit pro kontaktní formulář, který může návštěvník webu vyplnit a odeslat nám informace. Přijaté informace jsou obvykle uloženy v databázi nebo odeslány e-mailem.
Struktura formuláře HTML
Následující kód ukazuje strukturu typického formuláře HTML.
<form id="frmUsers" name="frmUsers" method="POST" action="create_user.php"> <input type="text" id="user_id" name="user_id"> <input type="password" id="password" name="password"> <input type="submit" value="Submit"> </form>
TADY,
- … jsou otevírací a uzavírací značky formuláře. Atributy id a name určují název a id formuláře. Atribut method určuje sloveso HTTP, které se má použít. To je obvykle specifikováno slovesem POST
- Určuje prvky formuláře. Atribut name je název proměnné, který je odeslán serveru back-end ke zpracování.
Pomocník formuláře CodeIgniter
HTML je skvělé, je snadno pochopitelné a psát, ale CodeIgniter dělá věci ještě jednodušší. CodeIgniter má vestavěné funkce pro vytváření formulářů HTML.
Podívejme se na následující kód odeslání formuláře CodeIgniter, který k vytvoření formuláře používá pomocníka formuláře
<?php
echo form_open('create_user.php', ['id' => 'frmUsers']);
echo form_label('User Id', 'user_id');
echo form_input(['name' => 'user_id']);
echo form_label('Password', 'password');
echo form_input(['type' => 'password', 'name' => 'password']);
echo form_submit('btnSubmit', 'Create User');
echo form_close();
?>
TADY,
- echo form_open('create_user.php', ['id' => 'frmUsers']); vytvoří úvodní značku formuláře, nastaví akci na POST Verb a nastaví adresu URL akce na create_user.php
- echo form_label('ID uživatele', 'id_uživatele'); vytvoří popisek, který přečte ID uživatele pro vstupní pole s názvem user_id.
- echo form_input(['name' => 'user_id']); vytvoří vstupní pole textového typu s názvem user_id
- echo form_submit('btnSubmit', 'Vytvořit uživatele'); vytvoří tlačítko Odeslat s popiskem Vytvořit uživatele
- echo form_close(); zavře formulář
Jak můžete vidět z výše uvedeného kódu CodeIgniter, pomocníci s formuláři nám usnadňují vytváření formulářů pomocí čistého PHP. Předáním atributů pomocným metodám formuláře můžeme přizpůsobit HTML, které je pro formulář vygenerováno.
Výše uvedený kód generuje následující kód HTML formuláře
<form action="http://localhost:3000/index.php/create_user.php" id="frmUsers" method="post" accept-charset="utf-8">
<label for="user_id">User Id</label>
<input type="text" name="user_id" value=""/>
<label for="password">Password</label>
<input type="password" name="password" value=""/>
<input type="submit" name="btnSubmit" value="Create User"/>
</form>
Největší výhodou použití formulářového pomocníka je, že generuje sémanticky správný kód, který dodržuje nastavené HTML standardy.
Další podrobnosti najdete v oficiální dokumentaci CodeIgniter
https://codeigniter.com/user_guide/helpers/form_helper.html
Příklad formuláře CodeIgniter
Po probrání základů CodeIgniter se vraťme k našemu výukovému projektu, na kterém jsme po celou dobu pracovali Série výukových programů CodeIgniter. Stručně řečeno, projekt výukového programu vytváří aplikaci pro správu kontaktů, která bude ukládat podrobnosti do databáze.
Vytvořit kontakt
v předchozím tutoriálu jsme vytvořili trasy pro naše aplikace a jednoduché pohledy. Otevřete aplikaci/views/contacts/create.php
Upravte kód pro create.php následovně
<div class="column">
<h2 class="title">Create Contact</h2>
<form action="<?= base_url('contacts/store') ?>" method="POST">
<div class="field">
<label class="label">Contact Name</label>
<div class="control">
<input id="name" name="name" class="input" type="text" placeholder="Type the contact name">
</div>
</div>
<div class="field">
<label class="label">Contact Number</label>
<div class="control">
<input id="name" name="name" class="input" type="text" placeholder="Type the contact number">
</div>
</div>
<div class="field">
<label class="label">Email Address</label>
<div class="control">
<input id="email" name="email" class="input" type="email" placeholder="Type the email address">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Save Contact</button>
</div>
</div>
</form>
</div>
Poznámka: výše uvedený kód používá k vytváření formulářů prostý HTML.
Pojďme se nyní podívat, jak naše formuláře vypadají ve webovém prohlížeči
Načtěte následující URL do našeho webového prohlížeče.
http://localhost:3000/contacts/create
Pokud jste vytvářeli výukový projekt, měli byste vidět následující
Ověření formuláře v CodeIgniter
Validace hraje velmi zásadní roli při zpracování dat z formulářů. Řekněme, že se uživatel zaregistruje na webu; chceme se ujistit, že vyplní požadované údaje a e-mailovou adresu. Musíme se ujistit, že zadaná e-mailová adresa je platná. Pokud pracujeme s hodnotami data, chceme se ujistit, že rozsahy dat jsou platné. Nemuseli bychom akceptovat datum, které má 32 dní v měsíci atd.
Validace řeší výše uvedené problémy. CodeIgniter Validation se při práci s webovými aplikacemi provádí na dvou (2) frontách.
Ověření na straně klienta se provádí na straně webového prohlížeče. To obvykle zahrnuje použití HTML a JavaSkript. Ověření na straně klienta zlepšuje výkon, protože vše se provádí na straně klienta. Není tedy potřeba odesílat data na server. Nevýhodou ověřování na straně klienta je, že nad ním má uživatel kontrolu. Pokud spoléháte na JavaSkript pro ověření a uživatel zakáže JavaSkriptujte v prohlížeči, pak se vaše ověření nezdaří.
Ověření na straně serveru se provádí na straně serveru. Nevýhodou tohoto ověření je, že uživatel musí odeslat data na server ke zpracování a čekat na odpověď. To spotřebovává síťové zdroje a může snížit výkon. Hlavní výhodou ověřování na straně serveru je, že máte větší kontrolu a máte jistotu, že vaše ověřovací pravidla fungují, i když uživatel zakáže JavaSkript v prohlížeči.
Lepší strategií je použít stranu klienta jako primární strategii ověřování a stranu serveru jako záložní mechanismus.
Přidání pravidel ověření formuláře
CodeIgniter má vestavěnou ověřovací knihovnu. Knihovna se načte pomocí následujícího řádku
$this->load->library('form_validation');
Knihovnu ověření formuláře CodeIgniter lze použít k provedení některých z následujících akcí
- Zkontrolujte povinná pole. To zkontroluje odeslané hodnoty a vrátí chybu, pokud pole, které bylo označeno jako požadované, nemá hodnotu
- Ověření typu dat – některá pole mohou vyžadovat pouze číselné hodnoty. Pokud je detekována nečíselná hodnota, knihovna vrátí chybu. Provedení odeslání formuláře je také přerušeno.
- Ověření délky – některé datové typy vyžadují, aby pole měla určitý minimální nebo maximální počet znaků. V takových případech se hodí validační knihovna.
- Sanitace dat – validační knihovna má také funkce, které z bezpečnostních důvodů odstraní škodlivý kód z odeslaných dat. Pokud jsou například zadané hodnoty aktivní JavaSkript nebo kód SQL Injection v nich ověřovací knihovna odstraní škodlivý kód a učiní jej nepoužitelným.
- Ověřte jedinečná databázová pole – předpokládejme, že máte formulář, kde se uživatelé přihlašují pomocí e-mailové adresy. Měli byste se ujistit, že e-mailová adresa je jedinečná. Knihovna vám usnadňuje kontrolu odeslaných dat s databázovou tabulkou a polem. To vám umožní vědět, že hodnota již byla obsazena.
Pravidla ověřování se nastavují pomocí následujícího formátu
$this->form_validation->set_rules('field','human readable field','rule',['custom message']);
TADY,
- 'field' specifikovalo název pole formuláře, které má být knihovnou ověřeno
- 'lidsky čitelné pole' určuje lidsky čitelný formát ověřovaného pole. To se uživateli zobrazí zpět, když dojde k chybě.
- „pravidlo“ určuje ověřovací pravidlo, které se má použít, jako je povinné, číselné, kontrola, zda je minimální délka… atd.
- ['vlastní zpráva'] je volitelná a lze ji použít k nastavení vlastní ověřovací zprávy, která by se měla zobrazit, když ověřovací pravidlo selže.
Následuje odeslání formuláře v příkladu CodeIgniter pro ověření jména kontaktu
$this->form_validation->set_rules('contact_number', 'Contact Number', 'required');
TADY,
- Výše uvedený kód zkontroluje, zda bylo zadáno pole contact_number. Pokud není nastaveno, vrátí chybu, že pole Kontaktní číslo je povinné.
Pro spuštění validace proti nastaveným pravidlům používáme následující funkci validační knihovny
$this->form_validation->run()
Pokud výše uvedený kód vrátí hodnotu false, pak jedno nebo více nastavených pravidel selhalo. Pokud vrátí hodnotu true, všechna ověřovací pravidla prošla a můžete pokračovat v další akci.
Podívejme se na další příklady ověřovacích pravidel. Předpokládejme, že chcete ověřit, že některá pole obsahují jméno kontaktu, číslo a e-mailovou adresu, můžete k tomu použít následující kód.
$rules = array(
array(
'field' => 'contact_name',
'label' => 'Contact Name',
'rules' => 'required'
),
array(
'field' => 'contact_number',
'label' => 'Contact Number',
'rules' => 'required',
'errors' => array(
'required' => 'You must provide a %s.',
),
),
array(
'field' => 'email_address',
'label' => 'Email Address',
'rules' => 'required'
)
);
$this->form_validation->set_rules($rules);
TADY,
- Ve výše uvedeném ověření e-mailu v příkladu CodeIgniter poskytujeme řadu polí s pravidly pro funkci set_rules knihovny. To usnadňuje ověřování některých polí.
Jedinečné ověření
Pokud chceme ověřit kontaktní číslo, abychom měli jistotu, že neuložíme stejné číslo dvakrát, můžeme k tomu použít následující pravidlo.
$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');
TADY,
- | se používá ke spojení více pravidel
- is_unique[contacts.contact_number] zkontroluje, zda je hodnota pro contact_number jedinečná vzhledem k hodnotám pole contact_number v databázové tabulce Contacts.
Zobrazování chybových zpráv ověření formuláře
Pokud během zpracování formuláře dojde k chybě, můžete pomocí následujícího kódu zobrazit chyby ověření, ke kterým došlo
<?php echo validation_errors(); ?>
TADY,
- Výše uvedená funkce vrací všechny chyby, ke kterým došlo.
Vyplňování dat odeslaných formulářů: Sticky Forms
Některé formuláře mají mnoho polí a pokud došlo k chybě, pak se chcete ujistit, že data, která byla přidána správně, zůstala zachována. Ověřovací knihovna má mechanismy, jak toho dosáhnout. Děláme to pomocí následujícího kódu.
<?php echo set_value('field_name'); ?>
TADY,
- Výše uvedený kód zobrazuje vstup, který uživatel zadal.
Úplnou referenční příručku o metodách, které jsou k dispozici v knihovně ověřování, naleznete v dokumentaci API z oficiální uživatelské příručky pro CodeIgniter.
https://codeigniter.com/userguide3/libraries/form_validation.html
Příklad ověření formuláře CodeIgniter
Během této série výukových programů jsme do našeho výukového projektu, kterým je aplikace pro správu kontaktů, přidávali další kód. V této části načteme ověřovací knihovnu a uvidíme, jak ji můžeme prakticky využít pomocí příkladu aplikace z reálného světa.
Upravte kód tras následovně, aby zahrnoval metodu úložiště
$route['default_controller'] = 'welcome'; $route['contacts'] = 'contacts'; $route['create'] = 'contacts/create'; $route['store'] = 'contacts/store'; $route['edit/:id'] = 'contacts/edit'; $route['update/:id'] = 'contacts/update'; $route['delete/:id'] = 'contacts/delete'; $routes['users'] = 'welcome/users';
Pojďme nyní načíst knihovnu ověřování formulářů v ovladači Contacts a nastavit některá pravidla ověřování.
Upravte kód, jak je znázorněno v níže uvedeném ověření formuláře v příkladu CodeIgniter:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Contacts extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url', 'form');
$this->load->library('form_validation');
}
public function index() {
$this->load->view('header');
$this->load->view('contacts/index');
$this->load->view('footer');
}
public function create() {
$this->load->view('header');
$this->load->view('contacts/create');
$this->load->view('footer');
}
public function store() {
$rules = array(
array(
'field' => 'contact_name',
'label' => 'Contact Name',
'rules' => 'required'
),
array(
'field' => 'contact_number',
'label' => 'Contact Number',
'rules' => 'required',
'errors' => array(
'required' => 'You must provide a %s.',
),
),
array(
'field' => 'email_address',
'label' => 'Email Address',
'rules' => 'required'
)
);
$this->form_validation->set_rules($rules);
if ($this->form_validation->run() == FALSE) {
$this->load->view('header');
$this->load->view('contacts/create');
$this->load->view('footer');
} else {
redirect(base_url('contacts'));
}
}
public function edit($id) {
$this->load->view('header');
$this->load->view('contacts/edit');
$this->load->view('footer');
}
public function update($id) {
$this->load->view('header');
$this->load->view('contacts/update');
$this->load->view('footer');
}
public function delete($id) {
$this->load->view('header');
$this->load->view('contacts/delete');
$this->load->view('footer');
}
}
TADY,
- $rules = array(…) sets definuje ověřovací pravidla
- $this->form_validation->set_rules($rules); stanoví pravidla ověřování
- if ($this->form_validation->run() == FALSE) {…} spustí ověřovací pravidla a pokud selžou, formulář se znovu zobrazí s chybami ověření. Pokud ověření projde, jednoduše se přesměrujeme na stránku seznamu kontaktů. Za normálních okolností bychom data zapisovali do databáze. Uděláme to v dalších tutoriálech, když se na to podíváme databáze.
Upravte zobrazení pro vytvoření v kódu aplikace/kontakty/create.php, jak je uvedeno v níže uvedeném příkladu ověření formuláře CodeIgniter:
<div class="column">
<h2 class="title">Create Contact</h2>
<div class="notification is-danger">
<?php echo validation_errors(); ?>
</div>
<form action="<?= base_url('contacts/store') ?>" method="POST">
<div class="field">
<label class="label">Contact Name</label>
<div class="control">
<input id="contact_name" name="contact_name" class="input" type="text" value="<?php echo set_value('contact_name'); ?>" placeholder="Type the contact name">
</div>
</div>
<div class="field">
<label class="label">Contact Number</label>
<div class="control">
<input id="contact_number" name="contact_number" class="input" type="text" value="<?php echo set_value('contact_number'); ?>" placeholder="Type the contact number">
</div>
</div>
<div class="field">
<label class="label">Email Address</label>
<div class="control">
<input id="email_address" name="email_address" class="input" type="email" value="<?php echo set_value('email_address'); ?>" placeholder="Type the email address">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Save Contact</button>
</div>
</div>
</form>
</div>
TADY,
- zobrazujeme chyby, které se vyskytnou během procesu ověřování
- nastaví hodnotu, která byla dříve nastavena, pokud existuje
Do webového prohlížeče musíte načíst následující URL. Poté klikněte na Vytvořit kontakt bez zadávání jakýchkoli hodnot
Shrnutí
- Formuláře poskytují uživatelům způsob interakce s aplikací a odesílání dat.
- HTML je skvělé, snadno se mu rozumí a píše, ale CodeIgniter dělá věci ještě jednodušší. CodeIgniter má vestavěné funkce pro vytváření formulářů HTML.
- Validace hraje velmi zásadní roli při zpracování dat z formulářů.
- V tomto tutoriálu jsme viděli hlavní strategie ověřování a jejich výhody a nevýhody. Také jsme se naučili, jak nastavit ověřovací pravidla a odstranit chybové zprávy pomocí vestavěné ověřovací knihovny CodeIgniter. Lekci jsme zakončili implementací získaných znalostí do praktické aplikace.
