Cara Mudah Input Data Codeigniter dengan Modal Bootstrap

Selamat Datang di blog sugrahaku, tutorial kali ini adalah lanjutan dari tutorial sebelumnya tentang Cara Membuat CRUD Codeigniter : Menampilkan Data, dimana pada tutorial kali ini kita akan membahas tentang bagaimana cara mudah input data codeigniter dengan modal bootstrap. Mungkin ada yang belum tahu apa dan bagaimana menggunakan modal bootstrap. Jadi apabila kita menggunakan modal bootstrap kita tidak perlu membuat halaman baru untuk input data, cukup tambahkan sedikit script pada halaman yang sama, pada saat dijalankan maka akan muncul popup yang menampilkan form input data. Untuk lebih jelasnya mari dipahami saja tulisan saya kali ini.


Persiapan Input Data Codeigniter

Seperti tutorial sebelumnya, ada beberapa hal yang harus dipersiapkan sebelum melanjutkan pembahasan tentang Cara Mudah Input Data Codeigniter denganModal Bootstrap. Karena ini adalah pembahasan lanjutan dari tutorial sebelumnya, maka teman-teman bisa melihat langsung pembahasan sebelumnya tentang Cara Membuat CRUD Codeigniter : Menampilkan Data. Jadi, teman-teman tidak bingung kenapa hasilnya bisa seperti demikian, karena yang terpenting adalah project sebelumnya itu adalah hal terpenting. Kalau ingin project pembuatan CRUD pada akhir pembahasan tentang CRUD codeigniter akan saya berikan link download untuk semuanya, tetapi jika ingin sepotong-sepotong saja, bisa langsung tuliskan di komentar maka saya akan kirim datanya melalui email.

Tutorial Input Data Codeigniter dengan Menggunakan Bootstrap

Controller

Melanjutkan dari tulisan kemarin, sekarang teman-teman buka folder login yang sudah kita buat sebelumnya, kemudian masuk ke bagian controller admin, xampp\htdoc\login\application\controllers\Admin.php. Sekarang kita tambahkan fungsi tambah() dibawah fungsi index() berikut adalah script dari fungsi tambah().


function tambah(){
    $data = array(
        'nama'  => $this->input->post('nama'),
        'alamat' => $this->input->post('alamat'),
        'pekerjaan' => $this->input->post('pekerjaan')
    );
    $this->model_admin->tambah($data);
    $this->session->set_flashdata('notif','<div class="alert alert-success" role="alert"> Data Berhasil ditambahkan <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
    redirect('admin');
}

Akan saya jelaskan sedikit, jadi script diatas adalah fungsi yang digunakan untuk input data dari pengguna, fungsi tersebut dinamakan fungsi tambah. Perhatikan script berikut


$data = array(
        'nama'  => $this->input->post('nama'),
        'alamat' => $this->input->post('alamat'),
        'pekerjaan' => $this->input->post('pekerjaan')
);

script ini sering disebut dengan array, dimana masukan atau input dari pengguna yang menggunakan metode post sepert ini


$this->input->post('nama')

itu dimasukkan ke dalam array dengan nama elemennya nama. Kemudian seluruh input dari user akan disimpan dalam array dengan nama $data. Setelah itu variabel $data akan dilempar ke model_admin() untuk disimpan ke dalam database menggunakan script berikut ini.


$this->model_admin->tambah($data);

Lalu fungsi berikut ini berfungsi untuk menampilkan pemberitahuan bahwa data telah masuk ke dalam database dan akan redirect ke halaman admin kembali.


$this->session->set_flashdata('notif','<div class="alert alert-success" role="alert"> Data Berhasil ditambahkan <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
redirect('admin');

Jika kita tambahkan ke controller Admin.php atau ditambahkan dari tutorial kemarin maka akan menjadi seperti berikut ini.


<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Admin extends CI_Controller{
 function __construct(){
  parent::__construct();
  $this->load->model('model_admin');
  $session = $this->session->userdata('login'); 
        if($session != 'login'){
            $this->load->view('view_login');
        }
 }
 function index(){
  $data=array(
   'data' => $this->model_admin->orang()
  );
  $this->load->view('view_admin',$data);
 }
 function tambah(){
        $data = array(
            'nama'  => $this->input->post('nama'),
            'alamat' => $this->input->post('alamat'),
            'pekerjaan' => $this->input->post('pekerjaan')
        );
        $this->model_admin->tambah($data);
        $this->session->set_flashdata('notif','<div class="alert alert-success" role="alert"> Data Berhasil ditambahkan <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
        redirect('admin');
    }
}

Model

Selanjutnya adalah membuat fungsi tambah data di model_admin(), berikut adalah fungsi untuk menambahkan data ke database di model. Sekarang buka Model_admin.php yang berada di applications/model dan tambahkan fungsi berikut ini.
function tambah($data){
    $this->db->insert('orang', $data);
    return TRUE;
}

Sangat pendek bukan? ya memang demikian, fungsinya hanya mengambil data dari controller yang didapat dari parameter $data, kemudian dimasukkan ke dalam database 'orang' menggunakan script ini.
$this->db->insert('orang', $data);

Maka setelah selesai digabungkan akan menjadi seperti berikut ini.
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Model_admin extends CI_Model{
    function __construct(){
        parent::__construct();
    }
    function orang(){
        $query = $this->db->get('orang');
        return $query->result_array();
    }
    function tambah($data){
       $this->db->insert('orang', $data);
       return TRUE;
    }
}

View

Kemudian yang terakhir yang sedikit panjang adalah di bagian view yaitu membuat tampilannya. Sekarang silahkan buka view_admin.php yang berada di application/view. Kemudian ubah isi filenya menjadi seperti berikut ini.


<!DOCTYPE html>
<html>
<head>
 <title>Membuat CRUD Dengan CodeIgniter | https://sugrahaku.com</title>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css')?>">
 <script src="<?php echo base_url('assets/js/jquery-3.1.1.min.js');?>"></script>
 <script src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
</head>
<body>
 <div class="container">
  <h1 class="text-center">Data Orang</h1>
  <p class="text-center">Selamat Datang, <?php echo $this->session->userdata("username"); ?></p>
  <div class="form-group text-right">
   <a data-toggle="modal" data-target="#tambah-data" class="btn btn-primary">Tambah</a>
   <a class="btn btn-warning" href="<?php echo base_url('index.php/login/logout'); ?>">Logout</a>
  </div>
  <?=$this->session->flashdata('notif')?>
  <table class="table table-striped table-bordered">
   <thead>
    <tr>
     <th>No.</th>
     <th>Nama</th>
     <th>Alamat</th>
     <th>Pekerjaan</th>
     <th>Aksi</th>
    </tr>
   </thead>
   <tbody>
    <?php $no=0; foreach ($data as $dt){ ?>
    <tr>
     <td><?php echo ++$no;?></td>
     <td><?php echo $dt['nama'];?></td>
     <td><?php echo $dt['alamat'];?></td>
     <td><?php echo $dt['pekerjaan'];?></td>
     <td>
      <a href="#" class="btn btn-info">Ubah</a>
      <a href="#" class="btn btn-danger">Hapus</a>
     </td>
    </tr>
    <?php } ?>
   </tbody>
  </table>
 </div>
 <!-- Modal Tambah -->
 <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="tambah-data" class="modal fade">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                 <h4 class="modal-title">Tambah Data</h4>
             </div>
             <form class="form-horizontal" action="<?php echo base_url('admin/tambah')?>" method="post" enctype="multipart/form-data" role="form">
              <div class="modal-body">
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Nama</label>
                          <div class="col-lg-10">
                              <input type="text" class="form-control" name="nama" placeholder="Tuliskan Nama">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Alamat</label>
                          <div class="col-lg-10">
                           <textarea class="form-control" name="alamat" placeholder="Tuliskan Alamat"></textarea>
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Pekerjaan</label>
                          <div class="col-lg-10">
                              <input type="text" class="form-control" name="pekerjaan" placeholder="Tuliskan Pekerjaan">
                          </div>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-info" type="submit"> Simpan&nbsp;</button>
                      <button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
                  </div>
                 </form>
             </div>
         </div>
     </div>
 </div>
 <!-- END Modal Tambah -->
</body>
</html>

Penjelasan

Apa saja sih yang baru di tambahkan? yang pertama yang harus dilakukan adalah mengubah tombol Tambah, dari


<a class="btn btn-primary" href="#">Tambah</a>

Menjadi seperti berikut ini


<a data-toggle="modal" data-target="#tambah-data" class="btn btn-primary">Tambah</a>

Hal itu dilakukan untuk memanggil modal bootstrap dengan nama tambah-data. Kemudian menambahkan fungsi notifikasi, jadi ketika ada penambahan atau perubahan data, akan muncul notifikasi yang menandai perubahan atau penambahan data, menggunakan script berikut ini.


<?=$this->session->flashdata('notif')?>

Setelah itu menambahkan modal bootstrap dengan script berikut ini


<!-- Modal Tambah -->
 <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="tambah-data" class="modal fade">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                 <h4 class="modal-title">Tambah Data</h4>
             </div>
             <form class="form-horizontal" action="<?php echo base_url('admin/tambah')?>" method="post" enctype="multipart/form-data" role="form">
              <div class="modal-body">
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Nama</label>
                          <div class="col-lg-10">
                              <input type="text" class="form-control" name="nama" placeholder="Tuliskan Nama">
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Alamat</label>
                          <div class="col-lg-10">
                           <textarea class="form-control" name="alamat" placeholder="Tuliskan Alamat"></textarea>
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-lg-2 col-sm-2 control-label">Pekerjaan</label>
                          <div class="col-lg-10">
                              <input type="text" class="form-control" name="pekerjaan" placeholder="Tuliskan Pekerjaan">
                          </div>
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button class="btn btn-info" type="submit"> Simpan&nbsp;</button>
                      <button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
                  </div>
                 </form>
             </div>
         </div>
     </div>
 </div>
 <!-- END Modal Tambah -->

Dengan menggunakan script diatas maka ketika kita menekan tombol Tambah maka akan muncul popup form dari modal bootstrap, setelah pengguna memasukkan data, data tersebut akan di lempar menuju controller dan simpan ke database menggunakan fungsi di model_admin. Maka tampilannya setelah dijalankan akan menjadi seperti berikut ini.

Demo

Tekan tombol tambah.



Isi data kemudian tekan tombol simpan



Maka hasilnya akan menjadi seperti berikut ini.


Kesimpulan

Inilah tutorial tentang bagaimana Cara Mudah Input Data Codeigniter dengan Modal Bootstrap, sangat mudah bukan? Mungkin ada beberapa hal yang teman-teman tidak bisa mengerti atau pahami langsung bisa ditanyakan di kolom komentar, nanti akan saya jawab. Mungkin ini saja yang dapat saya sampaikan, saya mohon maaf jika ada  kesalahan, kepada Allah saya mohon ampun. Sekian dan terima kasih.

Baca Juga :

4 Komentar untuk "Cara Mudah Input Data Codeigniter dengan Modal Bootstrap"

  1. bisa di share scrip lengkapnya yang berbentuk php untuk controler,model ,dan view tidak gan..artikelnya bermanfaat.
    jika ada tolong di kirim ke bobitetsuya3@gmail.com
    terima kasih

    BalasHapus
  2. ane terselamatkan, work nih, thx.

    BalasHapus
  3. Cara untuk menambah form validasi pada popup modalnya bagai mana kak. Klu seperti itu kn walaupun tombol save di tekan data akan tetap terkirim ke data base..

    BalasHapus
  4. Bang maaf ini bagian javascriptnya mana?

    BalasHapus

Jika ada pertanyaan, Mari kita diskusikan :)

Note : Komentar yang mengandung "SARA, Pornografi, Merugikan, Tidak Sopan, Berkata Kasar, Memasukan Link Aktif" akan saya hapus untuk menghindari SPAM. Berkomentarlah dengan komentar yang RELEVAN dengan artikel.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel