ダッシュで奪取

SIerだけどWebエンジニアになりたい!

【PHP】押されたボタンによって表示内容を変える

やりたいこと

・ボタンが押された場合、押されていない場合で表示内容を変える
・ボタンが押された場合は、どのボタンを操作したか分かるようにする

サンプルページ

目次

  1. 使えそうなもの
  2. 全体像
  3. HTML部分
  4. ジャンケンボタンが押されている場合
  5. ジャンケン配列を作る
  6. ボタンの値を受け取る
  7. ボタンの値をジャンケン配列から探して、該当した手を返す
  8. おわりに

1.使えそうなもの

  • $_POST 「POST」で送られてきた値が入る
  • $_GET 「GET」で送られてきた値が入る
  • isset(変数名) 「変数名」がNULLでなければTRUE、NULLであればFALSEを返す

2.全体像

<?php
    // ジャンケンボタンが押されている場合
    if (isset($_POST['janken'])){
        // ジャンケン配列を作る
        $janken = [
            'rock'     => 'グー',
            'scissors' => 'チョキ',
            'paper'    => 'パー',
        ];

        // ボタンの値を受け取る
        $player = $_POST['janken'];

        // ボタンの値をジャンケン配列から探して、該当した手を返す
        $result = $janken[$player];

    // ジャンケンボタンが押されていない場合
    } else {
        $result = '何を出す?';
    };
?>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>ボタンのテスト</title>
    </head>
    <body>
        <div class="test20190420">
            <h1>ジャンケン・・・</h1>
            <p><?php echo $result; ?></p>
            <form method="post">
                <button type="submit" name="janken" value="rock">グー</button>
                <button type="submit" name="janken" value="scissors">チョキ</button>
                <button type="submit" name="janken" value="paper">パー</button>
            </form>
        </div>
    </body>
</html>

3.HTML部分

<form method="post">
    <button type="submit" name="janken" value="rock">グー</button>
    <button type="submit" name="janken" value="scissors">チョキ</button>
    <button type="submit" name="janken" value="paper">パー</button>
</form>

このフォームの値は「POST」で送信します。
POSTメソッドで送られた値は $_POST[nameの値] に格納されるので、ここではnameを「janken」として、 $_POST['janken'] の中に入れています。
※css部分は前回のものをそのまま使いまわしています。

4.ジャンケンボタンが押されている場合

<?php
    // ジャンケンボタンが押されている場合
    if (isset($_POST['janken'])){

        // ジャンケンボタンが押されている場合の処理

    // ジャンケンボタンが押されていない場合
    } else {
        $result = '何を出す?';
    };
?>

isset($_POST['janken']) で、$_POST['janken']の中身をチェックしています。
TRUE = 値が入っていた場合は上段の処理、FALSE = 何も入っていなかった場合は下段の処理を行います。
$_POST['janken']に何も値が入っていない = まだジャンケンボタンが押されていない場合なので、選択した手が表示される部分には「何を出す?」と表示させています。

5.ジャンケン配列を作る

<?php
    // ジャンケン配列を作る
        $janken = [
            'rock'     => 'グー',
            'scissors' => 'チョキ',
            'paper'    => 'パー',
        ];
?>

連想配列 $janken の中に、ジャンケンの手を格納しています。

前回では、下記のように配列を作成していました。

$omikuji = [ '大吉', '吉', '中吉', '小吉', '末吉', '凶', '大凶'];

この場合、0 = 大吉、1 = 吉、2 = 中吉…と値が格納されています。
今回、0 = グー、1 = チョキ、2 = パーとしても良かったのですが、ソースを分かりやすくするためにも、添字の部分に任意の値を設定しました。

$janken = [
    'rock'     => 'グー',
    'scissors' => 'チョキ',
    'paper'    => 'パー',
];

このように記述することで、$janken['rock'] でグー、 $janken['scissors'] でチョキ、 $janken['paper'] でパーを取り出すことができます。

6.ボタンの値を受け取る

<?php
    // ボタンの値を受け取る
    $player = $_POST['janken'];
?>

ボタンから $_POST['janken'] に値を受け取ったので、これを $player に入れておきました。

7.ボタンの値をジャンケン配列から探して、該当した手を返す

<?php
    // ボタンの値をジャンケン配列から探して、該当した手を返す
    $result = $janken[$player];
?>

$playerには、rock scissors paperのいずれかの値が入っています。
これを $janken の添字とすることで、対応するジャンケンの手を取り出しています。
取り出した値を $result へ格納し、画面に表示させます。

8.おわりに

最初に挙げた目標である「ボタンが押された場合の処理を分岐させること」「ボタンが押された場合は、どのボタンを操作したか分かるようにすること」が実現できました。
次はこれを使って、前回のおみくじプログラムを、「ボタンを押したときにおみくじを引く」ように修正します。