بِسْمِ اللَّهِ Mudah-mudahan tutorial Codeigniter 3 – Membuat layout dengan template 2 ini bermanfaat
Pada tutorial kali ini saya mencoba berbagi membuat layout dengan template pada Codeigniter 3. Template yang akan digunakan masih sama dengan Codeigniter 4 – Membuat layout dengan template yaitu SB Admin 2. Tutorial ini bisa dikatakan melanjutkan Codeigniter 3 – Instalasi dan membuat layout dengan template yang nantinya akan memudahkan dalam coding selanjutnya. Dimana jika ada perubahan terkait template view cukup kita update pada bagian tertentu saja.
Persiapan Codeigniter 3 – Membuat layout dengan template 2
Pastikan sudah ada ini:
File-file Codeigniter 3 yang bisa di download disini
Editor yang digunakan adalah Visual Studio Code, bisa di download disini
Project Codeigniter, untuk membuatnya bisa dilihat tutorial Codeigniter 3 – Instalasi dan membuat layout dengan template
Kemudian template website, disini saya menggunakan template dengan bootstrap yaitu SB Admin 2 atau kalau sudah ada template sendiri juga tidak masalah.
Pertama
Kelompokkan template menjadi bagian-bagian sebagai berikut. Pengelompokan akan seperti pada gambar diatas yang file-filenya akan disimpan kedalam satu folder agar lebih terstruktur.
Sesuaikan dengan template anda. Biasanya pada template sudah diberikan batas-batas berupa blok comment. Cara yang paling mudah adalah urutkan mulai dari bagian yang paling atas.
Kedua
Buat folder sebut saja nama foldernya partial yang lokasi lengkapnya ada di application\views\partial
1. title_meta
Buka file template yang sudah pernah dibuat pada tutorial sebelumnya, kemudian cut mulai dari bagian <meta…> sampai dengan title seperti script berikut
<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="">
<title><?= $title; ?></title>
Kemudian simpan dengan nama title_meta.php di folder application\views\partial
Ganti script yang sudah di cut tadi dengan script berikut
<?php $this->load->view("partial/title_meta.php") ?>
2. head_css
Cut bagian css yaitu bagian <link…> seperti script berikut
<!-- Custom fonts for this template-->
<link href="<?= base_url() ?>/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="<?= base_url() ?>/assets/css/sb-admin-2.min.css" rel="stylesheet">
Kemudian simpan dengan nama head_css.php di folder application\views\partial
Ganti script yang sudah di cut tadi dengan script berikut
<?php $this->load->view("partial/head_css.php") ?>
4. sidebar
Cari saja bagian <!– Sidebar –> sampai dengan <!– End of Sidebar –>, kemudian pilih dan cut. Scriptnya sebagai berikut:
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="<?= base_url() ?>">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="<?= base_url() ?>">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<?php
if ($this->ion_auth->logged_in()) {
?>
<!-- Heading -->
<div class="sidebar-heading">
Master Data
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Produk</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="<?= base_url() ?>product">Daftar/List</a>
<a class="collapse-item" href="<?= base_url() ?>product/add">Tambah</a>
</div>
</div>
</li>
<?php
}
?>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
Kemudian simpan dengan nama sidebar.php di folder application\views\partial
Ganti script yang sudah di cut tadi dengan script berikut
<?php $this->load->view("partial/sidebar.php") ?>
5. footer
Cari saja bagian <!– Footer –> sampai dengan <!– End of Footer –>, kemudian pilih dan cut. Scriptnya sebagai berikut:
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2020</span>
</div>
</div>
</footer>
<!-- End of Footer -->
Kemudian simpan dengan nama footer.php di folder application\views\partial
Ganti script yang sudah di cut tadi dengan script berikut
<?php $this->load->view("partial/footer.php") ?>
6. js
Yang terakhir yaitu bagian paling bawah disana ada kumpulan javascript biasanya ditandai <script…>, kemudian pilih dan cut. Scriptnya sebagai berikut:
<!-- Bootstrap core JavaScript-->
<script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="<?= base_url() ?>/assets/js/sb-admin-2.min.js"></script>
Kemudian simpan dengan nama js.php di folder application\views\partial
Ganti script yang sudah di cut tadi dengan script berikut
<?php $this->load->view("partial/js.php") ?>
Ketiga
Seteleh semua dipindah, kurang lebih struktur file dan foldernya seperti gambar berikut
Akhirnya
Silakan dicoba pada browser, kurang lebih hasilnya seperti tampilan berikut
Demikian tutorial Codeigniter 3 – Membuat layout dengan template 2. Silakan dilanjutkan dan dikembangkan lagi.
Mudah-mudahan tutorial ini bermanfaat.
Next time I read a blog, Hopefully it wont fail me as much as this particular one. I mean, Yes, it was my choice to read, however I really believed you would have something helpful to talk about. All I hear is a bunch of whining about something you could fix if you werent too busy searching for attention.