Javaで掲示板を作ろう＃１
こんにちは、すずきです。
びっくりするぐらい投稿できていませんでした😭
年始に決めた目標普通に無視していて自分でも笑いました。
さて、2月から鈴木はエンジニアになるための勉強を開始しました。
現状の進捗
・ITパスポート取得💯
・参考書「スッキリわかるJava入門」完
・参考書「Spring解体新書」完
やること
・基本情報取得
・ポートフォリオ作成
上記です。
目処として、今年の9月から案件に入れるように、勉強をしております。
そのため8月から営業をしていただくので、それまでに今基礎知識を習得したため、ポートフォリオの作成と基本情報の取得をしていくというのが、今の流れです。
そこで今回は、ポートフォリオを作るための準備を調べながらこちらのnoteに記載していこうと思います。
ちなみに連載企画として記事をアップしていきます。
進捗報告記事だと思ってくれればと！
掲示板をJavaで作ろう
まず今回は、掲示板を作っていこうと思います。
そもそも参考書以外で何かを計画して作ったことがない。
なので何から手をつけたらいいかわからないので、一旦やることをまとめる
掲示板に必要なもの
・タイムライン（投稿順に一覧表示）
・入力フォーム（名前・内容・送信ボタン）
・投稿（日付・名前・内容・削除ボタン）
・サーバー
開発環境
Eclipse:4.30.0.20231201-1200
java:17
springboot:3.2.5 (多分)
データベース:H2
開発環境書き方合ってるかわからないですが、多分合ってる。
作成開始
まずは、参考書「Spring解体新書」でhelloworldをlocalhostで表示するところまでを表示するものを掲示板に変えて表示してみます。
bulletinboard.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>掲示板</title>
</head>
<body>
<H1>掲示板</H1>
</body>
</html>BulletinboardController.java
package com.example.demo.bulletinboard;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class BulletinboardController {
@GetMapping("/bulletinboard")
public String getBulletinboard() {
//bulletinboard.htmlに画面遷移
return "bulletinboard";
}
}
実行
表示できました。
次は、入力フォームを表示したいと思います。
入力フォーム
bulletinboard.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>掲示板</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<h1>掲示板</h1>
<form method="post" action="/bulletinboard">
<div>
<label for="name">名前:</label>
<input type="text" id="name" name="name"/>
</div>
<div>
<label for="content">内容:</label>
<textarea id="content" name="content" class="content"></textarea>
</div>
<div>
<input type="submit" value="送信"/>
</div>
</form>
</body>
</html>
BulletinboardController.java
package com.example.demo.bulletinboard;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class BulletinboardController {
@GetMapping("/bulletinboard")
public String getBulletinboard() {
//bulletinboard.htmlに画面遷移
return "bulletinboard";
}
@PostMapping("/bulletinboard")
public String postRequest(@RequestParam("name")String name,
@RequestParam("content")String content, Model model) {
//画面から受けとった文字列をModelに登録
model.addAttribute("name", name);
model.addAttribute("content", content);
//response.htmlに遷移
return "hello/response";
}
}
response.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>タイムライン</title>
</head>
<body>
<h1>タイムライン</h1>
<!--受け取った文字を表示する-->
<p th:text="${name}"></p>
<p th:text="${content}"></p>
</body>
</html>style.css
body {
font-family: Arial, sans-serif;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 1em;
background: #f9f9f9;
border-radius: 5px;
}
div {
margin-bottom: 1em;
}
label {
margin-bottom: .5em;
color: #333333;
display: block;
}
input[type="text"],
textarea {
border: 1px solid #CCCCCC;
padding: .5em;
font-size: 1em;
width: 100%;
box-sizing: border-box;
}
input[type="submit"] {
padding: 0.7em;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.content {
height: 150px; /* 内容フォームの高さを設定 */
}
実行
入力フォームは表示することができました。
これで送信を押すと
こういった表示がされます。
ただ掲示板ページ遷移されなくてもいいかなとは思っているので、修正しながらやっていきたいと思います。
今日はここまで！寝ます！
この記事が気に入ったらサポートをしてみませんか？