課題 (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.createTable();
// この間に行の生成を記述する
WebPage.endOfTable();

行の作成は、次のように書きます。この記述で、表の横1行が作成されます。複数行ある場合は、この記述を「WebPage.createTable()」から「WebPage.endOfTable()」の間に必要なだけ繰り返します。例では、2回繰り返しているので、2行のテーブルが生成されます。

WebPage.createRow();
// この間にセルの生成を記述する
WebPage.endOfRow();

それぞれの行には、セルを配置します。以下の書き方で、ひとつのセルが作成されます。これも複数ある場合は、この記述を必要なだけ繰り返します。例では、それぞれの行で2回繰り返しているので、2列のテーブルが生成されます。

WebPage.cell([セルに表示する文字列や数字]);

以下の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つのメソッドを作成すると楽です。

  1. リクエストパラメーターの名前を渡すと、その問題に正解している場合にはtrue, そうでない場合にはfalseを返すメソッド
  2. 問題の番号(1から3)を受け取って、テーブルの1行を表示するメソッド

なお、問題番号(number)とリクエストパラメーター名(parameterName)には次のような関係があります。

int number = ...;
String parameterName = "answer" + number;