Tutorial CRUD CodeIgniter 4 Dengan Bootstrap #3 : Menampilkan Data - Halo teman-teman semuanya, pada tutorial kali ini kita semua akan belajar bagaimana cara menampilkan data dari database di CodeIgniter 4.
Pada tutorial menampilkan data kali ini, kita semua akan menggunakan Framework Bootstrap 4 untuk tampilannya, disini kita akan menggunakan CDN sebagai resourse file CSS Bootstrapnya, pastikan teman-teman terkoneksi dengan internet.
Langkah 1 - Membuat Model
Sekarang teman-teman buat sebuah file baru dengan nama PostModel.php di dalam folder app/Models/ dan silahkan masukkan kode dibawah ini :
<?php namespace App\Models;
use CodeIgniter\Model;
class PostModel extends Model
{
/**
* table name
*/
protected $table = "posts";
/**
* allowed Field
*/
protected $allowedFields = [
'title',
'content'
];
}
protected $table = "posts";
Kode diatas digunakan untuk mendefinisikan nama tabel yang akan digunakan di dalam model PostModel.php
protected $allowedFields = [
'title',
'content'
];
Dan untuk kode diatas, digunakan sebagai mass assigment coloumn yang boleh diinsertkan data ke dalam database.
Langkah 2 - Membuat Controller
Sekarang, silahkan teman-teman buat sebuah file baru dengan nama Post.php di dalam folder app/Controllers/ dan masukkan kode berikut ini :
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\PostModel;
class Post extends Controller
{
/**
* index function
*/
public function index()
{
//model initialize
$postModel = new PostModel();
//pager initialize
$pager = \Config\Services::pager();
$data = array(
'posts' => $postModel->paginate(2, 'post'),
'pager' => $postModel->pager
);
return view('post-index', $data);
}
}
Langkah 3 - Membuat View
Langkah selanjutnya kita akan membuat sebuah file dengan nama post-index.php di dalam folder app/Views/ dan silahkan teman-teman masukkan kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<title>Data Post - santriKoding.com</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<?php if(!empty(session()->getFlashdata('message'))) : ?>
<div class="alert alert-success">
<?php echo session()->getFlashdata('message');?>
</div>
<?php endif ?>
<a href="<?php echo base_url('post/create') ?>" class="btn btn-md btn-success mb-3">TAMBAH DATA</a>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>TITLE</th>
<th>CONTENT</th>
<th>AKSI</th>
</tr>
</thead>
<tbody>
<?php foreach($posts as $key => $post) : ?>
<tr>
<td><?php echo $post['title'] ?></td>
<td><?php echo $post['content'] ?></td>
<td class="text-center">
<a href="<?php echo base_url('post/edit/'.$post['id']) ?>" class="btn btn-sm btn-primary">EDIT</a>
<a href="<?php echo base_url('post/delete/'.$post['id']) ?>" class="btn btn-sm btn-danger">HAPUS</a>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<?php echo $pager->links('post', 'bootstrap_pagination') ?>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Langkah 4 - Custom Template Pagination di CodeIgniter 4
Pada tahap kali ini kita semua akan belajar bagaimana cara mengubah template pagination di CodeIgniter 4 dengan Bootstrap 4.
Silahkan teman-teman buat folder baru dengan nama Pagers di dalam folder app/Views/ dan di dalam folder Pagers tersebut, silahkan teman-teman buat file baru dengan nama bootstrap_pagination.php dan masukkan kode berikut ini :
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
<ul class="pagination">
<?php if ($pager->hasPrevious()) : ?>
<li class="page-item">
<a href="<?= $pager->getPrevious() ?>" class="page-link" aria-label="<?= lang('Pager.previous') ?>">
<span>«</span>
</a>
</li>
<?php endif ?>
<?php foreach ($pager->links() as $link) : ?>
<li <?= $link['active'] ? 'class="active page-item"' : 'class="page-item"' ?>>
<a href="<?= $link['uri'] ?>" class="page-link">
<?= $link['title'] ?>
</a>
</li>
<?php endforeach ?>
<?php if ($pager->hasNext()) : ?>
<li class="page-item">
<a href="<?= $pager->getNext() ?>" aria-label="<?= lang('Pager.next') ?>" class="page-link">
<span aria-hidden="true">»</span>
</a>
</li>
<?php endif ?>
</ul>
</nav>
langkah terakhir, silahkan teman-teman registerkan style yang sudah kita buat tadi di dalam config. Sekarang teman-teman buka file app/Config/Pager.php
public $templates = [
'default_full' => 'CodeIgniter\Pager\Views\default_full',
'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
'default_head' => 'CodeIgniter\Pager\Views\default_head',
];
Ubah menjadi seperti berikut ini :
public $templates = [
'default_full' => 'CodeIgniter\Pager\Views\default_full',
'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
'default_head' => 'CodeIgniter\Pager\Views\default_head',
'bootstrap_pagination' => 'App\Views\Pagers\bootstrap_pagination',
];
Langkah 5 - Menjalankan Aplikasi
php spark serve
Untuk mengaksesnya, teman-teman silahkan ketik http://localhost:8080/post
Maka kurang lebih hasilnya seperti gambar dibawah ini :
DOWNLOAD SOURCE CODE
Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CodeIgniter4-CRUD
KESIMPULAN
Pada tutorial kali ini kita semua sudah belajar bagaimana cara membuat Model, Controller, View dan membuat Custom Template Pagination di CodeIgniter 4.
Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.
Terima Kasih