CRUD AJAX PHP MySQLI Design Bootstrap - Ilmu Komputer

Tentang komputer, tips, trik, artikel, tutorial!

Minggu, 16 November 2014

CRUD AJAX PHP MySQLI Design Bootstrap

CRUD AJAX PHP MySQLI Design Bootstrap - Ini merupakan file dari  http://arifnd.wordpress.com/ tapi saya modif syntax sqlnya dari mysql ke mysqli, karena mysql akan dihapus oleh php di update berikutnya, jadi silahkan anda beralih ke MYSqli atau PDO. Jika anda tidak upate maka siap-siap website yang pernah anda buat dengan syntax sql seperti mysql_fetch_array akan mengalami error, sudah pasti suatu saat server tempat anda hosting akan ikutan update juga. So ikuti perkembangan teknologi gan.

This extension is deprecated

Untuk file aplikasi js sudah saya modif sedikit menjadi seperti ini, file aplikasi sebelumnya bisa anda lihat di http://arifnd.wordpress.com/2013/03/28/kode-crud-sederhana-menggunakan-php-jquery-dan-twitter-bootstrap/


(function($) {
    // fungsi dijalankan setelah seluruh dokumen ditampilkan
    $(document).ready(function(e) {
        // deklarasikan variabel
        var kd_mhs = 0;
        Munculefek();
        showdata();
        
        // ketika tombol ubah/tambah di tekan
        $('.ubah, .tambah').live("click", function(){
            
            var url = "mahasiswa.form.php";
            // ambil nilai id dari tombol ubah
            kd_mhs = this.id;
            
            if(kd_mhs != 0) {
                // ubah judul modal dialog
                $("#myModalLabel").html("Ubah Data Mahasiswa");
            } else {
                // saran dari mas hangs 
                $("#myModalLabel").html("Tambah Data Mahasiswa");
            }

            $.post(url, {id: kd_mhs} ,function(data) {
                // tampilkan mahasiswa.form.php ke dalam <div class="modal-body"></div>
                $(".modal-body").html(data).show();
            });
            
        });
        
        // ketika tombol hapus ditekan
        $('.hapus').live("click", function(){
            var url = "mahasiswa.input.php";
            // ambil nilai id dari tombol hapus
            kd_mhs = this.id;
            
            // tampilkan dialog konfirmasi
            var answer = confirm("Apakah anda ingin mengghapus data ini?");
            
            // ketika ditekan tombol ok
            if (answer) {
                // mengirimkan perintah penghapusan ke berkas transaksi.input.php
                Munculefek();
                $.post(url, {hapus: kd_mhs} ,function() {
                    // tampilkan data mahasiswa yang sudah di perbaharui
                    // ke dalam <div id="data-mahasiswa"></div>
                    showdata();
                });
            }
        });
        
        // ketika tombol simpan ditekan
        $("#simpan-mahasiswa").bind("click", function(event) {
            Munculefek();
            var url = "mahasiswa.input.php";

            // mengambil nilai dari inputbox, textbox dan select
            var v_nim = $('input:text[name=nim]').val();
            var v_nama = $('input:text[name=nama]').val();
            var v_alamat = $('textarea[name=alamat]').val();
            var v_kelas = $('select[name=kelas]').val();
            var v_status = $('select[name=status]').val();

            // mengirimkan data ke berkas transaksi.input.php untuk di proses
            $.post(url, {nim: v_nim, nama: v_nama, alamat: v_alamat, kelas: v_kelas, status: v_status, id: kd_mhs} ,function() {
                // tampilkan data mahasiswa yang sudah di perbaharui
                // ke dalam <div id="data-mahasiswa"></div>
                

                // sembunyikan modal dialog
                $('#dialog-mahasiswa').modal('hide');
                showdata();
                // kembalikan judul modal dialog
                $("#myModalLabel").html("Tambah Data Mahasiswa");
                
            });
        });
        
        
    });
    
    
}) (jQuery);
        function showdata(){
        
            setTimeout("$('#data-mahasiswa').load('mahasiswa.data.php',function(){Hideefek();});", 2000);
        }

        function Munculefek(){
            $("#loading").show();
        }
            
        function Hideefek(){
            $("#loading").hide();
        }
        
        
Screnshotnya seperti gambar berikut ini:

Kode CRUD sederhana menggunakan PHP, Jquery, dan Twitter Bootstrap

Silahkan download!  lewat adfly, skip add pojok kanan atas
Berpassword gan, bayarrrrrr, dengan like saja cukup https://www.facebook.com/ilkomunived

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : CRUD AJAX PHP MySQLI Design Bootstrap

5 komentar:

  1. Malam Mas Redo. wah soal script php saya belum mudeng Mas ijin belajar duku di post ini makasih ya Mas sudah berbagi yang kiranya bisa menambah wawasan saya

    BalasHapus
  2. Asyik nih dapat Pertamax di post menariknya Mas Redo bravo blogging Mas :-bd

    BalasHapus
  3. Ayo Mas Redo semangat ngeblognya bangkit kemabli dan saling berbagi sama saya Mas?

    BalasHapus
  4. Hasilnya keren juga ya, siap dicoba mas.

    Mudah-mudahan bisa saya kembangkan lagi ilmunya.

    BalasHapus
  5. wah....mumet aku.
    script...oh kapan ya aku bisa paham.

    lama gak ke sini, blognya makin keren nih.

    BalasHapus

Berkomentarlah dengan baik dan sopan..
Terimah kasih sudah berkunjung