プログラミング学習
当サイト使用テーマ・サーバー
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)
\ SWELL【WordPressテーマ】 /
![](https://www10.a8.net/0.gif?a8mat=3TEWTB+BHSA7M+50+5SMI35)
\ レンタルサーバー【ConoHa WING】 /
美容・脱毛
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/1.webp)
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/2.webp)
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/3.webp)
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/4.webp)
ホームページ制作
![](https://aqua-programdiary.com/wp-content/uploads/2024/03/hp-pr.webp)
この記事では、簡単な掲示板サイトを作りながらPHPの勉強をしていきます。できる限り分かりやすく説明していきますが、分かりにくい箇所があれば気軽にコメントしてください。
まだPHPの環境設定ができていない方は↓を参考にしてみてください。
複雑なコードやコーディング量が多いと難易度が上がってしまうため、今回はHTMLとPHPのコードのみで掲示板サイトを作成しています。そのため出来上がりの感じがシンプルすぎるものになっていますが、続編でCSSやJavaScriptも使用して装飾していきたいと思っています。
XAMPPコントロールパネルを起動して、ApacheとMySQLを起動しましょう。
ApacheとMySQLを起動したらAdminをクリックしてphpMyAdminを開きましょう。
↓の画面が表示されれば大丈夫です!
エクスプローラーを開いて、Windows(C:) → xampp → htdocs と進み、htdocsフォルダの中に今回作成するbbsフォルダを作りましょう。
bbsフォルダを作成したらVSCodeを開き、ファイル → フォルダーを開く でbbsフォルダを開きましょう。
まずは、HTML部分を作っていきます。PHPのコードを書くにはファイルの拡張子をphpにする必要がありますが、まだHTMLのコードしか書かないので拡張子はhtmlにしておきましょう。
htmlファイルにしておくことでコーディング中の予測変換など補佐機能がありコードが打ちやすいです。
↓のHTMLコードを入力しましょう。
<section>掲示板の投稿全体を表す中に<article>個々の投稿を入れ、ユーザーが書き込みを行うと<article>がどんどん増えていきます。
phpMyAdminを開いてデータベースの作成をしていきます。
ここからPHPのコーディングをしていくのでindex.htmlファイルをindex.phpファイルに変更しましょう。
index.htmlファイルの上でマウスを右クリックすると↓の写真のように名前を変更…が出てきます。
以上で全工程が終わり、完成しました。