Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Form Validation Codeigniter 4 dengan Flashdata dan Bootstrap

4 min read

Form Validation Codeigniter 4 dengan Flashdata dan Bootstrap

Halo spark, ada banyak trik yang disediakan codeigniter 4 untuk membuat fitur form validation. Dari banyaknya trik, saya memilih trik ini untuk membuat form validasi. Selain itu, saya bisa menggabungkannya dengan flashdata dan bootstrap.

Penasaran gimana caranya?

Oke, bila Anda membutuhkan tutorial membuat fitur form validation di codeigniter 4, silahkan ikuti beberapa step di bawah ini:

Step 1 – Install Codeigniter 4

Silahkan buka situs codeigniter.com dan download versi ke 4. Kemudian pindahkan hasil download ke direktori pilihan. Misalnya di xampp/htdocs atau di laragon/www.

Setelah extract, kemudian rename project menjadi ci4_form_validation.

Step 2 – Get Bootstrap

Saya menggunakan bootstrap secara online di situs https://getbootstrap.com. Jadi, ketika merunning project ini, perlu terkoneksi dengan internet.

Namun jika Anda memilih untuk download bootstrap agar tidak perlu online, itu tidak masalah.

Step 3 – Set Rules Validation

Pada artikel ini saya menggunakan studi kasus proses register. Jadi saya membutuhkan fiel username, email dan password.

Oke kita langsung saja membuka file Validation.php yang ada di dalam direktori app/Config/Validation.php.

Kemudian tambahkan kode di bawah ini:

public $register = [
	'username' => 'required|alpha_numeric|min_length[5]|max_length[20]',
	'email' => 'required|valid_email',
	'password' => 'required|min_length[8]|max_length[20]'
];

public $register_errors = [
	'username' => [
		'required' 		=> 'Username wajib diisi',
		'alpha_numeric' => 'Username hanya boleh diisi dengan huruf dan angka',
		'min_length' 	=> 'Username minimal terdiri dari 5 karakter',
		'max_length' 	=> 'Username maksimal terdiri dari 20 karakter'
	],
	'email' => [
		'required' 			=> 'Email wajib diisi',
		'email.valid_email' => 'Email tidak valid'
	],
	'password' => [
		'required' 		=> 'Password wajib diisi',
		'min_length' 	=> 'Password minimal terdiri dari 8 karakter',
		'max_length' 	=> 'Password maksimal terdiri dari 20 karakter'
	]
];

Penjelasan:

Pada publis $register merupakan rules yang ingin kita atur kepada masing-masing kolom yang ingin berikan validasi. Kemudian pada public $register_errors berperan untuk menghasilkan custom pesan error (optional). Custom pesan error bisa Anda tambahkan atau tidak. Bila tidak, by default akan berbahasa inggris.

Rekomendasi: Tutorial CRUD Codeigniter 4 dan Flutter Part #1 – Tampil Data

Step 4 – Create Controller

Saat pertama kali download file Codeigniter 4, kita disediakan controller Home.php. Nah, kita akan menggunakan controller ini saja agar tidak perlu membuat controller baru lagi.

Silahkan buka file Home.php yang ada di direktori app/Controllers/Home.php. Kemudian modifikasi filenya sebagai berikut:

<?php namespace App\Controllers;

class Home extends BaseController
{
	public function __construct()
	{
		helper('form');
		$this->form_validation = \Config\Services::validation();
	}

	public function index()
	{
		return view('welcome_message');
	}

	public function register()
	{
		return view('v_register');
	}

	public function proses_register()
	{
		$username 	= $this->request->getPost('username');
		$email 		= $this->request->getPost('email');
		$password 	= $this->request->getPost('password');

		$data = [
			'username' 	=> $username,
			'email' 	=> $email,
			'password' 	=> $password
		];

		if($this->form_validation->run($data, 'register') == FALSE){
			// mengembalikan nilai input yang sudah dimasukan sebelumnya
			session()->setFlashdata('inputs', $this->request->getPost());
			// memberikan pesan error pada saat input data
			session()->setFlashdata('errors', $this->form_validation->getErrors());
			// kembali ke halaman form
			return redirect()->to(base_url('home/register'));
        } else {
			session()->setFlashdata('success', 'Registration successfully');
			// kembali ke halaman register
			return redirect()->to(base_url('home/register'));
		}
	}

}

Penjelasan:

Pada function constructor, saya memanggil helper('form') dan membuat variabel $this->form_validation yang berisi library form validation bawaan Codeigniter 4.

Kemudian pada function register saya memanggil v_register.php yang akan kita buat di step berikutnya.

… dan pada proses register bisa Anda perhatikan pada baris ke 33, di sana saya menegecek jika terjadi validasi. Pada kode ini:

$this->form_validation->run($data, 'register')

Kata register mengacu pada nama public $register di Validation.php yang telah kita buat pada step sebelumnya.

Pada baris ke 35 saya menyisipkan inputs di dalam flashdata agar setiap yang telah kita inputkan akan dikembalikan lagi ke form jika terjadi kesalahan. Ini akan membantu pengguna website Anda tidak capek mengetik lagi saat ada error validasi.

Pada baris ke 37 saya menyisipkan errors pada flashdata untuk memberikan pesan error jika ada kesalahan dalam input data. Isi dari pesan error ini adalah $this->form_validation->getErrors().

Sedangkan pada baris ke 39 merupakan fungsi redirect jika yang akan terjadi jika terjadi validasi.

Saya pun tak lupa untuk menyisipkan pesan sukses jika user berhasil melewati validasi yang tercermin pada baris 41 sd 43.

Step 5 – Create View Register dengan Form Validation dan Bootstrap

Step terakhir adalah membuat view bernama v_register.php dan simpan di direktori app/Views.

Kemudian ketik kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation Codeigniter 4 with Flashdata and Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <div class="card">
            <div class="card-header">
                Form Validation Codeigniter 4 dengan Flashdata dan Bootstrap
            </div>
            <?php echo form_open('/home/proses_register'); ?>
            <div class="card-body">
                <!-- cek validasi -->
                <?php 
                    $inputs = session()->getFlashdata('inputs');
                    $errors = session()->getFlashdata('errors');
                    $success = session()->getFlashdata('success');
                    if(!empty($errors)){ ?>
                    <div class="alert alert-danger" role="alert">
                        Whoops! Ada kesalahan saat input data, yaitu:
                        <ul>
                        <?php foreach ($errors as $error) : ?>
                            <li><?= esc($error) ?></li>
                        <?php endforeach ?>
                        </ul>
                    </div>
                    <?php 
                    }
                    if(!empty($success)){ ?>
                    <div class="alert alert-success" role="alert">
                        Sukses! Berhasil melakukan registrasi.
                    </div>
                    <?php } 
                ?>

                <div class="form-group">
                    <label for="">Username</label>
                    <input type="text" name="username" value="<?php echo $inputs['username']; ?>" placeholder="Username" class="form-control">
                </div>
                <div class="form-group">
                    <label for="">Email</label>
                    <input type="email" name="email" value="<?php echo $inputs['email']; ?>" placeholder="youremail@domain.com" class="form-control">
                </div>
                <div class="form-group">
                    <label for="">Password</label>
                    <input type="password" name="password" value="<?php echo $inputs['password']; ?>" placeholder="Password" class="form-control">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Register</button>
                </div>
            </div>
            <?php echo form_close(); ?>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</body>
</html>

Step 6 – Running Project

Silahkan aktifkan web server (XAMPP, WAMP, Laragon, dll) Anda, kemudian ketik perintah berikut ini:

php spark serve

Jika berhasil, ketik URL berikut berikut:

localhost:8080/home/register

Cobalah untuk asal dalam mengisi form, maka hasilnya:

form validation codeigniter 4 - error

Sedangkan bila sukses, maka akan tampil seperti ini:

form validation codeigniter 4 - success

Penutup

Alhamdulillah, tutorial form validation codeigniter 4 menggunakan flashdata dan bootstrap sudah selesai.

Tapi jangan puas dulu, Anda bisa benyak belajar Codeigniter 4, seperti Membuat CRUD Rest Api Menggunakan Codiegniter 4.

Semoga tutorial ini bermanfaat. Aamiin.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.