0% found this document useful (0 votes)

54 views120 pages

Oyamats & Friends - ProjectPart5

The document provides instructions for a group project to develop a company website. It outlines requirements for the website to include server-side scripting with PHP to manage website content and records. It also requires a login page, file structure screenshots, and a video presentation explaining the full project.

Uploaded by

gabnarag2

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)

54 views120 pages

Oyamats & Friends - ProjectPart5

Uploaded by

gabnarag2

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/ 120

1

Technological Institute of the Philippines

938 Aurora Blvd. Cubao, Quezon City

College of Information Technology Education

IT 004– Web Systems and Technologies

Final Period

Developing Company Website

Instructions:
- Provide screenshots to satisfy the requirements. (note: include screenshot of source code and sample
run-time output in every source code and output changes)
- Include your FULLNAME in every screenshot.
- You are required to provide the screenshot of your source code for each file like (.html, .css, .js, .php)
and a sample output running in the browser.
- Include a brief description in each screenshot.
- Use the appropriate filename in saving your files.
- Validate your web pages (html document) using any validator tools like W3C Markup Validator Service,
FreeFormatter.com, etc.
- Save your work as Group#_ProjectPart5.DOCX (Ex. Group1_ProjectPart5.DOCX and .PDF)

This activity supports the attainment of Course Intended Learning Outcomes (CILOs):
1. Distinguish different client-side programming languages and other web GUI technologies.
2. Create and validate documents and generate content by integrating digital libraries.
3. Develop a web application and set up a web server to support server-side functionality and
configuration issues.

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
2

Requirements:

Part 1:

1. Open, continue, and finalize your project development with your group mates.
2. Collaborate with your groupmates and satisfy the following requirements.

3. As a team, use a server-side script like PHP in managing your website that can:
● Manage the website contents or records.

● Perform functions for Maintenance (User Maintenance, File Maintenance) like add, edit, and delete
functions).
o Minimum requirements:
▪ User maintenance – that can manage user accounts (ex. Customer Maintenance); and

▪ File Maintenance – at least one web page (ex. Product Maintenance, Room Maintenance,
Book Maintenance, etc.), as long as you perform and apply add, edit, and delete functions
in your project.
▪ Note: your system should upload or modify the image file.

4. Working Log-in Page (User Maintenance)

5. Provide screenshots of the following:

● Source codes in each file (like html, css, js, php, etc); and

● Screenshot of myphpadmin structures (table structures)

● Sample final output running on any web browser (note: provide sample screenshot of all web
pages).

6. Submit all the files related to your project like documents, html, css, js, php, etc.
7. Provide the specific contributions of each member. (use the template provided)
8. Acknowledge all your references.

Part 2:
1. Create a video presentation explaining all the contents of your project. Make sure all the requirements
from project part 2 to part 5 must be presented in the video presentation.
2. All members must present and participate in your project video presentation.
3. Record your system project using any video recorder, screen recorder, or any tools like Bandicam.
4. Save your video in .MP4 format.
5. Submit the video recording (.MP4) or link of your video (YouTube)

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
3

6. Save and submit the final revised documentation of your project. Filename:
Group#_FinalDocumentation.DOCX and .PDF files.

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
4

ANSWER:

Video Link:
<Paste here the link of the video saved in your google drive. Remove the restrictions of the
file for checking purposes>

Web Page 1: Login Page

Source Codes
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.
css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<link rel="icon" type="image/x-icon" href="IMAGES/LOGO1.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined" rel="stylesheet">
<title>Tamayo Institute</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1"><img src="IMAGES/LOGO1.png"
alt="">Tamayo Institute</span>
</nav>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
5

<div class="d-flex justify-content-center">

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
6

<label class="custom-control-label"
for="customControlInline">Remember me</label>
<a href="#" class="forgot">Forgot your
Password ?</a>
</div>
</div>
<div class="d-flex justify-content-center mt-3
login_container">
<button type="submit" name="login" class="btn
login_btn" >Login</button>
</div>
</form>
</div>

<div class="mt-4">
<div class="d-flex justify-content-center links">
Don't Have An Account Yet?<a href="signup.php"
class="ml-2">Signup</a>
</div>
<div class="d-flex justify-content-center links">
<a href="adminLogin.php">Sign In as Admin</a>
</div>
</div>
</div>
<?php
$num = 10;
$position = 97;
if (isset($_POST["login"])) {
$studId = $_POST["studNum"];
$email = $_POST["email"];
$password = $_POST["password"];
require_once "connect.php";
$result = mysqli_query($connect, "SELECT * FROM studAcc
WHERE studID = '$studId' AND email = '$email'");
$user = mysqli_fetch_array($result, MYSQLI_ASSOC);
$count = mysqli_num_rows($result);

if ($count == 1) {
echo '<script> window.location.href =
"home.php"</script>';

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
7

} else {
echo
'<script>
window.location.href = "login.php"
alert("Login Failed! Invalid Student Number or Email
or Password!")
</script>';
}
}
?>
</div>
</div>

body,
html {
margin: 0;
padding: 0;
height: 100%;
background: rgb(224, 224, 224) !important;
font-family: 'Montserrat', sans-serif;
}

.user_card {

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
8

height: 500px;
width: 600px;
margin-top: auto;
margin-bottom: 35%;
background: white;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,
0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0,
0, 0, 0.19);
border-radius: 5px;

.brand_logo_container {
position: absolute;
height: 170px;
width: 170px;
background: white;
border-radius: 5px;
top: -35px;
padding: 10px;
text-align: center;
}

.brand_logo {
height: 200px;
width: 200px;
position: relative;
left: -25px;
bottom: 25px;
}

.form_container {

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
9

margin-top: 100px;
}

form {
width: 450px;
}

.login_btn {
width: 40%;
background: #077FEF !important;
color: white !important;
}

.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}

.login_container {
padding: 0 2rem;
}

.input-group-text {
background: #077FEF !important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}

.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}

.custom-control-label::before {
position: absolute;
top: .25rem;
left: 0;
display: block;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
10

width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #535353;
border-color: #535353;
}

.custom-control-label::after {
position: absolute;
top: .25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
content: "";
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
border-color: #0042A4;
}

.custom-checkbox .custom-control-input:checked~.custom-control-
label::before {
background-color: #0042A4 !important;
}

.remember_me {
float: left;
}

.forgot {
float: right;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
11

color: #077FEF;
background-color: transparent;
}

a :hover {
color: #FF6868;
background-color: transparent;
text-decoration: underline;
}

a :active {
color: #c0392b;
background-color: transparent;
text-decoration: underline;
}

img {
height: 70px;
}

.adminTitle {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 30px;
}

$(document).ready(function(){
$('.header').height($(window).height());
})

function toLoginPage() {
window.location.href = "LoginPage.html";
}

function toHome() {
window.location.href = "Home.html";
}

const login = document.querySelector("#login");

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
12

function authentication() {
var studID = document.login.studNum.value;
var email = document.login.email.value;
var password = document.login.password.value;

if (studID.length == "" && email.length == "" && password.length == "")

{
alert("Text Field cannot be empty!");
return false;
} else {
if (studID.length == "") {
alert("Student Number is empty!");
}
if (email.length == "") {
alert("Email Address is empty!");
}
if (password.length == "") {
alert("Password is empty!");
}
}
}

Runtime Output

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
13

Web Page 2: Signup Page

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
14

</head>
<body>
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1"><img src="IMAGES/LOGO1.png"
alt="">Tamayo Institute</span>
</nav>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center">
<div class="brand_logo_container">
<img src="IMAGES/LOGO1.png" class="brand_logo"
alt="Logo">
</div>
</div>
<div class="d-flex justify-content-center form_container">
<form action="" name=signup method="post">
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i
class="fas fa-user"></i></span>
</div>
<input type="text" name="email" id="email"
class="form-control input_user" value="" placeholder="E-mail Address">
</div>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i
class="fas fa-user"></i></span>
</div>
<input type="text" name="fullName"
id="fullName" class="form-control input_user" value="" placeholder="Full
Name">
</div>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i
class="fas fa-key"></i></span>
</div>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
15

<input type="password" name="password"

id="password" class="form-control input_pass" value=""
placeholder="Password">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i
class="fas fa-key"></i></span>
</div>
<input type="password" name="confirm"
id="confirm" class="form-control input_pass" value="" placeholder="Confirm
Password">
</div>

<div class="d-flex justify-content-center mt-3

login_container">
<button type="submit" name="submit" class="btn
login_btn">Sign Up</button>
</div>
</form>
</div>

<div class="mt-4">
<div class="d-flex justify-content-center links">
Already have an account? <a href="login.php"
class="ml-2">Login</a>
</div>
<div class="d-flex justify-content-center links">
<a href="adminLogin.php">Sign In as Admin</a>
</div>
</div>
</div>
<?php
function randNumGenerator() {
return rand(1000000,9999999);
}

if (isset($_POST["submit"])) {

$studId = randNumGenerator();

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
16

$fullName = $_POST["fullName"];
$email = $_POST["email"];
$password = $_POST["password"];
$confirm = $_POST["confirm"];
$passwordHash = password_hash($password,
PASSWORD_DEFAULT);

$errors = array();

if (empty($fullName) OR empty($email) OR empty($password)

OR empty($confirm)) {
array_push($errors,"All fields are required");
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
array_push($errors, "Email is not valid");
}
if (strlen($password)<8) {
array_push($errors,"Password must be at least 8
charactes long");
}
if ($password!==$confirm) {
array_push($errors,"Password does not match");
}

require_once "connect.php";

$sql = "SELECT * FROM studAcc WHERE email = '$email'";

$result = mysqli_query($connect, $sql);
$rowCount = mysqli_num_rows($result);
$num = 10;
$position = 97;

if ($rowCount>0) {
array_push($errors,"Email already exists!");
}

if (count($errors)>0) {
foreach ($errors as $error) {

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
17

echo "<div class='alert alert-danger'

style='position: absolute; top: $position; z-index: $num;
opacity:0.8'>$error</div>";
$position = $position+51;
$num++;
}
} else {
$sql = "INSERT INTO studAcc (studID, fullName, email,
password) VALUES ( ?, ?, ?, ? )";
$stmt = mysqli_stmt_init($connect);
$prepareStmt = mysqli_stmt_prepare($stmt,$sql);
if ($prepareStmt) {
mysqli_stmt_bind_param($stmt,"ssss", $studId,
$fullName, $email, $passwordHash);
mysqli_stmt_execute($stmt);
echo "<div class='alert alert-success'
style='position: absolute; top: $position; z-index: $num; opacity:0.8'>You
are registered successfully. <br>Your Student Number: $studId</div>";

} else {
die("Something went wrong");
}
}
}
?>
</div>
</div>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
18

body,
html {
margin: 0;
padding: 0;
height: 100%;
background: rgb(224, 224, 224) !important;
font-family: 'Montserrat', sans-serif;
}

.user_card {
height: 500px;
width: 600px;
margin-top: auto;
margin-bottom: 35%;
background: white;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,
0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0,
0, 0, 0.19);
border-radius: 5px;

.brand_logo_container {
position: absolute;
height: 170px;
width: 170px;
background: white;
border-radius: 5px;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
19

top: -35px;
padding: 10px;
text-align: center;
}

.brand_logo {
height: 200px;
width: 200px;
position: relative;
left: -25px;
bottom: 25px;
}

.form_container {
margin-top: 100px;
}

form {
width: 450px;
}

.login_btn {
width: 40%;
background: #077FEF !important;
color: white !important;
}

.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}

.login_container {
padding: 0 2rem;
}

.input-group-text {
background: #077FEF !important;
color: white !important;
border: 0 !important;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
20

border-radius: 0.25rem 0 0 0.25rem !important;

}

.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}

.custom-control-label::before {
position: absolute;
top: .25rem;
left: 0;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #535353;
border-color: #535353;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
21

.custom-checkbox .custom-control-input:checked~.custom-control-
label::before {
background-color: #0042A4 !important;
}

.remember_me {
float: left;
}

.forgot {
float: right;
}

a{
color: #077FEF;
background-color: transparent;
}

a :hover {
color: #FF6868;
background-color: transparent;
text-decoration: underline;
}

a :active {
color: #c0392b;
background-color: transparent;
text-decoration: underline;
}

img {
height: 70px;
}

.adminTitle {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 30px;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
22

$(document).ready(function(){
$('.header').height($(window).height());
})

function toLoginPage() {
window.location.href = "LoginPage.html";
}

function toHome() {
window.location.href = "Home.html";
}

const login = document.querySelector("#login");

function authentication() {
var studID = document.login.studNum.value;
var email = document.login.email.value;
var password = document.login.password.value;

if (studID.length == "" && email.length == "" && password.length == "")

Runtime Output

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
23

Web Page 3: Admission Page

Source Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?
family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="IMAGES/LOGO1.ico">
<link rel="stylesheet" href="css/enroll.css">
<title>Tamayo Institute</title>
</head>
<body>
<nav class="navbar">

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
24

<div class="logo_item">
<img src="images/LOGO1.png" alt=""></i>Tamayo Institute
</div>
<div class="navbar_content">
<i class="bi bi-grid"></i>

<!-- <button class="returnBtn"><i class='bx bx-x-circle'

id="returnBtn"></i></button> -->
</div>
</nav>
<div class="main">
<div class="container">
<header>Admission Form</header>
<form action="#">
<div class="form first">
<div class="details personal">
<div class="fields">
<div class="input-field">
<label>First Name</label>
<input name="firstName" id="firstName"
type="text" placeholder="Enter your First Name" required>
</div>

<div class="input-field">
<label>Middle Initial</label>
<input name="mInitial" id="mInitial"
type="text" placeholder="Enter your Middle Initial" required>
</div>

<div class="input-field">
<label>E-mail Address</label>
<input name="email" id="email"
type="number" placeholder="Enter your E-mail" required>
</div>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
25

<div class="input-field">
<label for="email">Gender</label>
<select name="email" id="email" required>
<option disabled selected>Select
gender</option>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
</div>

<div class="input-field">
<label>Birthdate</label>
<input name="contactNo" id="contactNo"
type="date" placeholder="Enter birth date" required>
</div>
</div>
</div>

<div class="details ID">

<div class="fields">
<div class="input-field">
<label>Contact No.</label>
<input name="contactNo" id="contactNo"
type="text" placeholder="Enter your Contact No." required>
</div>

<div class="input-field">
<label>Parent/Guardian</label>
<input name="contactNo" id="contactNo"
type="text" placeholder="Enter your Parent/Guardian's Name" >
</div>

<div class="input-field">
<label>Parent's/Guardian's Contact
No.</label>
<input name="contactNo" id="contactNo"
type="number" placeholder="Enter Contact No.">
</div>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
26

</div>
<div class="buttonAndRedirect">
<button class="sumbit">
<span class="btnText">Submit</span>
</button>
<div class="redirectLinks">
<div class="d-flex justify-content-center
links">
Already have an account? <a
href="login.php" class="ml-2">Login</a>
</div>
<div class="d-flex justify-content-center
links">
<a href="adminLogin.php">Sign In as
Admin</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
27

const body = document.querySelector("body");

const darkLight = document.querySelector("#darkLight");
const form = document.querySelector("form");
const nextBtn = form.querySelector(".nextBtn");
const allInput = form.querySelectorAll(".first input");
const returnBtn = document.querySelector(".returnBtn");

nextBtn.addEventListener("click", ()=> {
allInput.forEach(input => {
if(input.value != ""){
form.classList.add('secActive');
}else{
form.classList.remove('secActive');
}
})
})

returnBtn.addEventListener("click", () => {
window.history.back();
})

var down = document.getElementById('geeks');

function gfg() {
var minm = 1000000;
var maxm = 9999999;
down.innerHTML = Math.floor(Math
.random() * (maxm - minm + 1)) + minm;
}

:root {
--body-color: #9e9ea4;
--sidebar-color: #fff;
--primary-color: #0042A4;
--primary-color-light: #8C8DB9;

--tran-02: all 0.2s ease;

--tran-03: all 0.3s ease;
--tran-04: all 0.4s ease;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
28

--tran-05: all 0.5s ease;

}

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

body {
margin: 0;
padding: 0;
background-color: #2b2b2b;
color: #9e9ea4;
font-family: 'Montserrat', sans-serif;
}

:root {
--textLight: white;
--container: #cccccc;
--reverse: white;
--header: #4070f4;
--navitems: #333;
--icon-color: #333;
--white-color: #fff;
--blue-color: #4070f4;
--grey-color: #707070;
--grey-color-light: #aaa;
}

body.dark {
background-color: #333;
}

body.dark {
--textLight: #2b2b2b;
--container: #cccccc;
--reverse: #333;
--header: white;
--icon-color: white;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
29

--navitems: #00BFFF;
--white-color: #333;
--blue-color: #4070f4;
--grey-color: #f2f2f2;
--grey-color-light: #aaa;
}

body{
background-color: #e7f2fd;
transition: all 0.5s ease;
}

nav {
height: 77px;
}

nav img {
width: 35px;
height: 35px;
border-radius: 50%;
}

.navbar {
position: fixed;
top: 0;
width: 100%;
left: 0;
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 30px;
z-index: 1000;
box-shadow: 0 0 2px var(--grey-color-light);
}

.logo_item {
display: flex;
align-items: center;
column-gap: 10px;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
30

font-size: 22px;
font-weight: 500;
color: var(--header);
}

.dashboard_items {
text-decoration: none;
color: var(--navitems);
}

.navbar_content {
display: flex;
align-items: center;
column-gap: 25px;
}

.navbar_content i {
cursor: pointer;
font-size: 20px;
color: var(--grey-color);
}

.returnBtn {
border: none;
margin: 0%;
padding: 0%;
background-color: transparent;
display: flex;
align-items: center;
color: var(--grey-color);
font-family: 'Montserrat', sans-serif;
size: 35px;
}

#returnBtn:hover {
background-color: var(black);
}

.main {
min-height: 85vh;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
31

display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.container{
position: relative;
max-width: 900px;
width: 100%;
height: 480px;
border-radius: 6px;
padding: 40px;
margin: 0 15px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.container header{
position: relative;
font-size: 20px;
font-weight: 600;
color: #333;
}

.container header::before{
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 3px;
width: 162px;
border-radius: 8px;
background-color: #4070f4;
}

.container form{
position: relative;
margin-top: 16px;
min-height: 400px;
background-color: #fff;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
32

overflow: hidden;
}

.container form .form{

position: absolute;
background-color: #fff;
transition: 0.3s ease;
}

.container form .form.second{

opacity: 0;
pointer-events: none;
transform: translateX(100%);
}

form.secActive .form.second{
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}

form.secActive .form.first{
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
}

.container form .title{

display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 500;
margin: 6px 0;
color: #333;
}

.container form .fields{

display: flex;
align-items: center;
justify-content: space-between;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
33

flex-wrap: wrap;
}

form .fields .input-field{

display: flex;
width: calc(100% / 3 - 15px);
flex-direction: column;
margin: 4px 0;
}

.input-field label{
font-size: 12px;
font-weight: 500;
color: #2e2e2e;
}
.input-field input, select{
outline: none;
font-size: 14px;
font-weight: 400;
color: #333;
border-radius: 5px;
border: 1px solid #aaa;
padding: 0 15px;
height: 42px;
margin: 8px 0;
}
.input-field input :focus,
.input-field select:focus{
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.input-field select,
.input-field input[type="date"]{
color: #707070;
}
.input-field input[type="date"]:valid{
color: #333;
}
.container form button, .backBtn{
display: flex;
align-items: center;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
34

justify-content: center;
height: 45px;
max-width: 200px;
width: 100%;
border: none;
outline: none;
color: #fff;
border-radius: 5px;
margin: 25px 0;
background-color: #4070f4;
transition: all 0.3s linear;
cursor: pointer;
}
.container form .btnText{
font-size: 14px;
font-weight: 400;
}
form button:hover{
background-color: #265df2;
}
form button i,
form .backBtn i{
margin: 0 6px;
}
form .backBtn i{
transform: rotate(180deg);
}
form .buttons{
display: flex;
align-items: center;
}
form .buttons button , .backBtn{
margin-right: 14px;
}

.buttonAndRedirect {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
35

.redirectLinks {
display: flex;
flex-direction: column;
justify-content: space-evenly;
max-width: 258px;
max-height: 45px;
align-items: flex-end;
}

a {
color: #077FEF;
background-color: transparent;
text-decoration: none;
}

@media (max-width: 750px) {

.container form{
overflow-y: scroll;
}
.container form::-webkit-scrollbar{
display: none;
}
form .fields .input-field{
width: calc(100% / 2 - 15px);
}
}

@media (max-width: 550px) {

form .fields .input-field{
width: 100%;
}
}

Runtime Output

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
36

Web Page 4: Home Page

Source Codes
<?php
session_start();
// if (!isset($_SESSION["user"])) {
// header("Location: login.php");
// }
?>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
37

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
38

</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="profile.php" class="dashboard_items">
<span class="navlink_icon">
<i class="bx bxs-user-rectangle"></i>
</span>
<span class="navlink">Profile</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="Courses.php" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bx-library'></i>
</span>
<span class="navlink">Courses</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="payment.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bxs-bank' ></i>
</span>
<span class="navlink">Pay Balance</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="Scholarships.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bxs-graduation' ></i>
</span>
<span class="navlink">Scholarships</span>
</a>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
39

</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="Settings.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bx-cog' ></i>
</span>
<span class="navlink">Settings</span>
</a>
</div>
</li>

</ul>

<div class="bottom_content">
<div class="bottom expand_sidebar">
<span> Expand</span>
<i class='bx bx-log-in' ></i>
</div>
<div class="bottom collapse_sidebar">
<span> Collapse</span>
<i class='bx bx-log-out'></i>
</div>
</div>
</div>
</nav>

<div class="main-cards">
<div class="card">
<div class="card-inner">
<table class="studInfo">
<thead>
<tr>
<?php
require_once "connect.php";

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
40

$studInfo = mysqli_query($connect, "SELECT * FROM

studAcc where studID = '4026092'");
while($row = mysqli_fetch_array($studInfo)) {
echo "<tr>";
echo "<th class='headInfo' style='width: 40%'>NAME: ";
echo $row["fullName"]; echo "</th>";
echo "<th class='headInfo' style='width: 30%'>PROGRAM:
"; echo $row["program"]; echo "</th>";
echo "<th class='headInfo' style='width: 30%'>YEAR
LEVEL: "; echo $row["yearLvl"]; echo "</th>";
echo "</tr>";
}
?>
</tr>
</thead>
</table>
</div>
</div>
</div>

<div class="card">
<table class="subjTable">
<thead>
<tr>
<th class="tableHead" style="width: 15%;">Course
Code</th>
<th class="tableHead" style="width: 45%;">Descriptive
Title</th>
<th class="tableHead" style="width: 10%;">Units</th>
<th class="tableHead" style="width: 30%;">Details</th>
</tr>
</thead>
<tbody>
<?php
require_once "connect.php";
$subjects = mysqli_query($connect, "SELECT * FROM
`subjects`");

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
41

while($row = mysqli_fetch_array($subjects)) {
echo "<tr>";
echo "<td>"; echo $row["courseCode"]; echo "</td>";
echo "<td>"; echo $row["descriptTitle"]; echo "</td>";
echo "<td>"; echo $row["units"]; echo "</td>";
echo "<td>"; echo $row["details"]; echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</main>

:root {
--body-color: #9e9ea4;
--sidebar-color: #fff;
--primary-color: #0042A4;
--primary-color-light: #8C8DB9;

--tran-02: all 0.2s ease;

--tran-03: all 0.3s ease;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
42

--tran-04: all 0.4s ease;

--tran-05: all 0.5s ease;
}

body {
margin: 0;
padding: 0;
color: #9e9ea4;
font-family: 'Montserrat', sans-serif;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;;
}
:root {
--cards-bg: #4997D0;
--textLight: white;
--container: #cccccc;
--reverse: white;
--header: #4070f4;
--navitems: #333;
--icon-color: #333;
--white-color: #fff;
--blue-color: #4070f4;
--grey-color: #707070;
--grey-color-light: #aaa;
}

body.dark {
background-color: #333;
}

body.dark {
/* --cards-bg: #0066CC; */
--textLight: #2b2b2b;
--container: #cccccc;
--reverse: #333;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
43

--header: white;
--icon-color: white;
--navitems: #00BFFF;
--white-color: #333;
--blue-color: #4997D0;
--grey-color: #f2f2f2;
--grey-color-light: #aaa;
}

body{
background-color: #e7f2fd;
transition: all 0.5s ease;
}
/* navbar */
.navbar {
position: fixed;
top: 0;
width: 100%;
left: 0;
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 30px;
z-index: 1000;
box-shadow: 0 0 2px var(--grey-color-light);
}
.logo_item {
display: flex;
align-items: center;
column-gap: 10px;
font-size: 22px;
font-weight: 500;
color: var(--header);
}
.navbar img {
width: 35px;
height: 35px;
border-radius: 50%;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
44

.search_bar {
height: 47px;
max-width: 430px;
width: 100%;
}
.search_bar input {
height: 100%;
width: 100%;
border-radius: 25px;
font-size: 18px;
outline: none;
background-color: var(--white-color);
color: var(--grey-color);
border: 1px solid var(--grey-color-light);
padding: 0 20px;
}
.navbar_content {
display: flex;
align-items: center;
column-gap: 25px;
}
.navbar_content i {
cursor: pointer;
font-size: 20px;
color: var(--grey-color);
}
/* sidebar */
.sidebar {
background-color: var(--white-color);
width: 260px;
position: fixed;
top: 0;
left: 0;
height: 100%;
padding: 80px 20px;
z-index: 100;
overflow-y: scroll;
box-shadow: 0 0 1px var(--grey-color-light);
transition: all 0.5s ease;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
45

.sidebar.close {
padding: 60px 0;
width: 80px;
}
.sidebar::-webkit-scrollbar {
display: none;
}
.menu_content {
position: relative;
}
.menu_title {
margin: 15px 0;
padding: 0 20px;
font-size: 18px;
}

.sidebar.close .menu_title {
padding: 6px 30px;
}

.menu_title::before {
color: var(--grey-color);
white-space: nowrap;
}

.menu_dahsboard::before {
content: "Dashboard";
}

.sidebar.close .menu_title::before {
content: "";
position: absolute;
height: 2px;
width: 18px;
border-radius: 12px;
background: var(--grey-color-light);
}
.menu_items {
margin-top: 10px;
padding: 0;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
46

list-style: none;
}

.dashboard_items {
text-decoration: none;
color: var(--navitems);
}

.dashboard_items:hover {
color: white;
display: flex;
align-items: center;
}

.navlink_icon {
position: relative;
font-size: 22px;
min-width: 50px;
line-height: 40px;
display: inline-block;
text-align: center;
border-radius: 6px;
color: var(--icon-color);
}
.navlink_icon::before {
content: "";
position: absolute;
height: 100%;
width: calc(100% + 100px);
left: -20px;
}
.navlink_icon:hover {
color: white;
}
.sidebar .nav_link {
display: flex;
align-items: center;
width: 100%;
padding: 4px 15px;
border-radius: 8px;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
47

text-decoration: none;
color: var(--grey-color);
white-space: nowrap;
height: 48;
}
.sidebar.close .navlink {
display: none;
}
.nav_link:hover {
color: var(--white-color);
background: var(--blue-color);
}
.sidebar.close .nav_link:hover {
background: var(--white-color);
}
.submenu_item {
cursor: pointer;
}
.submenu {
display: none;
}
.submenu_item .arrow-left {
position: absolute;
right: 10px;
display: inline-block;
margin-right: auto;
}
.sidebar.close .submenu {
display: none;
}
.show_submenu ~ .submenu {
display: block;
}
.show_submenu .arrow-left {
transform: rotate(90deg);
}
.submenu .sublink {
padding: 15px 15px 15px 52px;
}
.bottom_content {

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
48

position: fixed;
bottom: 60px;
left: 0;
width: 260px;
cursor: pointer;
transition: all 0.5s ease;
}
.bottom {
position: absolute;
display: flex;
align-items: center;
left: 0;
justify-content: space-around;
padding: 18px 0;
text-align: center;
width: 100%;
color: var(--grey-color);
border-top: 1px solid var(--grey-color-light);
background-color: var(--white-color);
}
.bottom i {
font-size: 20px;
}
.bottom span {
font-size: 18px;
}
.sidebar.close .bottom_content {
width: 50px;
left: 15px;
}
.sidebar.close .bottom span {
display: none;
}
.sidebar.hoverable .collapse_sidebar {
display: none;
}
#sidebarOpen {
display: none;
}
@media screen and (max-width: 768px) {

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
49

#sidebarOpen {
font-size: 25px;
display: block;
margin-right: 10px;
cursor: pointer;
color: var(--grey-color);
}
.sidebar.close {
left: -100%;
}
.search_bar {
display: none;
}
.sidebar.close .bottom_content {
left: -100%;
}
}

.main-container {
margin: 10% 7%;
padding: 20px 20px;
color: white;
position: relative;
left: 40px;
}

.charts {
display: block;
margin-top: 60px;
}

.card {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 25px;
border-radius: 10px;
background-color: var(--cards-bg);
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
50

.card_container {
background-color: var(--card-inner);
padding: 5px;
border-radius: 10px;
}

.sidenavLogo {
width: 150px;
}

.card-inner {
display: flex;
align-items: center;
justify-content: flex-start;
}

.card-inner-item {
min-height: 125px;
margin-left: 30px;
}

.card-inner > .material-icons-outlined {

font-size: 45px;
}

.profile_contents {
display: block;
margin-top: 60px;
}

.SUBJECTS {
height: auto;
padding: 10px;
border: #2b2b2b;
border-radius: 5px;
background-color: #cccccc;
display: grid;
/* grid-template-columns: .6fr 1.75fr .45fr 1.25fr; */

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
51

gap: 5px;

td {
padding: 15px 0px 15px 0px;
}

table.units {
text-align: center;
}

.subjTable {
color: white;
}

.tableHead {
text-align: start;
color: white;
}

.headInfo {
text-align: start;
color: white;
}

.studInfo {
width: 100%;
}

/* ---------- MEDIA QUERIES ---------- */

@media screen and (max-width: 992px) {

.grid-container {
grid-template-columns: 1fr;
grid-template-rows: 0.2fr 3fr;
grid-template-areas:
'header'
'main';
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
52

#sidebar {
display: none;
}

.menu-icon {
display: inline;
}

.sidebar-title > span {

display: inline;
}
}

@media screen and (max-width: 768px) {

.main-cards {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 0;
}

.charts {
grid-template-columns: 1fr;
margin-top: 30px;
}
}

@media screen and (max-width: 576px) {

.hedaer-left {
display: none;
}
}

const body = document.querySelector("body");

const darkLight = document.querySelector("#darkLight");
const sidebar = document.querySelector(".sidebar");
const submenuItems = document.querySelectorAll(".submenu_item");
const sidebarOpen = document.querySelector("#sidebarOpen");
const sidebarClose = document.querySelector(".collapse_sidebar");
const sidebarExpand = document.querySelector(".expand_sidebar");

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
53

sidebarOpen.addEventListener("click", () =>
sidebar.classList.toggle("close"));

sidebarClose.addEventListener("click", () => {
sidebar.classList.add("close", "hoverable");
});

sidebarExpand.addEventListener("click", () => {
sidebar.classList.remove("close", "hoverable");
});

sidebar.addEventListener("mouseenter", () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.remove("close");
}
});

sidebar.addEventListener("mouseleave", () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.add("close");
}
});

darkLight.addEventListener("click", () => {
body.classList.toggle("dark");
if (body.classList.contains("dark")) {
document.setI
darkLight.classList.replace("bx-sun", "bx-moon");
} else {
darkLight.classList.replace("bx-moon", "bx-sun");
}
});

submenuItems.forEach((item, index) => {

item.addEventListener("click", () => {
item.classList.toggle("show_submenu");
submenuItems.forEach((item2, index2) => {
if (index !== index2) {
item2.classList.remove("show_submenu");

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
54

}
});
});
});

if (window.innerWidth < 768) {

sidebar.classList.add("close");
} else {
sidebar.classList.remove("close");
}

Runtime Output

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
55

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
56

Web Page 5: Profile Page

Source Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Profile</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
57

<link rel="icon" type="image/x-icon" href="IMAGES/LOGO1.ico">

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
58

</span>
<span class="navlink">Profile</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="courses.php" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bx-library'></i>
</span>
<span class="navlink">Courses</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="payment.php" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bxs-bank' ></i>
</span>
<span class="navlink">Pay Balance</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="Scholarships.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bxs-graduation' ></i>
</span>
<span class="navlink">Scholarships</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="Settings.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bx-cog' ></i>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
59

</span>
<span class="navlink">Settings</span>
</a>
</div>
</li>

</ul>

<div class="main-cards">
<div class="card_container">
<div class="card">
<div class="card-inner">
<div class="circle_avatar"><img src="IMAGES/profilepic.png"
alt="Tamayo" class="profilepic"></div>
<div class="card-inner-item">
<ul class="profile_info_col">
<li class="profile_info">
<h3>NAME: James Karl Tamayo</h3>
</li>
<li class="profile_info">
<h3>PROGRAM: BS Information Technology</h3>
</li>
<li class="profile_info">
<h3>YEAR LEVEL: 2ND YEAR</h3>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
60

</li>
<li class="profile_info">
<h3>SEMESTER: 1ST SEMESTER</h3>
</li>
</ul>
</div>
</div>
<div class="profile_contents">
<div class="side_div">
<ul class="profileSide">
<li class="profSideContents">
<span>Contact: </span>
<span><?php //echo $_POST["contactNum"]; ?></span>
<span>09123456789</span>
</li>
<li class="profSideContents">
<span>Biography: </span>
<span><?php //echo $_POST["biography"]; ?></span>
<span>IT Student</span>
</li>
<li class="profSideContents">
<span>Enrollments: </span>
<span><?php //echo $_POST["enrollments"]; ?
></span>
<span>T.I.P.</span>
</li>
<li class="profSideContents">
<span>Links: </span>
<span><?php //echo $_POST["links"]; ?></span>
<span>None</span>
</li>
</ul>
</div>
<div class="main_div">
<ul class="basicInfo">
<li class="infoContents">
<span class = "infoContentsTitle">Full Name: </span>
<span> James Karl Tamayo</span>
</li>
<li class="infoContents">

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
61

<span class = "infoContentsTitle">Email Address:</span>

<span> [email protected]</span>
</li>
<li class="infoContents">
<span class = "infoContentsTitle">Student ID:</span>
<span> 1234567</span>
</li>
<li class="infoContents">
<span class = "infoContentsTitle">Password:</span>
<a href=""><span>Change Password</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>

:root {
--body-color: #9e9ea4;
--sidebar-color: #fff;
--primary-color: #0042A4;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
62

--primary-color-light: #8C8DB9;

--tran-02: all 0.2s ease;

--tran-03: all 0.3s ease;
--tran-04: all 0.4s ease;
--tran-05: all 0.5s ease;
}

body {
margin: 0;
padding: 0;
color: #9e9ea4;
font-family: 'Montserrat', sans-serif;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;;
}
:root {
--avatar-circle: #cccccc;
--card: #4997D0;
--textLight: white;
--container: #cccccc;
--card-inner: #cccccc;
--reverse: white;
--header: #4070f4;
--navitems: #333;
--icon-color: #333;
--white-color: #fff;
--blue-color: #4070f4;
--grey-color: #707070;
--grey-color-light: #aaa;
}

body.dark {
background-color: #333;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
63

body.dark {
--avatar-circle: #333;
--card: #1560BD;
--textLight: #2b2b2b;
--container: #cccccc;
--card-inner: #333;
--reverse: #333;
--header: white;
--icon-color: white;
--navitems: #00BFFF;
--white-color: #333;
--blue-color: #4070f4;
--grey-color: #f2f2f2;
--grey-color-light: #aaa;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
64

font-weight: 500;
color: var(--header);
}
.navbar img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.search_bar {
height: 47px;
max-width: 430px;
width: 100%;
}
.search_bar input {
height: 100%;
width: 100%;
border-radius: 25px;
font-size: 18px;
outline: none;
background-color: var(--white-color);
color: var(--grey-color);
border: 1px solid var(--grey-color-light);
padding: 0 20px;
}
.navbar_content {
display: flex;
align-items: center;
column-gap: 25px;
}
.navbar_content i {
cursor: pointer;
font-size: 20px;
color: var(--grey-color);
}
/* sidebar */
.sidebar {
background-color: var(--white-color);
width: 260px;
position: fixed;
top: 0;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
65

left: 0;
height: 100%;
padding: 80px 20px;
z-index: 100;
overflow-y: scroll;
box-shadow: 0 0 1px var(--grey-color-light);
transition: all 0.5s ease;
}
.sidebar.close {
padding: 60px 0;
width: 80px;
}
.sidebar::-webkit-scrollbar {
display: none;
}
.menu_content {
position: relative;
}
.menu_title {
margin: 15px 0;
padding: 0 20px;
font-size: 18px;
}

.sidebar.close .menu_title {
padding: 6px 30px;
}

.menu_title::before {
color: var(--grey-color);
white-space: nowrap;
}

.menu_dahsboard::before {
content: "Dashboard";
}

.sidebar.close .menu_title::before {
content: "";
position: absolute;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
66

height: 2px;
width: 18px;
border-radius: 12px;
background: var(--grey-color-light);
}
.menu_items {
margin-top: 10px;
padding: 0;
list-style: none;
}

.dashboard_items {
text-decoration: none;
color: var(--navitems);
}

.dashboard_items:hover {
color: white;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
67

.sidebar .nav_link {
display: flex;
align-items: center;
width: 100%;
padding: 4px 15px;
border-radius: 8px;
text-decoration: none;
color: var(--grey-color);
white-space: nowrap;
}
.sidebar.close .navlink {
display: none;
}
.nav_link:hover {
color: var(--white-color);
background: var(--blue-color);
}
.sidebar.close .nav_link:hover {
background: var(--white-color);
}
.submenu_item {
cursor: pointer;
}
.submenu {
display: none;
}
.submenu_item .arrow-left {
position: absolute;
right: 10px;
display: inline-block;
margin-right: auto;
}
.sidebar.close .submenu {
display: none;
}
.show_submenu ~ .submenu {
display: block;
}
.show_submenu .arrow-left {
transform: rotate(90deg);

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
68

}
.submenu .sublink {
padding: 15px 15px 15px 52px;
}
.bottom_content {
position: fixed;
bottom: 60px;
left: 0;
width: 260px;
cursor: pointer;
transition: all 0.5s ease;
}
.bottom {
position: absolute;
display: flex;
align-items: center;
left: 0;
justify-content: space-around;
padding: 18px 0;
text-align: center;
width: 100%;
color: var(--grey-color);
border-top: 1px solid var(--grey-color-light);
background-color: var(--white-color);
}
.bottom i {
font-size: 20px;
}
.bottom span {
font-size: 18px;
}
.sidebar.close .bottom_content {
width: 50px;
left: 15px;
}
.sidebar.close .bottom span {
display: none;
}
.sidebar.hoverable .collapse_sidebar {
display: none;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
69

}
#sidebarOpen {
display: none;
}
@media screen and (max-width: 768px) {
#sidebarOpen {
font-size: 25px;
display: block;
margin-right: 10px;
cursor: pointer;
color: var(--grey-color);
}
.sidebar.close {
left: -100%;
}
.search_bar {
display: none;
}
.sidebar.close .bottom_content {
left: -100%;
}
}

.main-container {
margin: 5% 7%;
padding: 20px 20px;
color: white;
position: relative;
left: 40px;
}

.profile_cont {
margin: 20px 0;
}

.circle_avatar{
border-radius: 50%;
background-color: var(--avatar-circle);
display: flex;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
70

.profilepic {
padding: 10px;
border-radius: 50%;
}

.profile_info_col {
list-style-type:disc;
justify-content: space-around;
}

.profile_info {
margin-bottom: 10px;
}

.main-cards {
display: block;
margin: 20px 0;
}

.charts {
display: block;
margin-top: 60px;
}

.card {
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 25px;
border-radius: 10px;
background-color: var(--card);
}

.card_container {
background-color: var(--card-inner);
padding: 5px;
border-radius: 10px;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
71

.sidenavLogo {
width: 150px;
}

.card-inner {
display: flex;
align-items: center;
justify-content: flex-start;
}

.card-inner-item {
min-height: 125px;
margin-left: 30px;
}

.card-inner > .material-icons-outlined {

font-size: 45px;
}

.SUBJECTS {
height: auto;
padding: 10px;
border: #2b2b2b;
border-radius: 5px;
background-color: #cccccc;
display: grid;
grid-template-columns: .6fr 1.75fr .45fr 1.25fr;
gap: 5px;

td {
padding: 15px 0px 15px 0px;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
72

table.units {
text-align: center;
}

#courses {
height: 610px;
display: flex;
flex-direction: column;
justify-content: start;
padding: 25px;
border-radius: 5px;
background-color: #0042A4;
}

.profile_contents {
display: flex;
padding: 10px;
justify-content: space-between;
border-top: #e7f2fd solid 2px;
}

.side_div {
width: 350px;
background-color: #e7f2fd;
color: #000;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
border: 2px solid var(--header);
border-radius: 10px 0px 0px 10px;
padding: 20px;
margin-right: 10px;
}

.profileSide {
margin: 10px;
width: 100%;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
73

ul {
list-style-type: none;
}

li {
min-height: 48px;
display: flex;
align-items: center;
}

.main_div {
width: 900px;
background-color: #e7f2fd;
color: #000;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
border: 2px solid var(--header);
border-radius: 0px 10px 10px 0px;
padding: 20px;
}

/* ---------- MEDIA QUERIES ---------- */

@media screen and (max-width: 992px) {

.grid-container {
grid-template-columns: 1fr;
grid-template-rows: 0.2fr 3fr;
grid-template-areas:
'header'
'main';
}

#sidebar {
display: none;
}

.menu-icon {
display: inline;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
74

.sidebar-title > span {

display: inline;
}
}

@media screen and (max-width: 768px) {

.main-cards {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 0;
}

.charts {
grid-template-columns: 1fr;
margin-top: 30px;
}
}

@media screen and (max-width: 576px) {

.hedaer-left {
display: none;
}
}

const body = document.querySelector("body");

sidebarOpen.addEventListener("click", () =>
sidebar.classList.toggle("close"));

sidebarClose.addEventListener("click", () => {
sidebar.classList.add("close", "hoverable");
});

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
75

sidebarExpand.addEventListener("click", () => {
sidebar.classList.remove("close", "hoverable");
});

sidebar.addEventListener("mouseenter", () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.remove("close");
}
});

sidebar.addEventListener("mouseleave", () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.add("close");
}
});

submenuItems.forEach((item, index) => {

item.addEventListener("click", () => {
item.classList.toggle("show_submenu");
submenuItems.forEach((item2, index2) => {
if (index !== index2) {
item2.classList.remove("show_submenu");
}
});
});
});

if (window.innerWidth < 768) {

sidebar.classList.add("close");

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
76

} else {
sidebar.classList.remove("close");
}

Runtime Output

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
77

Web Page 6: Courses Page

Source Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Courses</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
78

<link rel="icon" type="image/x-icon" href="IMAGES/LOGO1.ico">

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
79

</span>
<span class="navlink">Profile</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="Courses.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bx-library'></i>
</span>
<span class="navlink">Courses</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="payment.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bxs-bank' ></i>
</span>
<span class="navlink">Pay Balance</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="Scholarships.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bxs-graduation' ></i>
</span>
<span class="navlink">Scholarships</span>
</a>
</div>
</li>
<li class="item">
<div class="nav_link submenu_item">
<a href="Settings.html" class="dashboard_items">
<span class="navlink_icon">
<i class='bx bx-cog' ></i>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
80

</span>
<span class="navlink">Settings</span>
</a>
</div>
</li>

</ul>

<main class="main-container">
<div class="container mt-5">
<h1 class="text-center">Course Management System</h1>
<div class="row mt-4">
<div class="col-md-12">
<h2 class="subjectss">Subjects</h2>
<table class="table table-bordered">
<thead>
<tr>
<th class="tableHead" style="width:
15%">Course Code</th>
<th class="tableHead" style="width:
40%">Descriptive Title</th>
<th class="tableHead" style="width:
10%">Units</th>
<th class="tableHead" style="width:
25%">Details</th>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
81

<th class="tableHead" style="width:

10%">Grades</th>
</tr>
</thead>
<tbody id="subject-list">
<?php
require_once "connect.php";
$subjects = mysqli_query($connect, "SELECT * FROM
`subjects`");
while($row = mysqli_fetch_array($subjects)) {
echo "<tr>";
echo "<td class='subjTableCont'>"; echo
$row["courseCode"]; echo "</td>";
echo "<td class='subjTableCont'>"; echo
$row["descriptTitle"]; echo "</td>";
echo "<td class='subjTableContUnits'>"; echo
$row["units"]; echo "</td>";
echo "<td class='subjTableCont'>"; echo
$row["details"]; echo "</td>";
echo "<td class='subjTableCont'>"; echo
$row["grades"]; echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</main>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
82

:root {
--body-color: #9e9ea4;
--sidebar-color: #fff;
--primary-color: #0042A4;
--primary-color-light: #8C8DB9;

--tran-02: all 0.2s ease;

--tran-03: all 0.3s ease;
--tran-04: all 0.4s ease;
--tran-05: all 0.5s ease;
}

body {
margin: 0;
padding: 0;
background-color: #2b2b2b;
color: #9e9ea4;
font-family: 'Montserrat', sans-serif;
}

.material-icons-outlined {
vertical-align: middle;
line-height: 1px;
font-size: 35px;
}

.header {
grid-area: header;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px 0 30px;
box-shadow: 0 6px 7px -3px rgba(0, 0, 0, 0.35);
}

* {
margin: 0;
padding: 0;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
83

box-sizing: border-box;
font-family: 'Montserrat', sans-serif;;
}
:root {
--header: #4070f4;
--navitems: #333;
--icon-color: #333;
--white-color: #fff;
--blue-color: #4070f4;
--grey-color: #707070;
--grey-color-light: #aaa;
}
body {
background-color: #e7f2fd;
transition: all 0.5s ease;
}
body.dark {
background-color: #333;
}
body.dark {
--header: white;
--icon-color: white;
--navitems: #00BFFF;
--white-color: #333;
--blue-color: #4070f4;
--grey-color: #f2f2f2;
--grey-color-light: #aaa;
}
/* navbar */
.navbar {
position: fixed;
top: 0;
width: 100%;
left: 0;
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 30px;
z-index: 1000;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
84

box-shadow: 0 0 2px var(--grey-color-light);

}
.logo_item {
display: flex;
align-items: center;
column-gap: 10px;
font-size: 22px;
font-weight: 500;
color: var(--header);
}
.navbar img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.search_bar {
height: 47px;
max-width: 430px;
width: 100%;
}
.search_bar input {
height: 100%;
width: 100%;
border-radius: 25px;
font-size: 18px;
outline: none;
background-color: var(--white-color);
color: var(--grey-color);
border: 1px solid var(--grey-color-light);
padding: 0 20px;
}
.navbar_content {
display: flex;
align-items: center;
column-gap: 25px;
}
.navbar_content i {
cursor: pointer;
font-size: 20px;
color: var(--grey-color);

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
85

}
/* sidebar */
.sidebar {
background-color: var(--white-color);
width: 260px;
position: fixed;
top: 0;
left: 0;
height: 100%;
padding: 80px 20px;
z-index: 100;
overflow-y: scroll;
box-shadow: 0 0 1px var(--grey-color-light);
transition: all 0.5s ease;
}
.sidebar.close {
padding: 60px 0;
width: 80px;
}
.sidebar::-webkit-scrollbar {
display: none;
}
.menu_content {
position: relative;
}
.menu_title {
margin: 15px 0;
padding: 0 20px;
font-size: 18px;
}

.sidebar.close .menu_title {
padding: 6px 30px;
}

.menu_title::before {
color: var(--grey-color);
white-space: nowrap;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
86

.menu_dahsboard::before {
content: "Dashboard";
}

.sidebar.close .menu_title::before {
content: "";
position: absolute;
height: 2px;
width: 18px;
border-radius: 12px;
background: var(--grey-color-light);
}
.menu_items {
margin-top: 10px;
padding: 0;
list-style: none;
}

.dashboard_items {
text-decoration: none;
color: var(--navitems);
}

.dashboard_items:hover {
color: white;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
87

height: 100%;
width: calc(100% + 100px);
left: -20px;
}
.navlink_icon:hover {
color: white;
}
.sidebar .nav_link {
display: flex;
align-items: center;
width: 100%;
padding: 4px 15px;
border-radius: 8px;
text-decoration: none;
color: var(--grey-color);
white-space: nowrap;
}
.sidebar.close .navlink {
display: none;
}
.nav_link:hover {
color: var(--white-color);
background: var(--blue-color);
}
.sidebar.close .nav_link:hover {
background: var(--white-color);
}
.submenu_item {
cursor: pointer;
}
.submenu {
display: none;
}
.submenu_item .arrow-left {
position: absolute;
right: 10px;
display: inline-block;
margin-right: auto;
}
.sidebar.close .submenu {

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
88

display: none;
}
.show_submenu ~ .submenu {
display: block;
}
.show_submenu .arrow-left {
transform: rotate(90deg);
}
.submenu .sublink {
padding: 15px 15px 15px 52px;
}
.bottom_content {
position: fixed;
bottom: 60px;
left: 0;
width: 260px;
cursor: pointer;
transition: all 0.5s ease;
}
.bottom {
position: absolute;
display: flex;
align-items: center;
left: 0;
justify-content: space-around;
padding: 18px 0;
text-align: center;
width: 100%;
color: var(--grey-color);
border-top: 1px solid var(--grey-color-light);
background-color: var(--white-color);
}
.bottom i {
font-size: 20px;
}
.bottom span {
font-size: 18px;
}
.sidebar.close .bottom_content {
width: 50px;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
89

left: 15px;
}
.sidebar.close .bottom span {
display: none;
}
.sidebar.hoverable .collapse_sidebar {
display: none;
}
#sidebarOpen {
display: none;
}
@media screen and (max-width: 768px) {
#sidebarOpen {
font-size: 25px;
display: block;
margin-right: 10px;
cursor: pointer;
color: var(--grey-color);
}
.sidebar.close {
left: -100%;
}
.search_bar {
display: none;
}
.sidebar.close .bottom_content {
left: -100%;
}
}

.main-container {
margin: 10% 7%;
padding: 10px 10px;
color: var(--icon-color);
position: relative;
left: 40px;
background-color: #333;
border-radius: 10px;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
90

.container {
color: #2b2b2b;
background-color: white;
border-radius: 10px;
padding: 10px;
}

table {
border: 2px solid #4070f4;
border-radius: 10;
}

thead {
background-color: #4070f4;
}

.text-center, .subjectss {
color: #0042A4;
}

.sidenavLogo {
width: 150px;
}

.SUBJECTS {
height: auto;
padding: 10px;
border: #2b2b2b;
border-radius: 5px;
background-color: #cccccc;
display: grid;
grid-template-columns: .6fr 1.75fr .45fr 1.25fr;
gap: 5px;

td {
padding: 15px 0px 15px 0px;
}

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
91

table.units {
text-align: center;
}

#courses {
height: 610px;
display: flex;
flex-direction: column;
justify-content: start;
padding: 25px;
border-radius: 5px;
background-color: #0042A4;
}

.tableHead {
text-align: start;
color: white;
padding: 10px;
}

table {
width: 100%;
}

.subject-list {
color: white;
text-align: start;
padding: 10px;
}

.subjTableCont{
padding-left: 10px;
}

.subjTableContUnits{
padding-left: 20px;
}

/* ---------- MEDIA QUERIES ---------- */

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
92

/* Medium <= 992px */

@media screen and (max-width: 992px) {

.grid-container {
grid-template-columns: 1fr;
grid-template-rows: 0.2fr 3fr;
grid-template-areas:
'header'
'main';
}

#sidebar {
display: none;
}

.menu-icon {
display: inline;
}

.sidebar-title > span {

display: inline;
}
}

/* Small <= 768px */

@media screen and (max-width: 768px) {

.main-cards {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 0;
}

.charts {
grid-template-columns: 1fr;
margin-top: 30px;
}
}

/* Extra Small <= 576px */

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
93

@media screen and (max-width: 576px) {

.hedaer-left {
display: none;
}
}

const body = document.querySelector("body");

sidebarOpen.addEventListener("click", () =>
sidebar.classList.toggle("close"));

sidebarClose.addEventListener("click", () => {
sidebar.classList.add("close", "hoverable");
});

sidebarExpand.addEventListener("click", () => {
sidebar.classList.remove("close", "hoverable");
});

sidebar.addEventListener("mouseenter", () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.remove("close");
}
});

sidebar.addEventListener("mouseleave", () => {
if (sidebar.classList.contains("hoverable")) {
sidebar.classList.add("close");
}
});

darkLight.addEventListener("click", () => {
body.classList.toggle("dark");

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
94

if (body.classList.contains("dark")) {
document.setI
darkLight.classList.replace("bx-sun", "bx-moon");

} else {
darkLight.classList.replace("bx-moon", "bx-sun");
}
});

submenuItems.forEach((item, index) => {

item.addEventListener("click", () => {
item.classList.toggle("show_submenu");
submenuItems.forEach((item2, index2) => {
if (index !== index2) {
item2.classList.remove("show_submenu");
}
});
});
});

if (window.innerWidth < 768) {

sidebar.classList.add("close");
} else {
sidebar.classList.remove("close");
}

Runtime Output

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
95

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
96

Web Page 7: Payment Page

Source Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tamayo Institute</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min
.css">
<link rel="stylesheet"
href="https://bootswatch.com/4/cosmo/bootstrap.min.css">
<link rel="icon" type="image/x-icon" href="IMAGES/LOGO1.ico">
<link rel="stylesheet" href="css/payment.css">
</head>
<body>
<nav class="navbar">
<div class="logo_item">
<img src="images/LOGO1.png" alt=""></i>Tamayo Institute
</div>
<div class="search_bar">
<input type="text" placeholder="Search" />
</div>
<div class="navbar_content">
<i class="bi bi-grid"></i>
<i class='bx bx-sun' id="darkLight"></i>
<img src="images/profile_dummy.png" alt="" class="profile" />
<i class='bx bx-x-circle' id="exit"></i>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
97

</div>
</nav>
<div class="container mt-5">
<div class="card">
<div class="card-header text-white text-center">
<h2 class="mb-0">Enrollment Payment</h2>
</div>
<div class="card-body">
<form id="paymentForm">
<div class="form-group">
<label for="studentName">Student Name</label>
<input type="text" class="form-control"
id="studentName" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="course">Course</label>
<input type="text" class="form-control"
id="course" placeholder="Enter the course name" required>
</div>
<div class="form-group">
<label for="amount">Amount</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control"
id="amount" placeholder="Enter the amount" required>
</div>
</div>
<div class="form-group">
<label for="creditCardType">Credit Card
Type</label>
<select class="form-control" id="creditCardType"
required>
<option value="" selected disabled>Select Card
Type</option>
<option value="visa">Visa</option>
<option value="mastercard">MasterCard</option>
<option value="amex">American Express</option>
</select>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
98

</div>
<div class="form-group">
<label for="cardNumber">Card Number</label>
<input type="text" class="form-control"
id="cardNumber" placeholder="Enter your card number" required>
</div>
<button type="button" class="btn btn-block"
onclick="processPayment()">Submit Payment</button>
</form>
</div>
</div>
</div>

const formData = {
studentName: document.getElementById('studentName').value,
course: document.getElementById('course').value,
amount: document.getElementById('amount').value,
creditCardType:
document.getElementById('creditCardType').value,
cardNumber: document.getElementById('cardNumber').value,
};

console.log(formData);
alert('Payment processed successfully!');
}
</script>
</body>
</html>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
99

:root {
--body-color: #9e9ea4;
--sidebar-color: #fff;
--primary-color: #0042A4;
--primary-color-light: #8C8DB9;

--tran-02: all 0.2s ease;

--tran-03: all 0.3s ease;
--tran-04: all 0.4s ease;
--tran-05: all 0.5s ease;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;;
}

:root {
--header: #4070f4;
--navitems: #333;
--icon-color: #333;
--white-color: #fff;
--blue-color: #4070f4;
--grey-color: #707070;
--grey-color-light: #aaa;
--whiteblack: #fff;
}
body {
background-color: #e7f2fd;
transition: all 0.5s ease;
}
body.dark {
background-color: #333;
}
body.dark {
--header: white;
--icon-color: white;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
100

--navitems: #00BFFF;
--white-color: #333;
--blue-color: #4070f4;
--grey-color: #f2f2f2;
--grey-color-light: #aaa;
--whiteblack: #414141;
}

body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}

.logo_item {
display: flex;
align-items: center;
column-gap: 10px;
font-size: 22px;
font-weight: 500;
color: var(--header);
}

.navbar img {
width: 35px;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
101

height: 35px;
border-radius: 50%;
}

.search_bar {
height: 47px;
max-width: 430px;
width: 100%;
}

.search_bar input {
height: 100%;
width: 100%;
border-radius: 25px;
font-size: 18px;
outline: none;
background-color: var(--white-color);
color: var(--grey-color);
border: 1px solid var(--grey-color-light);
padding: 0 20px;
}

.navbar_content {
display: flex;
align-items: center;
column-gap: 25px;
}

.navbar_content i {
cursor: pointer;
font-size: 20px;
color: var(--grey-color);
}

body {
padding-top: 150px;
}

.card-header {
background-color: #00BFFF;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
102

color: var(--whiteblack);
}

.btn {
background-color: #00BFFF;
color: white;
}

.btn:hover {
background-color: #4070f4;
color: white;
}

const body = document.querySelector("body");

const darkLight = document.querySelector("#darkLight");
const exit = document.querySelector("#exit");

darkLight.addEventListener("click", () => {
body.classList.toggle("dark");
if (body.classList.contains("dark")) {
document.setI
darkLight.classList.replace("bx-sun", "bx-moon");

} else {
darkLight.classList.replace("bx-moon", "bx-sun");
}
});

exit.addEventListener("click", () => {
window.location.href="home.php";
})

Runtime Output

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
103

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
104

Web Page 8: Settings Page

Source Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Settings</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="IMAGES/LOGO1.ico">
<link rel="stylesheet" href="css/settings.css">
</head>
<body>
<nav class="navbar">
<div class="logo_item">
<img src="images/LOGO1.png" alt=""></i>Tamayo Institute
</div>
<div class="navbar_content">
<i class="bi bi-grid"></i>
<i class='bx bx-sun' id="darkLight"></i>
<i class='bx bx-x-circle' id="exit"></i>
</div>
</nav>

<div class="container">
<div class="card mt-4">
<div class="card-header text-center rounded-top">
<h2 class="mb-0 form-title">User Settings</h2>
</div>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
105

<div class="card-body">
<form>
<div class="form-group">
<label for="notificationPreferences">Notification
Preferences:</label>
<select class="form-control" id="notificationPreferences"
name="notificationPreferences">
<option value="email">Receive notifications via
Email</option>
<option value="sms">Receive notifications via SMS</option>
<option value="email">Receive notifications via Both Email
and SMS</option>
<option value="none">Do not receive notifications</option>
</select>
</div>

<div class="form-group">
<label for="profileVisibility">Profile Visibility:</label>
<select class="form-control" id="profileVisibility"
name="profileVisibility">
<option value="public">Public</option>
<option value="private">Private</option>
</select>
</div>

<div class="form-group">
<label for="emailPreferences">Email Preferences:</label>
<div class="form-check">
<input type="checkbox" class="form-check-input"
id="emailNewsletter" name="emailNewsletter">
<label class="form-check-label"
for="emailNewsletter">Subscribe to newsletter</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input"
id="emailPromotions" name="emailPromotions">
<label class="form-check-label"
for="emailPromotions">Receive promotional emails</label>
</div>
</div>

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
106

<div class="form-group">
<label for="customSignature">Custom Email Signature:</label>
<textarea class="form-control" id="customSignature"
name="customSignature" rows="3"></textarea>
</div>

<div class="text-center">
<button type="submit" class="btn btn-primary">Save
Settings</button>
</div>
</form>
</div>
</div>
</div>

</body>
</html>

:root {
--body-color: #9e9ea4;
--sidebar-color: #fff;
--primary-color: #0042A4;
--primary-color-light: #8C8DB9;

--tran-02: all 0.2s ease;

--tran-03: all 0.3s ease;
--tran-04: all 0.4s ease;
--tran-05: all 0.5s ease;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
107

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;;
}

body {
margin: 0;
padding: 0;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
108

font-family: 'Montserrat', sans-serif;

transition: background-color 0.3s ease, color 0.3s ease;
}

.logo_item {
display: flex;
align-items: center;
column-gap: 10px;
font-size: 22px;
font-weight: 500;
color: var(--header);
}

.navbar img {
width: 35px;
height: 35px;
border-radius: 50%;
}

.search_bar {
height: 47px;
max-width: 430px;
width: 100%;
}

.search_bar input {

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
109

height: 100%;
width: 100%;
border-radius: 25px;
font-size: 18px;
outline: none;
background-color: var(--white-color);
color: var(--grey-color);
border: 1px solid var(--grey-color-light);
padding: 0 20px;
}

.navbar_content {
display: flex;
align-items: center;
column-gap: 25px;
}

.navbar_content i {
cursor: pointer;
font-size: 20px;
color: var(--grey-color);
}

.container {
max-width: 600px;
margin: auto;
margin-top: 150px;
border-radius: 10px;
background-color: var(--whiteblack);
color: var(--icon-color);
}

.card {
border: 0;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.card-header {

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
110

color: #fff;
background-color: #00BFFF;
border-radius: 10px 10px 0px 0px;
}

.card-body {
padding: 20px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
color: inherit !important;
}

.form-control {
background-color: #fff !important;
color: #000 !important;
}

.btn-primary {
background-color: #00BFFF !important;
border: 0;
border-radius: 5px;
padding: 10px 20px;
}

.btn-primary:hover {
background-color: #4070f4 !important;
}

#customSignature {
width: 560px;
height: 100px;
}

.form-title {
padding: 5px 10px;

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
111

const body = document.querySelector("body");

const darkLight = document.querySelector("#darkLight");
const exit = document.querySelector("#exit");

darkLight.addEventListener("click", () => {
body.classList.toggle("dark");
if (body.classList.contains("dark")) {
document.setI
darkLight.classList.replace("bx-sun", "bx-moon");

} else {
darkLight.classList.replace("bx-moon", "bx-sun");
}
});

exit.addEventListener("click", () => {
window.location.href = "home.php";
})

Runtime Output

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
112

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
113

PHP Connection File

Source Codes
<?php

$dbHostName = "localhost";
$dbUser = "root";
$dbPassword = "";
$dbName = "tamayoinstitute";

$connect = mysqli_connect($dbHostName, $dbUser, $dbPassword, $dbName);

if (!$connect) {
die("Connection failed!");
}

MySQL: “studAcc” Table

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
114

MySQL: “admin” Table

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
115

MySQL: “subjects” Table

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
116

HTML Document Validation:

Web Page 1: Login Page

Web Page 2: Signup Page

Web Page 3: Admission Page

Web Page 4: Home Page

Web Page 5: Profile Page

Web Page 6: Courses Page

Web Page 7: Payment Page

Web Page 8: Settings Page

References:

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
117

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
118

Summary of Assigned Tasks

AVERAGE GRADE for

SO5: RUBRIC FOR
Picture Detailed Contributions / INDIVIDUAL AND
Name (SN, FN, MI.) TEAMWORK
(1x1 Formal picture) Assigned Tasks:
Rating [1-12]
(12 is the highest)

TEAM LEAD:
TAMAYO, JAMES ● Logo Design
KARL M.

● Lead Developer
NARAG, GABRIEL ● Lead Designer 12
ANGELO P. ● Most Php Functions

BOLANTE, JOSHUA ● Some HTML format

MANABAT, AISAIAH ● Logo Design

● Initial HTML and CSS

RODRIGUEZ, NYX design an application
C. ● Documentation

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
119

RUBRIC FOR INDIVIDUAL AND TEAM WORK

(FOR COMPUTING PROGRAMS)

T.I.P. SO 5:
An ability to function effectively as a member or leader of a team engaged in activities appropriate
to the program’s discipline.

Performance Very Poor Poor Unsatisfactory Satisfactory Good Excellent

Score
Indicator 1 2 3 4 5 6
The The The student The student The The
student student occasionally frequently student student
never rarely functions as an functions as an usually always
An ability to functions functions individual individual functions initiates to
function as an as an member of a member of a as an function
effectively as a individual individual team engaged team engaged in individual effectively
member member of member of in activities activities member of as an
engaged in a team a team appropriate for appropriate for a team individual
activities engaged in engaged in computing. computing. engaged in member of
appropriate to activities activities activities a team
the program’s appropriate appropriate appropriate engaged in
discipline for for for activities
computing. computing. computing. appropriate
for
computing.
The The The student The student The The
student student occasionally frequently student student
never rarely functions as a functions as a usually always
functions functions leader of a team leader of a team takes takes
as a leader as a leader engaged in engaged in initiative initiative
An ability to of a team of a team activities activities and and
function engaged in engaged in appropriate for appropriate for functions functions
effectively as a activities activities computing. computing. as a leader as a leader
leader engaged appropriate appropriate to support to support
in activities for for group group
appropriate to computing. computing. efforts and efforts and
the program’s activities of activities of
discipline a team a team
engaged in engaged in
activities activities
appropriate appropriate
for for
computing. computing.

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”
120

RUBRIC FOR INDIVIDUAL AND TEAMWORK

(FOR COMPUTING PROGRAMS)

T.I.P. SO 5:
An ability to function effectively as a member or leader of a team engaged in activities appropriate
to the program’s discipline.

Member 1 Member 2 Member 3 Member 4 Member 5

Performance TAMAYO, NARAG,
Indicator BOLANTE, MANABAT, RODRIGUEZ
JAMES GABRIEL
JOSHUA F. AISAIAH , NYX C.
KARL M. ANGELO
An ability to function
effectively as a
member engaged in
activities appropriate
to the program’s
discipline
An ability to function
effectively as a leader
engaged in activities
appropriate to the
program’s discipline

TOTAL SCORE

Evaluated by:

PINCA, RYAN CHRISTOPHER

Printed Name and Signature

“We affirm that we have not given or received any unauthorized help on this assignment, and that this work
is our own”

WEB Dpdf
No ratings yet
WEB Dpdf
74 pages
Home Services Em Vi Docs
No ratings yet
Home Services Em Vi Docs
35 pages
CODING (1)
No ratings yet
CODING (1)
39 pages
WBP
No ratings yet
WBP
55 pages
70 FalguniDabhi PA2
No ratings yet
70 FalguniDabhi PA2
51 pages
Coding Implementation
No ratings yet
Coding Implementation
36 pages
Web Tech
No ratings yet
Web Tech
55 pages
File
No ratings yet
File
21 pages
Notes Sharing Web App
No ratings yet
Notes Sharing Web App
40 pages
Untitled
No ratings yet
Untitled
49 pages
Registration and Login Form
100% (1)
Registration and Login Form
33 pages
Week1 (A) : Date: Aim: Write A Timetable Program For 3 Year B.Tech IT Branch. Sourcecode
No ratings yet
Week1 (A) : Date: Aim: Write A Timetable Program For 3 Year B.Tech IT Branch. Sourcecode
86 pages
WT Assignment 2
No ratings yet
WT Assignment 2
17 pages
WT lab..
No ratings yet
WT lab..
15 pages
k224818-WE-LAB-3.
No ratings yet
k224818-WE-LAB-3.
14 pages
mst observation
No ratings yet
mst observation
20 pages
Hpxs300 Sa1 Thandiswa Maseko
No ratings yet
Hpxs300 Sa1 Thandiswa Maseko
12 pages
microproject_report(222002C0049 (2)
No ratings yet
microproject_report(222002C0049 (2)
10 pages
Exp 1,2
No ratings yet
Exp 1,2
23 pages
html+js
No ratings yet
html+js
16 pages
Web - Tech Record
No ratings yet
Web - Tech Record
25 pages
REGISTRATION
No ratings yet
REGISTRATION
13 pages
CSS Report
No ratings yet
CSS Report
14 pages
Project Work and Coding
No ratings yet
Project Work and Coding
16 pages
Jklmn
No ratings yet
Jklmn
17 pages
21.2 Web Answers
No ratings yet
21.2 Web Answers
19 pages
JQuery Log in Page
No ratings yet
JQuery Log in Page
7 pages
LABASSIGNMENT
No ratings yet
LABASSIGNMENT
6 pages
Materi Workshop Laravel Stmik Widuri by WCC (Front End)
No ratings yet
Materi Workshop Laravel Stmik Widuri by WCC (Front End)
19 pages
ASSIGNMENT-11PHP
No ratings yet
ASSIGNMENT-11PHP
10 pages
Mega Demo
No ratings yet
Mega Demo
18 pages
20-CP-09 FB and Gmail Sign Up and Sign in
No ratings yet
20-CP-09 FB and Gmail Sign Up and Sign in
19 pages
Introduction
No ratings yet
Introduction
7 pages
JMCT Polytechnic, Nasik: Department of Computer Engineering
No ratings yet
JMCT Polytechnic, Nasik: Department of Computer Engineering
15 pages
Dipesh Patil 2411: Tybsc It'C'
No ratings yet
Dipesh Patil 2411: Tybsc It'C'
13 pages
Oodles Technologies
No ratings yet
Oodles Technologies
7 pages
Login Page Code-1
No ratings yet
Login Page Code-1
12 pages
New File 1 - Removed
No ratings yet
New File 1 - Removed
11 pages
Osc - Experiment - 6
No ratings yet
Osc - Experiment - 6
11 pages
Itse Lab # 11 and 12
No ratings yet
Itse Lab # 11 and 12
10 pages
fet
No ratings yet
fet
7 pages
JWT Labmanual For MTech FINAL One
No ratings yet
JWT Labmanual For MTech FINAL One
79 pages
Webdevelopmentexercise
No ratings yet
Webdevelopmentexercise
9 pages
Codigo
No ratings yet
Codigo
4 pages
Code For Registration Page
No ratings yet
Code For Registration Page
13 pages
Rakesh
No ratings yet
Rakesh
4 pages
Adl Exp1,2
No ratings yet
Adl Exp1,2
5 pages
Practical 11
No ratings yet
Practical 11
4 pages
from
No ratings yet
from
4 pages
Web Lab
No ratings yet
Web Lab
5 pages
The Yellow Highlights Is The Comment of The Code
No ratings yet
The Yellow Highlights Is The Comment of The Code
6 pages
Dushyan
No ratings yet
Dushyan
4 pages
New Text Documentlog (1)
No ratings yet
New Text Documentlog (1)
5 pages
Rakesh
No ratings yet
Rakesh
3 pages
Loginhtml
No ratings yet
Loginhtml
3 pages
Login 1
No ratings yet
Login 1
2 pages
Document 1
No ratings yet
Document 1
3 pages
HTML Login
No ratings yet
HTML Login
1 page
Login HTML
No ratings yet
Login HTML
1 page