jquery ajax Crud, metode web service

salam, dalam posting kali ini saya akan mengajak agan untuk belajar membuat aplikasi crud menggunakan jquery ajax, tentunya tidak asing lagi bagi agan semua yg hobi programing, ada baiknya belajar hal hal dasar dari prinship create,read,update,delete semoga membantu agan yg lagi kesulitan mencari koding yang tetap, semoga bermanfaat, okey langsung lihat kodingannya :

simpan koding ini kedalam file. user.html

    <script type="text/javascript">
        function clearForm(){
            $('#input_user').form('clear');
        }
        function submitinputForm(){
            $('#input_user').form('submit',{
            url: 'tambah.php',
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    if (result.errmsg){
                    $.messager.alert(result, 'Gagal Di Tambahkan');
                    } else {
                        $('#ubaru').window('close');
                        $('#dg').datagrid('reload');
                        $.messager.alert(result, 'Berhasil Di Tambahkan');
                    }
                }
            });
        }
        function submiteditForm(){
            $('#edit_user').form('submit',{
                url: 'ubah.php',
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    if (result=='Gagal'){
                        $.messager.alert(result, '<center>Gagal Di Edit</center>');
                    } else {
                        $('#ubah').window('close');        // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                        $.messager.alert(result, '<center>Berhasil Di Edit</center>');
                    }
                }
            });
        }
        $(function(){
            var pager = $('#dg').datagrid().datagrid('getPager');    // get the pager of datagrid
            var editIndex = undefined;
            pager.pagination({
                buttons:[{
                    iconCls:'icon-remove',
                    handler:function(){
                         var row = $('#dg').datagrid('getSelected');
                         if (row){
                            $.messager.confirm('Confirm','Apakah Yakin Akan Menghapus Nama User '+row.uname+' ?',function(r){
                            if (r){
                            $.post('hapus.php',{id:row.id},function(result){
                            if (result=='Berhasil'){
                            $('#dg').datagrid('reload');  // reload the user data
                            } else {
                            $.messager.show({    // show error message
                            title: 'Error',
                            msg: result.errorMsg
                            });
                           }},'html');
                           }
                           });
                         }
                    }
                },{
                    iconCls:'icon-add',
                    handler:function(){
                    $('#ubaru').window('open');
                    }
                },{
                    iconCls:'icon-edit',
                    handler:function(){
                        var row = $('#dg').datagrid('getSelected');
                         if (row){
                                $('#ubah').window('open');
                                $('#edit_user').form('load',{uname:row.uname,id:row.id});
                        }
                    }
                },{
                    iconCls:'icon-man',
                    handler:function(){
                        var row = $('#dg').datagrid('getSelected');
                        var url = "http://localhost/2peta/foto/";
                         if (row){
                            $.messager.alert('Photo', "<center><img src='"+url+""+row.foto+"' /></center>" );
                        }
                    }
                }]
            });           
        })
        $.extend($.fn.validatebox.defaults.rules, {
            confirmPass: {
                validator: function(value, param){
                    var pass = $(param[0]).passwordbox('getValue');
                    return value == pass;
                },
                message: 'Password Tidak Sama.'
            }
        })
    </script>

saya akan jelaskan sedikit tentang kode program.a
        function submitinputForm(){
            $('#input_user').form('submit',{
            url: 'tambah.php',
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    if (result.errmsg){
                    $.messager.alert(result, 'Gagal Di Tambahkan');
                    } else {
                        $('#ubaru').window('close');
                        $('#dg').datagrid('reload');
                        $.messager.alert(result, 'Berhasil Di Tambahkan');
                    }
                }
            });
        }
kode program di atas adalah untuk input data ke file tambah.php dengan metode post data,
  function submiteditForm(){
            $('#edit_user').form('submit',{
                url: 'ubah.php',
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    if (result=='Gagal'){
                        $.messager.alert(result, '<center>Gagal Di Edit</center>');
                    } else {
                        $('#ubah').window('close');        // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                        $.messager.alert(result, '<center>Berhasil Di Edit</center>');
                    }
                }
            });
        }
kode program di atas adalah untuk edit data file ubah.php dengan metode post data
                    handler:function(){
                         var row = $('#dg').datagrid('getSelected');
                         if (row){
                            $.messager.confirm('Confirm','Apakah Yakin Akan Menghapus Nama User '+row.uname+' ?',function(r){
                            if (r){
                            $.post('hapus.php',{id:row.id},function(result){
                            if (result=='Berhasil'){
                            $('#dg').datagrid('reload');  // reload the user data
                            } else {
                            $.messager.show({    // show error message
                            title: 'Error',
                            msg: result.errorMsg
                            });
                           }},'html');
                           }
                           });
                         }
                    }
                }
koding program di atas adalah untuk menghapus data
semoga bermanfaat jangan lupa komennya klo ada kesulitan..,

Komentar

Postingan populer dari blog ini

cara membuat checkbox pada listview vb.net dan dapat di pilih sesuai checkbox yang dipilih

membuat menu jquery bootstrap tanpa reload page

menampilkan data pada power point menggunakan program visual studio 2010