# todoTask
task1 サーバーサイドアプリケーションの作成
task1-1 データベーステーブルtodoに格納された値の観測
task1-1-1 テーブルtodoに格納された値を取得するためのクラスの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/todo/todoManager.javaを開く 2.以下のコードを記述
package jp.ac.oit.igakilab.tctr.todoList;
public class todoManager {
private String title;
private String date;
private String id;
private String overview;
private int status;
private int importance;
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public int getImportance() {
return importance;
}
public void setImportance(int importance) {
this.importance = importance;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getOverview() {
return overview;
}
public void setOverview(String overview) {
this.overview = overview;
}
}
task1-1-2 テーブルtodoと接続するためのDB汎用クラスの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/db/TodoDatabaseCreator.javaを開く
2.以下のコードを記述
package jp.ac.oit.igakilab.tctr.db;
import java.util.ArrayList;
import java.util.List;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import jp.ac.oit.igakilab.tctr.todoList.todoManager;
public class TodoDatabaseCreator {
SqlSessionFactory factory = DBUtility.getSqlSessionFactory();
public List<todoManager> todoListen(){
List <todoManager> todoItem = new ArrayList<>();
try (SqlSession session = factory.openSession()){
todoItem = session.selectList("todoListen");
}
return todoItem;
}
}
task1-1-3 実際にDBのデータを取得する部分とSQLの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/todo/todoListener.javaを開く
2.以下のコードを記述
package jp.ac.oit.igakilab.tctr.todoList;
import java.util.List;
import jp.ac.oit.igakilab.tctr.db.TodoDatabaseCreator;
public class todoListener {
public List<todoManager> todoListen(){
TodoDatabaseCreator mdb = new TodoDatabaseCreator();
return mdb.todoListen();
}
public static void main(String[] args){
}
}
3.プロジェクト内のresources/mapper/todoMapper.xmlを開く
4.以下のXML文章を記述
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="igakilab.mybatis.product">
<select id="todoListen" resultType="jp.ac.oit.igakilab.tctr.todoList.todoManager">
select * from todolist;
</select>
</mapper>
task1-1-4 実行
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/todo/todoListener.javaを開く
2.以下の部分を
public static void main(String[] args){
}
以下のように書き換え
public static void main(String[] args){
todoListener tdm = new todoListener();
for(todoManager t:tdm.todoListen()){
System.out.println(t.getTitle());
System.out.println(t.getId());
System.out.println(t.getDate());
System.out.println(t.getOverview());
}
｝
3.src/jp.ac.oit.igakilab.tctr/todo/todoListener.javaを右クリック'実行'→'javaアプリケーションを実行'をクリックしコンソールに以下の結果が出力されたら成功
タスク4
Cj1uFX
2018年01月23日15時18分
task4の内容です
タスク5
doHigH
2018年01月23日15時18分
task5の内容です
タスク2
wghcW9
2018年01月23日15時18分
task2の内容です
タスク3
yDbYJ7
2018年01月23日15時18分
task3の内容です
タスク1
ZWxLIW
2018年01月23日15時18分
task1の内容です
task1-2 テーブルtodoへの値の追加
task1-2-1 値を追加するための汎用DBメソッドの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/db/TodoDatabaseCreator.javaを開く
2.以下のコードをTodotDatabaseCreatorに追加
public void todoInsert(String mapper,todoManager tm){
try (SqlSession session = factory.openSession()){
session.insert(mapper,tm);
session.commit();
}
}
task1-2-2 実際にDBのデータを追加する部分とSQLの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/todo/todoCreator.javaを開く
2.以下のコードを記述
package jp.ac.oit.igakilab.tctr.todoList;
import java.text.SimpleDateFormat;
import java.util.Date;
import org.apache.commons.lang3.RandomStringUtils;
import jp.ac.oit.igakilab.tctr.db.TodoDatabaseCreator;
public class todoCreator {
todoManager td = new todoManager();
TodoDatabaseCreator mdb = new TodoDatabaseCreator();
public void todoCreate(String title,String overview){
SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日HH時mm分");
td.setTitle(title);
td.setOverview(overview);
td.setDate(sdf.format(new Date()));
td.setId(RandomStringUtils.randomAlphabetic(1)+RandomStringUtils.randomAlphanumeric(5));
mdb.todoInsert("createTodo",td);
}
public static void main(String[] args){
}
}
3.プロジェクト内のresources/mapper/todoMapper.xmlを開く
4.mapperタグ内にのXML文章を追加
<select id="selectTodoListen" resultType="jp.ac.oit.igakilab.tctr.todoList.todoManager">
select * from todolist WHERE id = #{id};
</select>
task1-2-3 実行
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/todo/todoCreator.javaを開く
2.以下の部分を
public static void main(String[] args){
}
以下のように書き換え
public static void main(String[] args){
todoCreator tdm = new todoCreator();
tdm.todoCreate("実験","testです");
}
}
3.src/jp.ac.oit.igakilab.tctr/todo/todoCreator.javaを右クリック'実行'→'javaアプリケーションを実行'をクリック src/jp.ac.oit.igakilab.tctr/todo/todoListener.javaを右クリック'実行'→'javaアプリケーションを実行'をクリック 追加した値（上のクリエイト文では実験がタイトルでtestですが内容）が表示されたら成功 任意の値を追加することができるようになった
ここまでのタスクでサーバーサイドのjavaアプリケーション部分が完成した、次のタスクでは実際にユーザー側にこのアプリケーションを利用してもらうためのフロントエンドアプリケーションの作成を行っていく。
task2 フロントエンドアプリケーションの作成
task2-1 todo.htmlの作成
task2-1-1 todo.htmlの記述
1.プロジェクト内のWebContent/todo.htmlを開く
2.以下の文章を記述
<!DOCTYPE html>
<title>todo</title>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/todo/todo.css"
media="all">
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.serialize.js"></script>
<script type="text/javascript" src="dwr/interface/todoCreator.js"></script>
<script type="text/javascript" src="dwr/interface/todoListener.js"></script>
<script type="text/javascript" src="js/todo/todoListener.js"></script>
<script type="text/javascript" src="js/todo/garage.js"></script>
<script type="text/javascript" src="js/todo/todoCreator.js"></script>
<body>
</body>
task2-1-2 todo.htmlのbody要素の内容記述
1.プロジェクト内のWebContent/todo.htmlを開く
2.bodyタグ内部に以下の文章を追記
<ul id="menu">
<li>todo
<ul class="sub" id="todo">
</ul>
</li>
<li>doing
<ul class="sub" id="doing">
</ul>
</li>
<li>done
<ul class="sub" id="done">
</ul>
</li>
</ul>
<form >
<H1>新しいタスクを登録</H1>
<ul>
<li><label>title:</label><input type="text" id="insertTitle"></li>
<li><label>overview:</label> <textarea id="insertOverview"></textarea></li>
<li><input type="button" value="登録" onclick= todoInsert() ></li>
</ul>
</form>
3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。
4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/todo.html」のアドレスを入力し、新規登録フォームのみが表示されたwebページが表示されたら成功
現段階では、javscriptが作成されていないためサーバーサイドへのアクセスができていないハリボテのページである。
task 2-2 javascriptの記述
task2-2-1 dwr.xmlの編集 今回は編集しない
注:このタスクはコンフリクト回避のために今回は編集済みであるため行う必要はない
1.プロジェクト内のWebContent/todo.htmlを開く
2.allowタグ内部に以下の文章を追記
<!-- todo -->
<create creator="new" javascript="todoCreator">
<param name="class" value="jp.ac.oit.igakilab.tctr.todoList.todoCreator" />
</create>
<create creator="new" javascript="todoListener">
<param name="class" value="jp.ac.oit.igakilab.tctr.todoList.todoListener" />
</create>
自分でdwrを用いたwebアプリケーションの開発を行う場合この設定を忘れていると詰まるので注意
task2-2-2 dwrで登録されたプログラムの読み込み
1.プロジェクト内のWebContent/todo.htmlを開く
2.headに以下の文章を追記
<script type="text/javascript" src="dwr/interface/todoCreator.js"></script>
<script type="text/javascript" src="dwr/interface/todoListener.js"></script>
task2-2-3 javascriptの編集
1.プロジェクト内のWebContent/js/todo/todoCreator.jsを開く
2.以下の文章を記述
function todoInsert(){
var title = $('#insertTitle').val();
var overview = $('#insertOverview').val();
todoCreator.todoCreate(title,overview,{
callback:function(){
location.reload();
}
});
}
1.プロジェクト内のWebContent/js/todo/todoListener.jsを開く
2.以下の文章を記述
/*todoListを生成するためのjavaScript*/
todoListener.todoListen({
callback:function(data){
for(var i of data)
if(i.status == 1){
$('#todo').append('<li><a onclick = status("'+i.id+'") href="#">'+i.title+"/"+i.date+'</a><div>'+i.overview+'</div><div>重要度:'+i.importance+'</div><input type="button" value="+" onclick= importanceUp("'+i.id+'")><input type="button" value="-" onclick= importanceDown("'+i.id+'")></li>')
}else if(i.status == 2){
$('#doing').append('<li><a onclick = status("'+i.id+'") href="#">'+i.title+"/"+i.date+'</a><div>'+i.overview+'</div><div>重要度:'+i.importance+'</div><input type="button" value="+" onclick= importanceUp("'+i.id+'")><input type="button" value="-" onclick= importanceDown("'+i.id+'")></li>')
}else{
$('#done').append('<li><a href="#">'+i.title+"/"+i.date+'</a><div>'+i.overview+'</div></li>')
}
}
});
task2-2-4 javascriptの読み込みと実行
1.プロジェクト内のWebContent/todo.htmlを開く
2.headに以下の文章を追記
<script type="text/javascript" src="js/todo/todoListener.js"></script>
<script type="text/javascript" src="js/todo/todoCreator.js"></script>
3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。
4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/todo.html」のアドレスを入力し、todoリストと追加フォームが表示されていたら成功
task3 htmlページの体裁を整える
3-1 背景色の設定
1.プロジェクト直下のWebContent/CSS/todo/todo.cssを開く 2.以下の内容を記述
body{
background: #f0f0f0;
}
3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。
4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/todo.html」のアドレスを入力し、背景色が変更されていたら成功。 カラーコードを変更することで好きな色を背景色に設定できる
3-2 リスト要素の・を消す
1.プロジェクト直下のWebContent/CSS/todo/todo.cssを開く 2.以下の内容を追記
ul{
list-style: none;
}
3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。
4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/todo.html」のアドレスを入力し、きれいなリストの表示ができたら成功
_