簡単な掲示板

#はじめに
どんどん発信していかないと成長しないと思い、完成度が低くてもどんどん公開していくことにしました。

#現状

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436016/b37043e8-b00e-3d52-cfed-a5ee97c33889.png)

[html css php javascript]　の基礎を学んだのでとりあえず掲示板を作ってみました。入力値に対してエラーチェック等をできるようにしたかったのですが、現時点では本文が空白の時にアラート、投稿時に内容確認としてコンファームを呼び出すようにしました。

# 開発環境
   - vagrant
   - virtualbox  
   - CentOS6  

#今後
mysqlの勉強をしながらログイン機能をつけられるようにしたいです。

https://github.com/Masaaki61081/MyPortfolio

#コード

```html.php
<?php
//変数
$name = "";
$title = "";
$sentence = "";
$errorCount = array();
// 日付
date_default_timezone_set('Asia/Tokyo');
$today = date("Y/m/d H:i:s");
// 入力された値のチェック
if(!isset($_POST["name"]) || !is_string($_POST["name"])){
  $errorCount['nameERROR'] = '1';
  $name = '不正な名前';
}elseif($_POST["name"] === ''){
  $name = "名無し";
}else{
  $name = $_POST["name"];
}
if(!isset($_POST["title"]) || !is_string($_POST["title"])){
  $errorCount['titleERROR'] = '1';
  $title = '不正なtitle';
}elseif($_POST["title"] === ''){
  $title = "無題";
}else{
  $title = $_POST["title"];
}
if (!isset($_POST["sentence"]) || !is_string($_POST["sentence"])){
  $errorCount['sentenceERROR'] = '1';
  $sentence = null;
}elseif ($_POST["sentence"] === ''){
  $errorCount['sentenceERROR'] = '2';
  $sentence ="";
}else {
  $sentence = $_POST["sentence"];
}
//投稿

 if(isset($_POST["SUBMIT"]) ){
   $fp = fopen("data.txt", "a");
   fwrite($fp, $name."\t".$title."\t".$sentence."\t".$today."\n");
   header("Location:http://192.168.33.10:8000/index.php");
   exit;
 }
$fp = fopen("data.txt","r");
$dataArr = array();
while( $res = fgets($fp)){
  $tmp = explode("\t",$res);
  $arr = array(
    "name" => $tmp[0],
    "title" => $tmp[1],
    "sentence" => $tmp[2],
    "date"=> $tmp[3]
  );
  $dataArr[] = $arr;
}
 ?>

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>postform</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="postform">
      <h2>投稿フォーム</h2>
      <form class="form" action="index.php"  onsubmit="return check()" method="post">
        <h3>名前</h3>
        <input type="text" name="name" id="name" value="">
        <h3>タイトル</h3>
        <input type="text" name="title" id="title" value="">
        <h3>本文</h3>
        <textarea class="honbun" name="sentence" id="body" rows="8" cols="80"></textarea>
        <br>
        <input class="input" type="submit" name="SUBMIT" value="投稿">
        <input type="reset" value="リセット">

      </form>
    </div>
    <div class="result">
      <h2>投稿</h2>

      <dl>
      <?php foreach($dataArr as $data): ?>
        <li>
          <div class="posts">
          <?php echo $data["name"];?>:<?php echo $data["title"]; ?>:<?php echo $data["date"]; ?>
          <br>
          <?php echo $data["sentence"]; ?>
          </div>
        </li>
      <?php endforeach; ?>
     </dl>
    </div>

  <script>
    function check(){
      let name = document.getElementById('name').value;
      let title = document.getElementById('title').value;
      let body = document.getElementById('body').value;
    	if(document.getElementById('body').value==""){
    	alert("本文を入力してください");
    		return false;
    	}else{
        return confirm("名前:"+name+"\n"+"メールアドレス:"+title+"\n"+"内容:"+body+"\n"+"以上の内容で投稿しますか？");
    	}
    }
  </script>
  </body>
</html>
```
#レスポンシブに対応

![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436016/599107f7-5b95-7c24-ee2c-685d39c1a116.png)