Tutorial Codeigniter 4 – Part 7 – Penanganan Form dan Form Validasi di Codeigniter 4
Selamat datang di tutorial warung belajar, melanjutkan pembahasan dari seri tutorial belajar codeigniter 4, dalam tutorial kali ini kita akan belajar bagaimana cara untuk penanganan form & form validasi codeigniter 4.
Penanganan form disini maksudnya adalah bagaimana cara codeigniter 4 ini dapat menangkap inputan dari sebuah form dan memprosesnya dibagian controller.
baiklah kita akan mulai saja..
Tutorial Codeigniter 4 – Part 7 – Penanganan Form Dan Form Validasi Di Codeigniter 4
Buat Teman – teman yang biasanya belajar dengan cara melihat video tutorial, kita sudah buat tutorial versi videonya juga, kita menyertakan video youtube yang membahas terkait penanganan form dan form validasi di Codeigniter 4
Install Codeigniter 4 sebagai bahan belajar
Untuk bahan belajar kita perlu menginstall Codeigniter 4, untuk caranya bisa dilihat di tutorial kita sebelumnya yang membahas mengenai cara menginstall Codeigniter 4 : Cara Menginstall Codeigniter 4
Dalam contoh ini saya menginstallnya di direktori C:/xampp/htdocs/ci4app
Buat Sebuah Controller Siswa
Berikutnya silahkan buat controller dengan nama Siswa.php dan simpan didalam folder app/Controllers, untuk isi controller Siswa.php adalah sebagai berikut ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php namespace App\Controllers; class Siswa extends BaseController { public function index() { return view('formSiswa'); } public function save() { echo "<pre>"; var_dump($this->request->getVar()); echo "</pre>"; } } |
Keterangan :
- kita membuat controller dengan nama Siswa dimana controller ini memiliki method index.
- jika method index ini diakses maka akan mengakses file view dengan nama formSiswa.php
- berikutnya ada method save yang nantinya akan kita isi dengan perintah untuk menangkap inputan form
Membuat File View dengan nama formSiswa.php
Berikutnya kita akan membuat file view dengan nama formSiswa.php, file view ini akan berisi form, kita juga gunakan bootstrap untuk mengatur tampilannya, .. teman – teman bisa copy paste saja dengan code dibawah ini :
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 55 56 57 58 59 |
<!DOCTYPE html> <html lang="en"> <head> <title>Full Width Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS only --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- JS, Popper.js, and jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="card"> <div class="card-header bg-primary text-white">Tambah Data Siswa</div> <div class="card-body"> <?php if (!empty(session()->getFlashdata('error'))) : ?> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <h4>Periksa Entrian Form</h4> </hr /> <?php echo session()->getFlashdata('error'); ?> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <?php endif; ?> <form action="<?= base_url('siswa/save'); ?>" method="post"> <?= csrf_field(); ?> <div class="form-group"> <label for="nama">Nama</label> <input type="text" name="nama" class="form-control" value="<?= old('nama'); ?>" id="nama"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" name="email" class="form-control" id="email" value="<?= old('email'); ?>"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" name="password" class="form-control" id="password"> </div> <div class="form-group"> <label for="alamat">Alamat</label> <textarea name="alamat" id="alamat" class="form-control" cols="3" rows="3"><?= old('alamat'); ?></textarea> </div> <button type="submit" class="btn btn-primary">Save</button> </form> </div> </div> </div> </body> </html> |
Keterangan :
Bagian tampilan form ini kita menggunakan bootstrap, dan untuk library js dan css kita langsung mengaksesnya secara online, jadi kita sarankan untuk terkoneksi internet saat mengakses tampilan form.
Pada line 32 kita mengisi beberapa attribute di tag <form>, seperti bagian
1 |
action="<?= base_url('siswa/save'); ?>" |
yang artinya ketika tombol save di klik maka entrian form akan di proses didalam method save pada controller Siswa
Pada Line 33 kita menuliskan perintah :
1 |
<?= csrf_field(); ?> |
perintah diatas digunakan untuk memberikan token CSRF (Cross-Site Request Forgery) dibagian form, kami sarankan teman – teman menggunakan perlindungan CSRF ini.
Berikutnya kita buat beberapa inputan pada bagian form, seperti halnya kita membuat form di HTML, kita perlu memberikan value pada attribute name di masing – masing inputan form. (Line 36 name=”nama”), (Line 40 name=”email”), (Line 45 name=”password”), (Line 50 name=”alamat”)
Tombol submit kita buat di line 52
Untuk mengakses tampilan form teman – teman bisa mengaktifkan local development server terlebih dahulu dengan perintah “php spark serve” lalu bisa mengakses url :
1 |
localhost:8080/siswa |
Tampilannya adalah sebagai berikut :
Mengakses Inputan Form di Controller
Sebelumnya kita sudah membuat tampilan form, berikutnya kita akan belajar menuliskan perintah yang digunakan untuk mengakses inputan dibagian form.
Seperti yang telah kita tuliskan dibagian attribute action pada tag form, ketika tombol submit di form di klik, maka inputan form akan diproses dibagian method save di controller Siswa, perhatikan method save di controller Siswa kita menuliskan perintah sebagai berikut :
1 2 3 4 5 6 |
public function save() { echo "<pre>"; var_dump($this->request->getVar()); echo "</pre>"; } |
Keterangan :
Untuk mengakses seluruh inputan form kita bisa menggunakan perintah
1 |
$this->request->getVar() |
perintah diatas berlaku untuk inputan dengan tipe method post ataupun get, jika anda ingin mengakses inputan form bagian tertentu, bisa menuliskan value name dibagian input di method getVar, semisal dari form diatas kita ingin mengakses inputan email, maka bisa menggunakan perintah :
1 |
$this->request->getVar('email') |
Berikutnya kita menggunakan perintah print_r kita gunakan untuk menampilkan hasil inputan form.
baik kita akan coba lakukan percobaan untuk entry form, silahkan akses form dengan alamat : localhost:8080/siswa, dan isikan bagian formnya lalu klik tombol save untuk submit form.
Ketika kita klik tombol save, maka akan mengakses method save di controller siswa, dan akan menampilkan seperti gambar dibawah.
terlihat kita sudah berhasil menangkap inputan berdasarkan name dari inputan form.
Semisal kita akan menangkap salah satu dari inputan saja, semisal kita ingin menangkap inputan email saja, kita bisa merubah method save menjadi berikut ini :
1 2 3 4 |
public function save() { var_dump($this->request->getVar('email')); } |
Maka saat kita entry bagian form lalu klik tombol save, hasilnya adalah sebagai berikut :
Hasilnya hanya akan menampilkan inputan dengan name email saja.
MEMBUAT VALIDASI FORM
Berikutnya kita akan belajar untuk membuat validasi form di codeigniter 4, validasi form ini sangat penting sekali untuk mengatur inputan form yang dilakukan oleh pengguna aplikasi, sehingga ketika inputan form akan di insert ke database sesuai dengan struktur tabel di database.
Untuk membuat validasi form, kita akan merubah method save di controller Siswa, sehingga method save menjadi seperti berikut ini :
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 |
public function save() { if (!$this->validate([ 'nama' => [ 'rules' => 'required', 'errors' => [ 'required' => '{field} Harus diisi' ] ], 'email' => [ 'rules' => 'required|valid_email', 'errors' => [ 'required' => '{field} Harus diisi', 'valid_email' => 'Format Email Harus Valid' ] ], 'password' => [ 'rules' => 'required', 'errors' => [ 'required' => '{field} Harus diisi' ] ], 'alamat' => [ 'rules' => 'required', 'errors' => [ 'required' => '{field} Harus diisi' ] ] ])) { session()->setFlashdata('error', $this->validator->listErrors()); return redirect()->back()->withInput(); } else { print_r($this->request->getVar()); } } |
Keterangan :
Line 3 kita gunakan perintah IF dimana melakukan pengecekan dari penggunaan method $this->validate.
method validate, pada method validate kita isi parameternya dengan array multidimensi, dimana bisa anda isi dengan rules (aturan) dan message error (pesan error)
Misal jika kita lihat lagi :
1 2 3 4 5 6 |
'nama' => [ 'rules' => 'required', 'errors' => [ 'required' => '{field} Harus diisi' ] ], |
artinya inputan nama, rulesnya ‘required’ (harus diisi), dan jika tidak diisi akan menampilkan pesan error “nama Harus diisi”, {field} ini akan bernilai nama inputannya.
1 2 3 4 5 6 7 |
'email' => [ 'rules' => 'required|valid_email', 'errors' => [ 'required' => '{field} Harus diisi', 'valid_email' => 'Format Email Harus Valid' ] ], |
artinya inputan email, rulesnya ‘required’ (harus diisi), dan jika tidak diisi akan menampilkan pesan error “email Harus diisi”, selain itu terdapat rules valid_email artinya inputan harus menggunakan format email yang valid, jika tidak diisi maka akan menampilkan pesan error “Format Email Harus Valid”
Jika terdapat rules yang bernilai false (inputan form tidak sesuai aturan) maka akan menjalankan perintah di line 42 – 43.
Line 42 kita kirimkan error dengan menggunakan session flashdata, flashdata adalah istilah pengiriman data lewat session, tapi hanya satu kali pakai, biasanya digunakan untuk mengirimkan pesan / alert.
dalam contoh ini kita gunakan untuk mengirimkan pesan error dari form validation, setFlashdata memiliki 2 parameter yaitu :
- nama flashdata
- value flashdata
1 |
session()->setFlashdata('error', $this->validator->listErrors()); |
Line 43 kita tuliskan perintah :
1 |
return redirect()->back()->withInput(); |
Perintah diatas berfungsi untuk redirect ke halaman sebelumnya (form input), yang artinya adalah halaman formSiswa, dengan menyertakan inputan yang sudah dientrikan sebelumnya (withInput)
Line 45 akan dijalankan jika inputan form sudah sesuai rules.. kita tuliskan aja sebagai contoh menggunakan perintah dd untuk menampilkan isi entrian form.
Testing Form Validation
Setelah kita setting bagian form validation pada method save di controller Siswa, berikutnya kita akan coba lakukan testing, kita coba akses dulu untuk formnya :
1 |
localhost:8080/Siswa |
Maka tampilannya adalah seperti berikut ini :
Keterangan :
semisal kita isi bagian form untuk nama dan email, tapi bagian password dan alamat kita kosongkan, lalu kita tekan tombol Save
Maka hasilnya adalah sebagai berikut :
Keterangan :
Maka akan menampilkan List Error pada form validation, ada kotak berwarna merah diatas form, tertulis :
- password Harus diisi
- alamat Harus diisi
bagaimana ini bisa terjadi, penjelasannya adalah sebagai berikut :
seperti yang telah dibahas dibagian method save, jika ada kesalahan pada form validation maka akan menjalakan perintah :
1 |
session()->setFlashdata('error', $this->validator->listErrors()); |
jadi ketika redirect kembali ke bagian form entry, ada sebuah flashdata dengan nama error yang berisi error dari form validation.
nah sekarang perhatikan dibagian file view formSiswa.php pada line 22 hingga line 31
1 2 3 4 5 6 7 8 9 10 |
<?php if (!empty(session()->getFlashdata('error'))) : ?> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <h4>Periksa Entrian Form</h4> </hr /> <?php echo session()->getFlashdata('error'); ?> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <?php endif; ?> |
Keterangan :
- perhatikan perintah diatas
- pada line 1 ini kita lakukan pengecekan apakah ada session flashdata dengan nama error, jika ada maka akan menampilkan pesan error.
- pesan error ada pada line 5 kita mengambil data dari flashdata dengan nama error, sehingga menampilkan pesan error dari form validation
Hasil Akhir
Berikutnya saya sertakan code hasilnya mungkin teman – teman biar mudah mengikutinya :
File Controller Siswa.php
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 |
<?php namespace App\Controllers; class Siswa extends BaseController { public function index() { $data['validation'] = \Config\Services::validation(); return view('formSiswa', $data); } public function save() { if (!$this->validate([ 'nama' => [ 'rules' => 'required', 'errors' => [ 'required' => '{field} Harus diisi' ] ], 'email' => [ 'rules' => 'required|valid_email', 'errors' => [ 'required' => '{field} Harus diisi', 'valid_email' => 'Format Email Harus Valid' ] ], 'password' => [ 'rules' => 'required', 'errors' => [ 'required' => '{field} Harus diisi' ] ], 'alamat' => [ 'rules' => 'required', 'errors' => [ 'required' => '{field} Harus diisi' ] ] ])) { session()->setFlashdata('error', $this->validator->listErrors()); return redirect()->back()->withInput(); } else { echo "<pre>"; var_dump($this->request->getVar()); echo "</pre>"; } } } |
File view formSiswa.php
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 55 56 57 58 59 |
<!DOCTYPE html> <html lang="en"> <head> <title>Full Width Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS only --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- JS, Popper.js, and jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="card"> <div class="card-header bg-primary text-white">Tambah Data Siswa</div> <div class="card-body"> <?php if (!empty(session()->getFlashdata('error'))) : ?> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <h4>Periksa Entrian Form</h4> </hr /> <?php echo session()->getFlashdata('error'); ?> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <?php endif; ?> <form action="<?= base_url('siswa/save'); ?>" method="post"> <?= csrf_field(); ?> <div class="form-group"> <label for="nama">Nama</label> <input type="text" name="nama" class="form-control" value="<?= old('nama'); ?>" id="nama"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" name="email" class="form-control" id="email" value="<?= old('email'); ?>"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" name="password" class="form-control" id="password"> </div> <div class="form-group"> <label for="alamat">Alamat</label> <textarea name="alamat" id="alamat" class="form-control" cols="3" rows="3"><?= old('alamat'); ?></textarea> </div> <button type="submit" class="btn btn-primary">Save</button> </form> </div> </div> </div> </body> </html> |
Baik sekian dulu tutorial kali ini, kita sudah belajar bagaimana cara menangani inputan form, serta membuat form validasi di codeigniter 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, terima kasih sampai jumpa di tutorial selanjutnya.
mohon bantuannya..kenapa error keluar bahasa inggris yah???
dibagian controller bisa kita custom keterangan errornya, coba sesuaikan dengan source code yang kita sediakan