7. Kasus 1. Penanganan dan Validasi Form

— Leave a comment

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

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 :

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

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

24. function pembagian()
25. {
26. $data[‘v1’]=(int)$this->input->post(‘v1’,true);
27. $data[‘v2’]=(int)$this->input->post(‘v2’,true);
28. if ($data[‘v2’]>0)
29. $data[‘hasil’]=$data[‘v1’]/$data[‘v2’];
30. else
31. $data[‘hasil’]=’Error, v2 tidak boleh 0!’;
32. $this->load->view(‘pembagian’,$data);
33. }
34. }

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

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.
7. <styletype=”text/css”>
8.
9. body {
10. background-color: #fff;
11. margin: 40px;
12. font-family: Lucida Grande, Verdana, Sans-serif;
13. font-size: 14px;
14. color: #4F5155;
15. }
16.
17. a {
18. color: #003399;
19. background-color: transparent;
20. font-weight: normal;
21. }
22.
23. h1 {
24. color: #444;
25. background-color: transparent;
26. border-bottom: 1px solid #D0D0D0;
27. font-size: 16px;
28. font-weight: bold;
29. margin: 24px 0 2px 0;
30. padding: 5px 0 6px 0;
31. }
32.
33. </style>
34. </head>
35. <body>
36.
37. <h1>CodeIgniter 2.0 dan Form!</h1>
38.

39. <p>Silakan pilih menu dibawah ini.</p>
40. <ul>
41. <li><?php echo anchor(‘hitung/perkalian’,’Perkalian’);?>
42. <li><?php echo anchor(‘hitung/pembagian’,’Pembagian’);?>
43. </ul>
44. <p><br/>Page rendered in {elapsed_time} seconds</p>
45.
46. </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.

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

Application/views/perkalian.php

23. h1 {
24. color: #444;
25. background-color: transparent;
26. border-bottom: 1px solid #D0D0D0;
27. font-size: 16px;
28. font-weight: bold;
29. margin: 24px 0 2px 0;
30. padding: 5px 0 6px 0;
31. }
32.
33. </style>
34. </head>
35. <body>
36.
37. <h1>Perkalian!</h1>
38.
39. <p>Silakan masukan data berikut!!</p>
40. <?php echo form_open(‘hitung/perkalian’);?>
41. <?php echo form_input(‘v1’,$v1);?> x
42. <?php echo form_input(‘v2’,$v2);?><br>
43.
44. <?php echo form_submit(‘submit’,’Hitung!!’);?>
45. <?php echo form_close();?><br>
46. Hasil : <?php echo $hasil;?>
47.
48. <p><br/>Page rendered in {elapsed_time} seconds</p>
49.
50. </body></html>

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

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.
7. <styletype=”text/css”>
8.
9. body {
10. background-color: #fff;
11. margin: 40px;
12. font-family: Lucida Grande, Verdana, Sans-serif;
13. font-size: 14px;
14. color: #4F5155;
15. }
16.
17. a {
18. color: #003399;
19. background-color: transparent;
20. font-weight: normal;
21. }
22.
23. h1 {
24. color: #444;
25. background-color: transparent;
26. border-bottom: 1px solid #D0D0D0;
27. font-size: 16px;
28. font-weight: bold;
29. margin: 24px 0 2px 0;
30. padding: 5px 0 6px 0;
31. }
32.
33. </style>
34. </head>
35. <body>
36.
37. <h1>pembagian!</h1>
38.

39. <p>Silakan masukan data berikut!!</p>
40. <?php echo form_open(‘hitung/pembagian’);?>
41. <?php echo form_input(‘v1’,$v1);?> /
42. <?php echo form_input(‘v2’,$v2);?><br>
43.
44. <?php echo form_submit(‘submit’,’Hitung!!’);?>
45. <?php echo form_close();?><br>
46. Hasil : <?php echo $hasil;?>
47.
48. <p><br/>Page rendered in {elapsed_time} seconds</p>
49. </body></html>

Berikut ini adalah tampilan dari form pembagian

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.
3. class Hitung extends CI_Controller {
4.
5. function __construct()
6. {
7. parent::__construct();
8. $this->load->helper(array(‘url’,’form’));
9. }
10.
11. function index()
12. {
13. $this->load->view(‘menu_hitung’);
14. }
15.
16.
17. function perkalian()
18. {
19. $this->load->library(‘form_validation’);
20. $this->form_validation->set_rules(‘v1′,’Variabel 1’,
21. ‘required|integer’);
22. $this->form_validation->set_rules(‘v2′,’Variabel 2’,
23. ‘required|integer’);
24. if ($this->form_validation->run())
25. {
26.    $data[‘v1’]=(int)$this->input->post(‘v1’,true);
27.    $data[‘v2’]=(int)$this->input->post(‘v2’,true);
28.    $data[‘hasil’]=$data[‘v1’]*$data[‘v2’];
29. }
30. else
31. {
32.    $data[‘v1’]=0;
33.    $data[‘v2’]=0;
34.    $data[‘hasil’]=0;

35. }
36. $this->load->view(‘perkalian’,$data);
37. }
38.
39. function pembagian()
40. {
41. $this->load->library(‘form_validation’);
42. $this->form_validation->set_rules(‘v1′,’Variabel 1’,
43. ‘required|is_natural_no_zero’);
44. $this->form_validation->set_rules(‘v2′,’Variabel 2’,
45. ‘required|is_natural_no_zero’);
46. if ($this->form_validation->run())
47. {
48.    $data[‘v1’]=(int)$this->input->post(‘v1’,true);
49.    $data[‘v2’]=(int)$this->input->post(‘v2’,true);
50.    $data[‘hasil’]=$data[‘v1’]/$data[‘v2’];
51. }
52. else
53. {
54.    $data[‘v1’]=0;
55.    $data[‘v2’]=0;
56.    $data[‘hasil’]=0;
57. }
58.
59. $this->load->view(‘pembagian’,$data);
60. }
61.
62. }

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:

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.
7. <style type=”text/css”>
8.
9. body {
10. background-color: #fff;
11. margin: 40px;
12. font-family: Lucida Grande, Verdana, Sans-serif;
13. font-size: 14px;
14. color: #4F5155;
15. }
16.
17. a {
18. color: #003399;
19. background-color: transparent;
20. font-weight: normal;
21. }
22.
23. h1 {
24. color: #444;
25. background-color: transparent;
26. border-bottom: 1px solid #D0D0D0;
27. font-size: 16px;
28. font-weight: bold;
29. margin: 24px 0 2px 0;
30. padding: 5px 0 6px 0;
31. }
32.
33. </style>
34. </head>
35. <body>
36.
37. <h1>Perkalian!</h1>
38. <?php echo validation_errors();?>
39. <p>Silakan masukan data berikut!!</p>
40. <?php echo form_open(‘hitung/perkalian’);?>
41. <?php echo form_input(‘v1’,$v1);?> x
42. <?php echo form_input(‘v2’,$v2);?><br>
43.
44. <?php echo form_submit(‘submit’,’Hitung!!’);?>
45. <?php echo form_close();?><br>
46. Hasil : <?php echo $hasil;?>
47.
48. <p><br/>Page rendered in {elapsed_time} seconds</p>
49.
50. </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.

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.
8. <style type=”text/css”>
9.
10. body {
11. background-color: #fff;
12. margin: 40px;
13. font-family: Lucida Grande, Verdana, Sans-serif;
14. font-size: 14px;
15. color: #4F5155;
16. }
17.
18. a {
19. color: #003399;
20. background-color: transparent;
21. font-weight: normal;
22. }
23.
24. h1 {
25. color: #444;
26. background-color: transparent;
27. border-bottom: 1px solid #D0D0D0;
28. font-size: 16px;
29. font-weight: bold; 30. margin: 24px 0 2px 0;
31. padding: 5px 0 6px 0;
32. }
33.
34.
35. </style>
36. </head>
37. <body>
38.
39. <h1>pembagian!</h1>
40. <?php echo validation_errors();?>
41. <p>Silakan masukan data berikut!!</p>
42. <?php echo form_open(‘hitung/pembagian’);?>
43. <?php echo form_input(‘v1’,$v1);?> /
44. <?php echo form_input(‘v2’,$v2);?><br>
45.
46. <?php echo form_submit(‘submit’,’Hitung!!’);?>
47. <?php echo form_close();?><br>
48. Hasil : <?php echo $hasil;?>
49.
50. <p><br/>Page rendered in {elapsed_time} seconds</p>
51.
52. </body></html>

View diatas akan memberikan tampilan seperti gambar 11 berikut ini.

Sumber : Buku Framework CodeIgniter

7. Kasus 1. Penanganan dan Validasi Form

Penanganan Form

Menggunakan Validasi Form

Share this:

Leave a comment Cancel reply