Hallo Sahabat, saat ini kita akan melanjutkan artikel tentang belajar CRUD dengan jQuery EasyUI Part 2. Baiklah kita akan membahas bagaimana menambahkan data melalui form. Nah form pada plugin jQuery EasyUI ini akan tampil dengan modal popup. Bagaimana cara membuatnya silahkan simak terus step-step dibawah ini:Langkah pertama perhatikan tampilan dibawah ini atau yang sudah pernah diketikkan pada artikel sebelumnya.
tampilan code diatas adalah form input yang dipakai, jika sahabat melakukan click button tambah data maka akan muncul formnya. Sebelumnya sahabat harus menambahkan script dibawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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 dalam datagrid } } }); } |
Jadi fungsi newUser terdapat pada button dengan event onclick dengan diberi fungsi newUser. Dan seperti berikut ini tampilan form input nya:
Nah sebelum menambahkan kita harus membuat file untuk melakukan perintah insert, coba perhatikan pada script fungsi newUser ada sebuah url tujuan sebagai perintah sql insert yang dimasukan dari form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php $nis = htmlspecialchars($_REQUEST['nis']); $nama = htmlspecialchars($_REQUEST['nama']); $alamat = htmlspecialchars($_REQUEST['alamat']); $telp = htmlspecialchars($_REQUEST['telpon']); include 'conn.php'; $sql = "insert into data_siswa(nis,nama,alamat,telpon) values('$nis','$nama','$alamat','$telp')"; $result = @mysql_query($sql); if ($result){ echo json_encode(array( 'id' => mysql_insert_id(), 'nis' => $nis, 'nama' => $nama, 'alamat' => $alamat, 'telpon' => $telp )); } else { echo json_encode(array('errorMsg'=>'Some errors occured.')); } ?> |
Jadi dalam file save_user.php saya memakai variable = $_REQUEST , fungsi dari variable ini hampir sama dengan $_POST maupun $_GET . Untuk penjelasan kenapa saya memakai variable tersebut sahabat bisa di simak artikelnya disini.
Sekarang coba buka kembali browser sahabat apakah sudah benar secara pengetikkannya. Sebagai contoh saya inputkan data berikut ini dan jika benar maka akan seperti tampilan berikut ini
Baiklah sekian pada artikel kali ini tentang belajar CRUD dengan jQuery EasyUI Part 2, kita berjumpa kembali pada artikel yang akan datang dan kita akan lanjutkan dengan update data.
Semoga bermanfaat dan sampai jumpa. Terima kasih.