Hallo teman-teman kali ini saya ingin menjelaskan bagaimana cara CRUD Codeigniter tanpa reload dengan mengunakan ajax pada data .

AJAX (Asynchronous Javascript And XML) memang memiliki kehandalan dalam mengakses data dari database, dikarenakan Asynchronous. Asynchronous langsung mengeksekusi proses baru tanpa menunggu proses sebelumnya selesai. Dengan begitu dapat menghemat bandwidth server.

Pada tutorial CRUD dengan ajax dan datatable menggunakan codeigniter ini, saya menggunakan css dari BOOTSTRAP sebagai style dari form dan datatable.

Oke Langsung Saja !

Buka Config.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'coba',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'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(),

Silakan setting sesuai dengan database yang teman-teman buat.

2. Buka Controller.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

	public function index()
	{
		$this->load->view('welcome_message);
	}
        public function save()
	{
          $nama = $this->input->post('nama');
          $username = $this->input->post('username');
          $password = $this->input->post('password');
          $object = array(
             'nama' => $nama,
             'username => $username,
             'password' => $password
          )
          $data = $this->db->insert('admin', $object);
          echo json_encode($data)
        }

3. Buat View

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/jquery.dataTables.css'?>">
</head>
<body>
<div id="container">
	<h1>Welcome to CodeIgniter!</h1>
	<div id="body">
          <form id="input">
	   <div>
              <input type="text" name="nama" class="form-control">
           </div>
           <div>
              <input type="text" name="username" class="form-control">
           </div>
           <div>
              <input type="passwrod" name="password" class="form-control"> 
           </div>
           <div>
             <button id="simpan" class="btn btn-primary">Simpan</button>
           </div>
          </form>
	</div>
</div>

<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery.dataTables.js'?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#simpan').on('click', function(){
  var input = $('#input').serialize();
  $.ajax({
      url: "<?php echo base_url()?>welcome/save",
      type: "POST",
      data : input,
      dataType : "JSON",
      success:function(data){
       console.log(data);
      } 
   })
 }
})
</script>
</body>
</html>

Jalankan url kalian sesuai file yang teman teman buat di localhost, kalau saya buat folder di localhost folder coba, dengan url http://localhost/coba.

Untuk Tutorial Selanjutnya silakan kunjungi Source Code Crud Tanpa Reload Codeigniter 3 dengan ajax Part 2