programming 7
[Document title]
Lesson 12
Lab 12 – Pulling HTML, CSS, and a Backend language together
Objectives:
1. Convert the flowgorithm algorithm design into a Web Application using:
· Backend programming language PHP for processing
· HTML for Linkage and Information
· HTML forms for input
· Style Sheets for consistency
2. Perform development and testing within a local web application development environment (XAMPP)
3. Complete the software development cycle.
Lab overview
· What we have done so far:
· Designed an algorithm using Flowgorithm for “Concerts”
· Created a web form page for the user interface using HTML and CSS.
· Installed XAMPP and set up the local web application development environment.
· We have learned just enough PHP in this lesson for this lab
· Now let’s combine all the technologies together to complete the “Concerts” web application.
· You will submit 3 files for this lab. NAMING CONVENTION:
1. Web Form: lastname-input.html
2. PHP Back-end Program: lastname-process.php
3. Style Sheet: lastname-style.css
Lab Task Checklist
1. It is expected you have read the required reading in this Lesson before starting the lab.
2. Review the customer requirements:
Customer Requirements: The customer needs an application that provides the total cost of concert tickets to include sales tax. The customer will provide their name, phone number, and how many adult and child tickets they want. The program will do the required calculation and display the name, phone number, #number of tickets, sales tax total, subtotal, and total cost.
· Adult tickets are $36.75/each and child tickets are $25.50/each.
· Sales tax is 7% (0.07 for calculations purposes). Total = subtotal + total tax + fee
· It needs to display the transaction with a title of the Concert (This is provided by the program)
· Validate the Input before processing
· The only dates that are available for attendance are: Mar, Apr, and May.
· There must be at least one adult ticket purchased before any processing is done.
· There is an additional fee to add to total cost.
· Each transaction adds a fee charge based on how many tickets. If they have 5 or the less the fee is $1 (1.00) per person and if more than 5 it is reduced to 50 cents (.50) per person. The fee is not taxed but is part of the total cost.
· Fee has been added to the display requirements
· Allow user to continue with another transaction or exit the program
3. Review (attached in Blackboard as concert.zip )
· input.html
· style.css
· algorithm.fprg
4. Modify/Rename the attached using the required naming conventions and to meet the Lab Instructions.
5. Review the attached structure.pdf. You will use this to create your backend program (php) within your text editor. Make sure you save in the correct xampp location (/htdocs) so you can run and test the code. See Lab Instructions.
6. Use XAMPP and the URL address to test your web application
7. Validate all .html and .css files. .php does not require validation.
8. Zip all the files to be uploaded in one package. Make sure you have included images if needed.
9. Submit all files/s (zip) to Blackboard
Lab instructions – creating a web application
1. Open your text editor/Notepad++ and immediately save the html and css files you downloaded with the required naming conventions.
· Save the renamed files to x:xampp\htdocs\cti110\coursework folder. Your path may differ BUT in needs to be in your \xampp\htdocs folder for localhost to work and to test with the backend program.
· You will need to modify the files to ensure correct linkage (Relative Addressing should be used…assumption all files in same location/folder)
i. Link the css file for both the form and .php files
ii. Link from form to php code program
iii. Link back to form once transaction complete
2. Translate the structure.pdf to actual php code using your text editor. See how this code differs and is similar to the Flowgorithm algorithm (source code view…php). You should understand why the code differs (This will help in your group project).
3. Modify your .html form to meet linkage and lastname requirements. This file should call the PHP Back-end Program in the form action attribute.
4. Make sure backend program (.php) links back to the form
5. What the attached pdf structure does:
· Creates a PHP Program to process the information from the form web page to calculate and output the concert costs to meet user requirements. Retrieves all input data from the web form file using $_POST
· Declares Named Constants for:
· TAX, 0.07
· ADULT_COST, 36.75
· CHILD_COST, 25.50
· MIN_FEE, 0.50
· MAX_FEE, 1.00
· ATTEND, 5
· Calculates the cost of tickets
· Outputs the requirement information in HTML format
· Displays all order summary information as shown in Render: Example PHP Report Results below.
· Money data is be formatted for 2 decimals
· The Return to Form Entry should allow them to complete the form again.
**note we are not using the landing page created in Lesson 1 – 4 but realize that a full web application would also include the web landing page but it is not needed for this lab (it will be needed for the group project)
6. What the Cascade Style Does (realize there is both internal and external used):
· The styling should be consistent
· You may adjust the styling to reflect your uniqueness
· Understand that sometimes you may need a mix of internal and external CSS
additional Lab instructions
Test Cases:
1. T1: adults 2 , child 2. Subtotal = 124.50. Tax = 8.72 , fee = 4,total cost = 137.215 Test 5 or less
2. T2: adults 3, child 2. Subtotal = 150.00, Tax=10.15, fee = 5 for Total Cost = 165. Attending=5
3. T5: adults 3 child 3. subtotal=186.75, tax = 13.0725, fee= 3 Total cost = 202.8225
Example Renders of completed lab:
Render: lastname-input.html
Render: Example PHP Report Results (after executing your php program)
Reviewing the algorithm
|
HTML Linkage |
|
|
|
|
Input and Validation Done by the HTML Form Page
PHP Calculates and Outputs Concert Details