やりたいこと
- 以前書いたおみくじプログラムはページ読み込み時に実行されていたので、ボタンを押した時にのみおみくじが引かれるようにする。
- ボタンが押されている場合、押されていない場合の処理をHTML側で分岐させる。
- 以前書いたおみくじプログラムを流用して作成。
目次
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側で分岐させる」が実現できました!
デザインを凝ってみたり、ボタンをおみくじの画像にする等色々できそうですが、おみくじはこの辺で…