Tentu, berikut adalah artikel tutorial tentang cara membuat template web pada CodeIgniter.
Setelah kita mempelajari Controller dan View, sekarang saatnya kita menerapkan pengetahuan tersebut untuk membangun struktur aplikasi yang lebih terorganisir. Salah satu praktik terbaik dalam pengembangan web adalah menggunakan template atau layout. Ini memungkinkan kita untuk memiliki bagian-bagian web yang sama (seperti header, sidebar, dan footer) di berbagai halaman tanpa perlu mengulang kode.
Dengan membuat template, kita bisa memisahkan konten yang statis (yang tidak berubah dari halaman ke halaman) dari konten dinamis.
Mengapa Menggunakan Template?
- Efisiensi Kode: Anda tidak perlu menulis ulang kode HTML untuk header atau footer di setiap file view.
- Konsistensi Tampilan: Memastikan semua halaman memiliki tampilan dan tata letak yang sama.
- Perawatan Mudah: Jika Anda perlu mengubah sesuatu di header (misalnya, menambahkan tautan baru), Anda hanya perlu mengubahnya di satu file.
Langkah-Langkah Membuat Template Web
Kita akan membuat template sederhana yang terdiri dari tiga bagian: header, halaman utama, dan footer.
Langkah 1: Buat Direktori Template
Pertama, mari kita buat direktori untuk menyimpan bagian-bagian template. Di dalam folder app/Views, buat folder baru bernama templates.
Struktur Direktori Anda:
/app/
/Views/
/templates/
header.php
footer.php
Langkah 2: Buat File header.php
Buat file header.php di dalam app/Views/templates/. File ini akan berisi kode HTML untuk bagian atas halaman, termasuk deklarasi DOCTYPE, tag <head>, dan tag pembuka <body>.
<!DOCTYPE html>
<html>
<head>
<title>Situs Web Saya</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header, footer { background-color: #333; color: white; padding: 10px; text-align: center; }
nav a { color: white; margin: 0 15px; text-decoration: none; }
.content { padding: 20px; min-height: 400px; }
</style>
</head>
<body>
<header>
<h1>My Awesome Website</h1>
<nav>
<a href="#">Beranda</a> |
<a href="#">Tentang Kami</a> |
<a href="#">Kontak</a>
</nav>
</header>
Langkah 3: Buat File footer.php
Buat file footer.php di dalam app/Views/templates/. File ini akan berisi kode penutup halaman, seperti tag <footer> dan tag penutup </body> serta </html>.
<br>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Langkah 4: Buat File Konten Utama
Selanjutnya, buat file untuk konten halaman utama Anda. Kita akan beri nama home_content.php dan simpan di dalam app/Views/.
<div class="content">
<h2>Selamat Datang di Beranda</h2>
<p>Ini adalah halaman utama dari situs web kami. Konten ini bisa berubah-ubah di setiap halaman.</p>
</div>
Langkah 5: Gabungkan Semua View di Controller
Terakhir, kita akan menggunakan Controller untuk memuat ketiga bagian tersebut secara berurutan. Buka app/Controllers/Home.php dan ubah method index() seperti berikut:
// app/Controllers/Home.php
public function index()
{
// Muat bagian header
echo view('templates/header');
// Muat bagian konten utama
echo view('home_content');
// Muat bagian footer
echo view('templates/footer');
}
Bagaimana Cara Kerjanya?
Ketika pengguna mengunjungi URL yang mengarah ke Home/index, CodeIgniter akan menjalankan kode di dalam method tersebut:
echo view('templates/header');akan memuat konten dari fileheader.phpdan menampilkannya.echo view('home_content');akan memuat konten dari filehome_content.phpdan menambahkannya tepat di bawah konten header.echo view('templates/footer');akan memuat konten dari filefooter.phpdan menambahkannya di bagian akhir.
Hasilnya adalah satu halaman HTML lengkap yang dibuat dari tiga file terpisah. Ini adalah konsep yang sama yang digunakan oleh framework lain, seringkali disebut sebagai “layouting”.
Anda dapat menggunakan pendekatan ini untuk membuat halaman lain di situs Anda. Cukup buat file konten baru (misalnya about_content.php) dan muat di Controller lain, dengan tetap menggunakan header.php dan footer.php yang sama.
Kesimpulan
Membuat template web adalah praktik penting untuk menjaga kode tetap bersih, terorganisir, dan mudah dikelola. Dengan memanfaatkan View untuk memisahkan bagian-bagian statis dari konten dinamis, Anda dapat mempercepat proses pengembangan, meningkatkan konsistensi desain, dan menyederhanakan pemeliharaan aplikasi Anda. Ini adalah pondasi penting untuk membangun aplikasi web profesional dengan CodeIgniter.
