Belajar CodeIgniter 4 #6 : Menampilkan Data

By /

Halo semuanya, pada pembelajaran kali ini kita akan belajar cara menampilkan data di codeigniter 4 menggunakan controller. Tapi sebelum itu, kita harus mengetahui terlebih dahulu apa itu controllers ?

Apa itu Controllers ?

Pada pembelajaran sebelumnya, kita sudah belajar konsep Models, Views, dan Controllers. Mungkin, sedikit saya bahas ulang bahwa Controllers memiliki tugas yaitu mengirim data ke model yang kemudian disimpan oleh model atau meminta data dari model yang kemudian diteruskan ke view untuk ditampilkan datanya.

Baca Juga

Belajar CodeIgniter 4 #3 : Memahami Konsep MVC

Terus bagaimana cara membuat controller di codeigniter 4 ? Tenang saja, caranya cukup mudah kok. Kita tinggal jalankan perintah php spark make:controller Blog di terminal.

Kemudian, codeigniter akan membuatkan controller dengan nama Blog di app/Controllers dan berikut isi dari controller yang telah kita buat barusan.

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class Blog extends BaseController
{
    public function index()
    {
    }
}

Menampilkan data di Controller

Sebelumnya kita telah belajar pengertian dari controllers dan routes. Untuk selanjutnya kita akan mencoba untuk menampilkan data dari Models melalui Controllers.

Pertama kita akan membuat variable protected $blogModel. Kemudian kita buat function __construct() seperti berikut.

protected $blogModel;

public function __construct()
{
    $this->blogModel = model(BlogModel::class);
}

Di dalam function __construct() ini nantinya digunakan untuk menggunakan Models dari blog. Tetapi pastika terlebih dahulu kalian sudah memanggilnya terlebih dahulu diatas class seperti berikut.

use App\Models\BlogModel;

Sekarang kita sudah bisa memanggil data yang ada di table blog. Caranya yaitu kita akan gunakan fungsi findAll() lalu kita masukkan ke dalam variable $blogs. Terakhir kita akan menggunakan var_dump() untuk menampilkan isi dari variable $blogs.

public function index()
{
      // get all blogs with model
      $blogs = $this->blogModel->findAll();

      var_dump($blogs);
}

Fungsi findAll() digunakan untuk mencari semua data yang ada ditable blog. Kalian bisa mengexplore lebih banyak fungsi lainnya seperti find($id) untuk menampilkan satu data dengan spesifikasi id.

Kita bisa langsung membuka browser lalu memasukan url http://localhost:8080/blog. Nantinya akan terdapat tampilan seperti dibawah ini.

cara menampilkan data di codeigniter 4

Menampilkan Data di Views

Setelah kita bisa menampilkan data di Controller, selanjutnya kita akan mencoba menampilkan data tersebut di Views melalui Controller.

Sebelumnya kita akan menggunakan bootstrap untuk membuat tampilan halaman. Pertama kita pisahkan file untuk bagian header dan footer dengan cara membuat folder di app/Views/ dengan nama templates. Di dalam folder tersebut kita buat 2 file yaitu header.php dan footer.php

Pada file header.php kita akan panggil bootstrap menggunakan cdn.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title><?= $title ?></title>
</head>

<body>

$title ini merupakan data yang didapat dari Contoller. Selanjutnya kita akan memanggil bootstrap bundle di bagian footer.php

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

Kita telah membuat bagian header dan footer, selanjutnya kita bisa langsung mengisi content di dalam tag body.

Kita buat folder terlebih dahulu di app/Views/ dengan nama blogs. Di dalam folder tersebut kita buat file baru dengan nama index.php

Disini kita akan menampilkan seluruh data blogs yang ada pada database seperti cara sebelumnya. Tetapi, kita mempercantik halamannya dengan menggunakan bootstrap.

 <!-- Blogs-->
 <section class="blog-section" id="blog">
   <div class="container">
     <h2 class="text-center mt-0">Recent Blogs</h2>
     <a href="/blog/create" class="btn btn-primary">Create</a>
     <hr class="divider" />
     <div class="row gx-4 gx-lg-5">
       <?php foreach ($blogs as $blog) : ?>
         <div class="col-lg-3 col-md-6 text-center">
           <div class="card mt-5">
             <div class="card-header">
               <h3 class="card-title"><?= esc($blog['blog_title']) ?></h3>
             </div>
             <div class="card-body">
               <p class="card-text"><?= esc($blog['blog_description']) ?></p>
             </div>
             <div class="card-footer">
               <a href="/blog/view/<?= $blog['blog_id'] ?>" class="btn btn-primary">View</a>
             </div>
           </div>
         </div>
       <?php endforeach; ?>
     </div>
   </div>
 </section>

Kita sudah membuat halaman untuk menampilkan seluruh blogs, selanjutnya kita perlu memperbarui Controller agar dapat mengirimkan data ke file views yang barusan kita buat.

<?php
public function index()
{
      $data = [
            'title' => 'View All blog',
            'blogs' => $this->blogModel->findAll(),
      ];

      echo view('templates/header', $data);
      echo view('blogs/index', $data);
      echo view('templates/footer');
}

Pada code diatas kita membuat array di variable $data yang berisi kumpulan data yang nantinya akan kita kirimkan ke Views. Karena di bagian footer tidak perlu menggunakan data apapun maka kita tidak perlu menambahkan variable $data.

Menambahkan Routes

Terakhir, kita perlu melakukan URI Routing agar URL nya berubah ke http://localhost:8080/blog. Pertama kita buka file app/Config/Routes.php

Terus pada bagian Route Definitions kita menambahkan routes baru dengan method get.

$routes->get('/blog', 'Blog::index');
belajar codeigniter 4 menampilkan data

Menampilkan Single Data

Pada pembahasan sebelumnya, kita sudah bisa menampilkan semua data yang ada dalam database ke dalam Views.

Tapi bagaimana jika kita ingin menampilkan satu data saja ? Untuk caranya kurang lebih sama seperti diatas.

Pertama kita buat method baru di controller Blog dengan nama view. Di dalamnya akan berisi code berikut.

public function view($id)
{
      $data = [
          'title' => 'View Single blog',
          'blog' => $this->blogModel->find($id),
      ];

      echo view('templates/header', $data);
      echo view('blogs/view', $data);
      echo view('templates/footer');
}

Pada code diatas, kita akan menerima satu parameter yaitu $id yang merupakan id/identifier untuk data blog kita.

id yang kita gunakan bersifat unique jadi tidak akan ada data yang memiliki id yang sama. Jadi kita bisa gunakan id untuk mencari data spesifik yang akan ditampilkan.

Setelah itu, kita buat tampilan yang akan menampilkan single data blog. Kita bisa buat file di app/Views/blogs/view.php. Untuk isi codenya bisa contoh dibawah ini.

<section class="blog-section" id="blog">
   <div class="container">
     <div class="row gx-4 gx-lg-5">
       <div class="col-lg-8 col-md-6">
         <h3 class="card-title"><?= esc($blog['blog_title']) ?></h3>
         <p class="card-text"><?= esc($blog['blog_description']) ?></p>
         <a href="/blog" class="btn btn-primary">Back</a>
       </div>
     </div>
</section>

Terakhir kita akan mendefinisikan routes untuk single data. Kita buka terlebih dahulu app/Config/Routes.php dan cari bagian Route Definitions, kita akan mendefinisikan routes di dalam sana. Seperti berikut ini.

$routes->get('blog/view/(:num)', 'Blog::view/$1');

Penutup

Kita telah belajar cara menampilkan data di codeigniter 4 melalui controller. Selain itu, kita juga telah membahas pengertian dari controller itu sendiri. Kalian bisa mengembangkan lagi controller yang telah dibuat barusan dengan menambahkan method baru.

Scroll to Top