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

1. 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.
2. 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
3. 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');
         }
     

4. 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');
     

5. 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>
   

6. File htaccess
   Jika anda mengaktifkan konfigurasi file htaccess maka harus anda edit agar file-file dalam direktori assets bisa diakses dengan konfigurasi berikut ini

   RewriteEngine on
   RewriteCond $1 !^(index\.php|assets|images|robots\.txt)
   RewriteRule ^(.*)$ /NAMA_DIREKTORI_APLIKASI_ANDA/index.php/$1 [L]
   

7. Tes RWD anda
   Untuk menguji hasil oprekan anda bisa langsung buka browser dan arahkan ke URL: http://localhost/CIKU/blog/

Selamat Mencoba !!!!