ZuoTi.Pro
Question

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

In this exercise, you’ll 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"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Murach's Java Servlets and JSP</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<section>
<h1>Future Value Calculator</h1>
<p><i>${message}</i></p>
<form action="calculate" method="post">
<label>Investment Amount:</label>
<input type="text" name="investment"
value="${calculation.monthlyInvestmentAmount}"/><br>

<label>Yearly Interest Rate:</label>
<input type="text" name="interest_rate"
value="${calculation.yearlyInterestRate}"/><br>

<label>Number of Years:</label>
<input type="text" name="years"
value="${calculation.years}"/><br>

<label>&nbsp;</label>
<input type="submit" value="Calculate"/><br>
</form>
</section>

Header.jsp

<%@page contentType="text/html" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Murach's Java Servlets and JSP</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>

footer.jsp

<section>
&copy; 2014, Mike Murach and Associates
</section>
</body>
</html>


result.jsp

<%@page contentType="text/html" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Murach's Java Servlets and JSP</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<section>
<h1>Future Value Calculator</h1>

<label>Investment Amount:</label>
<span>${calculation.monthlyInvestmentAmountCurrencyFormat}</span><br />

<label>Yearly Interest Rate:</label>
<span>${calculation.yearlyInterestRate}</span><br />

<label>Number of Years:</label>
<span>${calculation.years}</span><br />

<label>Future Value:</label>
<span>${calculation.futureValueCurrencyFormat}</span><br />
</section>
</body>
</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Make header and footer file separate and Include header and footer file in jsp (any page) to reduce the writing of the code again and again.

Need 3 file for each page to complete page and reduce the writing of the page.

1.header.jsp (it contains the information about header like dropdown menu or menu, contact info etc.)

2.footer.jsp (it contains information like copyright info but anyone can include any thing in header but meaningful, in some website inluded information in menu also)

3.the page include the header.jsp and footer.jsp (has info of body of the page page whatever want to show with header.jsp and footer.jsp)

here is the header, footer and page file

1. header.jsp

<%@page contentType="text/html" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Murach's Java Servlets and JSP</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>

take that code from index.jsp and save it as header.jsp

2. footer.jsp

<section>
&copy; 2014, Mike Murach and Associates
</section>
</body>
</html>

take that code from index.jsp and save it as footer.jsp

3. body of the page
<section>
<h1>Future Value Calculator</h1>
<p><i>${message}</i></p>
<form action="calculate" method="post">
<label>Investment Amount:</label>
<input type="text" name="investment"
value="${calculation.monthlyInvestmentAmount}"/><br>

<label>Yearly Interest Rate:</label>
<input type="text" name="interest_rate"
value="${calculation.yearlyInterestRate}"/><br>

<label>Number of Years:</label>
<input type="text" name="years"
value="${calculation.years}"/><br>

<label>&nbsp;</label>
<input type="submit" value="Calculate"/><br>
</form>
</section>

take that code from index.jsp and save it as page.jsp

Finally include the header.jsp and footer.jsp file include into one page

<jsp:include page="header.jsp" />

<section>
<h1>Future Value Calculator</h1>
<p><i>${message}</i></p>
<form action="result.jsp" method="post">
<label>Investment Amount:</label>
<input type="text" name="investment"
value="${calculation.monthlyInvestmentAmount}"/><br>

<label>Yearly Interest Rate:</label>
<input type="text" name="interest_rate"
value="${calculation.yearlyInterestRate}"/><br>

<label>Number of Years:</label>
<input type="text" name="years"
value="${calculation.years}"/><br>

<label>&nbsp;</label>
<input type="submit" value="Calculate"/><br>
</form>
</section>

<jsp:include page="footer.jsp" />

save it as index.jsp and run to the server it will show the all combined page

when click on calculate button it will redirect to the result.jsp page and show the result.jsp page content.

the result.jsp page look like

<jsp:include page="header.jsp" />

<section>
<h1>Future Value Calculator</h1>

<label>Investment Amount:</label>
<span>${calculation.monthlyInvestmentAmountCurrencyFormat}</span><br />

<label>Yearly Interest Rate:</label>
<span>${calculation.yearlyInterestRate}</span><br />

<label>Number of Years:</label>
<span>${calculation.years}</span><br />

<label>Future Value:</label>
<span>${calculation.futureValueCurrencyFormat}</span><br />
</section>

<jsp:inlude page="footer.jsp" />

save this file as result.jsp

NOTE: jsp tag used to include the content of page or page from othe resources it may be html,jsp or servlet

eg:

<jsp:inlude page="somepage.jsp">

<jsp:inlude page="somepage.html">

Output of first file index.jsp

Future Value Calculator Investment Amount: Yearly Interest Rate Number of Years: Calculate O 2014, Mike Murach and Associates

output of the result.jsp

Future Value Calculator Investment Amount: Yearly Interest Rate Number of Years: Future Value: O 2014, Mike Murach and Associ

0 0
Add a comment
Know the answer?
Add Answer to:
In this exercise, you’ll modify the Future Value Calculator application to include a header and footer....
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...

    Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins). 1.      Open the HTML and JavaScript files below: 2.      In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange...

  • Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

    Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...

  • In an external JavaScript file, you need to create two global variables for the Quarter name...

    In an external JavaScript file, you need to create two global variables for the Quarter name array and the Sales amount array. Create an anonymous function and connect it to the onclick event of the Add to Array button that adds the values from the fields (Quarter and Sales) to the respective arrays. Create an anonymous function and connect it to the onclick event of Display Sales button displays the contents of the arrays, displays the sum of all the...

  • In this exercise, you’ll upgrade a version of the MPG application so the error messages are...

    In this exercise, you’ll upgrade a version of the MPG application so the error messages are displayed in span elements to the right of the text boxes. Open the HTML and JavaScript files in this folder: exercises_short\ch06\mpg\ Then, run the application and click the Calculate MPG button to see that an error message is displayed in an alert dialog box for each of the two input fields. 2. In the HTML file, add a span element after the input element...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • Modify an application that lets users add tasks to a list so the tasks can also...

    Modify an application that lets users add tasks to a list so the tasks can also be deleted when they’re completed. 1. In the HTML file, enclose the text for each of the three existing list items in a <p> element. Then, Add buttons like the ones shown above preceding the <p> elements. No ids or names are required for these buttons, but they should be assigned to the class named “delete”. 2. In the JavaScript file, modify the event...

  • I'm having trouble to link the .js file to the html so changes for the html...

    I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style>     .hidden {display: none;}     .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...

  • use the sample html file below with a submit button to modify the style of the...

    use the sample html file below with a submit button to modify the style of the paragraph text through JavaScript code. By clicking on the button, the font, the font size, and the color of the paragraph text will be changed. <!DOCTYPE html> ·         <html> ·         <head> ·         <meta charset=utf-8 /> ·         <title>Change Paragraph Text</title> ·         </head>   ·         <body> ·         <p id ='text'>I’m going to change this text, I hope.</p>   ·         <div> ·         <button id="jschange" ·         onclick="js_style()">Style</button> ·         </div> ·         </body> ·         </html>

  • Using form events functions to answer this question. Use the attached form html file which contains...

    Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head>     <title>midterm exam</title>     <link rel="stylesheet" href="css/q1.css" /> </head> <body>     <div id = "page">        <form>   ...

  • I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...

    I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT