トップ » 技術記事 » PHPで週末プログラミング(1) - 掲示板を作ってみよう(1)

PHPで週末プログラミング(1) - 掲示板を作ってみよう(1) はてなブックマーク数 このエントリーをブックマークに追加

もし、Webサイトの管理者で週末に何か気軽に作ってみようと思ったなら、自分専用の「掲示板」を作ってみるのはどうでしょうか。PHPを使うことで手軽に掲示板の制作を行うことができます。掲示板を題材にPHPを学ぶことで、Webプログラミングの仕組みを学ぶことができます。ゼロからの掲示板作りに挑戦してみましょう。

対象とする読者

  • 週末に何か作ってみたい人
  • 何かしらのプログラミング言語の経験がある
  • PHPに挑戦してみたい人
  • 掲示板を作ってみたい人

ここで作る掲示板

一回目の今回は、PHPの基本的な文法を確認しながら、簡単な掲示板を作ってみます。PHPの開発環境をセットアップし、テストプログラムを作りながら、Webアプリケーションの仕組みを確認していきます。そして、次回以降、SQLite というデータベースを使って、もう少し高機能な掲示板を作ってみようと思います。

環境のセットアップ

PHP の開発環境を整えるには、XAMPP をインストールするのが簡単です。XAMPP には、PHPの環境を整えるのに必要な、Apache 2、MySQL、PHP というオープンソースの開発環境が一式セットになっています。Windows版に加え、Mac OS X版もあります。

http://aoikujira.com/demo/hakkaku/rc/20080814_xampp-web.png

上記のサイトからアーカイブをダウンロードしたらインストールします。上記サイトの方にもメモが書いてありますが、Windows Vistaにインストールする場合、Program Files以下にインストールするとうまく動かないことがありますので、"c:\xampp\"などにインストールすると良いでしょう。

Apacheの起動

インストールを終えたら、まずは、XAMPP のコントロールパネルを開いて、Apache を起動しましょう。Apache というのは、世界中で最も利用されている Web サーバーのソフトウェアです。

スタートメニューから[Apache Friends - XAMPP - XAMPP Control Pnael」を起動します。そのためには、Apache の[起動]ボタンをクリックします。

http://www.hakkaku.net/wp-content/uploads/2007/11/xampp-ctrl.png
テストプログラムの実行

それから、Webブラウザを起動して「http://localhost/」にアクセスします。すると、言語を選択する画面が出るので「日本語」をクリックします。以下のような画面が出ればインストールは成功しています。

http://www.hakkaku.net/wp-content/uploads/2007/11/xampp-web.png

次に、「XAMPP Control Panel」の「エクスプローラ」ボタンを押すと、XAMPP をインストールしたフォルダを開くことができます。この中のフォルダ「htdocs」を開いてみて、そこに、「test.php」というファイルを作ってみましょう。「test.php」の内容は次のようにしてみました。

file:test.php

<?php
echo "Hello!!";
?>

そして「http://localhost/test.php」にアクセスします。うまくいくと「Hello!」と表示されるはずです。

Apache の設定を変えなければ、XAMPP のインストールフォルダにある htdocs が、「http://localhost/」にマッピングされるようになっています。

変数を使ってみる

はじめに、PHPの基本的な文法に慣れてみましょう。PHP で、変数は、「$name」の形で表わすことができます。以下は、変数「$banana」に180を代入して画面に表示する例です。

<?php
$banana = 180;
echo $banana;
?>
http://aoikujira.com/demo/hakkaku/rc/20080814_180.png

このプログラムから、PHPの基本的な部分が分かります。まず、PHPのプログラムは、「<?php」から「?>」の間に書くということです。そして、変数を使う時には、「$変数名」のような形で使います。それから、画面に何か出力する場合には「echo 値;」のように記述するのです。

URLパラメータの取得

他の掲示板などを使ってみると、何かしら書き込んだりする時には、URLにパラメータがついていることに気づくでしょうか。例えば、「http://example.com/bbs.php」という掲示板なら、過去ログを見る時に「http://example.com/bbs.php?mode=log&p=1」など、通常のURLの後ろに「?xx=xxx&xx=xxx」のようなパラメータがつきます。

掲示板などのプログラムを作る時に、このパラメータが非常に重要な役割を果たします。PHPでは、このパラメータを取得するのに「$_GET」変数を利用して値を得ることができます。

例えば、以下のようなプログラムを書いて動かしてみましょう。これは、URLパラメータ「data」の値を表示するというプログラムです。

file:test.php

<?php
$data = $_GET["data"];              # (1)URLパラメータの data を取得する
$data = htmlspecialchars($data);    # (2)HTMLに変換する
echo $data;                         # (3)画面に表示する
?>

普通に「http://localhost/test.php」にアクセスしても何も表示されないでしょう。そこで、WebブラウザのURL欄に「http://localhost/test.php?data=180」と入力してみましょう。すると、以下のように表示されるはずです。

http://aoikujira.com/demo/hakkaku/rc/20080814_180.png

つまり、「?data=xxx」で「xxx」部分を変更することで、表示する値を変更することができるのです。

URLパラメータで足し算

それでは、URLパラメータで足し算をして、結果を表示させてみようと思います。

file:tasizan.php

<?php
$a = intval($_GET["a"]);
$b = intval($_GET["b"]);
$c = $a + $b;
echo "足し算:$a + $b = $c";
?>

以下は、「?a=30&b=150」というパラメータをつけて表示してみたところです。どうでしょうか。URLパラメータから得られた値を使って足し算を行い、その結果を表示しています。

http://aoikujira.com/demo/hakkaku/rc/20080814_tasizan.png

このプログラムのポイントは、次の点です。

  • URLパラメータは、$_GET["変数名"] で取得できる
  • 文字列の中に "$変数名"を書くと内容が展開される
  • URLパラメータで得られた値は変換してから出力する

1番目の点は先ほど見ました。

2番目の点ですが、文字列の中に "$a + $b" などと書くと、それが「30 + 150」のように内容が展開されていたのに気づいたでしょうか。これはとても便利です。

そして、3番目の点ですが、基本的にURLパラメータというのは、誰でも書き換えることができるということを覚えておきましょう。ですので、URLパラメータから取得した値を、そのまま表示したり、データベースに格納したいするのはセキュリティの危険があります。

そこで、値を正数化する intval() や、文字列をHTMLに変換する htmlspecialchars() などの関数を利用して安全なデータに変換してから出力します。

ファイルの入出力

次に、掲示板のデータを保存するためのファイル処理の方法についてみていきます。まずは、ファイルに何かしらデータを出力してみます。PHP 5以上では、ファイルへ値を書きだす「file_put_contents()」という関数を利用することができます。この関数を利用すると非常に手軽にファイルへ値を書きだすことができます。

<?php
$filename = "test.txt";
$data     = "abc";
file_put_contents($filename, $data); # 一気にファイルへデータを書き込み
?>

PHP4 しか使えない環境(格安のレンタルサーバーなど)の場合、PHP 4 しか使えないことがあります。そんな時は、fopen() や fwrite() といった、ファイル操作の関数を利用します。そのためか、XAMPPには、PHP4 と PHP5 を簡単に入れ替える仕組みが用意されています。

<?php
$filename = "test.txt";
$data     = "def";
$fh = fopen($filename, "w"); # ファイルを開く
if (!$fh) { echo "FILE OPEN ERROR!"; exit; }
fwrite($fh, $data);          # ファイルへデータを書き込み
?>

逆に、ファイルからデータを読み込むには、file_get_contents() を利用します。この関数は、PHP4.3以上なら使うことができます。

<?php
$filename = "test.txt";
#
$indata = file_get_contents($filename); # 一気にファイルの内容を読む
$indata = htmlspecialchars($indata);    # HTML化する
echo $indata;                           # 画面に表示する
?>

掲示板らしきものの制作

URLパラメータの取得と、ファイルの入出力が分かれば、簡単な掲示板くらいは作れそうですね。さっそく作ってみましょう。

まずは、URLパラメータに「data=xxx」のような値が渡されたら、ファイルにデータを追記するというプログラムを作ってみます。URLパラメータに「data」がセットされているかどうかを調べるには、isset() という命令を使って調べることができます。

以下は、isset() を使って、URLパラメータで data に値が設定されていたら画面に表示するという例です。

file:test.php

<?php
if (isset($_GET["data"])) {
    $data = htmlspecialchars($_GET["data"]);
} else {
    $data = "empty";
}
echo $data;
?>

ためしに、test.php にアクセスすると「empty」が表示され、「test.php?data=30」にアクセスしてみると、30が表示されます。

http://aoikujira.com/demo/hakkaku/rc/20080814_30.png

ここでは、「if」構文が出てきました。PHPでの if 文は、次のように使います。これは、Java/JavaScript や C言語と同じように使うことができます。

if (条件) {
    条件が正しい時の処理
}
else {
    条件が正しくない時の処理
}

次に、先ほど作ったプログラムを改良して、data が設定されていたら、ファイルに保存するようにしてみます。

file:test.php

<?php
$filename = "test.txt";

# ファイルが存在するなら読み込む
if (file_exists($filename)) {
    $data = file_get_contents($filename);
} else {
    $data = "";
}

# ファイルへ保存する
if (isset($_GET["data"])) {
    # 値を追加する
    $tmp = $_GET["data"];
    $data = $data."\n".$tmp;
    # 保存
    $fh = fopen($filename, "w");
    if (!$fh) { echo "FILE OPEN ERROR!"; exit; }
    fwrite($fh, $data);
}

# 画面に表示する
echo "<pre>";
$data = htmlspecialchars($data);
echo $data;
?>

ちょっと長くなりましたが、まずは、動かして動作を確かめてみましょう。Webブラウザから「test.php」にアクセスしてみると、「test.txt」にある内容が読み込まれて画面に表示されます。

そして、「test.php?data=30」にアクセスすると、test.txt の末尾に、30 が書き込まれます。続いて「test.php?data=xxxx」とすると、test.txt の末尾に、xxxx が書き込まれます。

http://aoikujira.com/demo/hakkaku/rc/20080814_savefile.png

新しい命令として「file_exists($filename)」が出てきました。これは、ファイルが存在するかどうかを調べる関数です。ここでは、すでに、ファイル「test.txt」があれば、内容を読み込み、なければ初期値を設定するようにしています。

掲示板の作成~入力フォームをつける

もうだいぶ掲示板ぽくなりましたが、書き込みを実行するたびに、URLパラメータを設定するというのはナンセンスです。そこで入力フォームをつけてみます。

入力フォームを作るときには、HTML の <form> タグを記述します。以下のように書くと、「data=xxx」というURLパラメータで test.php にアクセスするフォームを作ることができます。


<form action="test.php">
  <input type="text" name="data" />
  <input type="submit" value="書く"/>

</form>

このHTMLを、先ほどのプログラムの冒頭に挿入することで、入力フォームを作ることができます。

http://aoikujira.com/demo/hakkaku/rc/20080814_form.png

ただし、ヘッダに文字コードを指定しないと、日本語「書く」という部分が文字化けしてしまうかもしれません。念のため、HTMLのヘッダに meta タグで文字コードの指定を挿入しておきましょう。

以上で、一番簡単な掲示板の完成です。(ここでは、Windows のメモ帳でプログラムを書いたことを気にして、文字コードを SHIFT_JIS にしています。)

file:test.php

<html><head>
<!-- 文字コードの指定 -->

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
</head>
<body>
<!-- 入力フォーム -->
<form action="test.php">
  <input type="text" name="data" />

  <input type="submit" value="書く"/>
</form>
<?php
$filename = "test.txt";

# ファイルが存在するなら読み込む
if (file_exists($filename)) {
    $data = file_get_contents($filename);
} else {
    $data = "";
}

# ファイルへ保存する
if (isset($_GET["data"])) {
    # 値を追加する
    $tmp = $_GET["data"];
    $data = $data."\n".$tmp;
    # 保存
    $fh = fopen($filename, "w");
    if (!$fh) { echo "FILE OPEN ERROR!"; exit; }
    fwrite($fh, $data);
}

# 画面に表示する
echo "<pre>";
$data = htmlspecialchars($data);
echo $data;
?>

まとめ

以上、最も簡単な掲示板を作ってみました。特に、URLパラメータの取得方法や、ファイルへの入出力の方法を中心に解説しました。次回、データベースを使うことで、もう少し普通の掲示板を作ってみます。お楽しみに。

Series Navigation掲示板を作ってみよう(2)»

このサイトについて

八角研究所
株式会社八角研究所のWEBサイトですよー。 いろんなものを創り出すことのできる環境をコツコツ構築中。 いったい、いつになったらできるのか。 この技術情報サイトもそのための活動の一環のつもり。

執筆者紹介

クジラ飛行机

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。

TrackBack URL :