hehe, semoga sesuai dengan yg di inginkan oleh om admin
langsung aja. pertama buat database dengan nama kontak
kolom nya terdiri dari
kontak id int 5 aja
kontak_nama varchar terserah kalian
kontak_pesan text
jika sudah saya akan jelaskan format jquery ajax.
format nya seperti ini
- Code: Select all
$(document).submit(function(){
$.ajax({
type : ' ', // GET atau POST
url : ' ', // alamat action untuk proses data
data : ' ', // data dari setiap input dari form
success : ' ', // fungsi jika data sukses dikirim
error : ' ', // fungsi jika data gagal dikirim
});
return false; // melarang form untuk melanjutkan aksi
});
jika sudah mengerti sekarang lanjut ke kode selanjutnya. kita
buat sebuah file dengan nama index.php
- Code: Select all
<html>
<head>
<title>Form Submit with Ajax Post</title>
<style>
<!-- hasil default text berwarna merah jika proses ajax sukses di file proses akan merubah warna text menjadi hijau -->
#result {border:1px solid #FFF; padding:20px; width:500px; height:auto; display:none; color:red; float:left; color:red;}
#loadings {display:none; color:green; float:left; margin:10px 0 0 10px;}
</style>
<!-- Panggil Library jQuery dan jQuery tools Library terlebih dahulu-->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function(){
//Fungsi ajax start untuk menampilkan loading pada form ketika data dikirim
$().ajaxStart(function() {
$('#loadings').show();
//hasil masih disembunyikan
$('#result').hide();
}).ajaxStop(function() {
$('#loadings').hide();
//ketika data sudah terkirim pesan muncul dengan effect slide
$('#result').slideToggle('slow');
});
//menggunakan fungsi .submit untuk menjalankan ajax
$('#contacts').submit(function() {
$.ajax({
//type yang digunakan adalah post
type: 'POST',
//url file proses kirim data
url: 'kirim.php',
//data berasal dari serialize form id contacts
data: $(this).serialize(),
//success function --> jika data berhasil dikirim menampilkan hasil di elemen id result
success: function(data) {
$('#result').html(data);
}
//anda bisa menambahkan error function di sini
})
//ketika form disubmit action form tidak boleh dilanjut karena akan dihandle ajax
return false;
});
});
</script>
</head>
<body>
<span id="result"><!-- hasil dari submit form ditampilkan disini --></span>
<!-- form tidak diberi action karena di handle oleh ajax -->
<form id="contacts" onsubmit="return false;">
<input type="text" name="name" value="Your Name" onBlur="if(this.value==''){this.value='Your Name';}"
onFocus="if(this.value=='Your Name'){this.value='';}" autocomplete="off" /><br />
<textarea cols="45" rows="5" name="msg" onBlur="if(this.value==''){this.value='Your Message';}"
onFocus="if(this.value=='Your Message'){this.value='';}">Your Message</textarea><br />
<input type="submit" class="sub-but" id="sense-button" value="Send Now"><div id="loadings">Loading...</div>
</form>
</body>
</html>
jika sudah di copy paste file diatas silakan lanjut ke file kirim.php
- Code: Select all
<?php
//BUAT KONEKSI
$koneksi = mysql_connect('localhost','root','');
mysql_select_db("kontak",$koneksi) or die("Koneksi ke DB Pedot");
//CEK APAKAH FORM SUDAH DI ISI ATAU MASIH DENGAN NILAI DEFAULT
if (trim($_POST['name']) == '' or ($_POST['name']=='Your Name')) {
$error[] = '* Name required';
}
if (trim($_POST['msg']) == '' or ($_POST['msg']=='Your Message')) {
$error[] = '* Please enter some text.';
}
//JIKA TERJADI ERROR PESAN ERROR CEK FORM DIPISAHKAN DENGAN "IMPLODE" dan dengan <br />
if (isset($error)) {
echo '<b>Error : </b> <br />'.implode('<br />', $error);
} else {
$name = $_POST['name'];
$msg = $_POST['msg'];
$send = mysql_query("INSERT INTO kontak (kontak_nama,kontak_pesan)
VALUES ('$name','$msg')
");
// JIKA BERHASIL DIMASUKKAN KE DB KIRIMKAN PESAN BERHASIL DIKIRIM DAN TEXT BERWARNA HIJAU
if($send) {
echo '<b style="color:#6f0;">Pesan anda sudah terkirim.</b>';
}
//JIKA TIDAK TAMPILKAN PESAN ERROR
else {
echo '<b>Maaf, terjadi kesalahan. Ulangi sekali lagi.</b>';
}
}
?>
Nah, jika sudah silakan di test karena belum saya test
hehehe. jika ada pertanyaan silakan di post atau YM : alfredcrozbymengharapkan banget kopinya ya om
hahahaBerikut komentar yg sangat membantu :
vberror13 wrote::-bd mantap,oom tutorialnya, udah saya test dan udah jalan. thanks, ya.
btw, ada beberapa yang saya perbaiki/tambahin:
query INSERTnya saya bikin kontak_nama, bukan kontak_name.
- Code: Select all
$send = mysql_query("INSERT INTO kontak (kontak_nama,kontak_pesan)
VALUES ('$name','$msg')
karena oom kan bilangozby wrote:kontak_nama varchar terserah kalian
terus karena errornya nggak kelihatan, saya buat jadi
- Code: Select all
//JIKA TIDAK TAMPILKAN PESAN ERROR
else {
echo '<b>Maaf, terjadi kesalahan. Ulangi sekali lagi.</b><br />';
echo mysql_errno($koneksi) . ": " . mysql_error($koneksi) . "\n";
}
running app saya buat di sini, oom, biar yang lain bisa coba: http://vberror13.kodingen.com/vbbego/jquerypost/
mantap,oom tutorialnya, udah saya test dan udah jalan. thanks, ya. 
nya..
News
Site map
SitemapIndex
RSS Feed