28 May 2017 | Tags: Bootstrap, Cara Membuat Template Web, Cara Membuat Template Web dengan Bootstrap, Cara Membuat Template Web dengan CodeIgniter, CodeIgniter
Apabila kita mengunjungi halaman website, kita akan melihat tata letak atau layout yang konsisten pada tiap halamannya. Struktur menu, warna, jenis font selalu sama pada setiap halaman. Yang berbeda mungkin konten yang disajikan berbeda-beda. Layout merupakan salah satu identitas dari website sehingga konsistensi tiap halaman sangat diperlukan. Agar bisa menjaga konsistensi tersebut kita memerlukan tempate dari website. Kali ini kita akan membahas cara membuat template web dengan CodeIgniter dan Bootstrap.
Teknik yang kita gunakan untuk membuat template adalah teknik split, seperti pembuatan theme di WordPress. Sederhananya kita membuat halaman web template secara utuh, kemudian kita bagi menjadi beberapa bagian. Pada contoh Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap, kita membaginya menjadi bagian header dan footer saja, biar lebih mudah dipahami.
Pada pembahasan kali ini kami mengasumsikan anda sudah mengerti konsep framework CodeIgniter dan Bootstrap. Jika belum silahkan mempelajari tutorialnya pada website tersebut atau di W3School dan Tutorial Republic.
Langkah-Langkah Cara Membuat Template Web Dengan CodeIgniter dan Bootstrap
1. Donwload Bootstrap
Download Bootsrap situs //getbootstrap.com/getting-started/, kemudian anda extract sehingga terdapat folder bootsrap yang didalamnya berisi sub folder: css, fonts, dan js.
2. Donwload CodeIgniter
Download CodeIgniter versi dari situs //www.codeigniter.com/ [pada materi ini menggunakan versi 3.1.4]. Kemudian anda extract sehingga menghasilkan struktur file
bootstrap secara utuh. Kemudian pindahkan codeigniter ke web root anda [folder tempat menaruh file-file PHP].
3. Buat Folder Assets
Setelah anda memindahkan file CodeIgniter ke web root, buat folder baru dengan nama assets [bisa dengan nama lain] dalam codeigniter yang posisinya sejajar dengan folder application, system . Kemudian pindahkan folder bootstrap kedalam folder Assets. Sehingga strukturnya menjadi seperti gambar dibawah ini:
Dimana saya bisa mendapatkan file selain bootstrap seperti tampak diatas? Tenang, semua file tersebut bisa anda dapatkan mengunjungi contoh template bootstrap di //getbootstrap.com/getting-started/#examples. Anda tinggal buka salah satu contohnya dan lihat source code html-nya untuk mendapatkan file-file pendukungnya. Untuk file Jquery, bisa cari di google.
4. Ubah Config
Ubah file application->config->config.php, cari $config[‘base_url’] dan isikan nilainya dengan nama folder aplikasi yang anda
buat.
$config['base_url'] = '//localhost/simpak/';
5. Ubah Routes
Ubah file application->config->routes.php, cari $route[‘default_controller’] dan isikan nilainya dengan nama controller yang akan menjadi defaulnya.
$route['default_controller'] = 'front';
Nilai ini maksudnya controller yang menjadi default dari aplikasi adalah front.
6. Buat Controller Front
Seperti yang kita bahas pada routes, kita
akan membuat controller front. Controller ini untuk mengatur halaman web nantinya. Silahkan buat controller front di: application->controller->Front.php. Adapun isinya adalah:
assets/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
Halaman Template Full
Simple Template with CodeIgniter & Bootstrap