Form Input Data Dengan PHP dan AJAX
17 Januari 2012armi81Tinggalkan komentarGo to comments
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
[Link] untuk menampilkan form utama, [Link] untuk memproses input data dari [Link],
[Link] untuk menata/mempercantik tampilan dari form utama, kemudian [Link] untuk
membuat koneksi ke database dan include file jquery untuk membuat AJAX form.
[Link]
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Link]
2 <html xmlns="[Link]
3 <head>
4 <link rel="stylesheet" type="text/css" href="[Link]" media="all" />
5 <script type="text/javascript" src="[Link]"></script>
6 <script type="text/javascript">
7 $(document).ready(function() {
8
9 $().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="[Link]">
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 [Link] 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.
[Link]
1 <?php
2 include ('[Link]');
3
4 #cek kesamaan data
5 $username=$_REQUEST['username'];
6 $query_string="SELECT * FROM tbl_members WHERE username='$username'";
7 $query=mysql_query($query_string);
8 $cek=mysql_num_rows($query);
9
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
18 if (trim($_POST['nama']) == '') {
19 $error[] = '- Nama harus diisi';
20 }
21 if (strlen(trim($_POST['nama'])) > 25 ) {
22 $error[] = '- Nama Max 25 Karakter';
23 }
24 if (trim($_POST['username']) == '') {
25 $error[] = '- Username harus diisi';
26 }
27
28 if ($cek>=1) {
29 $error[] = '- Username sudah ada yang menggunakan';
30 }
31 if (strlen(trim($_POST['username'])) < 6 ) {
32 $error[] = '- Username Min 6 Karakter ';
33 }
34 if (strlen(trim($_POST['username'])) > 25 ) {
35 $error[] = '- Username Max 25 Karakter';
36 }
37 if (strlen(trim($_POST['password'])) < 6 ) {
38 $error[] = '- Password Min 6 Karakter ';
39 }
40 if (trim($_POST['cpassword']) != trim($_POST['password']) ) {
41 $error[] = '- Konfirmasi Password salah ';
42 }
43 if (trim($_POST['email']) == '') {
44 $error[] = '- Email harus diisi';
45 }
46 if ($email && (!eregi("^.+@.+\\..+$",$email))) {
47 $error[] = '- Penulisan Email salah ';
48 }
49 if (trim($_POST['hp']) == '') {
50 $error[] = '- No Hp harus diisi';
51 }
52
53 //dan seterusnya
54
55 if (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 }
77 die();
78 ?>
[Link]
1 <?php
2 $server = "localhost";
3 $username = "root";
4 $password = "12345678";
5 $database = "daftarmember";
6
7 // Koneksi dan memilih database di server
8 mysql_connect($server,$username,$password) or die("Koneksi gagal");
9 mysql_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
