In this article, I will guide you on how to create a login page in HTML that connects to a database. As a web developer, I understand the importance of having a secure login system for websites.
Setting Up the HTML Structure
First, let’s start by creating the HTML structure for our login page. We’ll need a form to collect the user’s credentials and a submit button to process the login request.
<form action="login.php" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
</form>
Here, we have created a simple form with two input fields, one for the username and another for the password. The action attribute of the form specifies the URL where the form data will be sent for processing.
Creating the Database
Next, we need to set up a database to store the user credentials. Let’s assume we are using MySQL for our database system. You can use any other database system of your choice.
CREATE DATABASE mydb;
USE mydb;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL
);
The above SQL code creates a database named “mydb” and a table named “users”. The “users” table has three columns: “id” for unique identification, “username” for storing the username, and “password” for storing the password (make sure to hash the password later!).
Processing the Login Request
Now, let’s create a PHP script called “login.php” that will handle the login request and verify the user’s credentials against the database.
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$conn = new mysqli('localhost', 'root', 'password', 'mydb');
$query = "SELECT * FROM users WHERE username='$username' AND password='$password';";
$result = $conn->query($query);
if($result->num_rows == 1) {
echo "Login successful!";
} else {
echo "Invalid username or password. Please try again.";
}
?>
In this PHP script, we retrieve the username and password from the form data sent via POST method. Then, we establish a connection to the database and run a SQL query to check if the user exists in the “users” table with the provided credentials. If the query returns a single row, it means the login was successful. Otherwise, we display an error message.
Conclusion
Creating a login page in HTML that connects to a database is an essential part of web development. By following the steps outlined in this article, you can build a secure login system for your website. Remember to always hash passwords for better security and consider implementing additional measures like password reset functionality and account lockouts to enhance the user experience.
For a more personalized login page, you can add CSS styles and design elements according to your website’s branding. Happy coding!