projectTask
task1 サーバーサイドアプリケーションの作成
task1-1 データベーステーブルprojectに格納された値の観測
task1-1-1 テーブルprojectに格納された値を取得するためのクラスの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/project/projectManager.javaを開く
2.以下のコードを記述
package jp.ac.oit.igakilab.tctr.project;
import java.util.List;
public class projectManager {
String id;
String name;
String owner;
String overview;
String state;
List<String> memberId;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getOwner() {
return owner;
}
public void setOwner(String owner) {
this.owner = owner;
}
public List<String> getMemberId() {
return memberId;
}
public void setMemberId(String memberId) {
this.memberId.add(memberId);
}
public String getOverview() {
return overview;
}
public void setOverview(String overview) {
this.overview = overview;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
}
}
task1-1-2 テーブルProjectと接続するためのDB汎用クラスの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/db/ProjectDatabaseCreator.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.project.projectManager;
public class ProjectDatabaseCreator {
SqlSessionFactory factory = DBUtility.getSqlSessionFactory();
List<projectManager> selectList = new ArrayList<>();
public List<projectManager> projectListen(String mapper){
try (SqlSession session = factory.openSession()){
selectList = session.selectList(mapper);
}
return selectList;
}
}
task1-1-3 実際にDBのデータを取得する部分とSQLの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/project/projectListener.javaを開く
2.以下のコードを記述
package jp.ac.oit.igakilab.tctr.project;
import java.util.List;
import jp.ac.oit.igakilab.tctr.db.ProjectDatabaseCreator;
public class projectListener {
ProjectDatabaseCreator pdc = new ProjectDatabaseCreator();
public List<projectManager> projectListen(){
return pdc.projectListen("listenProject");
}
public static void main(String[] args){
}
}
3.プロジェクト内のresources/mapper/projectMapper.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="listenProject" resultType="jp.ac.oit.igakilab.tctr.project.projectManager">
SELECT * FROM project;
</select>
</mapper>
task1-1-4 実行
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/project/projectListener.javaを開く
2.以下の部分を
public static void main(String[] args){
}
以下のように書き換え
public static void main(String[] args){
projectListener pl = new projectListener();
for(projectManager pm:pl.projectListen()){
System.out.println("ID:"+pm.getId());
System.out.println("Name:"+pm.getName());
System.out.println("Owner:"+pm.getOwner());
System.out.println("Overview:"+pm.getOverview());
System.out.println("State:"+pm.getState());
}
｝
3.src/jp.ac.oit.igakilab.tctr/project/projectListener.javaを右クリック'実行'→'javaアプリケーションを実行'をクリックしコンソールに以下の結果が出力されたら成功
ID:iqlFDW
Name:実験2
Owner:次郎
Overview:概要ですよ
State:null
ID:QP9LLA
Name:実験1
Owner:太郎
Overview:概要ですよ
State:null
task1-2 テーブルProjectへの値の追加
task1-2-1 値を追加するための汎用DBメソッドの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/db/ProjectDatabaseCreator.javaを開く
2.以下のコードをProjectDatabaseCreator.javaのクラス内に追加
public void projectInsert(String mapper,projectManager pm){
try (SqlSession session = factory.openSession()){
session.insert(mapper,pm);
session.commit();
}
}
task1-2-2 実際にDBのデータを追加する部分とSQLの作成
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/project/projectCreator.javaを開く
2.以下のコードを記述
package jp.ac.oit.igakilab.tctr.project;
import org.apache.commons.lang3.RandomStringUtils;
import jp.ac.oit.igakilab.tctr.db.ProjectDatabaseCreator;
public class projectCreator {
projectManager pm = new projectManager();
ProjectDatabaseCreator pdc = new ProjectDatabaseCreator();
public void projectCreate(String name,String owner,String overview){
pm.setName(name);
pm.setId(RandomStringUtils.randomAlphabetic(1)+RandomStringUtils.randomAlphanumeric(5));
pm.setOwner(owner);
pm.setOverview(overview);
pdc.projectInsert("createProject", pm);
pdc.projectInsert("overviewInsert",pm);
}
public static void main(String[] args){
}
}
3.プロジェクト内のresources/mapper/projectMapper.xmlを開く
4.mapperタグ内にのXML文章を追加
<insert id="createProject">
INSERT INTO
project(id,name,owner)
VALUES
(#{id},#{name},#{owner});
</insert>
<update id="overviewInsert">
UPDATE project
SET overview = #{overview}
WHERE id = #{id}
</update>
task1-2-3 実行
1.プロジェクト内のsrc/jp.ac.oit.igakilab.tctr/project/projectCreator.javaを開く
2.以下の部分を
public static void main(String[] args){
}
以下のように書き換え
public static void main(String[] args){
projectCreator pc = new projectCreator();
pc.projectCreate("実験ですよ","太郎","概要ですよ");
}
3.src/jp.ac.oit.igakilab.tctr/project/projectCreator.javaを右クリック'実行'→'javaアプリケーションを実行'をクリック src/jp.ac.oit.igakilab.tctr/project/projectListener.javaを右クリック'実行'→'javaアプリケーションを実行'をクリック 追加した値（上のクリエイト文では実験がタイトルでtestですが内容）が表示されたら成功 任意の値をデータベースに追加することができるようになった
ここまでのタスクでサーバーサイドのjavaアプリケーション部分が完成した、次のタスクでは実際にユーザー側にこのアプリケーションを利用してもらうためのフロントエンドアプリケーションの作成を行っていく。
task2 フロントエンドアプリケーションの作成
task2-1 project.htmlの作成
task2-1-1 project.htmlの記述
1.プロジェクト内のWebContent/project.htmlを開く
2.以下の文章を記述
<!DOCTYPE html>
<title>project</title>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/project/project.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 project.htmlのbody要素の内容記述
1.プロジェクト内のWebContent/project.htmlを開く
2.bodyタグ内部に以下の文章を追記
<form id="projectSelect">
<H1>プロジェクト選択</H1>
<ul>
<li id="projectName"><label for="ProjectName">Name:</label><select
id="selectProjectName"></select></li>
<li id="projectOwner"><label id="ownerLabel"></label></li>
<li id="projectOverview"><label id="overviewLabel">概要:</label></li>
<li><input type="button" value="選択" onclick="projectJump()"></li>
</ul>
</form>
<form id="projectCreate">
<H1>新規プロジェクト登録</H1>
<ul>
<li id="insertProjectName"><label for="ProjectName">Name:</label><input
type="text" id="insertName" /></li>
<li><label for="selectOwner">Owner:</label><select
id="selectOwner"></select></li>
<li><label for="insertOverview">概要:</label> <textarea
id="insertOverview"></textarea> <input type="button" value="登録"
onclick="projectCreate()"></li>
</ul>
</form>
<H1>プロジェクト一覧</H1>
<ul id ="projectList">
</ul>
3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。
4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/project.html」のアドレスを入力し、新規登録フォームのみが表示されたwebページが表示されたら成功
現段階では、javscriptが作成されていないためサーバーサイドへのアクセスができていないハリボテのページである。
task 2-2 javascriptの記述
task2-2-1 dwr.xmlの編集 今回の実験では行わない
注:task2-2-1はコンフリクト回避のために今回は編集済みであるため行う必要はない
1.プロジェクト内のWebContent/dwr.xmlを開く
2.allowタグ内部に以下の文章を追記
<!-- project -->
<create creator="new" javascript="projectCreator">
<param name="class" value="jp.ac.oit.igakilab.tctr.projectList.projectCreator" />
</create>
<create creator="new" javascript="projectListener">
<param name="class" value="jp.ac.oit.igakilab.tctr.projectList.projectListener" />
</create>
自分でdwrを用いたwebアプリケーションの開発を行う場合この設定を忘れていると詰まるので注意
task2-2-2 dwrで登録されたプログラムの読み込み
1.プロジェクト内のWebContent/project.htmlを開く
2.headに以下の文章を追記
<script type="text/javascript" src="dwr/interface/projectCreator.js"></script>
<script type="text/javascript" src="dwr/interface/projectListener.js"></script>
task2-2-3 javascriptの編集
1.プロジェクト内のWebContent/js/project/projectCreator.jsを開く
2.以下の文章を記述
function projectCreate(){
var name = $('#insertName').val();
var overview = $('#insertOverview').val();
var owner = $('#selectOwner').val();
projectCreator.projectCreate(name,owner,overview,{
callback:function(){
location.reload();
}
});
}
$(function() {
$("#selectProjectName").change(function(){
var id = $("#selectProjectName option:selected").val();
projectSelect(id);
});
});
1.プロジェクト内のWebContent/js/project/projectListener.jsを開く
2.以下の文章を記述
/*projectListを生成するためのjavaScript*/
projectListener.projectListen({
callback:function(data){
for(var i of data){
$('#selectProjectName').append('<option value="'+i.id+'">'+i.name+'</option>')
$('#projectList').append('<li><div class="projectName">プロジェクト名:'+i.name+'</div><div class ="projectState">状態:'+i.state+'</div><input type="button" value="状態変更" onclick= projectChange("'+i.id+'")></li>')
}
}
});
projectListener.ownerCandidate({
callback:function(own){
for(var j of own){
$('#selectOwner').append('<option value="'+j.owner+'">'+j.owner+'</option>')
}
}
});
task2-2-4 javascriptの読み込みと実行
1.プロジェクト内のWebContent/project.htmlを開く
2.headに以下の文章を追記
<script type="text/javascript" src="js/project/projectCreator.js"></script>
<script type="text/javascript" src="js/project/projectListener.js"></script>
3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。
4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/project.html」のアドレスを入力し、projectリストと追加フォームが表示されていたら成功
task3 htmlページの体裁を整える
3-1 背景色の設定
1.プロジェクト直下のWebContent/CSS/project/project.cssを開く 2.以下の内容を記述
body{
background: #f0f0f0;
}
3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。
4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/project.html」のアドレスを入力し、背景色が変更されていたら成功。 カラーコードを変更することで好きな色を背景色に設定できる
3-2 リスト要素の・を消す
1.プロジェクト直下のWebContent/CSS/project/project.cssを開く 2.以下の内容を追記
ul{
list-style: none;
}
3.プロジェクト直下のbuild.xmlを右クリックし、実行→Antビルドの2つあるうちの上の方をクリックし、コンソールにエラーが出ていないか確認する。
4.サーバーを起動するコマンドを実行し、完了したらブラウザに「localhost:8080/Developers_Experimental_Program/project.html」のアドレスを入力し、きれいなリストの表示ができたら成功
_