Membuat library template sederhana di code igniter 3
Assalamualaikum wr. wb.
Hai sobat martin,
kalian yang berkecimpung dalam pembuatan aplikasi website mungkin sudah kenal dengan framework Code Igniter. Kalau belum kenal, coba kenalan dulu lah. Code igniter adalah salah satu framework PHP yang cukup populer. Aku sendiri suka dengan code igniter karena kesederhanaannya.
Sebenarnya ada framework PHP yang lebih populer, yaitu laravel. Tapi karena learning curvenya yang lumayan berat, akhirnya aku tetap stay di code igniter 3. Saat artikel ini dibuat, sebenarnya sudah ada update besar dari code igniter. Yaitu code igniter 4. Code igniter 4 membawa pembaharuan yang cukup signifikan. Bahkan aku sempat menyebutnya Code Igniter rasa laravel.
Bagus sih, tapi karena ternyata code igniter 4 belum support SQL Server, ya sudah aku memutuskan untuk mundur. Tetap stay di code igniter 3 sampai mereka support SQL Server.
Template sistem
Nah, Ketika kamu membangun sebuah web. Tentunya kamu berurusan dengan tampilan. Seringkali tampilan semua halamannya sama tapi berbeda di isinya. Misalnya halaman tentang kami dengan halaman tentang kamu. Headernya sama, footernya sama, menunya sama, yang membuat juga sama.
Dengan cara biasa, setiap membuat halaman, selalu saja header, menu, footer akan dicopy ke halaman baru. kalau bikin halaman baru lagi, proses itu kita ulangi lagi. Masalahnya di website nggak ada macro kayak di excel. Jadi proses ini akan kita ulangi setiap membuat halaman.
Bayangkan juga kalau kamu mau mengubah halaman footer, misalnya design by martin diganti dengan design with love, cuma mengganti beberapa kata. Tapi kerjaannya prosesnya bakal panjang. Karena kamu harus copy paste ke semua halaman.
Oleh karena itu kita membutuhkan sebuah template sistem. Dengan template ini kita bisa memilah memecah sebuah halaman-halaman menjadi bagian-bagian kecil, yang nantinya bisa kita gabungkan sesuka hati kita. atau mungkin sesuka hati client.
Alat dan bahan
untuk memulai project ini, maka kita membutuhkan beberapa alat dan bahan yang kita perlukan.
1. Niat dan doa
Niatkan hati dan berdoalah pada yang maha kuasa supaya kita diberi berkah dan kemudahan dalam melakukan permainan ini. Eh kok permainan? karena coding is fun.
2. Code Igniter 3
Sesuai dengan judul. Kamu download dulu code igniter di sini
 | ||
| download-code-igniter-3 |
3. Text Editor
Kamu bisa menggunakan teks editor kesukaanmu. Seperti aku yang suka menggunakan teks editor kesukaanku, yaitu Visual Code. Aku merekomendasikan Visual Code untuk kamu gunakan juga. Kamu bisa download visual code di link ini
4. Template Admin
Biar tambang greget, kita langsung mencoba menerapkan ke template admin. Nah, salah satu template admin gratis favoritku adalah Gentella. Download gentella di sini
Ok, Semua bahan sudah tersedia. Sekarang kita mulai memotong-motong templatenya
Buat Library template
Sebelum mulai motong bebek angsa, eh motong template. aku mau bikin library temlatenya dulu.1. Buat file baru di folder "application\libraries". Beri judul Template.php
kemudian masukkan kode seperti dibawah ini:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Template
{
var $ci;
function __construct()
{
$this->ci = & get_instance();
}
function load($tpl_view, $body_view = null, $data = null)
{
if (!is_null($body_view))
{
if (file_exists(APPPATH . 'views/' . $tpl_view . '/' . $body_view))
{
$body_view_path = $tpl_view . '/' . $body_view;
}
else if (file_exists(APPPATH . 'views/' . $tpl_view . '/' . $body_view . '.php'))
{
$body_view_path = $tpl_view . '/' . $body_view . '.php';
}
else if (file_exists(APPPATH . 'views/' . $body_view))
{
$body_view_path = $body_view;
}
else if (file_exists(APPPATH . 'views/' . $body_view . '.php'))
{
$body_view_path = $body_view . '.php';
}
else
{
show_error('Unable to load the requested file: ' . $tpl_name . '/' . $view_name . '.php');
}
$body = $this
->ci
->load
->view($body_view_path, $data, true);
if (is_null($data))
{
$data = array(
'body' => $body
);
}
else if (is_array($data))
{
$data['body'] = $body;
}
else if (is_object($data))
{
$data->body = $body;
}
}
$this
->ci
->load
->view('templates/' . $tpl_view, $data);
}
}
Setelah itu simpan file tersebut.
Gambar dibawah ini sekedar memastikan ya sob, kamu sudah naruh file Template ditempat yang benar apa nggak. Strukturnya seperti dibawah ini ya!
 | ||
| File Template.php di folder application\libraries |
Setting
CONFIG
Sebelum mulai acara oprek template, kita setting dulu baseurl-nya.
buka file config di "application\config\config.php". Masukkan base url ke config seperti berikut:
$config['base_url'] = 'http://localhost/ci3';
AUTOLOAD
untuk memudahkan pekerjaan kita, supaya tidak terlalu banyak menulis. Kita masukkan library yang sering dipakai ke file "application\config\autoload.php.
cari bagian libraries, lalu masukkan library pendukung dan file library yang baru saja dibuat.
$autoload['libraries'] = array('template', 'url');
MEMOTONG TEMPLATE ADMIN
Extract file gentella-master yang sudah kita download dari github gentella.Yang aku suka dari gentella admin, meskipun template free. Tapi template ini bukan template kacang-kacangan. Bukan juga duren-durenan. Template ini sangat lengkap sob. Nggak kalah sama template berbayar. Selain itu dokumentasinya juga lengkap. Hal pertama yang seharusnya kita lakuin kalau ada sesuatu yang mengganjal dan ingin dipelajari. Sesuatu yang sering kita abaikan dan lebih memilih mencari lewat google, dan membuat literasi kita sangat rendah adalah "MEMBUKA DOKUMENTASI". Jadi sob. aku ngajak kamu buat buka dokumentasinya gentella admin di folder "gentealla-master\doc". Klik double index.html.
Setelah dokumentasi terbuka. Stop aktifitas dulu. Diam sejenak, hela napas. Ucapkan alhamdulilah sambil menghembuskan nafas lewat mulut.
Struktur folder Gentelella master
struktur folder dari master gentelella seperti ini:
folder yang akan kita salin adalah
1. Folder css didalam folder production.
2. Folder js didalam folder production.
3. Folder images didalam folder production.
4. Folder build.
5. Folder vendors --Folder semua library pendukung.
buat folder dengan nama assets di root folder projek code igniter yang sudah kamu buat, lalu cemplungin semua folder yang sudah aku list diatas kedalam folder tersebut.
folder assets
Nah. Seperti itulah penampakan folder assets.
Sekarang kita buka lagi dokumentasinya
 | |
| getting started |
Kerennya gentelella nih, dia sudah nyediain page kosong. Page ini sangat-sangat membantu kita buat memahami struktur template dan tentu saja buat motongin bagian template sesuai kebutuhan kita.
Buka plain_page.html dengan editor text kesukaanmu. Aku sih suka visual code, kalau kamu?
Template gentelella ini dokumentasi sourcenya juga rapi sob, setiap komponen diberi komentar, jadi kita bisa tahu, mengerti dan memahami fungsi-fungsi baris kode disitu. Sebelum mulai membredeli, mendodosi atau menganiyaya template ini. kita rencanakan dulu strukturnya mau seperti apa.
Sekedar usulan, silahkan kalau nggak dipakai. Namanya juga usulan. Aku nggak menghimbau ya sob. Himbauan kalau nggak dilaksanain itu menyakitkan. Jadi aku sekedar usul saja. Struktur template yang akan kita buat nanti seperti ini sob:
1. header.php -- file untuk headernya
2. sidemenu.php -- file untuk menu samping kiri
3. topmenu.php -- file untuk top menu alias menu atas
4. konten -- bagian konten, isinya bisa berubah-ubah sesuai isi yang mau ditampilkan
5. footer.php -- bagian kaki
6. app.php -- file untuk menggabungkan semua file-file diatas.
Semua file ini nanti akan kita taruh di folder view. Untuk memudahkan mengorganisasi file-filenya. kita buat folder buat nampung file-file ini. namanya app. Setuju ya?
Strukturnya nanti akan terlihat seperti ini:
 |
| struktur folder tema |
nb. di bagian load css, js dan image butuh penyesuaian sob. Kalau nggak disesuaikan ntar halamanmu terlihat kacau, soalnya komponen css, js dan image tidak terload. Untuk itu kamu perlu mengubah "../" dengan "<?php echo base_url('assets');?>/"
Header
buat file header.php di folder "view\app". Baris kode header di file plain_page.html ada di 1-48. Biar kamu lebih mudah, sudah tak potong plus tak editin nih:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title>
<!-- Bootstrap -->
<link href="<?php echo base_url('assets/'); ?>vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="<?php echo base_url('assets/'); ?>vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="<?php echo base_url('assets/'); ?>vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="<?php echo base_url('assets/'); ?>build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix">
<div class="profile_pic">
<img src="<?php echo base_url('assets/images/'); ?>img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>John Doe</h2>
</div>
<div class="clearfix"></div>
</div>
<!-- /menu profile quick info -->
<br />
Sidemenu
sidemenu berisi menu dari aplikasi kita. di plain_page.html kode sidemenu dimulai dari baris 49-170. Karena sidemenu bawaannya panjang banget. Aku ringkasin deh buat kamu. Supaya kamu lebih mudah memahami penggunaannya.
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Dashboard2</a></li>
<li><a href="#">Dashboard3</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-laptop"></i>Menu Tunggal</a></li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<!-- /menu footer buttons -->
<div class="sidebar-footer hidden-small">
<a data-toggle="tooltip" data-placement="top" title="Settings">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="FullScreen">
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Lock">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
</div>
<!-- /menu footer buttons -->
</div>
</div>
Topmenu
top menu adalah menu atas, biasanya isinya tentang notifikasi dan profile pengguna. kode top menu di sample page-nya ada dibaris 173 - 267. Tak ringkesin juga, just for you.
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<nav class="nav navbar-nav">
<ul class=" navbar-right">
<li class="nav-item dropdown open" style="padding-left: 15px;">
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown"
data-toggle="dropdown" aria-expanded="false">
<img src="<?php echo base_url('assets/images/'); ?>img.jpg" alt="">John Doe
</a>
<div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="javascript:;"> Profile</a>
<a class="dropdown-item" href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
<a class="dropdown-item" href="javascript:;">Help</a>
<a class="dropdown-item" href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
</div>
</li>
<li role="presentation" class="nav-item dropdown open">
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown"
aria-expanded="false">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-green">1</span>
</a>
<ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
<li class="nav-item">
<a class="dropdown-item">
<span class="image"><img src="<?php echo base_url('assets/images/'); ?>img.jpg"
alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li class="nav-item">
<div class="text-center">
<a class="dropdown-item">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
Konten
yang ini nggak usah dikoding, pan nanti isinya berubah-ubah sesuai kata hati, eh maksudku halaman web. wrapper atau pembungkusnya nanti kita masukin di file app.php
footer
buat file baru dengan nama footer.php di folder "view\app". Kode aslinya ada di baris 315 - 341.
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script src="<?php echo base_url('assets/'); ?>vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="<?php echo base_url('assets/'); ?>vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->
<script src="<?php echo base_url('assets/'); ?>vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="<?php echo base_url('assets/'); ?>vendors/nprogress/nprogress.js"></script>
<!-- Custom Theme Scripts -->
<script src="<?php echo base_url('assets/'); ?>build/js/custom.min.js"></script>
</body>
</html>
Wrapper/pembungkus
Ini bagian yang sangat penting dan nggak ada di folder template gentella. wrapper bertugas menyatukan file-file yang sudah kita pisahkan tadi sehingga terlihat menyatu. Yang terpisah file ya sob, bukan hati yang terpisah tapi masih tertaut.
Buat file baru di folder "view\app". Beri nama app.php
salin kode dibawah ini ke file tersebut:
<?php
$this->load->view('app/header');
$this->load->view('app/sidemenu');
$this->load->view('app/topmenu');
echo $body;
$this->load->view('app/footer');
?>
TESTING DAN FINISHING
Sekarang komponen templatenya sudah jadi. Saatnya mengimplementasikan.
di plain_page.html tadi ada bagian yang belum kita kopi sob. Bagian itu adalah isi dari konten/halaman yang akan kita buat sesuka hati kita. Sebagai contoh, kita buat halaman yang berisi sanjuangan pada author.
langsung saja kita coba implementasikan:
Controller
Buat file controller di folder "application\controller" dengan nama Test.php
<?php
Class Test extends CI_Controller{
public function index(){
$data['judul'] = "Halaman Test";
$data['nama'] = "Martin Eko Setiawan";
$data['sanjungan'] = "Kau sungguh Tamvan - Tapi boong";
$this->template->load('app/app', 'test', $data);
}
}
Selanjutnya buatlah view di folder "application\view" dengan nama test.php.
masukkan kode berikut:
<div class="">
<div class="page-title">
<div class="title_left">
<h3><?php echo $judul; ?></h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2><?php echo $nama; ?></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a clas s="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a>
<a class="dropdown-item" href="#">Settings 2</a>
</div>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<?php echo $sanjungan; ?>
</div>
</div>
</div>
</div>
</div>
TESTING
Buka browser, masukkan url halaman test yang tadi kita buat. misalnya
http://localhost/ci3/index.php/test
kalau langkah yang kamu jalankan sudah sesuai dengan kajian yang sudah aku bahas diatas, kamu akan melihat halaman seperti gambar paling atas di artikel ini.
Demikian tutorial yang sebenarnya hanya sebagai pengingat untukku. Soalnya tiap mau bikin nerapin template baru aku selalu dan selalu browsing-browsing lagi. Kan nggak efektif sob. Mendingan aku bikin artikel disini saja. Kalau lupa tinggal cari disini, dirumah sendiri.
Terima kasih sudah mampir dan membaca artikel ini. File sourcenya sudah aku upload ke gitlab, tapi sebelum download sourcenya aku mohon dengan sangat pahami langkah-langkah di artikel ini. Selain supaya kamu paham alur kerjanya, berlama-lama mantengin blog ini termasuk support ke aku sob. biar nggak dihitung sebagai bounce rate. Ntar domain authorityku turun terus. Duh malah curhat.
wasalamualaikum wr, wb.
No comments for "Membuat library template sederhana di code igniter 3"
Post a Comment