Coretan Asha21: CRUD Dengan CodeIgniter + Ajax + JQuery (Part IV

Halo pembaca! Apa kabar kalian hari ini? Semoga baik-baik aja okay?

Di tulisan kali ini saya akan melanjutkan tutorial CRUD menggunakan CodeIgniter yaitu Framework PHP yang belakangan ini sedang naik daun. Kalo di dunia hiburan tanah air, ada Anang dan Ashanty yang sedang naik daun, namun di dunia pemrograman CodeIgniter aka CI inilah yang sedang banyak digunakan oleh web developer untuk mengembangkan aplikasinya.

Di tutorial sebelumnya, aplikasi yang kita buat sudah bisa menampilkan data dari database dan disertai dengan fitur tambah data. Jika pembaca tidak mengikuti tutorial ini dari awal, silahkan loncat ke Part I, Part II atau Part III. Di tutorial ini kita akan menambahkan fitur edit dan delete data.Nah sebelum kita mulai, sebagai referensi anda bisa mendownload source code lengkap dari project yang kita kerjakan ini di sini.

Setelah berhasil menambahkan fitur untuk menambahkan data, mari kita tambahkan fitur untuk mengedit data. Nah, langkah pertama yang harus kita lakukan adalah mengedit file /application/views/viewmahasiswa.php. Yang perlu kita ubah adalah menambahkan link Ubah atau Edit pada tabel data. Jadi ketika link di klik, user akan dibawa ke form untuk mengedit data mahasiswa yang sudah dipilih. Tambahkan saja code yang bercetak tebal.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<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>
    <script>
        $().ready(function(){                        
            $("#tombolTambah").click(function(){
                $.ajax({
                    url : "<?php echo base_url() ?>index.php/conmahasiswa/tambah",
                    beforeSend: function(){
                                        $("#data").html("Loading...");
                                    },
                    success:    function(html){
                                    $("#data").html(html);
                                    $("#btnSimpan").show();
                                    $("#tombolTambah").hide();
                                }                
                });            
            });        
            
            $("#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){
                                $("#tombolTambah").show();                                 
                                 $("#btnSimpan").hide();                                 
                                    $("#data").load("<?php echo base_url() ?>index.php/conmahasiswa/index/ #data");
                                    $("#notifikasi").html('Data berhasil disimpan');                                    
                                    $("#notifikasi").fadeIn(2500);
                                    $("#notifikasi").fadeOut(2500);                                
                                }                
                });            
            });                                       
        });
            
    </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">
                <input type="button" class="tombol" id="tombolUpdate" name="tombolUpdate" value="Update" style="display:none">
            </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>
                    <th colspan="2">Aksi</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>
                    <td width="30"><?php echo anchor("#",'Edit',array('onClick'=>'return edit('.$baris->nim.')')) ?></td>
                    <td width="30"><?php echo anchor("#",'Edit',array('onClick'=>'return hapus('.$baris->nim.')')) ?></td>
                </tr>
                <?php endforeach ?>
                </table>
            </div>
                    
        </div>    
    </div>
</body>
</html>

Nah apa maksud fungsi achor() tersebut? Fungsi anchor() digunakan untuk membuat link atau tautan. Parameter pertama merupakan alamat URL yang akan dituju, (setiap parameter dipisahkan dengan koma) sedangkan parameter kedua merupakan teks yang akan ditampilkan dalam halaman website. Parameter ketiga kita menambahkan event onClick dimana ketika link diklik akan menjalankan fungsi edit(). Kemudian kita menambahkan sebuah tombol lagi untuk mengupdate data. Ketika website pertama kali diakses, tombol tersebut dalam keadaan tersembunyi maka dari itu kita tambahakan atribut style="display:none".

Nah selanjutnya kita tambahkan function baru di /application/models/modelmahasiswa.php untuk mengambil data berdasarkan nim mahasiswa.

function DataMahasiswa($nim){
        return $this->db->get_where('mahasiswa',array('nim'=>$nim))->result();        
}

Fungsi di atas akan mengembalikan nilai berupa object yang merupakan hasil query:

select * from mahasiswa where nim = $data

Nah selanjutnya, mari kita tambahkan function edit di /application/controllers/conmahasiswa.php.

    function edit($nim = NULL) {
        $data['mahasiswa'] = $this->modelmahasiswa->DataMahasiswa($nim);
        $this->load->view('editmahasiswa',$data);    
    }

Dalam fungsi edit, kita meload view editmahasiswa kemudian mari kita buat sebuah view bernama editmahasiswa.php di /application/views

<?php foreach($mahasiswa as $baris): ?>
<form id='formmahasiswa'>
<div>
    <label>Nim</label>
    <input type="text" name="nim" id="nim" size="30" value="<?php echo $baris->nim ?>">
</div>
<div>
    <label>Nama</label>
    <input type="text" name="nama" id="nama" size="30" value="<?php echo $baris->nama ?>">
</div>
<div>
    <label>Jurusan</label>
    <input type="text" name="jurusan" id="jurusan" size="30" value="<?php echo $baris->jurusan ?>">
</div>
<div>
    <label>Angkatan</label>
    <input type="text" name="angkatan" id="angkatan" size="30" value="<?php echo $baris->angkatan ?>">
</div>
<div>
    <label>IPK</label>
    <input type="text" name="ipk" id="ipk" size="30" value="<?php echo $baris->ipk ?>">
</div>
</form>
<?php endforeach ?>

Selanjutnya mari kita buat function edit() di viewmahasiswa.php. Tambahkan code berikut di akhir tag <script>


        function edit(nim){
            $().ready(function(){                                        
                $.ajax({
                    url : "<?php echo base_url() ?>index.php/conmahasiswa/edit/"+nim,        
                    beforeSend: function(){
                                        $("#data").html("Loading...");
                                    },                
                    success:    function(html){
                                $("#tombolUpdate").show();                      
                                $("#tombolTambah").hide();                                                       $("#data").html(html);                 
                                }                
                });                    
            });        
        }

Nah, coba ketikan http://localhost/webku/ di web browser anda dan coba klik salah satu link edit yang sudah anda buat. Apakah sudah muncul form berisikan data mahasiswa yang dipilih? Kira-kira hasilnya akan seperti berikut:

Edit Data

Selanjutnya kita perlu menambahkan function baru untuk mengupdate data mahasiswa. Tambahkan function berikut di /application/models/modelmahasiswa.php

    function updateMahasiswa($data = array()){
        $this->db->where('nim',$data['nim'])->update('mahasiswa',$data);
    }

Kemudian tambahkan function untuk mengupdate data sesuai dengan inputan dari user. Tambahkan code berikut di controller /application/controllers/conmahasiswa.php.

function update(){
        $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->updateMahasiswa($data);   
    }

Dan terakhir kita tambahkan fungsi untuk tombol update. Jadi ketika tombol update diklik, fungsi Ajax akan dijalankan dengan type post, dengan URL http://localhost/webku/conmahasiswa/update/ dan data sesuai dengan inputan dari user. Tambahkan code berikut di bawah fungsi $("#btnSImpan").click().

                $("#tombolUpdate").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/update",
                        type: "post",
                        beforeSend: function(){
                                            $("#data").html("Loading...");
                                        },
                        data    : "nim="+nim+"&nama="+nama+"&jurusan="+jurusan+"&angkatan="+angkatan+"&ipk="+ipk,
                        success:    function(html){
                                    $("#tombolTambah").show();                                 
                                     $("#tombolUpdate").hide();                                 
                                        $("#data").load("<?php echo base_url() ?>index.php/conmahasiswa/index/ #data");
                                        $("#notifikasi").html('Data berhasil diedit');                                    
                                        $("#notifikasi").fadeIn(2500);
                                        $("#notifikasi").fadeOut(2500);                
                                    }                
                    });            
                });

Nah, sampai di sini proses edit-update kita sudah selesai, cobalah untuk mengedit sebuah data kemudian tekan tombol update.

Selanjutnya kita buat fungsi delete di modelmahasiswa.php. Tambahkan fungsi berikut berikut ini.di /application/models/modelmahasiswa.php

function deleteMahasiswa($nim) {
        $this->db->where('nim',$nim)->delete('mahasiswa');    
    }

Selanjutnya tambahkan fungsi delete di comahasiswa.php

    function delete($nim){
        
        $this->modelmahasiswa->deleteMahasiswa($nim);    
    }

Dan yang terakhir adalah menambahkan function hapus di akhir tag <script>

function hapus(nim){
            if(confirm('Yakin Menghapus?')){
            $().ready(function(){                                        
                $.ajax({                    
                    url : "<?php echo base_url() ?>index.php/conmahasiswa/delete/"+nim,        
                    beforeSend: function(){
                                        $("#data").html("Loading...");
                                    },                                                
                    success:    function(html){
                                $("#tombolUpdate").hide();                                 
                                 $("#tombolTambah").show();                                 
                                    $("#data").load('<?php echo base_url() ?>index.php/conmahasiswa/index/ #data');                                                                                                    
                                }                
                });                    
            });    
        }        
        }

Nah, ketika kita mengklik link hapus, maka akan tampil pesan konfirmasi apakah data yang dipilih akan dihapus atau tidak. Jika user mengkonfirmasi, maka yang dipilih akan dihapus.

Nah, selesai sudah aplikasi CRUD sederhana kita menggunakan CodeIgniter, Ajax dan JQuery. Semoga bermanfaat. Jika anda ingin mendapatkan source code langkap dari project yang telah kita kerjakan ini, anda bisa download di sini.

27 komentar:

Anonim8 November 2012 pukul 00.52
boss, ini pakai ci yg versi berapa?
BalasHapus
Balasan
Anonim13 November 2012 pukul 19.40
Tutorialnya mantap Bos, thx
BalasHapus
Balasan
fajar29 November 2012 pukul 23.24
bro, ko yang saya buat tombol simpan sama updatenya ga berfungsi yah? kenapa ya?
BalasHapus
Balasan
Unknown7 Desember 2012 pukul 02.51
mas kalo codeigniter itu khusus buat OS linux bukan apa di windows juga suport ?
thx mas
BalasHapus
Balasan
Unknown21 Desember 2012 pukul 19.34
itu jquery nya kasih link download nya dunk mas, sama css nya.
kan jquery.js sama style.css nya kan gk sembarang file..
BalasHapus
Balasan
Anonim11 Januari 2013 pukul 00.47
bisa share cara membuat website company profile dari awal sampe akhir ?

makasih
BalasHapus
Balasan
Unknown4 Februari 2013 pukul 23.59
makasih mas buda suyana.. saya sangat terbantu sekali..
tp mau nanya lagi ni :)
index.php/conmahasiswa/index/ #data
#data tu maksudnya apa ya mas...
atau fungsi nya untuk apa ya?..
BalasHapus
Balasan
Unknown7 Februari 2013 pukul 03.12
@Budi Irawan: Jadi itu fungsinya untuk mereload data yang ada di database. Nah hasil reload tadi diletakan kembali ke dalam div data. Jadi setelah data disimpan, program akan meminta lagi data yang baru ke database. Thanks atas pertanyaannya bang. Terima kasih udah berkunjung :D
BalasHapus
Balasan
Rius11 Februari 2013 pukul 18.39
Mantap tutorialnya,
tapi mas suyana, bagaimana cara edit/hapus data dengan 2 parameter?

Terimakasih
BalasHapus
Balasan
gakeru12 Maret 2013 pukul 19.23
gan mantap tutorilanya..
gan boleh request gak, ane coba custom" soalnya ga bs"/blm berhasil..
bisa bantu gak gan nambain paging + searching di tutorial ente,.
sblmnya terimak kasih ..
BalasHapus
Balasan
Edo5 April 2013 pukul 01.47
Gan kalo programnya dikembangin pake ajax pagination gimana?
BalasHapus
Balasan
Guncloud16 Mei 2013 pukul 18.25
thanks a lot, gan
BalasHapus
Balasan
FERRYLAKI_MOVIE5 Agustus 2013 pukul 13.52
A Database Error Occurred

Error Number: 1146

Table 'mahasiswa.mahasiswa' doesn't exist

SELECT * FROM (`mahasiswa`)

Filename: C:\xampp\htdocs\Ignitiercode.com\system\database\DB_driver.php

Line Number: 330
BalasHapus
Balasan
Unknown14 Desember 2013 pukul 21.42
mantap gan sangat membantu
BalasHapus
Balasan
Calon surga12 November 2014 pukul 09.46
mantap mas bro :)

ijin sedot ya
BalasHapus
Balasan
Anonim6 Maret 2016 pukul 02.04
Mas klw di buat multi insert gmn ya???cara nya???
BalasHapus
Balasan

Tambahkan komentar

Coretan Asha21

Minggu, 29 Juli 2012

CRUD Dengan CodeIgniter + Ajax + JQuery (Part IV - Edit & Delete)

27 komentar: