Membuat Form Entry Data Dengan PHP + 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
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<link rel="stylesheet" type="text/css" href="style.css" media="all" />
05<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
06<script type="text/javascript">
07$(document).ready(function() {
08 
09    $().ajaxStart(function() {
10        $('#loading').show();
11        $('#result').hide();
12    }).ajaxStop(function() {
13        $('#loading').hide();
14        $('#result').fadeIn('slow');
15    });
16 
17    $('#add').submit(function() {
18        $.ajax({
19            type: 'POST',
20            url: $(this).attr('action'),
21            data: $(this).serialize(),
22            success: function(data) {
23                $('#result').html(data);
24            }
25        })
26        return false;
27    });
28})
29</script>
30 
31<title>Form Input Data</title>
32 
33</head>
34<body>
35<div id="bungkus">
36<div id="tambahmember">
37<div id="result" style="display:none"> </div>
38<div id="form" >
39<form id="add" name="add" method="post" action="reg.php">
40<h2>Daftar Member</h2>
41<marquee> <h1> Create By : Armisianto | 11-S1 TI-13 | STMIK AMIKOM JOGJA</h1> </marquee>
42 
43<label>Nama
44<span class="small">Max 25 Karakter</span>
45</label>
46<input type="text" name="nama" id="nama"  />
47<label>Username
48<span class="small">Max 25 Min 6 Karakter</span>
49</label>
50<input type="text" name="username" id="username"  />
51<label>Password
52<span class="small">Min 6 Karakter</span>
53</label>
54<input type="password" name="password" id="password"  />
55<label>Konfirmasi Password
56 
57</label>
58<input type="password" name="cpassword" id="cpassword"  />
59<label>E-Mail
60</label>
61<input type="text" name="email" id="email" />
62<label>No. HP
63</label>
64<input type="text" name="hp" id="hp"  />
65<button type="submit" name="add" id="add" value="add" style="color:#000;">Add</button>
66<button type="reset" style="color:#000;">Reset</button>
67</form>
68</div>
69</div>
70</div>
71</body>
72</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 :
1$('#add').submit(function() {
untuk #add itu menyatakan nama/id dari form input data.
 
reg.php
01<?php
02include ('koneksi.php');
03 
04#cek kesamaan data
05$username=$_REQUEST['username'];
06$query_string="SELECT * FROM tbl_members WHERE username='$username'";
07$query=mysql_query($query_string);
08$cek=mysql_num_rows($query);
09 
10$nama=$_REQUEST['nama'];
11$username=$_REQUEST['username'];
12$password=$_REQUEST['password'];
13$cpassword=$_REQUEST['cpassword'];
14$email=$_REQUEST['email'];
15$hp=$_REQUEST['hp'];
16 
17//validasi
18if (trim($_POST['nama']) == '') {
19    $error[] = '- Nama harus diisi';
20}
21if (strlen(trim($_POST['nama'])) > 25 ) {
22    $error[] = '- Nama Max 25 Karakter';
23}
24if (trim($_POST['username']) == '') {
25    $error[] = '- Username harus diisi';
26}
27 
28if ($cek>=1) {
29    $error[] = '- Username sudah ada yang menggunakan';
30}
31if (strlen(trim($_POST['username'])) < 6 ) {
32    $error[] = '- Username Min 6 Karakter ';
33}
34if (strlen(trim($_POST['username'])) > 25 ) {
35    $error[] = '- Username Max 25 Karakter';
36}
37if (strlen(trim($_POST['password'])) < 6 ) {
38    $error[] = '- Password Min 6 Karakter ';
39}
40if (trim($_POST['cpassword']) != trim($_POST['password']) ) {
41    $error[] = '- Konfirmasi Password salah ';
42}
43if (trim($_POST['email']) == '') {
44    $error[] = '- Email harus diisi';
45}
46if ($email && (!eregi("^.+@.+\\..+$",$email))) {
47    $error[] = '- Penulisan Email salah ';
48}
49if (trim($_POST['hp']) == '') {
50    $error[] = '- No Hp harus diisi';
51}
52 
53//dan seterusnya
54 
55if (isset($error)) {
56    echo '<b>Error</b>: <br />'.implode('<br />', $error);
57} else if(isset($_POST['nama']) && isset($_POST['username'])!= '') {
58    /*proses insert data*/
59    $nama=$HTTP_POST_VARS['nama'];
60    $username=$HTTP_POST_VARS['username'];
61    $password=$HTTP_POST_VARS['password'];
62    $cpassword=$HTTP_POST_VARS['cpassword'];
63    $email=$HTTP_POST_VARS['email'];
64    $hp=$HTTP_POST_VARS['hp'];
65 
66    $data="insert into tbl_members values('','$nama','$username','$password','$cpassword','$email','$hp')";
67    $query=mysql_query($data);
68 
69    $data = '';
70    foreach ($_POST as $key => $value) {
71        $data .= "$key  : $value<br />";
72    }
73 
74    echo '<b>Form berhasil disubmit. Berikut ini data anda:</b><br />';
75    echo $data;
76}
77die();
78?>

koneksi.php
01<?php
02$server = "localhost";
03$username = "root";
04$password = "12345678";
05$database = "daftarmember";
06 
07// Koneksi dan memilih database di server
08mysql_connect($server,$username,$password) or die("Koneksi gagal");
09mysql_select_db($database) or die("Database tidak bisa dibuka");
10?>  

Pada $username , $password, $database dapat anda sesuaikan dengan milik anda.
Download file : inputdata
Demikian semoga bermanfaat
Labels:

Artikel Lainnya