1. In Class Programming: Credit card payment
BIS1523 – Lecture 7

2. Program Overview
Today’s program will calculate the new balance on a credit card after some monthly activity is applied.
The user will be allowed to enter in the current balance, charges, and credits.
The program will calculate the new balance, as well as the minimum payment for the card.
We’ll use CSS to divide the interface into three sections, a header on the top, an informational area on the left, and a input/output area on the right
header
description
io_area

3. Input Screen

4. Output Screen

5. HTML We will eventually have 3 files:
payment_input.html
payment_results.php
payment.css
We will start with our HTML input form. We know we want to divide it into three sections, with a header and a link to our style sheet.

6. HTML
The header and description sections only contain normal informational HTML, so we’ll go ahead and fill them in.

7. HTML: Form
The user input needs 3 text inputs. We’ll start with the <FORM> line, which references our PHP file.
Then add in 3 inputs, for balance, credits, and charges.
Lastly, we add in the submit button

8. HTML
Without CSS, our form now looks like this:

9. CSS We can start by creating CSS references to each of our 3 areas
Header is a built in semantic, and description and io_area are ID’s we set in our HTML. We reference ID’s starting with a #.
We can center our text within our header by using the text-align property

10. CSS We can also put a border around our description area:
Next, we want to reposition our description and io_area to be side by site. We will use absolute positioning, and set the “width” property appropriately.
We also need to set the “left” property to move the io_area over.

11. CSS Our input screen now looks like this.
The inputs would look nicer lined up on the right. And the title for the Instructions box could be centered. The css to do both looks like:

12. PHP
Now we have our input form set up, and looking nice with CSS, lets consider what to do with our PHP results form.
First, the layout in it is going to match the input form. We can use the exact same CSS file for this layout, and just give the sections of our results form the same names.
The starting HTML looks nearly identical to the starting point of our input form. The title and header just say “Results” instead of “Input”.
We can then add in the description information on the results

13. PHP Once the description is added, we are ready to start our code.
The code will go in the io_area section, and we’ll follow our normal process of:
Read in the values the user typed in using the POST array
Perform our math to calculate new balance and min payment
Output HTML with a print command

14. PHP
Notice that by using the same ID’s for our sections, and linking to the same CSS file, our layout is already set up for us.