Coretan Asha21: CRUD Dengan CodeIgniter + Ajax + JQuery (Part III )

Woa! Setelah tidur nyenyak sejenak, mari kita lanjutkan pembuatan aplikasi CRUD kita!

Di tutorial sebelumnya kita sudah berhasil mengambil dan menampilkan data dari database. Nah pada tutorial kali ini, mari kita lanjutkan dengan menambahkan fasilitas untuk menambahkan data ke dalam database. Nah, sebelum mulai, anda bisa mendapatkan source code lengkap dari proyek kita ini di sini. Okay kita lanjutkan saja proyek yang kita buat dari tutorial sebelumnya. Sebelumnya mari kita perbaiki terlebih dahulu desain website yang kita buat agar terlihat sedikit lebih rapi. Silahkan ubah /application/views/viewmahasiswa.php yang telah kita buat sebelumnya. Agar lebih cepat, silahkan copy-paste code dibawah ini.


<!DOCTYPE>
<html>
<head>
    <title><?php echo $judul ?></title>
    <link href="<?php echo base_url()?>css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<?php echo base_url()?>js/jquery-1.4.js"></script>

<head>
<body>
    <div id="notifikasi" style="display:none"></div>
    <div id="wraper">
    
        <div id="header">
            <h2>CRUD Dengang CodeIgniter + Ajax + JQuery</h2>
        </div>
        
        
        <div id="content">
            <div id="paneltombol">
                <input type="button"  class="tombol" id="btnSimpan" value="Simpan" style="display:none">
                <input type="button" class="tombol" id="tombolTambah" name="tombolTambah" value="Tambah Data">
            </div>
            
            <div id="data">                
                <table border="0" width="100%" cellspacing="0" >
                <tr>
                    <th>Nim</th>
                    <th>Nama</th>
                    <th>Jurusan</th> 
                    <th>Angkatan</th>
                    <th>IPK</th>
                </tr>
                <?php foreach($mahasiswa as $baris):?>
                <tr>
                    <td><?php echo $baris->nim ?></td>
                    <td><?php echo $baris->nama ?></td>
                    <td><?php echo $baris->jurusan ?></td>
                    <td><?php echo $baris->angkatan ?></td>
                    <td><?php echo $baris->ipk ?></td>
                </tr>
                <?php endforeach ?>
                </table>
            </div>
                    
        </div>    
    </div>
</body>
</html>

Wow, ternyata banyak yang berubah yah? Eits? dalam tag <head> ada kode yang aneh tuh! Okey-okay nanti saya jelaskan apa maksudnya. Tapi ngga masalah. Nah sekarang, buatlah direktori baru di direktori root (dalam tutorial ini di direktori webku) kamu dan beri nama css. Selanjutnya buatlah file bernama style.css dan simpan di dalam direktori tersebut. Okay tinggal copy-paste aja code di bawah ini coy!


*{
    margin: 0;
    padding: 0;
}

body{
    font-family: "Lucida Grande", "Calibri", Verdana;
    
}

h2{
    font-size: 16px;
}

table{
    margin-bottom: 2px;
    border: 1px solid #D3D3D3; 
}

th,td{
    border: 1px solid #D3D3D3; 
    font-size: 12px;
    padding: 5px;
}

th{
    background-color: #E6E6FA;    
}

#wraper{
    margin: 20px auto;
    width: 950px;
    border: 1px solid #D3D3D3;
    -moz-border-radius: 10px 10px 5px 5px;
    border-radius: 10px 10px 5px 5px;    
}

#header{
    height: 40px;
    background-color: #E3F1FF;
    border-bottom: 1px solid #D3D3D3;
    padding: 20px 0 0 20px;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;    
}


#content{
    padding: 10px;
    background-color: #F8F8FF;        
    font-size: 10px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;    
}

#paneltombol{
    clear: both;
    float: right;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
}

#data{
    clear: both;
}

.tombol{
    height: 30px;
    border: 1px solid #D3D3D3;
    background-color: #E6E6FA;
    font-size: 12px;
    -border-radius: 5px;
    -moz-border-radius: 5px;
}
#notifikasi{
        font-size: 10px;
 padding: 10px;
 right: 10px;
 top: 10px;
 position: absolute;
 border: 1px solid #d3D3D3;
 background-color: #E6E6FA;
}

Nah selanjutnya buatlah sebuah direktori lagi dan beri nama js di direktori root kamu. Kemudian silahkan download Jquery di sini dan letakan dalam direoktori tersebut.

Jadi saat ini direktori root kamu terdapat 2 direktori baru yaitu css dan js. Dengan demikian di root folder kamu sekarang terdapat beberapa direktori diantaranya application, css, js, system, dan user_guide. Nah silahkan lihat terlebih dahulu tampilan baru aplikasi yang kita buat. Ketikan http://localhost/webku atau http://localhost/webku/index.php/conmahasiswa. Kira-kira tampilan aplikasi kita akan seperti gambar di bawah ini.

Nah dalam tag <head> di viewmahasiswa.php terdapat code seperti ini.

<link href="<?php echo base_url()?>css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url()?>js/jquery-1.4.js"></script>

Apa maksud tag <?php echo base_url() ?> tersebut? Di tutorial sebelumnya kita telah mengeset base url kita menjadi http://localhost/webku bukan? Jika pembaca belum ingat silahkan buka kembali /application/config/config.php. Bentuk lain dari code di atas adalah sebagai berikut.

<link href="http://localhost/webku/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://localhost/webku/js/jquery-1.4.js"></script>

Nah, selanjutnya kita akan menambahkan sebuah function baru di controller kita. Tambahkan function berikut ini di /application/controllers/conmahasiswa.php

function tambah(){
        $data['judul'] = 'Input Data Mahasiswa';
        $this->load->view('inputmahasiswa');
}

Dalam function tambah() kita me-load view yang bernama inputmahasiswa. Isi dari inputmahasiswa adalah form untuk menambahkan data baru ke dalam database. Ketika tombol tambah data diklik, form tambah data ini akan diload di div data dalam viewmahasiswa.php dengan menggunakan Ajax. Buatlah sebuah file baru bernama inputmahasiwa.php dan simpan di /application/views/.

<form id='formmahasiswa'>
<div>
    <label>Nim</label>
    <input type="text" name="nim" id="nim" size="30" class="inputform">
</div>
<div>
    <label>Nama</label>
    <input type="text" name="nama" id="nama" size="30" class="inputform">
</div>
<div>
    <label>Jurusan</label>
    <input type="text" name="jurusan" id="jurusan" size="30" class="inputform">
</div>
<div>
    <label>Angkatan</label>
    <input type="text" name="angkatan" id="angkatan" size="30" class="inputform">
</div>
<div>
    <label>IPK</label>
    <input type="text" name="ipk" id="ipk" size="30" class="inputform">
</div>
</form>

Selanjutnya, silahkan tambahkan code berikut dalam tag <head> di /application/views/viewmahasiswa.php

<script type="text/javascript" >
        $().ready(function(){
            $("#tombolTambah").click(function(){
                $.ajax({
                    url : "<?php base_url() ?>index.php/conmahasiswa/tambah",
                    beforeSend: function(){
                                        $("#data").html("Loading...");
                                    },
                    success:    function(html){
                                    $("#data").html(html);
                                    $("#btnSimpan").show();
                                    $("#tombolTambah").hide();

                                }                
                });            
            });        
        });
    </script>

Apa maksud code di atas? Jadi ketika tombol tambah diklik maka akan dijalankan fungsi Ajax dimana akan dilakukan request ke server dengan url http://localhost/index.php/conmahasiswa/tambah. Kemudian apabila request yang dilakukan suskses maka, hasil HTML-nya akan diload di div data. Kemudian tombol tambah data akan disembunyikan dan tombol simpan akan ditampilkan. Apakah anda sudah mencoba? Ups! Mari kita perbaiki tampilan formnya yang masih berantakan. Silahkan tambahkan code berikut di file css anda.

#formmahasiswa div{
    margin: 5px;
    display: block;
}

#formmahasiswa label{
    display: block;
    margin-bottom: 5px;
}

.inputform {
    width: 100%;
    height: 30px;
    border: 1px solid #D3D3D3;
}

Nah, sampai di sini, kita telah berhasil menampilkan form input, sekarang mari kita rubah sedikit function tambah() di controller kita. Ubahlah function tambah di /application/controller/conmahasiswa.php seperti di bawah ini.


function tambah(){
        if($_POST == null) {
            $data['judul'] = 'Input Data Mahasiswa';
            $this->load->view('inputmahasiswa');
        }
        else {
            $nim = $this->input->post('nim');
            $nama = $this->input->post('nama');
            $jurusan = $this->input->post('jurusan');
            $angkatan = $this->input->post('angkatan');
            $ipk = $this->input->post('ipk');            
            
            $data=array(
                'nim' => $nim,
                'nama'    => $nama,
                'jurusan'    => $jurusan,
                'angkatan'    => $angkatan,
                'ipk'    => $ipk            
            );
            
            $this->modelmahasiswa->insertDataMahasiswa($data);
        
        }
    }

Apabila data $_POST tidak sama dengan NULL maka data akan disimpan dengan memanggil function insertDataMahasiswa() yang terdapat di modelmahasiswa. Untuk itu tambahkan function berikut ini di /application/models/modelmahasiswa.php

function insertDataMahasiswa($data){
        $this->db->insert('mahasiswa',$data);    
    }

Kemudian mari kita tambahkan fungsi ketika tombol simpan diklik. Silahkan tambahkan code berikut di bawah fungsi tombol tambah.

$("#btnSimpan").click(function(){
   
   var nim = $("#nim").val();
   var nama = $("#nama").val();
   var jurusan = $("#jurusan").val();
   var angkatan = $("#angkatan").val();
   var ipk = $("#ipk").val();             
   $.ajax({
          url :"<?php echo base_url() ?>index.php/conmahasiswa/tambah",
          type:"post",
          beforeSend: function(){
                      $("#data").html("Loading...");
                                    },
          data: "nim="+nim+"&nama="+nama+"&jurusan="+jurusan+"&angkatan="+angkatan+"&ipk="+ipk,
          success: function(html){                   
                   $("#notifikasi").html('Data berhasil disimpan');
                   $("#data").load("index.php/conmahasiswa/index #data");
                   $("#notifikasi").fadeIn(2500);
                   $("#notifikasi").fadeOut(2500);  
                   $("#btnSimpan").hide();
                   $("#tombolTambah").show();
                   }                      
        });            
   });

Ketika tombol simpan diklik maka, fungsi Ajax akan djalankan dengan type post ke http://localhost/webku/index.php/conmahasiswa/tambah. Kemudian dalam function tambah, karena $_POST berisikan data, maka disimpan dan div data akan direload ulang. Kemudian, aplikasi akan menampilkan notifikasi bahwa berhasil disimpan.
Nah selesai sudah! Mari kita coba aplikasi yang kita buat. Ketikan http://localhost/webku di web browser pembaca.

Untuk source code lengkap dari proyek yang telah kita kerjakan sejauh ini, bisa anda download di sini
Hokay, sekian tutorial kali ini. Di tutorial selanjutnya, kita akan membuat fasilitas untuk mengedit dan menghapus data. See ya!

15 komentar:

A Fairuz Ansyi13 Oktober 2012 pukul 09.22
great tutorial bro
BalasHapus
Balasan
bg teuku27 November 2012 pukul 06.54
Komentar ini telah dihapus oleh pengarang.
BalasHapus
Balasan
seveenth27 Januari 2013 pukul 18.27
bang koq stuck di loading ya abis diklick tambah data
help please :)
BalasHapus
Balasan
Anonim27 Januari 2013 pukul 21.11
sama. abis klik tambah data, yg ada loading forever...
BalasHapus
Balasan
Anonim22 Mei 2013 pukul 03.08
mantap
BalasHapus
Balasan
Muhammad13 Juni 2013 pukul 00.36
Tutorial yang baik, Sangat membantu :D
BalasHapus
Balasan
Syauqi11 Maret 2014 pukul 18.59
bro, ada typo dikit.
1. waktu agan suruh bikin view input mahasiswa, salah ketik jadi inputmahasiwa.php
2. script tambahan untuk pemberian di inputmahasiswa, di viewmahasiswa.php sepertinya salah gan. saya lihat pake firebug, ada error:
ReferenceError: $ is not defined
$().ready(function(){

itu harus diganti apa ya gan? mohon penjelasannya ya.

makasi gan. selebihnya artikel ini sangat membantu dengan pembahasan yang sangat enak dicerna.
BalasHapus
Balasan
dedeDiah19 November 2014 pukul 03.57
Saya masukin file js dengan format di atas, tapi pas di jalankan di urlnya kok ga nampil yah? sedangkan css nya tampil
BalasHapus
Balasan
Anonim30 November 2014 pukul 00.37
mantep bro
BalasHapus
Balasan
Unknown29 Maret 2016 pukul 21.09
tutorialnya mantap gan

www.smartkiosku.com
BalasHapus
Balasan

Tambahkan komentar

Kamis, 26 Juli 2012

CRUD Dengan CodeIgniter + Ajax + JQuery (Part III )

15 komentar: