Case Study : Create a Form and its validation with CodeIgniter.
System Requirements : CodeIgniter PHP Framework, download here. And Webserver Package.
User Requirements : PHP skills, Mysql skills, HTML skills, and (few, enough) CodeIgniter skills.
When developing a web application, like it or not sure we will often use a form. Form is very useful to make an interface for inputing data into the database. In order to prevent the data input that saved to database is correct, or desirable, we need a validation. In PHP programming language, in general, validation is made by using the ereg functions, using regular expression (regex). And believe me, regex is very complicated. Hahahah
With CodeIgniter, validation is much easier to make when compared with normal php.
Ohya, this is a server-side validation. Clearly, validation is performed from the server side so that automatic validation system will be more secure than the client-side validation (usually made with javascript)
Okay, here we go…
Step 1 : CI Configuration
- Open the config.php file located in the system-application-config-config.php folder
- Change base url, adjust to the location where your CI folders are (ci extract folder). For example : Your CI folder is in the www/ciso change the line
$config['base_url']="http://example.com/";
with
$config['base_url'] = "http://localhost/ci/"; - Database setting. Open database.php file located in the same folder with config.php. Change hostname, username, password, dan nama database. Adjust according your Mysql setting. For Example :
$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "db_code";
Step 2 : Prepare the database
- Create a database with name db_code (via phpmyadmin)
- Prepare a table with name tb_student (for the structure, see picture below)
tb_student's structure - Ok, we’re done with database !
Step 3 : Make Controller
- Type the following script with your favorite text editor
<?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();
// run the validation
if ($this->validation->run() == FALSE){
$data['message'] = '';
}else{
// saving 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);
}
// rules for validation
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', '* required');
$this->validation->set_message('numeric', '* numeric only');
$this->validation->set_message('valid_email', '* email not valid');
$this->validation->set_error_delimiters('<p>', '</p>');
}
}
?> - Save in the system-application-controllers folder, with the name student.php
Step 4 : Create View
- Type the script below,
<!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> - Save in the system-application-views folder, with the name addStudent_view.php
Step 5 : Testing Code
- Open your browser, goto http://localhost/YourCIFolder/student
- You will see a display like the following,
Input Form - Try fill out the form with incorrect input (example, ID : AAA; Nama : (empty); Email : AAA)
Wrong Input (example) - Click Save. Then you will see the error is displayed as shown below,
Validation Confirmation - Now try to fill out the form with the correct input, as in the picture below, then Save. You will see a confirmation of success 😀 Also check your database, you should see the data you just entered in the tb_student 😀
Correct Input (example) and this…
Success Confirmation
p.s. Maybe there will be a question, this is a MVC, but, where is the model?
And the answer is : in CI, we are not always required to use models. Using code like $this->db->insert('tb_student', $data); is enough, according to complexity of your code..
Okay, (always) Happy Coding 😀