Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website,pada kesempatan kali ini saya akan memberikan tips tentang CRUD Codeigniter dan Ajax kali ini kita akan belajar menampilkan data dengan ajax. Dengan ajax aplikasi web kita tidak akan reload artinya data di kirimkan ke view akan lebih cepat, baik langsung saja, kita buat terlabih dahulu database nya dengan mysql.
Kemudian isikan data nya, disini saya isikan data sebanyak 2 saja
Kemudian teman – teman download codeigniter nya dan lakukan konfigurasi, config/autoload.php
$autoload['helper'] = array('url');
Sesuaikan databasenya config/database.php
$db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'dumet', 'password' => 'school', 'database' => 'hernowo', '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(), 'save_queries' => TRUE );
Kemudian kita buat controller nya dengan nama Data_customer.php dan isikan script di bawah ini
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Data_customer extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->model('main_model');
}
public function index(){
$this->load->view('data_customer');
}
public function all_data(){
$data=$this->main_model->get_data('data_customer');
echo json_encode($data);
}
}
Selanjutnya kita buat model nya dengan nama Main_model.php di dalam folder models, dan buat beri perintah ambil semua data
<?php
class Main_model extends CI_Model
{
function __construct()
{
parent:: __construct();
$this->load->database();
}
public function get_data($table)
{
$hasil = $this->db->get("$table");
return $hasil->result();
}
}
Dan yang terakhir kita buat halaman tampilnya di dalam folder views dengan nama data_customer.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1>Data Customer</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>Nama Customer</th>
<th>Telepon</th>
<th>Alamat</th>
<th>Kota</th>
<th>Total Belanja</th>
</tr>
</thead>
<tbody id="show_data">
</tbody>
</table>
</div>
</div>
</body>
</html>
Kemudian buat fungsi ambil datanya dengan ajax
$(document).ready(function(){
//fungsi tampil data
function data_customer(){
$.ajax({
type : 'ajax',
url : '<?php echo base_url()?>index.php/Data_customer/all_data',
dataType : 'json',
success : function(data){
var output = '';
var i=0;
while(i<data.length){
output += '<tr>'+
'<td>'+data[i].nama_customer+'</td>'+
'<td>'+data[i].telepon+'</td>'+
'<td>'+data[i].alamat+'</td>'+
'<td>'+data[i].kota+'</td>'+
'<td>'+data[i].total_belanja+'</td>'+
'</tr>';
i++;
}
$('#show_data').html(output);
}
});
}
});
Kemudian kita tampilkan dengan memanggil fungsinya
data_customer();
Maka akan tampil seperti gambar di bawah ini
Nah demikian cara membuat CRUD Codeigniter dan Ajax dengan menampilkan data dari database, pada artikel selanjutnya kita akan membuat fungsi insert data ke dalam database dengan ajax. Kunjungi terus di website ini, tentu selalu memberikan tips dan trik seputar dunia website. terimakasih dan sampai jumpa, semoga bermanfaat.
