Click here to Skip to main content
15,902,032 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I have an admin login page that logs in to the admin dashboard and I need it to display the administrator logged in.
This is the code:
JavaScript
var adminName = '" . $username . "';";
  
      header("Location: admin.php");
      exit();
    } else {
      $error_message = "Invalid username or password";
    }
  } else {
    $error_message = "Error: " . mysqli_error($conn);
  }

  mysqli_close($conn);
}
?>

  <title>Admin Login
  
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
    }

    h2 {
      text-align: center;
      margin-top: 30px;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    label {
      display: block;
      margin-bottom: 10px;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color:  #00abf0;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: blue;
    }

    .error-message {
      color: red;
      margin-top: 10px;
      text-align: center;
    }
    .logout-button {
      background-color:  #00abf0;
      color: #ffffff;
      border: none;
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
    }

  <div class="container">
    <h2 id="admin-name">Admin Login</h2>
    <h2><a href="index.php" class="logout-button">Home</a></h2>
    
      Username:
      <br><br>
      Password:
      <br><br>
    
    <p>Don't have an account? <a href="admin_signup.php">Signup here</a></p>
    
      <p class="error-message"></p>
    
  </div>

  // Check if the adminName variable is defined
  if (typeof adminName !== 'undefined') {
    // Update the DOM with the administrator's name
    var adminNameElement = document.getElementById('admin-name');
    if (adminNameElement) {
      adminNameElement.textContent = 'Logged in as: ' + adminName;
    }
  }


What I have tried:

PHP
<?php

$hostname = "localhost";
$username = "root";
$password = "";
$database = "ddapp";

$conn = mysqli_connect($hostname, $username, $password, $database);

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $username = $_POST["username"];
  $password = $_POST["password"];

  $query = "SELECT * FROM admins WHERE username = '$username' LIMIT 1";

  $result = mysqli_query($conn, $query);

  if ($result) {

    $user = mysqli_fetch_assoc($result);

    if ($user && password_verify($password, $user['password'])) {
  
      session_start();
      $_SESSION["username"] = $username;
      $_SESSION["admin_name"] = $user['admin_name'];

      echo "<script>var adminName = '" . $username . "';</script>";
  
      header("Location: admin.php");
      exit();
    } else {
      $error_message = "Invalid username or password";
    }
  } else {
    $error_message = "Error: " . mysqli_error($conn);
  }

  mysqli_close($conn);
}
?>
<?php

?>

<!DOCTYPE html>
<html>
<head>
  <title>Admin Login</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
    }

    h2 {
      text-align: center;
      margin-top: 30px;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    label {
      display: block;
      margin-bottom: 10px;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color:  #00abf0;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: blue;
    }

    .error-message {
      color: red;
      margin-top: 10px;
      text-align: center;
    }
    .logout-button {
      background-color:  #00abf0;
      color: #ffffff;
      border: none;
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
    }

  </style>
</head>
<body>
  <div class="container">
    <h2 id = "admin-name">Admin Login</h2>
    <h2><a href="index.php" class="logout-button">Home</a></h2>
    <form method="post">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required><br><br>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required><br><br>
      <input type="submit" value="Login">
    </form>
    <p>Don't have an account? <a href="admin_signup.php">Signup here</a></p>
    <?php if (isset($error_message)): ?>
      <p class="error-message"><?php echo $error_message; ?></p>
    <?php endif; ?>
  </div>

</body>
<script>
  // Check if the adminName variable is defined
  if (typeof adminName !== 'undefined') {
    // Update the DOM with the administrator's name
    var adminNameElement = document.getElementById('admin-name');
    if (adminNameElement) {
      adminNameElement.textContent = 'Logged in as: ' + adminName;
    }
  }
</script>
</html>
Posted
Updated 2-Oct-23 5:31am
v2
Comments
Richard MacCutchan 2-Oct-23 3:53am    
Very interesting, but you forgot to ask a question. Please use the Improve question link above, and add complete details of what is not working.
Richard Deeming 2-Oct-23 4:21am    
$query = "SELECT * FROM admins WHERE username = '$username' LIMIT 1";

Your code is vulnerable to SQL Injection[^]. NEVER use string concatenation/interpolation to build a SQL query. ALWAYS use a parameterized query.

PHP: SQL Injection - Manual[^]

1 solution

So you echo out a script tag to hold the value in a JavaScript var:

PHP
echo "<script>var adminName = '" . $username . "';</script>";


So, when the page renders, if that works, you have the following JavaScript:

JavaScript
var adminName = "<value-of-php-$username>" // string value of what is in $username


But, then in the CLIENT side code you don't have anything that references that var adminName

That's the only place the admin name value is stored once the client is rendered.

We then see you attempting to retrieve the value from the DOM element:

JavaScript
var adminNameElement = document.getElementById('admin-name');
  if (adminNameElement) {
   adminNameElement.textContent = 'Logged in as: ' + adminName;
}


However, you cannot refer to the JavaScript var as just adminName because it is out of context at that point.

Why don't you just try the following PHP to see if it even works:

PHP
echo "<div id="testAdminName"> $username </div>";


Then you should just be able to view the div on the client.
If that works you can work out how to get the value into a variable.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900