Insert Data ke Database Tanpa Loading dengan PHP dan jQuery. Tutorial pertama tentang jQuery ini akan saya mulai dari yang sederhana aja dulu yaitu cara Insert Data ke Database Tanpa Loading dengan PHP dan jQuery.
Sebelumnya silahkan download dahulu jQuery di website resminya disini.
Selanjutnya buat sebuah database, dalam hal ini saya membuat database dengan nama tutorialweb. Kemudian dumping Script SQL di bawah ini:
|
1 2 3 4 5 |
CREATE TABLE `siswa` ( `nama` varchar(32) NOT NULL, `kelas` varchar(3) NOT NULL, `jurusan` varchar(20) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; |
Dari Script SQL di atas anda akan mendapatkan sebuah table dengan nama siswa dengan tiga buah field yaitu nama, kelas, jurusan.
Jika sudah kita akan membuat Form HTML, dan berikut ini kodenya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <title>Insert Data ke Database Dengan jQuery</title> </head> <body> <form id="myForm" action="insert.php" method="post"> <p>Nama : <input type="text" name="nama" /></p> <p>Kelas : <input type="text" name="kelas" /></p> <p>Jurusan : <input type="text" name="jurusan" /></p> <p><button id="sub">Tambah</button></p> </form> <span id="result"></span> <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> <script type="text/javascript" src="scripts/insert.js"></script> </body> </html> |
Jangan lupan simpan dengan nama index.html.
Selanjutnya buat Script untuk melakukan koneksi ke database, berikut ini Script-nya:
|
1 2 3 4 |
<?php mysql_connect("localhost", "root", "root"); mysql_select_db("tutorialweb"); ?> |
Jika koneksi ke database sudah dibuat, sekarang kita buat Script PHP untuk melakukan proses insert data ke database, berikut ini Scriptnya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php require_once("connect.php"); $nama = $_POST['nama']; $kelas = $_POST['kelas']; $jurusan = $_POST['jurusan']; if($nama && $kelas && $jurusan){ $insert = mysql_query("INSERT INTO siswa VALUES('$nama', '$kelas', '$jurusan')"); if($insert){ echo 'Data berhasil disimpan!'; }else{ echo 'Gagal menyimpan data!'; } }else{ echo 'Masukkan data dengan benar!'; } ?> |
Simpan dengan nama insert.php.
Dari script yang sudah ada di atas kita sudah bisa melakukan Insert Data ke Database. Selanjutnya akan di buat Script untuk melakukan insert tanpa loading dengan jQuery.
Buat file baru, dan ketikkan Script di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$("#sub").click(function() { $.post($("#myForm").attr("action"), $("#myForm :input").serializeArray(), function(info) { $("#result").html(info); }); clearInput(); }); $("#myForm").submit(function(){ return false; }); function clearInput(){ $("#myForm :input").each(function(){ $(this).val(''); }); }; |
Simpan dengan nama insert.js di dalam folder scripts.
lebih jelasnya di bawah ini adalah struktur foldernya:
Oke, silahkan coba, dan jika ada kesulitan silahkan tinggalkan komentar anda dibawah. Thanks.. 🙂
Yang mau download silahkan klik tombol ini:
Password:
Artikelnya menarik gan,,
tapi gan sebelumnya, ane mau nanya, yang dimaksud tanpa loading itu gimana ya ? seadainya skrip ini dicoba di hosting beneran apakah bener bisa tanpa loading ?
Klo ane boleh saran, judulnya mungkin lebih tepatnya kurang lebih seperti ini
“Insert data secara asynchronous menggunakan jQuery”
Artikelnya bagus-bagus gan, makasih
makasi gan sarannya.. 🙂
iza gan, ketika tombol di klik halaman tidak perlu loading untuk proses insertnya..
tolong di share cara edit salah satu file class app java menggunakan php,trs di cmpile lg mnjadi format .Jar pkai php juga. Msalkan Operamini.jar.
Thx master.
maap gan, saya tidak begitu paham pembahasan java.
kalo javascript mungkin saya bisa membantu.. 🙂
Oke. bro.
Gmana kl beberapa file di jadikan zip,supaya lgsung bisa di download hsil zip tadi. [pkai PHP],
oke gan, nanti saya tambahkan link donwloadnya.. 🙂
Oke bro. jgan bosan” dgn prtnyaan saya. Thx :D.
Yang kayak gini namanya AJAX 🙂
yups.. 🙂
mantap gan… usul judul juga insert database tanpa reload / pindah halaman
hehehe
heheheee…. :2thumbup
keren gan …
mau tanya nih kalo script javascript/jquery, bikin shortcut sendiri gimana gan ? …
thanks.
shortcut gmn gan maksudnya…! 🙂
misalnya tekan CTRL + B => BOLD ..
pakek editor aja biar gag repot, misal tinymce ato ckeeditor, dll…
owh makasih gan ,,,
Master, script di atas kan insert tanpa loading. Kalau insert & menampilkan tanpa loading bisa ga ya ?
kalo menampilkan lihat disini http://tutorialweb.net/menampilkan-data-dari-database-mysql-tanpa-loading-dengan-jquery/
bro mau tanya. ane kan coba pake database postgre. kenapa tidak bisa ya? setelah submit halaman berganti ke insert php.
trus untuk script
$(“#sub”).click(function() {
$.post($(“#myForm”).attr(“action”), $(“#myForm :input”).serializeArray(), function(info) { $(“#result”).html(info); });
clearInput();
});
datas kan tertulis .html(info) apabila formnya dalam bentuk php bagaimana? terima kasih gan.
Wah gk paham postgre saya
Terimakasih gan..
Sangat Bermanfaat…
Mas saya tambahin [ Id ] di database Auto incremen kok gak bisa di save ya …?
mohon pnecerahannya..
Mas, saya bikin pakai gagal, kenapa ya
ada pesan errornya gak?
Mas, saya bikin pakai ,(input type=file) gagal kenapa ya
datanya tidak terbawa
itu menambahkan proses upload juga
om…
kalau script diatas ketika di submit langsung ke save, kalau di gabungin dikit dengan javascript muncul pemberitahuan yes/no kayak apa bentuk nya om…
binggung mengabungkan nya om
help..
coba cara ini gan,
edit file index.html dan pada bari ke 11 ganti dengan ini:
td dicoba in om..
kalau 3 tiga field nya di isi lalu disubmit keluar alert yes/no, kalau kita tekan no data nya tetap masuk database om…
tp kalau 1 atau dua field aja yg diisi, ditekan no baru data nya gak masuk om…
kalau proses nya di batalkan tetap masuk data ke database nya om..
td dicoba in om..
kalau 3 tiga field nya di isi lalu disubmit keluar alert yes/no, kalau kita tekan no data nya tetap masuk database om…
tp kalau 1 atau dua field aja yg diisi, ditekan no baru data nya gak masuk om…
ada tutorial INLINE INSERT,EDIT , AUTO SUM dll tanpa loading . seperti pada microsoft Excel tapi pake php, ajax jquery dkk ?
makasih
masih belom ada gan
yah ko lum ada si… pdahal butuh bgt jew…. kalo pakai java emang bisa. tp kalo php dkk belum
ada yg tau ga ya.
wah… keren gan… ditunggu kunbalnya om….
Gk ngerti soal php
bagus juga kalau pakai javascript, bisa juga cuman pakai php dengan menggunakan fungsi if isset dibwah form input.
Ga bisa d tambah 2 kali data nya :mewek
Gagal menambahkan data! Kembali
apa muncul error?
Terimakasih kak, Work ..
mantaaff… 🙂
tidak bisa di download