提出用の課題として、SNSっぽいWebアプリケーションを作成してみましょう。
プロジェクト名: MySNS
型: maven
Javaバージョン: 8
グループ: jp.mysns
パッケージ: jp.mysns
依存関係: HyperSQL Database・Spring Web・Thymeleaf
プロジェクトを作成したら pom.xml のバージョンを変更する。
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.2.1.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>jp.mysns</groupId> <artifactId>MySNS</artifactId> <version>0.0.1-SNAPSHOT</version> <name>MySNS</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties>
プロジェクト作成時にSpring data JPAの依存関係を追加し忘れていたので、pom/xml に以下の内容を追加する。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>org.hsqldb</groupId> <artifactId>hsqldb</artifactId> <scope>runtime</scope> </dependency>
application.properties
spring.datasource.url=jdbc:hsqldb:file:./db/mysns spring.datasource.username=SA spring.datasource.password= spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver spring.jpa.hibernate.ddl-auto=update
以下の手順で作っていきましょう！
- トップページに「ユーザー登録」のリンクを作る
- 「ユーザー登録」のリンクをクリックしたらユーザー登録ページに移動する
- ユーザー登録ページでユーザー登録（ログイン名と表示名）できるようにする
- トップページに「ユーザー一覧」のリンクを作る
- 「ユーザー一覧」のリンクをクリックしたらユーザー一覧ページに移動する
- ユーザー一覧ページには登録済みユーザーの一覧（表示名）を表示する
- ユーザー一覧ページで表示名をクリックするとそのユーザーのページを表示する
- ユーザーページで投稿できるようにする
- ユーザーページにはそのユーザーの投稿を一覧表示する
- トップページには全ユーザーの投稿を一覧表示する
ユーザーのページでそのユーザーの投稿を一覧表示するには、投稿をユーザーIDで検索する必要がある。投稿を検索する場合は、PostRepositoryにその機能を追加する必要がある。
package jp.mysns;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
public interface PostRepository extends JpaRepository<Post, Long> {
List<Post> findAllByUserId(long id);
}
User.java
package jp.mysns;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
@Entity
public class User {
@Id
@GeneratedValue
@Column
private long id;
@Column
private String loginId;
@Column
private String name;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getLoginId() {
return loginId;
}
public void setLoginId(String loginId) {
this.loginId = loginId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Post.java
package jp.mysns;
import java.util.Date;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.ManyToOne;
import javax.validation.constraints.NotEmpty;
@Entity
public class Post {
@Id
@GeneratedValue
@Column
private long id;
@Column
private Date time;
@Column
@NotEmpty
private String text;
@ManyToOne
private User user;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public Date getTime() {
return time;
}
public void setTime(Date time) {
this.time = time;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
}
CSS
CSSファイルは src/main/resources の下の static フォルダに作成する。
HTMLテンプレートでは、headタグ内にCSSファイルへの参照を追加する。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>MySNS</title> <link rel="stylesheet" href="/style.css"> </head> <body>
配点
| ページ | 内容 | 配点 | ||
|---|---|---|---|---|
| トップページ URL: / |
学籍番号・名前・ユーザー登録のリンク・ユーザー一覧のリンクを表示する | 5 | ||
| ユーザー登録のリンクをクリックするとユーザー登録ページを表示する | 5 | |||
| ユーザー一覧のリンクをクリックするとユーザー一覧ページを表示する | 5 | |||
| 全ユーザーの投稿を一覧表示する。日時・投稿者の表示名・本文を表示する。 | 5 | |||
| 投稿した日時の表示を「yy年mm月dd日hh:mm」にする。 | 5 | |||
| CSSを使って文字色や背景色、ボーダーなどを変更してページを装飾する。 | 5 | |||
| CSSを使って投稿日時の文字を小さくする。 | 5 | |||
| ユーザー登録ページ URL: /register |
ログイン名と表示名を入力できるフォームと登録ボタンを表示する | 5 | ||
| 登録ボタンを押すとユーザーが登録できる | 5 | |||
| CSSを使って文字色や背景色、ボーダーなどを変更してページを装飾する。 | 5 | |||
| ユーザー一覧ページ URL: /user/list |
登録済みユーザーを表示名で一覧表示する | 5 | ||
| 表示名が各ユーザーページへのリンクになっている | 5 | |||
| 表示名のリンクをクリックするとそのユーザーページに移動する | 5 | |||
| ユーザーページ URL: /user/{id} |
ユーザーの表示名と投稿フォームと送信ボタンを表示する | 5 | ||
| 投稿フォームにテキストを入力すると投稿がデータベースに保存される | 5 | |||
| そのユーザーの投稿を一覧表示する。日時と本文を表示する。 | 5 | |||
| 投稿した日時の表示を「yy年mm月dd日hh:mm」にする。 | 5 | |||
| CSSを使って投稿日時の文字を小さくする。 | 5 | |||
| CSSを使って文字色や背景色、ボーダーなどを変更してページを装飾する。 | 5 | |||
| CSSを使って投稿を入力するtextareaのサイズを大きくする。 | 5 | |||
| JavaScriptを使って入力中の投稿の文字数をtextareaの下に表示する。 | 5 | |||
| ユーザーの画像 | ユーザー登録ページでユーザーの画像のURLも登録できるようにする | 5 | ||
| ユーザー登録ページで画像URLを入力したらプレビューを表示する。 | 5 | |||
| トップページで名前の左にユーザーの画像を表示する。 | 5 | |||
| ユーザー一覧ページで名前の左にユーザーの画像を表示する。 | 5 | |||
| ユーザーページで名前の左にユーザーの画像を表示する。 | 5 | |||
| 投稿のレイアウト | トップページの投稿のレイアウトを以下のようにする。
|
5 | ||
ユーザーページの投稿のレイアウトを以下のようにする。
|
5 |
提出用ファイルの作成方法
プロジェクト「MySNS」を右クリックし、[実行]-[maven install]を選択する。
コンソールに「BUILD SUCCESS」と表示されれば作成に成功。
target フォルダの下に MySNS-0.0.1-SNAPSHOT.jar ファイルが作成される。
提出ファイルの動作確認方法
- EclipseでMySNSを動かしていたら終了させる。
- コマンドプロンプトを起動する。
- コマンドプロンプトで「cd 」と入力する。
- Eclipseのtargetをドラッグしてコマンドプロンプト上でドロップする。
- Enterでtargetフォルダに移動する。
- コマンドプロンプトで「java -jar MySNS-0.0.1-SNAPSHOT.jar」と入力してEnterする。
- コマンドプロンプトにSpringのロゴが表示され、jp.MySnsApplication : Started MySnsApplication in x.xxx second のメッセージがあれば起動に成功した。
- localhost:8080にアクセスして提出用アプリが動作することを確認する。
- できているはずの箇所がきちんと動いているか再確認する。
提出方法
提出フォルダの「システム開発実習」に学籍番号のフォルダを作成し、その中に MySNS-0.0.1-SNAPSHOT.jar をコピーする。
提出期限
2023年1月11日