An application that we use often interacts with user through user interface and collects and stores data in the organized table called database table. So, while developing an application developer should know how thing works in an application. Here we will take a simple example of user registration form in web to illustrate how you can connect and send data from your front end i.e. HTML form to back end i.e. MY SQL.

First to run a database we need to make our computer a local host which means our computer will acts as server as well as client. During development phase every applications are hosted in a local server generally called local host.

How to create a local host.

Step 1: Download XAMPP from official site 

Step 2: Install and run the download file

Step 3: After running, XAMPP control panel will open

Step 4: In Control panel you will start Apache and MY SQL and will leave Filezilla, Tomcat, Mercury as it is.

Step 5: Wait until Apache and MY SQL turns into green.

Step 6: If it turns green, you local server is running.

To check whether its working or not

Step 7: Open web browser and type localhost

This will open a welcome page of XAMPP, Now you have successfully created a local host.

After localhost is running we can find the htdocs folder inside xampp folder in C:/

Every project we build will be created inside this folder, your file directory must be as

xampp/htdocs/your_folder

Now, to build a working HTML form that connects with MY SQL database using PHP we will create a folder insider htdocs with any name you want then, we will create a HTML and PHP document inside same folder.

How to create user registration form.

We can use any text editor such as Notepad++, Sublime text etc to write a HTML document. Simply you can use following procedure

Step 1: Open any text editor.

Step 2: Create a HTML form use following code

This will create a simple HTML form.

Step 3: Save the document inside the folder that we created inside htdocs using any name with .html extension

Now, to check the above build HTML form.

Go to web browser and type localhost/your_folder/any_name.html

Above HTML page will look like this.

After creating HTML form we need to create a another file in PHP which will connect out HTML form (Front end) with MY SQL database (Back end).

How to connect HTML form with MY SQL data base

In order to connect HTML form with MY SQL database we can use any back end language like PHP, Python. Here we will use PHP to connect and store data from HTML form to MY SQL database.

Step 1: Open any text editor

Step 2: Create a PHP document use following code

Step 3: Save the document with name “connect.php” in same folder with HTML form.

[Note: You can change the name of the PHP file but it should match with the name inside tag in HTML document.]

How to create database table in MY SQL

Since we have installed XAMPP as a local server we can directly access MY SQL database through phpmyadmin. You can follow following step to create database.

Step 1: Open web browser and type localhost/phpmyadmin

Step 2: Click new and given your database a name. Since we have used “register” as database name in “connect.php” use register as database name. You can choose utf8_general_ci in type.

Step 3: Now you have to give table name to create. Since we have used “signup” as table name in “connect.php” use signup as table name. Choose 3 in number of columns and press go.

Step 4: Table is created with 3 columns give name to you field.  Since we have used “fname” , ”Email” and “password” as field name in “connect.php” Use “fname” , ”Email” and “password” names. Choose VARCHAR in type and give length/values be 50.

Step 5: Press Save.

This will create a table name “signup” with 3 fields “fname” , ”Email” and “password” inside database name “register”.

Now, we are done with all three HTML form, PHP document and MY SQL database.

To run your build

Step 1: Open browser and type localhost/your_folder/any_name.html

This will let you enter data from your browser and at back end our “connect.php” will establish connection with our database name “register” and stores above enter data in table name “signup” with 3 fields “fname” , ”Email” and “password”.