[Tutorial CodeIgniter] Cara Menampilkan Data dari Database #5


Assalamualikum, wr. wb. teman-teman, selamat datang kembali di tutorial CodeIgniter. Sebelumnya kita sudah belajar bagaimana cara menghilangkan index.php pada URL. Sekarang kita akan belajar bagaimana cara menampilkan data user dari database. Tutorial ini merupakan seri Tutorial CRUD (Create, Read, Update, dan Delete) pada CodeIgniter. Meskipun begitu, kita mulai dari Create data terlebih dahulu.

Masih ingat konsep MVC yang sudah saya jelaskan pada tutorial di awal? Kita sudah belajar tentang View dan Controller. Nah kali ini karena kita akan berhubungan langsung dengan database, jadi kita akan mulai menggunakan Model untuk menangani database-nya. Kemudian Controller akan mengirimkan data yang dikelola di Model untuk ditampilkan ke View.

Oke langsung saja, buka projek kalian yang kemarin. Atau jika kalian baru memulai (tidak mengikuti tutorial ini dari awal) silahkan buat file User.php untuk Controller, Index.php untuk View, dan User_model.php untuk Model. Untuk yang mengikuti dari awal cukup buat User_model.php saja pada folder application/models. Lihat struktur foldernya seperti berikut.


Setelah selesai dibuat, tahan dulu. Kita siapkan database-nya dulu. Buka phpmyadmin kalian, buat database dengan nama terserah, dan buat satu tabel dengan nama user dan isi kolom-nya seperti berikut.


Kemudian lakukan konfigurasi database kalian pada file config/database.php seperti gambar berikut.


Jika kalian menggunakan XAMPP biasanya nama username-nya root dan password-nya kosong. Isi nama database sesuai yang kalian buat tadi. Selanjutnya kita akan menggunakan library CodeIgniter yaitu database yang menyediakan fungsi-fungsi yang berguna dalam melakukan operasi database nantinya. Buka file config/autoload.php lalu tambahkan database pada $autoload['libraries'] seperti gambar berikut.


Oke kita sudah siapkan konfigurasi database-nya. Sekarang buka file User_model.php yang sudah kita buat tadi dan tambahkan kodenya seperti berikut.

1
2
3
4
5
6
7
8
9
<?php

class User_model extends CI_Model
{
    public function getAllUser()
    {
        return $this->db->get('user')->result_array();
    }
}
  • Baris 3: Nama kelas model harus sama dengan nama file dan harus extends CI_Model.
  • Baris 5: Kita buat fungsi untuk mengambil seluruh data dari tabel user dengan nama getAllUser(). Kalian dapat memberi nama fungsi sesuai keinginan kalian, namun lebih baiknya nama fungsi ini jelas sesuai dengan fungsinya.
  • Baris 7: Ini adalah sintak generating query result yang disediakan oleh CodeIgniter. Perhatikan kode get('user') merupakan nama tabel kita tadi yang bernama user. Terakhir result_array() akan mengembalikan nilai data dalam bentuk array. Jika kalian ingin mengembalikan nilai dengan bentuk object kalian dapat menggunakan result() saja. Namun pada tutorial ini saya menggunakan result_array().

Selanjutnya buka file Controller User.php dan isikan kodenya seperti berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<?php
defined('BASEPATH') or exit('No direct script access allowed');

class User extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('User_model');
    }

    public function index()
    {
        $data['user'] = $this->User_model->getAllUser();
        $this->load->view('users/index', $data);
    }
}
  • Baris 6 - 10: Kita buat fungsi __construct() yang akan dijalankan pertama kali saat controller ini diakses. Dimana didalamnya kita akan me-load model yang kita buat tadi yaitu User_model untuk digunakan pada kelas controller ini.
  • Baris 12: Kita buat fungsi index() untuk menampilkan data user.
  • Baris 14: Kita panggil fungsi getAllUser() yang sudah kita buat pada kelas User_model tadi dan kita simpan datanya pada variabel $data['user'].
  • Baris 15: Kita load file view yang berada pada folder users/index.php dan kita parsing data user yang kita ambil tadi dengan variabel $data.

Controller dan Model sudah selesai kita buat, terakhir kita tampilkan datanya pada View. Buka file users/index.php dan tambahkan kode berikut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Data User</h2>
        <p>Anda dapat mengelola data user</p>
        <table class="table table-dark">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $no = 1;
                foreach ($user as $u) :
                    ?>
                    <tr>
                        <td><?= $no++; ?></td>
                        <td><?= $u['username'] ?></td>
                        <td><?= $u['email'] ?></td>
                        <td><a href="" class="btn btn-danger">Hapus</a>
                            <a href="" class="btn btn-warning">Detail</a>
                            <a href="" class="btn btn-primary">Ubah</a>
                        </td>
                    </tr>
                <?php
                endforeach;
                ?>
            </tbody>
        </table>
    </div>
</body>
</html>
  • Baris 7 - 10: Saya menggunakan Bootstrap 4 untuk mempercantik tampilan tabel.
  • Baris 28: Kita menggunakan foreach untuk melakukan looping pada data $user yang didapat dari parsing data tadi.
  • Baris 31 - 33: Kita cetak data nya dengan sintak $u['nama_kolom']. Ingat sintak <?= ?> sama dengan <?php echo " " ?>.

Sekarang kalian dapat jalankan kodenya pada browser kalian, dan berikut hasilnya.



Jika kalian bingung kenapa aksesnya mengunakan localhost/indeveloper/index bukan localhost/indeveloper/user/index silahkan baca Cara Custom Router CodeIgniter.

Sekian tutorial kali ini, semoga bermanfaat Wassalamualaikum, wr. wb.

Baca Seri Lengkap CRUD Menggunakan CodeIgniter:
  1. Cara Menampilkan Data.
  2. Cara Menambahkan Data.
  3. Cara Mengedit Data.
  4. Cara Menghapus Data.

Posting Komentar

0 Komentar