Langsung ke konten utama

Tutorial Codeigniter #4: Teknik Membuat Template Admin yang Efektif

Pada tutorial sebelumnya, kita sudah berhasil menambahkan Bootstrappada proyek CI.
Namun, masih ada yang kurang…
Template masih dibuat dalam satu file saja. Ini nanti akan bermasalah ketika kita membuat halaman baru.
Permsalahannya:
Kita akan menulis kode yang sama berulang-ulang dalam file template yang berbeda.
Bagaimana nanti kalau ada perubahan?
Misal, perubahan link pada navbar.
Maka kita harus mengubah semua file template yang kita buat satu per satu.
Tentu ini kurang efektif, karena kita akan menghabiskan banyak waktu dan tentaga untuk mengubahnya.
Salah satu solusi dari permasalahan ini yaitu dengan menggunakan partials. Dengan partials kita akan membagi template menjadi bagian-bagian kecil yang dapat digunakan kembali.
Jika kamu pernah belajar Laravel, kamu mungkin pernah mendengar fungsi yield yang memungkinkan kita untuk mengimpor bagian template yang lain. Fungsi yield di Laravel sering digunakan untuk membuat layout.
Lalu di Codeigniter, apakah ada fungsi yield?
Tidak, di Codeigniter tidak ada fungsi yield. Namun, kita bisa menggunakan fungsi $this->load->view() sebagai penggantinya. Karena fungsinya hampir sama dengan yield, yaitu untuk me-load sebuah view.
Fungsi $this->load->view() ini, nanti akan kita gunakan untuk me-load partials ke dalam template.
Tapi sebelum itu, kita harus membuat dulu partial-nya.

Membuat Partial Template

Partial merupakan teknik untuk membagi template menjadi bagian-bagian kecil agar mudah digunakan.
 Sekarang coba buka file index.html pada SB Admin dan perhatikan, apa saja partial yang bisa kita buat dari sana?

Berdasarkan gambar di atas, berikut ini partial yang bisa kita buat:
  • head.php untuk meinyimpan isi dari tag <head>;
  • navbar.php untuk menyimpan kode navbar;
  • sidebar.php untuk menyimpan kode menu bagian samping (sidebar);
  • breadcrumb.php untuk menyimpan kode link breadcrumb;
  • scrolltop.php untuk menyimpan kode tombol scrolltop;
  • footer.php untuk menyimpan kode footer;
  • modal.php untuk menyimpan kode modal;
  • js.php untuk meload javascript.
Mari kita buat satu per satu…
Tapi sebelum itu, silahkan buat dulu direktori baru bernama _partials di dalam views/admin/.

Apakah nama direktorinya harus _partials?
Tidak harus, karena ada juga membarikan nama includes atau _includes.
Nama _partials menurut saya lebih jelas dan menggambarkan isinya.
Kenapa ada garis bawah (underscore) di depannya?
Ini untuk memudahkan dalam membedakan view dan partial. View akan kita load dari Controller, sedangkan partial akan kita load dari view.
Biasanya dalam penulisan kode (OOP), sesuatu yang bersifat private dan lokal kadang ditulis dengan garis bawah di depannya.
Oke, lanjut…
Berikutnya kita akan membuat semua partial yang telah kita tentukan di atas.

Partial head.php

Partial ini berisi kode-kode untuk tag <head>. Kita bisa copy dari file views/admin/overview.php mulai dari tag <head> sampai penutupnya </head>.
Sehinggak kode untuk partial head.php akan menjadi seperti ini.
Konstanta ini sudah kita buat pada tutorial sebelumnya.
Berikutnya perhatikan di bagian:




Ini akan menjadi judul yang akan tampil di browser. Fungsi ucfirst() untuk membuat huruf besar di awal kata. Lalu judulnya kita ambil dari segment URL.
Sehingga nanti pada browser akan tampil seperti ini:

Partial navbar.php

Partial ini hanya berisi kode untuk menu navbar. Berikut ini isi kode dari partial navbar.php
Pada kode navbar, kita menggunakan konstanta SITE_NAME untuk menampilkan nama web di navbar.
Lalu kita menggunakan class bg-success untuk mengubah warnanya menjadi hijau. Supaya selaras dengan brand aplikasinya.

Ini tampilannya:Ini tampilannya:


Partial sidebar.php

Partial ini berisi kode untuk menampilkan menu bagian samping (sidebar). Berikut ini isi kode sidebar.php:
Pada kode di atas, kita menggunakan segment URI untuk mengecek apakah menu itu sedang dibuka atau tidak.
Jika menu sedang dibuka, maka tambahkan class active.
Misalnya ini:


Kode ini akan mengecek, apakah halaman /admin/products sedang dibuka atau tidak.
Oya, halaman untuk menu products, users, dan settings belum kita buat. Insya'allah di tutorial berikutnya akan kita buat.

Partial breadcrumb.php

Partial ini berisi kode untuk menampilkan breadcrumb. Breadcrumbs adalah sebuah link navigasi yang menampilkan link halaman sebelumnya dari halaman tempat kita berada.
Berikut ini kode untuk parital breadcrumb.php:

Partial scrolltop.php

Partial ini berisi kode untuk tombol scrolltop. Berikut ini isinya:




Partial footer.php

Partial ini berisi kode untuk bagian footer, berikut ini isi kode untuk partial footer.php:




Pada kode partial footer.php, kita menggunakan konstanta SITE_NAME untuk menampilkan nama website. Lalu menggunakan fungsi Date('Y') untuk menampilkan tahun saat ini.

Partial modal.php

Partial ini berisi kode-kode untuk modal. Berikut ini isinya:
Kita juga nanti bisa tambahkan beberapa modal di sini.

Partial js.php

Partial ini berisi kode-kode untuk me-load Javascript. Berikut ini kode untuk js.php:

Kita juga nanti bisa tambahkan beberapa kode javascript di sini.

Menggunakan Partials pada Template

Kita sudah membuat semua partial yang dibutuhkan:

























Langkah berikutnya, kita harus menggunakannya dalam template.
Silahkan ubah isi views/admin/overview.php menjadi seperti ini:

Pada kode template tersebut, kita me-load partial dengan fungsi $this->load->view().
Maka hasilnya akan seperti ini:

Mantap…😍
[ Download Source Code Tutorial ini: tutorial-4.zip]

Apa Selanjutnya?

Sepertinya masalah template sudah selesai. Kamu juga bisa mengembangkannya sesuai kreasi sendiri.
Silahkan pelajari Bootstrap untuk mengetahui class-class CSS yang dapat digunakan.
Berikutnya kita bisa mulai membuat fitur baru, seperti:
Selamat belajar…
Terimakasih telah mengunjungi blog ini. 


Komentar

Posting Komentar

Postingan populer dari blog ini

Tutorial Codeigniter #1: Pengenalan Codeigniter untuk Pemula

PHP memiliki banyak framework, saking banyaknya kadang kita dibuat galau untuk memilih framework. Milih framework saja masih bingung… …apalagi milih jodoh .😆 Serius! Banyak yang masih galau memilih framework. Bahkan menghabiskan waktunya untuk mencari perbandingan antar framework. Daripada mebanding-bandingkan, sebaiknya kita mulai belajar salah satu framework. Agar nanti kita bisa menyimpulkan sendiri, mana framework yang disukai dan cocok untuk kita gunakan. Kalau tidak cocok… ya tinggal cari dan pelajari framework yang lain. Sia-sia donk, sudah susah belajar tapi tidak cocok. Menurut saya: Tidak ada yang namanya sia-sia dalam belajar. Karena kita akan mendapatkan ilmu dan pengalaman. Kalaupun ilmunya belum bisa diamalkan, setidaknya kita bisa mengajari orang lain. Oke, lanjut… Ngomong-ngomong, apa itu framework? Framework dalam bahasa indonesia artinya kerangka kerja . Kerangka kerja untuk membuat sesuatu (web). Perumpamaannya mungkin bisa seperti itu. Dengan m
Posting Komentar
Baca selengkapnya

Tutorial Codeigniter #2: MVC dan Routing, Konsep dasar CI yang Harus Kamu Pahami

Pada tutorial sebelumnya , kita sudah belajar cara menginstal CI dan mengenal struktur direktori dari CI. Sekarang kita lanjut belajar tentang routing dan MVC. Rencananya, kita akan membuat aplikasi online shop (olshop). Namun, sebelum kita mulai membuat aplikasi dengan CI, ada baiknya berkenalan dulu dengan konsep dasar CI. Codeigniter adalah frameowrk yang menggunakan konsep MVC. Apa itu MVC? Mari kita bahas… Mengenal Konsep MVC pada Codeigniter MVC (Model, View, Controller) adalah sebuah pola desain (design pattern) arsitektur pengembangan aplikasi yang memisahkan dan mengelompokan beberapa kode sesuai degan fungsinya. MVC membagi aplikasi ke dalam tiga bagian fungsional: model, view, dan controller. Model adalah kode-kode untuk model bisnis dan data. biasanya berhubungan langsung dengan database untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian view. Vie
Posting Komentar
Baca selengkapnya