How to connect html to database with mysql without php

How to connect html to database with mysql without php
Imama Zahoor

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:

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

How to connect html to database with mysql without php

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:

How to connect html to database with mysql without php

This is a screenshot to show how to create a table

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

How to connect html to database with mysql without php

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:

How to connect html to database with mysql without php

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 EorLocal 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

How to connect html to database with mysql without php

The htdocs folder should contain another folder with HTML and PHP files

The following code snippet contains the HTML code for the 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.

CONTRIBUTOR

How to connect html to database with mysql without php
Imama Zahoor

Copyright ©2022 Educative, Inc. All rights reserved

Can we connect HTML with 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.

How connect MySQL to HTML?

For this you need to follow the following steps:.
Step 1: Filter your HTML form requirements for your contact us web page. ... .
Step 2: Create a database and a table in MySQL. ... .
Step 3: Create HTML form for connecting to database. ... .
Step 4: Create a PHP page to save data from HTML form to your MySQL database. ... .
Step 5: All done!.

Can you use MySQL without PHP?

No you can't interact with MySQL through JavaScript or JQuery. You could use JavaScript and JQuery through your PHP pages if that would be a functionality you'd be interested in. You could also use another language compatible with MySQL. Otherwise interacting with MySQL straight through JavaScript/JQuery won't work.

How do I connect HTML form to MySQL database using xampp?

XAMPP Server (Web Server) HTML. PHP. MySQL..
Start XAMPP Server..
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..
Verify the results..