ステータスに合わせて、背景色を動的に変えたい。

Question

キャプチャの各書籍の背景色をステータスの変化に合わせて白色→ステータスと同色に変えたいです。
読了の場合→緑　未読の場合→赤　などです。
調べたのですが、他のボタンを押したときに、違う場所の色を変える方法が
のっておらず、見当がつきません。
どなたか教えていただけませんでしょうか。

以下、PHP抜粋です。

抜粋

// ここにMySQLを使ったなんらかの処理を書く

// bookshelf_form.phpから送られてくる書籍データの登録

if (array_key_exists('submit_add_book', $_POST)) {
    // まずは送られてきた画像をuploadsフォルダに移動させる
    $file_name = $_FILES['add_book_image']['name'];
    $image_path = './uploads/' . $file_name;
    move_uploaded_file($_FILES['add_book_image']['tmp_name'], $image_path);

    // データベースに書籍を新規登録する
    $sql = 'INSERT INTO books (title, image_url, status) VALUES(?, ?, "unread")';
    $statement = mysqli_prepare($database, $sql);
    mysqli_stmt_bind_param($statement, 'ss', $_POST['add_book_title'], $image_path);
    mysqli_stmt_execute($statement);
    mysqli_stmt_close($statement);

省略

}
// ステータス変更の処理
if (array_key_exists('submit_book_unread', $_POST)) {
    // 未読へ変更
    $sql = 'UPDATE books SET status="unread" WHERE id=?';        // 実行するSQLを作成
    $statement = mysqli_prepare($database, $sql);                // セキュリティ対策をする
    mysqli_stmt_bind_param($statement, 'i', $_POST['book_id']);  // id=?の?の部分に代入する
    mysqli_stmt_execute($statement);                             // SQL文を実行する
    mysqli_stmt_close($statement);                               // SQL文を破棄する
}
elseif (array_key_exists('submit_book_reading', $_POST)) {
    // 読中へ変更
    $sql = 'UPDATE books SET status="reading" WHERE id=?';
    $statement = mysqli_prepare($database, $sql);
    mysqli_stmt_bind_param($statement, 'i', $_POST['book_id']);
    mysqli_stmt_execute($statement);
    mysqli_stmt_close($statement);
}
elseif (array_key_exists('submit_book_finished', $_POST)) {
    // 読了へ変更
    $sql = 'UPDATE books SET status="finished" WHERE id=?';
    $statement = mysqli_prepare($database, $sql);
    mysqli_stmt_bind_param($statement, 'i', $_POST['book_id']);
    mysqli_stmt_execute($statement);
    mysqli_stmt_close($statement);
}
elseif (array_key_exists('submit_book_hold', $_POST)) {
    // 保留へ変更
    $sql = 'UPDATE books SET status="hold" WHERE id=?';
    $statement = mysqli_prepare($database, $sql);
    mysqli_stmt_bind_param($statement, 'i', $_POST['book_id']);
    mysqli_stmt_execute($statement);
    mysqli_stmt_close($statement);
}

// 未読数のカウント
$sql = 'SELECT COUNT(*) as count FROM books where status = "unread"';
$result = mysqli_query($database, $sql);
$record = mysqli_fetch_assoc($result);
$count_unread = $record['count'];
// 読中数のカウント
$sql = 'SELECT COUNT(*) as count FROM books where status = "reading"';
$result = mysqli_query($database, $sql);
$record = mysqli_fetch_assoc($result);
$count_reading = $record['count'];
// 読了数のカウント
$sql = 'SELECT COUNT(*) as count FROM books where status = "finished"';
$result = mysqli_query($database, $sql);
$record = mysqli_fetch_assoc($result);
$count_finished = $record['count'];
// 保留数のカウント
$sql = 'SELECT COUNT(*) as count FROM books where status = "hold"';
$result = mysqli_query($database, $sql);
$record = mysqli_fetch_assoc($result);
$count_hold = $record['count'];

// どのボタンを押したか（どのステータスで絞り込みをするか）を判定し、SELECT文を変更する
if (array_key_exists('submit_only_unread', $_POST)) {
    // 未読ステータスの書籍だけを取得する
    $sql = 'SELECT * FROM books WHERE status="unread" ORDER BY created_at DESC';
}
elseif (array_key_exists('submit_only_reading', $_POST)) {
    // 読中ステータスの書籍だけを取得する
    $sql = 'SELECT * FROM books WHERE status="reading" ORDER BY created_at DESC';
}
elseif (array_key_exists('submit_only_finished', $_POST)) {
    // 読了ステータスの書籍だけを取得する
    $sql = 'SELECT * FROM books WHERE status="finished" ORDER BY created_at DESC';
}
elseif (array_key_exists('submit_only_hold', $_POST)) {
    // 保留ステータスの書籍だけを取得する
    $sql = 'SELECT * FROM books WHERE status="hold" ORDER BY created_at DESC';
}
else {
    // 登録されている書籍を全て取得する
    $sql = 'SELECT * FROM books ORDER BY created_at DESC';
}

// いずれかの $sql を実行して $result に代入する
$result = mysqli_query($database, $sql);  

// ステータスによってブックアイテムの背景色を変える。


// MySQLを使った処理が終わると、接続は不要なので切断する
mysqli_close($database);

?>

Answer 1

前半に添付いただいた php は、DBのステータスを変更する話です。
今回、DBのステータスをみて、「表示を変えたい」というお話なので、後半の html + php の方を触ります。

ざっくり考え方を説明しますと、

<?php
while ($record = mysqli_fetch_assoc($result)){

  $image_url = $record['image_url'];
?>

  <div class="book_image">
     <img src="<?php  echo h($image_url);  ?>">
  </div>

<?php
}
?>

という部分（抜き出しています）があると思いますが、
ここで、本の画像を、表示しています。
この本の画像 img は、div～/div で囲まれていますが、この div のクラスに、book_image に加えて、
未読なら赤(unread)、既読なら緑(finished)など、背景色だけを指定したクラスを CSS 側で、定義しておきます。

.unread {
  background-color : #f00;
}

のようにです。

あとは、$record['status'] の値を、book_image クラスと併記してあげれば OK です。

つまり、

<?php
   $s = "book_image " + $record['status'];
       // book_image のあとの1文字半角スペースを忘れずに
?>
   <div class="<?php echo $s; ?>" >

のような感じです。
回答が汚いですが、やりたいことはご理解いただけるでしょうか。

Comments

[ak.n]

CSSの情報がないので、なんとも言えませんが、これで背景色が変わらない場合、少し試行錯誤してみる必要があります。
ともかくも、考え方は、いまクラス名が book_image と決め打ちされているところを、「$record['status'] に応じたクラス名を変更してあげる」、です。

[bonchos22]

ありがとうございます。試してみたのですが、
CSSで背景部分の色が変わるところが、
.book_item で指定されており、且つ別でステータスごとの色が
設定されていたため、ステータスボタンの背景色が変わるのみとなってしまいました。
CSSを添付し直しました。

[ak.n]

なるほど。それでしたら、.book_item では背景色を指定せず、背景色の設定は、.unread とか .finished などに役割を持たせ、php で class="book_item unread" とか、class="book_item finished" と html 出力するようにしてあげればよいと思います。

[bonchos22]

ありがとうございます。頑張ります。