Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

mysql
php
html form
xampp

How to connect an HTML form to a MySQL database in PHP

Imama Zahoor

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

This Answer outlines how to use PHP to connect an HTML form to a MySQL database. We'll use XAMPP as the server software to create a database and run PHP.

We'll use the below steps to create a connection:

  1. Set up XAMPP and configure a PHP development environment
  2. Create an HTML form
  3. Create a MySQL database
  4. Create a PHP file
  5. Create a connection

Step 1: Set up XAMPP

The method to configure a PHP development environment with XAMPP is shown here.

Step 2: Create an HTML form

This Answer explains what an HTML form is and how to create it.

Step 3: Create a MySQL database

In this step, we'll create a simple MySQL database since our server is already running.

We'll open the browser and type http://localhost/phpmyadmin/. This redirects us to the PHP admin page, where we can create and manage databases. Click on the New option in the menu panel on the left side. The image below demonstrates this:

The PHP MyAdmin home screen

On the next page, we'll choose a name for our database and click on Create, as shown:

This is a screenshot to show how to create a database
This is a screenshot to show how to create a database

Next, we'll create a table in the database. We'll add a table name and choose the number of columns:

This is a screenshot to show how to create a table
This is a screenshot to show how to create a table

Once we click on Create, we'll be redirected to the following page:

This is a screenshot to show how to determine the structure of the table
This is a screenshot to show how to determine the structure of the table

Here, we've to give details regarding the table. The columns correspond to our fields in the HTML form. We may also assign each column a data type, characters length, or special privileges such as the primaryA unique identifier for each entry in a table. key. A sample table is as follows:

This is a sample table
This is a sample table

Once we're done, we'll click on Save. Our first table in the database is created.

Step 4: Create a PHP file

Now that we have our database and server ready, we'll create the necessary files. We'll begin by opening the folder directory containing XAMPP. We traditionally find this folder in Local Disk E or Local Disk C. For Linux users, this will be in the Computer/opt/lampp directory.

Within that folder, open another folder titled htdocs and create a folder in it. We can name it anything, but for this tutorial, we'll name it educativeform. This new folder will contain our HTML and PHP files.

htdocs/educativeform
|-> form.php
|-> index.html
The final directory structure
The htdocs folder should contain another folder with HTML and PHP files
The htdocs folder should contain another folder with HTML and PHP files

The following code snippet contains the HTML code for the form:

The code to create a form

Note: If we click on the submit button, it will given an error since we haven't yet connected it to the database.

Explanation

  • Line 6: The method POST is the connection type to send the HTML form entries. The action attribute has the value form.php. This is the name of the PHP file in the working directory, and the form entries will be sent to this file upon submission.
  • Lines 8–20: These are the form fields. The last input type is a button that submits the field values to the PHP file.

To confirm that our form is ready, we'll type localhost/educativeform in the browser. This ensures that the server, MySQL, and Apache is running. Otherwise, we might get an error.

Next, we'll create the PHP file. The sample code, along with the explanation, is given below:

<?php
if(isset($_POST['submit']))
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
}
?>
The code to get the HTML form entries

Explanation

  • Line 2: We'll use the $_POST as connection type to get HTML form entries.
  • Lines 4–6: We define the fields here. The square brackets contain the values of the name attribute in the input labels of the HTML code.

Step 5: Create a connection

Finally, we'll connect our HTML form to the database using PHP. The code below is an addition to the previous code snippet, as shown:

<?php
// getting all values from the HTML form
if(isset($_POST['submit']))
{
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
}
// database details
$host = "localhost";
$username = "root";
$password = "";
$dbname = "sampledb";
// creating a connection
$con = mysqli_connect($host, $username, $password, $dbname);
// to ensure that the connection is made
if (!$con)
{
die("Connection failed!" . mysqli_connect_error());
}
// using sql to create a data entry query
$sql = "INSERT INTO contactform_entries (id, fname, lname, email) VALUES ('0', '$fname', '$lname', '$email')";
// send query to the database to add values and confirm if successful
$rs = mysqli_query($con, $sql);
if($rs)
{
echo "Entries added!";
}
// close connection
mysqli_close($con);
?>
The PHP file code to get entries, create a connection with the database and send a MySQL query

Explanation

  • Lines 10–14: We'll specify the permissions of the database. This will allow us to add entries to the table.
  • Line 17: We use mysqli_connect to create a connection.
  • Lines 20–23: Here, we'll confirm if the connection is made. If the connection has failed, we'll get an error message.
  • Line 26: We create an SQL query for insertion. Here we add the values that we received from the HTML form.
  • Lines 29–33: We send the query to the database over the connection.
  • Line 36: This line closes the connection once the entry is inserted.

If everything is running without errors, we should be able to add our HTML form details in the MySQL database.

RELATED TAGS

mysql
php
html form
xampp

CONTRIBUTOR

Imama Zahoor
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring