Cara Menggunakan Fitur Hook pada CodeIgniter

Fitur hook yang disediakan pada CodeIgniter sebenarnya memungkinkan kita untuk sedikit melakukan hack pada proses yang berjalan pada aplikasi yang kita buat, tanpa harus mengubah skrip pada file inti CodeIgniter. Misalnya saja, kita ingin membuat sebuah log untuk menyimpan data URL apa saja yang diakses oleh pengguna, mendata setiap pengunjung yang mengakses halaman, dll. Dalam kasus dibawah ini kita akan menggunakan fitur hook untuk mengatur konfigurasi aplikasi berdasarkan konfigurasi yang kita simpan di database.

Langkah-langkahnya adalah sebagai berikut:

Membuat tabel app_config untuk menyimpan konfigurasi aplikasi kita

CREATE TABLE IF NOT EXISTS `app_config` (
  `key` varchar(255) NOT NULL,
  `value` varchar(255) NOT NULL,
  PRIMARY KEY (`key`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Memasukkan data konfigurasi awal kedalam tabel yang telah kita buat

INSERT INTO `app_config` (`key`, `value`) VALUES
  ('address', 'Griya Wilis Indah'),
  ('company', 'Belva Tekindo'),
  ('email', ''),
  ('fax', ''),
  ('language', 'indonesia'),
  ('phone', ''),
  ('timezone', 'Asia/Bangkok'),
  ('version', '1.0');

Membuat file application/models/m_appconfig.php untuk mengakses tabel yang telah kita buat

<?php
class M_appconfig extends CI_Model
{	
	function get_all()
	{
		$this->db->from('app_config');
		$this->db->order_by("key", "asc");
		return $this->db->get();		
	}
}

/* End of file m_appconfig.php */
/* Location: ./application/models/m_appconfig.php */

Menambahkan model M_appconfig pada file application/config/autoload.php agar di load otomatis
```
$autoload['model'] = array('M_appconfig');
```

Membuat file application/hooks/load_config.php

<?php
function load_config()
{
	$CI =& get_instance();
	
	//Memuat konfigurasi dari database kefalam konfigurasi global CI
	foreach($CI->M_appconfig->get_all()->result() as $app_config)
	{
		$CI->config->set_item($app_config->key,$app_config->value);
	}
	
	//Set konfigurasi timezone CI dengan konfigurasi dari database
	if ($CI->config->item('timezone'))
	{
		date_default_timezone_set($CI->config->item('timezone'));
	}	
}

/* End of file load_config.php */
/* Location: ./application/hooks/load_config.php */

Mengaktifkan fitur ini pada file application/config/config.php seperti berikut:
```
$config['enable_hooks'] = TRUE ;
```

Mendefinisikan hook yang akan digunakan pada saat aplikasi kita dijalankan. Buka file application/config/hooks.php untuk menambah hook baru.

$hook['post_controller_constructor'] = array(
                                'class'    => '',
                                'function' => 'load_config',
                                'filename' => 'load_config.php',
                                'filepath' => 'hooks'
                                );

Berikut ini merupakan hal yang harus diperhatikan dalam pembuatan hook. Yaitu poin dimana hook akan dijalankan. Terdapat tujuh poin dimana hook akan kita tempatkan, pada contoh diatas hook ditempatkan pada poin post_controller_constructor. Berikut penjelasan ketujuh poin tersebut.

pre_system
Kelas dan metode hook kita akan dijalankan sebelum sistem dieksekusi. Berdasar dokumentasi CodeIgniter, hanya kelas Benchmark dan Hook yang dijalankan pada poin ini.
pre_controller
Kelas dan metode hook akan dijalankan sebelum controller kita dipanggil. Semua base class, routing dan security sudah dipanggil pada poin ini.
post_controller_constructor
Akan dipanggil ketika konstruktor controller dijalankan, tapi sebelum metode controller dipanggil.
post_controller
Akan dipanggil ketika controller sudah benar-benar dijalankan.
display_override
Memungkinkan kita untuk menentukan metodologi display sesuai dengan keinginan kita.
cache_override
Mengijinkan kita untuk menampilkan mekanisme cache sesuai dengan keinginan kita.
post_system
Dijalankan ketika halaman berhasil dikirim ke browser.

Baca selengkapnya »

Validasi Form Menggunakan jQuery Validation Plugin

jQuery Validation adalah sebuah plugin jQuery yang berfungsi untuk mempermudah validasi form client-side. Cara penggunaannya adalah dengan memanggil script jquery dan jquery-validate di dlm kode html anda (biasanya diletakkan di bagian head):
Mari kita mulai dengan contoh sederhana. Klik disini untuk melihat demo. Bentuk demonstrasi tersebut berisi empat bidang: nama, e-mail, komentar dan URL. Seperti yang Anda lihat, pertama tiga bidang yang diperlukan, sedangkan bidang URL adalah opsional. Jika Anda mengirimkan formulir tanpa mengisi kolom yang diperlukan, Anda akan menerima pesan kesalahan.

Berikut adalah kode yang digunakan untuk bentuk dalam demonstrasi di atas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#form1").validate({
        rules: {
          name: "required",// simple rule, converted to {required:true}
          email: {// compound rule
          required: true,
          email: true
        },
        url: {
          url: true
        },
        comment: {
          required: true
        }
        },
        messages: {
          comment: "Please enter a comment."
        }
      });
    });
  </script>
  <style type="text/css">
    * { font-family: Verdana; font-size: 11px; line-height: 14px; }
    .submit { margin-left: 125px; margin-top: 10px;}
    .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
    .form-row { padding: 5px 0; clear: both; width: 700px; }
    label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; }
    input[type=text], textarea { width: 250px; float: left; }
    textarea { height: 50px; }
  </style>
  </head>
  <body>
    <form id="form1" method="post" action="">
      <div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
      <div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
      <div class="form-row"><span class="label">URL</span><input type="text" name="url" /></div>
      <div class="form-row"><span class="label">Your comment *</span><textarea name="comment" ></textarea></div>
      <div class="form-row"><input class="submit" type="submit" value="Submit"></div>
    </form>
  </body>
</html>

Kode tersebut diatas cukup mudah dan tidak perlu banyak penjelasan. Namun, ada beberapa poin penting yang harus di perhatian yaitu:

Harus selalu menyertakan pustaka jQuery dan plugin validasi bassistance, di bagian head.
Selalu menetapkan atribut id dari bentuk dan atribut name semua field yang ingin divalidasi.

Selanjutnya kita lihat fungsi validate() secara rinci.

$(document).ready(function() {
  $("#form1").validate({
    rules: {
      name: "required",    // simple rule, converted to {required: true}
      email: {             // compound rule
      required: true,
      email: true
      },
      url: {
        url: true
      },
      comment: {
        required: true
      }
    },
    messages: {
      comment: "Please enter a comment."
    }
  });
});

Yang kita lakukan adalah menginisialisasi form validasi menggunakan fungsi validate(). Ada beberapa parameter yang bisa kita gunakan. Dalam contoh di atas, kita hanya menggunakan dua diantaranya, untuk melihat daftar pilihan fungsi validate() silahkan klik di sini.

Dua parameter kita digunakan adalah:

rules: memungkinkan Anda untuk menentukan field yang akan divalidasi. Dalam kasus ini, kita memvalidasi nama, email, url dan komentar. Untuk setiap field, kita bisa menentukan bahwa data diperlukan untuk suatu field (required: true). Kita bisa pula menentukan bahwa suatu data adalah berupa alamat e-mail yang valid, URL yang valid, dll.
messages: memungkinkan Anda untuk menentukan pesan kesalahan untuk field tertentu (seperti kolom komentar dalam contoh di atas). Jika Anda tidak menentukannya, maka pesan default yang akan ditampilkan "this field is required".

Baca selengkapnya »

Submit Form Dengan Ajax Menggunakan jQuery

Pada website biasa ketika kita mengklik suatu tombol/link tertentu maka browser akan melakukan refresh dimana document HTML akan di baca dari awal dan layar browser akan menjadi blank sesaat, karena pada saat itu browser sedang meminta/merequest data dari web server. Hal ini tentu membuat aplikasi website menjadi kurang interaktif dan responsif. Ajax digunakan untuk memecahkan masalah tersebut, Ajax membuat aplikasi website menjadi lebih interaktif dan responsif serta memiliki kecepatan dalam memproses request ke server. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah yaitu kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Berikut ini akan di dijelaskan bagaimana cara membuat submit form dengan Ajax menggunakan jQuery Versi 1.2.3, kita menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form-nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya.

Script pada file ajaxform.html nya adalah sbb:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Form</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function() {

 $().ajaxStart(function() {
  $('#loading').show();
  $('#result').hide();
 }).ajaxStop(function() {
  $('#loading').hide();
  $('#result').fadeIn('slow');
 });

 $('#myForm').submit(function() {
  $.ajax({
   type: 'POST',
   url: $(this).attr('action'),
   data: $(this).serialize(),
   success: function(data) {
    $('#result').html(data);
   }
  })
  return false;
 });
})
</script>
<style type="text/css">
body, table, input, select, textarea { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999; }
td { padding: 5px; }
#result { background-color: #F0FFED; border: 1px solid #215800; padding: 10px; width: 400px; margin-bottom: 20px; }
</style>
</head>
<body>
<h4>AJAX Form</h4>
<div id="loading" style="display:none;"><img src="loading.gif" alt="loading..." /></div>
<div id="result" style="display:none;"></div>
<form id="myForm" method="post" action="proses.php">
 <table>
  <tr>
   <td width="100">NIM</td>
   <td>
    <input name="nim" size="30" type="text" />
   </td>
  </tr>
  <tr>
   <td>Nama</td>
   <td>
    <input name="nama" size="40" type="text" />
   </td>
  </tr>
  <tr>
   <td>Tempat Lahir</td>
   <td>
    <input name="tempat_lahir" size="40" type="text" />
   </td>
  </tr>
  <tr>
   <td>Tanggal Lahir</td>

   <td>
    <input name="tgl_lahir" size="40" type="text" />
   </td>
  </tr>
  <tr>
   <td>Alamat</td>
   <td>
    <input name="alamat" size="60" type="text" />
   </td>
  </tr>
  <tr>
   <td>No. Telp</td>
   <td>
    <input name="no_telp" size="30" type="text" />
   </td>
  </tr>
  <tr>
   <td>No. HP</td>
   <td>
    <input name="no_hp" size="30" type="text" />
   </td>
  </tr>
  <tr>
   <td>E-mail</td>
   <td>
    <input name="email" id="email" size="30" type="text" />
   </td>
  </tr>
  <tr>
   <td></td>
   <td>
    <input type="submit" value="Submit" />
    <input type="reset" value="Reset" />
   </td>
  </tr>
 </table>
</form>
</body>
</html>

Untuk mengimplementasikan Ajax, pada file form.html ini kita gunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan kita gunakan di antaranya adalah sbb:

type: jenis request yang dipakai, bisa 'POST' atau 'GET'
url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb menggunakan $(this).attr('action')
data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring dari form, saya menggunakan fungsi serialize()
success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file proses.php (hasil output ini akan saya tampilkan ke dalam sebuah div dengan id="result" )

Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sbb:

<?php
//validasi
if (trim($_POST['nim']) == '') {
 $error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
 $error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '') {
 $error[] = '- Tempat Lahir harus diisi';
}
//dan seterusnya
 
if (isset($error)) {
 echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
 /*
 jika data mau dimasukkan ke database,
 maka perintah SQL INSERT bisa ditulis di sini
 */
 
 $data = '';
 foreach ($_POST as $k => $v) {
  $data .= "$k : $v<br />";
 }
 echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>';
 echo '<br />';
 echo $data;
}
die();
?>

Setelah file proses.php ini berhasil dijalankan maka hasil outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html

Baca selengkapnya »