PHPstep

トップページ > PHPで占いプログラムを作ろう >

第二章 PHPでウェブアプリケーションを作ろう

PHPで占いプログラムを作ろう2

PHPで占いプログラムを作ろう」の第2回です。 前回、仮作成した生年月日入力ページのひな型に PHPプログラムを埋め込んでいきます。
※最終完成形はこちら→占いプログラムサンプル

月の入力欄にあらためて注目

前回の「生年月日入力ページ(index.php)を新規作成する」では、 生年月日入力ページのひな型をHTMLだけで作成しました。 今回はそこにPHPプログラムを埋め込んでいきます。

前回作成したindex.phpのなかの、生まれた月を選択する部分にあらためて注目してみましょう。

サンプルソース:index.phpの抜粋
<label> <select name="m"> <option value="">--</option> <option value="1">1</option> <option value="12">12</option> </select>月 </label>

上記のHTMLソースでは選択肢として1月と12月だけ記述しましたが、これは仮作成なので入力内容を省略したためです。 HTMLだけで入力欄を作成する場合、本来ならば下記のように1~12月まですべて記述する必要があります。

サンプルソース:index.phpの作成例
<label> <select name="m"> <option value="">--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>月 </label>

上記のHTMLソースで完成としてしまっても良いのですが、これをPHPプログラムに置き換えてみましょう。

月の入力部分をループ処理にする

前回作成したindex.phpを開いて、生まれた月の入力部分を下記のように書き換えてください。

サンプルソース:index.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ねこ占い|生年月日を元にした占いプログラム</title> </head> <body> <h1>ねこ占い</h1> <p>※生年月日で占います</p> <form method="get" action="result.php"> <p> 生年月日:<br> <label> <select name="y"> <option value="">----</option> <option value="1915">1915</option> <option value="2015">2015</option> </select>年 </label> <?php /******************************* 生年月日(月) *******************************/ echo '<label>'; echo '<select name="m">'; echo '<option value="">--</option>'; for($i=1; $i<=12; $i++) { echo '<option value="'.$i.'">'.$i.'</option>'; } echo '</select>月 '; echo '</label>'; ?> <label> <select name="d"> <option value="">--</option> <option value="1">1</option> <option value="31">31</option> </select>日 </label> </p> <p><input type="submit" value="生年月日で占う!"></p> </form> </body> </html>

書き換えが完了したら、index.phpを上書き保存します。

ブラウザで表示確認してみよう

いま作成したindex.phpをブラウザで表示確認してみましょう。

XAMPPによる動作確認手順
  1. XAMPPのコントロールパネルを立ち上げて、コントロールパネルの中のApacheをStartさせます。
  2. ブラウザを立ち上げてアドレス欄に http://localhost/sample/fortune/ と入力します。
  3. XAMPPのコントロールパネルやブラウザを立ち上げたままの状態なら、ブラウザの[更新]ボタンを押すだけで表示が切り替わります。

下記のように、生まれた月が1~12月まで選択できるようになれば成功です。

記述したソース内容を確認しよう

いま書き換えた生まれた月の入力欄部分のPHPソースに注目してみましょう。

サンプルソース:index.phpの抜粋
<?php /******************************* 生年月日(月) *******************************/ echo '<label>'; echo '<select name="m">'; echo '<option value="">--</option>'; for($i=1; $i<=12; $i++) { echo '<option value="'.$i.'">'.$i.'</option>'; } echo '</select>月 '; echo '</label>'; ?>

上記のPHPソースでは、for文と呼ばれるループ処理が使われています。

for文では、ループを続ける条件を満たす限り、ループして処理を繰り返します。 ループするごとにカウンタの値を初期値から変化させて、ループを続ける条件を満たしているかどうかチェックされます。

for (カウンタの初期値; ループを続ける条件; カウンタの増え方) {処理}

今回作成した上記のPHPプログラムでは、 for($i=1; $i<=12; $i++) { ~ } の部分でfor文が使用されています。 これは「カウンタを1から開始して、12になるまでループを続けなさい、カウンタは1ずつ増えるものとする」 と指定していることになります。 ループ内の処理の部分では、選択肢となるHTMLの<option>タグが12回吐き出されることになります。

日の入力部分をループ処理にする

生まれた日についても、生まれた月と同様にfor文を使ったループ処理に書き換えましょう。 index.phpを開いて、生まれた日の入力部分を下記のように書き換えてください。

サンプルソース:index.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ねこ占い|生年月日を元にした占いプログラム</title> </head> <body> <h1>ねこ占い</h1> <p>※生年月日で占います</p> <form method="get" action="result.php"> <p> 生年月日:<br> <label> <select name="y"> <option value="">----</option> <option value="1915">1915</option> <option value="2015">2015</option> </select>年 </label> <?php /******************************* 生年月日(月) *******************************/ echo '<label>'; echo '<select name="m">'; echo '<option value="">--</option>'; for($i=1; $i<=12; $i++) { echo '<option value="'.$i.'">'.$i.'</option>'; } echo '</select>月 '; echo '</label>'; /******************************* 生年月日(日) *******************************/ echo '<label>'; echo '<select name="d">'; echo '<option value="">--</option>'; for($i=1; $i<=31; $i++) { echo '<option value="'.$i.'">'.$i.'</option>'; } echo '</select>日'; echo '</label>'; echo '</p>'; echo '<p><input type="submit" value="生年月日で占う!"></p>'; echo '</form>'; ?> </body> </html>

書き換えが完了したら、index.phpを上書き保存します。

ブラウザで表示確認してみよう

いま上書き保存したindex.phpをブラウザで表示確認してみましょう。 下記のように、生まれた日が1~31日まで選択できるようになれば成功です。

記述したソース内容を確認しよう

いま書き換えた生まれた日の入力欄部分のPHPソースに注目してみましょう。

サンプルソース:index.phpの抜粋
/******************************* 生年月日(日) *******************************/ echo '<label>'; echo '<select name="d">'; echo '<option value="">--</option>'; for($i=1; $i<=31; $i++) { echo '<option value="'.$i.'">'.$i.'</option>'; } echo '</select>日'; echo '</label>';

生まれた日のループは1~31日までとなりますが、 生まれた月のときと同じfor文によるループ処理が使われています。

上記のPHPソースでは、 for($i=1; $i<=31; $i++) { ~ } の部分でfor文が使用されています。 これは「カウンタを1から開始して、31になるまでループを続けなさい、カウンタは1ずつ増えるものとする」 と指定していることになります。 ループ内の処理の部分では、選択肢となるHTMLの<option>タグが31回吐き出されることになります。