How to connect HTML to database with MySQL using PHP? An example

Are you a php web developer and searching code or example to connect HTML to database with MySQL using PHP? In this article we are helping to answer this query. If you have any more query than you can comment on this post. We will reply for your query.

First of all you must be install any XAMPP or WAMP or MAMP kind of software in your laptop or computer. By these software you will be get local web server Apache, PHP language and MySQL database. After installation of any of these laptop or desktop software you need to check your localhost is working or not. Open your browser and check this URL http://127.0.0.1 or http://localhost/ . If this is working it means you have the local web server activated with PHP/MySQL.

Also GUI PHPmyAdmin coming for handling database operation insert, update, delete, and select records from database. This is very helpful and easy to use for creating and managing database and table.

If you have the above installation you can go ahead to start your coding.
Suppose you have a web page to insert contact form field data in your database. For this you need to follow following steps:

Step 1: Filter your HTML form requirements for your contact us web page

Suppose you selected the field Name, Email, Phone and message.

Step 2: Create a database and a table in MySQL

Open web browser and type this http://localhost/phpmyadmin/ or http://127.0.0.1/phpmyadmin/ for open GUI for managing database on your computer. See the xampp screen below how it is coming.

Click on database link and create your database by name “db_contact”. See the image below:

 

 

After creating database you need to create table by any name i choose “tbl_contact” with number of filed 5. We choose 4 field on top Name, Email, Phone and Message. The first column we will keep for maintaining serial number and in technical term primary key. See the image below

 

 

When you will be click on go button you will be get this screen. Now we need to feed the field information.

 

 

See the below image in which i added field information. So for field Name used field Name – fldName, Email – fldEmail, Phone – fldPhone, Message – fldMessage.

 

 

Now click on save button that is on bottom right of your screen. After save your table also created in database.

 

Step 3: Create HTML form

Now you have to create a HTML form. For this you need to create a working folder first and then create a web page with name of “contact.html”. If you install xampp your working folder is in folder this “E:\xampp\htdocs” . You can create a new folder “contact” on your localhost working folder. Create a “contact.html” file and paste the following code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Form - PHP/MySQL Demo Code</title>
</head>

<body>
<fieldset>
<legend>Contact Form</legend>
<form name="frmContact" method="post" action="contact.php">
<p>
<label for="Name">Name </label>
<input type="text" name="txtName" id="txtName">
</p>
<p>
<label for="email">Email</label>
<input type="text" name="txtEmail" id="txtEmail">
</p>
<p>
<label for="phone">Phone</label>
<input type="text" name="txtPhone" id="txtPhone">
</p>
<p>
<label for="message">Message</label>
<textarea name="txtMessage" id="txtMessage"></textarea>
</p>
<p>&nbsp;</p>
<p>
<input type="submit" name="Submit" id="Submit" value="Submit">
</p>
</form>
</fieldset>
</body>
</html>

 

Now your form is ready. You may test it in your localhost link http://localhost/contact/contact.html
On the next step i will be go with create PHP / MySQL code.

Step 4: Create PHP page to Insert contact us HTML form data in MySQL database

The contact HTML form action is on “contact.php” page. On this page we will write code for inserting record in database.

For storing data in MySQL database as records, you have to first connect with database. For connect database the code is very simple.

$con = mysqli_connect("localhost","your_localhost_database_user","your_localhost_database_password","your_localhost_database_db");

You need to place value for your localhost username and password. Normally localhost mysql database username is root and password blank or root. For xampp the code is as below

$con = mysqli_connect('localhost', 'root', '',’db_connect’);
The “db_connect” is our database name that we created before.
After connection database you need to take post variable from the form. See the below code
$txtName = $_POST['txtName'];
$txtEmail = $_POST['txtEmail'];
$txtPhone = $_POST['txtPhone'];
$txtMessage = $_POST['txtMessage'];

 

When you will get post variable then you need to write the following SQL command.

$sql = "INSERT INTO `tbl_contact` (`Id`, `fldName`, `fldEmail`, `fldPhone`, `fldMessage`) VALUES ('0', '$txtName', '$txtEmail', '$txtPhone', '$txtMessage');"

For fire query over database you need to write following line

$rs = mysqli_query($con, $sql);

Here is PHP programming complete code that help to developer

<?php
// database connection code
// $con = mysqli_connect('localhost', 'database_user', 'database_password','database');

$con = mysqli_connect('localhost', 'root', '','db_connect');

// get the post records
$txtName = $_POST['txtName'];
$txtEmail = $_POST['txtEmail'];
$txtPhone = $_POST['txtPhone'];
$txtMessage = $_POST['txtMessage'];

// database insert SQL code
$sql = "INSERT INTO `tbl_contact` (`Id`, `fldName`, `fldEmail`, `fldPhone`, `fldMessage`) VALUES ('0', '$txtName', '$txtEmail', '$txtPhone', '$txtMessage')";

// insert in database 
$rs = mysqli_query($con, $sql);

if($rs)
{
	echo "Contact Records Inserted";
}

?>

 

Step 5:  All done!

Now the coding part is done.  Download code from github

If you would like to check then you can fill the form http://localhost/contact/contact.html and see the result in database. You may check via phpmyadmin your inserted record.

 

raghwendra

Me a freelance web developer from new delhi india. visit me

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.