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:
| 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:
| <?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.
| $("#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:
Downloadpass = www.tutorialweb.net
