PHP初心者がいきなり掲示板を作ってみた。その3-1（PHP編）

こんにちは!!ライターのTomomiです。

「PHP初心者がいきなり掲示板を作ってみた。」シリーズのその1（HTML編）→その2（CSS編）と記事を書かせていただきました。（生意気にもシリーズ化してみました^^;）

PHP初心者がいきなり掲示板を作ってみた。その1（HTML編）

2016-07-03

PHP初心者がいきなり掲示板を作ってみた。その2（CSS編）

2016-07-06

今回はいよいよPHP編ということで、未知の世界に足を踏み入れたいと思います。

HTMLとCSSは見た目を変えてくれるもの、つまり主役的な存在で、PHPは裏方（目には見えない部分で主役を支える）的なイメージではないでしょうか。

掲示板を作ると意気込んだものの、PHPで何をどうしたら掲示板の役割を果すのか今の私にはわかりません・・・

ということで、前々回もお世話になったこちらのページをまたまた参考にさせていただこうと思います。

もくじ

HTMLファイルをPHPファイルに変更する
とりあえずPHPコードを追加してみる
CSVファイルを作り保存する
- CSVファイルの作り方
- CSVファイルの保存先について
PHPファイルをブラウザに表示させる
- URL入力欄に「localhost/フォルダ名/ファイル名.php」を入力する
掲示板の動作を確認してみる
- 入力フォームに記入し投稿してみる
CSVファイルを確認してみる
あとがき

HTMLファイルをPHPファイルに変更する

まず始めに、前回（CSS編）、前々回（HTML編）と使ってきたHTMLファイルをPHPファイルに変更するところからやっていきたいと思います。

前回まではHTMLとCSSのみを使用して掲示板の見た目の部分のみを作ってきたのでファイルはHTMLファイル（「.html」）でよかったのですが、今回から、今まで作ってきたHTMLコードの中にPHPコードを記述していくためファイル名を「.php」に直す必要があります。

方法は、HTMLファイルの名前の拡張子（「.html」ドット以降の部分）を「.php」に変更するだけです。

まずファイル上で右クリックし、「名前の変更」をクリックします。

そして、上の画像のように拡張子部分を「.php」にすれば変更は完了です。

拡張子を変えてEnterキーを押すとこのような画面が出ますが、テキストエディタにコードを記入してからきちんと上書き保存されているかを確認してから「はい」をクリックします。

もし、ファイルがデスクトップ上で保存している場合もファイルを変更する方法は同じです。

とりあえずPHPコードを追加してみる

ファイル名の変更も終わったところで、いきなりですがPHPコードを追加してみようと思います。

というのも、一旦コードを完成させてしまいPHPが掲示板上ではどんな働きをしてくれているのかを見てから一個ずつ細かい部分を勉強していった方が、「なるほど～」と思えるような気がしたからです。

PHPコードを追加して完成形のPHPファイルは以下のようになりました。（1~12、32~38、40行目の黄色くハイライトされた部分です。）

<?php
$fp = fopen('data.csv', 'a+b');
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    fputcsv($fp, [$_POST['name'], $_POST['comment']]);
    rewind($fp);
}
while ($row = fgetcsv($fp)) {
    $rows[] = $row;
}
fclose($fp);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="keijiban.css" rel="stylesheet" type="text/css" media="all">
<title>掲示板</title>
</head>
<body>
<h1>掲示板</h1>
<section>
    <h2>新規投稿</h2>
    <form action="" method="post">
        <div class="name"><span class="label">お名前:</span><input type="text" name="name" value=""></div>
        <div class="honbun"><span class="label">本文:</span><textarea name="comment" cols="30" rows="3" maxlength="80" wrap="hard" placeholder="80字以内で入力してください。"></textarea></div>
        <input type="submit" value="投稿">
    </form>
</section>
<section class="toukou">
    <h2>投稿一覧</h2>
 <?php if (!empty($rows)): ?>
    <ul>
<?php foreach ($rows as $row): ?>
        <li><?=$row[1]?> (<?=$row[0]?>)</li>
<?php endforeach; ?>
    </ul>
<?php else: ?>
    <p>投稿はまだありません</p>
<?php endif; ?>
</section>
</body>
</html>

HTMLコードだけの時とは違い、少し長いコードになりましたね(´；ω；｀)

とりあえず細かいことを考えるのは後回しにして、先に、このPHPコードを追加したことによって掲示板がどんな動作をするようになったのかを見ていきたいのですが、その前にもう一つだけファイルを作っておいた方が良さそうなので、そのファイルを作ってから動作を確認していきたいと思います。

CSVファイルを作り保存する

これからPHPを扱っていくわけですが、その前にCSVファイルというものを作っておく必要があったので先にCSVファイルを作っていきたいと思います。

CSVファイルの作り方

ファイルの作り方は、今までHTMLファイル、CSSファイルを作ってきた時と同じです。

今使っているテキストエディタ（メモ帳やTeraPadなどコードを記入しているもの）のから新規作成でファイルを作ります。

そして、ファイル名を変更するのですがこの時拡張子を「.csv」にすればCSVファイルの完成です。

（今回私はファイル名を「data.csv」としました。）

CSVファイルの保存先について

CSVファイルの保存先ですが、PHPファイル（変更前はHTMLファイル）、CSSファイルを保存している場所と同じ所に保存します。

詳しくはその1（HTML編）に記載しているので参照してください。

CSVファイルについての説明はPHPについてもう少し細かく見て行く時に合わせて書いていきたいと思います。

PHPファイルをブラウザに表示させる

準備も整ったところで、PHPを追加したことで掲示板がどのように動作するようになったのか確認してみようと思った矢先、素人ならではの壁にぶち当たりました。

それは

「PHPファイルをブラウザに表示させる方法がわからない・・・汗」

です。

HTMLファイルの時は

HTMLファイルを右クリック→プログラムから開く→Google Chrome
HTMLファイルをブラウザのタブに直接ドラッグ&ドロップ

このどちらかの方法で簡単にブラウザ表示できたのにPHPファイルはそうはいきませんでした・・・。

PHPはサーバーを使うため、HTMLのような簡単な表示の仕方はできないのかなと、今はやんわりと解釈しておきます。

お恥ずかしい話です^^;

URL入力欄に「localhost/フォルダ名/ファイル名.php」を入力する

PHPをブラウザで表示させるにはブラウザのURL入力欄に何やら入力して表示させるようです。

今の環境は、有料サーバーではなく無料の仮想サーバー「XAMPP」を使用しているので、PHPを表示させる方法は

「localhost/フォルダ名/ファイル名.php」

をブラウザのURL入力欄に記入し表示させます。

ちなみにここでのフォルダ名はPHPファイルが入っているフォルダの名前です。

私の場合は

「localhost/webnote/keijiban.php」

と入力し、無事表示されました。

表示に成功すると、作っておいた掲示板が表示されるかと思います。

掲示板の動作を確認してみる

PHPファイルを表示させるだけで一苦労してしまいました^^;

ではいよいよPHPが掲示板上でどんな働きをしてくれているのか、まずは目で見て確認してみたいと思います。

入力フォームに記入し投稿してみる

「お名前」と「本文」の入力欄に何でも良いので記入して「投稿」ボタンを押してみます。

「投稿はまだありません」の文字が入力した文に変わりました!!

HTML、CSSしか書いていなかった時はこの「投稿」ボタンを押しても何の変化もありませんでしたが、PHPを加える事によってユーザーの入力内容を画面に表示出来るようになりました。

CSVファイルを確認してみる

CSVファイルの存在をすっかり忘れていました。

掲示板への投稿が終わった後、CSVファイルには何か変化があったのか気になったので確認してみたいと思います。

作っておいたCSVファイルをテキストエディタで開いてみると、掲示板に書き込んだ内容がCSVファイルに書き込まれていました!!

ユーザーが書き込んだ内容を保存してくれるのがCSVファイルなのかな??

とりあえず今はそんな予測を立てておきます。

あとがき

PHPってすごい!!

少しコードを加えただけで一気に掲示板が出来上がってしまいました。

PHPがどういうことをしてくれるものなのか、少しイメージ出来た気がします。

次回はPHPコードを1つずつ詳しく見ていきたいと思います。

PHPについて超初心者なので、初歩的な説明も多くなってしまいがちですがどうかお許し下さい(・.・;)

また次回もがんばりま～す!!

この記事を書いた人
最新の記事

Tomomi

今までWebの世界には全く無縁だった超アナログ人間。無謀にもWebの世界で生きていくことを決意。ハムスターと柴犬好きの文系女子です。最終的にはプログラミングが一人で出来るレベルになることが目標です。がんばりま～す!!

最新記事 by Tomomi (全て見る)