E Commerce Module 3

Module 3: HTML Forms and Arithmetic Operations
Learning Outcomes:
At the end of the lesson, the students are able to:
 Understand the use of web forms.
 Identify HTML Web Form Elements and their use.
 Apply HTML Web Form Elements in a PHP Web page
 Create a grading system web page using PHP Web Forms.
 Create an HTML Form that will save, search, edit and delete record from the database.
Introduction
A web form is similar to paper or database forms because your customers fill out the forms using text
fields, checkboxes, or radio buttons. Examples of where web forms can be used is in the “checkout process”
during online shopping where the customer enters his credit card information or when he types a phrase into
a search engine’s search field box.
How to Use Web Forms for Your Business

Depending on your goals, the way you use a web form will have a particular purpose for specific
situations. You can use contact forms as an effective contact method or a way to capture leads. Or perhaps you
are an e- commerce company that wants to include a sales order form on your website as a convenience to
your customers. Another type of form that may be useful to your business is including a customer feedback
form so that you can gain better knowledge of what is working in your business, and what is not.:
HTML Form Elements
HTML form elements are used to capture user input. There are many different types of form elements
such as the text box, check box, drop down, submit button, and much more.
The form elements above are the most common used form elements. We will go into further detail on
each of these form elements:
Text Box Input. The text box input is used to capture text such as a name, email, address, or any other
type of text. To create an HTML text box we will use the input tag and specify that the type attribute to
be text.
Syntax: <input type="text" name="first_name">
Figure 2.3 – Text Box Input
Password Input. The password input is essentially the same thing as the Text Box input; however, it does
not show the text as the user types. Try it out in the example below:
Syntax: <input type="password" name="password">
Figure 2.3 – Password Input

Text Area. To create a Text Area where a large amount of text can be entered by the user we can use the
<textarea> tag. Take a look at an example of how to create a Text Area in HTML:
Syntax: <textarea name="comment"></textarea>
Figure 2.4 – Text Area
Select Drop Down. A Drop Down is a specific list of options that a user can choose when selecting a
Drop Down menu. To create a Select Dropdown in HTML you would represent this inside of
<select></select> tags, then each option that you want to allow your user, you will specify with an
<option></option> tag inside the select tags. Take a look at the following example:
Syntax:
<select name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Female">Not Specified</option>
</select>
Figure 2.5 – Select Drop Down
Check Box. A check box is exactly what it sounds like, it's a box that you can click and it can be checked
or unchecked. When the check box is checked you are setting the check box to true. Otherwise if it is
unchecked you are saying that it is false. Take a look at how we can create an HTML check box below:
Syntax: <input type="checkbox" name="valid_ninja"> Are You a Ninja?
Figure 2.6 – Check Box
Radio Input. A radio select input allows a user a specific amount of options to select from. You can think
of this like a multiple choice select. The user can only select one of the options. Take a look at how to
create Radio Select Inputs in HTML:
Syntax:
<input type="radio" name="source" value="friend"> Through a friend<br>
<input type="radio" name=" source " value="website"> Read about it on a website<br>
<input type="radio" name=" source " value="radio"> Heard on a radio advertisement<br>
<input type="radio" name=" source " value="other"> Other Source<br>
Figure 2.8 – RadioButton
File Input. A File input is used to allow users to upload images or files. To create a File input element we
will use the input element and give it a type of file like the following:
Syntax: <input type="file" name="image">
Figure 2.8 – RadioButton
Submit Button. Lastly we are going to need a way to submit our form with all the data. This is what the
submit button is used for. In order to use the submit button we will use another input element with a
type of submit:
Syntax: <input type="submit" value="Submit The Form">
Figure 2.9 – Submit Button
ACTIVITY 3.1 – WEB FORMS USING HTML ELEMENTS

PC/Laptop Demo: https://youtu.be/AeudYvdeuGE Mobile Demo: https://youtu.be/TdSHaFT1Huo
Instructions:
1. Open your text editor Visual Studio Code or ACode.
2. Right click code -YearSection-initials in workspace >> Select New Folder >> Type module3-files
3. Right click module3-files in the workspace >> Select New File >> type act1-mod3-is301-
initials.html
4. In act1-mod3-is301-initials.html code window add the following codes:
5. Open any web browser and type the url http://localhost/is301-bsis2x/module3-files/act1-

mod3-is301-initials.html The output should look like the image below.
Notes:
 Include your initials in naming your variables, class names, method names, parameters
and object names. Please see examples:
o dblJCBFee
o OrderJCBSystem
o computeJCBOrders
o txtJCBLName
 Using any screen recording software (Open Broadcaster Software, Bandicam or
Filmora), record the machine problem output demonstration.
 Submit the activity in the assignment section of the course in Neo LMS:
o Video Filename: ACT1-MOD3-CODE-INITIALS.
o YouTube link or URL of the recorded output demonstration.
 Five (5) points deductions will be given to each submission protocol violations:
o Not including initials in variable names, object names, class names, method
names and project names.
o Not using activity and machine problem worksheets.
o Incorrect Filenames Format: ACT1-MOD3-CODE-INITIALS
o Incomplete Source codes and output screenshots in PDF or video output
demonstrations.
o Broken YouTube Links or no video demonstration outputs.
 Any similarities on the source codes or any sign of “Copy and Paste” codes will be
marked as CHEATING and will be graded ZERO (0).
ACTIVITY 3.2 – WEB FORMS AND PHP ARITHMETIC OPERATIONS

PC/Laptop Demo: https://youtu.be/qqxATESkEKM Mobile Demo: https://youtu.be/ND095-RQZ28
Instructions:
1. In order to perform arithmetic operations in a PHP page, we need to have the following:
a. HTML Form – User Input
b. PHP File – process/computation/methods.
2. Right click module3-files in the workspace >> Select New Folder >> type act2-mod3-files.
3. Right click act2-mod3-files in the workspace >> Select New File >> type act2-mod3-is301-
initials.html
4. In act2-mod3-is301-initials.html code window add the following codes:
6. Open any web browser and type the url http://localhost/is301-bsis2x-initials/module3-
files/act2-mod3-files/act2-mod3-is301-initials.html The output should look like the image
below.
5. Right click act2-mod3-files in the workspace >> Select New File >> type act2-mod3-is301-
initials.php
6. In act2-mod3-is301-initials.php code window add the following codes:
7. Open any web browser and type the url http://localhost/is301-bsis2x-initials/module3-
files/act2-mod3-files/act2-mod3-is301-initials.html The output should look like the image
below.
a. Enter the following data
b. Click COMPUTE GRADE Button. The output should look like the image below:
Notes:
o dblJCBFee
o OrderJCBSystem
o computeJCBOrders
o txtJCBLName
demonstrations.
ACTIVITY 3.3 – PHP ORDERING SYSTEM

Demos: PC/Laptop - https://youtu.be/PX4UgpabUHE Mobile Phone- https://youtu.be/-
Pgp8jetFPw
Instructions:

2. Right click module3-files in the workspace >> Select New Folder >> type act3-mod3-files.
3. Set the asset directory >> Right Click act3-mod3-files >> New Folder type assets.
4. Download the bootstrap library compressed file
https://www.mediafire.com/file/x5jzq66mfec5ksb/bootstrap-5.1.1-dist.zip/file
5. Extract the content of the bootstrap library compressed file to assets directory
6. Right click act3-mod3-files in the workspace >> Select New File >> type act3-mod3-code-
initials.html
7. SET THE HTML FORM. Type the following codes in the act3-mod3-code-initials.html code
window:
A. Provide the basic HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP ORDERING SYSTEM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/bootstrap-5.1.1-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
</body>
</html>
B. Add the <form> </form> tag inside the body section.

<div class="card-body">
<form action="compute-order.php" method="POST" name="frmOrder"
id="frmOrder">
</form>
</div>
C. Add the Text User Input elements. Provide the following codes after the inside the <form>
</form> tag.
<h2>CUSTOMER ORDER FORM</h2>

<br>


<div class="form-group">
<label for="CustomerID">Customer ID:</label>
<input type="text" class="form-control" name="CustomerID" id="CustomerID"
placeholder="Enter customer id" required>
</div>
<br>
<label for="CustomerName">Customer Name:</label>
<input type="text" class="form-control" name="CustomerName"
id="CustomerName" placeholder="Enter customer name" required>
</div>
D. Add the RADIOBUTTON element FOR ORDERS. Provide the following codes after the inside the
<form> </form> tag after the previous code.


<br>
<fieldset class="form-group">
<legend>Select Order:</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="order" id="hambor"
value="Hamburger" checked>
<label class="form-check-label" for="hambor">Hamburger 50.00</label>
</div>
<input class="form-check-input" type="radio" name="order" id="cheese"
value="Cheese Burger">
<label class="form-check-label" for="cheese">Cheese Burger 100.00</label>
</div>
<input class="form-check-input" type="radio" name="order" id="bigmc"
value="Big MacJabee">
<label class="form-check-label" for="bigmc">Big MacJabee 150.00</label>
</div>
</fieldset>
</div>
E. Add the CHECKBOXES element FOR EXTRAS. Provide the following codes after the inside the


<br>
<fieldset class="form-group">
<legend>Select Extras:</legend>
<input class="form-check-input" type="checkbox" name="patty" id="patty"
value="Patties 25.00" checked>
<label class="form-check-label" for="hambor">Patties 25.00</label>
</div>
<input class="form-check-input" type="checkbox" name="coles" id="coles"
value="Coleslaw 50.00">
<label class="form-check-label" for="cheese">Coleslaw 50.00</label>
</div>
<input class="form-check-input" type="checkbox" name="hamegg"
id="hamegg" value="Ham and Egg 100.00">
<label class="form-check-label" for="hamegg">Ham and Egg 100.00</label>
</div>
</fieldset>
</div>
F. Add the SELECT element FOR THE DRINKS. Provide the following codes after the inside the


<br>
<label for="drinks">Select Drinks:</label>
<select class="form-control form-select" id="drinks" name="drinks" required>
<option>SELECT ONE</option>
<option>SOFTDRINKS 30.00</option>
<option>COFFEE 40.00</option>
<option>MANGO JUICE 50.00</option>
</select>
</div>
G. dd the Action or Command Button element. Provide the following codes after the inside the

<br>
<button type="submit" class="form-control btn btn-primary mb-2"
id="btnCompute">COMPUTE TOTAL AMOUNT</button>
</div>
8. Right click act3-mod3-files in the workspace >> Select New File >> type compute-order.php
9. CODE FOR THE COMPUTE ORDER. Type the following codes in the compute-order.php code
window:
<?php
//GET TEXT INPUTS
$strID = $_POST['CustomerID'];
$strName = $_POST['CustomerName'];
//GET SELECT RADIOBUTTON

$strOrder = $_POST['order'];
if($strOrder == "Hamburger")
{
$dblOrder = 50;
}
else if($strOrder == "Cheese Burger")
{
$dblOrder = 100;
}
else if($strOrder == "Big MacJabee")
{
$dblOrder = 150;
}
//GET CHECKSTATE OF PATTIES

if (isset($_POST['patty'])) {
$dblPatty = 25;
} else {
$dblPatty = 0;
}
//GET CHECKSTATE OF COLESLAW

if (isset($_POST['coles'])) {
$dblColes = 50;
} else {
$dblColes = 0;
}
//GET CHECKSTATE OF HAM AND EGG

if (isset($_POST['hamegg'])) {
$dblHamEgg = 100;
} else {
$dblHamEgg = 0;
}
//GET SELECT DROPDOWN

$strDrinks = $_POST['drinks'];
if($strDrinks == "SOFTDRINKS 30.00")
{
$dblDrinks = 30;
}
else if($strDrinks == "COFFEE 40.00")
{
$dblDrinks = 40;
}
else if($strDrinks == "MANGO JUICE 50.00")
{
$dblDrinks = 50;
}
//COMPUTE ORDER
$dblTotal = $dblOrder + $dblPatty + $dblColes + $dblHamEgg + $dblDrinks;
//DISPLAY RECEIPT
echo "Customer ID: " . $strID . "<br>";
echo "Customer Name: " . $strName . "<br>";
echo "Total Amount: " . $dblTotal . "<br>";
?>
10. Open any web browser and type the url Open any web browser and type the url
http://localhost/is301-bsis2x-initials/module3-files/act2-mod3-files/act2-mod3-is301-
initials.html The output should look like the image below.
Notes:
o dblJCBFee
o OrderJCBSystem
o computeJCBOrders
o txtJCBLName
demonstrations.
MACHINE PROBLEM 3.1 – PAYROLL FORM + PHP

2. Right click module3-files in workspace >> Select New Folder >> Type mp1-mod3-files
3. Right click mp1-mod3-files in the workspace >> Select New File >> type mp1-mod3-is301-
initials.html
4. Create an HTML form that will ask the user to enter the following:
A. Employee Number
B. Last Name
C. First Name
D. Middle Name
E. Status
F. No. of Hours Work
G. No. of Hours Overtime
H. No. of Hours Late
I. Rate Per Hour
J. Uniform Allowance
K. Transportation Allowance
initials.php
6. Create a PHP file that will:
A. Compute the following:
i. Gross Pay = (((No. of Hours Work + No. Hours OT) – No. Hours Late) * Rate Per
Hour) + Uniform Allowance + Transportation Allowance
ii. Tax = Gross Pay * .10
iii. SSS = Gross Pay * .11
iv. PagIbig = Gross Pay * .12
v. PhilHealth = Gross Pay * .13
vi. Net Pay = Gross Pay – (Tax + SSS + PagIbig + PhilHealth)
B. Display the following:

EMPLOYEE PAYSLIP
Employee Number: 001
Employee Name: Di Magkamali, Perfecto Mahusay
Status: Probationary
No. of Hours Work: 35
No. of Hours Overtime: 10
No. Of Hours Late: 5
Rate Per Hour: 250
Uniform Allowance: 400
Transportation Allowance: 500
Gross Pay: 10900

Total Tax: 1090
Total SSS: 1199
Total PagIbig: 1308
Total PhilHealth: 1417
Net Pay: 5886
Program by: [Your Complete Name]
7. Sample Data
Uniform Transpo
Employe First Middle Hours Hours Hours Rate Per Allowan Allowan
e# Last Name Name Name Status Work OT Late Hour ce ce
Di
001 Magkamali Perfecto Mahusay Probationary 35 10 5 250 400 500
002 Di Matulac Dabiana Hebi Regular 40 15 7 300 500 600
Di
003 Mahagilap Hassan Nuwer Permanent 45 8 10 350 600 800
Employee
Number Gross Pay Tax SSS PagIibig PhilHealth Net Pay
001 10900 1090 1199 1308 1417 5886
002 15500 1550 1705 1860 2015 8370
003 16450 1645 1809.5 1974 2138.5 8883
Notes:
o dblJCBFee
o OrderJCBSystem
o computeJCBOrders
o txtJCBLName
o Video Filename: MP1-MOD3-CODE-INITIALS.
o Incorrect Filenames Format: MP1-MOD3-CODE-INITIALS
demonstrations.
MACHINE PROBLEM 3.2 – PHP – ENROLLMENT FORM

Instructions:
initials.html
4. Create an HTML Form that will provide the following elements:
A. Student Information
i. Student Number
ii. Last Name
iii. First Name
iv. Middle Name
v. Gender
vi. Email
vii. Course
B. Tuition Fees (RadioButton)
i. 1st Year 500.00
ii. 2nd Year 600.00
iii. 3rd Year 800.00
iv. 4th Year 900.00
C. Other Fees (CheckBox)
i. Registration Fee 100.00
ii. Internet Fee 100.00
iii. ID Fee 100.00
iv. Library Fee 50.00
D. Scholarship (ComboBox)
i. DEAN'S LISTER 200.00
ii. STUDENT ASSISTANT 500.00
iii. PRESIDENT LIST 700.00
iv. FULL SCHOLARSHIP 1000.00
5. Create a PHP Script to Compute:

A. Total Amount To Pay =( Tuition Fee + Registration Fee + Internet Fee + ID Fee + Library Fee)
– Scholarship
6. Display the following data in the OFFICIAL RECEIPT.
A. Student Information
B. Total Amount to Pay
7. Sample Data
Tuition Fee Other Fees Scholarship Total Amount

1st Registration Fee Dean’s Lister 400
2nd Registration Fee, Student Assistant 300
Internet Fee
3rd Registration Fee, President List 400
Internet Fee, ID Fee
4th Registration Fee, Full Scholarship 250
Internet Fee, ID
Fee,
Library Fee
Notes:
o dblJCBFee
o OrderJCBSystem
o computeJCBOrders
o txtJCBLName
demonstrations.
MACHINE PROBLEM 3.3 – PIZZA ORDERING SYSTEM

Instructions:
initials.html
4. Create an HTML Form that will accept the following inputs:
A. Customer Information
i. Customer Number
ii. Last Name
iii. First Name
iv. Middle Name
v. Gender
vi. Birthday
vii. Email Address
B. Pizza Sizes (RadioButton)
i. Regular 300.00
ii. Large 500.00
iii. Family 800.00
iv. Extra Large 1000.00
C. Extra Toppings (CheckBox)
i. Cheese 50.00
ii. Ham 60.00
iii. Bacon 80.00
iv. Pepperoni 100.00
D. Pizza Flavor (RadioButton)
i. Hawaiian 50.00
ii. Pepperoni and Cheese 100.00
iii. Combination 150.00
iv. Manager's Choice 200.00
E. Drinks (ComboBox)
i. Softdrinks 30.00
ii. Mango Juice 35.00
iii. Pineapple Juice 40.00
iv. Hot Coffee 45.00
5. Create a PHP Script to Compute for:

A. Amount to Pay = Pizza Flavor + Pizza Size + Cheese + Ham + Bacon + Pepperoni + Drinks
6. Display the following data in the OFFICIAL RECEIPT.
A. Personal Information
B. Amount to Pay
7. Sample Data:
Pizza Sizes Extra Toppings Pizza Flavor Drinks Total

Regular Cheese Hawaiian Softdrinks 430
Large Cheese, Ham Pepperoni & Cheese Mango Juice 745
Family Cheese, Ham, Bacon Combination Pineapple Juice 1180
Extra Large Cheese, Ham, Bacon, Manager’s Choice Hot Coffee 1535
Pepperoni
Notes:
 Include your initials in naming your projects, variables, class names, method names,
parameters and object names. Please see examples:
o dblJCBFee
o OrderJCBSystem
o computeJCBOrders
o txtJCBLName
o Not including initials in naming your projects, variables, class names, method names,
parameters and object names.
demonstrations.
 Any similarities on the source codes or any sign of “Copy and Paste” codes will be marked as
CHEATING and will be graded ZERO (0).
EXPRESS YOUR IDEAS – MODULE 3

Instructions: Based on the discussions, answer following questions on your own opinions.
A. What is the importance of a Web Form in a Web Application? Provide sample applications of Web
Forms.?
B. Enumerate three (3) HTML Form Elements and discuss its purpose or usage in a HTML Web Page?
C. Based on the activities and machine problems discuss the use of the following:
a. HTML Forms
b. PHP Scripts
Notes:
 Use the activity sheet provided in assignment section of the subject in the LMS.
 Check for plagiarism. Scan your answers at https://plagiarismdetector.net/
o Acceptance Rating: 80% to 100% Uniqueness.
o Include the “Screen Shot” of the result in the activity sheet.
 Submit the activity in PDF Format in the assignment section of the subject in the LMS.
Filename: EXP-MOD3-CODE-INITIALS.
 Submit the related studies in PDF Format.
o Not using the activity worksheets.
o Incorrect Filename Format: ACTIVITY_TITLE_INITIALS.PDF
o Not attaching the Plagiarism Scan Report Screen Shot.
 Any similarities on the answers, or any sign of “Copy and Paste” from the internet or
other student’s output will be marked as CHEATING and will be graded ZERO (0).

E Commerce Module 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E Commerce Module 3

Uploaded by

Copyright:

Available Formats

Module 3: HTML Forms and Arithmetic Operations

How to Use Web Forms for Your Business

Figure 2.3 – Text Box Input

Figure 2.3 – Password Input

Figure 2.5 – Select Drop Down

Figure 2.6 – Check Box

Figure 2.8 – RadioButton

Figure 2.9 – Submit Button

ACTIVITY 3.1 – WEB FORMS USING HTML ELEMENTS

5. Open any web browser and type the url http://localhost/is301-bsis2x/module3-files/act1-

ACTIVITY 3.2 – WEB FORMS AND PHP ARITHMETIC OPERATIONS

ACTIVITY 3.3 – PHP ORDERING SYSTEM

1. Open your text editor Visual Studio Code or ACode.

B. Add the <form> </form> tag inside the body section.

<h2>CUSTOMER ORDER FORM</h2>

//GET SELECT RADIOBUTTON

//GET CHECKSTATE OF PATTIES

//GET CHECKSTATE OF COLESLAW

//GET CHECKSTATE OF HAM AND EGG

//GET SELECT DROPDOWN

MACHINE PROBLEM 3.1 – PAYROLL FORM + PHP

B. Display the following:

Gross Pay: 10900

Program by: [Your Complete Name]

MACHINE PROBLEM 3.2 – PHP – ENROLLMENT FORM

5. Create a PHP Script to Compute:

Tuition Fee Other Fees Scholarship Total Amount

MACHINE PROBLEM 3.3 – PIZZA ORDERING SYSTEM

5. Create a PHP Script to Compute for:

Pizza Sizes Extra Toppings Pizza Flavor Drinks Total

EXPRESS YOUR IDEAS – MODULE 3

You might also like