Ini adalah tutorial sederhana
yang akan mengajarkan Anda tentang
cara membuat form pendaftaran sederhana
menggunakan PHP / MySQL dengan JavaScript untuk validasi input. Tutorial
ini tidak akan mengajarkan Anda
tentang cara untuk membuat desain
yang baik melainkan untuk
memberikan pengetahuan tentang cara membuat formulir pendaftaran yang berfungsi penuh.Pertama kita akan membuat database
Untuk membuat
database:
1. Buka phpmyadmin
2. Klik membuat tabel dan nama sebagai simple_login.
3. Kemudian nama database "simple_login".
4. Setelah membuat nama database, klik SQL dan paste kode di bawah ini.
1. Buka phpmyadmin
2. Klik membuat tabel dan nama sebagai simple_login.
3. Kemudian nama database "simple_login".
4. Setelah membuat nama database, klik SQL dan paste kode di bawah ini.
Code
1. CREATE TABLE IF NOT EXISTS `member` (
2. `mem_id`
int(11) NOT NULL AUTO_INCREMENT,
3. `username`
varchar(30) NOT NULL,
4. `password`
varchar(30) NOT NULL,
5. `fname`
varchar(30) NOT NULL,
6. `lname`
varchar(30) NOT NULL,
7. `address`
varchar(100) NOT NULL,
8. `contact`
varchar(30) NOT NULL,
9. `picture`
varchar(100) NOT NULL,
10. `gender`
varchar(10) NOT NULL,
12.) ENGINE=MyISAM
DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
Dilanjutkan Dengan Membuat Index.php , Kodenya Silahkan
Copykan dan Simpan
Code
1. <form name="reg" action="code_exec.php" onsubmit="return validateForm()" method="post">
2. <table width="274" border="0" align="center" cellpadding="2" cellspacing="0">
3. <tr>
4. <td colspan="2">
5. <div align="center">
6. <?php
7. $remarks=$_GET['remarks'];
8. if ($remarks==null and $remarks=="")
9. {
10. echo 'Register Here';
11. }
12. if ($remarks=='success')
13. {
14. echo 'Registration Success';
15. }
16. ?>
17. </div></td>
18. </tr>
19. <tr>
20. <td width="95"><div align="right">First Name:</div></td>
21. <td width="171"><input type="text" name="fname" /></td>
22. </tr>
23. <tr>
24. <td><div align="right">Last Name:</div></td>
25. <td><input type="text" name="lname" /></td>
26. </tr>
27. <tr>
28. <td><div align="right">Gender:</div></td>
29. <td><input type="text" name="mname" /></td>
30. </tr>
31. <tr>
32. <td><div align="right">Address:</div></td>
33. <td><input type="text" name="address" /></td>
34. </tr>
35. <tr>
36. <td><div align="right">Contact No.:</div></td>
37. <td><input type="text" name="contact" /></td>
38. </tr>
39. <tr>
40. <td><div align="right">Picture:</div></td>
41. <td><input type="text" name="pic" /></td>
42. </tr>
43. <tr>
44. <td><div align="right">Username:</div></td>
45. <td><input type="text" name="username" /></td>
46. </tr>
47. <tr>
48. <td><div align="right">Password:</div></td>
49. <td><input type="text" name="password" /></td>
50. </tr>
51. <tr>
52. <td><div align="right"></div></td>
53. <td><input name="submit" type="submit" value="Submit" /></td>
54. </tr>
55.</table>
56.</form>
Setelah Pembuatan Index.php Tentunya kita harus
mengkoneksikan dengan database yang telah kita buat tadi , kita akan membuat
file dengan nama connection.php silahkan copykan skrip dibawah ini
Code
1. <?php
2. $mysql_hostname = "localhost";
3. $mysql_user = "root";
4. $mysql_password = "";
5. $mysql_database = "registration";
6. $prefix = "";
7. $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
8. mysql_select_db($mysql_database, $bd) or die("Could not select database");
9. ?>
Design Sudah, Setelah itu kita harus membuat prosesnya simpan dengan nama code_exec.php
Code
1. <?php
2. session_start();
3. include('connection.php');
4. $fname=$_POST['fname'];
5. $lname=$_POST['lname'];
6. $mname=$_POST['mname'];
7. $address=$_POST['address'];
8. $contact=$_POST['contact'];
9. $pic=$_POST['pic'];
10.$username=$_POST['username'];
11.$password=$_POST['password'];
12.mysql_query("INSERT INTO member(fname, lname, gender, address, contact, picture, username, password)VALUES('$fname', '$lname', '$mname', '$address', '$contact', '$pic', '$username', '$password')");
13.header("location: index.php?remarks=success");
14.mysql_close($con);
15.?>
Karena Kita Akan Menggunakan Java Script Maka Pastekan Kode
Dibawah Ini Berada Di Antara Tags <head>Disini</head> , pada file
Index.php
Code
1. <script type="text/javascript">
2. function validateForm()
3. {
4. var a=document.forms["reg"]["fname"].value;
5. var b=document.forms["reg"]["lname"].value;
6. var c=document.forms["reg"]["mname"].value;
7. var d=document.forms["reg"]["address"].value;
8. var e=document.forms["reg"]["contact"].value;
9. var f=document.forms["reg"]["pic"].value;
10.var g=document.forms["reg"]["pic"].value;
11.var h=document.forms["reg"]["pic"].value;
12.if ((a==null || a=="") && (b==null || b=="") && (c==null || c=="") && (d==null || d=="") && (e==null || e=="") && (f==null || f==""))
13. {
14. alert("All Field must be filled out");
15. return false;
16. }
17.if (a==null || a=="")
18. {
19. alert("First name must be filled out");
20. return false;
21. }
22.if (b==null || b=="")
23. {
24. alert("Last name must be filled out");
25. return false;
26. }
27.if (c==null || c=="")
28. {
29. alert("Gender name must be filled out");
30. return false;
31. }
32.if (d==null || d=="")
33. {
34. alert("address must be filled out");
35. return false;
36. }
37.if (e==null || e=="")
38. {
39. alert("contact must be filled out");
40. return false;
41. }
42.if (f==null || f=="")
43. {
44. alert("picture must be filled out");
45. return false;
46. }
47.if (g==null || g=="")
48. {
49. alert("username must be filled out");
50. return false;
51. }
52.if (h==null || h=="")
53. {
54. alert("password must be filled out");
55. return false;
56. }
57.}
58.</script>
Jika Terjadi Kesalahan Silahkan Komentar.
By : Admin
Comments
Post a Comment