Tutorial Codeigniter Add or Remove Multiple Input Fields with jQuery

0
2670

Hello Codeigniter lover’s, in this tutorial we will share with you how to add or remove multiple input field in Codeigniter using jQuery. This tutorial will give you simple and easy way how to use jQuery in Codeigniter to build multiple input fields with add or remove dynamically. I hope this dynamic add and remove multiple input fields will help you, so let’s scroll and follow below tutorial.

Studi kasus kali ini saya akan mengolah/input data nama pegawai melalui form multiple input. Sehingga secara step by step untuk menyelesaikan tutorial Codeigniter Add or Remove Multiple Input Fields with jQuery kali ini akan dibagi kedalam beberapa tahap seperti berikut.

Step 1 Download dan Install Project Codeigniter
Pada tahap ini yang perlu dilakukan untuk memulai menggunakan frmaework Codeignter pada project aplikasi adalah dengan men-download framework tersebut melalui website resminya codeigniter.com, disini saya menggunakan Codeigniter versi 3.x.

Setalah berhasil melakukan download Anda perlu menginstallnya pada local server, jika Anda menggunakan Wamp sebagai local server maka Anda cukup mengekstraknya pada folder www/namaprojectcodeigniter, jika menggunakan XAMPP Anda perlu mengekstraknya pada folder htdocs/namaprojectcodeigniter.

Setelah berhasil menginstall project framework Codeigniter pada local server, Anda perlu mengetesnya pada browser apakah project Anda telah benar-benar berhasil dibuat.

Buka web browser Anda seperti Google Chrome ataupun Mozilla Forefox serta browser lainnya yang Anda senangi, lalu jalankan url localhost/namaprojectcodeigniter Anda, jika semua berjalan dengan baik maka Anda akan disambut oleh halaman framework PHP Codeigniter, and say hello 🙂

Step 2 Meyiapkan Database MySQL/MariaDB
Pada tahap ini persiapan database dilakukan dengan maksud untuk menampung data yang dikirimkan dari form dan diproses melalui controller menuju database pada tabel tertentu.

Buatlah satu buah database pada MySQL atau yang lainnya, lalu buat tabel pegawai pada database tersebut, jika Anda masih awam dalam membuat tabel di MySQL ataupun MariaDB dapat membaca tutorial disini.

Untuk dapat melakukan loaded database pada framework PHP Codeigniter Anda perlu melakukan setting tambahan dengan memanggil library database melalui file autoload.php pada folder “application/config/autoload.php” seperti pada contoh gambar berikut.

autoload library database codeigniter
autoload library database codeigniter

Step 3 Menyiapkan Controller pada Codeigniter
Tahap selanjutnya adalah membuat file controller untuk mengolah proses data pada tutorial input dan hapus multiple fields pada project codeigniter ini.

Sebagaimana diketahui bahawa fungsi controller pada framework codeigniter adalah digunakan untuk mengambil permintaan, memparsing permintaan, menginisialisasi, memanggil model yang dibutuhkan, mengambil respon dan mengirimkannya ke view.

Membuat controller pada framework Codeigniter dapat dilakukan dengan menciptakan satu buah atau lebih file ber-ekstensi .php pada folder “application/controller/Namacontroller.php”, seperti yang dapat kita lihat pada gambar berikut.

file controller Codeigniter
file controller Codeigniter

Sedangkan untuk kebutuhan controller pada tutorial kali ini adalah seperti berikut.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Datapegawai extends CI_Controller {

    /**
     * Index Page for this controller.
     *
     * Maps to the following URL
     * 		http://example.com/index.php/welcome
     *	- or -
     * 		http://example.com/index.php/welcome/index
     *	- or -
     * Since this controller is set as the default controller in
     * config/routes.php, it's displayed at http://example.com/
     *
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/welcome/<method_name>
     * @see https://codeigniter.com/user_guide/general/urls.html
     */
    public function index()
    {
        $this->tampildata();
    }
    
    public function tampildata()
    {
        $data = array();
        $data['title'] ='Data Pegawai';
        $sql ="SELECT * from tbl_pegawai order by id_pegawai ASC";
        $hsl = $this->db->query($sql);
        $cek = $this->db->query($sql)->row_array();				
        $data['table'] = '';		
        if(is_array($cek) && sizeof($cek)>0){
            foreach($hsl->result_array() as $row){
                $data['table'] .= '<tr>
                                    <td>'.$row['id_pegawai'].'</td>
                                    <td>'.$row['nama'].'</td>
                                    <td>'.$row['pekerjaan'].'</td>
                                    <td>'.$row['alamat'].'</td>
                                    <td>
                                        <a href="#" class="btn btn-xs btn-success" data-id="'.$row['id_pegawai'].'"><i class="fa fa-pencil"></i></a>				  
                                        <a href="#" class="btn btn-xs btn-danger" data-id="'.$row['id_pegawai'].'"><i class="fa fa-trash"></i></a>				  
                                    </td>				  
                                    </tr>';
            }
        }else{			
            $data['table'] .= '<tr>
                                  <td colspan="5">Belum ada data.</td>
                                </tr>';		
        }
        
        $data['content'] = 'pegawai/index';
        $this->load->view('dashboard/template',$data);
    }

    public function create()
    {
        $data['title'] = 'Tambah Pegawai';
        $data['content'] = 'pegawai/crud';
        $this->load->view('dashboard/template', $data);
    }
    
    public function simpan()
    {
        $jumlah = count($this->input->post('nama'));
        //print_r($jumlah);die();
        for($i=0;$i<$jumlah;$i++){
            $data = array(
                    'nama'=> $this->input->post('nama')[$i],
                    'pekerjaan'=> $this->input->post('pekerjaan')[$i],
                    'alamat'=> $this->input->post('alamat')[$i]
                );
            $this->db->insert("tbl_pegawai",$data);
        }	
        redirect('datapegawai/tampildata','refres');
    }		
    
}

 

Untuk pengaturan konfigurasi database pada framework Codeigniter Anda dapat melakukan melalui file database.php pada folder “application/config/database.php”, pada tutorial kali ini saya menggunakan MariaDB sebagai database sehingga saya perlu menambahkan port ‘3307’ saat melakukan konfigurasi database seperti terlihat pada gambar berikut.

codeigniter database connection with mariadb
codeigniter database connection with mariadb

Step 4 Menyiapkan View Codeigniter dan jQuery
Pada tahap ini adalah kita membuatkan file views pada project Codeigniter, sebagaimana fungsinya Views pada framework Codeigniter adalah file khusus yang digunakan oleh CodeIgniter untuk menyimpan markup yang dihasilkan oleh aplikasi, biasanya file views terdiri dari tag-tag HTML dan tag PHP sederhana.

Untuk kebutuhan tutorial pada pembahasan Codeigniter Add or Remove Multiple Input Fields with jQuery ini saya akan menambahkan 2 (dua) file views yaitu file “index.php” dan file “crud.php” dimana kedua file views tersebut saya letakkan posisinya pada folder “application/views/pegawai/” seperti terlihat ada gambar berikut.

file views codeigniter
file views codeigniter

Adapun kebutuhan file views untuk melakukan Add or Remove Multiple Input Fields dengan jQuery pada Codeigniter di tutorial ini adalah seperti berikut.

/*======================= file index.php =================== */
  <div class="">
    <div class="page-title">
      <div class="title_right">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group pull-right top_search">
          <h3><?php echo (!empty($title)?$title:'');?></h3>
        </div>
      </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
      
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
          <div class="x_title">
            <a href="<?php echo base_url('datapegawai/create');?>" class="btn btn-success"><i class="fa fa-plus"></i> Tambah</a>
            <div class="clearfix"></div>
          </div>
          <div class="x_content">						
            <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th width="10px">ID</th>
                  <th>Nama</th>
                  <th>Pekerjaan</th>
                  <th>Alamat</th>
                  <th>Aksi</th>
                </tr>
              </thead>
              <tbody>
                <?php echo $table;?>				
              </tbody>
            </table>
            
            
          </div>
        </div>
      </div>
    </div>
  </div>

 

/*====================== file crud.php =======================*/
  <div class="">
    <div class="page-title">
      <div class="title_right">
        <div class="col-md-12 col-sm-12 col-xs-12 form-group pull-right top_search">
          <h3><?php echo (!empty($title)?$title:'');?></h3>
        </div>
      </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  
                  <div class="x_content">
                    <br>
                    <form id="demo" data-parsley-validate="" class="form-horizontal form-label-left" method="POST" action="<?php echo base_url('datapegawai/simpan');?>">
                      <div class="form-group rec-element">
                        <label class="control-label col-md-2 col-sm-2 col-xs-12" for="first-name">Nama <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" name="nama[]" id="nama1" alt="1" required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>   
                      <div class="form-group">
                        <label class="control-label col-md-2 col-sm-2 col-xs-12" for="first-name">Pekerjaan <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" name="pekerjaan[]" id="pekerjaan1" alt="1" required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-2 col-sm-2 col-xs-12" for="first-name">Alamat <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" name="alamat[]" id="alamat1" alt="1" required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>                     
                      <div class="ln_solid"></div>
                      <div id="nextkolom" name="nextkolom"></div>
                      <button type="button" id="jumlahkolom" value="1" style="display:none"></button>
                      <div class="form-group">
                        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                          <button type="button" class="btn btn-info tambah-form">Tambah Form</button>
                          <button type="submit" class="btn btn-success">Simpan</button>
                        </div>
                      </div>

                    </form>
                  </div>
                </div>
              </div>	  
      
    </div>
  </div>
<script src="<?php echo base_url();?>assets/vendors/jquery/dist/jquery.min.js"></script>
<script>
 $(document).ready(function() {
    var i=2;
    $(".tambah-form").on('click', function(){		
        row ='<div class="rec-element">'+
                '<div class="form-group">'+
                '<label class="control-label col-md-2 col-sm-2 col-xs-12" for="first-name">Nama '+i+' <span class="required">*</span>'+
                '</label>'+
                    '<div class="col-md-6 col-sm-6 col-xs-12">'+
                        '<input type="text" name="nama[]" id="nama'+i+'" alt="'+i+'" required="required" class="form-control col-md-7 col-xs-12">'+
                    '</div>'+
                '</div>'+   
                '<div class="form-group">'+
                '<label class="control-label col-md-2 col-sm-2 col-xs-12" for="first-name">Pekerjaan '+i+'<span class="required">*</span>'+
                '</label>'+
                    '<div class="col-md-6 col-sm-6 col-xs-12">'+
                        '<input type="text" name="pekerjaan[]" id="pekerjaan'+i+'" alt="'+i+'" required="required" class="form-control col-md-7 col-xs-12">'+
                    '</div>'+
                '</div>'+
                '<div class="form-group">'+
                '<label class="control-label col-md-2 col-sm-2 col-xs-12" for="first-name">Alamat '+i+' <span class="required">*</span>'+
                '</label>'+
                    '<div class="col-md-6 col-sm-6 col-xs-12"> '+                           
                          '<div class="input-group">'+
                            '<input type="text" name="alamat" id="alamat'+i+'" alt="'+i+'" class="form-control">'+
                            '<span class="input-group-btn">'+
                              '<button type="button" class="btn btn-warning del-element"><i class="fa fa-minus-square"></i> Hapus</button>'+
                            '</span>'+
                          '</div>'+
                        '</div>'+
                '</div>'+                                  
                '<div class="ln_solid"></div>'+
                
                '</div>';
        $(row).insertBefore("#nextkolom");
        $('#jumlahkolom').val(i+1);
        i++;        
    });
    $(document).on('click','.del-element',function (e) {        
        e.preventDefault()
        i--;
        //$(this).parents('.rec-element').fadeOut(400);
        $(this).parents('.rec-element').remove();
        $('#jumlahkolom').val(i-1);
    });		
 });
</script>

Sehingga saat tutorial ini dijalankan akan menghasilkan aplikasi form Add or Remove Multiple Input Fields with jQuery and Codeigniter seperti berikut.

Sampai disini kita telah berhasil membuat multiple input fields dynamic menggunakan framework Codeigniter dan jQuery, semoga tutorial yang cukup singkat ini dapat menambah wawasan dan memberi manfaat bagi yang membutuhkan, terimakasih telah berkunjung di Jogjatech.com and happy coding 🙂