Beranda > PHP > Form Input Data Dengan PHP dan AJAX

Form Input Data Dengan PHP dan AJAX

Pada kesempaan kali ini saya akan berbagi mengenai cara membuat form input data menggunakan kolaborasi AJAX dan PHP. Sebenarnya ini adalah tugas mata kuliah Logika Informatika untuk pembuatan program dengan implementasi berbagai Logika Informatika seperti IF, IF-ELSE, NOT, AND dan OR. Program ini terdiri dari  5 file yaitu index.php untuk menampilkan form utama, reg.php untuk memproses input data dari index.php, style.css untuk menata/mempercantik tampilan dari form utama, kemudian koneksi.php untuk membuat koneksi ke database dan include file jquery untuk membuat AJAX form.

index.php

<!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>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$().ajaxStart(function() {
		$('#loading').show();
		$('#result').hide();
	}).ajaxStop(function() {
		$('#loading').hide();
		$('#result').fadeIn('slow');
	});

	$('#add').submit(function() {
		$.ajax({
			type: 'POST',
			url: $(this).attr('action'),
			data: $(this).serialize(),
			success: function(data) {
				$('#result').html(data);
			}
		})
		return false;
	});
})
</script>

<title>Form Input Data</title>

</head>
<body>
<div id="bungkus">
<div id="tambahmember">
<div id="result" style="display:none"> </div>
<div id="form" >
<form id="add" name="add" method="post" action="reg.php">
<h2>Daftar Member</h2>
<marquee> <h1> Create By : Armisianto | 11-S1 TI-13 | STMIK AMIKOM JOGJA</h1> </marquee>

<label>Nama
<span class="small">Max 25 Karakter</span>
</label>
<input type="text" name="nama" id="nama"  />
<label>Username
<span class="small">Max 25 Min 6 Karakter</span>
</label>
<input type="text" name="username" id="username"  />
<label>Password
<span class="small">Min 6 Karakter</span>
</label>
<input type="password" name="password" id="password"  />
<label>Konfirmasi Password

</label>
<input type="password" name="cpassword" id="cpassword"  />
<label>E-Mail
</label>
<input type="text" name="email" id="email" />
<label>No. HP
</label>
<input type="text" name="hp" id="hp"  />
<button type="submit" name="add" id="add" value="add" style="color:#000;">Add</button>
<button type="reset" style="color:#000;">Reset</button>
</form>
</div>
</div>
</div>
</body>
</html>

Pada file index.php di atas terdapat script javascript, hal itu digunakan untuk membuat AJAX agar ketika data dikirim yang diload hanya form saja tidak semua halaman. Perhatikan pada script javascript :

$('#add').submit(function() {

untuk #add itu menyatakan nama/id dari form input data.
reg.php

<?php
include ('koneksi.php');

#cek kesamaan data
$username=$_REQUEST['username'];
$query_string="SELECT * FROM tbl_members WHERE username='$username'";
$query=mysql_query($query_string);
$cek=mysql_num_rows($query);

$nama=$_REQUEST['nama'];
$username=$_REQUEST['username'];
$password=$_REQUEST['password'];
$cpassword=$_REQUEST['cpassword'];
$email=$_REQUEST['email'];
$hp=$_REQUEST['hp'];

//validasi
if (trim($_POST['nama']) == '') {
	$error[] = '- Nama harus diisi';
}
if (strlen(trim($_POST['nama'])) > 25 ) {
	$error[] = '- Nama Max 25 Karakter';
}
if (trim($_POST['username']) == '') {
	$error[] = '- Username harus diisi';
}

if ($cek>=1) {
	$error[] = '- Username sudah ada yang menggunakan';
}
if (strlen(trim($_POST['username'])) < 6 ) {
	$error[] = '- Username Min 6 Karakter ';
}
if (strlen(trim($_POST['username'])) > 25 ) {
	$error[] = '- Username Max 25 Karakter';
}
if (strlen(trim($_POST['password'])) < 6 ) {
	$error[] = '- Password Min 6 Karakter ';
}
if (trim($_POST['cpassword']) != trim($_POST['password']) ) {
	$error[] = '- Konfirmasi Password salah ';
}
if (trim($_POST['email']) == '') {
	$error[] = '- Email harus diisi';
}
if ($email && (!eregi("^.+@.+\\..+$",$email))) {
	$error[] = '- Penulisan Email salah ';
}
if (trim($_POST['hp']) == '') {
	$error[] = '- No Hp harus diisi';
}

//dan seterusnya

if (isset($error)) {
	echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else if(isset($_POST['nama']) && isset($_POST['username'])!= '') {
	/*proses insert data*/
	$nama=$HTTP_POST_VARS['nama'];
	$username=$HTTP_POST_VARS['username'];
	$password=$HTTP_POST_VARS['password'];
	$cpassword=$HTTP_POST_VARS['cpassword'];
	$email=$HTTP_POST_VARS['email'];
	$hp=$HTTP_POST_VARS['hp'];

	$data="insert into tbl_members values('','$nama','$username','$password','$cpassword','$email','$hp')";
	$query=mysql_query($data);

	$data = '';
	foreach ($_POST as $key => $value) {
		$data .= "$key  : $value<br />";
	}

	echo '<b>Form berhasil disubmit. Berikut ini data anda:</b><br />';
	echo $data;
}
die();
?>

koneksi.php

<?php
$server = "localhost";
$username = "root";
$password = "12345678";
$database = "daftarmember";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>

Pada $username , $password, $database dapat anda sesuaikan dengan milik anda.

Download file : inputdata

Demikian semoga bermanfaat

  1. 16 Februari 2012 pukul 12:35

    om admin,,mau tanya nih,,boleh y,,??
    saya mau belajar ajax,,
    saya mau buat form input yang kondisi nya sprti ini :
    terdiri dari 4 field atau data,,
    jika di input data kunci pada kolom pertama,,dan jika di tab atau di klik tmbol (tombol submit untuk pengecekan) maka akan otomatis muncul data yg berkaitan dengan isian di kolom/field pertama.
    mohon bantuan nya y om,,,
    makasi om admin..
    ^_^

  2. 3 Juli 2013 pukul 05:25

    Thax mas, sangat membantu tutorialnya🙂
    Saya punya kasus begini; jika kita select pekerjaan PNS maka akan muncul form input baru untuk ngisi keterangannya namun jika kita select pekerjaan petani maka form tersebut tidak usah dimunculkan. mohon pencerahannya yaa.
    Thax🙂

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: