Tujuan: Membuat form beserta validasinya dengan CodeIgniter.
Kebutuhan: CodeIgniter PHP Framework baik versi 2 maupun versi 3, bisa didownload di
sini. Dan Webserver Package seperti Xampp pada link
ini.
Kebutuhan User : Kemampuan
PHP, kemampuan
Mysql, Kemampuan
HTML, dan (sedikit saja cukuplah) kemampuan
CodeIgniter.
Dalam men-
develop sebuah aplikasi berbasis web, mau tidak
mau pasti kita akan sering menggunakan form. Form sangat berguna untuk
membuat antarmuka penginputan data ke dalam database. Untuk mem-
prevent
agar data input yang masuk ke database benar, atau sesuai dengan yang
diinginkan, maka diperlukan suatu validasi. Pada bahasa pemrograman PHP,
pada umumnya validasi dibuat dengan menggunakan fungsi ereg, dengan
memanfaatkan
regular expression (
regex). Dan percayalah, kalau
regex ini sangat rumit. Hahahah
Dengan menggunakan
CodeIgniter, validasi jauh lebih mudah dibuat apabila dibandingkan dengan php biasa.
Ohya, ini adalah sebuah validasi server-side. Jelasnya, validasi
dilakukan dari sisi server sehingga secara otomatis sistem validasi ini
akan lebih aman dibandingkan dengan client-side validation (biasanya
dibuat dengan javascript)
Okay, langsung praktikum…
Step 1 : Konfigurasi CI
- Buka file config.php yang berada dalam folder system-application-config-config.php
- Ubah base url, sesuaikan dengan lokasi dimana folder CI-mu
berada (tempat ekstrak-an tadi). Contoh : Folder CI anda berada
dalam folder www/ci
maka ubah baris
$config['base_url']="http://example.com/";
dengan
$config['base_url'] = "http://localhost/ci/";
- Setting database. Buka file database.php yang berada dalam folder yang sama dengan config.php. Ubah hostname, username, password, dan nama database. Sesuaikan dengan pengaturan mysql anda. Contoh :
$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "db_code";
Step 2 : Siapkan database
- Buat database dengan nama db_code (via phpmyadmin)
- Siapkan tabel dengan nama tb_student (untuk strukturnya, lihat gambar dibawah ini)
tb_student's structure
- Database selesai.
Step 3 : Membuat Controller
- Ketikkan script dibawah ini dengan teks editor kesukaan anda,
<?php
class Student extends Controller {function Student(){
parent::Controller();
$this->load->library(array('table','validation'));
$this->load->helper('url');
}
function index() {
$this->_set_fields();
$data['title'] = 'Add New Student';
$data['message'] = '';
$data['action'] = site_url('student/addStudent');
$this->load->view('addStudent_view', $data);
}
function addStudent(){
$data1['title'] = 'Add New Student';
$data1['action'] = site_url('student/addStudent');
$this->_set_fields();
$this->_set_rules();
// menjalankan validasi
if ($this->validation->run() == FALSE){
$data['message'] = '';
}else{
// menyimpan data
$data= array('id' => $this->input->post('id'),
'nama' => $this->input->post('nama'),
'email' => $this->input->post('email')
);
$this->db->insert('tb_student', $data);
$data1['message'] = 'Sukses';
}
// load view
$this->load->view('addStudent_view', $data1);
}
function _set_fields(){
$fields['id'] = 'id';
$fields['nama'] = 'nama';
$fields['email'] = 'email';
$this->validation->set_fields($fields);
}
// berikut adalah rule-rule untuk validasi
function _set_rules(){
$rules['id'] = 'trim|required|numeric';
$rules['nama'] = 'trim|required';
$rules['email'] = 'trim|required|valid_email';
$this->validation->set_rules($rules);
$this->validation->set_message('required', '* harus diisi');
$this->validation->set_message('numeric', '* hanya boleh diisi dengan angka');
$this->validation->set_message('valid_email', '* email tidak valid');
$this->validation->set_error_delimiters('<p>', '</p>');
}
}
?>
- Simpan dalam folder system-application-controllers, dengan nama student.php
Step 4 : Membuat View
- Ketikkan script dibawah ini,
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form Validation CI</title>
</head>
<body>
<h1><?php echo $title; ?></h1>
<?php if (isset($message)) echo $message; ?>
<form method="post" action="<?php echo $action; ?>">
<table>
<tr>
<td valign="top">ID*</td>
<td><input type="text" name="id" value="<?php echo $this->validation->id; ?>"/>
<span style="color:red;"> <?php echo $this->validation->id_error; ?></span></td>
</tr>
<tr>
<td valign="top">Nama<span style="color:red;">*</span></td>
<td><input type="text" name="nama" value="<?php echo $this->validation->nama; ?>"/>
<span style="color:red;"> <?php echo $this->validation->nama_error; ?></span></td>
</tr>
<tr>
<td valign="top">Email<span style="color:red;">*</span></td>
<td><input type="text" name="email" value="<?php echo $this->validation->email; ?>"/>
<span style="color:red;"> <?php echo $this->validation->email_error; ?></span></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Save"/></td>
</tr>
</table>
</form>
</body>
</html>
- Simpan dalam folder system-application-views, dengan nama addStudent_view.php
Step 5 : Testing Code
- Buka browser, pergi ke http://localhost/namaFolderCIKamu/student
- Anda akan melihat tampilan seperti berikut,
Input Form
- Coba isi form dengan input salah (contoh, ID : AAA; Nama : (kosongi saja); Email : AAA)
Wrong Input (example)
- Pilih Save. Maka anda akan melihat eror ditampilkan seperti gambar dibawah,
Validation Confirmation
- Sekarang coba dengan isian benar, seperti pada gambar dibawah, lalu Save. Anda akan melihat konfirmasi sukses
Cek juga database anda, seharusnya anda akan melihat data yang baru saja anda masukkan di dalam tb_student
Correct Input (example)
[caption id="attachment_842" align="aligncenter" width="233" caption="Success Confirmation"]
[/caption]
Pada dasarnya, MVC menggunakan model, tapi hal tersebut merupakan optional untuk memudahkan kita dalam melakukan koding, agar lebih terstruktur pastinya. Contohnya
$this->db->insert('tb_student', $data); dapat di letakkan pada controller.
