XAMPP 環境構築
公式サイト：XAMPP
①Headerにある『ダウンロード』をクリックする。
②『Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません。』と表示されたので、Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択し、「開く」をクリック。
③インストールする。
スーパーグローバル変数
全てのスコープで使用できる組み込みの変数の事。
PHPの定義済みの変数の中には、『スーパーグローバル』というものがあり、スクリプト全体を通して全てのスコープで使用可能な変数の事。
htdocsにファイルを作成
作成したファイルをVScodeにドラッグ＆ドロップする
index.php
<?php
if(!empty ($_POST["submitButton"])){
echo $_POST["username"];
echo $_POST["comment"];
}
?>
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content="IE=edge">
<meta name=“viewport” content="width=device-width,initial-scale=1.0">
<title>2ちゃんねる風PHP掲示板</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">PHPで掲示板アプリ</h1>
<hr>
<div class="boardWrapper">
<section>
<article>
<div class="wrapper">
<div class="nameArea">
<span>名前</span>
<p class="username">Shincode</p>
<time>:2023/1/23</time>
</div>
<p class="comment">手書きのコメントです</p
</div>
</article>
</section>
<form class="formWrapper" method="POST">
<div>
<input type="submit" value="書き込む" name="submitButton">
<label for="">名前</label>
<input type="text" value="username">
</div>
<div>
<textarea class="commentTextArea" name="comment"></textarea>
</div>
</form>
</div>
</body>
</html>
style.css
body {
background-color: #c6daf1;
}
.title {
text-align: center;
font-size: 34px;
}
.boardWrapper {
/* background-color: #b3eeb3; */
background-color: #f3eded;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
border: 1px solid black;
margin-bottom: 20px;
}
section {
padding: 0px 10px;
}
section .username {
color: green !important;
font-weight: 700;
}
section .nameArea {
display: flex;
align-items: center;
margin-bottom: -14px;
}
section .comment {
margin-top: 0;
margin-left: 20px;
}
.success_message {
color: green;
padding-left: 10px;
}
.error_message {
color: red;
padding-left: 10px;
}
.formWrapper {
padding: 16px;
margin-left: 20px;
}
.commentTextArea {
margin-top: 10px;
width: 500px;
height: 90px;
}
Mysqlに接続
http://localhost/phpmyadmin に移動する
sample.php
<?php
$dbh = new PDO("mysql:host=localhost;dbname=test",$user,$pass);
?>
index.php
<?php
date_default_timezone_set("Asia/Tokyo");
$comment_array = array();
$error_messages = array();
$pdo = null;
$stmt = null;
//DB接続
try{
$pdo = new PDO('mysql:host=localhost;dbname=bbs_yt',"root","root");
}catch(PDOException $e){
echo $e->getMessage();
}
if(!empty ($_POST["submitButton"])){
//名前のチェック
if(empty ($_POST["username"])){
echo "名前を入力してください";
$error_messages["username"] = "名前を入力してください";
}
//コメントのチェック
if(empty ($_POST["comment"])){
echo "コメントを入力してください";
$error_messages["comment"] = "コメントを入力してください";
}
if(empty($error_messages)){
$postDate = date("Y-m-d H:i:s");
try{
$stmt-> $pdo->prepare("INSERT INTO `bbs-table`(`username`,`comment`,`postDate`)VALUES(:username,:comment,:postDate)");
$stmt-> $bindParam(':username',$_POST['username'],PDO::PARAM_STR);
$stmt-> $bindParam(':comment',$_POST["comment"],PDO::PARAM_STR);
$stmt-> $bindParam(':postDate',$postDate,PDO::PARAM_STR);
$stmt-> execute();
} catch (PDOException $e) {
echo $e->getMessage();
}
}
}
//DBからコメントデータを取得する
$sql="SELECT `id`, `username`, `comment`, `postDate` FROM `bbs_table`;";
$comment_array = $pdo->query($sql);
//DB接続を閉じる
$pdo=null;
?>
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content="IE=edge">
<meta name=“viewport” content="width=device-width,initial-scale=1.0">
<title>2ちゃんねる風PHP掲示板</title>
<link rel="stylesheet" href="style.css">
</head>
参考サイト
【PHP入門】2ちゃんねる風掲示板を作りながら学ぶPHP入門講座 ~XAMPPを利用~
PHP開発環境「XAMPP Mac版」プログラミングスクールが教える最も簡単な方法