ribbon iwa

Form Validasi Register Menggunakan CodeIgniter dan Ajax

Selamat malam bagaimana kabar anda, kali ini kami akan share bagaimana membuat form validasi regsister menggunakan CodeIgniter dan Ajax. Let's star...

Intalling

Jika kalian belum mengistal CodeIgniter, kalian bisa langsung mendownload versi terbari dengan klik link berikut. Jika kalian menggunakan XAMPP mencoba aplikasi ini kalian bisa langsung mengunduh aplikasi yang akan kami share ini dan jangan lupa meletakkannya pada folder htdocs dari XAMPP anda.

Karena dalam hal ini kami menggunakan localhost untuk menguji aplikasi ini dan file aplikasi ini kami beri nama registci maka konfigurasi yang benar dalam menguji aplikasinya adalah sebagai berikut.

 localhost/registci/ 

Buat Database

Buka phpmyadmin kalian kemudian buat database dengan nama codeigniter kemudian masukkan struktur databasenya dibawah ini.
 CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(40) NOT NULL,
  `password` varchar(40) NOT NULL,
  `fname` varchar(100) NOT NULL,
PRIMARY KEY(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1; 

Koneksi Kedatabse

Buka folder application / config / database.php kemudian masukkan nama database sesuai dengan yang kalian buat, dalam hal ini kami menggunakan database dengan nama codeigniter.
 $db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'codeigniter',
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => TRUE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE
); 

Konfigurasi Base URL

Fungsi dari konfigurasi base URL ini adalah untuk memberitahukan kepada CodeIgniter bahwa ini adalah URL dari aplikasi anda, caranya application / config / config.php
 $config['base_url'] = 'http://localhost/registci'; 

Membuat Model

Perlu kalian ketahui bahwa dalam membuat nama file huruf pertama harus diawali dengan huruf kapital. Cara membuatnya buka application / models kemudian buat file dengan nama Users_model.php
 <?php
 class Users_model extends CI_Model {
  function __construct(){
   parent::__construct();
   $this->load->database();
  }

  public function getAllUsers(){
   $query = $this->db->get('users');
   return $query->result(); 
  }

  public function register($user){
   return $this->db->insert('users', $user);
  }

 }
?> 

Buat Controller

Berikutnya kita beralih ke folder controllers (application / controllers) kemudian buat file dengan nama User.php file ini akan meload file users_model yang ada pada folder model.
 <?php
defined('BASEPATH') OR exit('No direct script access allowed');

class User extends CI_Controller {

 function __construct(){
  parent::__construct();
  $this->load->model('users_model');
  // load form and url helpers
        $this->load->helper(array('form', 'url'));
        // load form_validation library
        $this->load->library('form_validation');
 }
 
 public function index(){
  $this->load->view('register_form');  
 }

    public function fetch(){
        $data = $this->users_model->getAllUsers();
        foreach($data as $row){
            ?>
            <tr>
                <td><?php echo $row->id; ?></td>
                <td><?php echo $row->email; ?></td>
                <td><?php echo $row->password; ?></td>
                <td><?php echo $row->fname; ?></td>
            </tr>
            <?php
        }
    }

 public function register(){
        $output = array('error' => false);

  /* Set validation rule for name field in the form */ 
        $this->form_validation->set_rules('email', 'Email', 'valid_email|required');
        $this->form_validation->set_rules('password', 'Password', 'required|min_length[7]|max_length[30]');
        $this->form_validation->set_rules('fname', 'Full Name', 'required');
   
        if ($this->form_validation->run() == FALSE) { 
         $output['error'] = true;
            $output['message'] = validation_errors();
        } 
        else { 
            $user['email'] = $_POST['email'];
            $user['password'] = $_POST['password'];
            $user['fname'] = $_POST['fname'];

            $query = $this->users_model->register($user);

            if($query){
             $output['message'] = 'User registered successfully';
            }
            else{
                $output['error'] = true;
             $output['message'] = 'User registered successfully';
            }
        }

        echo json_encode($output);
 }

}
 

Membuat Views (Tampilan)

Buat file dengan nama register_form.php file ini merupakan tampilan utama dari semua proses yang ada di atas.
 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>CodeIgniter Ajax Signup</title>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
 <script src="<?php echo base_url(); ?>jquery/jquery.min.js"></script>
 <script src="<?php echo base_url(); ?>bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
   <div class="navbar-header">
    <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
   </div>
  </div>
 </nav>
 <div class="container">
  <div class="row">
   <div class="col-sm-4">
    <div class="login-panel panel panel-primary">
     <div class="panel-heading">
      <h3 class="panel-title"><span class="glyphicon glyphicon-user"></span> Register
      </h3>
     </div>
     <div class="panel-body">
      <form id="regForm">
       <fieldset>
        <div class="form-group">
         <input class="form-control" placeholder="Email" type="text" name="email">
        </div>
        <div class="form-group">
         <input class="form-control" placeholder="Password" type="password" name="password">
        </div>
        <div class="form-group">
         <input class="form-control" placeholder="Full Name" type="text" name="fname">
        </div>
        <button type="submit" class="btn btn-lg btn-primary btn-block">Sign Up</button>
       </fieldset>
      </form>
     </div>
    </div>
    <div id="responseDiv" class="alert text-center" style="margin-top:20px; display:none;">
     <button type="button" class="close" id="clearMsg"><span aria-hidden="true">&times;</span></button>
     <span id="message"></span>
    </div>
   </div>
   <div class="col-sm-8">
    <table class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>ID</th>
       <th>Email</th>
       <th>Password</th>
       <th>FullName</th>
      </tr>
     </thead>
     <tbody id="tbody">
     </tbody>
    </table>
   </div>
  </div>
 </div>
 <script type="text/javascript">
  $(document).ready(function(){
   getTable();

   $('#regForm').submit(function(e){
    e.preventDefault();
    var url = '<?php echo base_url(); ?>';
    var reg = $('#regForm').serialize();
    $.ajax({
     type: 'POST',
     data: reg,
     dataType: 'json',
     url: url + 'index.php/user/register',
     success:function(response){
      $('#message').html(response.message);
      if(response.error){
       $('#responseDiv').removeClass('alert-success').addClass('alert-danger').show();
      }
      else{
       $('#responseDiv').removeClass('alert-danger').addClass('alert-success').show();
       $('#regForm')[0].reset();
       getTable();
      }
     }
    });
   });

   $(document).on('click', '#clearMsg', function(){
    $('#responseDiv').hide();
   });

  });
  function getTable(){
   var url = '<?php echo base_url(); ?>';
   $.ajax({
    type: 'POST',
    url: url + 'index.php/user/fetch',
    success:function(response){
     $('#tbody').html(response);
    }
   });
  }
 </script>
</body>
</html> 



Sekian share di atas semoga apa yang kami share bermanfaat bagi anda, kalian bisa melihat demo dan bisa langsung mendownload filenay dibawah ini.

DEMO      DOWNLOAD

Jika kalian masih belum memahami sepenuhnya apa yang kami share di atas silahkan tinggalkan komentar dibawah, Salam blogger.

References : 
https://www.sourcecodester.com/tutorials/php/12045/codeigniter-ajax-signup-validation-using-jquery.html 


SUBSCRIBE TO OUR NEWSLETTER

close