Blog Development and Profile Management Using CodeIgniter4 (Part 4-Home Blog Page Setup)
Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!
Pada tahap ini, kita akan membuat halaman utama blog yang menampilkan postingan sesuai dengan akun pengguna yang sedang aktif. Dengan fitur CRUD (Create, Read, Update, Delete) yang terhubung dengan sesi pengguna, hanya blog yang diunggah oleh pengguna tersebut yang akan muncul. Pagination juga diimplementasikan agar setiap pengguna bisa melihat data secara bertahap dan lebih mudah dijelajahi. Hal ini memastikan tampilan blog menjadi lebih rapi dan mudah dikelola, terutama ketika jumlah postingan terus bertambah.
A. Persiapan Tools
- Pada aplikasi XAMPP pastikan mengaktifkan Module Apache dan MySQL dengan mengklik tombol Start
- Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge pastikan sudah membuka url berikut: localhost/myblog-nama-kelas/public
localhost:8080 dengan metode php spark serve
- Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya
B. Langkah-langkah Pengaturan Halaman Blog
1. Persiapan View, Controller, & Route
View
- Bukalah folder app/Views
- Buatlah folder baru bernama admin di dalam folder app/Views
- Kemudian buatlah file baru bernama v_homepage.php di dalam folder app/Views/admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file v_homepage.php lalu simpan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= $title; ?></title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="<?php echo base_url('assets/adminlte') ?>/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?php echo base_url('assets/adminlte') ?>/dist/css/adminlte.min.css">
<!-- SweetAlert2 -->
<link rel="stylesheet" href="<?php echo base_url('assets/adminlte') ?>/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
<style>
.profile-image-sidebar {
width: 33px;
height: 33px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
}
.profile-user-image {
width: 100%;
height: auto;
object-fit: cover;
}
</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Fullscreen -->
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="https://www.instagram.com/ansdyi/" class="brand-link">
<img src="<?php echo base_url('assets/adminlte') ?>/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">My Blog</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="profile-image-sidebar">
<?php if (isset($profile) && !empty($profile)): ?>
<img class="profile-user-image" src="<?= base_url('./assets/uploads/' . esc($profile['profile_photo'])) ?>" alt="User profile picture">
<?php else: ?>
<img class="profile-user-image" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="User profile picture">
<?php endif; ?>
</div>
<div class="info">
<a href="<?= base_url('profile') ?>" class="d-block"><?= session()->get('username') ?></a>
</div>
</div>
<!-- SidebarSearch Form -->
<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-header">MENU</li>
<li class="nav-item">
<a href="<?= base_url('blogs') ?>" class="nav-link">
<i class="nav-icon fas fa-book"></i>
<p>
Blogs
</p>
</a>
</li>
<li class="nav-header">AUTH</li>
<li class="nav-item">
<a href="<?= base_url('logout') ?>" class="nav-link">
<i class="nav-icon fas fa-sign-out-alt"></i>
<p>
Logout
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<?php
if (isset($page)) {
echo $page;
}
?>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="float-right d-none d-sm-block">
<b>Version</b> 3.2.0
</div>
<strong>Copyright © 2024 Anisa Damayanti for 12th Grade of Software Engineering [Pemrograman Perangkat Bergerak].</strong> All rights reserved.
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
<!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<!-- jQuery -->
<script src="<?php echo base_url('assets/adminlte') ?>/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="<?php echo base_url('assets/adminlte') ?>/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url('assets/adminlte') ?>/dist/js/adminlte.min.js"></script>
<!-- SweetAlert2 -->
<script src="<?php echo base_url('assets/adminlte') ?>/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
$(function() {
var Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
$('document').ready(function() {
<?php if (session()->getFlashdata('title')) { ?>
Toast.fire({
icon: 'success',
title: '<?= session()->getFlashdata('title') ?>',
text: '<?= session()->getFlashdata('text') ?>',
});
<?php } ?>
});
});
</script>
<!-- bs-custom-file-input -->
<script src="<?php echo base_url('assets/adminlte') ?>/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
<script>
$(function() {
bsCustomFileInput.init();
});
</script>
</body>
</html>- Selanjutnya buatlah file baru bernama v_blog.php di dalam folder app/Views/admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file v_blog.php lalu simpan
<div class="content-wrapper">
<section class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1><?= $header; ?></h1>
</div>
<div class="col-sm-6 d-none d-sm-block">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item active"><?= $header; ?></li>
</ol>
</div>
</div>
</div>
</section>
<section class="content">
<div class="card">
<div class="card-header">
<h3 class="card-title">
<i class="nav-icon fas fa-book"></i>
Blogs
</h3>
<div class="card-tools">
<ul class="nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#tableBlog" data-toggle="tab">Table</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#createBlog" data-toggle="tab">Create</a>
</li>
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</ul>
</div>
</div><!-- /.card-header -->
<div class="card-body">
<div class="tab-content p-0">
<!-- Table Blog -->
<div class="card tab-pane card-secondary active" id="tableBlog">
<div class="card-header">
<h3 class="card-title">Table Blog</h3>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0" style="height: 400px;">
<table class="table table-head-fixed table-hover">
<thead>
<tr>
<th style="width: 50px;">No</th>
<th style="width: 200px;">Title</th>
<th style="width: 350px;">Image</th>
<th>Content</th>
<th style="width: 105px;" class="text-center">Option</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>
<img src="" height="170px" alt="Image">
</td>
<td></td>
<td>
<button class="btn-warning" data-toggle="modal" data-target="#updateData">
<i class="nav-icon fas fa-pen" aria-hidden="true"></i>
</button>
<a href="" onclick="return confirm('Are you sure?')">
<button class="btn-danger">
<i class="nav-icon fas fa-trash" aria-hidden="true"></i>
</button>
</a>
</td>
</tr>
</tbody>
<!-- Modal Form Update Data -->
<form action="" name="input" method="post" enctype="multipart/form-data">
<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Form Update Blog</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Card Input Data -->
<div class="card-body">
<div class="form-group">
<label for="formTitle">Title</label>
<input type="text" id="formTitle" placeholder="Title" class="form-control" name="title" value="" required>
</div>
<div class="form-group">
<label for="formContent">Content</label>
<textarea id="formContent" placeholder="Content" rows="5" class="form-control" name="content" required></textarea>
</div>
<div class="form-group">
<label for="formImage">Image</label>
<div class="input-group">
<div class="custom-file">
<label class="custom-file-label" for="formImage">Choose update image</label>
<input type="file" id="formImage" class="custom-file-input" name="image">
</div>
</div>
</div>
<div class="small-box bg-light text-center">
<label>Preview Old Image of</label>
<div class="inner">
<img src="" height="170px" alt="Image">
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>
</table>
</div>
<!-- /.card-body -->
<!-- Card Footer with Pagination and Info -->
</div>
<!-- Form Input Blog -->
<div class="card tab-pane card-secondary" id="createBlog">
<div class="card-header">
<h3 class="card-title">Form Input Blog</h3>
</div>
<!-- form start -->
<form action="" method="post" enctype="multipart/form-data">
<div class="card-body">
<div class="form-group">
<label for="formTitle">Title</label>
<input type="text" id="formTitle" placeholder="Title" class="form-control" name="title" required>
</div>
<div class="form-group">
<label for="formContent">Content</label>
<textarea id="formContent" placeholder="Content" rows="5" class="form-control" name="content" required></textarea>
</div>
<div class="form-group">
<label for="formImage">Image</label>
<div class="input-group">
<div class="custom-file">
<label class="custom-file-label" for="formImage">Choose image</label>
<input type="file" id="formImage" class="custom-file-input" name="image" required>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
<!-- /.card -->
</div>
</div><!-- /.card-body -->
</div>
<!-- /.card -->
</section>
</div>Controller
- Bukalah folder app/Controllers
- Buatlah file baru bernama BlogController.php di dalam folder app/Controllers
- Selanjutnya isi file BlogController.php dengan paragraf script berikut lalu simpan
Route
- Bukalah folder app/Config
- Ubah file Routes.php dengan mendaftarkan url baru untuk memanggil halaman blog lalu simpan
- Selanjutnya mencoba membuka halaman blog pada Web Browser dengan mengetikan url berikut: localhost/myblog-nama-kelas/public/blogs, kemudian tekan Enter
localhost:8080/blogs dengan metode php spark serve
2. Aktifasi Fungsi Create di Halaman Home Blog
Model
- Bukalah folder app/Models
- Buatlah file baru bernama BlogModel.php di dalam folder app/Models
- Kemudian isi file BlogModel.php dengan paragraf script berikut lalu simpan
Controller
- Bukalah folder app/Controllers
- Ubah file BlogController.php dengan mengimpor class BlogModel di bagian atas sebelum class BlogController [1]
- Kemudian tambahkan perintah inisialisasi dari BlogModel di dalam class BlogController [2]
- Selanjutnya buat function save() untuk menyimpan entries data, lalu simpan [3]
View
- Bukalah folder app/Views/admin
- Ubah file v_blog.php dengan menambahkan perintah mengirimkan data di dalam atribut action pada tag <form> lalu simpan
Route
- Bukalah folder app/Config
- Ubah file Routes.php dengan mendaftarkan url baru untuk memproses entries data ke dalam database dari halaman form input blog lalu simpan
- Selanjutnya pada halaman Home Blog klik tombol Create untuk mencoba melakukan proses menambahkan data blog baru
- Kemudian isi data (opsional) pada kolom Title, Content, dan Image lalu klik tombol Save
- Jika data blog berhasil disimpan maka akan muncul notifikasi sukses
- Data blog yang berhasil ditambahkan akan tersimpan di dalam database
- Foto yang berhasil ditambahkan akan tersimpan di dalam folder public/assets/uploads
3. Aktifasi Fungsi Read di Halaman Home Blog
Model
- Bukalah folder app/Models
- Ubah file BlogModel.php dengan menambahkan function baru di dalam class BlogModel lalu simpan
Controller
- Bukalah folder app/Controllers
- Ubah file BlogController.php dengan menambahkan atau mengubah beberapa perintah di dalam function index pada class BlogController lalu simpan
View
- Bukalah folder app/Views/admin
- Ubah file v_blog.php dengan menambahkan perintah menampilkan data di dalam kelompok tag <table> lalu simpan
- Kemudian Copy seluruh paragraf script berikut untuk menampilkan data menjadi beberapa halaman
<div class="card-footer d-flex justify-content-between align-items-center">
<!-- Showing Entries Info -->
<div>
<?php if ($pager['totalItems'] > 0): ?>
Showing <?= ($pager['perPage'] * ($pager['currentPage'] - 1) + 1) ?> to <?= min($pager['perPage'] * $pager['currentPage'], $pager['totalItems']) ?> of <?= $pager['totalItems'] ?> entries
<?php else: ?>
No entries to show.
<?php endif; ?>
</div>
<!-- Pagination -->
<?php if ($pager['totalItems'] > 0): ?>
<nav aria-label="Page navigation" class="ml-auto">
<ul class="pagination mb-0">
<!-- Previous Button -->
<?php if ($pager['currentPage'] > 1): ?>
<li class="page-item">
<a class="page-link" href="?page=<?= $pager['currentPage'] - 1 ?>">Previous</a>
</li>
<?php else: ?>
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<?php endif; ?>
<!-- Page Numbers -->
<?php for ($i = 1; $i <= $pager['totalPages']; $i++): ?>
<li class="page-item <?= ($i == $pager['currentPage']) ? 'active' : '' ?>">
<a class="page-link" href="?page=<?= $i ?>">
<?= $i ?>
</a>
</li>
<?php endfor; ?>
<!-- Next Button -->
<?php if ($pager['currentPage'] < $pager['totalPages']): ?>
<li class="page-item">
<a class="page-link" href="?page=<?= $pager['currentPage'] + 1 ?>">Next</a>
</li>
<?php else: ?>
<li class="page-item disabled">
<span class="page-link">Next</span>
</li>
<?php endif; ?>
</ul>
</nav>
<?php endif; ?>
</div>- Paste ke dalam file v_blog.php mengikuti tanda panah berikut, lalu simpan
- Jika berhasil mengikuti tahapan di atas, maka pada halaman Home Blog akan menampilkan data yang sudah tersimpan di database dan identitas halaman di dalam Table Blog
4. Aktifasi Fungsi Update di Halaman Home Blog
Controller
- Bukalah folder app/Controllers
- Ubah file BlogController.php dengan membuat function update() untuk memperbarui entries data, lalu simpan
View
- Bukalah folder app/Views/admin
- Ubah file v_blog.php dengan menambahkan perintah mengaktifkan proses edit di dalam atribut data-target
- Selanjutnya menambahkan perintah mengirim dan menampilkan data untuk diperbarui di dalam tag <form> lalu simpan
Route
- Bukalah folder app/Config
- Ubah file Routes.php dengan mendaftarkan url baru untuk memproses mengubah entries data ke dalam database dari modal form update blog lalu simpan
- Selanjutnya pada halaman Home Blog klik icon pencil untuk mencoba melakukan proses mengubah data blog
- Selanjutnya ubah data (opsional) pada kolom Title, Content, atau Image lalu klik tombol Update
- Jika data blog berhasil diubah maka pada halaman Home Blog akan muncul notifikasi sukses dan menampilkan data yang sudah diperbarui di dalam Table Blog
5. Aktifasi Fungsi Delete di Halaman Home Blog
Controller
- Bukalah folder app/Controllers
- Ubah file BlogController.php dengan membuat function delete() untuk menghapus entries data, lalu simpan
View
- Bukalah folder app/Views/admin
- Ubah file v_blog.php dengan menambahkan perintah mengaktifkan proses hapus di dalam atribut href lalu simpan
Route
- Bukalah folder app/Config
- Ubah file Routes.php dengan mendaftarkan url baru untuk memproses menghapus entries data di database dari halaman Home Blog lalu simpan
- Selanjutnya pada halaman Home Blog klik icon trash bin untuk mencoba melakukan proses menghapus data blog
- Jika muncul pertanyaan di bawah ini, klik Ok
- Jika data blog berhasil dihapus maka pada halaman Home Blog akan muncul notifikasi sukses, dan data beserta identitas halaman yang sebelumnya muncul akan hilang di dalam Table Blog
Anisa Damayanti
a founder of december skies code, a software engineering teacher, and a lifelong learner who just tries her best at whatever she does. let's work together!
You May Also Like
Laundry Management Website (Part 3-Static and Dynamic Homepage Admin)
Laundry Management Website (Part 13-Multiple Role Based Authentication for Login)
