Input Dinamis dengan Codeigniter dan Jquery

Input Dinamis dengan Codeigniter dan Jquery

Tutorial kali ini kita mencoba untuk membuat input dinamis dengan codeigniter dan jquery, adakalanya kita diharuskan membuat input text yang dinamis didalam aplikasi yang sedang kita kembangkan, seperti yang saya alami ketika saya mengembangkan aplikasi manajemen data kampanye, saya harus input data TPS yang tidak sama per kelurahannya., contoh pada tutorial ini juga saya ambil dari kasus saya tersebut.

Hasil yang didapat setelah membuat input dinamis dengan codeigniter dan jquery

output atau hasil yang didapatkan setelah mengikuti tutorial ini dari awal adalah seperti video dibawah ini 

sebelum kita lanjut ke tutorial cara membuat input dinamis dengan codeigniter dan jquery yang harus anda siapkan adalah :

  1. Framework Codeigniter
  2. Jquery

Langkah membuat input dinamis dengan Codeigniter dan Jquery

pertama silahkan buat sebuah file view simpan dengan nama vdinamis.php di Application/view, copy script dibawah ini :

<button type="button" class="btn btn-block btn-primary" data-toggle="modal" onclick="tambah_tps()"> <i class="fa fa-fw fa-plus-circle"></i> Tambah TPS </button>

 <script type="text/javascript">

function tambah_tps()
        {
          save_method = 'add';
          $('#form')[0].reset(); // reset form on modals
          $('#modal-tps').modal('show'); // show bootstrap modal
          $('.modal-title').text('Tambah TPS '); // Set Title to Bootstrap modal title
        }

</script>

script diatas menampilkan sebuah form modal jika Tombol tambah TPS di klik.

sekarang masih di file yang sama tambahkan sebuah form modal , copy script dibawah ini

<div class="modal fade" id="modal-tps">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Tambah Data TPS</h4>
              </div>
              <div class="modal-body">
               <form action="#" id="form" name="form" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">                
                              <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">Masukkan Jumlah TPS</label>
                   <div class="col-sm-10">
                  <input type="text" name="nametps" id="nametps" class="form-control">
                  <span class="help-inline val-nametps">*</span>
                </div>
                </div>
                <div id="data_k"></div>

               </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save changes</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>

script diatas akan menampilkan sebuah inputan berapa jumlah TPS yang akan kita input, contoh jika kita input jumlah TPS nya 3 maka akan muncul inputan text sebanyak 3 buah,

script selanjutnya masih di file vdinamis.php copy script dibawah ini :

<script>
$(document).ready(function() {
    $('#nametps').keyup(function(){
        var vpengikut = $("#nametps").val();
            var bd = 1;
            // alert(bd);
            if(vpengikut < 1){
                $("#data_k").empty();
                $(".val-nametps").html("*");
            }
            else if(isNaN(vpengikut)){
                $("#data_k").empty();
                $(".val-nametps").html("Nomor Harus  diisi dengan angka!");
            }
            else{               
                $("#data_k").empty();
                $(".val-nametps").html("*");
                $("#data_k").append("<p class=\"sub-info\"> <u>Data TPS</u> </p>");
                while(bd <= vpengikut){
                    $("#data_k").append("<div class='form-group'>"
                            +"<label class='col-sm-2 control-label'>Nama TPS</label>"
                            +"<div class='col-sm-10'>"
                                +"<input type='text' class='form-control' name='namatps[]' id='namatps[]'>"
                            +"</div>"
                        +"</div>"
                    );
                    bd++;
                }
            }
    });
});
</script>

script diatas akan menampilkan jumlah input nama TPS sebanyak yang telah kita sebelumnya, untuk script keseluruhan di vdinamis.php adalah :

<button type="button" class="btn btn-block btn-primary" data-toggle="modal" onclick="tambah_tps()"> <i class="fa fa-fw fa-plus-circle"></i> Tambah TPS </button>

 <script type="text/javascript">

function tambah_tps()
        {
          save_method = 'add';
          $('#form')[0].reset(); // reset form on modals
          $('#modal-tps').modal('show'); // show bootstrap modal
          $('.modal-title').text('Tambah TPS '); // Set Title to Bootstrap modal title
        }

</script>

<div class="modal fade" id="modal-tps">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Tambah Data TPS</h4>
              </div>
              <div class="modal-body">
               <form action="#" id="form" name="form" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">                
                              <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">Masukkan Jumlah TPS</label>
                   <div class="col-sm-10">
                  <input type="text" name="nametps" id="nametps" class="form-control">
                  <span class="help-inline val-nametps">*</span>
                </div>
                </div>
                <div id="data_k"></div>

               </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save changes</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
<script>
$(document).ready(function() {
    $('#nametps').keyup(function(){
        var vpengikut = $("#nametps").val();
            var bd = 1;
            // alert(bd);
            if(vnametps < 1){
                $("#data_k").empty();
                $(".val-nametps").html("*");
            }
            else if(isNaN(vnametps)){
                $("#data_k").empty();
                $(".val-nametps").html("Nomor Harus  diisi dengan angka!");
            }
            else{               
                $("#data_k").empty();
                $(".val-nametps").html("*");
                $("#data_k").append("<p class=\"sub-info\"> <u>Data TPS</u> </p>");
                while(bd <= vpengikut){
                    $("#data_k").append("<div class='form-group'>"
                            +"<label class='col-sm-2 control-label'>Nama TPS</label>"
                            +"<div class='col-sm-10'>"
                                +"<input type='text' class='form-control' name='namatps[]' id='namatps[]'>"
                            +"</div>"
                        +"</div>"   
                       );
                    bd++;
                }
            }
    });
});
</script>

pada tahap selanjutnya kita buat sebuah file Controller, kemudian copy script berikut ini :

public function save()
    {
        if ($this->session->userdata('logged_in')!=TRUE) 
        {
            redirect('/');
        }
        else 
        {
            $this->form_validation->set_rules('kecamatantps','Kecamatan','required');
            $this->form_validation->set_rules('kelurahantps','kelurahan','required');
            $this->form_validation->set_rules('deskripsitps','Deskripsi','required');
            $this->form_validation->set_rules('namatps[]','Nama TPS','required');
            if ($this->form_validation->run()==FALSE) 
            {
                $this->session->set_flashdata("pesan","<div class=\"col-md-12\"><div class=\"alert alert-danger\" id=\"alert\">Gagal!</div></div>");
                $this->data['halaman']='vtps';
                $this->load->view('_main',$this->data);
            }
            else
            {    
                $nm = $this->input->post('namatps');
                $result = array();
                foreach($nm AS $key => $val){
                    $result[] = array(
                    "namatps" => $_POST['namatps'][$key],
                    "kecamatantps" => $_POST['kecamatantps'],
                    "kelurahantps" => $_POST['kelurahantps'],
                    "deskripsitps" => $_POST['deskripsitps']
                    );
                    } 
                $insert=$this->Tps_m->insert($result);
                $this->session->set_flashdata('pesan', '<div class="alert alert-success alert-dismissible">
                 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <h4><i class="icon fa fa-check"></i> Sukses</h4>
               Data berhasil Disimpan
            </div>');
                echo json_encode(array("status"=>TRUE));
            }
        }
    }

script controller diatas akan menampung file dari vdinamis.php yang kemudian akan diteruskan ke model untuk disimpan kedalam database, untuk script modelnya silahkan copy script dibawah ini 

public function insert($result)
    { 
       $this->db->insert_batch('tps', $result);
        return $this->db->insert_id();
    }

demikianlah tutorial cara input dinamis dengan codeigniter dan Jquery, jika ada keraguan silahkan berkomentar dikolam komentar.

untuk melihat demonya silahkan lihat di Aplikasi Manajemen data Kampanye

terimakasih , dan HAPPY CODING