PHPstep

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

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

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

PHPでプログラムを書いて占いプログラムを制作してみましょう。 まずは、ユーザーに生年月日を入力してもらうページ(index.php)から作成していきます。
※最終完成形はこちら→占いプログラムサンプル

このレッスンで作るもの

このレッスンでは下記のような占いプログラムを作成していきます。

占いプログラムサンプル



ユーザーが生年月日を入力して[生年月日で占う!]ボタンを押すと、次の画面で鑑定結果を表示する占いプログラムです。 早速作っていきましょう。

ひとまずHTMLのみで仮作成する

まずは、ユーザーに生年月日を入力してもらうページから作成していきます。 テキストエディタのメニューから[ファイル]→[新規作成]と選択して、新しいファイルを作成します。

[ファイル]→[名前を付けて保存]を選択して、前のレッスンで作成したsampleフォルダの直下に 「fortune」という名前のフォルダを作成して、そのfortuneフォルダの直下に「index.php」というファイル名で新規保存します。 パスでいうと「C:\xampp\htdocs\sample\fortune\index.php」となります。

ファイルの保存場所は、上記以外の場所でも構いません。 ただし、その場合には動作確認の際のURLなどが変わるので注意してください。

いま新規作成した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> <label> <select name="m"> <option value="">--</option> <option value="1">1</option> <option value="12">12</option> </select>月 </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のコントロールパネルやブラウザを立ち上げたままの状態なら、ブラウザの[更新]ボタンを押すだけで表示が切り替わります。

ブラウザの画面が、下記のように表示されれば成功です。

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

ここまでは、すべてHTMLのみで記述しています。 HTMLソースの内容を確認していきましょう。

<form>~</form>でひとつのフォームです。 下記のソースは、今入力したindex.phpからフォーム部分を抜粋したものです。

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

年、月、日ごとにそれぞれ<select></select> でセレクトボックスを作成しています。 その内側に<option value="1">1</option>などの選択肢を3個ずつ記述しました。

月は12ヶ月ありますし日は31日までありますから、当然ながらoption要素が3個だけでは選択肢が足りていません。 これは、まだHTMLのみで仮作成しているからであり、この年月日入力部分はあとでPHPプログラムに置き換わります。 現時点では最終的にどのような画面を作りたいのかイメージをつかむために、選択肢を3個だけ記述して仮の入力画面を作成しました。

form要素のaction属性で指定された「result.php」というページはまだ作成していません。 仮に、この時点で[生年月日で占う!]ボタンを押すと、下記のような画面が表示されます。

要求された URL は本サーバでは見つかりませんでした。

現時点では送信先として指定した「result.php」はまだ存在していないため、 指定されたページが見つからずにエラーメッセージが表示されたのです。