Can html connect to database?

This tutorial will require a mysql database set up with a database user and password and a web development environment using mysql or mariadb, apache and php and a simple text editor.

Table of Contents Show

First Up – Connecting to a MySQL database
Performing a database query
Adding the table and rows to the Database
Put the data on the page
Closing off the connection
Can we connect database with HTML?
How does HTML connect to database data?
Can HTML connect to database without PHP?
Does HTML work with SQL?

The tutorial takes you through establishing a mysql connection using php on a web page, connecting to a mysql table and retrieving the results and displaying them back on the web page.

This tutorial uses the PHP MySQL commands:

mysqli_connect
mysqli_query
mysqli_fetch_array
mysqli_close

The Plan

make the connection and select the database
perform the query on the table
print out the data
close the connection

First Up – Connecting to a MySQL database

You need your MySQL server address (if the database is on the same server as the web server it will most likely be localhost or 127.0.0.1), username, password and database name. Create a filenamehere.php file and open and close the php code with tags before the html, you can put regular html after it. Open the file in a browser and you should see nothing apart from the title tag, if you see the error ‘Error connecting to MySQL server.’, then the username/password or database name may be wrong.

PHP will require that mysqli is enabled (it is on most PHP set ups).

<?php
//Step1
 $db = mysqli_connect('localhost','username','password','database_name')
 or die('Error connecting to MySQL server.');
?>

<html>
 <head>
 </head>
 <body>
 <h2>PHP connect to MySQL</h2>
</body>
</html>

The variable $db is created at the start of the file and assigned as the connection string, it will be used in future steps. If there is a failure then an error message will be displayed on the page. If it is successful you will see PHP connect to MySQL.

Performing a database query

The mysql query is actually performed in the body of the html page, so additional php opening and closing tags will be required. For the query we are going to specify a read of all fields from a given table. The $query variable selects all rows in the table. You just need to use your table name.

<?php
//Step1
 $db = mysqli_connect('localhost','root','root','database_name')
 or die('Error connecting to MySQL server.');
?>

<html>
 <head>
 </head>
 <body>
 <h2>PHP connect to MySQL</h2>
 
<?php
//Step2

$query = "SELECT * FROM table_name";
mysqli_query($db, $query) or die('Error querying database.');
?>

</body>
</html>

Again the returned page in the browser should be blank and error free, if you do receive the error – ‘Error querying database..’ check the table name is correct.

Adding the table and rows to the Database

If you want to use this guides example data have your database, database user and password configured, log into your mysql service, here I have logged in via command line – choose the database and then: create the table:

CREATE TABLE table_name (
    PersonID int,
    FirstName varchar(255),
    LastName varchar(255),
    Email varchar(255),
    City varchar(255)
);

Then populate it with rows of data:

INSERT INTO table_name (PersonID, FirstName, LastName, Email, City)
VALUES ('1', 'Adam', 'Best', '[email protected]', 'Brisbane');
INSERT INTO table_name (PersonID, FirstName, LastName, Email, City)
VALUES ('2', 'Simon', 'Says', '[email protected]', 'Brisbane');
INSERT INTO table_name (PersonID, FirstName, LastName, Email, City)
VALUES ('3', 'Paul', 'Dore', '[email protected]', 'Brisbane');
INSERT INTO table_name (PersonID, FirstName, LastName, Email, City)
VALUES ('4', 'Arthur', 'Knight', '[email protected]', 'Perth');
INSERT INTO table_name (PersonID, FirstName, LastName, Email, City)
VALUES ('5', 'Jo', 'Ninety', '[email protected]', 'Darwin');

Put the data on the page

Here we are taking the making a $result variable which combines the initial $db variable and the $query variable we just made above, now we just need to go through all the rows of that query which we need a mysqli_fetch_array command, which stores the rows in an array, so now we are outputting that array in a while loop for each row.

The $row now can be output in a while loop, here the rows of data will be echoed and displayed on the page until there is no longer any rows of data left, my example uses 4 fields in the table first_name, last_name, email and city.

<?php
//Step1
 $db = mysqli_connect('localhost','root','root','database_name')
 or die('Error connecting to MySQL server.');
?>

<html>
 <head>
 </head>
 <body>
 <h2>PHP connect to MySQL</h2>

<?php
//Step2
$query = "SELECT * FROM table_name";
mysqli_query($db, $query) or die('Error querying database.');
//Step3
$result = mysqli_query($db, $query);
$row = mysqli_fetch_array($result);

while ($row = mysqli_fetch_array($result)) {
 echo $row['FirstName'] . ' ' . $row['LastName'] . ': ' . $row['Email'] . ' ' . $row['City'] .'<br />';
}
?>

</body>
</html>

Here you should see the all data as output from your table.

Closing off the connection

Closing the connection will require another set off opening and closing php tags after the closing html tag. It is good practice to close the database connection when the querying is done.

<?php
//Step1
 $db = mysqli_connect('localhost','root','root','database_name')
 or die('Error connecting to MySQL server.');
?>

<html>
 <head>
 </head>
 <body>
 <h2>PHP connect to MySQL</h2>

<?php
//Step2
$query = "SELECT * FROM table_name";
mysqli_query($db, $query) or die('Error querying database.');

//Step3
$result = mysqli_query($db, $query);

while ($row = mysqli_fetch_array($result)) {
 echo $row['FirstName'] . ' ' . $row['LastName'] . ': ' . $row['Email'] . ' ' . $row['City'] .'<br />';
}
//Step 4
mysqli_close($db);
?>

</body>
</html>

Database connections should always be closed off. You do not need to keep the connection variable $db after the initial connection but is considered best practice.

Final code.

Can we connect database with HTML?

Step 3: Create HTML form for connecting to database Now you have to create an HTML form. For this, you need to create a working folder first and then create a web page with the name “contact. html”. If you install xampp your working folder is in folder this “E:\xampp\htdocs”.

How does HTML connect to database data?

Open localhost/phpmyadmin in your web browser. Create database of name staff and table of name college. Write HTML and PHP code in your Notepad in a particular folder. Submit data through HTML Form.

Can HTML connect to database without PHP?

Sorry, you cannot connect to database without having a backend environment setup. XAMPP is a widely known package that gives you PHP, MySQL, and Apache Web Server to let you create web pages using a relational database. With 1 install, it gives you everything you need for a full-stack website.

Does HTML work with SQL?

You can produce HTML from SQL because SQL Server has built-in support for outputting XML, and HTML is best understood as a slightly odd dialect of XML that imparts meaning to predefined tags. There are plenty of edge cases where an HTML structure is the most obvious way of communicating tables, lists and directories.