I'm tiring to Pass a success message after pup checks the database and confirms the data how do I display a message in case of a wrong password entry ,I tried many solutions with no success ,I tried using ajax solutions and JavaScript with no success as I don't know the basics on ajax and my background in JavaScript is basic Here's my code
LoginTest.html
<html>
<link rel="stylesheet" href="LoginStyle.css">
<head>
<title>Login</title>
</head>
<body>
<div >
<h2>Login</h2>
<form action="http://localhost/Test2/dbloginTest.php" method="post" name="loginform" >
<div >
<input type="number" name="civilid" required="">
<label>Civil ID</label>
</div>
<div >
<input type="password" name="password" required="">
<label>Password</label>
</div>
<input type="submit" name="submit" Value="Login">
</form>
<a href="Registration.html">
<input type="submit" name="register" Value="Register">
</a>
</div>
</body>
</html>
dbloginTest.php
<?php
require 'C:\Windows\System32\vendor\autoload.php';
if (isset( $_POST['submit'] ) && isset( $_POST['civilid'] ) && isset( $_POST['password'] ) ) {
$civilid = ( $_POST['civilid'] );
$password = ( $_POST['password'] );
$hashpass = "";
$return = array();
//echo extension_loaded( "mongodb" ) ? "loaded\n" : "not loaded\n";
$con = new MongoDB\Client( 'mongodb srv://Admin:[email protected]/?retryWrites=true&w=majority' );
// Select Database
if ( $con ) {
$db = $con->VoterDatabase;
// Select Collection
$collection = $db->Voters;
$cursor = $collection->find( array( 'civilid' => $civilid ) );
foreach ( $cursor as $row ) {
ob_start();
echo $row->password;
$hashpass = ob_get_clean();
}
if ( password_verify($password,$hashpass) ) {
echo "You Have Successully Logged In";
header( 'Location:Voters.html' );
exit;
} else {
echo "Your Civil ID or Password is Incorrect";
header( 'Location:LoginTest.html' );
exit;
}
} else {
die( "Mongo DB not connected" );
}
}
?>
CodePudding user response：
Multiple things here :
1- FIRST : DO NOT USE HTML FILES WHEN YOU USE PHP.
it is more practical and less annoying to go all php even if your code is html only. so I'd create another file loginTest.php and transfer all loginTest.html contents into it **
2- SECOND : the alert of success
I recommend that you use jQuery along with jQuery UI. after adding the script links and the UI stylesheet :
- add a div after your form (with the content of your popup) give it an id
<div id="divID" title="Confirmed addition to the cart">
<p role="alert">
<strong>✅ You Have Successully Logged In</strong>
</p>
<button name="continue" id="continue-buying" type="button">
Great !
</button>
</div>- in your ajax (you will need to learn it, you can find a tutorial here), write the following
.done((message)=>{
$('#divId').dialog();
});<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>this shall give you a pop of confirmation. more here : https://jqueryui.com/dialog/
full ajax would look like this :
let form = document.getElementById('form');
form.addEventListener('submit', (event) => {
$.ajax({
url: url,
method: "POST",
type: "POST",
cache: false,
data: {
'YOUR DATA'
},
dataType: 'json',
headers: {
'YOUR HEADERS'
},
success: function (data) {
console.log(data);
}
}).done((message) => {
$('#divID').dialog();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>3- THIRD : for the failure messages :
when you create a php file for your html page, you'd be able to easily manipulate the code to show or not some html parts as the following :
<?php if (condition goes here) : ?>
<!--HTML code that appears only if condition is true goes here-->
<?php endif; ?>
The ending result of your html page in a php file would look like this :
<html>
<link rel="stylesheet" href="LoginStyle.css">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Login</title>
</head>
<body>
<div >
<h2>Login</h2>
<form method="post" name="loginform" id="form">
<div >
<input type="number" name="civilid" required="">
<label>Civil ID</label>
<?php if($civilIdCondition == false): ?>
<p role="alert">
<strong>Check CivilId again</strong>
</p>
<?php endif; ?>
</div>
<div >
<input type="password" name="password" required="">
<label>Password</label>
<?php if($passwordVerificationCondition == false): ?>
<p role="alert">
<strong>Check password again</strong>
</p>
<?php endif; ?>
</div>
<input type="submit" name="submit" Value="Login">
</form>
<a href="Registration.html">
<input type="submit" name="register" Value="Register">
</a>
</div>
<div id="modal" title="Confirmed addition to the cart">
<p role="alert">
<strong>✅ You Have Successully Logged In</strong>
</p>
<button name="continue" id="continue-buying" type="button">
Great !
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" type="application/javascript"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
</script>
</body>
</html>CodePudding user response：
You can simply save all your error and success messages inside a session like so ...
$_SESSION['messages'][] = "password is incorrect";
header('location: login.php');
exit;
And then display the error message if it has been set like so ...
if(isset($_SESSION['messages'])){
echo implode('. ', $_SESSION['messages'])
}