Desain web merupakan salah satu faktor utama yang dapat membuat pengunjung bertahan untuk membaca informasi yang ada pada website itu sendiri. Oleh karena itu desain memiliki peranan yang penting dalam perkembangan suatu website. Website yang mempunyai desain yang baik akan menambah gairah pengunjung untuk tetap bertahan membaca informasi yang ada pada suatu halaman website.
Untuk mendapatkan hasil desain website yang maksimal diperlukan perencenaan yang baik. Tak heran kalau orang yang ahli dalam web desain bisa menghasilkan pendapatan tambahan dengan hanya membuat desain beberapa halaman web saja. Hal ini bisa kita lihat dengan banyaknya website yang menyediakan sebuah desain halaman web yang kemudian mereka menjualnya dengah harga yang lumayan berupa template. Memang banyak yang mereka bagikan secara gratis tapi menurut saya ini merupakan salah satu teknik yang mereka lakukan untuk mendapatkan pengunjung. Coba anda bandingkan salah satu hasil desain mereka yang free dengan yang premium (berbayar).
Pada kesempatan ini saya tidak akan mengajari Anda bagaimana membuat desain web namun tidak menutup kemungkinan akan saya bahas pada artikel selanjutnya. Kali ini saya akan memaparkan kepada Anda bagaimana menerapkan/mengimplementasikan template yang telah anda desain ataupun anda download pada framework codeigniter.
Persiapan
Sebelum memulai ada beberapa hal yang perlu Anda siapkan sebagai bahan yang akan kita gunakan pada tahap selanjut. Berikut daftar yang haru anda siapkan:
- Siapkan template Bootstrap HTML atau template lain yang bersifat template HTML.
- Anda sudah melakukan instalasi dan konfigurasi pada web codeigniter yang akan anda gunakan.
Bagi anda yang belum ikuti panduan yang telah saya bahas pada artikel sebelumnya (Baca: Panduan Instalasi dan Konfigurasi CodeIgniter).
1. Buat Folder assets
Folder assets ini akan kita gunakan sebagai tempat atau folder khusus yang akan menyimpan semua data yang berkaitan dengan desain seperti file CSS dan JavaScript. Folder assets ini kita buat di direktori root web (
C:\wamp\www\nazcules.xyz\assets\).
Selanjutnya buka template yang telah anda download pada tahap persiapan di atas (biasanya dalam bentuk file zip). Pada file zip tersebut terdapat beberapa folder, yaitu folder css, folder font, folder image dan folder js (tidak semua template sama tapi hampir semu template yang pernah saya download ada folder tersebut). Silahkan extract kelima folder tersebut ke dalam folder assets yang kita buat tadi, extract juga file index.html.
Sehingga isi dari folder assets kita seperti gambar berikut:
2. Buat File template.php
File template.php ini akan kita gunakan sebagai file view yang mengatur tampilan website misalnya header, sidebar, content dan footer.
Apakah ini perlu?
Jawabannya tidak
Tapi dengan menggunakan metode ini akan mempersingkat pekerjaan web designer. Bagaimana bisa itu terjadi?
Misalkan website yang kita buat ada 20 halaman dengan desain yang sama yang berbeda hanya isi atau kontennya saja. Maka kita perlu menuliskan coding view sebanyak 20 kali, nah dengan menggunakan metode template.php kita hanya perlu menulis coding view satu kali yang perlu di ubah bagian kontennya saja dengan cara memanggil file yang akan menampilkan konten tertentu.
Sekarang buat file baru kemudian copy dan paste isi dari file index.html yang ada di dalam folder asset
Simpan dengan nama template.php di dalam folder
C:\wamp\www\nazcules.xyz\application\views\.Kita perlu meng-edit beberpa baris pada file template.php ini. Bagian yang kita edit adalah bagian pemanggilan file CSS dan JavaScript.
Untuk pemanggilan CSS kode HTMLnya seperti script berikut:
<link href="css/bootstrap.css" rel="stylesheet"><?php echo base_url();?>assets/ setelah href=", sehingga kode pemanggilan CSS akan menjadi seperti berikut:
<link href="<?php echo base_url();?>assets/css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>
<?php echo base_url();?>assets/ setelah src=", sehingga kode pemanggilan JS akan menjadi seperti berikut:
<script src="<?php echo base_url();?>assets/js/bootstrap.js"></script>3. Load file template.php di controller
Agar template dapat digunakan kita harus load ke controller misalnya controller home yang telah kita buat pada artikel sebelumnya. Caranya perhatikan potongan coding controller home berikut:
$this->load->view('v_home');
$this->load->view('template');
$data['konten']="v_home"; di atas $this->load->view('v_home');, kode ini untuk menginialisasi v_home sebagai konten.Kemudian tambahkan array view dengan variabel "$data". Sehingga kodenya menjadi:
$this->load->view('template',$data);
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
public function index() {
$data['konten']="v_home";
$this->load->view('template',$data);
}
}
4. Hapus bagian template yang tidak diperlukan
Sebelum menghapus bagian yang tidak diperlukan kita lihat dulu bagaimana hasilnya pada web yang kita buat. Berikut hasil web yang saya buat:
Pada gambar di atas saya bagi menjadi tiga bagian, bagian atas (header), bagian tengah (konten) dan bagian bawah (footer). Pada bagian header dan footer website menampilkan informasi yang sama pada setiap halaman atau bersifat statis, sedangkan pada bagian kontent bersifat dinamis artinya akan menampilkan informasi yang berbeda pada setiap halaman.
Maka bagian konten akan kita hapus dan ganti dengan isi dari konten website yang akan kita buat. Bagaimana cara menghapusnya?
Perhatikan gambar di atas cari satu kalimat pertama dari bagian konten. Kalimat pertama adalah "INTRODUCING CALYPSO, POWERFUL HTML5 TEMPLATE", sekarang copy dua kata (INTRODUCING CALYPSO) kemudian buka file template.php lakukan pencarian dengan menggunakan find (Ctrl+F) dan paste dua kata yang di copy tadi ke kolom find. Jika sudah ketemu dengan kata yang kita cari, silahkan catat kata tersebut terdapat pada baris berapa. Pada template yang saya gunakan terletak pada baris 244.
Sekarang kita cari lagi dua kata terakhir dari konten yang akan kita hapus. Pada gambar di atas kita gunakan "LEARN MORE", kita cari lagi kata tersebut seperti kata yang pertama tadi dan yang saya dapatkan kata tersebut terdapat pada baris 628.
Hapus baris 244-628, kemudian liat hasilnya dengan me-reload website yang kita buat. Berikut hasil yang saya dapatkan:
Pada bagian yang kita hapus akan digunakan untuk menampilkan isi dari konten website yang kita buat. Agar isi dari konten dapat berubah-ubah (dinamis) pada setiap halaman yang kita buka maka kita perlu membuat halaman khusus yang berisi informasi apa yang akan kita tampilkan. Tidak hanya itu pada file template.php khusus di bagian konten (bagian yang telah di hapus) kita ganti dengan code berikut:
<?php $this->load->view($konten);?>
$data['konten']="v_home";).5. Buat halaman view konten
Halaman view konten yang saya maksud di sini adalah halaman yang isinya hanya berupa informasi yang akan kita tampilkan, mislnya informasi yang akan kita tampilkan pada halaman home, about dan lain sebagainya. Pada kesempatan ini kita akan membuat halaman view home dan view about.
a. Halaman View Home (v_home)
Pada artikel sebelumnya sebenarnya kita sudah membuat halaman ini jadi kita tinggal edit saja. Silahkan anda buka file v_home.php kemudian hapus bagian
<!DOCTYPE html> sampai dengan <body> dan bagian </body> sampai dengan </html>. Sehingga yang hasilnya seperti code berikut:
<h1>CodeIgniter Rocks</h1>
<p>CodeIgniter adalah framework PHP yang kuat dengan footprint yang sangat kecil, dibangun untuk pengembang yang membutuhkan toolkit sederhana dan elegan untuk membuat aplikasi web dengan fitur lengkap.</p>
b. Halaman View About (v_about)
Sebelum membuat halaman view about maka terlebih dahulu kita harus membuat controllernya. Buat file baru di folder
application/controllers/ dengan nama About.php. Copy dan paste code berikut:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class About extends CI_Controller {
public function index() {
$data['konten'] = "v_about";
$this->load->view('template',$data);
}
}
Kita telah membat controllernya sekarang kita buat untuk viewnya. Buat file baru dengan nama file v_about.php simpan di folder
application/views/. Silahkan anda isi dengan informasi tentang Anda.Kalau sudah selesai mari kita lihat hasilnya dengan mengakses
http://localhost/nazcules.xyz/index.php/about/ silahkan sesuaikan dengan folder root web anda.
Sekian panduan menggunakan template bootstrap pada web codeigniter. Semoga bisa bermanfaat!
Terima kasih!
