Top > 修正と拡張

修正と拡張

ここにはゴルフスコア管理の修正や拡張を記録していく。ゴルフスコア管理のページでもよかったが、変更点を明確に記録するためにページを独立。

ゴルフスコア登録変更画面のコースのリストボックス化

まず登録変更画面のコースがID入力のテキストボックスになっている(これではお話にならない)ので、これをコース名称を選択できるリストボックスに変更する。コース名称はコースマスタテーブルから取得して、コースID順に表示させる。エンドユーザーからすれば名称順のがよいと後で気づいたが、再コンパイルが面倒なのであとでやることにする。 (^^;

CourseListクラスの作成

まずCourseテーブルからデータを取得するためのクラスを作成する。ここには単純にマスタデータをロードして1件ずつレコードを読み込むメソッドを実装する。もちろんゲッターとクローズも実装。

fileCourseList.java
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
/*
プログラム名:CourseList.java
作成者:
*/
package produst.golf;
import java.sql.*;
import javax.sql.*;
import javax.naming.*;
import java.util.Date;
import java.text.*;
 
public class CourseList{
    /** フィールド定義 */
    private int intCid=0;
    private String strCourseName="";
    
    Context ctx;
    DataSource ds;
    Connection conn;
    PreparedStatement pstmt;
    ResultSet rs;
 
    // コンストラクタ
    public CourseList() throws Exception{
        this.ctx = new InitialContext();
        this.ds = (DataSource)ctx.lookup("java:comp/env/jdbc/golf");
        this.conn = ds.getConnection();
    }
    
    public int getCid() { 
        return this.intCid; 
    }
    public String getCourseName() {
        return this.strCourseName;
    }
 
    public void loadCourses() throws Exception{
        String strSql = "SELECT * FROM course "
            +" ORDER BY cid ";
        this.pstmt = conn.prepareStatement(strSql);
        this.rs = pstmt.executeQuery();
    }
 
    public boolean next()
    throws Exception{
        boolean blResult=false;
        if(this.rs.next()){
            this.intCid = this.rs.getInt("cid");
            this.strCourseName = this.rs.getString("course_name");
            blResult=true;
        }
        return blResult;
    }
 
    public void close()
    throws Exception {
        if (this.pstmt!=null) {
            try {
                this.pstmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (this.conn!=null) {
            try {
                this.conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (this.ctx!=null) {
            try {
                this.ctx.close();
            } catch (NamingException e) {
                e.printStackTrace();
            }
        }
    }
}

ScoreEdit.jpsの変更

次にJSPコードにJavaBeasnを実装する。

JSPの基本パターン部(←呼び方がわからない・・)に以下のコードを追加。具体的にはCourseListクラスを実装してデータベースをロードしている。

<jsp:useBean class="produst.golf.CourseList" id="courselist" scope="session"/>
// コースマスタLOAD
courselist.loadCourses();

次にHTMLの表示部(←こちらも呼び方がわからず・・・・)のコースの表示部分をリストボックスに変更する。courseテーブルからデータを順に読み込んでリストボックスにセットしていく。スコアデータの変更の場合は、スコアデータに登録されたコースを初期表示してあげる。

  • 変更前
    <DIV CLASS="section">
    <B>コース</B>
    <INPUT TYPE="text" NAME="cid" VALUE="<%=score.getCid()%>">
    </DIV>
  • 変更後
    <DIV CLASS="section">
    <B>コース</B>
    <SELECT NAME="course">
    	<%while(courselist.next()){%>
    		<OPTION VALUE="<%=courselist.getCid()%>" 
    			<%if(courselist.getCid()==score.getCid()){%>SELECTED<%}%>>
    			<%=courselist.getCourseName()%>
    	<%}%>
    	</OPTION>
    </SELECT>
    </DIV>

画面のイメージはこんな感じ

LISTBOX.PNG

ゴルフスコア登録変更画面の天候のラジオボタン化

登録変更画面の天候についてもIDによる入力はありえないので、ラジオボタンに変更する。

WeatherListクラスの作成

Courseデータ同様、Weatherテーブルからデータを取得するためのクラスを作成する。単純にマスタデータをロードして1件ずつレコードを読み込むメソッドを実装する。

fileWeatherList.java
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
/*
プログラム名:WeatherList.java
作成者:
*/
package produst.golf;
import java.sql.*;
import javax.sql.*;
import javax.naming.*;
import java.util.Date;
import java.text.*;
 
public class WeatherList{
    /** フィールド定義 */
    private int intWid=0;
    private String strWeatherName="";
    
    Context ctx;
    DataSource ds;
    Connection conn;
    PreparedStatement pstmt;
    ResultSet rs;
 
    // コンストラクタ
    public WeatherList() throws Exception{
        this.ctx = new InitialContext();
        this.ds = (DataSource)ctx.lookup("java:comp/env/jdbc/golf");
        this.conn = ds.getConnection();
    }
    
    public int getWid() { 
        return this.intWid; 
    }
    public String getWeatherName() {
        return this.strWeatherName;
    }
 
    public void loadWeathers() throws Exception{
        String strSql = "SELECT * FROM weather "
            +" ORDER BY wid ";
        this.pstmt = conn.prepareStatement(strSql);
        this.rs = pstmt.executeQuery();
    }
 
    public boolean next()
    throws Exception{
        boolean blResult=false;
        if(this.rs.next()){
            this.intWid = this.rs.getInt("wid");
            this.strWeatherName = this.rs.getString("weather_name");
            blResult=true;
        }
        return blResult;
    }
 
    public void close()
    throws Exception {
        if (this.pstmt!=null) {
            try {
                this.pstmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (this.conn!=null) {
            try {
                this.conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (this.ctx!=null) {
            try {
                this.ctx.close();
            } catch (NamingException e) {
                e.printStackTrace();
            }
        }
    }
}

ScoreEdit.jpsの変更

次にJSPコードにJavaBeasnを実装する。

  • 変更前
    <DIV CLASS="section">
    <B>天候</B>
    <INPUT TYPE="text" NAME="wid" size="1" maxlength="1" VALUE="<%=score.getWid()%>">
    </DIV>
  • 変更後
    <jsp:useBean class="produst.golf.WeatherList" id="weatherlist" scope="session"/>
    // 天候マスタLOAD
    weatherlist.loadWeathers();
    -ダミー
    <DIV CLASS="section">
    <B>天候</B>
    <%while(weatherlist.next()){%>
    	<INPUT TYPE="radio" NAME="wid" VALUE="<%=weatherlist.getWid()%>"
    	 <%if(weatherlist.getWid()==score.getWid()){%>CHECKED<%}%> > 
    	 <%=weatherlist.getWeatherName()%>
    <%}%>
    </DIV>

画面のイメージはこんな感じ

RADIOBUTTON.PNG

ゴルフスコア一覧画面

あまりにも醜かった一覧画面を変更する。見栄えだけでなくスコア一覧がプレー日の降順に出力されるようにScoreList.javaのSQL文も修正。(ここでは省略)

スタイルシートの変更

テーブル出力用の定義を追加。TDとTHの列幅(クラス)をそれぞれで定義するやり方がなんとなく間違っている気がするけど、とりあえず今は結果オーライ。

filestyle.css
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
DIV.page{
    background-color:#008080;
    width:660px;
    margin:0 auto 0 auto;
    padding:10px;
}
H1{
    width:600px;
    margin:20px 10px 10px 10px;
    font-size:18pt;
    font-style:italic;
    padding:10px;
    background-color:#6F9;
}
DIV.section{
    width:600px;
    margin:10px;
    padding:10px;
    background-color:#9FF;
}
DIV.userName{
    font-size:10pt;
}
A{
    font-size:9pt;
    margin:2px;
    padding:2px;
    color:#000000;
    text-decoration:none;
    background-color:#CCCCCC;
    border-style:solid;
    border-width:2px;
    border-color:#DDDDDD #BBBBBB #BBBBBB #DDDDDD;
}
H2{
    width:600px;
    margin:20px 10px 10px 10px;
    font-size:28pt;
    padding:10px;
    background-color:#FF00FF;
}
DIV.section2{
    width:600px;
    margin:10px;
    padding:10px;
    background-color:#FF0000;
}
 
TABLE.LIST{
    border-collapse:collapse;    /*隣り合うセルで罫線を共有*/
    border-style:solid;            /*外枠のスタイル(実線)*/
    border-width:2px;            /*外枠の太さ*/
    border-color:black;            /*罫線の色*/
    table-layout:fixed;            /*セルのサイズを固定*/
    margin:10px;                /*表の周囲の余白*/
    font-size:10pt;                /*フォントサイズ*/
}
TH{
    background-color:#81FF35;    /*表見出しの背景色*/
    border-style:solid;            /*外枠のスタイル(実線)*/
    border-width:1px;            /*外枠の太さ*/
    border-bottom-style:double;    /*表見出しの下側の罫線*/
    border-bottom-width:3px;    /*下側の罫線の太さ*/
}
TD{
    border-style:solid;            /*外枠のスタイル(実線)*/
    border-width:1px;            /*外枠の太さ*/
    padding:1pt;                /*罫線と文字との距離*/
}
TH.C1{
    width:70px;                    /*1列目の幅*/
}
TH.C2{
    width:140px;                /*2列目の幅*/
}
TH.C3{
    width:250px;                /*3列目の幅*/
}
TH.C4{
    width:70px;                    /*4列目の幅*/
}
TH.C5{
    width:70px;                    /*5列目の幅*/
}
TH.C6{
    width:70px;                    /*6列目の幅*/
}
TH.C7{
    width:50px;                    /*7列目の幅*/
}
TH.C8{
    width:50px;                    /*8列目の幅*/
}
 
TD.C1{
    width:70px;                    /*1列目の幅*/
}
TD.C2{
    width:140px;                /*2列目の幅*/
}
TD.C3{
    width:250px;                /*3列目の幅*/
}
TD.C4{
    width:70px;                    /*4列目の幅*/
    text-align:right;            /*右寄せ*/
}
TD.C5{
    width:70px;                    /*5列目の幅*/
    text-align:right;            /*右寄せ*/
}
TD.C6{
    width:70px;                    /*6列目の幅*/
    text-align:right;            /*右寄せ*/
}
TD.C7{
    width:50px;                    /*7列目の幅*/
}
TD.C8{
    width:50px;                    /*8列目の幅*/
    text-align:center;            /*センタリング*/
}

ScoreList.jspの変更

上で定義したスタイルシートを活用する。

fileScoreList.jsp
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
<%@ page contentType="text/html; charset=Windows-31J"%>
<jsp:useBean class="produst.golf.User" id="user" scope="session"/>
<jsp:useBean class="produst.golf.ScoreList" id="scoreList" scope="page"/>
<%@ include file="AutoLogin.inc"%>
<%
String strRealName;
String strUserName;
if(user.getId()==0){
    strRealName="ゲスト";
}else{
    strUserName=user.getUserName();
    strRealName=user.getUserRealName();
}
int intPage=0;
String strPage = request.getParameter("page");
if(strPage!=null){
    intPage=Integer.parseInt(strPage);
}
scoreList.loadScores(intPage*10,10);
 
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD>
<TITLE>ゴルフスコア管理</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-31J">
<LINK REL="stylesheet" TYPE="text/css" HREF="../style.css">
 
<SCRIPT type="text/javascript"><!--
var scoreCount = 0;
function funcBack(){
    if(scoreCount==10){
        location.href="ScoreList.jsp?page=<%=intPage+1%>";
    }else{
        alert("これより前のページはありません");
    }
}
function funcForward(){
    location.href="ScoreList.jsp?page=<%=intPage-1%>";
}
//--></SCRIPT>
 
</HEAD><BODY>
<H1>ゴルフスコア一覧</H1>
<DIV CLASS="section">
<DIV CLASS="userName">ようこそ <%=strRealName%>さん
</DIV>
</DIV>
<DIV CLASS="section">
<A HREF="../User/PasswordUserEdit.jsp">パスワード変更</A>
<%if(user.getPriv()>=3){%>
    <A HREF="../User/UserList.jsp">ユーザ管理</A>
<%}%>
<A HREF="ScoreEdit.jsp">スコアの登録</A>
<%if(user.getId()==0){%>
    <A HREF="../Login/LoginForm.jsp">ログイン</A>
<%}else{%>
    <A HREF="../Login/Logout.jsp">ログアウト</A>
<%}%>
<A HREF="javascript:funcBack()">前のページ</A>
<%if(intPage>0){%>
    <A HREF="javascript:funcForward()">次のページ</A>
<%}%>
</DIV>
 
<SCRIPT TYPE="text/javascript"><!--
scoreCount++;
//--></SCRIPT>
 
<!--
<DIV CLASS="section">
<%=scoreList.getId()%>
<%=scoreList.getPdate()%>
<%=scoreList.getUserName()%>
<%=scoreList.getRealName()%>
<%=scoreList.getCourseName()%>
<%=scoreList.getWeaterName()%>
<%=scoreList.getOutScore()%>
<%=scoreList.getInScore()%>
<%=scoreList.getScore()%>
<A HREF="ScoreEdit.jsp?id=<%=scoreList.getId()%>">編集</A>
</DIV>
//-->
 
<TABLE CLASS="LIST">
    <TR>
    <TH CLASS="C1">プレー日</TH>
    <TH CLASS="C2">名前</TH>
    <TH CLASS="C3">コース</TH>
    <TH CLASS="C4">スコア(OUT)</TH>
    <TH CLASS="C5">スコア(IN)</TH>
    <TH CLASS="C6">スコア</TH>
    <TH CLASS="C7">天候</TH>
    <TH CLASS="C8"></TH>
    </TR>
    <%while(scoreList.next()){%>
    <TR>
    <TD CLASS="C1"><%=scoreList.getPdate()%></TD>
    <TD CLASS="C2"><%=scoreList.getRealName()%></TD>
    <TD CLASS="C3"><%=scoreList.getCourseName()%></TD>
    <TD CLASS="C4"><%=scoreList.getOutScore()%></TD>
    <TD CLASS="C5"><%=scoreList.getInScore()%></TD>
    <TD CLASS="C6"><%=scoreList.getScore()%></TD>
    <TD CLASS="C7"><%=scoreList.getWeaterName()%></TD>
    <TD CLASS="C8"><A HREF="ScoreEdit.jsp?id=<%=scoreList.getId()%>">編集</A></TD>
    </TR>
    <%}%>
</TABLE>
 
<%scoreList.close();%>
</BODY></HTML>

変更前よりはよくなったけど・・・決してセンスがいいとはいえません。 (^^;

ScoreList2.PNG

ゴルフスコア登録変更画面の賞のチェックボックス化

ドラコン賞やニアピン賞の指定を簡略化するためにチェックボックスに変えてみる。

ScoreEdit.jspの変更

ScoreEdit.jspの賞の表示を以下のように変更する。このあたりの記述方法はいっこうに慣れない・・・

<DIV CLASS="section">
<INPUT TYPE="checkbox" NAME="award1" VALUE="<%=score.getAward1()%>" 
<%if(score.getAward1().equals(strX)){%>CHECKED<%}%> ><B>ニアピン賞(OUT)</B><BR>
<INPUT TYPE="checkbox" NAME="award2" VALUE="<%=score.getAward2()%>" 
<%if(score.getAward2().equals(strX)){%>CHECKED<%}%> ><B>ニアピン賞(IN)</B><BR>
<INPUT TYPE="checkbox" NAME="award3" VALUE="<%=score.getAward3()%>" 
<%if(score.getAward3().equals(strX)){%>CHECKED<%}%> ><B>ドラコン賞(OUT)</B><BR>
<INPUT TYPE="checkbox" NAME="award4" VALUE="<%=score.getAward4()%>" 
<%if(score.getAward4().equals(strX)){%>CHECKED<%}%> ><B>ドラコン賞(IN)</B><BR>
</DIV>

ScoreUpdate.jspの変更

次にScoreUpdate.jspを変更する。

String strAward1 = request.getParameter("award1");
String strAward2 = request.getParameter("award2");
String strAward3 = request.getParameter("award3");
String strAward4 = request.getParameter("award4");

if (strAward1!=null) {  
	strAward1="X";
} else {
	strAward1="";
}
if (strAward2!=null) { 
	strAward2="X";
} else {
	strAward2="";
}
if (strAward3!=null) { 
	strAward3="X";
} else {
	strAward3="";
}
if (strAward4!=null) { 
	strAward4="X";
} else {
	strAward4="";
}

ついでに更新処理のセッターの記述漏れがあったので修正する。

score.setId(intId);
score.setUid(intUid);
score.setCid(intCid);
score.setPdate(strPdate);
score.setOutScore(intOutScore);
score.setInScore(intInScore);
score.setScore(intScore);
score.setAward1(strAward1);
score.setAward2(strAward2);
score.setAward3(strAward3);
score.setAward4(strAward4);
score.setWid(intWid);
score.update();

画面イメージはこんな感じ。

CHECKBOX.PNG

添付ファイル: fileCHECKBOX.PNG 442件 [詳細] fileScoreList.jsp 691件 [詳細] filestyle.css 379件 [詳細] fileScoreList2.PNG 495件 [詳細] fileRADIOBUTTON.PNG 451件 [詳細] fileLISTBOX.PNG 471件 [詳細]

リロード   新規 編集 凍結 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2008-03-18 (火) 23:24:49 (4107d)