In this article, I will guide you on how to create a login page in HTML with a database. As a web developer, I’ve encountered many projects that require user authentication, and knowing how to create a login page is an essential skill. So, let’s dive deep into the details and get started!
Setting Up the HTML Structure
First, let’s set up the HTML structure for our login page. We’ll use a simple form to collect the user’s credentials. Here’s an example:
<form method="post" action="login.php">
<input type="text" name="username" placeholder="Username"><br>
<input type="password" name="password" placeholder="Password"><br>
<input type="submit" value="Login">
</form>
The form element has a few attributes we need to pay attention to. The method attribute specifies the HTTP method to be used when submitting the form. In this case, we use “post” to hide the sensitive data (password) from the URL. The action attribute specifies the URL or script to handle the form submission. In our example, we’ll use a PHP script called “login.php”.
Creating the Database
Now, let’s create a database to store the user credentials. We’ll use MySQL in this example, but you can choose any database management system that suits your needs. Here’s a SQL code snippet to create a table for our users:
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL
);
This table consists of three columns: id, username, and password. The id column is an auto-incremented integer that serves as the primary key. The username and password columns store the user’s credentials.
Handling the Form Submission
Now that we have our HTML structure and database set up, let’s handle the form submission in our PHP script, “login.php”. Here’s an example of how you can do it:
// Connect to the database
$conn = mysqli_connect("localhost", "username", "password", "database");
// Check if the form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the user's credentials
$username = $_POST["username"];
$password = $_POST["password"];
// Prepare and execute the SQL query
$query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = mysqli_query($conn, $query);
// Check if the credentials are valid
if (mysqli_num_rows($result) > 0) {
// Redirect the user to the dashboard or homepage
header("Location: dashboard.php");
exit;
} else {
echo "Invalid username or password.";
}
}
This PHP script connects to the database using the provided credentials and checks if the form is submitted. If the form is submitted, it retrieves the username and password from the form data and executes a SQL query to check if the credentials exist in the database. If the credentials are valid, it redirects the user to the dashboard or homepage; otherwise, it displays an error message.
Conclusion
Creating a login page in HTML with a database is an essential skill for web developers. By following the steps outlined in this article, you’ll be able to create a secure and functional login page for your website. Remember to always sanitize and validate user input to prevent security vulnerabilities. Good luck with your login page implementation!
