プログラミングの勉強をするには、何かを作るのが一番だと考えてます。今までもそのように勉強してきましたが、最近いまいち作ろうと思えるものがなくてあまりコードを書いてませんでした。
あまり期間を空けすぎると今までやってきたことも忘れてしまうので、使う使わないは別としてとにかく動くものを作ろうということで、簡単な掲示板を作ってみました。
完成したものはこちらになります。(※現在閉鎖させています。)
使用言語はPHPです。
名前、投稿内容、削除用パスワードはそれぞれ入力必須にしており、長さに制限も設けてます。
また、名前の後ろには判別用にハッシュ値をくっつけてます。
あと、見ていただいたらわかるようにWordPress上で動作するようにしてあります。
そこまでたいしたものでもないので1日で作れるかと思いましたが、いろいろトラブルがあって結局2日かかりました^^;
ちなみに、苦労したのは以下の3点です。
- 削除ボタンの実装
- WordPress上で動作させる方法
- 本番環境のデータベースの設定
WordPress上でWebアプリケーションを動作させるのは初めての試みだったので、非常に苦労はしましたがいい勉強になりました。
今回はこの掲示板の作り方と、Wordpress上で動作させるまでの手順を数回に分けてお話していきたいと思います。
PHPの基礎はわかったけど、実際Webアプリケーションってどうやって作るの?
という方向けの内容となります。
作成する掲示板の仕組み
まずは、ローカル環境で掲示板の作成を行います。
今回作成する掲示板の仕組み自体は非常にシンプルです。
- データベースの内容を掲示板の内容として表示する
- 投稿フォームの内容をデータベースに書き込む
- 削除ボタンがクリックされたらデータベースからその内容を削除する
これらの動作を実装するだけで掲示板になります。
Webアプリケーションはデータベースとのやり取りが基本となりますので、データベースの基本的な扱い方を学ぶという意味でも掲示板を作るというのはいい方法だと思います。
では、それぞれについて解説していきます。
掲示板の内容を表示する方法
まずは基本となる掲示板の内容を表示する方法です。
動作としては、データベースに格納されたデータを全て書き出すというシンプルなものになります。
そのためまずはデータベースに接続します。
<?php
try{
$pdo = new PDO("mysql:host="接続先DB"; dbname="DB名"; charset=utf8","ユーザ名","パスワード");
}
catch(PDOException $e){
echo "Error:{$e->getMessage()}";
die();
}
?>
これでデータベースへと接続できました。
今回掲示板に表示させる要素は、
- 投稿番号
- 名前
- ハッシュ値
- 内容
- 日時
- 本文
この6つになります。
全てデータベースに格納されていますので、これらの要素をデータベース内からSELECT文を使って全て取り出します。
1つのテーブル内に全て格納されているものとします。
SELECT * FROM `テーブル名`
このようなSELECT文を使います。
このSELECT文をPHPで書きます。
<?php
$select = "SELECT * FROM `テーブル名`"
$stmt = $pdo->query($select);
?>
この2行を実行することで、指定したデータベース上のテーブルから要素を全て取り出して、変数$stmtへと格納します。
その後、$stmtからforeachを使ってそれぞれの要素を取り出します。
<?php
foreach($stmt as $row){
echo $row["id"];
echo $row["name"];
//以下略
}
?>
これで$row配列にそれぞれの要素が格納されて、その要素を表示します。
掲示板として内容を表示させる方法
先程のままでは要素がそのまま表示されるだけで、掲示板としては見た目が悪いです。
そのため、HTMLタグを使って体裁を整えます。
<?php foreach($stmt as $row): ?>
<p>No.<?php echo $row["id"]; ?></p>
<p>名前:<?php echo $row["username"]; ?></p>
<!-- 以下略 -->
<?php endforeach ?>
このように書けばそれっぽく書けますし、それぞれの要素にclass名を付けてCSSで装飾することもできます。
特殊文字のエスケープ処理
このままだと問題があります。
<などの文字は、特殊文字と呼ばれるものです。
ここでは詳しく説明はしませんが、簡単に言うと悪意あるコードを埋め込めてしまうため、それを防ぐためです。
<script> alert("悪意あるコード") </script>
これはJavascriptの書き方ですが、これをそのままデータベースに書き込んで、それを読み出して表示させると、このコードが実行されてしまいます。これはポップアップを表示させるだけのものですが、これが悪意あるコードですと、大変なことになります。
そのため、表示させる際に特殊文字はエスケープ文字へと変換して表示させます。
変換方法は、
<?php
htmlspecialchars("変換対象", ENT_QUOTES, "UTF-8");
?>
こう書くことで行えます。
ただ、これを毎回書くと長くなってしまうので、関数で書きます。
<?php
function htmlchar($str){
return htmlspecialchars($str, ENT_QUOTES, "UTF-8");
}
echo htmlchar($row["username"]);
?>
出力時このように書くことで、エスケープ文字へと変換されます。
改行を反映させる方法
特殊文字をエスケープ文字へと変換しましたが、このままでは改行も改行として出力されなくなってしまいます。
そのため、改行を反映させたい部分にはnl2brという関数を使い、改行タグを自動挿入させます。
<?php
function htmlchar($str){
return htmlspecialchars($str, ENT_QUOTES, "UTF-8");
}
echo nl2br(htmlchar($row["comment"]));
?>
これで改行も問題なく出力されます。
最後に
今回は、3つの仕組みのうちの1つ目「データベースの内容を掲示板の内容として表示する」についてお話してきました。
次回は投稿フォームを作り、そこからデータベースへと書き込む方法についての説明をしていく予定です。
シリーズのように続きますので、最後までお付き合いいただけますと幸いです。
※2つ目の「投稿フォームの内容をデータベースに書き込む」についての記事はこちらとなります。