Cara Membuat Form Validation Pada Codeigniter Menggunakan Bootstrap

Halo teman-pada tutorial kali ini saya akan menjelaskan Cara Membuat Form Validation Pada Codeigniter Menggunakan Bootstrap, sebelum kita masuk ke study casenya saya akan menjelaskan terlebih dahulu fungsi dari validation tersebut, seperti yang kita ketahui bahwa validation pada sebuah website itu sangat diperlukan selain berfungsi sebagai security dari website kita, validation juga dapat mencegah hal-hal yang tidak diinginkan.

Pada codeigniter mempunyai sebuah class yang berfungsi untuk melakukan validation yaitu form_validation yang terdapat pada User Guide pada codeigniter. Validation yang terdapat pada sebuah form biasa kita gunakan pada saat pengisian data pada sebuah form, nah Cara Membuat Form Validation Pada Codeigniter Menggunakan Bootstrap teman-teman bisa mengikuti step by step yang terdapat dibawah ini.

Langkah yang pertama pastikan teman-teman telah mendownload bootstrapnya terlebih dahulu pada getbootstrap.com, dan letakan folder bootstrap yang telah kita download didalam folder codeigniter yang teman-teman gunakan, seperti dibawah ini.

Jika sudah kita akan membuat sebuah controller dengan nama form.php teman-teman bisa simpan script dibawah ini pada text editornya dengan nama form.php

<?php
class form extends CI_Controller{
   
    function  index(){
      $this->load->helper(array('form','url'));
       
      $this->load->library('form_validation');
      $this->load->library('session');
       
      $this->form_validation->set_rules('namadepan','Nama Depan','required');
      $this->form_validation->set_rules('namabelakang','Nama Belakang','required');
      $this->form_validation->set_rules('email','Email','required|valid_email'); 
      $this->form_validation->set_rules('password','Password','required|min_length[5]'); // min_length[5] password tidak boleh kurang dari lima
      $this->form_validation->set_rules('retypepassword','Retype Password','required|min_length[5]|matches[password]'); // matches[password] mencocokan password
       
        if ($this->form_validation->run()==FALSE){
            $this->load->view('form_view'); // file form_view.php
        }
       
        else {      

          $this->session->set_flashdata('succses','Data Yang anda masukan berhasil.');
          redirect('form');
        }
    }
}
?>

<?php

class form extends CI_Controller{

function index(){

$this->load->helper(array('form','url'));

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

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

$this->form_validation->set_rules('namadepan','Nama Depan','required');

$this->form_validation->set_rules('namabelakang','Nama Belakang','required');

$this->form_validation->set_rules('email','Email','required|valid_email');

$this->form_validation->set_rules('password','Password','required|min_length[5]'); // min_length[5] password tidak boleh kurang dari lima

$this->form_validation->set_rules('retypepassword','Retype Password','required|min_length[5]|matches[password]'); // matches[password] mencocokan password

if ($this->form_validation->run()==FALSE){

$this->load->view('form_view'); // file form_view.php

}

else {

$this->session->set_flashdata('succses','Data Yang anda masukan berhasil.');

redirect('form');

}

Langkah selanjutnya kita akan membuat view-nya untuk form inputan yang akan kita tampilkan pada browser, nah teman-teman bisa simpan script yang terdapat dibawah ini dengan nama form_view.php pada folder application/views/namafile.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cara Membuat Form Validation Pada Codeigniter Menggunakan Bootstrap</title>
    <!-- Bootstrap -->
    <link href="<?php echo base_url() ?>bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  <div class="container">
  <?php if (validation_errors()) : ?>
      <div class="alert alert-danger">
        <?php echo validation_errors(); ?>
      </div>
  <?php endif; ?>

  <?php if ($this->session->flashdata('succses')) : ?>
      <div class="alert alert-success">
        <?php echo $this->session->flashdata('succses'); ?>
      </div>
  <?php endif; ?>

    <div class="row">
      <div class="col-md-4"></div>
       <div class="col-md-4">
          <h1>Form Register</h1>
        <?php echo form_open(); ?> <!-- sama seperti <form action="" mathod="">...</form> -->
         
         <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <input type="text" placeholder="Nama Depan" class="form-control" name="namadepan">
                </div>
            </div>
            <div class="col-md-6">
                 <div class="form-group">
                    <input type="text" placeholder="Nama Belakang" class="form-control" name="namabelakang">
                </div>
            </div>
          </div>

           <div class="form-group">
            <input type="email" placeholder="Email" class="form-control" name="email">
          </div>
          <div class="form-group">
            <input type="password" placeholder="Password" class="form-control" name="password">
          </div>
           <div class="form-group">
            <input type="password" placeholder="Retype Password" class="form-control" name="retypepassword">
          </div>
          <div class="form-group">
            <input type="submit" name="register" class="form-control btn btn-info" value="Register">
          </div>
          <?php echo form_close(); ?>
      </div>
       <div class="col-md-4"></div>
    </div>
  </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url() ?>bootstrap/css/bootstrap.min.css/js/bootstrap.min.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Cara Membuat Form Validation Pada Codeigniter Menggunakan Bootstrap</title>

</head>

<body>

<?php if (validation_errors()) : ?>

<?php echo validation_errors(); ?>

</div>

<?php endif; ?>

<?php if ($this->session->flashdata('succses')) : ?>

<?php echo $this->session->flashdata('succses'); ?>

</div>

<?php endif; ?>

<h1>Form Register</h1>

<?php echo form_open(); ?>

</div>

</div>

</div>

</div>

</div>

</div>

<?php echo form_close(); ?>

</div>

</div>

</body>

</html>

Pada file form_view.php diatas terdapat sebuah kondisi Â <?php if (validation_errors()) : ?> â€¦. Â <?php endif; ?> Berfungsi untuk menampilkan pesan error yang dari form yang kita masukan, dan <?php if ($this->session->flashdata(‘succses’)) : ?> â€¦ <?php endif; ?> untuk menampilkan pesan sukses atau berhasil.

Pada file form_view.php pada tag link terdapat <?php echo base_url() ?> berfungsi untuk menjalankan nilai index pada page yang kita gunakan.

Berikutnya silahkan teman-teman save semua filenya jika kita jalankan pada browser maka akan muncul seperti dibawah ini

Download Script

Bagai mana teman-teman cukup mudah bukan Cara Membuat Form Validation Pada Codeigniter Menggunakan Bootstrap nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Form Validation Pada Codeigniter Menggunakan Bootstrap.

Semoga bermanfaat

Terimakasih

Cara Membuat Form Validation Pada Codeigniter Menggunakan Bootstrap

Facebook DUMET School

Konsultasi Gratis

Categories