Database Lab 2 - Introduction to HTML and PHP

Overview

THe purpose of this lab is to introduct the use of HTML and PHP as a web user interface. Later we will be using these technologies to interact with a Database.

Clearly some students will be more experienced with HTML and possibly PHP then others. For this cource I do not assume a background HTML, and thus provide a web link to an HTML tutorial for those for who it is new. If there are difficulties, I will arrange for HTML tutoring session in the evening.

Objective

The studnet will develop a simple PHP/HTML based mortgage calculator. The requirement for this lab depend on which CS courses you have completed.

Background Preparation

It is highly recommended that any students without a background in HTML take or review COMPLETELY the following HTML tutorial BEFORE the lab: HTML Basic Tutorial.

Students with HTML background are asked to complete this tutorial before class: HTML Advanced Tutorial.

You may also want to review this if you have minimal programming experience: PHP 101: PHP For the Absolute Beginner

HTML Tags - a great concise table is here: HTML Tags

Simple Example

example.html
example.php
<html><body>
<h1>PHP Example</h1>
<h3>Jim Skon</h3>

<h3>Process Some Numbers</h3>
<form  action="example.php" method="post">

First Number: <input name="num1" type="text" />
Second Number:
<input type="radio" name="num2" value="10">3.1415
<input type="radio" name="num2" value="20">7
<input type="radio" name="num2" value="30">16

Third Number<select name="num3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>

</select>
<input type="submit" />
</form>
</body></html>
<html><body>
<?php
$n1 = $_POST['num1'];
$n2 = $_POST['num2'];
$n3 = $_POST['num3'];

$result = ($n1 - $n2) / $n3;

echo "<h1>PHP Example</h1>";
echo "<h3>Results</h3>";

echo "Result: (".$n1." - ".$n2.") / ".$n3." = ".$result;

?>
</body>
</html>

Assignment

Use a combination of HTML and PHP to create an interactive Mortgage calculator. A minimalist interface example is provided below.

Loan Calc HTML output example:
Screenshot-73.pngScreenshot-74.png

Note: this is a minimalist solution without CSS styling or error-checking. CS student past Software Development must use CSS to apply styling to the page and form and output page and JavaScript to carefully error check user input.

Save your pages as lab2.html, lab2.php in your Web Directory

  • On lab2.html Web page, use an HTML Form with input fields 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 4% to 10% in 0.5% increments). Let 9.5% be the default interest rate.
  • Use lab2.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
  • ( For CS majors who have completed Software Development) Once the form and php code is working correctly, use an externally linked lab2.js JavaScript file to error-check that the input fields contain valid user input. All input fields required.
    • You may use either JavaScript alert boxes or jQuery - your choice
    • Note: you do not need to perform error-checking in the PHP code for this assignment
  • ( For CS majors who have completed Software Development)Use an externally linked CSS style sheet to apply style rules to lab2.html and lab2.php

Turn in

  1. All Source Code
  2. Screen captures of all screens
  3. A link to the page
  4. A lab report giving your reflections on the lab, suggestions to make it better, and your rating at to it value to you on a scale from 1 (poor) to 5 (fantastic)

Grading

The grading for this is out of 100 point. There several options to get extra credit. What you MUST do is dependant on whether you completed CSC3004 Software Development.

You must complete the required steps in order to qualify for the optional credit.

Feature No Soft Dev Soft Dev
Tturning everything in as specified above. 10 10
Working entry page 40 20
Working and correct results page 50 20
Complete and correct error checking with Java 20 (optional) 20
Nice formatted numbers in output 10 (optional) 10
Use of CSS for attractive form and results page 20 (optional) 20
Display Complete Amoritazation Table 30 (optional) 30 (optional)
Total 170 130

-- JimSkon - 2011-09-07

Topic attachments
I Attachment Action Size Date Who Comment
Pngpng Lab_1html.png manage 11.5 K 2011-09-12 - 15:06 JimSkon Loan Calc HTML output example
Pngpng Lab_1php.png manage 7.9 K 2011-09-12 - 15:06 JimSkon Loan Calc PHP output example
Pngpng Screenshot-73.png manage 18.4 K 2011-09-16 - 20:10 JimSkon Loan Calc HTML output example
Pngpng Screenshot-74.png manage 20.6 K 2011-09-16 - 20:11 JimSkon Loan Calc PHP output example
Topic revision: r8 - 2013-11-15 - JimSkon
 
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback