Judge Dr3dd
Mecha Pilot Theorist
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
Related code: How to Create Secure Registration Page in PHP/MySQL
This is a simple tutorial that will teach you on how to create a simple registration form using PHP/MySQL with JavaScript for input validation. This tutorial will not teach you on how to create a good design but rather to give you knowledge on how to create a fully functional registration form.
Creating our Table
First we are going to create our database which stores our data.
To create a database:
1. Open phpmyadmin
2. Click create table and name it as simple_login.
3. Then name the database as "registration".
4. After creating a database name, click the SQL and paste the below code.
Creating The Form
Next step is to create a form and save it as index.php. To create a form, open your HTML code editor and paste the code below after the tag.
Creating our Connection
Next step is to create a database connection and save it as "connection.php". This file is used to connect our form to database. This file serves as a bridge between our form and our database.
Writing Our Save Script
Next step is to create our script that save our input data to database and save it as code_exec.php.
Validating The Input
To add some input validation using javascript, add the code below in the head tag of your index.php file. Input validation is used to make sure that all input field are filled out before saving the to database.
That's it! You've been successfully created your simple registration form with javascript for the input validation.
Registration using php, input validation using javascript.
Update:
I have created another tutorial using a server side validation. And I am also using PDO to secure the registration page. Click here to see my latest update How to Create Registration Page in PHP/MySQL Using PDO Query.
Related code: How to Create Secure Registration Page in PHP/MySQL
Pagination
This is a simple tutorial that will teach you on how to create a simple registration form using PHP/MySQL with JavaScript for input validation. This tutorial will not teach you on how to create a good design but rather to give you knowledge on how to create a fully functional registration form.
Creating our Table
First we are going to create our database which stores our data.
To create a database:
1. Open phpmyadmin
2. Click create table and name it as simple_login.
3. Then name the database as "registration".
4. After creating a database name, click the SQL and paste the below code.
- CREATE TABLE IF
NOT EXISTS `member` (
- `mem_id` int(
11
)
NOT NULL
AUTO_INCREMENT,
- `username` varchar(
30
)
NOT NULL
,
- `password` varchar(
30
)
NOT NULL
,
- `fname` varchar(
30
)
NOT NULL
,
- `lname` varchar(
30
)
NOT NULL
,
- `address` varchar(
100
)
NOT NULL
,
- `contact` varchar(
30
)
NOT NULL
,
- `picture` varchar(
100
)
NOT NULL
,
- `gender` varchar(
10
)
NOT NULL
,
- PRIMARY KEY
(
`mem_id`)
- )
ENGINE=
MyISAM DEFAULT
CHARSET=
latin1 AUTO_INCREMENT=
3
;
Creating The Form
Next step is to create a form and save it as index.php. To create a form, open your HTML code editor and paste the code below after the tag.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Registration</title>
- </head>
- <body>
- <form name="reg" action="code_exec.php" onsubmit="return validateForm()" method="post">
- <table width="274" border="0" align="center" cellpadding="2" cellspacing="0">
- <tr>
- <td colspan="2">
- <div align="center">
- <?php
- // $remarks=$_GET['remarks'];
- if
(
!
isset
(
$_GET
[
'remarks'
]
)
)
- {
- echo
'Register Here'
;
- }
- if
(
isset
(
$_GET
[
'remarks'
]
)
&&
$_GET
[
'remarks'
]
==
'success'
)
- {
- echo
'Registration Success'
;
- }
- ?>
- </div></td>
- </tr>
- <tr>
- <td width="95"><div align="right">First Name:</div></td>
- <td width="171"><input type="text" name="fname" /></td>
- </tr>
- <tr>
- <td><div align="right">Last Name:</div></td>
- <td><input type="text" name="lname" /></td>
- </tr>
- <tr>
- <td><div align="right">Gender:</div></td>
- <td><input type="text" name="gender" /></td>
- </tr>
- <tr>
- <td><div align="right">Address:</div></td>
- <td><input type="text" name="address" /></td>
- </tr>
- <tr>
- <td><div align="right">Contact No.:</div></td>
- <td><input type="text" name="contact" /></td>
- </tr>
- <tr>
- <td><div align="right">Username:</div></td>
- <td><input type="text" name="username" /></td>
- </tr>
- <tr>
- <td><div align="right">Password:</div></td>
- <td><input type="text" name="password" /></td>
- </tr>
- <tr>
- <td><div align="right"></div></td>
- <td><input name="submit" type="submit" value="Submit" /></td>
- </tr>
- </table>
- </form>
- </body>
- </html>
Creating our Connection
Next step is to create a database connection and save it as "connection.php". This file is used to connect our form to database. This file serves as a bridge between our form and our database.
- <?php
- $mysql_hostname
=
"localhost"
;
- $mysql_user
=
"root"
;
- $mysql_password
=
""
;
- $mysql_database
=
"registration"
;
- $prefix
=
""
;
- $bd
=
mysqli_connect
(
$mysql_hostname
,
$mysql_user
,
$mysql_password
)
or die
(
"Could not connect database"
)
;
- mysqli_select_db
(
$bd
,
$mysql_database
)
or die
(
"Could not select database"
)
;
- ?>
Writing Our Save Script
Next step is to create our script that save our input data to database and save it as code_exec.php.
- <?php
- session_start
(
)
;
- include
(
'connection.php'
)
;
- $fname
=
$_POST
[
'fname'
]
;
- $lname
=
$_POST
[
'lname'
]
;
- $mname
=
$_POST
[
'mname'
]
;
- $address
=
$_POST
[
'address'
]
;
- $contact
=
$_POST
[
'contact'
]
;
- $username
=
$_POST
[
'username'
]
;
- $password
=
$_POST
[
'password'
]
;
- mysqli_query
(
$bd
,
"INSERT INTO member(fname, lname, gender, address, contact, picture, username, password)VALUES('$fname
', '$lname
', '$mname
', '$address
', '$contact
', '$pic
', '$username
', '$password
')"
)
;
- header
(
"location: index.php?remarks=success"
)
;
- mysqli_close
(
$con
)
;
- ?>
Validating The Input
To add some input validation using javascript, add the code below in the head tag of your index.php file. Input validation is used to make sure that all input field are filled out before saving the to database.
- <
script type=
"text/javascript"
>
- function
validateForm(
)
- {
- var
a=
document.forms
[
"reg"
]
[
"fname"
]
.value
;
- var
b=
document.forms
[
"reg"
]
[
"lname"
]
.value
;
- var
c=
document.forms
[
"reg"
]
[
"gender"
]
.value
;
- var
d=
document.forms
[
"reg"
]
[
"address"
]
.value
;
- var
e=
document.forms
[
"reg"
]
[
"contact"
]
.value
;
- var
f=
document.forms
[
"reg"
]
[
"username"
]
.value
;
- var
g=
document.forms
[
"reg"
]
[
"password"
]
.value
;
- if
(
(
a==
null
||
a==
""
)
&&
(
b==
null
||
b==
""
)
&&
(
c==
null
||
c==
""
)
&&
(
d==
null
||
d==
""
)
&&
(
e==
null
||
e==
""
)
)
- {
- alert(
"All Field must be filled out"
)
;
- return
false
;
- }
- if
(
a==
null
||
a==
""
)
- {
- alert(
"First name must be filled out"
)
;
- return
false
;
- }
- if
(
b==
null
||
b==
""
)
- {
- alert(
"Last name must be filled out"
)
;
- return
false
;
- }
- if
(
c==
null
||
c==
""
)
- {
- alert(
"Gender name must be filled out"
)
;
- return
false
;
- }
- if
(
d==
null
||
d==
""
)
- {
- alert(
"address must be filled out"
)
;
- return
false
;
- }
- if
(
e==
null
||
e==
""
)
- {
- alert(
"contact must be filled out"
)
;
- return
false
;
- }
- if
(
f==
null
||
f==
""
)
- {
- alert(
"username must be filled out"
)
;
- return
false
;
- }
- if
(
g==
null
||
g==
""
)
- {
- alert(
"password must be filled out"
)
;
- return
false
;
- }
- }
- </
script>
That's it! You've been successfully created your simple registration form with javascript for the input validation.
Registration using php, input validation using javascript.
Update:
I have created another tutorial using a server side validation. And I am also using PDO to secure the registration page. Click here to see my latest update How to Create Registration Page in PHP/MySQL Using PDO Query.
Related code: How to Create Secure Registration Page in PHP/MySQL
Pagination
- Current page
1
- Page
2
- Page
3
- Next page
next
- Last page
last