CodeIgniter : Insert data dengan Ajax


Selamat pagi, pada kesempatan kali ini Balidev akan share tentang pemrograman yaitu penggunaan Ajax pada proses input suatu data. Seperti yang kita ketahui, metode ajax ini dapat mengurangi refresh page pada suatu proses. Sebenarnya perlu sebuah artikel kalau membahasa ajax ini, maka dari itu saya langsung ke implementasinya saja.

Baik langsung saja sobat ikuti langkah-langkahnya:
1. Disini saya menggunakan material design (materialize) dan sweetalert agar terlihat cantik tampilannya hehe...
2. Siapkan file CodeIgniter, silahkan konfigurasi terlebih dahulu, dan buatkan folder assets untuk menaruh materialize dan sweetalert di atas.
3. Buat database dan sebuah tabel dengan struktur seperti di bawah ini.
Tabel Mahasiswa
Tabel Mahasiswa
4. Buatlah controller dengan nama mahasiswa dan model dengan nama model_mahasiswa.
5. Buatlah view untuk menampilkan data mahasiswa, sebelumnya kalian bisa tambahkan data dummy dulu ke dalam tabel mahasiswa. Tampilannya buat seperti di bawah ini, namanya view_mahasiswa.php
Tampilan data mahasiswa
View data mahasiswa
di bagian controller kalian tambahkan sintaks untuk memanggil view tersebut dan mengirim datanya.
public function index()
{
$data['daftar_mahasiswa'] = $this->model_mahasiswa->tampil_data();
$this->load->view('view_mahasiswa', $data);
}
Selanjutnya di model_mahasiswa buat function untuk mengambil semua data di tabel kemudian akan di return.
public function tampil_data(){
$this->db->select('*');
$this->db->from('mahasiswa');
$query = $this->db->get();
if($query->num_rows()>0){
return $query->result();
}
}
Dan di bawah ini code untuk menampilkan datanya agar tampilannya seperti pada gambar di atas.
<!DOCTYPE html>
<html>
<head>
<title>MAHASISWA</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="<?php echo base_url();?>/assets/materialize/css/materialize.min.css"  media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>/assets/materialize/js/materialize.js"></script>
<div class="container">
<div class="row">
<div class="col s10">
<div class="card teal-text">
<div class="card-content">
<div class="row">
<div class="col s12">
<a class="btn-floating btn-large waves-effect waves-light red right" href="<?php echo site_url('mahasiswa/tambah_data');?>"><i class="material-icons">add</i></a>
</div>
</div>
<div class="row">
<div class="col s12">
<table>
       <thead>
         <tr>
             <th data-field="name">NIM</th>
             <th data-field="price">Nama </th>
             <th data-field="price">Kelas</th>
             <th data-field="price">Semester</th>
             <th data-field="price">Edit</th>
             <th data-field="price">Hapus</th>
         </tr>
       </thead>

       <tbody>
         <?php foreach ($daftar_mahasiswa as $mahasiswa){
          $nim = $mahasiswa->nim;
          $nama = $mahasiswa->nama;
          $kelas = $mahasiswa->kelas;
          $semester = $mahasiswa->semester;
          echo "<tr>";
          echo "<td>$nim</td>";
          echo "<td>$nama</td>";
          echo "<td>$kelas</td>";
          echo "<td>$semester</td>";?>
          <td><?php echo anchor('mahasiswa/edit_mahasiswa?id='.$nim, '<i class="small material-icons">edit</i>');?></td>
                   <td> <?php echo anchor('mahasiswa/hapus_mahasiswa?id='.$nim, '<i class="small material-icons">delete</i>' );?></td>
                   <?php
          echo "</tr>";
         }?>
       </tbody>
      </table>
      </div>
    </div>
 </div>
      </div>
</div>
</div>
</div>

</body>
</html>

Selanjutnya, buatlah form di view dengan nama v_tambah_data.php dan langsung akan kita tambahkan disini sintaks Ajaxnya.

<!DOCTYPE html>
<html>
<head>
<title>MAHASISWA</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="<?php echo base_url();?>/assets/materialize/css/materialize.min.css"  media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <!-- Sweet Alert CSS import-->
    <link type="text/css" rel="stylesheet" href="<?php echo base_url();?>assets/sweetalert-master/dist/sweetalert.css">
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>/assets/materialize/js/materialize.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/sweetalert-master/dist/sweetalert.min.js"></script>

<div class="container">
<div class="row">
<div class="col s12">
<div class="row">
<div class="col s12"><h5>Insert Data Mahasiswa</h5></div>
</div>
<form id="myForm">
<div class="row">
       <div class="input-field col s6">
       <input id="NIM" type="text" class="validate">
       <label for="NIM">NIM</label>
       </div>
       <div class="input-field col s6">
          <input id="nama" type="text" class="validate">
          <label for="nama">Nama</label>
       </div>
      </div>
      <div class="row">
       <div class="input-field col s6">
       <input id="kelas" type="text" class="validate">
       <label for="kelas">Kelas</label>
       </div>
       <div class="input-field col s6">
          <input id="semester" type="number" class="validate">
          <label for="semester">Semester</label>
       </div>
      </div>
      <div class="row">
      <div class="col s12">
      <button type="submit" class="btn btn-teal submit">Submit</button>
      <button type="reset" class="btn btn-teal ">Cancel</button>
      </div>
      </div>
</form>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
$(".submit").click(function(event) {
event.preventDefault();
//mengambil data dari form
var nim_value= $("#NIM").val();
var nama_value= $("#nama").val();
var kelas_value= $("#kelas").val();
var semester_value= $("#semester").val();
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>"+"mahasiswa/proses_input_data",
dataType: 'json',
//mengirim data dengan type post
data: {nim: nim_value, nama: nama_value, kelas:kelas_value, semester:semester_value},
//menerima result dari controller
success: function(res) {
if(res.hasil == 'true'){
swal({
title: "Sukses",
text: "Data Di Tambahkan",
showConfirmButton: true,
confirmButtonColor: '#0760ef',
type:"success"
},
function(){
 document.getElementById('myForm').reset();
});
}
if(res.hasil == 'false'){
swal({
title: "Gagal",
text: "Data Gagal Tambahkan",
showConfirmButton: true,
confirmButtonColor: '#0760ef',
type:"error"
},
function(){

});
}
}
});
});
});
</script>
</body>
</html>
Bagi kalian yang sudah familiar dengan jQuery atau Javascript pasti sudah mengerti maksudnya, disana pada sintaksnya sudah saya tambahkan sedikit catatan agar lebih mudah dimengerti. Point penting lihat pada url dan data yang dikirim beserta attributnya, karena penamaan attributnya yang kita ambil nanti nilainya di controller.

6. Di controller buat function baru untuk mengambil datanya.
public function proses_input_data(){
$data = array(
'nim' => $this->input->post('nim'),
'nama' => $this->input->post('nama'),
'kelas' => $this->input->post('kelas'),
'semester' => $this->input->post('semester')
);
$result = $this->model_mahasiswa->insert_data($data);
if ($result !=false){
$hasil['hasil'] = 'true';
echo json_encode($hasil);
}
else{
$hasil['hasil'] = 'false';
echo json_encode($hasil);
}
}
7. Buat function insert data di model_mahsiswa dan jangan lupa return true jika berhasil.
public function insert_data($data){
$this->db->insert('mahasiswa', $data);
if($this->db->affected_rows() > 0){
return true;
}
}

8. Sampai disini biasanya sudah berhasil, maaf saya tidak jelaskan sintaksnya karena menurut saya jika sobat praktekan langsung akan lebih mudah di mengerti. Tampilannya jika berhasil seperti di bawah ini.
Simpan data ke dalam tabel
Insert Data ke Tabel
terakhir saya sertakan untuk full code di controller seperti di bawah ini:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Mahasiswa extends CI_Controller {

public function __construct()
{
parent::__construct();
$this->load->model('model_mahasiswa');
}

public function index()
{
$data['daftar_mahasiswa'] = $this->model_mahasiswa->tampil_data();
$this->load->view('view_mahasiswa', $data);
}
public function tambah_data(){
$this->load->view('v_tambah_data');
}
public function proses_input_data(){
$data = array(
'nim' => $this->input->post('nim'),
'nama' => $this->input->post('nama'),
'kelas' => $this->input->post('kelas'),
'semester' => $this->input->post('semester')
);
$result = $this->model_mahasiswa->insert_data($data);
if ($result !=false){
$hasil['hasil'] = 'true';
echo json_encode($hasil);
}
else{
$hasil['hasil'] = 'false';
echo json_encode($hasil);
}
}

}

/* End of file mahasiswa.php */
/* Location: ./application/controllers/mahasiswa.php */

/* End of file model_mahasiswa.php */
/* Location: ./application/models/model_mahasiswa.php */

Dan untuk di model seperti di bawah ini:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class model_mahasiswa extends CI_Model {

public $variable;

public function __construct()
{
parent::__construct();

}
public function tampil_data(){
$this->db->select('*');
$this->db->from('mahasiswa');
$query = $this->db->get();
if($query->num_rows()>0){
return $query->result();
}
}

public function insert_data($data){
$this->db->insert('mahasiswa', $data);
if($this->db->affected_rows() > 0){
return true;
}
}

}

/* End of file model_mahasiswa.php */
/* Location: ./application/models/model_mahasiswa.php */

Baca juga artikel lainnya tentang codeigniter:

  1. CodeIgniter : Menampilkan data dari database dan tutorialnya
  2. CodeIgniter : Tutorial Edit dan Hapus
  3. CodeIgniter: Session dan Auntentifikasi Login
  4. CodeIgniter : Upload Image dan Cara membuatnya 

Artikel Terkait

2 komentar

boleh saya mendapatkan link download skripnya?

Scriptnya saya lupa taruh dimana, bisa di rewrite yang bagian javascript ajaxnya gan


EmoticonEmoticon