codeigniter indonesia
Tutorial

CodeIgniter Indonesia 8 Kasus 1. Penanganan dan Validasi Form

Pada bab ini akan dibahas mengenai penanganan form dan cara melakukan validasi terhadap sebuah form inputan. Penanganan form artinya bagaimana cara kita untuk mendapatkan dan mengolah data yang dikirimkan oleh pengguna melalui form. Untuk membuat form sendiri, sebaiknya kita menggunakan helper form. Setelah kita berhasil mendapatkan data dari user, kta harus  memvalidasi  data-data  yang  telah  dikirimkan  tersebut  agar  aplikasi  yang  kita  bangun menjadi aman. Inputan yang tidak divalidasi membuat aplikasi kita rentan terhadap serangan seperti Sql Injection, Xss dan lain-lain.

Penanganan Form

Untuk menangani form kita membutuhkan library input. Library tersebut sudah dipanggil secara otomatis oleh codeigniter. Fungsi yang tersedia pada library ini selain untuk menangani form juga memiliki fungsi security/keamanan. Contohnya untuk menghandle atau memfilter xss kita dapat menggunakan fungsi xss_filter.

$nama = $this->input->xss_filter($this->input->post(‘nama’));

Jika kita ingin melindungi seluruh aplikasi dari dengan xss filter maka kita bisa menconfignya dengan mengubah konfigurasi di system/application/config/config.php dari

$config[‘global_xss_filtering’] = FALSE;

Menjadi

$config[‘global_xss_filtering’] = TRUE;

Selain kedua cara diatas, kita dapat juga menggunakan parameter kedua dari fungsi post atau get maka kita akan mendapatkan hasil yang sama dengan kedua cara diatas, contohnya

$this->input->post(‘nama’, TRUE);

$this->input->get(‘nama’, TRUE);

Fungsi post digunakan untuk menangkap inputan POST sedangkan get digunakan untuk menangkap inputan GET. Selain itu fungsi input juga dapat digunakan untuk cookie, variabel SERVER, dan user agent

$this->input->cookie(‘nama_cookie’, TRUE);

$this->input->ip_address();

$this->input->server(‘PATH_INFO’, TRUE);

Selain library input, Codeigniter juga menyediakan sebuah helper untuk mempermudah penanganan form. Helper tersebut adalah helper form. Helper tersebut membantu kita dalam membuat form pada view. Adapun cara meload helper form adalah

$this->load->helper(‘form’);

Ada banyak fungsi yang disediakan oleh helper ini diantaranya form_open(), form_close(), form_open_multipart(), form_hidden(), form_password(), form_textarea(), form_dropdown(), form_multiselect(), form_fieldset() dan lain-lain. Untuk lebih detailnya anda dapat melihat pada dokumentasi codeigniter. Pada kasus ini, fungsi yang banyak digunakan adalah fungsi diantaranya form_open(), form_close() dan form_input().

Form_open() berfungsi untuk menghasilkan tag form (<form>) pada html. Contoh:

$attributes = array(‘class’ => ’email’, ‘id’ => ‘myform’);

echo form_open(‘form/send’, $attributes);

Maka akan menghasilkan

<form method=”post” accept-charset=”utf-8″ action= “http:/localhost/index.php/email/send”  class=”email”  id=”myform” />

Form_input berfungsi untuk menggenerate tag input pada html. Fungsi ini dapat dipakai dengan dua cara. Cara pertama adalah dengan memasukkan nama tag dan valunya. Contoh:

echo form_input(‘username’, ‘ibnoe’);

akan menghasilkan

<input type=”text” name=”username” id=”username” value=”ibnoe”>

Cara kedua adalah dengan mempassing array kedalam fungsi tersebut. Cara ini adalah cara yang advance dan sangat berguna jika kita ingin mengcustomisasi  inputan. Contohnya:

$data = array(

‘name’       => ‘username’,

‘id’         => ‘username’,

‘value’      => ‘ibnoe’,

‘maxlength’  => ‘100’,

‘size’       => ’50’,

‘style’      => ‘width:50%’,

);

echo form_input($data);

Akan menghasilkan output :

<input type=”text” name=”username” id=”username” value=”ibnoe” maxlength=”100″ size=”50″ style=”width:50%” />

Untuk contoh menangani form maka ikutilah langkah-langkah berikut ini.

  1. Membuat Controller Hitung

Perlu diingat hal pertama yang harus di konfigurasi pada setiap aplikasi adalah BASE_URL. Setelah melakukan konfigurasi base_url pada file application/config/config.php   maka kita akan membuat sebuah controller yang akan menangani proses perkalian dan pembagian. Konfigurasi pada base_url dilakukan supaya penggunaan library url menghasilkan keluaran yang tepat. Perhatikan code berikut ini:

Application/controllers/hitung.php

<?php if (! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);

 

class Hitung extends CI_Controller {

 

function construct()

{

parent:: construct();

$this->load->helper(array(‘url’,’form’));

}

 

function index()

{

$this->load->view(‘menu_hitung’);

}

 

function perkalian()

{

$data[‘v1’]=(int)$this->input->post(‘v1’,true);

$data[‘v2’]=(int)$this->input->post(‘v2’,true);

$data[‘hasil’]=$data[‘v1’]*$data[‘v2’];

$this->load->view(‘perkalian’,$data);

}

 

function pembagian()

{

$data[‘v1’]=(int)$this->input->post(‘v1’,true);

$data[‘v2’]=(int)$this->input->post(‘v2’,true);

if ($data[‘v2’]>0)

$data[‘hasil’]=$data[‘v1’]/$data[‘v2’];

else

$data[‘hasil’]=’Error, v2 tidak boleh 0!’;

$this->load->view(‘pembagian’,$data);

}

}

 

Pada baris ke 8, dilakukan loading terhadap helper url dan form sekaligus. Loading tersebut dilakukan dalam fungsi konstruktor karena kedua  helper  tersebut  digunakan  pada  semua fungsi dan view yang ada. Pada kelas hitung tersebut, terdapat 3 fungsi yaitu index, perkalian dan pembagian. Pada fungsi index hanya berisi sebuah pemanggilan terhadap view. View

tersebut  akan  berisi  menu-menu  yang  akan  mengarahkan  pengguna  untuk  melakukan perkalian atau pembagian.

Pada fungsi perkalian dan pembagian akan dilakukan proses perkalian atau pembagian. Pada fungsi tersebut, variabel yang berasal dari view akan ditangkap menggunakan fungsi post (berarti dikirimkan melalui POST method).

  1. Membuat View

Setelah membuat controller maka kita akan membuat view yang merupakan interface dari aplikasi tersebut. Code berikut ini adalah view menu_hitung. View ini berisi navigasi ke fungsi perkalian dan pembagian.

Application/views/menu_hitung.php

  1. <!DOCTYPE html>
  2. <htmllang=”en”>
  3. <head>
  4. <metacharset=”utf-8″>
  5. <title>Welcome to CodeIgniter</title>

6.

  1. <styletype=”text/css”>

8.

  1. body {
  2. background-color: #fff;
  3. margin: 40px;
  4. font-family: Lucida Grande, Verdana, Sans-serif;
  5. font-size: 14px;
  6. color: #4F5155;
  7. }

16.

  1. a {
  2. color: #003399;
  3. background-color: transparent;
  4. font-weight: normal;
  5. }

22.

  1. h1 {
  2. color: #444;
  3. background-color: transparent;
  4. border-bottom: 1px solid #D0D0D0;
  5. font-size: 16px;
  6. font-weight: bold;
  7. margin: 24px 0 2px 0;
  8. padding: 5px 0 6px 0;
  9. }

32.

  1. </style>
  2. </head>
  3. <body>

36.

  1. <h1>CodeIgniter 2.0 dan Form!</h1>

38.

  1. <p>Silakan pilih menu dibawah ini.</p>
  2. <ul>
  3. <li><?php echo anchor(‘hitung/perkalian’,’Perkalian’);?>
  4. <li><?php echo anchor(‘hitung/pembagian’,’Pembagian’);?>
  5. </ul>
  6. <p><br/>Page rendered in {elapsed_time} seconds</p>

45.

  1. </body></html>

Perhatikan baris ke-41 dan ke-42, itu adalah contoh penggunaan helper. Fungsi anchor bertujuan untuk membuat sebuah link ke page tertentu. Berikut ini adalah tampilan dari view diatas jika dipanggil.

Screenshoot view menu_hitung

Setelah menu hitung selanjutnya membuat view untuk perkalian dan pembagian. Adapun view perkalian adalah sebagai berikut.

Application/views/perkalian.php

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>Welcome to CodeIgniter</title>

6.

  1. <style type=”text/css”>

8.

  1. body {
  2. background-color: #fff;
  3. margin: 40px;
  4. font-family: Lucida Grande, Verdana, Sans-serif;
  5. font-size: 14px;
  6. color: #4F5155;
  7. }

16.

  1. a {
  2. color: #003399;
  3. background-color: transparent;
  4. font-weight: normal;
  5. }

22.

  1. h1 {
  2. color: #444;
  3. background-color: transparent;
  4. border-bottom: 1px solid #D0D0D0;
  5. font-size: 16px;
  6. font-weight: bold;
  7. margin: 24px 0 2px 0;
  8. padding: 5px 0 6px 0;
  9. }

32.

  1. </style>
  2. </head>
  3. <body>

36.

  1. <h1>Perkalian!</h1>

38.

  1. <p>Silakan masukan data berikut!!</p>
  2. <?php echo form_open(‘hitung/perkalian’);?>
  3. <?php echo form_input(‘v1’,$v1);?> x
  4. <?php echo form_input(‘v2’,$v2);?><br>

43.

  1. <?php echo form_submit(‘submit’,’Hitung!!’);?>
  2. <?php echo form_close();?><br>
  3. Hasil : <?php echo $hasil;?>

47.

  1. <p><br/>Page rendered in {elapsed_time} seconds</p>

49.

  1. </body></html>

Pada view ini banyak digunakan helper form (baris 40 – 45). Tag input yang ada pada view ini di- generate oleh fungsi form_input dan tombol submit oleh fungsi form_submit. Adapun tampilan datil view tersebut adalah

Screenshoot view perkalian

Yang terakhir adalah membuat view untuk pembagian. Pada prinsipnya pembuatanya sama saja dengan view perkalian tetapi bentuk layoutnya berbeda.

Application/views/pembagian.php

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>Welcome to CodeIgniter</title>

6.

  1. <styletype=”text/css”>

8.

  1. body {
  2. background-color: #fff;
  3. margin: 40px;
  4. font-family: Lucida Grande, Verdana, Sans-serif;
  5. font-size: 14px;
  6. color: #4F5155;
  7. }

16.

  1. a {
  2. color: #003399;
  3. background-color: transparent;
  4. font-weight: normal;
  5. }

22.

  1. h1 {
  2. color: #444;
  3. background-color: transparent;
  4. border-bottom: 1px solid #D0D0D0;
  5. font-size: 16px;
  6. font-weight: bold;
  7. margin: 24px 0 2px 0;
  8. padding: 5px 0 6px 0;
  9. }

32.

  1. </style>
  2. </head>
  3. <body>

36.

  1. <h1>pembagian!</h1>

38.

  1. <p>Silakan masukan data berikut!!</p>
  2. <?php echo form_open(‘hitung/pembagian’);?>
  3. <?php echo form_input(‘v1’,$v1);?> /
  4. <?php echo form_input(‘v2’,$v2);?><br>

43.

  1. <?php echo form_submit(‘submit’,’Hitung!!’);?>
  2. <?php echo form_close();?><br>
  3. Hasil : <?php echo $hasil;?>

47.

  1. <p><br/>Page rendered in {elapsed_time} seconds</p>
  2. </body></html>

Berikut ini adalah tampilan dari form pembagian

Screenshoot view pembagian

Catatan :

Menggunakan Validasi Form

Sebenarnya  sampai  pada  tahap  kedua  di  atas  kita  telah  mampu  membuat  sebuah  aplikasi perkalian dan pembagian sederhana, tetapi sebuah aplikasi yang baik harus memiliki sebuah kontrol terhadap inputan user.

Validation form sangat penting pada aplikasi. Sebuah aplikasi akan memiliki banyak inputan dari pengguna dan semua inputan untuk pengguna harus aman. CodeIgniter memiliki sebuah library Form Validation Library yang akan membantu kita untuk membuat sebuah validasi yang cepat, mudah dan aman.

Pada contoh validasi form ini hampir sama dengan 2 langkah diatas, tetapi memiliki sedikit penambahan terutama dalam fungsi perkalian dan pembagian. Perhatikan controller hitung berikut ini (contoller berikut ini berasal dari contoh sebelumnya dengan penambahan).

Application/controllers/hitung.php

  1. <?php if (! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);

2.

  1. class Hitung extends CI_Controller {

4.

  1. function construct()
  2. {

 

7.

8.

9.

10.

construct();

 

d->helper(array(‘url’,’form’));

 

  1. function index()
  2. {
  3. $this->load->view(‘menu_hitung’);
  4. }

15.

16.

  1. function perkalian()
  2. {
  3. $this->load->library(‘form_validation’);
  4. $this->form_validation->set_rules(‘v1′,’Variabel 1’,
  5. ‘required|integer’);
  6. $this->form_validation->set_rules(‘v2′,’Variabel 2’,
  7. ‘required|integer’);
  8. if ($this->form_validation->run())
  9. {
  10. $data[‘v1’]=(int)$this->input->post(‘v1’,true);
  11. $data[‘v2’]=(int)$this->input->post(‘v2’,true);
  12. $data[‘hasil’]=$data[‘v1’]*$data[‘v2’];
  13. }
  14. else
  15. {
  16. $data[‘v1’]=0;
  17. $data[‘v2’]=0;
  18. $data[‘hasil’]=0;

 

 

  1. }
  2. $this->load->view(‘perkalian’,$data);
  3. }

38.

  1. function pembagian()
  2. {
  3. $this->load->library(‘form_validation’);
  4. $this->form_validation->set_rules(‘v1′,’Variabel 1’,
  5. ‘required|is_natural_no_zero’);
  6. $this->form_validation->set_rules(‘v2′,’Variabel 2’,
  7. ‘required|is_natural_no_zero’);
  8. if ($this->form_validation->run())
  9. {
  10. $data[‘v1’]=(int)$this->input->post(‘v1’,true);
  11. $data[‘v2’]=(int)$this->input->post(‘v2’,true);
  12. $data[‘hasil’]=$data[‘v1’]/$data[‘v2’];
  13. }
  14. else
  15. {
  16. $data[‘v1’]=0;
  17. $data[‘v2’]=0;
  18. $data[‘hasil’]=0;
  19. }

58.

  1. $this->load->view(‘pembagian’,$data);
  2. }

61.

  1. }

 

Perhatikan  baris  19-24  pada  fungsi  perkalian,  disana  kita  me-load  sebuah  library  bernama

form_validation. Library tersebut memiliki fungsi untuk melakukan validasi terhadap inputan user berdasarkan aturan yang telah kita tentukan. Perhatikan baris 20

 

$this->form_validation->set_rules(‘v1′,’Variabel 1′,’required|integer’);

 

Baris  di  atas  merupakan  salah  satu  contoh  untuk  menentukan  aturan  inputan  pada  form. Parameter pertama (berisi v1) merupakan name dari inputan yang akan divalidasi (harus sama dengan attribut name pada tag input contoh: <input name=”v1”>). Parameter kedua adalah nama dari inputan tersebut. Nama tersebut dapat berbeda atau sama dengan   name pada parameter pertama. Parameter ketiga merupakan aturan dari inputan tersebut. Aturan-aturan tersebut harus dipatuhi agar sebuah form dapat diproses. Aturan-aturan tersebut dipisahkan oleh tanda |. Pada contoh  di  atas  berarti  inputan  v1  harus  diisi  (required)  dan  berisi  data  integer(integer). Adapun  aturan-aturan yang tersedia di dalam CodeIgniter adalah:

 

Aturan Keterangan
required Isi inputan tidak boleh kosong.
matches Isi    inputan    harus    sama    dengan    inputan    tertentu    contoh

 

 

matches[password]
min_length Panjang  inputan  harus  memiliki  jumlah  minimal  karakter,  contoh

 

penggunaan min_length[6] artinya panjang inputan harus lebih besar dari 6 karakter.

max_length Panjang inputan harus memiliki jumlah maksimal karakter, contoh

 

max_length[12]  artinya  panjang  inputan  tidak  boleh  lebih  dari  12 karakter.

exact_length Panjang   inputan   harus   sama   dengan   jumlah   karakter   yang

 

diinginkan,  contoh  exact_length[8]  artinya  panjang  inputan  harus sama dengan 8 karakter.

alpha Inputan harus berisi semua huruf alfabet mulai dari a-z.
alpha_numeric Inputan harus berisi karakter alfabet dan numeric.
alpha_dash Inputan harus berisi semua huruf alfabet mulai dari a-z , underscores

 

atau dashes.

numeric Inputan hanya boleh berisi angka / huruf numeric.
integer Inputan hanya boleh berisi angka integer saja.
is_natural Inputan hanya boleh berisi bilangan natural saja: 0, 1, 2, 3, dan

 

seterusnya.

is_natural_no_zero Inputan hanya boleh berisi bilangan natural saja kecuali nol: 1, 2, 3,

 

dan seterusnya.

valid_email Inputan harus berisi format email yang benar.
valid_emails Inputan harus berisi format email yang benar di batasi dengan koma

 

jika alamat email lebih dari satu.

valid_ip Inputan harus berisi format IP yang benar.
valid_base64 Inputan harus berisi format karakter base64 yang benar.

 

 

 

Pada  baris-46,  kita  melakukan  pengecekan  terhadap  rule-rule  yang  telah  diset  ($this-

 

>form_validation->run())). Fungsi tersebut akan menghasilkan nilai TRUE apabila semua

 

 

rule terpenuhi dan menghasilkan nilai FALSe jika sebaliknya. Selain fungsi-fungsi diatas Anda juga dapat membuat custom validation jika aturan-aturan di atas tidak ada yang memenuhi dengan kebutuhan Anda.

 

  1. <!DOCTYPE html>
  2. <htmllang=”en”>
  3. <head>
  4. <meta charset=”utf-8″>
  5. <title>Perkalian menggunakan validasi!!</title>

6.

  1. <style type=”text/css”>

8.

  1. body {
  2. background-color: #fff;
  3. margin: 40px;
  4. font-family: Lucida Grande, Verdana, Sans-serif;
  5. font-size: 14px;
  6. color: #4F5155;
  7. }

16.

  1. a {
  2. color: #003399;
  3. background-color: transparent;
  4. font-weight: normal;
  5. }

22.

  1. h1 {
  2. color: #444;
  3. background-color: transparent;
  4. border-bottom: 1px solid #D0D0D0;
  5. font-size: 16px;
  6. font-weight: bold;
  7. margin: 24px 0 2px 0;
  8. padding: 5px 0 6px 0;
  9. }

32.

  1. </style>
  2. </head>
  3. <body>

36.

  1. <h1>Perkalian!</h1>
  2. <?php echo validation_errors();?>
  3. <p>Silakan masukan data berikut!!</p>
  4. <?php echo form_open(‘hitung/perkalian’);?>
  5. <?php echo form_input(‘v1’,$v1);?> x
  6. <?php echo form_input(‘v2’,$v2);?><br>

43.

  1. <?php echo form_submit(‘submit’,’Hitung!!’);?>
  2. <?php echo form_close();?><br>
  3. Hasil : <?php echo $hasil;?>

47.

  1. <p><br/>Page rendered in {elapsed_time} seconds</p>

49.

  1. </body></html>

 

 

Pada view, kita cukup menambahkan satu fungsi yang berguna untuk menampilkan kesalahan yang terjadi. Perhatikan baris 38. Fungsi validations_error adalah fungsi untuk menampilkan kesalahan dari validasi yang dilakukan.

 

Form perkalian dengan tampilan error

 

Begitu  juga  untuk  view  pembagian,  kita  tinggal  menambah  fungsi  validations_error  untuk menampilkan error pada form pembagian. Adapun code yang dapat digunakan adalah

 

 

  1. <!DOCTYPE html>
  2. <!DOCTYPE html>
  3. <html lang=”en”>
  4. <head>
  5. <meta charset=”utf-8″>
  6. <title>Pembagian menggunakan validasi!!</title>

7.

  1. <style type=”text/css”>

9.

  1. body {
  2. background-color: #fff;
  3. margin: 40px;
  4. font-family: Lucida Grande, Verdana, Sans-serif;
  5. font-size: 14px;
  6. color: #4F5155;
  7. }

17.

  1. a {
  2. color: #003399;
  3. background-color: transparent;
  4. font-weight: normal;
  5. }

23.

  1. h1 {
  2. color: #444;
  3. background-color: transparent;
  4. border-bottom: 1px solid #D0D0D0;
  5. font-size: 16px;
  6. font-weight: bold;

 

 

  1. margin: 24px 0 2px 0;
  2. padding: 5px 0 6px 0;
  3. }

33.

34.

  1. </style>
  2. </head>
  3. <body>

38.

  1. <h1>pembagian!</h1>
  2. <?php echo validation_errors();?>
  3. <p>Silakan masukan data berikut!!</p>
  4. <?php echo form_open(‘hitung/pembagian’);?>
  5. <?php echo form_input(‘v1’,$v1);?> /
  6. <?php echo form_input(‘v2’,$v2);?><br>

45.

  1. <?php echo form_submit(‘submit’,’Hitung!!’);?>
  2. <?php echo form_close();?><br>
  3. Hasil : <?php echo $hasil;?>

49.

  1. <p><br/>Page rendered in {elapsed_time} seconds</p>

51.

  1. </body></html>

 

View diatas akan memberikan tampilan seperti gambar 11 berikut ini.

 

Gambar 11. Form perkalian dengan tampilan error

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

%d blogger menyukai ini: