Implementasi CodeIgniter (CI) – Responsive Web Design (RWD)
Responsive Web Design (RWD) dapat diterapkan diberbagai pemrograman di sisi server, pada tutorial kali ini saya (twitter:@rojulman) akan mengajak anda untuk implementasi RWD menggunakan framework PHP CodeIgniter
Diasumsikan anda telah menginstall framework CI pada web server anda
- Desain Layout RWD
Desain web dengan RWD sangat mudah, cukup anda akses ke internet dan arahkan ke free website desain online, dalam contoh ini saya menggunakan library bootstrap dari website desain online layoutit.com.
Downloadlah hasil desain anda, dan ektrak zip file dalam direktori lokal anda. - Direktori assets
- Buat direktori assets pada dokumen root aplikasi CI anda, sejajar dengan direktori application dan system
- Copy direktori-direktori css,js,less,img,fonts hasil download desain RWD dari layoutit.com beserta seluruh isi filenya ke direktori assets
- Copy juga file index.html ke dalam direktori application/views menjadi file php dengan nama template.php
- Controller
- Buat file Controller blog.php pada direktori application/controller/ dengan kode berikut ini:
<?php class Blog extends CI_Controller { // fungsi ini akan akses view template.php public function template() { $this->load->view('template'); }
- Buat file Controller blog.php pada direktori application/controller/ dengan kode berikut ini:
- Helper
Dalam memudahkan kerja koding anda untuk mengakses file-file CSS, JavaScript, Fonts dan Images maka baiknya anda memanfaatkan fitur helper CodeIgniter. Helper adalah kumpulan fungsi yang dapat dipanggil dalam Controller, Model dan View.- Fungsi load file CSS, JavaScript dan Images
Buat file helper bernama loadurl_helper.php dalam direktori application/helpers, dan berikut isi kodenya:<?php if ( !function_exists('img_url')){ function img_url($uri = ''){ $CI =& get_instance(); return base_url()."assets/img/".$uri; } } //output : css folder path if ( ! function_exists('css_url')){ function css_url($uri = ''){ $CI =& get_instance(); return base_url()."assets/css/".$uri; } } //output : javascript folder path if ( ! function_exists('js_url')){ function js_url($uri = ''){ $CI =& get_instance(); return base_url()."assets/js/".$uri; } } ?>
- Daftarkan Helper
Agar helper diakses pada saat pertama kali apliaksi dijalankan maka anda harus mendaftarkan helper pada file autoload.php. Edit konfigurasi autoload helper, seperti baris berikut ini:$autoload['helper'] = array('url','file','loadurl_helper');
- Fungsi load file CSS, JavaScript dan Images
- Views
Buka file view application/views/template.php, dan edit baris2 kode yang mengakses file-file CSS, JavaScript dan Image seperti contoh baris kode berikut ini:<link href="<?php echo css_url("bootstrap.min.css")?>" rel="stylesheet"> <script type="text/javascript" src="<?php echo js_url("jquery.min.js")?>"></script> <script type="text/javascript" src="<?php echo js_url("bootstrap.min.js")?>"></script>
- File htaccess
Jika anda mengaktifkan konfigurasi file htaccess maka harus anda edit agar file-file dalam direktori assets bisa diakses dengan konfigurasi berikut iniRewriteEngine on RewriteCond $1 !^(index\.php|assets|images|robots\.txt) RewriteRule ^(.*)$ /NAMA_DIREKTORI_APLIKASI_ANDA/index.php/$1 [L]
- Tes RWD anda
Untuk menguji hasil oprekan anda bisa langsung buka browser dan arahkan ke URL: http://localhost/CIKU/blog/
Selamat Mencoba !!!!
Comment by Redo Kusuma on 27 January 2015:
Terima kasih min,, saya masih pemula ingin belajar CI
Comment by rojulman on 30 March 2015:
terima kasih kembali smoga bermanfaat ya