I’m pretty new to PHP programming and this should be a simple solve. I have a main page that has a “Log In” link. When the link is clicked a new browser tab is created that allows for a user to login to the app. Once they successfully login, I want to pass back the user’s ID/handle to the main page. I have code in place that will do this but I have to manually refresh the page in order to see the user’s ID/handle. Any ideas?
Thanks!
The login code should store the user’s ID/handle in a session variable to ‘remember’ who the logged in user is. The code on any page should test if that session variable is set and use conditional logic on the page to determine what the current user can do and see on the page. If your code is doing this, but it isn’t working or requires the page to be refreshed, you would need to post the relevant code, since there are a half-dozen common things that could cause this symptom, but your code could be suffering from a 7th, 8th, … less common problem.
Short-answer: cannot help you with what is wrong with your code without seeing all the relevant code. Except for very overt errors/symptoms, there are just too many possible causes for any symptom.
Here is the code that I have from two different web pages.
Index.php
<?php
session_start();
include "dbconnection_pdo.php";
$username = "";
if (isset($_SESSION['handle'])) {
$username = "Welcome " . $_SESSION['handle'];
}
$ID = 0;
$sql = "";
$results = [];
$recipe_name = "";
if (isset($_GET['id'])) {
$ID = (int) $_GET['id'];
}
$sql = "SELECT recipe_name, id FROM food.recipes WHERE category_ID = :id ORDER BY recipe_name";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':id', $ID);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<title>The Cookery</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="./js/bootstrap.js"></script>
<script src="./js/index.js"></script>
<style>
* {
/* border: 1px solid red; */
}
.greeting {
top: 0;
width: auto;
margin-top: -15px;
position: relative;
color: #fff;
font-size: 12px;
}
.centered-div {
top: 2%;
left: 12.5%;
height: 600px;
padding: 15px 15px;
margin-top: 280px;
position: fixed;
overflow-y: auto;
transform: translate(-5%, -12.5%);
}
</style>
</head>
<body>
<div class="col-12" style="top: 0; position: fixed; z-index: 1;">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a href="index.php" id="recipe_header" class="col-4">
<h1 class="h1-width mt-4 align-items-center">The Cookery</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="row collapse navbar-collapse fs-5 ms-3 mt-2">
<ul class="navbar-nav ps-3">
<li class="nav-item">
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?id=2" class="menu-item-color pill">Seafood</a>
</li>
<li class="nav-item">
<a href="?id=3" class="menu-item-color pill">Beef</a>
</li>
<li class="nav-item">
<a href="?id=4" class="menu-item-color pill">Chicken</a>
</li>
<li class="nav-item">
<a href="?id=5" class="menu-item-color pill">Lamb</a>
</li>
<li class="nav-item">
<a href="?id=6" class="menu-item-color pill">Salads</a>
</li>
<li class="nav-item">
<a href="?id=6" class="menu-item-color pill">Other</a>
</li>
<li class="nav-item">
<a class="menu-item-color px-3 pill add-recipe" href="add_recipe_form.html"
target="_blank">Add Recipe</a>
</li>
<li class="nav-item">
<a class="menu-item-color px-3 pill add-recipe" href="login-form.php" target="_blank">Log
In</a>
</li>
<li class="nav-item">
<a class="menu-item-color px-3 pill add-recipe" href="register-form.php"
target="_blank">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="d-flex" style="margin-left: 150px">
<h2 class="mt-4 text-4xl col-2 add-shadow" style="margin-left: 40px">Recipes at your fingertips!</h2>
<span id="welcome" class="fs-4 mt-4" style="float: right; width: 30%; color: #fff">
<?php echo $username; ?></span>
</div>
</div>
<div class="col-10 centered-div align-items-center justify-content-center">
<div class="row justify-content-center">
<?php foreach ($result as $row): ?>
<div id="recipes1"
class="col-2 divs border-1 rounded lh-sm py-3 px-3 fs-5 mx-2 mt-2 mb-3 bg-warning text-center align-content-center">
<a href="edit_recipe.php?id=<?= $row['id']; ?>&recipe_name=<?= $row['recipe_name'] ?>" class="rLinks"
target="_blank"><?= $row['recipe_name'] ?></a>
<span><?php $row['id']; ?></span>
</div>
<?php endforeach; ?>
</div>
</div>
</body>
</html>
login-form.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/login.css" rel="stylesheet">
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<title>The Cookery - Login</title>
</head>
<body class="bg-gray-100">
<div class="container col-6" style="margin-top: 200px">
<form id="login-form" method="POST" class="form mx-auto rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="white" class="bi bi-door-open svg"
viewBox="0 0 16 16">
<path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1" />
<path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1
.43-.495l7-1a.5.5 0 0 1 .398.117M11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5M4 1.934V15h6V1.077z" />
</svg>
<h3 class="rounded mx-auto my-4 fs-3">User Login</h3>
<div class="mx-auto">
<label for="username" class="mx-4">User Name</label>
<input type="text" name="username" id="username" class="form-control mx-3" placeholder="User Name"
required><br>
<label for="password" class="mx-4">Password</label>
<input type="password" name="password" id="password" class="form-control mx-3" placeholder="Password"
required><br>
</div>
<input type="submit" style="border: 0px solid transparent"
class="form-control rounded bg-primary mx-3 login-button hover:bg-primary-600" />
<p id="msg" class="rounded my-3 mx-3">Invalid Login Credentials...try again!</p>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="./js/index.js"></script>
<style>
#msg {
color: #fff;
font-size: 20px;
font-weight: 700;
text-align: center;
}
</style>
</body>
</html>
<?php
session_start();
require "dbconnection_pdo.php";
session_unset();
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = trim($_POST['username'] ?? '');
$password = trim($_POST['password'] ?? '');
// Query to find the user
$sql = "SELECT password, handle FROM food.users WHERE username = :username";
$stmt = $pdo->prepare($sql);
$stmt->execute(['username' => $username]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);
if (!$user) {
echo "User not found";
exit();
}
$hashedpassword = trim($user['password']) ?? null;
if ($hashedpassword && password_verify($password, $hashedpassword)) {
$_SESSION['handle'] = $user['handle'];
echo "<script>window.close();</script>";
exit;
} else {
echo '<script>document.getElementById("msg").style.display = "block";</script>';
}
}
?>
The simplest solution would be to integrate the login form processing and form on any page that needs it. For the current code, closing the login page doesn’t have any relationship to or communication with the main page. You would need to provide a navigation link on the login page to go back to whatever page requested the login page.
The code for any dynamically produced page should be laid out in this general order -
Thank you. I’m going to stick a link on the login-form page to go back to the main page.
Hi;
You could use a modal box as login on the main page. Then an $.ajax function to check the validity of the given entries. If credential is ok your $.ajax function will open the same page but fully functional and you pass the values you want in a $_Session or as parameter in the url.
For example an index.php page with limited access just for show calling an index_login.php if successfull login.