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..,
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
Posting Komentar