Walidacja formularza CodeIgniter z przykładem przesłania formularza

Formularz w CodeIgniterze

Formularze umożliwiają użytkownikom interakcję z aplikacją i przesyłanie danych. Mogą być używane jako formularz kontaktowy, który odwiedzający witrynę może wypełnić i przesłać nam informacje. Otrzymane informacje są zazwyczaj przechowywane w bazie danych lub wysyłane pocztą elektroniczną.

Struktura formularza HTML

Poniższy kod pokazuje strukturę typowego formularza 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>

TUTAJ,

  • … są tagami otwierającymi i zamykającymi formularz. Atrybuty id i name określają nazwę i identyfikator formularza. Atrybut metody określa czasownik HTTP, który ma zostać użyty. Jest to zwykle określane przez czasownik POST
  • Określa elementy formularza. Atrybut name to nazwa zmiennej przesyłana do serwera zaplecza w celu przetworzenia.

Pomocnik formularza CodeIgniter

HTML jest świetny, łatwy do zrozumienia i napisania, ale CodeIgniter sprawia, że ​​wszystko staje się jeszcze prostsze. CodeIgniter posiada wbudowane funkcje umożliwiające tworzenie formularzy HTML.

Rozważmy następujący kod przesyłania formularza CodeIgniter, który używa pomocnika formularza do utworzenia formularza

 <?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();
        ?>

TUTAJ,

  • echo form_open('create_user.php', ['id' => 'frmUsers']); tworzy znacznik otwierający formularz, ustawia akcję na POST Verb i ustawia adres URL akcji na create_user.php
  • echo form_label('Identyfikator użytkownika', 'id_użytkownika'); tworzy etykietę, która odczytuje Identyfikator użytkownika dla pola wejściowego o nazwie user_id.
  • echo form_input(['nazwa' => 'id_użytkownika']); tworzy pole wejściowe typu tekstowego o nazwie user_id
  • echo form_submit('btnSubmit', 'Utwórz użytkownika'); tworzy przycisk przesyłania z etykietą Utwórz użytkownika
  • echo form_close(); zamyka formularz

Jak widać z powyższego kodu CodeIgnitera, pomocnicy formularzy ułatwiają nam tworzenie formularzy przy użyciu czystego PHP. Przekazując atrybuty do metod pomocniczych formularza, możemy dostosować kod HTML generowany dla formularza.

Powyższy kod generuje następujący kod formularza HTML

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

Największą zaletą korzystania z pomocnika formularza jest to, że generuje on poprawny semantycznie kod, zgodny z ustalonymi standardami HTML.

Więcej szczegółów znajdziesz w oficjalnej dokumentacji CodeIgniter

https://codeigniter.com/user_guide/helpers/form_helper.html

Przykład formularza CodeIgniter

Po omówieniu podstaw CodeIgnitera, wróćmy do naszego projektu tutoriala, nad którym pracowaliśmy przez cały ten czas Seria samouczków CodeIgniterPodsumowując, projekt samouczka buduje aplikację do zarządzania kontaktami, która będzie przechowywać szczegóły w bazie danych.

Stworzyć kontakt

w poprzednim samouczku stworzyliśmy trasy dla naszych aplikacji i proste widoki. Otwórz aplikację/views/contacts/create.php

Zmodyfikuj kod create.php w następujący sposób

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

Uwaga: powyższy kod używa zwykłego HTML do tworzenia formularzy.

Zobaczmy teraz jak wyglądają nasze formularze w przeglądarce internetowej

Wczytaj poniższy adres URL do naszej przeglądarki internetowej.

http://localhost:3000/contacts/create

Jeśli tworzyłeś projekt samouczka, powinieneś móc zobaczyć następujące rzeczy

Formularz CodeIgnitera

Walidacja formularza w CodeIgniter

Walidacja odgrywa bardzo ważną rolę podczas przetwarzania danych z formularzy. Powiedzmy, że użytkownik rejestruje się na stronie internetowej; chcemy się upewnić, że wypełnia wymagane dane i adres e-mail. Musimy się upewnić, że wprowadzony adres e-mail jest prawidłowy. Jeśli pracujemy z wartościami dat, chcemy się upewnić, że zakresy dat są prawidłowe. Nie musielibyśmy akceptować daty, która ma 32 dni w miesiącu itd.

Walidacja rozwiązuje powyższe problemy. Podczas pracy z aplikacjami internetowymi weryfikacja CodeIgniter odbywa się na dwóch (2) frontach.

Weryfikacja po stronie klienta odbywa się po stronie przeglądarki internetowej. Zwykle wiąże się to z użyciem HTML i JavaSkrypt. Walidacja po stronie klienta poprawia wydajność, ponieważ wszystko odbywa się po stronie klienta. Nie ma więc potrzeby przesyłania danych do serwera. Wadą walidacji po stronie klienta jest to, że użytkownik ma nad nią kontrolę. Jeśli polegasz na JavaSkrypt do walidacji i wyłączania przez użytkownika JavaSkrypt w przeglądarce, wówczas walidacja się nie powiedzie.

Weryfikacja po stronie serwera odbywa się po stronie serwera. Wadą tej weryfikacji jest to, że użytkownik musi przesłać dane do serwera w celu przetworzenia i poczekać na odpowiedź. Zużywa to zasoby sieciowe i może obniżyć wydajność. Główną zaletą sprawdzania poprawności po stronie serwera jest większa kontrola i pewność, że reguły sprawdzania poprawności będą działać nawet jeśli użytkownik wyłączy JavaSkrypt w przeglądarce.

Lepszą strategią jest użycie strony klienta jako podstawowej strategii sprawdzania poprawności, a strony serwera jako mechanizmu awaryjnego.

Dodawanie reguł sprawdzania poprawności formularza

CodeIgniter ma wbudowaną bibliotekę walidacyjną. Biblioteka jest ładowana za pomocą następującego wiersza

$this->load->library('form_validation');

Bibliotekę walidacji formularzy CodeIgniter można wykorzystać do wykonania niektórych z następujących czynności

  • Sprawdź wymagane pola. Sprawdza przesłane wartości i zwraca błąd, jeśli pole oznaczone jako wymagane nie ma wartości
  • Walidacja typu danych – niektóre pola mogą wymagać jedynie wartości liczbowych. Jeśli zostanie wykryta wartość inna niż numeryczna, biblioteka zwróci błąd. Wykonywanie wysyłania formularza również zostaje przerwane.
  • Walidacja długości – niektóre typy danych wymagają, aby pola miały określoną minimalną lub maksymalną liczbę znaków. W takich przypadkach przydatna jest biblioteka walidacyjna.
  • Oczyszczanie danych – biblioteka walidacyjna posiada również funkcje, które ze względów bezpieczeństwa usuwają złośliwy kod z przesłanych danych. Jeśli na przykład przesłane wartości są aktywne JavaW przypadku skryptów lub kodu SQL Injection biblioteka walidacyjna usuwa szkodliwy kod i czyni go bezużytecznym.
  • Sprawdź unikalne pola bazy danych – załóżmy, że masz formularz, w którym użytkownicy rejestrują się za pomocą adresu e-mail. Chcesz się upewnić, że adres e-mail jest unikalny. Biblioteka ułatwia sprawdzenie przesłanych danych w tabeli i polu bazy danych. Dzięki temu wiesz, że wartość została już zajęta.

Reguły walidacji są ustawiane przy użyciu następującego formatu

$this->form_validation->set_rules('field','human readable field','rule',['custom message']);

TUTAJ,

  • „field” określa nazwę pola formularza, które ma być sprawdzane przez bibliotekę
  • 'human readable field' określa czytelny dla człowieka format pola poddawanego walidacji. Jest on wyświetlany użytkownikowi, gdy wystąpi błąd.
  • „rule” określa regułę sprawdzania poprawności, która ma zostać zastosowana, np. wymagana, liczbowa, sprawdź, czy minimalna długość wynosi… itd.
  • ['custom message'] jest opcjonalne i można go użyć do ustawienia niestandardowego komunikatu weryfikacyjnego, który powinien zostać wyświetlony w przypadku niepowodzenia reguły weryfikacyjnej.

Poniżej znajduje się przykład formularza przesłanego do CodeIgniter w celu sprawdzenia poprawności nazwy kontaktu

$this->form_validation->set_rules('contact_number', 'Contact Number', 'required');

TUTAJ,

  • Powyższy kod sprawdza czy zostało wpisane pole contact_number. Jeśli nie jest ustawiony, zwraca błąd informujący, że pole Numer kontaktowy jest wymagane.

Aby przeprowadzić walidację zgodnie z ustalonymi zasadami, używamy następującej funkcji biblioteki walidacyjnej

$this->form_validation->run()

Jeśli powyższy kod zwróci wartość false, oznacza to, że jedna lub więcej ustawionych reguł nie powiodło się. Jeśli zwróci wartość true, oznacza to, że wszystkie reguły sprawdzania poprawności zostały spełnione i możesz kontynuować dalsze działania.

Przyjrzyjmy się kolejnym przykładom reguł walidacji. Załóżmy, że chcesz walidować niektóre pola, np. imię i nazwisko kontaktu, numer telefonu i adres e-mail. Możesz użyć następującego kodu, aby to osiągnąć.

$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);

TUTAJ,

  • W powyższym przykładzie walidacji e-maila w CodeIgniter dostarczamy tablicę pól z regułami dla funkcji set_rules biblioteki. Ułatwia to walidację niektórych pól.

Unikalna weryfikacja

Jeśli chcemy zweryfikować numer kontaktowy i mieć pewność, że nie zapiszemy tego samego numeru dwa razy, możemy skorzystać z następującej reguły.

$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');

TUTAJ,

  • | służy do łączenia wielu reguł w jedną całość
  • is_unique[contacts.contact_number] sprawdza, czy wartość contact_number jest unikalna w stosunku do wartości pola contact_number w tabeli bazy danych kontaktów.

Wyświetlanie komunikatów o błędach sprawdzania poprawności formularza

Jeżeli podczas przetwarzania formularza wystąpi błąd, możesz użyć poniższego kodu, aby wyświetlić błędy walidacji, które wystąpiły

<?php echo validation_errors(); ?>

TUTAJ,

  • Powyższa funkcja zwraca wszystkie błędy, które wystąpiły.

Wypełnianie danych przesłanych formularzy: Formularze przyklejone

Niektóre formularze mają wiele pól i jeśli wystąpił błąd, należy upewnić się, że dane, które zostały poprawnie dodane, są zachowane. Biblioteka walidacji ma mechanizmy umożliwiające osiągnięcie tego celu. Robimy to, używając następującego kodu.

<?php echo set_value('field_name'); ?>

TUTAJ,

  • Powyższy kod wyświetla dane wejściowe wprowadzone przez użytkownika.

Aby uzyskać pełny przewodnik referencyjny na temat metod dostępnych w bibliotece walidacyjnej, możesz zapoznać się z dokumentacją API z oficjalnego podręcznika użytkownika dla CodeIgniter

https://codeigniter.com/userguide3/libraries/form_validation.html

Przykład sprawdzania poprawności formularza CodeIgniter

W całej tej serii samouczków dodaliśmy więcej kodu do naszego projektu samouczka, który jest aplikacją do zarządzania kontaktami. W tej sekcji załadujemy bibliotekę walidacyjną i zobaczymy, jak możemy ją zastosować w praktyce, korzystając z przykładowej aplikacji ze świata rzeczywistego.

Zmodyfikuj kod tras w następujący sposób, aby uwzględnić metodę store

$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';

Załadujmy teraz bibliotekę sprawdzania poprawności formularzy do kontrolera Kontakty i ustawmy pewne reguły sprawdzania poprawności.

Zmodyfikuj kod, jak pokazano w poniższym formularzu sprawdzania poprawności w przykładzie 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');
    }
}

TUTAJ,

  • $rules = array(…) sets definiuje reguły walidacji
  • $this->form_validation->set_rules($rules); ustala zasady walidacji
  • if ($this->form_validation->run() == FALSE) {…} uruchamia reguły walidacji i jeśli się nie powiodą, formularz jest wyświetlany ponownie z błędami walidacji. Jeśli walidacja się powiedzie, po prostu przekierowujemy do strony listy kontaktów. W normalnych okolicznościach zapisalibyśmy dane do bazy danych. Zrobimy to w kolejnych samouczkach, kiedy przyjrzymy się Bazy danych.

Zmodyfikuj widok tworzenia w kodzie application/contacts/create.php, jak pokazano w poniższym przykładzie sprawdzania poprawności formularza 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>

TUTAJ,

  • wyświetlamy ewentualne błędy, które wystąpiły podczas procesu walidacji
  • ustawia wartość, która została wcześniej ustawiona, jeśli taka istnieje

Musisz załadować następujący adres URL do swojej przeglądarki internetowej. Następnie kliknij na Utwórz kontakt bez wprowadzania żadnych wartości

Walidacja formularza CodeIgniter

Podsumowanie

  • Formularze umożliwiają użytkownikom interakcję z aplikacją i przesyłanie danych.
  • HTML jest świetny, łatwy do zrozumienia i napisania, ale CodeIgniter sprawia, że ​​wszystko jest jeszcze prostsze. CodeIgniter posiada wbudowane funkcje umożliwiające tworzenie formularzy HTML.
  • Walidacja odgrywa bardzo kluczową rolę podczas przetwarzania danych z formularzy.
  • W tym samouczku poznaliśmy główne strategie walidacji oraz ich zalety i wady. Dowiedzieliśmy się także, jak ustawić reguły sprawdzania poprawności i wysyłać komunikaty o błędach, korzystając z wbudowanej biblioteki sprawdzania poprawności CodeIgnitera. Lekcję zakończyliśmy zastosowaniem zdobytej wiedzy w praktycznym zastosowaniu.