Aplikasi Web CRUD Toko Buku Menggunakan Code Igniter (Bagian I)

Halo sobat Sidat.ID, bagaimana kabar sobat semua? Semoga selalu dalam keadaan sehat dan sukses ya. Kali ini kita akan membahas artikel pemrograman yang mengkhusus pada pemrograman web. Pada artikel sbelumnya, kita sudah pernah membahas tentang Web Toko Buku yang bisa sobat baca di : Aplikasi CRUD Toko Buku Berbasis Web.

Dan kali ini kita akan membahas Membuat Aplikasi Web CRUD Toko Buku Menggunakan Code Igniter. Kalau sobat sudah sempat membaca web toko buku di artikel sebelumnya, itu masih menggunakan php biasa ya sob. Dan sekarang kita akan coba buat menggunakan Code Igniter.

Jadi ada beberapa hal yang perlu sobat siapkan terlebih dahulu, yaitu sobat download dulu Code Igniter versi 3. Kita gunakan yang versi 3 saja dulu ya sob, soalnya pake versi 4 masih belajar. Hehee.

Kalau sobat sudah mendownloadnya, sekarang sobat ikuti langkah berikut.

1. Jalankan XAMPP, kemudian jalankan Apache dan MySQL – nya.
2. Copy Framework Code Igniter yang tadi sobat download dan ekstrak di C:\xampp\htdocs . Kemudian sobat buatkan nama_folder sesuai keinginan. Kalau di contoh saya buat nama “crudci”.
3. Setelah semua disiapkan, kita akan mulai dengan membaut databasenya.

Kalau sobat masih ada kebingungan untuk menempatkan framework Code Igniter, silahkan baca di artikel yang ada di Sidat.ID ya sob.

Membuat Database Toko Buku

Oke, kita lanjutkan dengan membuat databasenya terlebih dahulu. Sobat silahkan buka web browser dan ketikkan localhost/phpmyadmin di kolom url kemudian tekan enter.

Database yang kita buat dengan nama “db_tokobuku”. Dan memiliki tabel dengan nama “tb_buku” serta isi dari field tb_buku adalah seperti berikut.

• id_buku : tipe datanya "Int(11)" , AUTO_INCREMENT , Primary Key
• kategori_buku : tipe datanya "varchar(128)"
• judul_buku : tipe datanya "varchar(200)"
• penerbit : tipe datanya "varchar(128)"
• harga : tipe datanya "int(10)"

Dan berikut adalah screenshoot structur databasenya. Kalau sobat tidak ingin membuatnya, nanti sobat bisa download di halaman download di Sidat.ID.

database toko buku dengan code igniter

Mengatur Setting Dasar di Code Igniter

Pertama, kita buka Application\config\autoload.php dan kita tambahkan “database” pada “$autoload[libraries]”. Agar nantinya kita bisa mengakses database, menjadi seperti ini :

setting autoload.php di config

Kedua, Masih di autoload.php kita tambahkan “url” pada “$autoload['helper']” sehingga menjadi seperti ini :

setting helper di config autoload.php

Ketiga, kita beralih ke Application\config\config.php dan cari pada bagian base_url. Kita akan tambahkan url web kita di “$config['base_url']”, jadi ini akan mempersingkat kita menuliskan url di code. Sobat tambahkan http://localhost/crudci/ atau http://localhost/nama_folder_web sobat yang ada di xampp\htdoc. Sehingga nanti akan menjadi seperti berikut : 

setting base_url di config.php

Keempat, kita pindah ke folder Application\Config\database.php . Disini kita akan mendaftarkan database yang akan kita gunakan untuk proses penyimanan data dan pengolahan data nantinya. 

Sobat tambahkan data di $db[‘default’] seperti berikut :

• 'hostname' => 'localhost',
• 'username' => 'root',
• 'password' => '',
• 'database' => 'db_tokobuku',

Sesuaikan dengan database sobat ya, agar nanti sistem dapat mengakses database dengan benar.

setting database di code igniter

Kelima, kita pindah ke folder Application\Config\routes.php. Buka file routes.php dan scroll ke arah paling bawah. Kita akan merubah default controller, jadi ini adalah controller default yang akan berjalan ketika kita mengakses web pertama kali. Nantinya sobat bisa membuat controller defaultnya di bagian Application\controller. 

Untuk saat ini saya manggunakan controller welcome, seperti pada $route['default_controller'] = 'welcome';

setting default controller code igniter

Kalau sudah semua stepnya dipenuhi, sekarang kita beralih untuk membuat controller, model dan viewnya. Kita akan memulai membuat webnya, dan sobat silahkan buka code editor sobat masing-masing ya.

Membuat Web Toko Buku menggunakan Code Igniter 3 (Bagian View Data)

Pertama, kita akan membuat file .htaccess yang kita letakkan di dalam folder crudci. Sobat bisa mengetikkan code berikut, dan kemudian klik simpan.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

file .htaccess

Kedua, kita akan membuat view di Application\views dan buat sebuah file.php untuk menampilkan data buku. Sebagai contoh, saya buatkan home.php.

View ini akan kita munculkan begitu user mengakses halaman web kita. Jadi kalau di localhost, kita akses di web browser dengan localhost/crudci. Dan tampilannya akan seperti berikut.

contoh tampilan aplikasi web toko buku dengan code igniter

Untuk tampilan saat ini kita buat sederhana dahulu, nanti di artikel berikutnya kita akan permak tampilannya menggunakan bootstrap. Dan kali ini kita akan belajar terlebih dahulu untuk penggunaan code igniter terhadap web took buku yang sebelumnya pernah kita buat.

Dari tampilan diatas, kita mempunyai :

1. Tombol Tambah Data untuk menambahkan data buku baru
2. Opsi Edit untuk mengubah data buku
3. Opsi Hapus untuk menghapus data buku
4. Dan tabel yang kita gunakan untuk menampilkan data

Berikut ini adalah codenya.

<html>

<head>
    <title>Sidat.ID</title>
</head>

<body>
    <h1>Yuk Belajar CRUD CI 3</h1>
    <h3>Data Buku</h3>

    <button onclick="document.location.href = '<?php echo base_url('Welcome/tambahBuku'); ?>' ">Tambah Data</button>
    <table>
        <tr>
            <td><b>No</b></td>
            <td><b>ID Buku</b></td>
            <td><b>Kategori Buku</b></td>
            <td><b>Judul Buku</b></td>
            <td><b>Penerbit</b></td>
            <td><b>Harga</b></td>
            <td><b>Opsi</b></td>
        </tr>
        <?php
        $no = 1;
        foreach ($data_buku as $row) {

        ?>
            <tr>
                <td><?php echo $no++; ?></td>
                <td><?php echo $row->id_buku; ?></td>
                <td><?php echo $row->kategori_buku; ?></td>
                <td><?php echo $row->judul_buku; ?></td>
                <td><?php echo $row->penerbit; ?></td>
                <td><?php echo $row->harga; ?></td>
                <td><a href="<?php echo base_url('Welcome/editBuku/') . $row->id_buku; ?> ">Edit</a> |
                    <a href="<?php echo base_url('Welcome/deleteBuku/') . $row->id_buku; ?>">Hapus</a></td>
            </tr>

        <?php
        } ?>
    </table>
</body>

</html>

Setelah sobat menuliskan codenya, silahkan di save dan kita akan melanjutkan ke controller.

Ketiga, kita pindah ke folder Application\controllers dan sobat buat sebuah file dengan nama welcome.php . File ini sobat sesuaikan dengan controller defaultnya ya. Agar nanti sesuai dengan apa yang kita tulis di routes.php .

Jadi kita buat sebuah function index, yang mana ini akan menjadi halaman awal ketika user membuka web kita. Jadi bisa sobat lihat seperti contoh berikut ini :

public function index()
{
	$dataBuku = $this->M_tokobuku->getDataBuku();
	$data = array('data_buku' => $dataBuku);
	$this->load->view('home', $data);
}

Oke, kalau sudah, kita lihat pada code diatas, kita memanggil fungsi getDataBuku dari M_tokobuku di modal code igniter. Untuk dapat memanggil modal, kita harus membuat sebuah function __construct yang kita tempatkan paling atas, seperti pada gambar berikut.

function di controller welcome.php

public function __construct()
{
	parent::__construct();
	$this->load->model('M_tokobuku');
}

Keempat, karena kita memanggil modal M_tokobuku , Jadi kita akan membuat sebuah file modal di Application\models dengan nama M_tokobuku.php (silahkan sobat buat dengan nama sendiri ya).

Modal ini kita gunakan untuk menyimpan proses query database. Jadi dari controller akan merequest pemrosesan query ke modal, selanjutnya hasil / nilainya akan direturn kembali dan ditampilkan di view.

Sekarang kita sudah memiliki modal M_tokobuku.php dan kita ketikkan code didalamnya untuk menampilkan data buku di tabel pada file view/home.php .

class M_tokobuku extends CI_Model
{
    public function getDataBuku()
    {
        $this->db->select('*');
        $this->db->from('tb_buku');
        $query = $this->db->get();
        return $query->result();
    }

modal M_tokobuku untuk aplikasi web tko buku

Pada code diatas, kita select * from tb_buku yang artinya kita mengambil semua data pada tabel buku (tb_buku) di database db_tokobuku.

Jadi function getDataBuku() akan digunakan di controller welcome pada fungsi index() yaitu $dataBuku = $this->M_tokobuku->getDataBuku(); sudah terpenuhi dan data siap ditampilkan pada view home.php .

Membuat Web Toko Buku menggunakan Code Igniter 3 (Bagian Tambah Data)

Oke sobat, kita sudah berhasil menampilkan data buku pada halaman index. Sekarang kita akan memberikan fungsi untuk menambahkan data pada tombol Tambah data. Jadi begitu user mengklik tombol Tambah Data, akan muncul halaman baru untuk menginput data buku yang baru.

Pada tombol Tambah Data, terdapat code seperti ini :

<button onclick="document.location.href = '<?php echo base_url('Welcome/tambahBuku'); ?>' ">Tambah Data</button>

Yang digunakan untuk memanggil fungsi tambahBuku yang kita buat di controller welcome. Seperti pada gambar berikut :

memanggil view tambah_buku

Kalau user sudah mengklik tombol Tambah Data, nanti user akan diarahkan ke tampilan baru untuk menginput data buku.

form input data buku

Pada gambar diatas, kita membuat form yang berisi Field identitas buku. Data tersebut akan kita simpan ke database dengan cara mengklik tombol “simpan”. Setelah di klik simpan, halaman akan kembali ke index (tampilan tabel data buku)

Pada gambar, sobat perhatikan di form ID Buku. Itu kita set “disable” agar user tidak mengetikkan kode bukunya. Karena akan degenerate otomatis oleh databasenya (yang sebelumnya kita setting AUTO_INCREMENT).

Pertama, kita akan buat dulu view untuk menambahkan data. Sobat buat lagi file baru di Application/views dengan nama tambah_buku.php dan ketikkan code berikut.

html>

<head>
    <title>Tambah Data Buku</title>
</head>

<body>
    <h3>Form Input Data Buku</h3>
    <table>
        <form action="<?php echo base_url('Welcome/p_tambahData') ?>" method="POST">
            <tr>
                <td>ID Buku</td>
                <td>:</td>
                <td><input type="text" name="id_buku" disabled></td>
            </tr>
            <tr>
                <td>Kategori Buku</td>
                <td>:</td>
                <td><input type="text" name="kategori" required></td>
            </tr>
            <tr>
                <td>Judul Buku</td>
                <td>:</td>
                <td><input type="text" name="judul" required></td>
            </tr>
            <tr>
                <td>Penerbit</td>
                <td>:</td>
                <td><input type="text" name="penerbit" required></td>
            </tr>
            <tr>
                <td>Harga</td>
                <td>:</td>
                <td><input type="number" name="harga" required></td>
            </tr>
            <tr>
                <td colspan="3">
                    <center><input type="submit" value="SIMPAN"></center>
                </td>
            </tr>
        </form>
    </table>
</body>

</html>

Kedua, sobat perhatikan pada code berikut :

<form action="<?php echo base_url('Welcome/p_tambahData') ?>" method="POST">

Ini maksudnya kita akan mengirimkan data yang diinputkan user ke controller Welcome pada fungsi p_tambahData(). Jadi kita kembali ke controller welcome, dan tambahkan fungsi untuk p_tambahData() dengan code sebagai berikut :

public function p_tambahData()
{
	$id_buku = $this->input->post('id_buku');
	$kategori_buku = $this->input->post('kategori');
	$judul_buku = $this->input->post('judul');
	$penerbit = $this->input->post('penerbit');
	$harga = $this->input->post('harga');

	$insertData = array(
		'id_buku' => $id_buku,
		'kategori_buku' => $kategori_buku,
		'judul_buku' => $judul_buku,
		'penerbit' => $penerbit,
		'harga' => $harga
	);

	$this->M_tokobuku->insertDataBuku($insertData);
	redirect(base_url('Welcome'));
}

fungsi untuk proses tambah data buku

Ketiga, pada code di fungsi p_tambahData(), kita memanggil modal M_tokobuku->insertDataBuku. Jadi sekarang kita akan beralih kembali ke file modal M_tokobuku.php dan tambahkan fungsi insertDataBuku() dan berikut codenya :

public function insertDataBuku($data)
{
    $this->db->insert('tb_buku', $data);
}

fungsi menambahkan data ke database

Jadi pada fungsi p_tambahData() di controller welcome, kita mengambil data dari input user dengan method Post. 

Selanjutnya, kita buat sebuah variabel $insertData dan tampung semua input dalam sebuah array. Kemudian kita kirim arraynya (yaitu $insertData) ke medal M_tokobuku->insertDataBuku().

Yang nantinya akan dilakukan query : insert into tb_buku berdasarkan data array yang dikirim.

Jadi seperti itu proses untuk menambahkan data buku ke database. Semoga sobat paham ya. Kalau masih ada yang ditanyakan, silahkan sobat ketikkan di kolom komentar.

Untuk sesi Membuat Aplikasi Web CRUD Toko Buku Menggunakan Code Igniter ini, akan dibahas dalam 2 sesi ya sob. Sesi yang pertama ini untuk pengenalan, setting, view, dan insert data. Dan pada artikel berikutnya kita akan edit data bukunya dan menambahkan fungsi untuk hapus data.

Untuk link artikel dan download programmnya, silahkan sobat klik pada link dibawah ini :

• Sesi 1 : Membuat Aplikasi Web CRUD Toko Buku Menggunakan Code Igniter (Bagian I)
• Sesi 2 : Membuat Aplikasi Web CRUD Toko Buku Menggunakan Code Igniter (Bagian II)
• Download file latihan : download