CodeValidasi Formulir dan Pengiriman Formulir di Igniter 4 dengan Contoh
Fiona Coklat
⚡ Ringkasan Cerdas
CodeValidasi Formulir Igniter 4 memeriksa input pengguna sebelum diproses. Formulir dibuat dengan helper formulir, dan pustaka validasi bawaan menetapkan aturan seperti wajib diisi, numerik, dan unik, kemudian menampilkan kesalahan dan mengisi ulang field yang tetap (sticky fields) ketika validasi gagal.
Formulir di CodePemantik 4
Formulir menyediakan cara bagi pengguna untuk berinteraksi dengan aplikasi dan mengirimkan data. Formulir dapat digunakan untuk formulir kontak yang dapat diisi oleh pengunjung situs web dan mengirimkan informasi kepada kami. Informasi yang diterima biasanya disimpan dalam basis data atau dikirim melalui email.
Struktur Formulir HTML
Kode berikut menunjukkan struktur formulir HTML yang umum.
<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>
Sini:
- … `<body>` adalah tag pembuka dan penutup formulir. Atribut `id` dan `name` menentukan nama dan id formulir. Atribut `method` menentukan kata kerja HTTP yang akan digunakan, biasanya POST.
- Menentukan elemen-elemen formulir. Atribut nama adalah nama variabel yang dikirimkan ke server backend untuk diproses.
CodePembantu Formulir Penyala
HTML mudah dipahami dan ditulis, tetapi CodeAlat penyala membuat segalanya menjadi lebih sederhana. CodeIgniter memiliki fungsi bawaan untuk membuat formulir HTML. Mari kita pertimbangkan hal berikut. CodeKode formulir Igniter yang menggunakan helper formulir untuk membuat formulir:
<?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(); ?>
Sini:
- echo form_open('create_user.php', ['id' => 'frmUsers']); membuat tag pembuka formulir, mengatur metode menjadi POST, dan mengatur action. URL ke create_user.php.
- Perintah `echo form_label('User Id', 'user_id');` membuat label yang bertuliskan 'User Id' untuk kolom input bernama `user_id`.
- echo form_input(['name' => 'user_id']); membuat kolom input teks bernama user_id.
- echo form_submit('btnSubmit', 'Create User'); membuat tombol kirim dengan label Buat Pengguna.
- echo form_close(); menutup formulir.
Seperti yang Anda lihat, form helper memudahkan pembuatan formulir menggunakan PHP murni. Dengan memberikan atribut ke metode form helper, kita dapat menyesuaikan HTML yang dihasilkan untuk formulir tersebut. Kode di atas menghasilkan kode formulir HTML berikut:
<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>
Keuntungan terbesar menggunakan form helper adalah menghasilkan kode yang benar secara semantik dan sesuai dengan standar HTML. Anda dapat merujuk ke sumber resminya. CodeUntuk detail lebih lanjut, lihat dokumentasi Igniter: https://codeigniter.com/user_guide/helpers/form_helper.html.
CodeContoh Bentuk Pemantik
Setelah membahas dasar-dasarnya CodeIgniter, mari kita kembali ke proyek tutorial kita, yang telah kita kerjakan selama ini. CodeSeri tutorial IgniterSingkatnya, proyek tutorial ini membangun aplikasi manajemen kontak yang menyimpan detailnya di dalam basis data.
Buat Kontak
Pada tutorial sebelumnya, kita telah membuat rute untuk aplikasi dan tampilan sederhana kita. Buka application/views/contacts/create.php dan ubah kode untuk create.php sebagai berikut:
<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>
Catatan: Kode di atas menggunakan HTML biasa untuk membuat formulir. Sekarang mari kita lihat bagaimana tampilan formulir kita di browser web. Muat yang berikut ini URL ke dalam peramban web Anda: http://localhost:3000/contacts/createJika Anda telah membangun proyek tutorial, Anda akan melihat hal berikut:
Validasi Formulir di CodeAlat penyala
Validasi memainkan peran yang sangat penting saat memproses data dari formulir. Misalnya, jika pengguna mendaftar di sebuah situs web, kita ingin memastikan mereka mengisi detail yang diperlukan dan alamat email yang valid. Jika kita berurusan dengan nilai tanggal, kita ingin memastikan rentang tanggal tersebut valid, jadi kita tidak akan menerima tanggal dengan 32 hari dalam sebulan.
Validasi menyelesaikan masalah-masalah ini. CodeValidasi Igniter dilakukan pada dua sisi saat bekerja dengan aplikasi web.
Validasi sisi klien dilakukan di peramban web, biasanya dengan HTML dan JavaSkrip. Ini meningkatkan kinerja karena semuanya dilakukan di sisi klien, sehingga tidak perlu mengirimkan data ke server. Kerugiannya adalah pengguna memiliki kendali atasnya; jika Anda mengandalkan JavaSkrip untuk memvalidasi dan pengguna menonaktifkan JavaSkrip, validasi Anda akan gagal.
Validasi sisi server dilakukan di server. Kekurangannya adalah pengguna harus mengirimkan data ke server dan menunggu respons, yang menggunakan sumber daya jaringan dan dapat menurunkan kinerja. Keuntungan utamanya adalah kontrol yang lebih besar dan jaminan bahwa aturan validasi Anda berfungsi bahkan jika pengguna menonaktifkannya. JavaNaskah.
Strategi yang lebih baik adalah menggunakan validasi sisi klien sebagai strategi utama dan validasi sisi server sebagai mekanisme cadangan.
Menambahkan Aturan Validasi Formulir
CodeIgniter memiliki pustaka validasi bawaan. Pustaka tersebut dimuat menggunakan baris berikut:
$this->load->library('form_validation');
The CodePustaka validasi formulir Igniter dapat melakukan beberapa tindakan berikut:
- Periksa kolom yang wajib diisi. Sistem akan memeriksa nilai yang dikirimkan dan mengembalikan kesalahan jika kolom yang ditandai sebagai wajib diisi tidak memiliki nilai.
- Validasi tipe data – beberapa kolom mungkin hanya memerlukan nilai numerik. Jika nilai non-numerik terdeteksi, pustaka akan mengembalikan kesalahan dan membatalkan pengiriman formulir.
- Validasi panjang – beberapa kolom memerlukan jumlah karakter minimum atau maksimum tertentu. Pustaka validasi menangani kasus-kasus tersebut.
- Sanitasi data – pustaka dapat menghapus kode berbahaya dari data yang dikirimkan untuk keamanan. Jika nilai yang dikirimkan memiliki kode aktif JavaPustaka ini akan menghapus kode berbahaya dari skrip atau kode injeksi SQL sehingga tidak dapat digunakan.
- Validasi kolom basis data yang unik – misalnya, Anda memiliki formulir pendaftaran yang menggunakan alamat email, dan Anda ingin memastikan alamat tersebut unik. Pustaka ini memudahkan untuk memeriksa data yang dikirimkan terhadap tabel dan kolom basis data.
Aturan validasi ditetapkan menggunakan format berikut:
$this->form_validation->set_rules('field','human readable field','rule',['custom message']);
Sini:
- 'field' menentukan nama kolom formulir yang akan divalidasi oleh pustaka.
- 'Human readable field' menentukan format field yang dapat dibaca manusia, yang akan ditampilkan kembali kepada pengguna ketika terjadi kesalahan.
- 'rule' menentukan aturan validasi yang akan diterapkan, seperti wajib diisi, numerik, atau panjang minimum.
- ['pesan khusus'] bersifat opsional dan dapat mengatur pesan validasi khusus yang ditampilkan ketika aturan gagal.
Berikut ini adalah a CodeContoh Igniter untuk memvalidasi nomor kontak:
$this->form_validation->set_rules('contact_number', 'Contact Number', 'required');
Sini:
- Kode di atas memeriksa apakah kolom contact_number telah diisi. Jika belum diisi, kode akan menampilkan pesan kesalahan yang menyatakan bahwa kolom Nomor Kontak wajib diisi.
Untuk menjalankan validasi terhadap aturan yang telah ditetapkan, kita menggunakan fungsi berikut dari pustaka validasi:
$this->form_validation->run()
Jika kode di atas mengembalikan nilai false, berarti satu atau lebih aturan yang ditetapkan gagal. Jika mengembalikan nilai true, berarti semua aturan validasi telah berhasil, dan Anda dapat melanjutkan ke tindakan selanjutnya.
Mari kita lihat contoh aturan validasi lainnya. Misalkan Anda ingin memvalidasi beberapa bidang, seperti nama kontak, nomor telepon, dan alamat email. Anda dapat menggunakan kode berikut:
$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);
Sini:
- Pada contoh di atas, kita menyediakan array field dengan aturan untuk fungsi set_rules dari library. Ini memudahkan saat Anda memvalidasi beberapa field sekaligus.
Validasi Unik
Jika kita ingin memvalidasi nomor kontak untuk memastikan kita tidak menyimpan nomor yang sama dua kali, kita dapat menggunakan aturan berikut:
$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');
Sini:
- | digunakan untuk menggabungkan beberapa aturan.
- is_unique[contacts.contact_number] memeriksa apakah nilai contact_number unik terhadap nilai bidang contact_number di tabel database kontak.
Menampilkan Pesan Kesalahan Validasi Formulir
Jika terjadi kesalahan selama pemrosesan formulir, Anda dapat menggunakan kode berikut untuk menampilkan kesalahan validasi:
<?php echo validation_errors(); ?>
Sini:
- Fungsi di atas mengembalikan semua kesalahan yang terjadi.
Mengisi Data Formulir yang Dikirim: Formulir Lengket
Beberapa formulir memiliki banyak kolom, dan jika terjadi kesalahan, Anda ingin memastikan data yang telah ditambahkan dengan benar tetap tersimpan. Pustaka validasi memiliki mekanisme untuk mencapai hal tersebut, menggunakan kode berikut:
<?php echo set_value('field_name'); ?>
Sini:
- Kode di atas menampilkan input yang telah dimasukkan oleh pengguna.
Untuk panduan referensi lengkap mengenai metode yang tersedia di pustaka validasi, lihat dokumentasi API di situs resmi. CodePanduan pengguna Igniter: https://codeigniter.com/userguide3/libraries/form_validation.html.
CodeContoh Validasi Formulir Igniter
Sepanjang rangkaian tutorial ini, kita telah menambahkan kode ke proyek tutorial kita, sebuah aplikasi manajemen kontak. Di bagian ini, kita akan memuat pustaka validasi dan melihat bagaimana menerapkannya secara praktis dalam contoh dunia nyata. Ubah kode rute sebagai berikut untuk menyertakan metode 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'; $route['users'] = 'welcome/users';
Sekarang mari kita muat pustaka validasi formulir di controller Kontak dan tetapkan beberapa aturan validasi. Ubah kode seperti yang ditunjukkan di bawah ini:
<?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'); } }
Sini:
- $rules = array(…) mendefinisikan aturan validasi.
- $this->form_validation->set_rules($rules); mengatur aturan validasi.
- Jika ($this->form_validation->run() == FALSE) {…} maka aturan validasi akan dijalankan, dan jika gagal, formulir akan ditampilkan kembali dengan kesalahan validasi. Jika validasi berhasil, kita akan mengarahkan ke halaman daftar kontak. Dalam keadaan normal, kita akan menulis data ke basis data, yang akan kita lakukan di tutorial berikutnya. database.
Ubah tampilan pembuatan kontak di application/views/contacts/create.php seperti yang ditunjukkan di bawah ini:
<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>
Sini:
- Menampilkan kesalahan yang terjadi, jika ada, selama proses validasi.
- Mengatur nilai yang sebelumnya dimasukkan, jika ada.
Muat yang berikut ini URL Buka browser web Anda, lalu klik Buat Kontak tanpa memasukkan nilai apa pun:
