0% found this document useful (0 votes)

8 views22 pages

PSA4 Technical - Predefined Functions

The document outlines a pre-summative assessment for a computer studies course focused on PHP predefined functions. It includes program and course outcomes, intended learning outcomes, a grading rubric, and a laboratory activity where students create web pages using PHP functions like include() and require(). The assessment emphasizes the design and implementation of web-based applications, integrating HTML and CSS with PHP code for storytelling purposes.

Uploaded by

202311645

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

8 views22 pages

PSA4 Technical - Predefined Functions

Uploaded by

202311645

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 22

DEPARTMENT OF COMPUTER STUDIES

(Applications Development and Emerging

Technologies)

PRE-SUMMATIVE ASSESSMENT

4
PHP PRE DEFINED FUNCTIONS

Student Name: Kristian David R. Bautista

Section: TN27
Professor: Ms. Marilyn Sanchez

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:
 To know how to include separate PHP code in the main page for code enhancement.
 To be familiar with the use of common predefined function such as define, include, and require.
 To use different available mathematical function for manipulating numbers.
IV. GRADING SYSTEM / RUBRIC (please see separate sheet)
V. LABORATORY ACTIVITY

1. Create 5 different short story webpages and convert your stories into a
web-based form, use include() and require() functions to connect all pages
integrate with HTML and CSS (Put images on the stories). See the format
below:

1.1. SCREENSHOTS

Applications Development and Emerging Technologies Page 2 of 22

Figure 1.1. Home Page

Figure 1.2. First Story

Applications Development and Emerging Technologies Page 3 of 22

Figure 1.3. Second Story

Figure 1.4. Third Story

Applications Development and Emerging Technologies Page 4 of 22

Figure 1.5. Fourth Story

Figure 1.6. Fifth Story

Applications Development and Emerging Technologies Page 5 of 22

1.2. SOURCE CODE

header.php
<header class="main-header">
<div class="header-content">
<div class="logo">
<a href="index.php">
<img src="images/logo.webp" alt="Genshin Impact" class="logo-img">
</a>
<link href="https://fonts.googleapis.com/css2?
family=Abhaya+Libre:ital,wght@0,800&display=swap" rel="stylesheet">
</div>
<nav class="main-nav">
<a href="skirk_story.php" class="nav-link">Skirk</a>
<a href="dahlia_story.php" class="nav-link">Dahlia</a>
<a href="shenhe_story.php" class="nav-link">Shenhe</a>
<a href="mavuika_story.php" class="nav-link">Mavuika</a>
<a href="emilie_story.php" class="nav-link">Emilie</a>
</nav>
<a href="https://genshin.hoyoverse.com/en/" class="reference-pill"
target="_blank">Reference</a>
</div>
</header>

footer.php
<footer class="main-footer">
<div class="footer-content">
<p><i>All assets are used for educational purposes only. All Rights reserved to
COGNOSPHERE.</i></p>
</div>
</footer>

Applications Development and Emerging Technologies Page 6 of 22

Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tales of Teyvat</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<?php include 'includes/header.php'; ?>

<main class="main-content">
<div class="hero-section">
<div class="character-showcase">
<img src="images/index.png" alt="Background" class="bg-image">
<div class="character-info">
<div class="stars">
</div>
<h1>Tales of Teyvat</h1>
<p class="description">
In the vast world of Teyvat, countless stories unfold. From the icy
peaks of Dragonspine
to the depths of the Abyss, each character carries their own tale
of triumph, loss, and destiny.
Discover the untold stories that shape their journeys.
</p>
<div class="character-nav">
<?php include 'includes/character_icons.php'; ?>
</div>
</div>
</div>
</div>
</main>

<?php include 'includes/footer.php'; ?>

</body>
</html>

story1.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skirk's Tale</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<?php require 'includes/header.php'; ?>

Applications Development and Emerging Technologies Page 7 of 22

<div class="character-title-section">
<div class="character-title-flex">
<img src="images/cryo.webp" class="character-logo">
<h1 class="character-name-large">Skirk</h1>
</div>
</div>

<div class="story-content-text">
<p>In the endless dark of the Abyss, Skirk stood still. A ripple in the
water warned her—another shadow beast drawn by her presence. She drew her blade slowly, its
glow piercing the gloom. One step. One breath. One strike. The beast fell.</p>

<p>She exhaled, calm. "Still not strong enough," she whispered to the dark.
Her eyes narrowed. Tartaglia had left this place.</p>

<p>But she remained. Waiting.</p>

</div>

For convenience, the rest of the source code of the stories two through five will not be
included as it is repetitive.

Applications Development and Emerging Technologies Page 8 of 22

styles.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1428 0%, #2d1b42 50%, #4a2c5a 100%);
color: white;
min-height: 100vh;
position: relative;
overflow-x: hidden;
}

/* Background Effects */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.2) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}

.reference-pill {
display: inline-block;
background: rgba(255,255,255,0.7);
color: #222;
border-radius: 999px;
padding: 10px 32px;
font-weight: bold;
font-size: 1.1rem;
margin-left: 32px;
transition: background 0.2s, box-shadow 0.2s;
cursor: pointer;
border: none;
text-decoration: none;
}
.reference-pill:hover {
background: #fff;
box-shadow: 0 0 10px #aeeaff;
cursor: pointer;
}

/* Header Styles */
.main-header {
background: rgba(26, 20, 40, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 0;

Applications Development and Emerging Technologies Page 9 of 22

position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}

.header-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}

.logo-img {
height: 47px;
width: 76px;
}

.main-nav {
display: flex;
gap: 2rem;
}

.nav-link {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-weight: 500;
padding: 0.5rem 1rem;
border: 1px solid transparent;
border-radius: 20px;
transition: all 0.3s ease;
position: relative;
}

.nav-link:hover, .nav-link.active {
color: #ffffff;
border-color: rgba(139, 92, 246, 0.5);
background: rgba(139, 92, 246, 0.2);
box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

/* Main Content */
.main-content {
margin-top: 80px;
min-height: calc(100vh - 80px);
}

.hero-section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.character-showcase {
position: relative;
width: 100%;

Applications Development and Emerging Technologies Page 10 of 22

height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

.character-info {
text-align: center;
max-width: 600px;
padding: 2rem;
background: rgba(26, 20, 40, 0.8);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.stars {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}

.stars img {
width: 100px;
height: auto;
}

.character-title-flex {
display: flex;
align-items: center;
gap: 20px;
}

.character-logo {
width: 52px;
height: 58.5px;
object-fit: contain;
}

.character-title, .character-name {
font-size: 1.2rem;
font-weight: bold;
color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.character-info h1 {
font-size: 3rem;

Applications Development and Emerging Technologies Page 11 of 22

margin-bottom: 1rem;
background: linear-gradient(45deg, #ffffff, #c8b6ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(200, 182, 255, 0.5);
}

.description {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
}

/* Character Icons */
.character-nav {
margin-top: 2rem;
}

.character-icons {
display: flex;
justify-content: center;
gap: 1rem;
}

.character-icon {
display: block;
transition: transform 0.3s ease;
}

.character-icon:hover {
transform: scale(1.1);
}

.character-icon .icon {
border-radius: 50%;
border: 2px solid transparent;
transition: all 0.3s ease;
}

.character-icon .icon:hover {
border-color: rgba(139, 92, 246, 0.8);
box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

/* Story Pages - New Layout */

.story-layout {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
}

.story-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

Applications Development and Emerging Technologies Page 12 of 22

z-index: -1;
}

.bg-image-story {
width: 1920px;
height: 1015px;
object-fit: cover;
object-position: center;
min-width: 100%;
min-height: 100%;
}

.story-left-content {
width: 50%;
height: 100%;
padding: 100px 80px 60px 200px;
display: flex;
flex-direction: column;
justify-content: flex-start;
z-index: 10;
margin-top: 20px;
}

.story-right-content {
position: absolute;
right: 0;
bottom: 0;
top: 0;
width: auto;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
pointer-events: none;
z-index: 2;
background: transparent;
}

/* Logo */
.story-logo {
margin-bottom: 40px;
}

.logo-story {
height: 50px;
width: auto;
}

/* Character Title Section */

.character-title-section {
margin-bottom: 30px;
}

.character-label {
font-size: 18px;
color: #ffffff;
font-weight: normal;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;

Applications Development and Emerging Technologies Page 13 of 22

}

.star-rating {
margin-bottom: 15px;
}

.star-image {
height: 30px;
width: auto;
}

.character-name-large {
font-family: 'Abhaya Libre', serif;
font-size: 4rem;
font-weight: bold;
color: #ffffff;
margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.rarity-image {
height: 40px;
width: auto;
}

/* Story Content */
.story-content-text {
max-width: 500px;
margin-bottom: 60px;
flex: 1;
}

.story-content-text p {
font-size: 16px;
line-height: 1.6;
color: #ffffff;
margin-bottom: 20px;
text-align: left;
}

/* Character Icons on Story Pages */

.character-icons-bottom {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 8px;
margin-top: 40px;
}

.character-icons-bottom img {
width: 90px;
height: 90px;
object-fit: contain;
border-radius: 50%;
transition: transform 0.2s, box-shadow 0.2s;
background: transparent;
box-sizing: border-box;
}

.icon-link {

Applications Development and Emerging Technologies Page 14 of 22

display: block;
transition: transform 0.2s ease;
}

.character-icon-img {
border-radius: 50%;
transition: all 0.3s ease;
cursor: pointer;
}

/* Character Image */
.character-image-container {
width: auto;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
overflow: visible;
background: transparent;
}

.character-main-image {
height: 95vh; /* or 100% if you want it to fill the height */
width: auto;
max-width: none;
object-fit: contain;
object-position: right bottom;
border: none;
background: transparent;
display: block;
pointer-events: none;
}

.navigation-buttons {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.story-navigation {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}

.nav-btn {
padding: 0.8rem 1.5rem;
background: rgba(139, 92, 246, 0.2);
border: 1px solid rgba(139, 92, 246, 0.5);
border-radius: 25px;
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}

.nav-btn:hover {
background: rgba(139, 92, 246, 0.4);
box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
transform: translateY(-2px);

Applications Development and Emerging Technologies Page 15 of 22

}

.home-btn {
background: rgba(255, 215, 0, 0.2);
border-color: rgba(255, 215, 0, 0.5);
}

.home-btn:hover {
background: rgba(255, 215, 0, 0.4);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Footer */
.main-footer {
background: rgba(26, 20, 40, 0.9);
backdrop-filter: blur(10px);
padding: 2rem 0;
text-align: center;
margin-top: 4rem;
}

.footer-content p {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}

@media (max-width: 768px) {

.header-content {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}

.main-nav {
gap: 1rem;
}

.nav-link {
padding: 0.4rem 0.8rem;
font-size: 0.9rem;
}

.character-info h1 {
font-size: 2rem;
}

.story-overlay {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}

.character-portrait img {
width: 150px;
height: 200px;
}

.story-info h1 {
font-size: 2rem;
}

Applications Development and Emerging Technologies Page 16 of 22

.character-icons {
gap: 0.5rem;
}

.character-icon .icon {
width: 50px;
height: 50px;
}

.story-navigation {
gap: 0.5rem;
}

.nav-btn {
padding: 0.6rem 1rem;
font-size: 0.
}
}

Applications Development and Emerging Technologies Page 17 of 22

2. Creation of String Function in PHP, create an array with 20 different names and
get the following:
 Number of characters of each name include spaces
 Change the first character of each name into upper case
 Replace all vowels with @ symbol
 Check the position of letter a
 Change the name into reverse formate
Please see the sample below

2.1. SCREENSHOT

2.2. SOURCE CODE

Applications Development and Emerging Technologies Page 18 of 22

index.php
<!DOCTYPE html>
<html>
<head>
<title>Teyvat Directory</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<?php
$names = [
"lumine", "aether", "venti", "zhongli", "childe", "albedo", "klee", "jean", "diluc",
"kaeya",
"amber", "mona", "qiqi", "keqing", "xiao", "ganyu", "hutao", "yanfei", "eula", "ayaka"
];

function replace_vowels($str) {
return preg_replace('/[aeiou]/i', '@', $str);
}

<h1>Teyvat Chronicled Directory</h1>

<?php

echo '<table>
<tr>
<th>Name</th>
<th>Number of characters</th>
<th>Uppercase first character</th>
<th>Replace vowels with @</th>
<th>Check position of character "a"</th>
<th>Reverse name</th>
</tr>';

foreach ($names as $name) {

$num_chars = strlen($name);
$ucfirst = ucfirst($name);
$vowel_replaced = replace_vowels($name);
$pos_a = strpos($name, 'a');
$pos_a_display = ($pos_a !== false) ? $pos_a + 1 : "None";
$reverse = strrev($name);

echo "<tr>
<td>$name</td>
<td>$num_chars</td>
<td>$ucfirst</td>
<td>$vowel_replaced</td>
<td>$pos_a_display</td>
<td>$reverse</td>
</tr>";
}
echo '</table>';
?>
</body>
</html>

styles.css

Applications Development and Emerging Technologies Page 19 of 22

body {
background: url('background.png') center center/cover no-repeat;
}

h1 {
text-align: center;
color: #fff;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 2.5em;
}

table {
border-collapse: collapse;
width: 90%;
margin: 40px auto;
background: #232946;
color: #fff;
font-family: 'Segoe UI', Arial, sans-serif;
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
border-radius: 12px;
overflow: hidden;
}
caption {
font-size: 1.6em;
font-weight: bold;
margin-bottom: 16px;
color: #eebd35;
letter-spacing: 1px;
padding: 16px 0 0 0;
}
th, td {
padding: 14px 18px;
border-bottom: 1px solid #393e5c;
text-align: center;
}
th {
background: #393e5c;
color: #eebd35;
font-size: 1.1em;
}
tr:last-child td {
border-bottom: none;
}
tr:nth-child(even) td {
background: #2d325a;
}
td {
font-size: 1em;
}

VII. QUESTION AND ANSWER

1. What is Constant in PHP

Applications Development and Emerging Technologies Page 20 of 22

A constant in PHP is an identifier (name) for a simple value that cannot be changed during the execution of the script.
It is defined using the define() function or the const keyword. It also does not start with a $ symbol. They can be used
across the entire script as it is automatically global. Constants are good when you want to repeatedly use a certain
value requiring no change.

2. What is the difference between include and require? Explain

In PHP, both include and require are used to insert the contents of one PHP file into another. The key difference lies
in how they handle errors. When a file is not found, include will emit a warning but the script will continue to execute,
which makes it useful when the file is not essential. On the other hand, require will produce a fatal error and stop the
execution of the script entirely, making it better suited for files that are critical to the application, such as configuration
files or core logic. Choosing between the two depends on how important the external file is to the flow of your
program.

3. What are the different string functions? Explain each

PREDEFINED FUNCTION DESCRIPTION

unset() destroys specified variable
explode() split a string by string
implode() join array elements to form a string
strlen() returns value length of a string
strpos() finds position of the first occurrence of a substring in a string
strrev() reverses a given string
strtolower() converts string to lowercase
strtoupper() converts string to uppercase
substr() returns part of a given string
ucfirst() make a string first character to uppercase
ucwords() capitalizes the first letter of each word in a string.
trim() stripped white spaces or other characters from the beginning and end of a string
ltrim() strip white spaces or other characters from the beginning of a string
rtrim() strip white spaces or other characters from the end of a string
strip_tags() strip HTML and PHP tags from a string

VIII. REFERENCES

1. https://www.w3schools.com/css/
2. https://www.w3schools.com/html/
3. https://www.w3schools.com/php/php_variables.asp
4. https://www.w3schools.com/php/php_constants.asp
5. https://www.w3schools.com/php/php_includes.asp
6. https://www.w3schools.com/php/php_string.asp

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 21 of 22

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-
syntax or runtime errors (15-17pts) errors (12-14pts) 11pts)
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 Program has Program is
(20pts) logically well slight logic errors significant logic incorrect (10-
designed (18- that do no errors (3-5pts) 11pts)
20pts) significantly
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 (18- (i.e. poor variable design choices
20pts) names, improper (i.e. poor variable
indentation) (15- names, improper
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)