第2回/ToDo管理の履歴(No.5)

第2回

ToDo管理Webアプリケーション†

↑

要件定義†

ある組織では，週例ミーティングで各自が１週間の活動についてToDo/Doneに基づく進捗報告を行っている．

しかしながら，現状では自然言語で記述されており，管理が人それぞれバラバラであるため全体の見渡しも悪い．

この現状を，Webアプリケーションを用いたシステム化で改善したい．

要求
- 各自が自分のToDoを登録・管理．メンバーで共有できるようにする
- 管理者はメンバー（id，名前）をシステムに登録する
- 各ユーザは自分のToDoを新規登録，更新，完了(done)する
  - ユーザは他人のToDoを閲覧(R)できるが，作成(C)・更新(U)・完了(D or U?)できるのは，そのユーザのみ
- システムは個人，あるいは全ユーザについて，ToDoと直近1週間のDoneを一覧する
  - フィルタ：自分だけ，全員
  - ソート：更新日時，ユーザ名
基本機能
- ユーザのCRUD　
- ToDoのCRUD　
- ユーザ管理画面（管理者用）
- ToDo一覧・管理画面（ユーザごと．UIDをURLのパスパラメータで渡して生成）
エンティティ
- ユーザ： UID, 名前
- ToDo: TID, title, description, createdAt, updatedAt, doneAt，UID

発展機能
- ログイン
- 締め切り管理・アラート
- レポート・各種メトリクスの計算
  - 平均ToDo処理時間，週当たりのToDo個数，．．．
- モチベーション維持の仕組み（いいね！など）

↑

【実装・第1弾】名前を登録するアプリを作ってみよう†

↑

準備†

spring initializrで下記4つをDependenciesで選択．Artifactはtodo
- Spring Boot DevTools
- Lombok
- Thymleaf
- Spring Data JPA

build.gradleへの追加
- implementation 'org.springframework.boot:spring-boot-starter-validation'
- runtimeOnly 'mysql:mysql-connector-java'
- war （前回参照）

DBの準備

データベース作成
- 名前：todo
- 照合：utf8_general_ci
- ユーザ/パスワードの作成: todo/todo+

application.properties　への記載

# MySQLデータベース接続設定
spring.datasource.url=jdbc:mysql://localhost:3306/todo?serverTimezone=JST
spring.datasource.username=todo
spring.datasource.password=todo+

# Spring-JPA: DBのテーブルを自動作成してくれる機能
# create: 新規作成， update: なければ新規作成， create-drop: 新規作成し終了時に削除
spring.jpa.hibernate.ddl-auto=update

↑

⓪データモデリングをしよう†

扱うデータの属性を決める
- UID: [A-z0-9_-]+ かぶらないこと
- Name: 任意の文字列

↑

①ビューを作ろう†

index.html 【resources\static】

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <title>ToDoアプリ　ユーザ管理</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        <a href="inputform.html">ユーザを追加する</a><br>
        <a href="diplayuser.html">ユーザ情報を表示する</a><br>
        <a href="/users">ユーザ一覧を表示する</a>
    </body>
</html>

inputform.html 【resources\static】

入力フォーム：ユーザID, 名前

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <title>Input Form</title>
    </head>
    <body>
        <form action="/user" method="post">
            <input type="text" name="uid">
            <input type="text" name="name">
            <input type=submit value="submit" name=submit>
        </form>
    </body>
</html>

success.html 【resources\templates】

成功ページ（登録したユーザ情報を表示）

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>User</title>
</head>
<body>
  <p th:text="'ID: ' + ${uid} + '  Name: ' + ${name} + ' Created at: ' + ${createdAt}"></p>
</body>
</html>

userinfo.html 【resources\templates】

指定したuidの情報を表示

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>uid検索結果</title>
    <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
</head>

<body>
    <h1>uid検索結果</h1>
    <table>
        <tr th:each="p: ${ulist}">
            <td> [[${p.uid}]] </td>
            <td> [[${p.name}]] </td>
            <td> [[${p.createdAt}]] </td>
        </tr>
    </table>
</body>