Tutorial CRUD CodeIgniter Dengan Bootstrap 4 : Menampilkan Data Dari Database - Halo teman-teman semuanya, melanjutkan artikel sebelumnya yang membahas tentang installasi dan konfigurasi awal CodeIgniter. Pada kesempatan kali ini kita semua akan belajar bagaimana menampilkan data dari database.
Pada artikel kali ini kita akan menampilkan data dari database menggunakan Library yang bernama Datatables. Kenapa menggunakan Datatables ? dengan Datatables kita tidak harus membuat pencarian dan paginasi data secara manual, semuanya sudah disediakan secara otomatis.
Jika sebelumnya kita sudah membuat Database dengan nama db_sekolah, maka pada kesempatan kali ini kita akan membuat sebuah tabel didalam database db_sekolah.
Sekarang kita buka http://localhost/phpmyadmin, dan silahkan klik db_sekolah. Setelah itu silahkan buat tabel baru dengan nama tbl_siswa dengan memiliki 4 kolom. Silahkan lihat gambar dibawah ini:
Dari gambar pembuatan tabel diatas, berikut penjelasan singkatnya:
-
id_siswa - digunakan sebagai PRIMARY KEY dan dijadikan AUTO INCREMENT dengan tipe data INT dan dengan Lenght / Value 11, dimana kolom ini sebagai perwakilan satu record / satu baris.
-
nisn - kolom ini digunakan untuk menyimpan data NISN dengan tipe data VARCHAR dengan Lenght / Value 50.
-
nama_lengkap - kolom ini digunakan untuk menyimpan nama lengkap dari siswa dengan tipe data VARCHAR dengan Lenght / Value 200.
-
alamat - dan yang kolom terakhir ini adalah untuk menyimpan alamat dari data siswa, di kolom ini kita menggunakan tipe data TEXT dan kita tidak perlu meberikan isian dari Lenght / Value.
Jika semuanya sudah selesai, sekarang kita lanjutkan dan mulai membuat kode untuk menampilkan data dari Database. Sekarang kita buat file baru dengan nama Siswa.php didalam folder application/controllers. Dan silahkan masukkan kode berikut ini :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Siswa extends CI_Controller {
public function index()
{
//load model
$this->load->model('m_siswa');
$data = array(
'data_siswa' => $this->m_siswa->get_siswa()->result()
);
//load view
$this->load->view('data_siswa', $data);
}
}
Dari kode diatas coba perhatian baris kode berikut ini :
//load model
$this->load->model('m_siswa');
Kode diatas digunakan untuk memanggil Model siswa dengan memanggil fungsi didalamnya yang bernama get_siswa()
Dan coba perhatikan kode berikut ini :
//load view
$this->load->view('data_siswa', $data);
Dari kode diatas kita memanggil sebuah View dengan nama data_siswa.
Oke, selanjutnya kita buat sebuah Mode baru dengan nama M_siswa.php didalam folder application/models, dan silahkan masukkan kode berikut ini :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class M_siswa extends CI_Model {
public function get_siswa()
{
//select semua data siswa
$this->db->select('*');
$this->db->from('tbl_siswa');
$this->db->order_by('id_siswa', 'DESC');
return $this->db->get();
}
}
Dari kode model diatas, kita menjalankan sebuah Query untuk menyeleksi semua data siswa dan dengan diurutkan berdasarkan id siswa yang paling terbaru.
Sekarang ditahap terakhir, buatlah sebuah file baru dengan nama data_siswa.php dialam folder application/views, dan silahkan masukkan kode berikut ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<title>Data Siswa</title>
</head>
<body>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
DATA SISWA
</div>
<div class="card-body">
<a href="<?php echo base_url() ?>index.php/siswa/tambah" class="btn btn-md btn-success" style="margin-bottom: 10px">TAMBAH DATA</a>
<table class="table table-bordered" id="myTable">
<thead>
<tr>
<th scope="col">NO.</th>
<th scope="col">NISN</th>
<th scope="col">NAMA LENGKAP</th>
<th scope="col">ALAMAT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach($data_siswa as $siswa){
?>
<tr>
<td><?php echo $no++ ?></td>
<td><?php echo $siswa->nisn ?></td>
<td><?php echo $siswa->nama_lengkap ?></td>
<td><?php echo $siswa->alamat ?></td>
<td class="text-center">
<a href="<?php echo base_url() ?>index.php/siswa/edit/<?php echo $siswa->id_siswa ?>" class="btn btn-sm btn-primary">EDIT</a>
<a href="<?php echo base_url() ?>index.php/siswa/hapus/<?php echo $siswa->id_siswa ?>" class="btn btn-sm btn-danger">HAPUS</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Dan jika kalian jalankan dengan mengetikkan di browser http://localhost/ci-sekolah/index.php/siswa, maka kurang lebih tampilannya seperti gambar dibawah ini:
Agar kita ketika mengakses http://localhost/ci-sekolah lansgung menampilkan data siswa, silahkan buka file routes.php di folder application/config. Cari kode berikut ini :
$route['default_controller'] = 'welcome';
Ubahlah menjadi seperti berikut ini :
$route['default_controller'] = ’siswa';
Kode diatas digunakan untuk mengatur default Controller apa yang pertama kali dipanggil saat aplikasi kita diakses.
Karena kita belum mempunyai data maka tabel diatas masih kosong dan belum menampilkan data apapun dari database, untuk memasukkan data ke database kita akan bahas di artikel selanjutnya. Terima Kasih