大学生のモノづくり記録

Webページ作成（主にHTML、CSS、PHP、jQuery）、ArduinoやRaspberry Piを使って物作りの勉強した記録を載せたり/趣味のことを書いていきたいなと思います。（クオリティはかなり低いです）

ド素人が作る自分のポートフォリオサイト作成　第３回目　～野球掲示板的なやつを作成編～

　今回は、ド素人が作る自分のポートフォリオサイト作成　第３回目　～野球掲示板的なやつを作成編～で行っていこうと思います。

　自分は、野球が好きなので、個人的に野球について話し合えるようなサイトがあるのですが、ここはあったらいいなーという定理で作成を行っていこうと思います。

　プログラムを作成する前に自分は、昔から、巨人が大好きで（具体的に言うと１番坂本、２番松本、３番小笠原、４番ラミレス）の時の打線から好きです。今も昔も個人的に阿部慎之助選手と矢野謙次選手が好きです。

 

では、まずソースプログラム掲示していきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>野球雑談サイト</title>
    <link rel="stylesheet" href="base.css">
  </head>
  <body>
  <header>
    <ul>
      <li><a href="name.html">Home</a></li>
      <li><a href="game.html">ゲームのサイト</a></li>
      <li><a href="baseball.php">自分の好きな野球ぼやき</a></li>
      <li><a href="prog.html">頑張りたいプログラミング</a></li>
    </ul>
    <h1>野球雑談掲示板</h1>
  </header> 

  <div class="baseball">
  <form action="baseball.php" method="POST">

日にち:<input type="date" name="day" value=""><br>

チーム:<input type="text" name="team" value="内容を記入して下さい"><br>

内容:<input type="text" name="input" value="誰が対象なの？"><br>

<input type="submit" value="登録">

</form>
<?php
$day=0;$team=0;$input=0;
if(isset($_POST)){
$day=$_POST['day'];
$team=$_POST['team'];
$input=$_POST['input'];

}
$fp = fopen("baseball.txt", "a");
fwrite($fp,$day . "\t" . $team."\t" . $input."\t"."\n");
fclose($fp);

$fp = fopen("baseball.txt", "r");
$bord_array = ;
while ($line = fgets($fp)) {
$temp = explode("\t", $line);
$temp_array = [
    "day" => $temp[0],
    "team" => $temp[1],
    "input"=>$temp[2],
    ];
$bord_array = $temp_array;
$re = implode( '|', $temp_array );
print($re."<br/>");

}
?>
  </div>
  <div class="game"></div>
    <!-- <p>自分の好きなゲームについてまとめた記事がコチラ</p> -->
    <form action="game.html">
      <input type="submit" value="ゲーム雑談">
    </form>
    <div class="baseball"></div>
    <!-- <p>自分の好きな野球チームについての記事がコチラ</p> -->
    <form action="baseball.php">
      <input type="submit" value="野球雑談">
    </form>
    <div class="prog">
    <!-- <p>・・・
    </p>   -->
    <form action="prog.html">
      <input type="submit" value="プログラムの記事">
    </form>
<a href="http://mychallengo.hatenablog.com/"><input type="submit" value="個人プログ"></a>
    </div>
  </body>
</html>

CSSのプログラムです。

header{
  background: slategrey;
}
ul li  {
  display: inline-block;
  padding: 26px 10px 20px 10px;
}

h1{
  text-align: center;
}

body{
  color: rgb(38, 32, 41);
  font-family: Verdana,Arial, Helvetica, sans-serif;
  /* margin-top:0px ;
  margin-bottom:0px ;
  margin-right:0px ;
  margin-left:0px ; */
  margin: 0;
  background-color: rgb(161, 158, 158);
} 

  background-color: slategrey;
  text-align: center;
}


実行画面

f:id:kyozinnlove55:20200316005453p:plain

 

実際に実行してみると具体的な内容を真ん中に表示するようにしていきましたが、今画像をここに貼り思いましたが字が小さいですね。。。

f:id:kyozinnlove55:20200316005938p:plain

字を大きくしてきました。

　また、実際に今回の掲示板の仕組みとしては、ド素人が作る掲示板作成の内容を使用してみました。

 

今後は、ゲーム紹介サイト、プログラムサイトの作成を行っていこうと思います。

ありがとうございました。

字を