Scribd
Upload
18 views29 pages

SA1 Variable Operators and Control Structures

Uploaded by

carljose85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views29 pages

SA1 Variable Operators and Control Structures

Uploaded by

carljose85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

COLLEGE OF COMPUTER STUDIES

(Applications Development and Emerging


Technologies)

TECHNICAL-SUMMATIVE ASSESSMENT

1
PHP OUTPUT, VARIABLE FAMILIARIZATION, OPERATORS
AND CONTROL STRUCTURE

Student Name / Group


MORTRED
Name:

Name Role
Casin, Noel Josh B. Member
Members (if Group): Dela Cruz, Ryemdale Leader
Jimenez, Godwin Member
Palencia, Aster Member
Andor Carl Jose C. Member
TN26
Section:
Professor:
Mr. Andales

I. PROGRAM OUTCOME/S (PO) ADDRESSED BY THE LABORATORY EXERCISE


● Design, implement and evaluate computer-based systems or applications to meet desired needs and
requirements.

II. COURSE LEARNING OUTCOME/S (CLO) ADDRESSED BY THE LABORATORY EXERCISE


● Understand and apply best practices and standards in the development of website.
III. INTENDED LEARNING OUTCOME/S (ILO) OF THE LABORATORY EXERCISE
At the end of this exercise, students must be able to:
● Familiarize various Web Architecture, tools that used in PHP
● The basic understanding before using PHP
● Familiarize in environment of web developing
● Use of comments, variables and Echo / Print
● To understand the different types of operators that are available on PHP.
● To know what is operator precedence and operator associativity in PHP.
● To use escape sequence properly in the program.
● To know the different approach of control structures.
● To know the fundamentals syntax for conditional and looping structures.

Applications Development and Emerging Technologies Page 2 of


29
● To properly use the compound expression using the logical operators.
● To know the rules of break, continue, and goto statements.
IV. BACKGROUND INFORMATION

Applications Development and Emerging Technologies Page 3 of


29
Applications Development and Emerging Technologies Page 4 of
29
Applications Development and Emerging Technologies Page 5 of
29
V. GRADING SYSTEM / RUBRIC (please see separate sheet)
VI. LABORATORY ACTIVITY

1. The student will create a student registration form using HTML and CSS with the
integration of PHP Scripts please refer to the attached image for the example.
a. All user entries from the student registration form will be converted in variables
b. In the output, they need to call for the declared variables and do some string
formats like name cases and numbers
HTML:

Applications Development and Emerging Technologies Page 6 of


29
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="header">
<div class="hdr-logo"><img src="https://students.feutech.edu.ph/_public/img/header-logo.png"
width="31" height="42"></div>
<h1>FEU INSTITUTE OF TECHNOLOGY</h1>
<form id="registration-form">
<div class="user-details">
<div class="input-box">
<span class="details">Full Name</span>

Applications Development and Emerging Technologies Page 7 of


29
<input type="text" id="full-name" placeholder="Enter your full name" required>
</div>
<div class="input-box">
<span class="details">Age</span>
<input type="text" id="age" placeholder="Enter your age" required>
</div>
<div class="input-box">
<span class="details">Phone</span>
<input type="tel" id="phone" placeholder="Enter your phone number" required>
</div>
<div class="input-box">
<span class="details">Date of Birth</span>
<input type="date" id="dob" required>
</div>
<div class="input-box">
<span class="details">Address</span>
<input type="text" id="address" placeholder="Enter your address" required>
</div>
<div class="input-box">
<span class="details">City</span>

Applications Development and Emerging Technologies Page 8 of


29
<input type="text" id="city" placeholder="Enter your city" required>
</div>
<div class="input-box">
<span class="details">State</span>
<input type="text" id="state" placeholder="Enter your state" required>
</div>
<div class="input-box">
<span class="details">Zip Code</span>
<input type="text" id="zip-code" placeholder="Enter your zip code" required>
</div>
<div class="input-box">
<span class="details">Country</span>
<input type="text" id="country" placeholder="Enter your country" required>
</div>
<div class="input-box">
<span class="details">Gender</span>
<select id="gender" required>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>

Applications Development and Emerging Technologies Page 9 of


29
<option value="other">Other</option>
</select>
</div>
<div class="input-box">
<span class="details">Course</span>
<input type="text" id="course" placeholder="Enter your course of study" required>
</div>
<div class="input-box">
<span class="details">Year of Study</span>
<input type="text" id="year-of-study" placeholder="Enter your year of study" required>
</div>
</div>
<div class="button">
<input type="button" value="Submit" onclick="displaySummary()">
</div>
</form>
</div>
<br>
<div id="summary"></div>
</div>

Applications Development and Emerging Technologies Page 10 of


29
<script>
function displaySummary() {
var fullName = document.getElementById('full-name').value;
var age = document.getElementById('age').value;
var phone = document.getElementById('phone').value;
var dob = document.getElementById('dob').value;
var address = document.getElementById('address').value;
var city = document.getElementById('city').value;
var state = document.getElementById('state').value;
var zipCode = document.getElementById('zip-code').value;
var country = document.getElementById('country').value;
var gender = document.getElementById('gender').value;
var course = document.getElementById('course').value;
var yearOfStudy = document.getElementById('year-of-study').value;

var summary = "<h2>Registration Summary</h2>" +


"<p>Name: " + fullName + "</p>" +
"<p>Age: " + age + "</p>" +
"<p>Phone: " + phone + "</p>" +

Applications Development and Emerging Technologies Page 11 of


29
"<p>Date of Birth: " + dob + "</p>" +
"<p>Address: " + address + "</p>" +
"<p>City: " + city + "</p>" +
"<p>State: " + state + "</p>" +
"<p>Zip Code: " + zipCode + "</p>" +
"<p>Country: " + country + "</p>" +
"<p>Gender: " + gender + "</p>" +
"<p>Course: " + course + "</p>" +
"<p>Year of Study: " + yearOfStudy + "</p>";

document.getElementById('summary').innerHTML = summary;
}
</script>
</body>
</html>

CSS:

body {
font-family: Arial, sans-serif;

Applications Development and Emerging Technologies Page 12 of


29
background-color: #f4f4f4;
}

.container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
background-color: #e6f7ea; /* Soft green background */
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
color: #006400; /* Dark green text color */
}

Applications Development and Emerging Technologies Page 13 of


29
.user-details {
display: flex; /* Set to flex */
flex-wrap: wrap;
gap: 20px;
}

.input-box {
margin-bottom: 15px;
flex: 1 1 250px;
}

.details {
font-weight: bold;
color: #006400; /* Dark green text color */
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],

Applications Development and Emerging Technologies Page 14 of


29
select {
width: 100%;
padding: 10px;
border: 1px solid #006400; /* Dark green border */
border-radius: 5px;
box-sizing: border-box;
background-color: #fff; /* White background for inputs */
color: #006400; /* Dark green text color */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus {
outline: none;
border-color: #4caf50; /* Lighter green on focus */
}

.button {

Applications Development and Emerging Technologies Page 15 of


29
text-align: center;
margin-top: 20px;
}

input[type="submit"] {
padding: 10px 20px;
background-color: #4caf50; /* Light green button background */
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #3e8e41; /* Darker green on hover */
}
.user-details {
display: flex;
flex-wrap: wrap;
gap: 20px;

Applications Development and Emerging Technologies Page 16 of


29
justify-content: space-between; /* Adjusted justification */
}

.input-box {
margin-bottom: 15px;
flex: 0 0 48%; /* Adjusted width to accommodate gap */
}
/* Style for the registration summary */
#summary {
background-color: #e6f7ea; /* Soft green background */
color: #006400; /* Dark green text color */
padding: 20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#summary h2 {
font-size: 24px;
font-weight: bold;

Applications Development and Emerging Technologies Page 17 of


29
margin-bottom: 20px;
text-align: center;
}

#summary p {
font-weight: bold;
margin-bottom: 10px;
}

#summary p:last-child {
margin-bottom: 0;
}

PHP OUTPUT:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

Applications Development and Emerging Technologies Page 18 of


29
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="header">
<div class="hdr-logo"><img src="https://students.feutech.edu.ph/_public/img/header-logo.png"
width="31" height="42"></div>
<h1>FEU INSTITUTE OF TECHNOLOGY</h1>
<form id="registration-form" method="post" action="submit.php">
<!-- Your form fields go here -->
</form>
</div>
<br>
<div id="summary"></div>
</div>
</body>
</html>

Applications Development and Emerging Technologies Page 19 of


29
Applications Development and Emerging Technologies Page 20 of
29
Output:

Applications Development and Emerging Technologies Page 21 of


29
Applications Development and Emerging Technologies Page 22 of
29
2. Create a php program that will display the same output below. Use control structures
to display the multiplication table with alternating color.

<?php

echo "<style>

td { width: 50px; text-align: center; } /* Set width and center text */

.even { background-color: #FF0000; } /* Red */

.odd { background-color: #FFFF00; } /* Yellow */

</style>";

echo "<table>";

echo "<tr><th colspan='11'>Multiplication Table</th></tr>"; /* colspan added */

for ($i = 0; $i <= 10; $i++) {

Applications Development and Emerging Technologies Page 23 of


29
MULTIPLICATION TABLE:

echo "<tr>";

for ($j = 0; $j <= 10; $j++) {

if ($i == 0 || $j == 0) {

$product = 0;

} else {

$product = $i * $j;

$class = (($i + $j) % 2 == 0) ? 'even' : 'odd';

echo "<td class='$class'>$product</td>";

echo "</tr>";

echo "</table>";

?>

Applications Development and Emerging Technologies Page 24 of


29
VII. QUESTION AND ANSWER

1. What is a variable?
- is a fundamental concept in computer programming. It's a symbolic name that represents a value
that can change or vary. Variables in programming are used to hold data that may be altered or
referenced inside a program.

2. What are the rules in creating a variable?


- The common rules for creating a variable in most programming laguanges are: Avoid special
characters, meaningful names, length limitations, reserved words and naming rules.
3. Is it important to know HTML and CSS before using PHP? Explain

Applications Development and Emerging Technologies Page 25 of


29
- Understanding HTML and CSS before understanding PHP dramatically improves one's ability to
create dynamic and visually appealing web apps. Mastery of these core technologies provides
developers with the necessary abilities to construct immersive and compelling user experiences
that smoothly integrate server-side logic and client-side display.

4. What is the difference between operator precedence and operator associativity?


- Operator precedence determines which operators in an expression are evaluated first. It creates a
hierarchy of operators depending on given rules. On the other hand, operator associativity specifies
the grouping and direction of operators with the same precedence level, ensuring that expressions
are evaluated predictably and unambiguously.

5. What are the different control structures? Explain each


- 1. Sequential
- - Sequential control structures execute statements in the order they appear in the code, from top to
bottom. This is the default behavior in most programming languages, where statements are
executed one after another without any branching or conditionality.
- 2. Selection (Conditional)
- - Selection structures allow the program to make decisions based on certain conditions. They
execute different sets of statements depending on whether a condition is true or false.
- Examples of selection structures include if and if-else statements.
- 3. Repetition (Iteration, Loop)
- - Repetition structures allow a set of statements to be executed repeatedly as long as a specified
condition is true. They are used for tasks that need to be performed multiple times. Examples are
while and for loop conditions.

6. Explain the rules of break, continue, and goto statements.

- 1. Break

Applications Development and Emerging Technologies Page 26 of


29
- - is used to terminate the execution of a loop prematurely when a certain condition is met.
- 2. Continue
- - is used to skip the current iteration of a loop and proceed to the next iteration.
- 3. GOTO
- - statement is a control flow statement that transfers control unconditionally to a labeled statement
elsewhere in the program.

VIII. REFERENCES

1. https://www.w3schools.com/php/func_string_echo.asp
2. https://www.w3schools.com/css/
3. https://www.w3schools.com/html/
4. https://www.w3schools.com/php/php_variables.asp
5. https://www.w3resource.com/php/operators/arithmetic-operators.php
6. https://www.tutorialspoint.com/php/php_arithmatic_operators_examples.htm
7. https://www.w3schools.com/php/php_if_else.asp
8. https://www.w3schools.com/php/php_switch.asp
9. https://www.w3schools.com/php/php_looping.asp
10. https://www.w3schools.com/php/php_looping_while.asp
11. https://www.w3schools.com/php/php_looping_do_while.asp
12. https://www.w3schools.com/php/php_looping_for.asp
13. https://www.w3schools.com/php/php_looping_foreach.asp
14. https://www.w3schools.com/php/php_looping_break.asp

Applications Development and Emerging Technologies Page 27 of


29
Note: The following rubrics/metrics will be used to grade students’ output.

Program (100 (Excellent) (Good) (Fair) (Poor)


pts.)

Applications Development and Emerging Technologies Page 28 of


29
Program Program executes Program executes Program executes Program does not
execution (20pts) correctly with no with less than 3 with more than 3 execute (10-11pts)
syntax or runtime errors (15-17pts) errors (12-14pts)
errors (18-20pts)
Correct output Program displays Output has minor Output has Output is incorrect
(20pts) correct output errors (15-17pts) multiple errors (10-11pts)
with no errors (12-14pts)
(18-20pts)
Design of output Program displays Program displays Program does not Output is poorly
(10pts) more than minimally display the designed (5pts)
expected (10pts) expected output required output
(8-9pts) (6-7pts)
Design of logic Program is Program has slight Program has Program is
(20pts) logically well logic errors that significant logic incorrect
designed do no significantly errors (3-5pts) (10-11pts)
(18-20pts) affect the results
(15-17pts)
Standards Program code is Few inappropriate Several Program is poorly
(20pts) stylistically well design choices inappropriate written (10-11pts)
designed (i.e. poor variable design choices
(18-20pts) names, improper (i.e. poor variable
indentation) names, improper
(15-17pts) indentation)
(12-14pts)
Delivery The program was The program was The program was The program was
(10pts) delivered on time. delivered a day delivered two delivered more
(10pts) after the deadline. days after the than two days
(8-9pts) deadline. (6-7pts) after the deadline.
(5pts)

Applications Development and Emerging Technologies Page 29 of


29

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy