Form Input Data Dengan PHP Dan MySQL

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
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
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <link rel="stylesheet" type="text/css" href="style.css" media="all" />
5 <script type="text/javascript" src="jquery-1.2.3.min.js"></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="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
1 <?php
2 include ('koneksi.php');
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 ?>
koneksi.php
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

Form Input Data Dengan PHP Dan MySQL

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Form Input Data Dengan PHP Dan MySQL

Diunggah oleh

Hak Cipta:

Format Tersedia

Form Input Data Dengan PHP dan AJAX

17 Januari 2012armi81Tinggalkan komentarGo to comments

Pada kesempaan kali ini saya akan berbagi

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

Anda mungkin juga menyukai