ダッシュで奪取

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

【PHP】コロン構文 ( 続:おみくじプログラム )

やりたいこと

  • 以前書いたおみくじプログラムはページ読み込み時に実行されていたので、ボタンを押した時にのみおみくじが引かれるようにする。
  • ボタンが押されている場合、押されていない場合の処理をHTML側で分岐させる。
  • 以前書いたおみくじプログラムを流用して作成。

サンプルページ

目次

  1. 全体像
  2. 条件文の書き方(コロンを使う方法)
  3. HTML部分
  4. PHP部分
  5. おわりに

1.全体像

<?php
    // ボタンが押されている場合
    if (isset($_POST['omikuji'])) {
        // おみくじ配列を作る
        $omikuji = [ '大吉', '', '中吉', '小吉', '末吉', '', '大凶'];

        // 乱数を生成して、おみくじを引く
        $fortune = mt_rand(0,count($omikuji)-1);
        $result = $omikuji[$fortune];

    // ボタンが押されていない場合
    } 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>
            <?php if($result): ?>
                <p>あなたの運勢は…<span id="omikuji"><?php echo $result; ?></span>!!</p>
            <?php else: ?>
                <p>今日の運勢は…?</p>
            <?php endif ?>
            <form method="post">
                <button type="submit" name="omikuji" value="omikuji">おみくじを引く!</button>
            </form>
        </div>
    </body>
</html>

2.条件文の書き方(コロンを使う方法)

下記2つのIF文は、同じ内容を表現しています。

<?php
    $result = 'test';
    if ($result == 'test') {
      echo 'testです';
    } else {
      echo 'testじゃないです';
    }
?>
<?php
    $result = 'test';
    if ($result == 'test'):
        echo 'testです';
    else:
        echo 'testじゃないです';
    endif;
?>

HTML部分にIFでの制御を入れる場合、下記の方が読みやすいコードになるため(個人的な意見ですが)、 今回はコロンを使う方法で記述します。
コロンで記述する場合、末尾に「endif」が必要!(メモ)

3.HTML部分

<!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>
            <?php if($result): ?>
                <p>あなたの運勢は…<span id="omikuji"><?php echo $result; ?></span>!!</p>
            <?php else: ?>
                <p>今日の運勢は…?</p>
            <?php endif ?>
            <form method="post">
                <button type="submit" name="omikuji" value="omikuji">おみくじを引く!</button>
            </form>
        </div>
    </body>
</html>

おみくじプログラムに、おみくじを引くボタンと表示部分の条件分を追加しました。
if($result)と記述した場合、$resultに値が入っていたらTRUE、入っていなかったらFALSEの判定になります。

<?php if($result): ?>
    <p>あなたの運勢は…<span id="omikuji"><?php echo $result; ?></span>!!</p>
<?php else: ?>
    <p>今日の運勢は…?</p>
<?php endif ?>

TRUEであれば「あなたの運勢は…」、FALSEなら「今日の運勢は…?」が表示されます。

4.PHP部分

<?php
    // ボタンが押されている場合
    if (isset($_POST['omikuji'])) {
        // おみくじ配列を作る
        $omikuji = [ '大吉', '', '中吉', '小吉', '末吉', '', '大凶'];

        // 乱数を生成して、おみくじを引く
        $fortune = mt_rand(0,count($omikuji)-1);
        $result = $omikuji[$fortune];

    // ボタンが押されていない場合
    } else {
        $result = '';
    }
?>

以前書いたソースに、$_POSTでの分岐を追加しました。
ボタンが押された場合のみ、おみくじの結果を取得しています。

5.おわりに

「ボタンが押されている場合、押されていない場合の処理をHTML側で分岐させる」が実現できました!
デザインを凝ってみたり、ボタンをおみくじの画像にする等色々できそうですが、おみくじはこの辺で…