In this exercise, youll modify the Future Value Calculator application to include a header and footer.

Review the project

Open the header.jsp file and note that it contains the code necessary for the start of an HTML page including the opening html, head, and body tags, the title for the web page, and a link including the CSS file.

Open the footer.jsp file and note that includes a copyright notice and the closing body and html tags.

Modify the code

Open the index.jsp file and remove the code from the file that now exists in the header and footer files.

At the top of the file, include header.jsp file. You can use any one of the three techniques you learned in chapter 6 for doing so.

At the bottom of the file, include the footer.jsp file. Again, you can use any one of the three techniques you learned in chapter 6.

Repeat steps 4-6 for the result.jsp file.

Run the application. Note that header.jsp file displays the title and CSS file for both pages. Also, note that the footer.jsp file displays the copyright notice at the bottom of both pages.

Use your browser to view the source code for the web page and examine the HTML. Note that the server merged the HTML in the header.jsp and footer.jsp files into the code for the final page, and the browser sees it all as one page.

index.jsp

<%@page contentType="text/html" pageEncoding="utf-8"%>

Future Value Calculator

${message}

Investment Amount:

Yearly Interest Rate:

Number of Years:

Header.jsp

<%@page contentType="text/html" pageEncoding="utf-8"%>

footer.jsp

© 2014, Mike Murach and Associates

result.jsp

<%@page contentType="text/html" pageEncoding="utf-8"%>

Future Value Calculator

Investment Amount: ${calculation.monthlyInvestmentAmountCurrencyFormat}

Yearly Interest Rate: ${calculation.yearlyInterestRate}

Number of Years: ${calculation.years}

Future Value: ${calculation.futureValueCurrencyFormat}