Introduction
The following steps are required to design a registration form (Sign Up Form): Step 1: Firstly, install a virtual server on your computer (eg Xampp, Wamp). Xampp is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages. XAMPP stands for Cross-Platform (X), Apache (A), MySQL (M), PHP (P), and Perl (P).
Figure: Xampp Server
Step 2: Next we will require an editor where the HTML code has to be written. You can use any editor (such as Notepad++, Adobe Dreamweaver, NetBeans, etc). Here we will use Notepad ++. Step 3: Install Notepad++. Here are the steps:
Figure: Notepad ++
Notepad++ is a source code editor used with Microsoft Windows. It supports editing in tabular form, which allows us to work with multiple open files in a single window. Notepad++ is distributed as free software. Click on the first link in the browser window. After clicking the first link the following window will appear.
Figure: Download Notepad ++
Download the software by clicking the download button.
Step 4: Open the Notepad++ text editor and write the HTML code for designing the HTML Sign Up page.\
We will use various HTML tags to design the page. You can include the fields according to your convenience (i.e whichever fields you require for the form). Here I have included the fields according to my convenience.
Have a view of the code written in notepad++,
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<link href = "registration.css" type = "text/css" rel = "stylesheet" />
<h2>Sign Up</h2>
<form name = "form1" action="modified.php" method = "post" enctype = "multipart/form-data" >
<div class = "container">
<div class = "form_group">
<label>First Name:</label>
<input type = "text" name = "fname" value = "" required/>
</div>
<div class = "form_group">
<label>Middle Name:</label>
<input type = "text" name = "mname" value = "" required />
</div>
<div class = "form_group">
<label>Last Name:</label>
<input type = "text" name = "lname" value = "" required/>
</div>
<div class = "form_group">
<label>Password:</label>
<input type = "password" name = "pwd" value = "" required/>
</div>
</div>
</form>
</body>
</html>
Here I have included the LINK tag to link the CSS file for this HTML page.
HTML or Hypertext Markup Language is the standard and most basic language in use to create web pages.
CSS stands for Cascading Style Sheets
This is used for styling purpose. HTML coding is just a structure and CSS is applied to dictate your website's look and feel. Font size, font color, font style styling of images, page layout, mouse-over effects and more are determined by CSS. The CSS applied over the above HTML coding is given below.
.container {
max-width: 1350px;
width: 100%;
margin: 50px;
height: auto;
display: block;
}
body {
color: #8A2BE2;
font-size: 20px;
font-family: Verdana, Arial, Helvetica, monospace;
background-color: #F0E8A0;
}
h2 {
text-align: center;
}
.form_group {
padding: 10px;
;
display: block;
}
label {
float: left;
padding-right: 50px;
line-height: 10%;
display: block;
width: 208px;
}
Here you would be wondering why I have used <div> in HTML. Let me explain to you the importance of using <div>.
The <div> element is often used as a layout tool.
We need to see how to use them later on in the body section of the page. To use your class, all you need to do is add the class=" " attribute to the tag you wish to have the style of your class. So, if you wanted a line of text to be read, you could add the class attribute to a <DIV> tag, like this:
<div class="form_group">. Here we have used this class because we can directly apply CSS on this class. The tags which has been opened should be closed also.
Now let us move further.
Step 5: Apply CSS on the HTML code. General rules for applying CSS are:
We use dot(.) beside any class to apply effects into it and ‘#’ tag before any ID. E.g.
.container {
// css attributes will be written here
}
Here I have taken container as a class. Class is user-defined.
Note: Save the Sign_Up page in the xampp folder->htdocs->create a new folder( user-defined). Inside this new folder, you have to keep all the data related to your project. It may be any kind of images used in webpage, HTML coding, or CSS coding. I mean to say all the things that are used in creating a web page must be under one roof (i.e under one folder).
Figure: Sign_Up
After writing the HTML code and applying the above CSS, the registration page would look like above.
Next, we will insert data into the fields of the sign_up page and store the information in MySQL.
For that, we have to start the xampp controller. Start Apache and MYSQL in the XAMPP controller.
Now we will go to the next level where we will make use of PHP syntax.
PHP
PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is an acronym for "PHP: Hypertext Preprocessor".
Figure: Xammp Start
PHP is a widely-used, open-source scripting language. PHP scripts are executed on the server. PHP is free to download and use. PHP code is executed on the server, and the result is returned to the browser as plain HTML. PHP files have extension ".php". PHP can collect form data.
PHP can add, delete, modify data in your database. It runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) and supports a wide range of databases. PHP is easy to learn and runs efficiently on the server-side.
PHP Variables (Rules)
- A variable starts with the $ sign, followed by the name of the variable.
- A variable name must start with a letter or the underscore character.
- A variable name cannot start with a number.
- Variable names are case-sensitive ($age and $AGE are two different variables).
Output Variable
The PHP ‘echo’ statement is often used to output data to the screen.
PHP FORMS
Write Html coding for sign_up page and save it as index.php. Again create a PHP page named connection.php where we will write the code for creating a connection with the database.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$conn = mysql_connect ($servername , $username , $password) or die("unable to connect to host");
$sql = mysql_select_db ('test',$conn) or die("unable to connect to database");
?>
The PHP script are always written between (<?php (opening) and ?> closing).
Here as you are seeing that I have used user-defined variables to assign something. This makes me easy to write code effectively and in a clean way.
Here I have assigned localhost to $servername, ’root’ to $username and password has been left blank. Again I have written mysql_connect()—this is mainly used to open a connection to MySQL server. Again we have used mysql_select_db()—this is used to select the database created in localhost/phpmyadmin.
Now let us create a database in MySQL. The PHPMyAdmin window will look like the following screenshot:
Figure: phpmyadmin
Here you can create your own database and as many tables inside that.
Suppose here I have created a database named ‘test’, inside that I have created a table named ‘registration’. In this table, we will create fields that are used in our registration form such as fname, mname, lname, pwd, cnf, mail, number, sex, address, code, city, country, skills, attach_file.
Note: Here we can write any name for the concerned fields, just keep in mind the names you have given for the relative fields.
You can create a table manually or by writing queries. Here, I have created it manually.
Figure: Insert fields
Here write data type (most of the time we use varchar), length in numbers. After filling the fields name click Go to continue.
After inserting you can view the inserted fields where the data will be fetched from the form.
The structure is as in the following screenshot:
Figure: Structure
Now create another php page and name it modified.php.
On this page, we will write code to see how we can fetch data from the fields.
For this, we will make use of form methods through which we will retrieve the data entered into the fields and store it into our MySQL database.
The method attribute specifies how to send form-data (the form-data is sent to the page specified in the action attribute). The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
Basically we use any of the following two methods to fetch data from the fields.
- GET Method: The GET method produces a long string that appears in the browser's location. It has a restriction of sending up to 1024 characters only. We should never use the GET method if we have a password or other sensitive information to be sent to the server. The PHP provides $_GET associative array to access all the information sent using the GET method.
- POST Method: In this method, parameters are not saved in browser history. Data is not shown in the browser's URL. POST is safer than GET. The PHP provides $_POST associative array to access all the information sent using the POST method.
Here I have included listing.php file because in this PHP file I have written the code for listing all the inserted data.
<?php
include "connection.php";
if(isset($_GET['id'])){
$sql = "delete from registration where id = '".$_GET['id']."'";
$result = mysql_query($sql);
}
$sql = "select * from registration";
$result = mysql_query($sql);
?>
<html>
<body>
<table width = "100%" border = "1" cellspacing = "1" cellpadding = "1">
<tr>
<td>Id</td>
<td>First Name</td>
<td>Middle Name</td>
<td>Last Name</td>
<td>Password</td>
<td>Confirm Password</td>
<td>Email</td>
<td>Contact No.</td>
<td>Gender</td>
<td>Address</td>
<td>Pincode</td>
<td>City</td>
<td>Country</td>
<td>Skills</td>
<td>Files</td>
<td colspan = "2">Action</td>
</tr>
</table>
</body>
</html>
Now write a php code in this page only.
Note: We have to include connection.php file in all the pages because the connection code has been written in connection.php file only. Until and unless the connection is established, the data can’t be sent to the database. Here I have written an IF-ELSE condition to check whether any id is coming or not.
The isset () function is used to check whether a variable is set or not.
Then I have written a query for delete and saved in a local variable named $sql.
After that mysql_query() is used to execute the query written above. Again we have written a query to select all the elements of the table created.
<?php
while($row = mysql_fetch_object($result)){
?>
<tr>
<td>
<?php echo $row->id;?>
</td>
<td>
<?php echo $row->fname;?>
</td>
<td>
<?php echo $row->mname;?>
</td>
<td>
<?php echo $row->lname;?>
</td>
<td>
<?php echo $row->pwd;?>
</td>
<td>
<?php echo $row->cnf;?>
</td>
<td>
<?php echo $row->mail;?>
</td>
<td>
<?php echo $row->number;?>
</td>
<td>G
<?php echo $row->sex;?>
</td>
<td>
<?php echo $row->address;?>
</td>
<td>
<?php echo $row->code;?>
</td>
<td>
<?php echo $row->city;?>
</td>
<td>
<?php echo $row->country;?>
</td>
<td>
<?php echo $row->skills;?>
</td>
<td>
<?php echo $row->attach_file;?>
</td>
<td> <a href="listing.php?id =
<?php echo $row->id;?>" onclick="return confirm('Are You Sure')">Delete
</a> | <a href="index.php?id =
<?php echo $row->id;?>" onclick="return confirm('Are You Sure')">Edit
</a> </td>
<tr>
<? php } ?>
On the same page that is modified.php, now we will write another group of code for displaying the data into the table created.
For that, we will write a while condition where we will fetch the data from the database until and unless the data is coming.
Here I have saved the query mysql_fetch_object() into a local variable ‘$row’.
Then I have echoed the relative fields data into the corresponding table entry.
Now this tutorial of insertion of data into the database and showing it in the form of lists has been successfully completed.
Have a look at the final result.
Figure: Final View
Haig HamamgianPosted Aug 31, 2021, 3:48 PM
What version of PHP are you using in the codes above. I see you are using "mysql" instead of "mysqli" and that creates a problem executing the above code.
ben vidPosted Apr 8, 2021, 10:49 AM
Dear all, Since I am a complete begginer, and I need to create a quick form to fill in some dataI. have dificulty comprehend where exactly the modified.php is placed. Where do we create this page. Is it possible to specify a bit more into detail. Otherwise, it is a great tutorial. many thanks
Jelili RindePosted Mar 15, 2021, 4:28 PM
To Kantesh, your tutorial above is a nice one, a good job. But they way you label your form, the HTML forms, and the php files will make it difficult to comprehend by the beginners. Which one is index.php, connection.php, modified.php and listing.php? If all this files are well labelled, it will make a conprehension of this tutorial a 5*-worthy.
Teng Wen HuiPosted Feb 23, 2021, 5:57 AM
Hi,do you have the full code?
Michel PetersonPosted Sep 28, 2020, 5:01 PM
Where is code from modifier.php ?
Thirupathi EluvakaPosted Sep 13, 2020, 10:01 AM
Hello in the output picture there are many fields but in the HTML file you have included only names and password. Can you send me the whole link for the file? I hope you will help me.my email is [email protected] send the whole code
Thirupathi EluvakaPosted Sep 13, 2020, 9:32 AM
Hello in the output picture there are many fields but in the HTML file you have included only names and password. Can you send me the whole link for the file? I hope you will help me.
Araz NabiyevPosted Aug 5, 2020, 1:51 AM
My e-mail is [email protected]
Araz NabiyevPosted Aug 5, 2020, 1:50 AM
Hi dear friend.Can you send me download link of this?
Neelesh ChinnuPosted Aug 21, 2019, 6:35 AM
Hello i started to work on php could any one of u please help me out in this how to learn from were should i start
Sarthak ArriaraPosted Jun 20, 2019, 1:32 PM
Hey I am getting error ---- Fatal error: Uncaught Error: Call to undefined function mysql_fetch_object() in E:\XAMPP\htdocs\test\modified.php:3 Stack trace: #0 {main} thrown in E:\XAMPP\htdocs\test\modified.php on line 3 ---- and the line 3 is ----while($row=mysql_fetch_object($result)){ ----- . what do i do?
Omid HalimiPosted Dec 28, 2017, 9:28 AM
Hi, i get an error while calling modified.php Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\mysite-registering\modified.php on line 59
Ahmed SaeedPosted Nov 20, 2017, 12:32 PM
How do i use this database as a contact search database for both purpose
hacker techPosted Nov 19, 2017, 3:53 AM
Will give the download link of entire code..
muhammad zakariPosted Oct 25, 2017, 6:20 AM
Yes is not complete we need it tnx alot
sk TuranPosted Aug 1, 2017, 1:52 AM
Sir, your index.php file in not complete. please help as soon as possible. check that loin form. The source code is not completed yet. i need it, plz help me sir
Goms venkatPosted Jun 27, 2017, 1:24 AM
Very useful one. Thank you.
Sandilyan MuniswamyPosted Oct 17, 2016, 7:22 AM
This is simple menthod to store and email the form information using php and mysql . Check the below link : Http://www.sanwebcorner.com/2016/10/how-to-store-datas-to-database-and-send.html
Kamlesh BhorPosted Dec 30, 2015, 2:00 PM
nice...
Deepak PatelPosted Dec 22, 2015, 7:40 AM
Good!! Much technical info..
Santhakumar MunuswamyPosted Nov 20, 2015, 9:30 AM
Good One
Kantesh SinhaPosted Nov 19, 2015, 4:27 AM
Thank you everyone for reading my article...there are some more in pipeline...i will soon be posting those...
Mukesh KumarPosted Nov 19, 2015, 1:18 AM
Good One
Humayun Kabir MamunPosted Nov 19, 2015, 1:11 AM
Nice...
Raja TPosted Nov 19, 2015, 12:41 AM
Nice, Thanks for sharing..
Harshad PansuriyaPosted Nov 18, 2015, 11:12 PM
Nice one