Imam Riyanto

Minggu, 05-09-2010

Untitled Document

Welcome Guest, Sign in here | Register

input artikel

Imam Riyanto

echo"$artikel[judul_artikel]";

Mar 2010

Submit Form dengan Ajax, PHP & MySQL

By imam

Viewed :398

Kali ini saya mencoba tentang menulis tentang cara mengupload suatu form menggunakan ajax.dengan bantuan jquery. Trik ini bisa kita gunakan misalnya untuk membuat form komentar dari pengunjung. Sebagaimana kita ketahui, dengan ajax kita hanya memproses suatu page pada bagian tertentu saja, sehingga tidak memberatkan kinerja server & bagi situs yang mempunyai kuota bandwidth sedikit, akan dapat menghemat bandwidth situs. Ajax hanyalah suatu metode saja, pemrosesan datanya tetap menggunakan script PHP & MySQL :). Ok kita mulai

1. Mula mula kita buat dulu tabel "komentar ".

CREATE TABLE `komentar` ( `id` INT ( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama` VARCHAR ( 25 ) NOT NULL ,
`komentar` TEXT NOT NULL ,
`hari` VARCHAR ( 10 ) NOT NULL ,
`tanggal` VARCHAR ( 15 ) NOT NULL ) ENGINE = MYISAM ;

2. Buat halaman utamanya (komentar.php)

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(function() {

$(".submit").click(function() {

var name = $("#nama").val();
var comment = $("#komentar").val();

var dataString = 'nama='+ name + '&komentar=' + comment;

if(comment=='' || name=='')
{
alert("Tulis nama dan komentar Anda");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="loading.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');

$.ajax({
type: "POST",
url: "input_komentar.php",
data: dataString,
cache: false,
success: function(html){
$("div#update").prepend(html);
document.getElementById('komentar').value='';
document.getElementById('komentar').focus();
$("#flash").hide();
}
});
} return false;
});
});

</script>

<?
include'koneksi.php';
$seleksi=mysql_query("select * from komentar order by id desc");
$jmlh=mysql_num_rows($seleksi);
if($jmlh==0)
{
echo"Belum ada komentar, silahkan mengomentari";
}
else
{
while($data=mysql_fetch_array($seleksi))
{
?>
<div class="daftar_komentar">
<div class="nama"><? echo"<b>$data[nama]</b> <font color=#666666 size=2>@ $data[hari], $data[tanggal]</font>"?></div>
<div class="komentar"><? echo"$data[komentar]";?></div>
</div>
<hr size="1" width="500px" color="#999999">
<? }

}?>

</div>

<div class="sangkar_form">
<table width="500" border="0" cellspacing="1" cellpadding="0">
<form method="post" action="">
<tr>
<td width="82">Nama</td>
<td width="10">:</td>
<td width="408"><input type="text" id="nama" name="nama" style="width:200px; ">
</td>
</tr>
<tr>
<td valign="top">Komentar</td>
<td valign="top">:</td>
<td><textarea name="komentar" id="komentar" rows="5" style="width:300px; "></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="submit" value="Kirim" class="submit"></td>
</tr>
</form>
</table>

</div>

</div>
</body>
</html>

Catatan : untuk script koneksi.php silahkan sesuaikan dengan database anda

<?
$koneksi=mysql_connect("localhost","root","");
mysql_select_db("namadatabaseAnda",$koneksi);
?>

3. CSS untuk mempercantik tampilan (1.css)

/* CSS Document */

#body{
font-family:tahoma;
font:11px;
}

.sangkar_semua{
font-family:tahoma;
font:11px;
padding:5px;
width:530px;
height:auto;
border:0px solid #000000;
}
/*Komentar*/
.sangkar_komentar{
float:left;
padding:5px;
width:515px;
height:auto;
border:1px solid #666666;
margin-bottom:30px;
}
.daftar_komentar{
width:490px;
height:auto;
border:1px dotted #666666;
padding:5px;
margin-bottom:5px;

}
.nama{
padding-left:5px;
width:480px;
height:15px;
border:0px solid #CCCCCC;
margin-bottom:5px;
}
.komentar{
background-color:#EEEEEE;
padding:5px;
width:480px;
min-height:50px;
height:auto;
border:1px solid #CCCCCC;
}

/*Form*/
.sangkar_form{
float:left;
padding:5px;
min-width:515px;
height:auto;
border:1px solid #000000;
}

4. Kita buat script input_komentar.php nya

<?php

include'koneksi.php';
$nama=$_POST['nama'];
$komentar=$_POST['komentar'];

$hr=array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
$hari_ini=date("w");
$hari=$hr[$hari_ini];
$tanggal=date("d-m-Y");

$insert=mysql_query("insert into komentar(nama,komentar,hari,tanggal) values ('$nama','$komentar','$hari','$tanggal')");
if($insert)
{?>
<div class="daftar_komentar">
<div class="nama"><? echo"<b>$nama</b> <font color=#666666 size=2>@ $hari, $tanggal</font>"?></div>
<div class="komentar"><? echo"$komentar";?></div>
</div>
<hr size="1" width="500px" color="#999999">
<? }?>

Pada script komentar.php ajax mengambil "id" dari komponen form tsb. Demikian juga untuk "id" dari tag yg lain. Hasil dari metode ajax ini akan ditampilkan pada bagian berikut :

<div id="flash"></div>
<div id="update" class="timeline"></div>

Untuk memastikan program yang kita buat berhasil apa tidak, silahkan refresh browser Anda & lihat data di MySQL.
Cara ini saya dapat dari 9lessons.blogspot.com di situs tersebut kita bisa belajar banyak tentang ajax. Thx for the owner situs tsb

Script bisa di download di SINI

Share on Facebook

Komentar Pembaca (1 komentar)

@ Selasa, 20-07-2010 jam 14:58:20 by ztsdtsdtz

- ztdftzydtzdtz

Previous - 1 -Next

Untitled Document Imam Riyanto

Jejak si gundul

38.107.191.83 tgl 05-09-2010 jam 05:54

38.107.191.82 tgl 05-09-2010 jam 05:53

38.107.191.81 tgl 05-09-2010 jam 05:53

38.107.191.80 tgl 05-09-2010 jam 05:52

38.107.191.84 tgl 05-09-2010 jam 05:51

38.107.191.82 tgl 05-09-2010 jam 05:38

38.107.191.81 tgl 05-09-2010 jam 05:39

38.107.191.80 tgl 05-09-2010 jam 05:39

38.107.191.84 tgl 05-09-2010 jam 05:39

38.107.191.83 tgl 05-09-2010 jam 05:40

Statistik
Agama	: 10 artikel
Belajar	: 16 artikel
Humor	: 4 artikel
Info	: 13 artikel
Other	: 3 artikel

Who's online

Imam Riyanto
Guest OL	: 5
Hari ini	: 25
Dikunjungi	: 15748

Komentar
	eenk on Script sistem untuk login menggunakan PHP dan MySQL
	cuk on Bismillah
	lofitra on Kalender script PHP
	admin on POLLING SEDERHANA dengan PHP MySQL
	Lola on POLLING SEDERHANA dengan PHP MySQL
	joel on Cara Download di Youtube
	ztsdtsdtz on Submit Form dengan Ajax, PHP & MySQL
	admin on POLLING SEDERHANA dengan PHP MySQL
	selvia on POLLING SEDERHANA dengan PHP MySQL
	admin on POLLING SEDERHANA dengan PHP MySQL