Integrasi CodeIgniter dan Template Admin Bootstrap

Jaka Sabtu, 18 Maret 2017 21:38:01 Web Development 27205

Seperti kita ketahui bersama Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan oleh para developer website dan aplikasi web base.

Karena Bootstrap hanya menyediakan HTML, CSS dan Javascript, bagaimana caranya menggunakannya pada framework CodeIgniter agar dapat terintegrasi pada website atau aplikasi web base yang kita bangun? Pada postingan kali ini saya akan memberikan contoh tutorial bagaimana cara Integrasi CodeIgniter dan Template Admin Bootstrap. Template Admin Bootstrap yang saya pilih adalah SB admin, karena template ini termasuk template favorit saya pada Template Admin & Dashboard Pilihan Alkarizma.com karena cukup simple, cocok untuk digunakan untuk aplikasi web sederhana namun memiliki tampilan yang responsive pada semua ukuran resolusi layar, click di sini untuk melihat demo tampilannya.

Berikut langkah - langkah cara Integrasi CodeIgniter dan Template Admin Bootstrap :

1. Download dan Install CodeIgniter (saya menggunakan CodeIgniter 2.2.6), folder aplikasi yang saya buat pada contoh ini adalah "latihan" (boleh diganti sesuai keinginan)

2. Buka File autoload.php di dalam folder config, ubah pada bagian $autoload['helper'] = array(); menjadi $autoload['helper'] = array('url');

3. Buka file routes.php di dalam folder config, ubah pada bagian default_controller seperti berikut :

$route['default_controller'] = "dashboard";

4. Buat file dashboard.php di dalam folder controller, ketikkan script sebagai berikut : 

class Dashboard extends CI_Controller {
public function index()
{
$this->load->view('admin/dashboard');
}
}

5. Download Template SB admin, extract lalu copy ke folder views pada CodeIgniter, lebih baik jika di buat folder tersendiri, misal "admin"

6. Rename file index.html menjadi dashboard.php

 

7. Buat folder assets pada folder aplikasi yang kita buat, copykan folder "css, font-awesome, font dan ke js" ke folder assets

 8. Buka file dashboard.php yang ada di folder views/admin tadi, dan tambahkan <?php base_url()?>assets/  pada setiap pemanggilan file css dan javascript pada file, sepeti contoh berikut

<link href="<?php base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">

9. Jika semua sudah selesai, silahkan buka browser, ketikkan localhost/latihan/ dan lihat hasilnya. 

OK, sekian tutorial Integrasi CodeIgniter dan Template Admin Bootstrap ini, bila teman - teman ingin download script lengkapnya silahkan download di link berikut.

 


Komentar :



9 Komentar :

Leonida

10 Juli 2018 - 22:27:16

When I initially commented I clicked the \"Notify me when new comments are added\" checkbox and now each time a comment is added I get four e-mails with the same comment.\nIs there any way you can remove people from that service?\n\nAppreciate it!

Melva

10 Juli 2018 - 21:01:04

Great blog! Do you have any hints for aspiring \nwriters? I\'m planning to start my own blog soon but I\'m a little lost on everything.\n\nWould you suggest starting with a free platform like Wordpress or go for a paid \noption? There are so many options out there that I\'m completely confused ..\nAny ideas? Many thanks!

Yanira

10 Juli 2018 - 19:18:46

Why visitors still use to read news papers when in this technological globe all is accessible on net?

Helaine

08 Juli 2018 - 22:45:25

I have read a few excellent stuff here. Definitely price bookmarking for revisiting.\nI surprise how so much effort you place to make one of these magnificent \ninformative web site.

Bev

08 Juli 2018 - 04:41:47

If some one desires to be updated with most up-to-date \ntechnologies after that he must be pay a visit this web page and be up to date everyday.