【PHP】掲示板サイトを作りながら学ぶPHP学習

この記事では、簡単な掲示板サイトを作りながらPHPの勉強をしていきます。できる限り分かりやすく説明していきますが、分かりにくい箇所があれば気軽にコメントしてください。

まだPHPの環境設定ができていない方は↓を参考にしてみてください。

あわせて読みたい

【PHP】PHPの環境構築(XAMPP) この記事では、PHPの環境構築としてXAMPPのダウンロード及びインストール、インストール後に発生しやすい不具合の対処方法について解説します。 XAMPPのダウンロード ま...

作成する掲示板サイトの完成形

複雑なコードやコーディング量が多いと難易度が上がってしまうため、今回はHTMLとPHPのコードのみで掲示板サイトを作成しています。そのため出来上がりの感じがシンプルすぎるものになっていますが、続編でCSSやJavaScriptも使用して装飾していきたいと思っています。

掲示板サイト作成前の準備

ApacheとMySQLを起動する

XAMPPコントロールパネルを起動して、ApacheとMySQLを起動しましょう。

phpMyAdminを開く

ApacheとMySQLを起動したらAdminをクリックしてphpMyAdminを開きましょう。

↓の画面が表示されれば大丈夫です！

作成する掲示板サイトのフォルダを作る

エクスプローラーを開いて、Windows(C:) → xampp → htdocs と進み、htdocsフォルダの中に今回作成するbbsフォルダを作りましょう。

作ったフォルダをVSCodeで開く

bbsフォルダを作成したらVSCodeを開き、ファイル → フォルダーを開く でbbsフォルダを開きましょう。

index.htmlファイルを作る

まずは、HTML部分を作っていきます。PHPのコードを書くにはファイルの拡張子をphpにする必要がありますが、まだHTMLのコードしか書かないので拡張子はhtmlにしておきましょう。

htmlファイルにしておくことでコーディング中の予測変換など補佐機能がありコードが打ちやすいです。

HTMLをコーディング

↓のHTMLコードを入力しましょう。

<section>掲示板の投稿全体を表す中に<article>個々の投稿を入れ、ユーザーが書き込みを行うと<article>がどんどん増えていきます。

MySQLでデータベースを作成する

phpMyAdminを開いてデータベースの作成をしていきます。

データベースに接続する

ここからPHPのコーディングをしていくのでindex.htmlファイルをindex.phpファイルに変更しましょう。

index.htmlファイルの上でマウスを右クリックすると↓の写真のように名前を変更…が出てきます。

データベースへの書き込み

データベースからデータを取得する

取得したデータをブラウザー上に表示する

不正対策(特殊文字をEntityに変換する)

データベース接続を閉じる

以上で全工程が終わり、完成しました。