JSP課題

2025年5月13日2025年5月29日

準備

プロジェクトの作成

「JSP準備と実行」の回を参考に3-2-4 というプロジェクトを作成してください。作成が完了したら、各ファイルを以下のフォルダ構造と同じになるように3-2-4 のプロジェクトに作成してください。

フォルダ構造

課題

①以下の画像の様なページが表示される様に、 jspファイルを作成して下さい。

※そのままでは見栄えが悪いので多少CSSを適用していますが、今回はタグへ直接styleを記述してください。

作成時のルール

jspTest.jsp内でincludeディレクティブを使用し、header.jspとfooter.jspを外部から読み込んで下さい。上記画像のheaderは青部分、 footerは赤部分となります。(説明のために色付けしていますが、皆さんはグレーの画面を作ってください。
Calendar・SimpleDateFormatライブラリをimportし、ヘッダーへ作成日時をフォーマットして、年月日を表示させること。
styleの指定は下記の通り行うこと。

【jspTest.jsp】

padding-top: 50px;
padding-bottom: 50px;

【header.jsp】

background-color: gray;
display: inline-block;
paddng: 10px;
color: white;
font-size: 10px;

【footer.jsp】

background-color: gray;
display: inline-block;
paddng: 10px;
color: white;

「各要素を作成して、どこへ上記styleを適用すれば、画像通りのデザインになるかな」と、考えながら組み立ててみましょう。

作成時のヒント

しかしながら、なかなか思ったように表示されないこともあるかと思いますので、各ファイルの使用タグを提示しておきます!

【jspTest.jsp】

【header.jsp】【footer.jsp】