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 namadatabase "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,
11. PRIMARY KEY (`mem_id`) 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
