【PHP】選択した色を背景色に設定する
こんにちは😊Kintarouです。
現在エンジニア転職を目指してプログラミング学習中です👨🎓
夢はフリーランスエンジニアになって働く人にとって働く事が楽しくなるシステムを作ること！
と、愛する妻と海外移住すること🗽
プログラミングや読んでいる本のことなど、ブログに書いていきます！
twitter : https://twitter.com/ryosuke_angry
今回参考にさせて頂いたサイト様🙇♂️ dotinstall.com
選択した色を背景色にする
PHPの記述を活用すれば、下記のように選択した色を背景色にする事も出来ます。
■_header.php
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>PHP Practice</title> </head> #body要素のstyleにPHPを組み込んで背景色を$colorにします。 <body style="background-color: <?= h($color); ?>;">
■index.php
<?php #$colorを選択して定義するまではデフォルト値(transparent)とします。 $color = 'transparent'; include('../app/_parts/_header.php'); ?> <form action="result.php" method="get"> <label><input type="radio" name="color" value="orange">Orange</label> <label><input type="radio" name="color" value="pink">Pink</label> <label><input type="radio" name="color" value="gold">Gold</label> <button>Send</botton> </form>
pinkを選択してSENDします。
■result.php
<?php function h ($str) { return htmlspecialchars($str, ENT_QUOTES, 'UTF-8'); } #GETのパラメーターを$colorとし、未選択(Null)の場合はtransparentとします。 $color = filter_input(INPUT_GET, 'color') ?? 'transparent'; include('../app/_parts/_header.php'); ?> <p><?= h($color); ?></p>
背景色が変更されました。
ただし、この場合result.phpにはURLにパラメーターが添えられているので背景色が適用されますが、ページ内リンクで元のページに戻るなどするとパラメーターが添えられていないので、$colorの情報は保持されません。
そこで、ブラウザにちょっとした情報を記述できるCookieの仕組みを使って背景色を保持します。
Cookieの仕組みを使い背景色情報を保持する
Cookieは簡単な情報を記述できるブラウザ側の仕組みです。
PHPではsetcookie()関数を使って設定できます。
■result.php
<?php require('../app/functions.php'); #GETから得たcolor情報を$colorFromGetとします。 $colorFromGet = filter_input(INPUT_GET, 'color') ?? 'transparent'; #setcookie()関数で$colorFromGetをcolorという名前でCookieに保持します。 setcookie('color', $colorFromGet); include('../app/_parts/_header.php'); ?> <p><?= h($color); ?></p> <p><a href="index.php">Go Back</a></p>
先ほどと同じようにPinkを選択し、Go Backでindex.phpに戻ったとします。
■_header.php
<?php #Null合体演算子を繋げて記述しています。 #colorFromGetが定義されていればその値、なければCookieの値、それもなければtransparentという記述になります。 $color = $colorFromGet ?? filter_input(INPUT_COOKIE, 'color') ?? 'transparent'; ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>PHP Practice</title> </head> <body style="background-color: <?= h($color); ?>;">
これでCookieに背景色情報が保持され、元ページに戻っても反映されています。
URLにパラメーターは含まれていませんが、きちんと反映されている事がわかります。
Cookieの内容を確認する
Cookieの内容は検証ツールのApplicationパネル→Cookieから見る事ができます。
| 主要項目 | 意味 |
|---|---|
| Domain | このCookieが有効なドメイン |
| Path | 有効なディレクトリ配下 |
| Expires | 有効期限（デフォルトはSession→ブラウザを閉じるまで） |
また、Cookieの名前や値はダブルクリックで編集する事ができ、右クリックでDeleteとすると削除も可能です。
setcookie()関数注意点
setcookie()はHTTPプロトコルの制約によりあらゆる出力(echoやHTML)より前に使う必要があります。
また、Cookieは使える量に制限があり、かつユーザーから中身が丸見えで、上記のように編集も削除も出来てしまうためセキュリティ面の問題がある事に注意が必要です。
重要な情報はSessionという仕組みを使った方が良いですが、こちらは別記事にまとめます。
以上、どなたかの参考になれば幸いです😊
