» » Validasi Form JavaScript Dengan jQuery dan CodeIgniter

Validasi Form JavaScript Dengan jQuery dan CodeIgniter

Posted by resrsr on Friday, March 15, 2013

jQuery Form Validation - jQuery, seperti sudah dibahas pada postingan sebelumnya tentang pengetian jQuery, memang memliki kegunaan yang sangat membantu para web developer. CodeIgniter, pada sisi yang lain merupakan sebuah framework yang sangat mudah dipelajari. Namun, CodeIgniter tetap memberikan performa yang bagus, walaupun banyak master-master programer PHP yang memberikan kritik tentang security, terutama pendekatannya yang menggunakan cookie untuk authentifikasi user.

Validasi Form Menggunakan jQuery dan CodeIgniter

Form Validation With jQuery and CodeIgniter

Pada tutorial kali ini, Materi Informatika akan membahas mengenai validasi form menggunakan jQuery dan CodeIgniter. Kita akan menggunakan jQuery untuk validasi pada sisi client (client-side) dan PHP dengan CodeIgniter untuk validasi pada sisi server (server-side). Bagaimanapun, mengetahui dasar jQuery dan CodeIgniter akan lebih memudahkan pemahaman tutorial jQuery ini. Namun, jika kamu belum mengetahui dasar jQuery ataupun dasar CodeIgniter tidak jadi masalah, karena Materi Informatika akan memulai tutorial ini dari dasar.

Download CodeIgniter dan jQuery

Untuk keperluan tutorial ini, kita membutuhkan jQuery, CodeIgniter dan juga jQuery validation plugin. Berikut adalah versi software yang digunakan pada tutorial ini:
  1. CodeIgniter (Version 2.0.2) Download
  2. jQuery (1.6.1) Download
  3. jQuery Validation Plugin: Download
Untuk diketahui, saat ini Google menyediakan CDN untuk jQuery. CDN adalah semacam server untuk menyimpan script yang dibutuhkan oleh website. Pada lain kesempatan, Materi Informatika akan membahas apa itu CDN.
Nah, dengan CDN ini, kamu tidak harus mendownload file jQuery, namun cukup menggunakan jQuery yang di tempatkan di CDN Google tersebut. Syaratnya, kamu harus terkoneksi dengan internet walaupun kamu membuat tutorial ini pada localhost. Untuk menggunakannya, tambahkan script berikut ini pada <head> :
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

Konfigurasi CodeIgniter

Langkah pertama adalah mengkonfigurasi CodeIgniter. Kita akan menambahkan helper url dan form ke autoload CodeIgniter. Buka file autoload yang berada di application/autoload.php dan tambahkan helper berikut (line 67 sepertinya):
$autoload['helper'] =array('url','form');

Layout HTML Untuk Form

Data pada CodeIgniter ditampilkan di bagian View. Ingat tentang MVC design-pattern?.Oleh karena itu, kita akan menuliskan kode html untuk form pada bagian view, dan file view yang sama akan ditampilkan jika validasi error. Namun, jika validasi sukses, tidak ada error terjadi, makan file view yang lain yang akan ditampilkan dengan pesan sukses tentunya.
Pertama, mari kita buat header dan footer view, sehingga kita bisa mengincludekannya di form_view dan success_view.

File views/common/header.php

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Form Validation - Gazpo.com</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css" />
        <script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url();?>js/jquery.validate.js"></script>
        <script type="text/javascript" src="<?php echo base_url();?>js/jquery.validate-rules.js"></script>

    </head>
    <body>
        <div id="wrapper"> <!-- close it in footer -->

File views/common/footer.php

<div id="footer">

            <p> Tutorial by Gazpo.com.</p>



        </div>



    </div>  <!-- /wrapper  -->



    </body> <!-- closing body -->



</html>

Sekarang kita bisa menambahkannya pada form_view and success_view.

File form_view.php

File form_view berisi kode html untuk membentuk form. Pada file berikut, terdapat beberapa macam tipe input (text, radio, dropdown dll) untuk memberikan contoh pada validasi dengan berbagai macam tipe input.
Disini, untuk membuat sebuah form digunakan Form Helper dari CodeIgniter, jadi kita gunakan tag form_open daripada menggunakan tag <form>. Keuntungannya, url yang dibentuk sudah otomatis menggunakan base url.
<!-- include header -->
<?php $this->load->view('common/header'); ?>

    <!-- CodeIgniter Form tag -->
    <?php $attributes = array('id' => 'form');
          echo form_open('form/process', $attributes); ?>

    <h2>Form Validation with CodeIgniter and jQuery</h2>

    <div class="field">
    <label for="name">Name</label>
    <input class="input" id="name" name="name" type="text" />
    </div>

    <div class="field">
    <label for="password">Password</label>
    <input class="input" id="password" name="password" type="password" />
    </div>

    <div class="field">
    <label for="email">Email</label>
    <input class="input" id="email" name="email" type="text" />
    </div>   

    <div class="field">
    <label for="gender">Select Gender</label>
    <div class = "gender-fields">
    <input type="radio" class="radio" name="gender" value="male">Male
    <input type="radio" class="radio" name="gender" value="female">Female
    </div>
    </div>

    <div class="field">
    <label for="state">Select State</label>
    <select class="state" name="state">
        <option class="droplist" ></option>
        <option class="droplist" >Alabama</option>
        <option class="droplist" >Alaska</option>
        <option class="droplist" >Arizona</option>
    </select>
    </div>

    <div class="field">
    <label for="agree">Terms</label>
    <input type="checkbox" class="checkbox" name="terms" value="agree" />
    </div>

    <input type="submit" name="submit" class="submit" value="Submit">
    </form>

<!-- include footer -->
<?php $this->load->view('common/footer'); ?>

File views/success_view.php

File ini akan ditampilkan jika validasi sukses:

<!-- load header -->
<?php $this->load->view('common/header'); ?>

<!-- main content -->
<h3>Form was submitted successfully! </h3>

<!-- load footer -->
<?php $this->load->view('common/footer'); ?>

File CSS Untuk Layout

Yap, kode html kita sudah siap. Sekarang saatnya memberikan sedikit dekorasi agar terlihat bagus. Berikut file CSS untuk form kita tadi:

body {
    font-family: arial,verdana,sans-serif;
    color:#333333;
    font-size:13px;
    margin: 0 auto;
    background: #f5f5f5;
    }

#wrapper {
    margin: 0 auto;
    position: relative;
    background:#FFFFFF;
    width: 900px;
    border:10px solid #eaeaea;
    }

#form {
    padding: 10px;
    }

#form .field {
    margin-bottom:15px;
    }

#form label{
    display: block;
    float: left;
    font-weight: bold;
    margin-right:10px;
    text-align: right;
    width: 120px;
    line-height: 35px;
    font-size:14px;
    cursor: pointer;
    }

#form .checkbox{
    margin-top:10px;
    }

#form .input{
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    background-color: #eaeaea;
    background: -moz-linear-gradient(top, #ffffff, #f2f2f2);
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(0.0, #ffffff), color-stop(1.0, #f2f2f2));
    border: 1px solid #cacaca;
    font-family: inherit;
    color: #797979;
    font-size: 15px;
    padding: 8px 10px;
    width: 300px;
    font-weight: bold;
    }

#form .state{
    border: 1px solid #b9bdc1;
    padding: 5px;
    font-size: 15px;
    font-family: inherit;
    font-weight: bold;
    color: #797979;
    }

#form :focus{
    -webkit-box-shadow: 0px 0px 4px #aaa;
    -moz-box-shadow: 0px 0px 4px #aaa;
    box-shadow: 0px 0px 4px #aaa;
    }

#form .gender-fields{
    padding-top:10px;
    }

    #form  span.error {
    color:red;
    padding-left:10px;
    }

#form .info{
    margin-left:130px;
    font-size: 12px;
    font-style:italic;
    color: #999;
    }

#form .submit{
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    font-family: arial,verdana,sans-serif;
    background-color: #dedede;
    background: -moz-linear-gradient(top, #ffffff, #eaeaea);
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea));
    border: 1px solid #dedede;
    color: #484848;
    font-size:14px;
    font-weight: bold;
    padding: 8px 10px;
    cursor: pointer;
    margin-left:220px;
    }

/*-- Table design to display data in success view --*/

#display_data{
padding:10px;
}

#display_data .name{
    font-style: italic;
    text-decoration:underline;
    }

#display_data table{
    border:1px solid #e5eff8;
    margin:10px 0px;
    border-collapse:collapse;
    }

#display_data tr.even{
    background:#f7fbff
    }

#display_data tr.odd .title {
    background:#f4f9fe;
    }

#display_data td {
    border-bottom:1px solid #e5eff8;
    border-right:1px solid #e5eff8;
    color:#678197;
    padding:5px 8px;
    }

#display_data td.title{
    font-weight: bold;
    width:100px;
    text-align:right;
    }

#display_data td.info{
    font-style: italic;
    width:200px;
    }

#footer {
    width:60%;
    margin:20px auto;

    }

Controller Untuk Form

Kita perlu membuat file controller yang akan di gunakan utuk memproses form. Controller ini biasanya ada untuk action form. Buatlah file bernama form.php pada application/controllers/.
Pada fungsi index kita panggil file view untuk form:

class Form extends CI_Controller {
    public function index()
    {
        $this->load->view('form_view');
    }
Sekarang, seharusnya hasilnya bisa kita lihat melalui url:
1
http://localhost/form_validation/index.php/form
Dan form html tersebut akan terlihat seperti ini:

Judul: Validasi Form JavaScript Dengan jQuery dan CodeIgniter
Rating: 100% based on 9998 ratings. 9 user reviews.
Ditulis Oleh resrsr

Terimakasih atas kunjungan beserta kesediaan Anda membaca artikel ini. Kritik dan Saran dapat Anda sampaikan melalui Kotak komentar dibawah ini.
at 3/15/2013 07:00:00 AM
Labels: , , , ,

{ 0 comments... read them below or add one }


Post a Comment

Silahkan tinggalkan komentar :)