Ep2: Template Halaman Statis CodeIgniter

Search for a command to run...

No comments yet. Be the first to comment.
Waktu dapet kerjaan pertama sebagai front-end dev di dusdusaan.com (2019), aku dikasih project pake React, seingat gue aplikasinya tentang reseller dimana fitur yg saya kerjakan adalah tentang point dan event para reseller. Jujur aja, waktu itu aku b...

Awal mula gue pake TypeScript itu sebenernya bukan karena inisiatif sendiri, tapi karena kepepet. Waktu itu kantor lagi ngembangin dashboard chatbot buat tim CS, dan project-nya udah jalan duluan pake TypeScript. Gue yang baru masuk tim, langsung dis...

Javascript

Terkadang kita mendapatkan data bilangan misal response saat nge-hit API ke backend kita sendiri atau saat menggunakan third-party API anggap saja Xendit atau Midtrans tetapi berbentuk string. Seperti contoh dibawah ini. { "data": { "total_bela...

Cerita Mentor

Hal yang sangat perlu untuk diperhatikan sebelum lebih lanjut adalah untuk membuat helper untuk mengelola view, dalam hal ini berbentuk template dasar dari web yang akan kita jalankan misal membutuhkan header, footer, dan diantaranya ada content (page) yang dinamis.
Tambahkan file baru dengan nama Page.php pada folder application/controllers/ kemudian tambahkan kode berikut.
<?php
class Pages extends CI_Controller {
public function index($page = 'home')
{
return userView($page);
}
}
Controller Pages memiliki function index dengan parameter $page yang dapat diubah melalui route untuk dirender ke views dengan bantuan helper userViews.
Cara membaca rute url pada CodeIgniter3 adalah dengan cara berikut.
http://asrul.dev/[controller-class]/[controller-method]/[arguments]
/Jangan lupa setting file routes untuk mengarahkan halaman default web tersebut di application/config/routes.php.
$route['default_controller'] = 'pages/index';
$route['(:any)'] = 'pages/index/$1';
Buat file helper dengan nama view_helper.php dalam folder application/helpers yang isi filnya
seperti berikut.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
if ( ! function_exists('userView'))
{
function userView($page = 'home', $data = [])
{
$CI = &get_instance();
$CI->load->view('templates/header', $data);
$CI->load->view('pages/'.$page, $data);
$CI->load->view('templates/footer', $data);
}
}
Kemudian jadikan helper tersebut autoload dengam menambahkan kode berikut di file application/config/autoload.php yang isinya.
$autoload['helper'] = array('url', **'view_helper'**, 'file');
Selanjutnya buatlah file header.php dan file footer.php dalam folder application/views/pages/.
File header.php
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>AsrulDev</title>
<style>
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
padding-top: 4.5rem;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
</style>
</head>
<body>
<header class="container">
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="/">AsrulDev</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
File footer.php
<footer class="footer">
<div class="container text-center">
<span class="text-muted">AsrulDev - © 2021</span>
</div>
</footer>
</body>
</html>
Maka sampai disini kita telah memiliki template yang dapat kita gunakan disemua halaman. Mari kita uji dengan menambahkan file home.php dan about.php pada application/views/pages.
File home.php
<main class="container">
<div class="starter-template">
<h1>Ini Halaman Home</h1>
<p class="lead">Mari Belajar CodeIgniter3<br> bersama AsrulDev</p>
</div>
</main>
File about.php
<main class="container">
<div class="starter-template">
<h1>Ini Halaman About</h1>
</div>
</main>
Halaman home

Halaman About

Catatan untuk view saya menambahkan bootstrap dan jquery