memberTask

task1 サーバーサイドアプリケーションの作成

task1-1　テーブルmemberに格納された値の観測

task1-1-1　テーブルmemberに格納された値を取得するためのクラスの作成

1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/member/memberManager.javaを開く

2.以下のコードを記述

package jp.ac.oit.igakilab.tctr.member;

public class memberManager {
private String member_id;
private String name;
private String org;
private String position;
private int age;
public String getId() {
return member_id;
}
public void setId(String id) {
this.member_id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getOrg() {
return org;
}
public void setOrg(String org) {
this.org = org;
}
public String getPosition() {
return position;
}
public void setPosition(String position) {
this.position = position;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}

task1-1-2　テーブルmemberと接続するためのDB汎用クラスの作成

1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/db/MemberDatabaseCreator.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.member.memberManager;

public class MemberDatabaseCreator {
SqlSessionFactory factory = DBUtility.getSqlSessionFactory();
List<memberManager> memberList = new ArrayList<>();

public List<memberManager> memberListen(String mapper,memberManager mm){
try (SqlSession session = factory.openSession()){
memberList = session.selectList(mapper,mm);
}
return memberList;
}
}

task1-1-3　実際にDBのデータを取得する部分とSQLの作成

1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/member/memberListener.javaを開く

2.以下のコードを記述

package jp.ac.oit.igakilab.tctr.member;

import java.util.List;

import jp.ac.oit.igakilab.tctr.db.MemberDatabaseCreator;

public class memberListener {
MemberDatabaseCreator mdc = new MemberDatabaseCreator();
memberManager mm = new memberManager();
public List<memberManager> memberListen(){
return mdc.memberListen("memberListen",mm);
}
public static void main(String[] args){

}
}

3.プロジェクト内のresources/mapper/memberMapper.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="memberListen" resultType="jp.ac.oit.igakilab.tctr.member.memberManager">
SELECT * FROM member;
</select>

</mapper>

task1-1-4 実行

1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/member/memberListener.javaを開く

2.以下の部分を

public static void main(String[] args){

}

以下のように書き換え

    public static void main(String[] args){
        memberListener pl = new memberListener();
        for(memberManager pm:pl.memberListen()){
            System.out.println("ID:"+pm.getId());
            System.out.println("Name:"+pm.getName());
            System.out.println("Org:"+pm.getOrg());
            System.out.println("Position:"+pm.getPosition());
            System.out.println("Age:"+pm.getAge());
        }
    }

3.src/jp.ac.oit.igakilab.tctr/member/memberListener.javaを右クリック'実行'→'javaアプリケーションを実行'をクリックしコンソールに以下の結果が出力されたら成功

成功時の内容

task1-2　テーブルmemberへの値の追加

task1-2-1 値を追加するための汎用DBメソッドの作成

1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/db/memberDatabaseCreator.javaを開く

2.以下のコードをmemberDatabaseCreatorに追加

public void memberInsert(String mapper,memberManager mm){
try (SqlSession session = factory.openSession()){
session.insert(mapper,mm);
session.commit();
}
}

task1-2-2　実際にDBのデータを追加する部分とSQLの作成

1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/member/memberCreator.javaを開く

2.以下のコードを記述

package jp.ac.oit.igakilab.tctr.member;

import java.util.ArrayList;
import java.util.List;

import org.apache.commons.lang3.RandomStringUtils;

import jp.ac.oit.igakilab.tctr.db.MemberDatabaseCreator;

public class memberCreator {
MemberDatabaseCreator mdc = new MemberDatabaseCreator();
List<memberManager> mml = new ArrayList<>();
memberManager mm = new memberManager();
public void memberInsert(String name,String org,String position,int age){
mm.setName(name);
mm.setOrg(org);
mm.setPosition(position);
mm.setAge(age);
mm.setId(RandomStringUtils.randomAlphabetic(1)+RandomStringUtils.randomAlphanumeric(5));
mdc.memberInsert("memberInsert", mm);
}

public static void main(String[] args){
}
}

3.プロジェクト内のresources/mapper/memberMapper.xmlを開く

4.mapper内にのXML文章を追加

<insert id="memberInsert">
INSERT INTO
member(member_id,name,org,age,position)
VALUES
(#{member_id},#{name},#{org},#{age},#{position});
</insert>

task1-2-3 実行

1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/member/memberCreator.javaを開く

2.以下の部分を

public static void main(String[] args){

}

以下のように書き換え

public static void main(String[] args){
memberCreator mc = new memberCreator();
mc.memberInsert("秋元", "igklab", "4回生", 22);
}

3.src/jp.ac.oit.igakilab.tctr/member/memberCreator.javaを右クリック'実行'→'javaアプリケーションを実行'をクリック→src/jp.ac.oit.igakilab.tctr/member/memberCreator.javaを右クリック'実行'→'javaアプリケーションを実行'をクリック 追加した値（上のクリエイト文では実験がタイトルでtestですが内容）が表示されたら成功 任意の値を追加することができるようになった

ここまでのタスクでサーバーサイドのjavaアプリケーション部分が完成した、次のタスクでは実際にユーザー側にこのアプリケーションを利用してもらうためのフロントエンドアプリケーションの作成を行っていく。

task2 フロントエンドアプリケーションの作成

task2-1 member.htmlの作成

task2-1-1 member.htmlの記述

1.プロジェクト内のWebContent/member.htmlを開く

2.以下の文章を記述

<!DOCTYPE html>
<title>member</title>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/member/member.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>

<body>

</body>

task2-1-2 member.htmlのbody要素の内容記述

1.プロジェクト内のWebContent/member.htmlを開く

2.bodyタグ内部に以下の文章を追記

<ul id="member">
</ul>

<form>
<H1>新しいメンバーを登録</H1>
<ul>
<li><label>name:</label><input type="text" id="insertName"></li>
<li><label>所属チーム:</label><input type="text" id="insertTeam"></li>
<li><label>年齢:</label><select id ="age"></select></li>
<li><label>役職:</label><select id="insertPosition">
<option value="リーダー">リーダー</option>
<option value="メンバー" selected>メンバー</option>
</select></li>
<li><input type="button" value="登録" onclick=memberInsert()></li>
</ul>

</form>

3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。

4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/member.html」のアドレスを入力し、新規登録フォームのみが表示されたwebページが表示されたら成功

現段階では、javscriptが作成されていないためサーバーサイドへのアクセスができていないハリボテのページである。

task 2-2 javascriptの記述

task2-2-1 dwr.xmlの編集 今回は編集しない

注:このタスクはコンフリクト回避のために今回は編集済みであるため行う必要はない

1.プロジェクト内のWebContent/member.htmlを開く

2.allowタグ内部に以下の文章を追記

<!-- member -->
<create creator="new" javascript = "memberCreator">
<param name="class" value="jp.ac.oit.igakilab.tctr.member.memberCreator" />
</create>
<create creator="new" javascript = "memberListener">
<param name="class" value="jp.ac.oit.igakilab.tctr.member.memberListener" />
</create>

自分でdwrを用いたwebアプリケーションの開発を行う場合この設定を忘れていると詰まるので注意

task2-2-2 dwrで登録されたプログラムの読み込み

1.プロジェクト内のWebContent/member.htmlを開く

2.headに以下の文章を追記

<script type="text/javascript" src="dwr/interface/memberCreator.js"></script>
<script type="text/javascript" src="dwr/interface/memberListener.js"></script>

task2-2-3 javascriptの編集

1.プロジェクト内のWebContent/js/member/memberCreator.jsを開く

2.以下の文章を記述

function memberInsert(){
var name = $('#insertName').val();
var org = $('#insertTeam').val();
var position = $('#insertPosition').val();
var age = $('#age').val();
memberCreator.memberInsert(name,org,position,age,{
callback:function(){
location.reload();
}
});
}

1.プロジェクト内のWebContent/js/member/memberListener.jsを開く

2.以下の文章を記述

memberListener.memberListen({
callback: function(data){
for(i of data){
$("#member").append('<li><ul><li>名前:'+i.name+'</li><li>所属:'+i.org+'</li><li>役職:'+i.position+'</li></ul></li><br>')
}
}
});

$(function() {
for(var i = 0;i<150;i++){
if(i == 20){
$("#age").append('<option value = "'+ i +'" selected>'+i+'</option>');
}else{
$("#age").append('<option value = "'+ i +'">'+i+'</option>');
}
}
});

task2-2-4 javascriptの読み込み

1.プロジェクト内のWebContent/member.htmlを開く

2.headに以下の文章を追記

<script type="text/javascript" src="js/member/memberCreator.js"></script>
<script type="text/javascript" src="js/member/memberListener.js"></script>

3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。

4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/member.html」のアドレスを入力し、memberリストと追加フォームが表示されていたら成功

task3 htmlページの体裁を整える

3-1 背景色の設定

1.プロジェクト直下のWebContent/CSS/member/member.cssを開く 2.以下の内容を記述

body{
background: #f0f0f0;
}

3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。

4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/member.html」のアドレスを入力し、背景色が変更されていたら成功。 カラーコードを変更することで好きな色を背景色に設定できる

3-2 リスト要素の・を消す

1.プロジェクト直下のWebContent/CSS/member/member.cssを開く 2.以下の内容を追記

ul{
list-style: none;
}

3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。

4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/member.html」のアドレスを入力し、きれいなリストの表示ができたら成功

_