This is the login page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Hospital Management System</title>
<link rel="stylesheet" href="loginStyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function scrollToContact() {
$('html, body').animate({
scrollTop: $("#contact-us").offset().top
}, 1000);
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://localhost/Hospital%20Management/Images/logo.png" alt="Logo" width="70" height="70">
</a>
<div class="navbar-middle-text">
<strong><centre><p style="font-size:x-large;">Hospital Management System</p></centre></strong>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="http://localhost/Hospital%20Management/HomePage/homepage.html">Home</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-link" onclick="scrollToContact()">Contact us</button>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/Hospital%20Management/LoginPage/loginPage.php">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white text-center">
<h4>Login to Hospital Management System</h4>
</div>
<div class="card-body-lg">
<form action="database.php" method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" required autofocus>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" required autofocus>
</div>
<button type="submit" name="login" class="btn btn-primary btn-block">Login</button>
<?php if (!empty($error_msg)): ?>
<div class="alert alert-danger mt-3">
<?php echo $error_msg; ?>
</div>
<?php endif; ?>
</form>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="end-section" id="contact-us">
<div class="container text-center py-5">
<h3>Contact us</h3>
<p></p>
</div>
</div>
</body>
</html>
This is the database connection code: in this code i connected to the database and started a session
<?php session_start(); ?>
<?php
$host = '127.0.0.1:3307';
$user = 'root';
$password = "";
$database = 'hospital_management';
$conn = mysqli_connect($host, $user, $password, $database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
<?php
$error_msg = ""; // Initialize an empty error message
if (isset($_POST['login']))
{
$uname = $_POST['username'];
$pass = $_POST['password'];
$query = "SELECT * FROM users WHERE username = '$uname' and passwords='$pass'";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) // Check if the username exists in the database
{
$row = mysqli_fetch_assoc($result);
$username = $row["username"];
$password = $row["passwords"];
if ($pass == $password) // Check if the password matches
{
$_SESSION['username'] = $username;
$_SESSION['password'] = $password;
header('Location: http://localhost/Hospital%20Management/Dashboard/dashboard.php');
exit(); // Make sure to exit after redirecting
} else {
// Add the following code to display an alert box with the error message
$error_msg = "Incorrect password";
echo '
<script>
alert("' . $error_msg . '");
window.location.href = "loginPage.php";
</script>
';
}
} else {
$error_msg = "Username not found";
}
}
mysqli_close($conn);
?>
I need a alert message box when i enter wrong password . then it should remain in the same login page for another try.How to get a alert message dynamically on the same page without getting blank pages as return
To display an alert message dynamically on the same login page without getting blank pages as returns, you can use AJAX (Asynchronous JavaScript and XML) to handle the form submission and show the alert message without a page refresh. Here's how you can modify the code to achieve this:
Remove the form action and method attributes from the form tag. We will handle the form submission using AJAX, so we don't need these attributes.
Add an empty
<div>where the alert message will be displayed.Modify the button type to be "button" instead of "submit" to prevent the form from being submitted traditionally.
Use JavaScript and jQuery to handle the form submission and display the alert message.
Here's the modified code for the login page:
In the database.php file, you need to modify the code to send the appropriate response back to the login page based on the login result. For example, you can send the string "success" if the login is successful, and send an error message if the login fails.
Try these updates and compare with the precious code, when you enter the wrong password, an alert message will be displayed on the same login page, allowing you to make another attempt without the page refreshing or becoming blank. If the login is successful, the page will be redirected to the dashboard.php page.