Struts を利用した Web アプリケーションの練習問題(出題編)

今回は趣旨を変えて、皆さんに冬休み(?)の宿題を。

2012 年 4 月 1 日現在のデータをもとに、日本の政令指定都市一覧と各都市の詳細情報を表示する Web アプリケーションを作成してください。

一覧画面

詳細画面(サンプル)

データベースを利用してください。major_city テーブルと district テーブルを作成してください。データベースへの接続方法は問いません。

CREATE TABLE district (
    dst_id       INT NOT NULL,
    dst_name     VARCHAR(30),
    CONSTRAINT PRIMARY KEY (dst_id)
);

INSERT INTO district ( dst_id, dst_name ) VALUES (1,'北海道');
INSERT INTO district ( dst_id, dst_name ) VALUES (2,'東北');
INSERT INTO district ( dst_id, dst_name ) VALUES (3,'関東');
INSERT INTO district ( dst_id, dst_name ) VALUES (4,'中部');
INSERT INTO district ( dst_id, dst_name ) VALUES (5,'近畿');
INSERT INTO district ( dst_id, dst_name ) VALUES (6,'中国');
INSERT INTO district ( dst_id, dst_name ) VALUES (7,'四国');
INSERT INTO district ( dst_id, dst_name ) VALUES (8,'九州');
INSERT INTO district ( dst_id, dst_name ) VALUES (9,'沖縄');

CREATE TABLE major_city (
    city_id           INT,
    city_name         VARCHAR(30),
    pref_name         VARCHAR(30),
    designated_day    DATE,
    area              DOUBLE(7,2),
    population        INT,
    dst_id            INT,
    CONSTRAINT major_city_ibfk_1 FOREIGN KEY (dst_id) REFERENCES district (dst_id)
);

major_city テーブルに入れるデータはネットで検索する等して各自作成してください。

直接詳細画面にアクセスしようとしたらエラーメッセージが出るように組んでください(ヒント : token を使います)。

エラー画面(エラー画面用の HTML を用意してください)

色指定等の参考として CSS を掲載しておきます。

table {
	margin : auto;
	border : 1px outset black
}

caption {
	font-size : 20pt;
	color : #008b8b
}

thead {
	background-color : #008b8b;
	color : #e6e6fa;
	font-size : 14pt
}

th { border : 1px inset black }
th#no { width : 30px }
th#pref { width : 100px }
th#name { width : 120px }
th#button { width : 80px }

tr.tr0 { background-color : #b0e0e6 }
tr.tr1 { background-color : #e6e6fa }

td {
	text-align : left;
	border : 1px inset black
}
td.td1 { text-align : center }

table { margin : auto }

caption {
	font-size : 20pt;
	color : #6a5acd
}

th, td { text-align : left }

th {
	background-color : #6a5acd;
	color : #e6e6fa;
	font-size : 14pt
}

td {
	background-color : #e6e6fa;
	color : #6a5acd;
	font-size : 14pt;
	width : 180px
}

p { text-align : center }

どちらをどの画面で使うかは推察してください。