課題 (05:ウェブアプリケーション)
作業について
今回の課題は以下のパッケージに作成してください。
パッケージの名前 |
---|
j1.lesson05 |
作成するクラスの名前は問題ごとに指示があります。下記を参照してください
課題の提出方法については下記を参照してください。
また、別のコンピューター上に移動する際には、下記を参考にプログラムを持ち帰ってください。
新しい内容
テーブル
この課題では、テーブルを扱います。
テーブルは、複数の情報を縦横に並べて表示するときに利用します。テーブルは、行と列から構成され、行は横方向の情報の並びを示し、列は縦方向の並びを指します。ひとつひとつの情報は、セルに格納されます。
ほかの分化教材のテーマである「スプレッドシート」も、このテーブルの構造を使っています。Webアプリケーションではスプレッドシートほど難しいテーブルの使い方は紹介せず、ブラウザーにテーブル状のデータを表示するだけです。
例題
これまでと同じやり方でパッケージ「j1.lesson05」にクラス「TableSample」を作成して下さい。クラスを作成したら、次のようなプログラムを作成します。
package j1.lesson05; import gpjava.WebPage; public class TableSample { public static void main(String[] args) { new TableSample().start(); } void start() { WebPage.open("テーブルのサンプル"); WebPage.createTable(); WebPage.createRow(); WebPage.cell("はじめまして"); WebPage.cell("テーブルです"); WebPage.endOfRow(); WebPage.createRow(); WebPage.cell("これからも"); WebPage.cell("よろしく"); WebPage.endOfRow(); WebPage.endOfTable(); WebPage.close(); } }
このプログラムは、テーブルを表示する画面を作成しています。テーブルの作成は、次のように書きます。これでひとつのテーブルが作成されます 。
// この間に行の生成を記述する
WebPage.endOfTable();
行の作成は、次のように書きます。この記述で、表の横1行が作成されます。複数行ある場合は、この記述を「WebPage.createTable()」から「WebPage.endOfTable()」の間に必要なだけ繰り返します。例では、2回繰り返しているので、2行のテーブルが生成されます。
// この間にセルの生成を記述する
WebPage.endOfRow();
それぞれの行には、セルを配置します。以下の書き方で、ひとつのセルが作成されます。これも複数ある場合は、この記述を必要なだけ繰り返します。例では、それぞれの行で2回繰り返しているので、2列のテーブルが生成されます。
以下のURLを指定して、プログラムを実行してください。
このプログラムはリクエストパラメーターを使用していないため、URLに「http://localhost:8888/(パッケージ名)/(クラス名)」を指定するだけで動作を確認できます。
成功すると、次のような画面が表示されます。ブラウザー上に2行2列のテーブルが表示されています。
問題
1. 金額を計算する
作成するクラスの名前 |
---|
Bill |
プログラムを呼び出すための画面 |
---|
cart.html |
動作を確認するためのURL |
---|
http://localhost:8888/j1.lesson05/cart.html |
入力された2つの商品の合計金額を表示するプログラムを作成します。
この課題は3ステップに分けて作成してください。
1.a 入力された商品をテーブル状に表示する
「http://localhost:8888/j1.lesson05/cart.html」にそれぞれの商品の金額を入力してボタンを押すと、以下のようなテーブルが表示されるようにしてください (セルの色については気にしないでください)。
項目 | 金額 |
---|---|
商品1 | (商品1の金額) |
商品2 | (商品2の金額) |
このWebページでボタンを押すと、Billプログラムが実行されます。そのとき、商品1の金額はリクエストパラメーターの「price1」に、商品2は「price2」にそれぞれ渡されます。
受け取った金額情報をもとに、上記のようなテーブルを表示するようにしてください。なお、金額情報は整数で入力されると決めてしまって構いません。
「Integer.parseInt()」命令を使って、リクエストパラメーターから受け取った文字列を整数に変換しておくと楽です。また、「リクエストパラメーターを受け取り、数値に変換して返す」というようなメソッドを作るとよいでしょう。
1.b 入力された商品の小計を表示する
Billプログラムを書き換えて、「http://localhost:8888/j1.lesson05/cart.html」にそれぞれの商品の金額を入力してボタンを押すと、以下のようなテーブルが表示されるようにしてください。
項目 | 金額 |
---|---|
商品1 | (商品1の金額) |
商品2 | (商品2の金額) |
小計 | (商品1と商品2の金額の合計) |
1.c 入力された商品の合計を表示する
Billプログラムを書き換えて、「http://localhost:8888/j1.lesson05/cart.html」にそれぞれの商品の金額を入力してボタンを押すと、以下のようなテーブルが表示されるようにしてください。
項目 | 金額 |
---|---|
商品1 | (商品1の金額) |
商品2 | (商品2の金額) |
小計 | (商品1と商品2の金額の合計) |
消費税 | (商品1と商品2の金額の消費税) |
合計 | (商品1と商品2の金額の税込合計) |
なお、練習として「小計の消費税を計算するメソッド」を作成して利用するようにしてください。そのとき、「105倍して100で割る」と整数のまま正しい値を計算できます。
2. クイズの結果を集計する
作成するクラスの名前 |
---|
QuizSummarize |
プログラムを呼び出すための画面 |
---|
quiz.html |
動作を確認するためのURL |
---|
http://localhost:8888/j1.lesson05/quiz.html |
3択クイズの実施結果を表示するプログラムを作成してください。
「http://localhost:8888/j1.lesson05/quiz.html」でそれぞれ選択肢を選びボタンを押すと、以下のようなテーブルが表示されるようにしてください (セルの色については気にしないでください)。なお、正解した問題の結果については「○」を、不正解の問題の結果については「×」をそれぞれ表示してください。
問題 | 結果 |
---|---|
1 | ○ |
2 | × |
3 | ○ |
このWebページでボタンを押すと、QuizSummarizeプログラムが実行されます。問題数は3題で、クイズの解答は1問目から順に「"answer1"」「"answer2"」「"answer3"」でリクエストパラメータとして取り出せます。解答の値が、文字列「1」であれば正解、「0」であれば間違いとします。なお、解答を一つも選択しなかった場合には、プログラムがエラーになる場合があります。
ヒント
次の2つのメソッドを作成すると楽です。
- リクエストパラメーターの名前を渡すと、その問題に正解している場合にはtrue, そうでない場合にはfalseを返すメソッド
- 問題の番号(1から3)を受け取って、テーブルの1行を表示するメソッド
なお、問題番号(number)とリクエストパラメーター名(parameterName)には次のような関係があります。
int number = ...; String parameterName = "answer" + number;