Missing responsiveness for button

Question

I'm new to php and backend, I tried making a login and I wanted to buttons to change the background colour. Instead of using javascript, I use php to program it, to create sessions.

Below is the code. The buttons work in the url bar, but nothing is happening. What am I missing or overseeing?

<?php
// Initialize the session
session_start();

require_once "config.php";


session_start();

require_once "config.php";
 
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: login.php");
    exit;
}
$sql = "SELECT background FROM users ORDER BY id DESC";

$backgroundColour = [];
$colour = [];

$result = $link->query($sql);

$data = [];
while ($row = $result -> fetch_object()) {
    $data[] = $row;
}
$backgroundColour['backgroundColour'] = $data;
$_SESSION['colour'] = $colour;

if(isset($_GET['colour'])){
    $colour = $_GET['colour'];
    $_SESSION['colour'] = $colour;
}

$colour_session = $_SESSION['colour'];

$sql = "INSERT INTO users (background) VALUES ('$colour_session')";

?>

<!DOCTYPE html>   
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <h1>Choose background color</h1>
        <a href="?colour=white">Hvid</a>
        <a href="?colour=black">Sort</a>
    </div>
    <title>Welcome</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body{ font: 14px sans-serif; text-align: center; }
    </style>
</head>
<body>
    <h1 class="my-5">Hi, <b><?php echo htmlspecialchars($_SESSION["username"]); ?></b>. Welcome to our site.</h1>
    <p>
        <a href="reset-password.php" class="btn btn-warning">Reset Your Password</a>
        <a href="logout.php" class="btn btn-danger ml-3">Sign Out of Your Account</a>
    </p>
</body>
</html>

What is the goal of the twice `session_start();require_once "config.php";` ? — Syscall, Oct 12 '22 at 20:47
`$sql = "INSERT INTO users (background) VALUES ('$colour_session')";` is not executed (and is not the way to do : learn about ["parameterized queries"](https://stackoverflow.com/questions/60174/) instead. — Syscall, Oct 12 '22 at 20:49
Where is the CSS in the HTML to change the background-color? — Syscall, Oct 12 '22 at 20:50

Ken Lee · Answer 1 · 2022-10-12T21:47:13.233

At least you need to tell the client side (the browser) that the background color is set as $_SESSION["color"] (e.g. black)

So, one of the ways is to add the following line to the end of your script (your script already has <body></body>) :

<?php
echo '<script>document.body.style.backgroundColor = "'. $_SESSION['colour'] . '";</script>';
?>

So, omitting the db part, the code (tested, fully working) will be

<?php
session_start();

if(isset($_GET['colour'])){
    $colour = $_GET['colour'];
    $_SESSION['colour'] = $colour;
}
?>

<!DOCTYPE html>   
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <h1>Choose background color</h1>
        <a href="?colour=white">Hvid</a>
        <a href="?colour=black">Sort</a>
    </div>
</body>
<?php

echo '<script>document.body.style.backgroundColor = "'. $_SESSION['colour'] . '";</script>';
?>

For the db part:

You may need to re-write the part on the db queries. For example, apart from the need to use parameterized prepared statement in your query (to avoid SQL injection attacks). Consider using "update user set background=? where id=?" instead of an insert query, For a multi-user system, it will be something like:

$sql = "UPDATE users SET background=? WHERE id=?";
$stmt= $link->prepare($sql);
$stmt->bind_param("si", $_SESSION['colour'], $_SESSION["id"]);
$stmt->execute();

It is because each user should have only a single record in the db table (so logically it is an update instead of an insert).

Missing responsiveness for button

1 Answers1