• Skip to main content
• Accessibility features

• Contact Ed Gellenbeck

• CWU
• Gellenbeck
• CS 350

Site Search

Search ~350

Lab 10: PHP and Forms

Student Learning Objectives

After completion of this lab, students should be able to

• Design and implement interactive Web applications that use an XHTML Form and PHP scripting to process user input
• Develop a XHTML Form for accepting user input
• Develop a PHP page to process user input
• Use JavaScript to provide client-side error checking
• Use an externally linked style sheet to specify the presentation of your Web pages
• Use comments, meta tags, and Tidy within HTML-Kit to create JavaScript, Web, CSS, and PHP code that conforms to the CS 350 Coding Standards

Assignment

Use a combination of XHTML, CSS, Javascript, and PHP to create an simple interactive Mortgage calculator. A minimalist screen snapshot is provided below.

Save your pages as index.html, lab10.php, lab10.js, and lab10.css in folder u:\htdocs\Lab10 in your cs35002 account.

• To help with grading. begin your two Web pages (html and php) with your account number (e.g. in cs35002_nn [h1]) and your own name [h2]
• On index.html Web page, use an XHTML Form with input widgets to allow the user to
  • Enter the price of the home (e.g. 295000.00)
  • Enter the down payment amount (e.g. 30000.00)
  • Click the duration to repay the loan (either 10, 20, or 30 years). Make 30 years the default duration of the loan.
  • Select the interest rate (either 8%, 8.5%, 9%, 9.5%, or 10%). Let 9.5% be the default interest rate.
  • Submit button to call the lab10.php page to perform the calculations
  • Reset button to clear the form
• Use lab10.php to calculate and display the
  • total simple interest paid over the total number of years
    • interest = (priceOfHome - downPayment) * interestRate * years
  • total price of the home
    • totalPrice = priceOfHome + interest
  • monthly payments
    • Assume the total amount is paid back evenly distributed over the entire number of months
  • Tip: use PHP's number_format() function to format floating point values as currency
• Once the form and php code is working correctly, use an externally linked lab10.js JavaScript file to error-check that the input fields contain valid user input
• Use an externally linked CSS style sheet to apply style rules to index.html and lab10.php
• Validate your code (both index.html and XHTML code generated by lab10.php) to XHTML Strict 1.0 and your CSS to remove all errors

To Receive Credit

• Print out and staple together two printouts:
  • your index.html form page as displayed in a browser with valid input values entered
  • your lab10.php page as displayed in a browser with the output values generated from the correct input
  • your other files will be checked online
• Save your files as index.html, lab10.php, lab10.css, and lab10.js in folder U:\htdocs\Lab10\ in your cs350 account.

Grading Criteria

• Labs will be graded on a scale of 0 to 10:
  • 10: Excellent: no problems detected in the HTML code and the mortgage calculations are correct. JavaScript error-checking is complete. CSS produces an attractive display.
  • 9: Very well done: no problems detected in the XHTML form and the mortgage calculations are correct.
    • JavaScript error-checking is incomplete or
    • no or minimal CSS or
    • minor validation errors.
  • 8: Well done: PHP calculations are producing correct mortgage results given legal input.
  • 7: Acceptable: PHP calculations produce incorrect results
  • 6: Problems: Multiple problems are present in the XHTML form or php calculations.
  • 5, 4, 3: Incomplete: the lab was attempted but over one-third of the requirements still undone.
  • 0: Lab not submitted, no work done. You are allowed to drop your lab lowest score.

Lab 10 Screen Snapshot

Note: this is a minimalist solution without CSS styling or error-checking that would receive a score of 8 out of 10. For maximum points, use CSS to apply some styling to the form and output page and JavaScript to error check user input.