View dan Insert Data di Code Igniter 4 dan Memulai Membuat Web Sederhana (P.2)

View dan Insert Data di Code Igniter 4 dan Memulai Membuat Web Sederhana (P.2) - Halo sobat Sidat.ID, sebelumnya kita sudah berhasil untuk instalasi Code Igniter 4 dan juga sudah membuat tampilan sederhana. Buat sobat yang belum mengikuti seri sebelumnya, bisa di klik disini. Kali ini kita akan lanjutkan kembali mebua tweb sederhana kita ke tahap view data dan insert data.

Membuat Database Buku

Untuk memunculkan data, kita harus memiliki database yang menyimpan data. Jadi pertama kita akan membuat sebuagh database yang akan menyimpan data buku.

Sobat bisa mengaktifkan XAMPP dan menjalankan service Apache dan MySQL. Selanjutnya sobat bisa mengakses localhost/phpmyadmin di browser masing-masing.

Sobat buat sebuah database untuk meyimpan data buku, pada contoh berikut akan dibuat sebuah database dengan nama BOOKLIB. Dalam database booklib kemudian kita buat sebuah data tabel dengan nama tb_book. dengan field-field berikut.

• id (int , primary key, auto increment) : kita gunakan untuk menyimpan data id buku  
• title (varchar) : kita gunakan untuk meyimpan data judul buku
• slug (varchar) : kita gunakan untuk meyimpan data slug judul buku
• author (varchar) : kita gunakan untuk meyimpan data pengarang buku
• publisher (varchar) : kita gunakan untuk meyimpan data penerbit buku
• category (varchar) : kita gunakan untuk meyimpan data kategori dari buku
• cover (varchar) : kita gunakan untuk meyimpan data sampul buku
• created_at (datetime) : kita gunakan untuk meyimpan data kapan data tersebut 
• updated_at (datetime) : kita gunakan untuk meyimpan data kapan data tersebut diupdate

tb_book di database booklib

Merubah settingan Database di .env

Untuk mengkoneksikan coding kita dengan database, kita perlu merubah setting di file .env dan cari pada bagian DATABASE. Sobat ubah pada bagian berikut ini :

• database.default.hostname = localhost
• database.default.database = booklib
• database.default.username = root
• database.default.password = 
• database.default.DBDriver = MySQLi 

yang perlu sobat ubah adalah, menghilangkan coment # , kemudian ubah hostname , database sesuaikan dengan nama database sobat. Kalau memang sobat menggunakan password, sertakan juga passwordnya.

Membuat tampilan Menampilkan Data Buku

Pertama, kita akan ubah dahulu tampilan navbarnya  di file Views\template\v_navbar.php sedikit ya sob. Kita akan berikan menu dropdown INFO yang memuat About dan Contact. Kita juga menambahkan menu Book List sebagai navigasi untuk menampilkan data buku. Sobat bisa ganti isi code dari file navbar sebelumny menjadi seperti berikut.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">BOOKLIB</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">

                <!-- kalau menggunakan xampp, ubah "/" menjadi <?= base_url('/') ?> -->
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/books">Book List</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="info" data-toggle="dropdown">
                        Info
                    </a>
                    <div class="dropdown-menu" aria-labelledby="info">
                        <a class="dropdown-item" href="/home/about">About</a>
                        <a class="dropdown-item" href="/home/contact">Contact</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</nav>

penambahan menu Book List dan meu dropdown

Untuk membuat dropdown menu, di bootstrap sobat bisa menggunakan class="dropdown-menu". Sobat perhatikan pada code <a class="nav-link" href="/books">Book List</a> .

Pada kode tersebut, kita akan memanggil controller books method index ketika kita mengklik menu Book List di navbar.

Sekarang kita buat controllernya di Controllers kemudian buat new file dengan nama Books.php. Sobat bisa copy code berikut kedalamnya :

<?php

namespace AppControllers;

use AppModelsTb_bookModel; //namespace memanggil model Tb_bookModel untuk $bookModel

class Books extends BaseController
{
    protected $Tb_bookModel;
    public function __construct()
    {
        //konek pakai model, dengan instansiasi kelas model di semua method ini
        $this->Tb_bookModel = new Tb_bookModel();
    }

    public function index()
    {
        //$bookData = $this->Tb_bookModel->query("Select * From tb_book");
        $data = [
            'title' => 'BOOK LIST',
            'book' => $this->Tb_bookModel->getBook()
        ];

        return view('books/v_books', $data);
    }

    public function detail($slug)
    {

        $data = [
            'title' => 'BOOK DETAIL',
            'book' => $this->Tb_bookModel->getBook($slug)
        ];

        if (empty($data['book'])) {
            throw new CodeIgniterExceptionsPageNotFoundException('The Book' . $slug . 'is can not find');
        }
        return view('books/v_bookdetail', $data);
    }

Dalam controller Books, kita sudah punya method index dan juga detail. Method index akan menampilkan data buku yang diambil dari database, kemudian method detail akan kita gunakan untuk melihat detail data buku yang kita cari di database berdasarkan slug.

Slug yang dimaksud disini adalah judul dari buku, yang tanda spasi kita ubah menjadi -. Misal judul bukunya : Serba Serbi Binatang Gurun , jadi slug ini akan merubah tersebut menjadi serba-serbi-binatang-gurun. Semuanya disimpan dalam huruf kecil. Slug disimpan pada tabel tb_book di field slug.

Sekarang kita buat Model Tb_bookModel yang akan digunakan oleh controller Books method index dan detail. Modal kita buat di App\Models\Tb_bookModel.php. Kemudian sobat bisa ketikkan code berikut di file Tb_bookModel .

<?php

namespace AppModels;

use CodeIgniterModel;

class Tb_bookModel extends Model
{
    protected $table = 'tb_book';
    protected $useTimestamps = true;
    protected $allowedFields = ['title', 'slug', 'author', 'publisher', 'category', 'cover'];

    public function getBook($slug = false)
    {
        if ($slug == false) {
            return $this->findAll();
        }

        return $this->where(['slug' => $slug])->first();
    }
}

Dari kode di Tb_bookModel, kita akan menggunakan tabel tb_book yang kita deklarasikan di protected $table = 'tb_book';. Untuk menampilkan data, kita membuat function getBook. Jadi ketika parameter $slug = false (atau $slug kosong) maka kita gunakan fungsi di Code Igniter 4 yaitu return $this->findAll. Artinya, findAll ini adalah sebuah fungsi yang sama dengan SELECT * FROM tb_book.

Jika parameter $slug isi, maka kita return $this->where(['slug'] => $slug])->first(); Yang artinya, sama dengan SELECT * FROM tb_book WHERE slug = $slug;

Oke, sekarang kita sudah memiliki Controler dan Model, selanjutnya kita lengkapi viewnya dan membuat view baru di Views\books\v_book.php . Jadi di v_book.php kita akan memberikan tampilan data buku berupa tabel. Di file v_book.php ketikkan code berikut :

<?php echo $this->extend('template/v_template'); ?>

<?php echo $this->section('content'); ?>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>BOOKLIB | Book List</h1>
            <hr>
            <a href="/books/addbook" class="btn btn-primary mb-2">Add Book</a>
            <!-- menampilkan pesan telah berhasl menambahkan data -->
            <?php if (session()->getFlashdata('message')) { ?>
                <div class="alert alert-success" role="alert">
                    <?php echo session()->getFlashdata('message'); ?>
                </div>
            <?php } ?>
            <table class="table table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Book Title</th>
                        <th scope="col">Author</th>
                        <th scope="col">Publisher</th>
                        <th scope="col">Category</th>
                        <th scope="col">Cover</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $no = 1;
                    foreach ($book as $b) :
                        //foreach ($book->getResultArray() as $b) : 
                    ?>
                        <tr>
                            <th scope="row"><?php echo $no++ ?></th>
                            <td><?php echo $b['title']; ?></td>
                            <td><?php echo $b['author']; ?></td>
                            <td><?php echo $b['publisher']; ?></td>
                            <td><?php echo $b['category']; ?></td>
                            <td><img src="/img/<?php echo $b['cover']; ?>" alt="" class="sampul"></td>
                            <td>
                                <a href="/books/detail/<?php echo $b['slug']; ?>" class="btn btn-success">Details</a>
                                <a href="" class="btn btn-info">Update</a>
                                <a href="" class="btn btn-danger">Delete</a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?php echo $this->endSection('content'); ?>

Kita sudah mengirimkan data $book melalui controller Books. Selanjutnya, $book yang berupa array kita berikan perulangan foreach ($book as $b) dan tampilkan pada tag <td><?php echo $b['array_data']</td>. Setalah dilakukan perulangan terhadap semua data, maka data akan muncul pada tabel view di v_book.php.

tampilan data di tabel book list

Pada tabel terdapat Actions yang berisi tombol Details, Update, Delete. Kali ini kita bahas dahulu untuk bagian Details. 

Jadi details ini, ketika akan di klik maka muncul tampilan detail dari buku seperti berikut ini.

tampilan detail buku

Detail Buku akan kita uat menggunakan cards bootstrap. Jadi kita buat dulu view baru di Views\books\v_bookdetail.php dan ketikkan kode berikut ini :

<?php echo $this->extend('template/v_template'); ?>
<?php echo $this->section('content'); ?>
<div class="container">
    <div class="row">
        <div class="col">
            <h2 class="mt-2">"<?php echo $book['title'] ?>" Book Detail</h2>
            <div class="card mb-3" style="max-width: 800px;">
                <div class="row no-gutters">
                    <div class="col-md-4">
                        <img src="/img/<?php echo $book['cover']; ?>" class="card-img" alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title">Book Title : <?php echo $book['title']; ?></h5>
                            <p class="card-text"><b>Author : </b><?php echo $book['author']; ?></p>
                            <p class="card-text"><b>Publisher : </b><?php echo $book['publisher']; ?></p>
                            <p class="card-text"><b>Category : </b><?php echo $book['category']; ?></p>
                            <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
                            <a href="" class="btn btn-warning">Edit</a>
                            <a href="" class="btn btn-danger">Delete</a>
                            <a href="/books" class="btn btn-info">Back to List</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php echo $this->endSection('contetn'); ?>

Insert data Buku

Sekarang kita beralih ke tahap untuk insert data buku, yang sebelumnya kita sudah mampu untuk menampilkan data buku beserta detail buku tersebut. Sekarang kita akan melakukan proses insert data ke Database.

Pertama, kita buat terlebih dahulu view-nya. Kita buat di Views\books\v_addbook.php . Nama flenya ini adalah v_addbook.php, untuk nama bisa sobat sesuaikan dengan keinginan sendiri ya. Kemudia sobat copy code berikut di dalam file view-nya.

<?php echo $this->extend('template/v_template'); ?>
<?php echo $this->section('content'); ?>
<div class="container">
    <div class="row">
        <div class="col-8">
            <h2 class="my-3">Form Adding New Book</h2>
            <form action="/books/savebook" method="POST">
                <!--menghalangi pembajakan dari form lain -->
                <?php echo csrf_field(); ?>

                <div class="form-group row">
                    <label for="book_title" class="col-sm-3 col-form-label">Book Title</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="book_title" name="book_title" autofocus>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="author" class="col-sm-3 col-form-label">Author</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="pubisher" name="author">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="publisher" class="col-sm-3 col-form-label">Pubisher</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="pubisher" name="publisher">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="category" class="col-sm-3 col-form-label">Category</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="category" name="category">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="cover" class="col-sm-3 col-form-label">Book Cover</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="cover" name="cover">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-9">
                        <button type="submit" class="btn btn-primary">Adding New Book</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<?php echo $this->endSection('content'); ?>

Berikut ini adalah tampilan dari form insert data buku.

form insert data buku

Pada code form untuk input data buku, kita berikan action pada <form action="/books/savebook" method="POST">. Jadi data kita kirimkan ke method savebook dan kita akan memerlukan controller books dengan method savebook.

public function addbook()
    {
        $data = [
            'title' => "ADD NEW BOOK"
        ];

        return view('books/v_addbook', $data);
    }

    public function savebook()
    {
        $slug = url_title($this->request->getVar('book_title'), '-', true);
        $this->Tb_bookModel->save([
            'title' => $this->request->getVar('book_title'),
            'slug' => $slug,
            'author' => $this->request->getVar('author'),
            'publisher' => $this->request->getVar('publisher'),
            'category' => $this->request->getVar('category'),
            'cover' => $this->request->getVar('cover')
        ]);

        session()->setFlashdata('message', 'New Book added successfully.');

        return redirect()->to('/books');
    }
}

Pada controller Books.php kita juga menambahkan method addbook() yang berfungsi untuk memanggil view v_addbook ketika user mengklik tombol Add Book.

Kemudian pada method savebook() , kita akan ambil setiap inputan user menggunakan $this->request->getVar('field_input'). Jadi kita ambil data title, author, publisher,category, dan cover dari form input.  

Untuk menyimpannya, kita gunakan fungsi code igniter 4 yaitu : $this->Tb_bookModel->save.

Sedangkan untuk slug, kita akan buatkan dari judul bukunya. Spasi pada judul buku, kita akan ubah menjadi "-" dan dalam huruf kecil. Misalnya "Serba Serbi Baca" akan mejadi "serba-serbi-baca".

Sebagai tambahan, kita berikan pesan berhasil simpan data dengan session()->setFlashdata('message', 'New Boo added successfully'); ini bisa sobat custom ya.

Dan untuk field created_at dan updated_at kan kita berikan kodnisi di Models Tb_bookModel. Yaitu seprti berikut :

class Tb_bookModel extends Model
{
    protected $table = 'tb_book';
    protected $useTimestamps = true;
    protected $allowedFields = ['title', 'slug', 'author', 'publisher', 'category', 'cover'];

    public function getBook($slug = false)
    {
        if ($slug == false) {
            return $this->findAll();
        }

        return $this->where(['slug' => $slug])->first();
    }
}

 

Sobat perhatikan pada protected $allowedFIelds = ['title',.....,'cover']; jadi itu adalah field yang kita atur untuk diperbolehkan diisi oleh suser, sehingga nanti field created_at dan updated_at di database akan diisi otomatis oleh Code Igniter.

Dan berikut adalah contoh data yang sudah di insert ke database.

created_at dan updated_at di database tabel tb_book

Oke sobat, sekian dulu untuk pembahasan View dan Insert Data di Code Igniter 4 dan Memulai Membuat Web Sederhana (P.2) . Untuk tahap selanjutnya akan kita lanjutkan pada Upadate Data. Jadi buat sobat yang belum baca artikel sebelumnya untuk tahap yang pertama, bisa search di Sidat.ID.

Dan berikut ini adalah link download untuk tahap ke 2 ini. Apabila sobat ada pertanyaan, bisa ketikkan di kolom komentar di bawah ini ya. Sebisa mungkin, admin akan bantu menjawab untuk membantu sobat Sidat.ID. Terimakasih, salam Sidat.ID.

DOWNLOAD MATERI