As a web developer, one of the fundamental tasks is to connect a login page to a database. This allows users to securely authenticate themselves and access the desired content or functionality. In this article, I’ll guide you through the process of connecting a login page to a database using HTML and W3Schools. I’ll also provide personal insights and commentary along the way.
Step 1: Creating the Database
Before we can connect the login page to a database, we need to have a database in place to store the user information. There are several popular database management systems like MySQL, PostgreSQL, and SQLite. For simplicity, let’s use MySQL.
First, make sure you have MySQL installed on your local development environment. Once that’s done, open your preferred MySQL client and create a new database by running the following command:
CREATE DATABASE login_db;
Now, let’s create a table to store the user information. Run the following command:
USE login_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL,
password VARCHAR(255) NOT NULL
);
This will create a table called “users” with three columns: “id” (auto-incremented), “username” (to store the username), and “password” (to store the password). Feel free to add any additional columns that may be required for your specific use case.
Step 2: Creating the Login Page
Now that we have the database ready, let’s create the login page using HTML. Start by opening your favorite code editor and create a new HTML file, for example, “login.html”.
Inside the HTML file, we’ll need an HTML form where users can enter their credentials. Let’s add the following code:
<form action="login.php" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Login">
</form>
In the above code, we have a form with two input fields: “username” and “password”. The form’s action is set to “login.php”, which is the file we’ll create next for handling the form submission.
Step 3: Handling the Form Submission
Now, let’s create the “login.php” file to handle the form submission and connect it to the database. Create a new PHP file called “login.php” and add the following code:
<?php
// Retrieve the form data
$username = $_POST['username'];
$password = $_POST['password'];
// Connect to the database
$conn = mysqli_connect('localhost', 'root', '', 'login_db');
// Check if the connection was successful
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Query the database for the user credentials
$query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = mysqli_query($conn, $query);
// Check if the query returned any results
if (mysqli_num_rows($result) > 0) {
echo "Login successful!";
} else {
echo "Invalid username or password.";
}
// Close the database connection
mysqli_close($conn);
?>
In the above code, we start by retrieving the form data using the $_POST superglobal. Then, we establish a connection to the MySQL database using the mysqli_connect() function, providing the necessary credentials.
We then construct a SQL query to fetch the user’s credentials from the database. If the query returns any results (i.e., the username and password match), we display a success message. Otherwise, we display an error message.
Conclusion
Connecting a login page to a database is an essential skill for any web developer. By following the steps outlined in this article, you should now have a solid understanding of how to connect a login page to a MySQL database using HTML and W3Schools. Remember to always prioritize security when handling user credentials.
For more information and examples, be sure to check out the W3Schools website, where you can find extensive documentation and live examples.