Membuat form pada codeigniter dengan jquery

1 Tanggapan

Pada kesempatan ini ane ingin memberikan sedikit tutorial tentang pembuatan form pada codeigniter dengan menggunakan jquery dalam memberikan aksi pelemparan datanya menggunakan Jquery. Nah pada kesempatan kali ini kita akan melihat bagaimana mendapatkan hasil sebagai berikut :

Pada kesempatan ini ane juga ingin memberikan tutorial bagaimana membuat captcha di Codeigniter yang ane dapatkan dari blog temen ane di www.catatankaki.com.

Nah untuk mendapatkan hasil seperti itu mari kita lakukan langkah langkah yang akan kita tempuh :

1. Buat kode untuk .css adalah sebagai berikut :
   
   

   #customForm{
       padding: 0 10px 10px;
   }
   #customForm label{
       display: block;
       color: #797979;
       font-weight: 700;
       line-height: 1.4em;
   }
   #customForm input{
       width: 220px;
       color: #000000;
       font-family: Arial,  Verdana, Helvetica, sans-serif;
       font-size: 12px;
       border: 1px solid #cecece;
       height: 25px;
   }
   #customForm input.error{
       background: #f8dbdb;
       border-color: #e77776;
   }
   .error{
       background: #f8dbdb;
       border-color: #e77776;
       font-size: 12px;
       font-style: italic;
   }
   #customForm textarea{
       width: 550px;
       height: 80px;
       padding: 6px;
       color: #000000;
       font-family: Arial,  Verdana, Helvetica, sans-serif;
       font-size: 12px;
       border: 1px solid #cecece;
   }
   #customForm textarea.error{
       background: #f8dbdb;
       border-color: #e77776;
   }
   #customForm div{
       margin-bottom: 15px;
   }
   #customForm div span{
       margin-left: 10px;
       color: #000000;
       font-size: 11px;
   }
   #customForm div span.error{
       color: #e46c6e;
   }
   #customForm #send{
       background: #6f9ff1;
       color: #fff;
       font-weight: 700;
       font-style: normal;
       border: 0;
       cursor: pointer;
   }
   #customForm #send:hover{
       background: #79a7f1;
   }
   #error{
       margin-bottom: 20px;
       border: 1px solid #efefef;
   
   }
   #error ul{
       list-style: square;
       padding: 5px;
       font-size: 11px;
   }
   #error ul li{
       list-style-position: inside;
       line-height: 1.6em;
   }
   #error ul li strong{
       color: #e46c6d;
   }
   #error.valid ul li strong{
       color: #93d72e;
   }
   

   
   
2. Buat kode untuk viewnya misalnya hubungi_kami.php

   
   
   
   <link href="<?php =base_url()?>librari/form.css" rel="stylesheet" type="text/css" /> 
   <script type="text/javascript">
       $(function(){
           $(".error").hide(); 
           $(":button").click(function() {  
               var nama     = $('#nama').attr('value');  
               var subyek     = $('#subyek').attr('value');  
               var isi_pesan=$("#isi_pesan").attr('value');
               var captcha=$("#captcha").attr('value');
               $.ajax({  
                   type: "POST",  
                   url: "<?php echo base_url() . "index.php/menu/insert_saran" ?>",  
                   data: "nama="+ nama +"&subyek="+ subyek+"&isi_pesan="+isi_pesan+"&captcha="+captcha,  
                   success: function(pesan){
                       $('.error').show();
                       $('.error').text(pesan);
                       if(pesan.indexOf('sukses')!=-1){
                           $('form :input').val("");
                           
                       }
                       $('.error').fadeIn();
                   }  
               });  
               return false;  
           });  
       });
   
   </script>
   <h3>Hubungi kami</h3>
   <div class="error">
       Pesan errornya disini
   </div>
   <br/>
   <div id="customForm">
       <?php echo '<form name="form_saran" method="POST" >'; ?>
       <div class="textfield">
           <?php echo form_label('Nama', 'nama'); ?>
           <?php echo form_error('nama'); ?>
           <?php
           echo form_input(array(
               'name' => 'nama',
               'id' => 'nama'
                   )
           );
           ?>
       </div>
   
       <div class="textfield">
           <?php echo form_label('Subyek', 'subyek'); ?>
           <?php echo form_error('subyek'); ?>
           <?php
           echo form_input(array(
               'name' => 'subyek',
               'id' => 'subyek'
           ));
           ?>
       </div>
   
       <div class="textarea">
           <?php echo form_label('Isi pesan', 'isi_pesan'); ?>
           <?php echo form_error('isi_pesan'); ?>
           <?php
           echo form_textarea(array(
               'name' => 'isi_pesan',
               'id' => 'isi_pesan'
           ));
           ?>
       </div>
       <?php echo 'Masukan gambar captcha :' ?>
       <br/>
       <?php
       $this->load->model('captcha_model');
       $data['captcha'] = $this->captcha_model->createcaptcha();
       $this->load->view('captcha_view', $data);
       ?>
   </div>
   
   

3. Setelah viewnya dibuat mari kita lihat kode di controllernya misalnya di file menu.php
   

   function insert_saran() {
           $captcha = $_POST['captcha'];
           if ($captcha != "") {
               $benar = $this->captcha_model->captchabenar($_POST['captcha']);
               if ($benar) {
                   $data = array(
                       "nama" => $this->input->post("nama"),
                       "subyek" => $this->input->post("subyek"),
                       "isi_pesan" => $this->input->post("isi_pesan")
                   );
                   $this->load->model("menu_model");
                   if ($this->menu_model->insert_saran($data))
                       echo "Data sukses dikirim";
                   else
                       echo "Data gagal diinsert <a href=" . base_url() . ">kembali</a>";
               } else {
                   echo  'Gagal! Captcha Salah';
               }
           } else {
               echo 'Captcha belum diisi!';
           }
       }
   

4. Jangan lupa juga buat controller untuk captcha yang akan kita gunakan
   

   class Captcha extends Controller {
   
       public function __construct() {
           parent::Controller();
           $this->load->model('captcha_model');
       }
       
   
       function buatcaptcha() {
           $data['captcha'] = $this->captcha_model->createcaptcha();
           $this->load->view('captcha_view', $data);
       }
   
   }

5. Modelnya jangan lupa juga captcha_model.php

   <?php
   
   class Captcha_model extends Model {
   
       function Captcha_model() {
           parent::Model();
       }
   
       function captchabenar($captcha) {
           $expiration = time() - 7200; // Two hour limit 
           $this->db->query("DELETE FROM captcha WHERE captcha_time < " . $expiration);
           $sql = "SELECT COUNT(*) AS count FROM captcha WHERE word = ? AND ip_address = ? AND captcha_time > ?";
           $binds = array($captcha, $this->input->ip_address(), $expiration);
           $query = $this->db->query($sql, $binds);
           $row = $query->row();
   
           if ($row->count == 0) {
               return false;
           }
           return true;
       }
   
       function createcaptcha() {
           $this->load->plugin('captcha');
           $vals = array(
               'img_path' => './captcha/',
               'img_url' => base_url() . 'captcha/'
           );
   
           $cap = create_captcha($vals);
   
           $data = array(
               'captcha_id' => NULL,
               'captcha_time' => $cap['time'],
               'ip_address' => $this->input->ip_address(),
               'word' => $cap['word']
           );
   
           $query = $this->db->insert_string('captcha', $data);
           $this->db->query($query);
           return $cap;
       }
   
   }
   ?> 
   

   
   
6. Untuk menggunakan kode tersebut jangan lupa buat databasenya dulu yaitu captcha dan buat folder capcha di root website
   

   CREATE TABLE captcha (
   captcha_id bigint(13) unsigned NOT NULL auto_increment,
   captcha_time int(10) unsigned NOT NULL,
   ip_address varchar(16) default '0' NOT NULL,
   word varchar(20) NOT NULL,
   PRIMARY KEY `captcha_id` (`captcha_id`),
   KEY `word` (`word`)
   )

7. Nah ada yang terlupa untuk menampilkan hasil dari capcha yaitu captcha_view.php
   

   <?php
   echo $captcha['image'].'<br/><br/>'; 
   echo '<input type="text" size="22" name="captcha" id="captcha">'; 
   echo '<input id="send" type="button" value="Kirim">'; 
   echo '</form>';  
   ?>

8. Yang terakhir yaitu jangan lupa untuk model menginsert datanya misalnya ini menu_model.php
   

      function insert_saran($data){
           $key=array();
           $value=array();
           foreach ($data as $k => $v) {
               $key[]=$k;
               $value[]=$v;
           }
           $query=$this->db->query("INSERT INTO saran($key[0],$key[1],$key[2]) VALUES ('$value[0]','$value[1]','$value[2]')");
           if($query)
               return true;
           else
               return false;
           
       }