Belajar CRUD Dengan jQuery EasyUI Part 2

Hallo Rekan rekan, dikala ini kita akan melanjutkan artikel mengenai belajar CRUD dengan jQuery EasyUI Part 2. Baiklah kita akan membahas bagaimana menambahkan data lewat form. Nah form di plugin jQuery EasyUI ini akan tampil dengan modal popup. Bagaimana cara membuatnya silahkan simak terus step-step dibawah ini:Langkah pertama-tama perhatikan tampilan dibawah ini atau yang telah pernah diketikkan di artikel sebelumnya.

tampilan code diatas yakni form input yang dimanfaatkan, jikalau rekan-rekan menjalankan click button tambah data karenanya akan muncul formnya. Sebelumnya rekan-rekan mesti menambahkan script dibawah ini

var url;<br />
        function newUser(){<br />
            $(‘#dlg’).dialog(‘open’).dialog(‘setTitle’,’Tambah Data’);<br />
            $(‘#fm’).form(‘clear’);<br />
            url = ‘save_user.php’;<br />
        }<br />
function saveUser(){<br />
            $(‘#fm’).form(‘submit’,{<br />
                url: url,<br />
                onSubmit: function(){<br />
                    return $(this).form(‘validate’);<br />
                },<br />
                success: function(result){<br />
                    var result = eval(‘(‘+result+’)’);<br />
                    if (result.errorMsg){<br />
                        $.messager.show({<br />
                            title: ‘Error’,<br />
                            msg: result.errorMsg<br />
                        });<br />
                    } else {<br />
                        $(‘#dlg’).dialog(‘close’);      // close dialog atau modal popup<br />
                        $(‘#dg’).datagrid(‘reload’);    // reload data pada datagrid<br />
                    }<br />
                }<br />
            });<br />
        }

var url;

function newUser(){

$(‘#dlg’).dialog(‘open’).dialog(‘setTitle’,‘Tambah Data’);

$(‘#fm’).form(‘clear’);

url = ‘save_user.php’;

}

function saveUser(){

$(‘#fm’).form(‘submit’,{

url: url,

onSubmit: function(){

return $(this).form(‘validate’);

success: function(result){

var result = eval(‘(‘+result+‘)’);

if (result.errorMsg){

$.messager.show({

title: ‘Error’,

msg: result.errorMsg

});

} else {

$(‘#dlg’).dialog(‘close’); // close dialog atau modal popup

$(‘#dg’).datagrid(‘reload’); // reload data pada datagrid

}

});

}

Jadi guna newUser terdapat di button dengan event onclick dengan diberi guna newUser. Dan seperti berikut ini tampilan form input nya:

Nah sebelum menambahkan kita mesti merancang file bagi menjalankan petunjuk insert, coba perhatikan di script guna newUserÂ ada sebuah url tujuan selaku petunjuk sql insert yang dimasukan dari form.

<?php</p>
<p>$nis = htmlspecialchars($_REQUEST[‘nis’]);<br />
$nama = htmlspecialchars($_REQUEST[‘nama’]);<br />
$domisili = htmlspecialchars($_REQUEST[‘alamat’]);<br />
$telp = htmlspecialchars($_REQUEST[‘telpon’]);</p>
<p>include ‘conn.php’;</p>
<p>$sql = “insert into data_siswa(nis,nama,domisili,telpon) values(‘$nis’,’$nama’,’$domisili’,’$telp’)”;<br />
$result = @mysql_query($sql);<br />
if ($result){<br />
	echo json_encode(array(<br />
		‘id’ => mysql_insert_id(),<br />
		‘nis’ => $nis,<br />
		‘nama’ => $nama,<br />
		‘domisili’ => $domisili,<br />
		‘telpon’ => $telp<br />
	));<br />
} else {<br />
	echo json_encode(array(‘errorMsg’=>’Some errors occured.’));<br />
}<br />
?>

<?php

$nis = htmlspecialchars($_REQUEST[‘nis’]);

$nama = htmlspecialchars($_REQUEST[‘nama’]);

$domisili = htmlspecialchars($_REQUEST[‘domisili’]);

$telp = htmlspecialchars($_REQUEST[‘telpon’]);

include ‘conn.php’;

$sql = “insert into data_siswa(nis,nama,domisili,telpon) values(‘$nis’,’$nama’,’$domisili’,’$telp’)”;

$result = @mysql_query($sql);

if ($result){

echo json_encode(array(

‘id’ => mysql_insert_id(),

‘nis’ => $nis,

‘nama’ => $nama,

‘domisili’ => $domisili,

‘telpon’ => $telp

));

} else {

echo json_encode(array(‘errorMsg’=>‘Some errors occured.’));

}

Jadi pada file save_user.phpÂ saya memakai variable = $_REQUEST , guna dari variable ini hampir sama dengan $_POST maupun $_GET . Bagi penjelasan kenapa saya memakai variable tersebut rekan-rekan dapat di simak artikelnya disini.

Sekarang ini coba buka kembali browser rekan-rekan apakah telah benar secara pengetikkannya. Selaku contoh saya inputkan data berikut ini dan jikalau benar karenanya akan seperti tampilan berikut ini

Baiklah demikian di artikel kali ini mengenai belajar CRUD dengan jQuery EasyUI Part 2,Â kita berjumpa kembali di artikel yang akan datang dan kita akan lanjutkan dengan update data.

Semoga bermanfaat dan hingga jumpa. Terima kasih.

sumber :kursuswebprogramming.com/blog/

(Visited 10 times, 1 visits today)

Leave a Reply Cancel reply