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

  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 !!!!

There Are 2 Responses So Far. »

  1. Terima kasih min,, saya masih pemula ingin belajar CI

  2. terima kasih kembali smoga bermanfaat ya :)

Post a Response