Bismillaah.. Rasanya sudah lama sekali saya tidak menulis pada web ini karena kesibukan saya di dunia nyata 
Pada kesempatan kali ini saya akan menulis tentang bagaimana cara untuk memasukan data ke database menggunakan PHP melalui form ajax. Artikel ini saya beri topik Ajax CRUD karena tidak jauh berbeda dengan tutorial CRUD pada postingan sebelumnya. Yang membedakan, pada artikel kali ini kita akan belajar memanfaat kan ajax sehingga tampilan akan lebih menarik. Jika pada CRUD yang sebelumnya setelah menekan tombol “submit” halaman akan merefresh secara keseluruhan sedangkan dengan menggunakan ajax, kita bisa mengatur bagian mana saja yang akan direfresh sehingga tidak semua halaman akan terefresh. Selain lebih menarik dari segi tampilan, hal itu pun lebih meringankan dalam proses load halaman.
Pertama kita akan membuat sebuah form input untuk memasukkan data ke dalam database. Langkah pertama yang harus dipersiapkan adalah membuat database. Buat lah sebuah database dengan nama “ilmuwebdotnet” (tanpa tanda petik), kemudian pada database tersebut buatlah sebuah tabel dengan nama “tabel_artikel” (tanpa tanda petik) yang terdiri dari id_artikel, judul_artikel, isi_artikel, dan kategori_artikel. Cara untuk membuat Database bisa dilihat pada artikel sebelumnya disini.
Setelah itubuat sebuah file koneksi.php, yang berisi:
koneksi.php
<?php
$con=mysql_connect("localhost","root","") or die ("koneksi dengan database gagal");
mysql_select_db("ilmuwebdotnet",$con) or die ("database tidak ada");
?>
Setelah itu buat file index.html yang berisi form untuk menginput data:
index.html
Your ads will be inserted here by
Easy AdSense.
Please go to the plugin admin page to paste your ad code.
</p>
<p style="text-align: justify;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Create Data - Ajax Form - ilmuweb.net</title>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {</p>
<p style="text-align: justify;">$().ajaxStart(function() {
$('#loading').show();
$('#hasil').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#hasil').fadeIn('slow');
});</p>
<p style="text-align: justify;">$('#FormArtikel').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#hasil').html(data);
}
})
return false;
});
})
</script>
<style type="text/css">
body, table, input, select, textarea { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999; }
td { padding: 5px; }
#hasil { background-color: #F0FFED; border: 1px solid #215800; padding: 10px; width: 400px; margin-bottom: 20px; }
#content{margin-left:30%;}
</style>
</head>
<body>
<div id="content">
<h4>Create Data - Ajax Form - <a href="http://ilmuweb.net">ilmuweb.net</a></h4>
<div id="loading" style="display:none;"><img src="loading.gif" alt="loading..." /></div>
<div id="hasil" style="display:none;"></div>
<form id="FormArtikel" method="post" action="insert_artikel.php">
<table>
<tr>
<td width="100">Judul Artikel</td>
<td>
<input name="judul_artikel" size="30" type="text" />
</td>
</tr>
<tr>
<td>Kategori Artikel</td>
<td>
<select name="kategori_artikel">
<option value="PHP">PHP</option>
<option value="HTML">HTML</option>
<option value="MySql">MySql</option>
<option value="Javascript">Javascript</option>
</select>
</td>
</tr>
<tr>
<td>Isi Artikel</td>
<td>
<textarea name="isi_artikel" rows="5" cols="31" /></textarea>
</td>
</tr>
<tr>
<td></td>
<td align="right">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</body>
</html></p>
<p style="text-align: justify;">
Selanjutnya adalah membuat file php untuk memproses data yang diinpitkan pada index.html:
insert_artikel.php
</p>
<p style="text-align: justify;"><?php
include("koneksi.php");
$id_artikel=$_POST['id_artikel'];
$judul_artikel=$_POST['judul_artikel'];
$isi_artikel=$_POST['isi_artikel'];
$kategori_artikel=$_POST['kategori_artikel'];
//validasi
if (trim($judul_artikel) == '') {
$error[] = '- Judul Artikel harus diisi';
}
if (trim($isi_artikel) == '') {
$error[] = '- Isi Artikel harus diisi';
}
if (isset($error)) {
echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {</p>
<p style="text-align: justify;">$query="insert into tabel_artikel values('','$judul_artikel','$isi_artikel','$kategori_artikel')";
$exe=mysql_query($query);</p>
<p style="text-align: justify;">$data = '';
foreach ($_POST as $k => $v) {
$data .= "$k : $v<br />";
}</p>
<p style="text-align: justify;">echo '<b>Form berhasil disubmit. Berikut ini data anda:</b><br />';
echo $data;
}
die();
?></p>
<p style="text-align: justify;">
Langkah terakhir adalah mendownload file jquery-1.2.3.min.js dan gambar untuk proses loading pada saat data sedang diproses. untuk file jquery-1.2.3.min.js bisa di download disini dan untuk gambar bisa di download disini
Selesai
Untuk mendownload sourcecode lengkap silakan klik link dibawah ini:
Semoga bermanfaat
Seorang manusia biasa, tempatnya salah dan lupa, yang ingin turut berpartisipasi mencerdaskan kehidupan bangsa dan negara.
Seorang manusia biasa, tempatnya salah dan lupa, yang ingin turut berpartisipasi mencerdaskan kehidupan bangsa dan negara.
om, mau nanya nih.
Parse error: syntax error, unexpected ‘;’ in C:\xampp\htdocs\belajar\insert.php on line 7
itu kenapa ya
mohon dibalas tq
Coba lihat file insert.php baris ke 7, apakah sudah diakhiri dengan titik koma (;)