CRUD : Aplikasi Perpustakaan | Mengelola Data Buku | Part 3

Baringin
By -
0

 Pendahuluan


    Nah pada materi ini kita akan membahas bagaimana cara menampilkan data dari database ke sistem sehingga user dapat melihat data. Jadi sebelum lanjut di pastikan anda sudah mempelajari materi sebelumnya.

    Berikut perisiapan yang harus anda siapkan sebelum lanjut:

1. Sudah membaca materi sebelum

2. Memahami konsep MVC

3. Memahami framework Boostrap


Materi

1. Membuat Jalur Rooters

    Nah mari kita mulai. Langakah awal kita akan membuat link dan membuat jalur pada codeigniter-4.  Pertama-tama silahkan buka kembali file temp_main.php yang ada di views/templates. Disini kita akan membuat link pada desain navbar kita. Rubahlah script navbar sepertiberikut:

       <nav class="container navbar navbar-expand-lg">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link text-white" href="<?= base_url('') ?>"">Beranda</a>
                </li>
                <li class=" nav-item">
                        <a class="nav-link text-white" href="<?= base_url('buku') ?>">Buku</a>
                </li>
                ....................
            </ul>
        </nav>

    Silahkan buka file rootes di App/Config/Rootes.php. Disini kita akan membuat rooters untuk link buku yang telah kita buat tadi. Jadi silahkan tambah script berikut:

$routes->get('/',           'Home::index');
$routes->get('buku',        'Buku::index');


2. Membuat Model Buku

    Sekarang kita akan membuat model yang akan memanggil tabel buku yang ada di dalam database. Silahkan buat file baru di App/Model dan beri nama file tersebut dengan nama "M_Buku.php" dan ketikkan script programnya sebagai berikut:

M_Buku.php.php

<?php

namespace App\Models;

use CodeIgniter\Model;

class M_Buku extends Model
{
    protected $table    = 'buku';
    protected $id       = 'kode_buku';

    protected $allowedFields = ['judul', 'penulis', 'penerbit', 'thn_terbit'];
}


3. Membuat Controllers

    Contorller berguna untuk mengontrol data yang akan di tampilkan kepada user. Untuk mengotrol data buku anda dapat membuat controller buku. Silahkan buat file baru di App/Controller dan beri nama file tersebut "Buku.php", selanjutnya ketikkan program berikut:

<?php

namespace App\Controllers;

use App\Models\M_Buku; // Menghubungkan ke Model
class Buku extends BaseController
{
    public function __construct()
    {
        $this->mBuku = new M_Buku();
    }
    public function index(): string
    {
        $data = [
            'title' => 'Data Buku',
            'buku' => $this->mBuku->findAll()
        ];
        return view('Buku/v_buku', $data);
    }
}

 

 Terdapat fungsi __Construct() diatas, yang mana kita akan menjadikan Class Model menjadi objek dengan nama objek "mBuku". Perhatikan juga penulisan nama Class (buku). Penulisan namanya mengikuti nama dari file itu sendiri. Perhatikan juga huruf kapital yang anda gunakan.

Nah sampai disini kita telah membuat Controller untuk masing-masing tabel. Selanjutnya apa lagi? Sekarang mari kita buat desain masing-masing tabel.


4. Create Data

   Buatlah folder Buku, USer, Peminjaman dan Pengembalian di dalam folder views . Perhatikan struktur programnya seperti berikut:

📂Views

        ðŸ“‚Buku

                ðŸ®º v_buku.php


Selanjutnya kita akan membuat desain halaman untuk menampilkan data. Tambahkan satu file baru dengan nama "v_buku.php" didalam foder Buku. Ketikkan scirpt berikut:

<?php
$this->extend('templates/temp_main');
$this->section('konten');
?>
<div class="main">
    <a href="" class="btn btn-info">Tambah</a>
    <hr>
    <table class="table">
        <thead>
            <tr>
                <th>NO</th>
                <td>KODE BUKU</td>
                <td>JUDUL BUKU</td>
                <td>PENULIS</td>
                <td>PENERBIT</td>
                <td>TAHUN TERBIT</td>
                <td>OPSI</td>
            </tr>
        </thead>
        <tbody>
            <?php
            $no = 1;
            foreach ($buku as $b) : ?>
                <tr>
                    <td><?= $no++ ?></td>
                    <td><?= $b['kode_buku'] ?></td>
                    <td><?= $b['judul'] ?></td>
                    <td><?= $b['penulis'] ?></td>
                    <td><?= $b['penerbit'] ?></td>
                    <td><?= $b['thn_terbit'] ?></td>
                    <td>
                        <a href="<?= base_url('buku/edit/' . $b['kode_buku']) ?>" class="btn btn-warning btn-sm">Edit</a>
                        <a href="<?= base_url('buku/hapus/' . $b['kode_buku']) ?>" class="btn btn-danger btn-sm" onclick="return confirm('Yakin Menghapus Data?'); ">Hapus</a>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<?= $this->endSection();

Silahkan uji coba program.


5. Insert Data 

    Selesai sudah kita menampilkan data buku, Selanjutnya kita akan mencoba membuat atau menambahkan data ke dalam tabel/database. Masih di halaman v_buku.php anda tambahkan action untuk link tambah seperti berikut:

<div class="main">
    <a href="<?= base_url('buku/tambah')?>" class="btn btn-info">Tambah</a>

...................


 Masuk ke Rooters dan tambahkan script berikut:

$routes->get('/',           'Home::index');
$routes->get('buku',        'Buku::index');
$routes->get('buku/tambah', 'Buku::tambah');

    Sekarang buat function tambah di file Buku.php tepatnya di bawah function index(). Berikut script nya:

    public function tambah()
    {
        return view('Buku/tambah.php');
    }

    Selanjutnya anda masuk ke dalam folder buku dan buat file baru dengan nama "tambah.php". Copy dan pastekan scrip berikut:

<?php
$this->extend('templates/temp_main');
$this->section('konten');
?>
<div class="main">
    <a href="<?= base_url('buku/tambah')?>" class="btn btn-info">Tambah</a>
    <hr>
    <table class="table">
        <thead>
            <tr>
                <th>NO</th>
                <td>KODE BUKU</td>
                <td>JUDUL BUKU</td>
                <td>PENULIS</td>
                <td>PENERBIT</td>
                <td>TAHUN TERBIT</td>
                <td>OPSI</td>
            </tr>
        </thead>
        <tbody>
            <?php
            $no = 1;
            foreach ($buku as $b) : ?>
                <tr>
                    <td><?= $no++ ?></td>
                    <td><?= $b['kode_buku'] ?></td>
                    <td><?= $b['judul'] ?></td>
                    <td><?= $b['penulis'] ?></td>
                    <td><?= $b['penerbit'] ?></td>
                    <td><?= $b['thn_terbit'] ?></td>
                    <td>
                        <a href="<?= base_url('buku/edit/' . $b['kode_buku']) ?>" class="btn btn-warning btn-sm">Edit</a>
                        <a href="<?= base_url('buku/hapus/' . $b['kode_buku']) ?>" class="btn btn-danger btn-sm" onclick="return confirm('Yakin Menghapus Data?'); ">Hapus</a>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<?= $this->endSection();

Tambah pada rooters seperti berikut:

$routes->get('buku',        'Buku::index');
$routes->get('buku/tambah', 'Buku::tambah');
$routes->get('buku/simpan', 'Buku::simpan'); //Tambah untuk roote simpan

Masuk ke file Buku. php dan buatlah function seperti berikut:

    public function simpan()
    {
        $data = [
            'kode_buku' => $this->request->getVar('kode'),
            'judul'     => $this->request->getVar('judul'),
            'penulis'   => $this->request->getVar('penulis'),
            'penerbit'  => $this->request->getVar('penerbit'),
            'thn_terbit' => $this->request->getVar('thn_terbit')
        ];
        $this->mBuku->save($data);
        return redirect()->to(base_url('buku'));
    }

    Silahkan jalankan program anda dan cobalah untuk menekan tombol tambah pada bagian atas tabel. Apakah data anda berhasil ditambah?


6. Update Data Buku

    Nah langkah ini kita akan mencoba untuk melakukan update terhadap data buku. Buka kembali file v_buku.php. Pada button Edit tambahkan link seperti berikut:

<a href="<?= base_url('buku/edit/' . $b['kode_buku']) ?>" class="btn btn-warning btn-sm">Edit</a>

 Buka Rooters dan buat jalur untuk file update dan edit seperti berikut:

$routes->get('buku/edit/(:enum)', 'Buku::edit/($1)');


Sekarang buat function edit di controller Buku seperti berikut:

    public function edit($id)
    {
        $data = [
            'buku' => $this->mBuku->where('kode_buku', $id)->first()
        ];
        return view('Buku/edit.php', $data);
    }


Buat file baru di dalam folder Buku dengan nama edit.php. Tambahkan script berikut:


<?php
$this->extend('templates/temp_main');
$this->section('konten');
?>
<form action="<?= base_url('buku/update/' . $buku['kode_buku']) ?>" class="p-3">
    <div class="row m-3">
        <div class="col-3">Input Judul Buku</div>
        <div class="col"><input type="text" class="form-control" name="judul" value="<?= $buku['judul'] ?>"></div>
    </div>

    <div class="row m-3">
        <div class="col-3">Input Penulis</div>
        <div class="col"><input type="text" class="form-control" name="penulis" value="<?= $buku['penulis'] ?>"></div>
    </div>

    <div class="row m-3">
        <div class="col-3">Input Penerbit</div>
        <div class="col"><input type="text" class="form-control" name="penerbit" value="<?= $buku['penerbit'] ?>"></div>
    </div>

    <div class="row m-3">
        <div class="col-3">Input Tahun Terbit</div>
        <div class="col"><input type="number" class="form-control" name="thn_terbit" value="<?= $buku['thn_terbit'] ?>"></div>
    </div>

    <div class="row m-3">
        <div class="col-3"></div>
        <div class="col">
            <button class="btn btn-danger" type="reset">Reset</button>
            <button class="btn btn-warning" type="submit">Edit</button>
        </div>
    </div>
</form>

<?= $this->endSection();

Kembali ke Rooters dan tambahkan script berikut:

$routes->get('buku/edit/(:num)', 'Buku::edit/$1');
$routes->get('buku/update/(:num)', 'Buku::update/$1');

Buat function update di Controllers buku. Berikut Scriptnya:

    public function update($id)
    {
        $data = [
            'kode_buku' => $this->request->getVar('kode'),
            'judul'     => $this->request->getVar('judul'),
            'penulis'   => $this->request->getVar('penulis'),
            'penerbit'  => $this->request->getVar('penerbit'),
            'thn_terbit' => $this->request->getVar('thn_terbit')
        ];
        $this->mBuku->set($data)->where('kode_buku', $id)->update();
        return redirect()->to(base_url('buku'));
    }


7. Hapus Data Buku:

Buka file v_buku.php dan pastikan anda menambah script berikut di button Hapus:

<a href="<?= base_url('buku/hapus/' . $b['kode_buku']) ?>" class="btn btn-danger btn-sm" onclick="return confirm('Yakin Menghapus Data?'); ">Hapus</a>

Masuk ke Routers dan tambahkan script untuk hapus:

$routes->get('buku/hapus/(:num)', 'Buku::hapus/$1');


Terakhir masuk ke controller buku dan tambahkan script hapus seperti berikut:

    public function hapus($id)
    {
        $this->mBuku->where('kode_buku', $id)->delete();
        return redirect()->to(base_url('buku'));
    }


    Nah, sekarang coba anda jalankan projek anda. Silahkan lakukan tambah,update dan hapus data. Sebagai latihan anda dapat membuat tampilan untuk menampilkan tabel user. Adapun bentuk tabel dari user adalah sebagai berikut:

CREATE TABLE `user` (
  `id_user` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `nama_lengkap` varchar(100) NOT NULL,
  `hp` varchar(15) NOT NULL,
  `alamat` text NOT NULL,
  `level` enum('admin','user') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

INSERT INTO `user` (`id_user`, `username`, `password`, `email`, `nama_lengkap`, `hp`, `alamat`, `level`) VALUES
(1, 'admin', 'admin', 'admin@gmail.com', 'administrator', '0988888888', 'padang panjang', 'admin');

ALTER TABLE `user`
  ADD PRIMARY KEY (`id_user`);

ALTER TABLE `user`
  MODIFY `id_user` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

    Sekian artikel kita kali ini tentang bagaimana cara membuat dan mengelola data buku dengan metode CRUD. Anda dapat mengulang-ulang langkah diatas agar lebih paham lagi.


Tags:

Post a Comment

0Comments

Post a Comment (0)