PHPでアプリを作成してみた【掲示板】

## XAMPP 環境構築

公式サイト：[XAMPP](https://www.apachefriends.org/jp/index.html)

①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を利用~](https://www.youtube.com/watch?v=3QxtIrakwKk&t=1843s)
[PHP開発環境「XAMPP Mac版」プログラミングスクールが教える最も簡単な方法](https://www.youtube.com/watch?v=yc81-25UknM)