Menambahkan Template pada Proyek Web Berbasis CodeIgniter 4 #2
Pada artikel sebelumnya kita sudah mempelajari bagaimana membuat view dengan menambahkan halaman sederhana yang menampilkan tulisan "Heloo...World.....". Nah, sekarang kita akan belajar bagaimana menambahkan template pada proyek website kita, dengan menggunakan CodeIgniter 4, namun sebelum ke pembahasan inti, saya akan mengajak anda untuk terlebih dahulu melakukan penyesuaian pada CodeIgniter 4 dan menyiapkan beberapa file yang diperlukan.
Daftar Isi
Mengkonfigurasi file di CodeIgniter 4
beberapa file yang akan kita konfigurasi: file env, file htaccess, file BaseController.php, silahkan buka teks editor anda, saya sendiri menggunakan Visual Studio Code.
Mengubah file env
File env (environment) pada CodeIgniter 4, mempunyai banyak fungsi, salah satunya adalah untuk mengkoneksikan proyek kita ke database. Kali pertama CodeIgniter 4 diinstall, settingan awal untuk env adalah production, sehingga ketika ada error pada aplikasi kita, pesan error-nya tidak muncul, padahal pesan error itu sangat diperlukan dalam memperbaiki modul atau bagian mana yang error. Untuk memunculkan pesan error maka kita harus mengubah bagian #CI_ENVIRONMENT = production, menjadi CI_ENVIRONMENT = development, berikut langkah-langkahnya:
- Ubah nama file env menjadi .env
- Buka file .env
- Pada baris ke 17, ganti bagian
#CI_ENVIRONMENT =productionmenjadiCI_ENVIRONMENT =development, lalu simpan (ctrl+s)
Membuat htaccess
- Buat file baru folder proyek CI4 atau root folder (proyek-web), lalu beri nama
.htaccess - Ketik atau copy kode berikut ini
- Simpan (ctrl+s)
textRewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L]
Menambahkan parameter pada BaseController.php
Untuk menambahkan parameter pada file BaseController.php, silahkan buka terlebih dahulu file tersebut pada folder app/Controllers/BaseController.php, lalu ubah pada bagian protected $helpers, tambahkan form,url dan auth, menjadi seperti berikut ini.
php
/**
* An array of helpers to be loaded automatically upon
* class instantiation. These helpers will be available
* to all other controllers that extend BaseController.
*
* @var array
*/
protected $helpers = ['form', 'url', 'auth'];
Mengubah Public Index
Untuk menghilangkan link index.php, maka kita perlu mengubah pada file /config/App.php, silahkan cari
php
public string $indexPage = 'index.php';
lalu hapus pada bagian index.php, sehingga menjadi seperti ini
php
public string $indexPage = ' ';
Mengunduh file template
Kita akan menggunakan template yang bernama RuangAdmin dapat diunduh di sini, template ini dibuat oleh Mas Indri Junanda. templatenya menggunakan Bootstrap 4 secara garis besar template ini bagus, ringan dan gratis (ini yang paling penting..:D). Terima kasih kepada Mas Indri yang sudah bersedia berbagi template ini.
Menambahkan template
- Setelah file template diunduh, silahkan ekstrak file tersebut. lalu copy folder pada template RuangAdmin mulai dari css s/d vendor.
- Buat folder baru pada proyek CodeIgniter di folder public, nama folder baru kita beri nama assets, lalu paste folder yang berasal dari RuangAdmin, pada folder Assets. Seperti gambar berikut ini.
- Langkah selanjutnya adalah membuat Contoller baru, kita beri nama User.php
- Buka file app/Config/Routers.php, lalu tambahkan kode berikut
- Buka file User.php lalu ketik atau copy code berikut ini
- Pada kode di atas, ketika controller User dibuka pada web browser, maka controller tersebut akan menampilkan sebuah halaman pada folder Views yaitu file user/index.php
- Maka langkah selanjutnya adalah membuat view user/index.php, buat folder user pada Views, lalu buat file index.php di dalam folder user, seperti gambar berikut
- Buka file user/index.php, lalu ketik atau copy kode berikut ini
- Paste pada file user/index.php, lalu jalankan perintah
php spark serve - Buka Web Browser lalu ketik http://localhost:8080/user. Jika tampil seperti pada gambar di bawah, berarti kita telah berhasil menambahkan template RuangAdmin pada proyek website.
phpphp spark make:controller user
php
$routes->get('/user', 'User::index');
php
<?php
namespace App\Controllers;
class User extends BaseController
{
public function index()
{
return view('user/index');
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="<?= base_url() ?>/assets/img/logo/logo.png" rel="icon">
<title>RuangAdmin - Blank Page</title>
<link href="<?= base_url() ?>/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets/css/ruang-admin.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon">
<img src="<?= base_url() ?>/assets/img/logo/logo2.png">
</div>
<div class="sidebar-brand-text mx-3">RuangAdmin</div>
</a>
<hr class="sidebar-divider my-0">
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<hr class="sidebar-divider">
<div class="sidebar-heading">
Features
</div>
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseBootstrap" aria-expanded="true" aria-controls="collapseBootstrap">
<i class="far fa-fw fa-window-maximize"></i>
<span>Bootstrap UI</span>
</a>
<div id="collapseBootstrap" class="collapse" aria-labelledby="headingBootstrap" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Bootstrap UI</h6>
<a class="collapse-item" href="alerts.html">Alerts</a>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="dropdowns.html">Dropdowns</a>
<a class="collapse-item" href="modals.html">Modals</a>
<a class="collapse-item" href="popovers.html">Popovers</a>
<a class="collapse-item" href="progress-bar.html">Progress Bars</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseForm" aria-expanded="true" aria-controls="collapseForm">
<i class="fab fa-fw fa-wpforms"></i>
<span>Forms</span>
</a>
<div id="collapseForm" class="collapse" aria-labelledby="headingForm" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Forms</h6>
<a class="collapse-item" href="form_basics.html">Form Basics</a>
<a class="collapse-item" href="form_advanceds.html">Form Advanceds</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTable" aria-expanded="true" aria-controls="collapseTable">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
<div id="collapseTable" class="collapse" aria-labelledby="headingTable" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Tables</h6>
<a class="collapse-item" href="simple-tables.html">Simple Tables</a>
<a class="collapse-item" href="datatables.html">DataTables</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="ui-colors.html">
<i class="fas fa-fw fa-palette"></i>
<span>UI Colors</span>
</a>
</li>
<hr class="sidebar-divider">
<div class="sidebar-heading">
Examples
</div>
<li class="nav-item active">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePage" aria-expanded="true" aria-controls="collapsePage">
<i class="fas fa-fw fa-columns"></i>
<span>Pages</span>
</a>
<div id="collapsePage" class="collapse show" aria-labelledby="headingPage" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Example Pages</h6>
<a class="collapse-item" href="login.html">Login</a>
<a class="collapse-item" href="register.html">Register</a>
<a class="collapse-item" href="404.html">404 Page</a>
<a class="collapse-item active" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="charts.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Charts</span>
</a>
</li>
<hr class="sidebar-divider">
<div class="version" id="version-ruangadmin"></div>
</ul>
<!-- Sidebar -->
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<!-- TopBar -->
<nav class="navbar navbar-expand navbar-light bg-navbar topbar mb-4 static-top">
<button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in" aria-labelledby="searchDropdown">
<form class="navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-1 small" placeholder="What do you want to look for?" aria-label="Search" aria-describedby="basic-addon2" style="border-color: #3f51b5;">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<span class="badge badge-danger badge-counter">3+</span>
</a>
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">
Alerts Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-primary">
<i class="fas fa-file-alt text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 12, 2019</div>
<span class="font-weight-bold">A new monthly report is ready to download!</span>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-success">
<i class="fas fa-donate text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 7, 2019</div>
$290.29 has been deposited into your account!
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-warning">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 2, 2019</div>
Spending Alert: We've noticed unusually high spending for your account.
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<span class="badge badge-warning badge-counter">2</span>
</a>
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">
Message Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="img/man.png" style="max-width: 60px" alt="">
<div class="status-indicator bg-success"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate">Hi there! I am wondering if you can help me with a problem I've been
having.</div>
<div class="small text-gray-500">Udin Cilok · 58m</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="img/girl.png" style="max-width: 60px" alt="">
<div class="status-indicator bg-default"></div>
</div>
<div>
<div class="text-truncate">Am I a good boy? The reason I ask is because someone told me that people
say this to all dogs, even if they aren't good...</div>
<div class="small text-gray-500">Jaenab · 2w</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks fa-fw"></i>
<span class="badge badge-success badge-counter">3</span>
</a>
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">
Task
</h6>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Design Button
<div class="small float-right"><b>50%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Make Beautiful Transitions
<div class="small float-right"><b>30%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item align-items-center" href="#">
<div class="mb-3">
<div class="small text-gray-500">Create Pie Chart
<div class="small float-right"><b>75%</b></div>
</div>
<div class="progress" style="height: 12px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">View All Taks</a>
</div>
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="img-profile rounded-circle" src="<?= base_url() ?>/assets/img/boy.png" style="max-width: 60px">
<span class="ml-2 d-none d-lg-inline text-white small">Maman Ketoprak</span>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- Topbar -->
<!-- Container Fluid-->
<div class="container-fluid" id="container-wrapper">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Blank Page</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./">Home</a></li>
<li class="breadcrumb-item">Pages</li>
<li class="breadcrumb-item active" aria-current="page">Blank Page</li>
</ol>
</div>
<div class="text-center">
<img src="<?= base_url() ?>/assets/img/think.svg" style="max-height: 90px">
<h4 class="pt-3">save your <b>imagination</b> here!</h4>
</div>
<!-- Modal Logout -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Ohh No!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to logout?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
<a href="login.html" class="btn btn-primary">Logout</a>
</div>
</div>
</div>
</div>
</div>
<!---Container Fluid-->
</div>
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>copyright © <script>
document.write(new Date().getFullYear());
</script> - developed by
<b><a href="https://indrijunanda.gitlab.io/" target="_blank">indrijunanda</a></b>
</span>
</div>
</div>
</footer>
<!-- Footer -->
</div>
</div>
<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="<?= base_url() ?>/assets/js/ruang-admin.min.js"></script>
</body>
</html>
Penjelasan
Kode pada Views user/index.php, saya salin dari file contoh pada folder ruang-admin, halaman yang ditampilkan di atas adalah contoh dari halaman blank.html
Setelah kode di-copy, lalu paste di file user/index.php, lalu sesuaikan dengan lokasi penyimpanan file css, javascript dan gambar. semua file tersebut sudah kita simpan pada folder public/assets, maka tinggal kita sesuaikan dengan menambahkan base_url() dan assets, contoh seperti pada kode berikut.
html
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
menjadi
html
<link href="<?= base_url() ?>/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
Setelah isi file disesuaikan, menjadi seperti pada kode di poin 7. Silahkan ditanyakan bila dari penjelasan di atas masih kurang jelas dan sesuai. Terima kasih.
Tidak ada komentar untuk "Menambahkan Template pada Proyek Web Berbasis CodeIgniter 4 #2"
Posting Komentar
Komentarnya dong cuuuy :D