Setiap website memiliki layout yang berbeda-beda tetapi pada umumnya layout website terdiri dari header, content, navigation menu dan footer. Nah pada tutorial ini kita akan membuat template layout pada codeigniter.
Layout template yang akan kita buat kira-kira seperti gambar di atas. Jadi kita akan membagi template kita ke dalam 4 bagian dimana:
- Header terdapat logo dan bertugas menampung file-file CSS.
- Body bertugas untuk menampilkan content
- Sidebar bertugas untuk menampilkan daftar menu atau navigasi
- Footer terdapat copyright dan bertugas menampung file-file javascript.
1. Membuat Folder Template Di Dalam Folder Views
Pertama-tama, di dalam folder application/views kita akan membuat folder baru yang kita beri nama template. Kemudian di dalam folder template kita menambahkan 5 file baru yaitu header.php, content.php, sidebar.php, footer.php, dan layout.php.
2. Memisahkan Kode
Selanjutnya kita akan memisahkan atau membagi kode html kita sesuai dengan fungsinya masing-masing. Kenapa harus dipisahkan? Karena ini akan lebih memudahkan jika ada perubahan yang akan kita lakukan misalnya saat ingin merubah atau mengatur posisi logo kita hanya akan bekerja pada file header.php, atau pada saat kita ingin menambahkan menu baru kita cuma mengedit file sidebar.php tanpa mengganggu fungsi dari part atau bagian yang lainnya.
Pada file header.php berisi kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $pageTitle; ?></title>
<style>
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
header {
width: 100%;
background-color: red;
}
footer {
width: 100%;
background-color: orange;
}
#content {
width: 69%;
background-color: blue;
display: inline-block;
}
#sidebar {
width: 30%;
background-color: green;
display: inline-block;
}
</style>
</head>
<body>
<header>
<h1>Belajar Template Codeigniter</h1>
</header>
<div class="container">Pada file footer.php berisi kode berikut:
</div>
<footer>
<p>Copyright © Kumpulan Software</p>
<p>Contact information: <a href="mailto:admin@kumpulansoftware.com">
admin@kumpulansoftware.com</a>.</p>
</footer>
</body>
</html>Pada file sidebar.php berisi kode berikut:
<aside id="sidebar">
<h3>Main Navigation</h3>
<ul>
<li><a href="<?php echo base_url("dashboard"); ?>">Dashboard</a></li>
<li><a href="<?php echo base_url("users"); ?>">Users</a></li>
<ul>
</aside>Pada file content.php berisi kode berikut:
<main id="content">
<?php echo $pageContent ?>
</main>Terakhir, pada file layout.php berisi kode berikut:
<?php $this->load->view("template/header"); ?>
<?php $this->load->view("template/sidebar"); ?>
<?php $this->load->view("template/content"); ?>
<?php $this->load->view("template/footer"); ?>
3. Memanggil Template Dari Controller
Pada tutorial sebelumnya kita telah membuat sebuah Controller baru yang bernama Homepage. Dari Controller Homepage ini kita akan memanggil template yang sudah kita buat tadi.
<?php defined("BASEPATH") OR exit("No direct script access allowed");
class Homepage extends CI_Controller {
public function index()
{
// Data ini akan ditampilkan di header.php pada tag <title>
$data["pageTitle"] = "Homepage";
// Memanggil view main.php
$data["pageContent"] = $this->load->view("homepage/main", $data);
// Memanggil view layout.php
$this->load->view("template/layout", $data);
}
}Bisa kita lihat di atas pada variable $data[“pageContent”] kita memanggil file view main.php. Disini adiks akan melihat sedikit perbedaan dengan cara kita memanggil view sebelumnya. Kali ini kita memanggil fungsi dengan menggunakan 3 parameter yaitu:
- Parameter pertama adalah nama file di dalam folder application/views yang akan dipanggil.
- Parameter kedua adalah data yang di lampirkan ke file view main.php, karena disini kita tidak melampirkan data maka bisa kita tulis NULL saja.
- Parameter ketiga adalah nilai boolean yang jika kita tulis TRUE maka file view main.php akan menjadi string saja, sedangkan jika kita tulis FALSE maka file view main.php akan langsung ditampilkan di browser
4. Memanggil View Sebagai String
Lalu bagaimana jika content yang akan kita tampilkan berada di file yang berbeda dengan controller? Mudah saja, caranya dengan memanggil view sebagai string di dalam controller. Mari kita membuat folder baru di dalam folder application/views yang kita beri nama homepage dan di dalam folder ini kita akan membuat sebuah file view yang bernama main.php.
Pada file main.php berisi kode berikut:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quaerat ipsa veniam libero reiciendis sit est accusamus dolore laborum mollitia! Tenetur, impedit? Obcaecati aliquid atque necessitatibus accusamus iusto, ipsa amet!</p>lalu akses project codeignitor di url http://localhost/tutorialci/homepage
