ゼミII実習


ゼミIIで使用しているテキストがあります

動的Webページ作成(その3)PHPプログラミング(その2)


今回から2B教室でゼミナールIIの授業を行います。前回、試したように先生用のPCにPHPがインストールされていないので、実習がやりにくいからです。

まだ、Apacheサーバを使ってページを見ることができない人が多いので、しばらくの間時間の始めに復習を続けていきます。

練習1.これから何度も行う操作です。Apache Webサーバを起動してください。そして適当にページを用意して、クライアント(インターネットエクスプローラ)からそのページをlocalhostを指定して見る事ができるようにしてください。

まず、自分で試してください。それからモニターを使って説明します。

1.PHPプログラミング(その1)

PHPでワールドカップ参加国一覧のページを作っていきたいと思います。ポイントは表をどうPHPで記述できればよさそうです。

まず、PHPを使用せずにグループAの国を一つ表で表現してみましょう。wcup.htmとしてApacheサーバのルートディレクトリに保存してください。図はあえて表示していません。imgタグのalt属性でファイル名を表示しています。

<html>
<head>
<title>
ワールドカップ2006参加国一覧
</title>
</head>
<body>
<h1>ワールドカップ2006参加国一覧</h1>
<hr>
<h3>グループA</h3>
<table border="1">
<tr>
<td><img src="" alt="thumb_nail/ger_tn.png"></td><td>ドイツ</td>
</tr>
</table>
</body>
</html>

Apache Webサーバが動いている状態で次のURLを使用して確認します。

http://localhost/wcup.htm

次にbodyタグの部分をPHPのプログラムで表現してみます。次のようにprint文を使ってタグの文字列を出力しています。出力する時は’’で囲み、文の終わりは;で終わります。ファイル名はwcup.phpとしてApacheサーバのルートディレクトリに保存してください。

<html>
<head>
<title>
ワールドカップ2006参加国一覧
</title>
</head>
<body>
<?php
print '<h1>ワールドカップ2006参加国一覧</h1>';
print '<hr>';
print '<h3>グループA</h3>';
print '<table border="1">';
print '<tr>';
print '<td><img src="" alt="thumb_nail/ger_tn.png"></td><td>ドイツ</td>';
print '</tr>';
print '</table>';
?>
</body>
</html>

4行の表を同じデータを使って表示すると以下のようになります。

<html>
<head>
<title>
ワールドカップ2006参加国一覧
</title>
</head>
<body>
<?php
print '<h1>ワールドカップ2006参加国一覧</h1>';
print '<hr>';
print '<h3>グループA</h3>';
print '<table border="1">';
print '<tr>';
print '<td><img src="" alt="thumb_nail/ger_tn.png"></td><td>ドイツ</td>';
print '</tr>';
print '<tr>';
print '<td><img src="" alt="thumb_nail/ger_tn.png"></td><td>ドイツ</td>';
print '</tr>';
print '<tr>';
print '<td><img src="" alt="thumb_nail/ger_tn.png"></td><td>ドイツ</td>';
print '</tr>';
print '<tr>';
print '<td><img src="" alt="thumb_nail/ger_tn.png"></td><td>ドイツ</td>';
print '</tr>';
print '</table>';
?>
</body>
</html>

画像のファイル名と国名を変数$img_gerと$gerに入れておくことができます。この変数を使って上のプログラムを表現すると次のようになります。ここで今までタグの入っていた文字列は’’で囲んでいましたが、変数$img_gerと$gerを文字列に入れたものは、その内容を反映させるために””で囲んでいます。注意して欲しいのはタグの中で””を使っている場合(属性値など)は”の代わりに¥”のように書いて区別しています。

<html>
<head>
<title>
ワールドカップ2006参加国一覧
</title>
</head>
<body>
<?php
$img_ger='thumb_nail/ger_tn.png';
$ger='ドイツ';
print '<h1>ワールドカップ2006参加国一覧</h1>';
print '<hr>';
print '<h3>グループA</h3>';
print '<table border="1">';
print '<tr>';
print "<td><img src=\"\" alt=\"$img_ger\"></td><td>$ger</td>";
print '</tr>';
print '<tr>';
print "<td><img src=\"\" alt=\"$img_ger\"></td><td>$ger</td>";
print '</tr>';
print '<tr>';
print "<td><img src=\"\" alt=\"$img_ger\"></td><td>$ger</td>";
print '</tr>';
print '<tr>';
print "<td><img src=\"\" alt=\"$img_ger\"></td><td>$ger</td>";
print '</tr>';
print '</table>';
?>
</body>
</html>

以上のように変数を使えることがわかったので、配列を使った例を試してみましょう。この例でもドイツのみ表示しています。

配列名として$kuni_imgと$kuniを用意しています。array関数を使って配列の要素に値を対応させます。この例ではgerという単語に、$kuni_imgではthumb_nail/ger_tn.pngという文字列、$kuniではドイツという単語を=>という記号を使って対応させています。プログラム中で呼び出す時には$kuni_img[ger]のように書いて配列の値を表示させることができます。

<html>
<head>
<title>
ワールドカップ2006参加国一覧
</title>
</head>
<body>
<?php
$kuni_img=array('ger' => 'thumb_nail/ger_tn.png');
$kuni=array('ger' => 'ドイツ');
print '<h1>ワールドカップ2006参加国一覧</h1>';
print '<hr>';
print '<h3>グループA</h3>';
print '<table border="1">';
print '<tr>';
print "<td><img src=\"\" alt=\"$kuni_img[ger]\"></td><td>$kuni[ger]</td>";
print '</tr>';
print '<tr>';
print "<td><img src=\"\" alt=\"$kuni_img[ger]\"></td><td>$kuni[ger]</td>";
print '</tr>';
print '<tr>';
print "<td><img src=\"\" alt=\"$kuni_img[ger]\"></td><td>$kuni[ger]</td>";
print '</tr>';
print '<tr>';
print "<td><img src=\"\" alt=\"$kuni_img[ger]\"></td><td>$kuni[ger]</td>";
print '</tr>';
print '</table>';
?>
</body>
</html>

練習1.この例を参考にしてグループAの残りの国を表示してみましょう。コスタリカはcrc、ポーランドはpol、エクアドルはecuで考えてみましょう。

練習2.国旗の画像を表示してみましょう。

練習3.次の例を考えてみましょう。

<html>
<head>
<title>
ワールドカップ2006参加国一覧
</title>
</head>
<body>
<?php
$test=array('a' => 'aaa',
            'b' => 'bbb',
            'c' => 'ccc',
            'd' => 'ddd',
            'e' => 'eee',
            'f' => 'fff',
            'g' => 'ggg',
            'h' => 'hhh',
);
print '<table border="1">';
foreach($test as $key => $value){
  print '<tr>';
  print "<td>$value</td><td>$key</td>";
  print '</tr>';
}
print '</table>';
?>
</body>
</html>

foreach文を使用すると配列$testで使用した要素を$keyで、それに対応する値を$valueで順に取り出すことができます。配列のデータとして例えばaの代わりにドイツを、aaaの代わりに国旗の画像の入っている場所を指定するとどうなるでしょうか。

これを使ってすべての参加国の国旗と国名を表で表してみなさい。