Skip to main content

Insert Data ke Database Tanpa Loading dengan PHP dan jQuery

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.
Baca juga : Menampilkan Data dari Database MySQL Tanpa Loading Dengan jQuery
Sebelumnya silahkan download dahulu jQuery di website resminya disini.
Selanjutnya buat sebuah database, dalam hal ini saya membuat database dengan nama terserah. 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:
<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("mediakunci");
?>
Jika koneksi ke database sudah dibuat, sekarang kita buat Script PHP untuk melakukan proses insert data ke database, berikut ini Scriptnya:
<?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.. ðŸ™‚

Comments

Popular posts from this blog

Membuat Tombol Scroll ke Atas (back to top) dengan JQuery

Cara membuat tombol scroll ke atas dengan jquery (back to top) – Sebuah website yang begitu panjang kebawah tentu akan menyulitkan penggunanya untuk bisa kembali lagi keatas, karena harus scroll terus dengan menggunakan mouse. Hal tersebut tentu kurang efektif. Untuk mengatasi hal tersebut, banyak orang menggunakan sebuah tombol yang ketika di klik akan membawa kita ke bagian atas halaman website dengan animasi yang menarik. Dibutuhkan jquery untuk membuat hal semacam itu, dan pada tutorial kali ini  Media Kunci  akan mengajarkan Anda cara membuatnya. Mudah kok, script nya juga tidak panjang. 1.  HTML:  Buat sebuah file html dan tuliskan script markup nya seperti berikut ini <div id="wrapper"> <h1>Membuat Tombol Scroll to Top Dengan Jquery</h1> <h5><a href="https://mediakunci.blogspot.com/2019/04/membuat-tombol-scroll-ke-atas-back-to.html">Baca tutorial di Media Kunci</a></h5> Konten yang panjang disini....

4 Format Font untuk Website (Web Fonts)

Format font untuk website — format web fonts  — Kemampuan browser yang semakin canggih membuat web designer semakin leluasa dalam berkreasi, termasuk dalam penggunaan font. Sejak dahulu, secara default kita bisa menggunakan font standar yang sudah ada di sistem komputer seperti  Arial  atau  Verdana  untuk mempercantik tampilan tulisan di website. Font standar yang sudah di setiap komputer tersebut dikenal dengan sebutan  Safe Font  atau ada juga yang menyebut System Fonts. Namun saat ini kita bisa menggunakan font lain selain safe font, baik itu font yang dibuat sendiri, font berbayar maupun font gratisan. Fitur Font-Face di CSS3 sangat membantu dalam kemunculan istilah baru yaitu Web Fonts. Web fonts memiliki beberapa format font yang bisa digunakan, dan biasanya ketika kita membeli atau mendownload sebuah web font maka dalam paket yang diberikan terdapat beberapa file font dengan format yang berbeda-beda. Berikut ini beberapa for...

Membuat Script Login yang Aman dengan PHP dan MySQL

Sebuah aplikasi berbasis web umumnya membutuhkan halaman login bagi user/member untuk mengakses halaman tertentu. Halaman itu tentunya harus aman dari resiko pembobolan dan pencurian data. Kali ini saya akan mencoba memberikan sedikit tips cara membuat script login yang aman dengan PHP dan MySQL. Script ini hanya memberikan gambaran tentang bagaimana cara mengamankan halaman login dari ancaman dan resiko pembobolan dan pencurian data user/member. Script ini juga menggunakan teknik enkripsi password dengan fungsi hash(sha512) dan salt. Saya tidak meng-klaim script ini benar-benar dapat membuat halaman login yang aman karena masalah keamanan system web tentu lebih luas dan kompleks. Semoga tips berikut ini bisa menambah pengetahuan Anda dalam mengamankan aplikasi web Anda. Script Login berikut ini diharapkan dapat menahan halaman web Anda dari serangan: •SQL Injections •Session Hijacking •Network Sniffing •Cross Site Scripting •Brute Force Attacks Script ini jalan di PHP m...