APPENDICES

APPENDIX A.
Relevant Source Code
@extends('layout.master')
@section('content')
<style>
/* Update the styling */
.flex-container {
display: flex;
justify-content: center;
align-items: center;
/* background-color: #f1f1f1; */
padding: 10px;
height: auto;
/* Set height to fill the viewport */}
.flex-item {
/* flex: 1; */
margin: 10px;
display: flex;
justify-content: center;
align-items: center;}
.card {
background: #fff;
padding: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 600px;
/* Set max width for better readability */}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);}
canvas {
width: 100%;
height: 180px;
display: block;
margin: 20px auto;
/* Adjust margin for better centering */}
.card a {
text-decoration: none;
color: #333;
/* Set text color for readability */
font-size: 22px;
font-weight: bold;}
.card-link {
display: block;
 padding: 20px;}
@media (max-width: 768px) {
.flex-container {
flex-direction: column;}
.flex-item {
margin: 10px 0;}
.card {
max-width: 100%;
/* Adjust width for smaller screens */}
canvas {
width: 90%;
height: 200px;
/* Adjust height for smaller screens */}
.card a {
font-size: 20px;
/* Adjust font size for smaller screens */}
#notificationContainer {
position: fixed;
top: 20px;
right: 20px;
max-width: 300px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 10px;
display: none;
/* Initially hidden */
z-index: 1000;}
#notificationBox {
/* Add styling for the notification box as needed */
border: 1px solid #ddd;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;}
#notificationContent {
display: flex;
align-items: center;}
#notificationIcon {
font-size: 30px;
margin-right: 10px;
color: #1877f2;
/* Facebook blue */}
#notificationMessage {
flex-grow: 1;
color: #333;}
/* Close button styling */
 .closeButton {
cursor: pointer;
position: absolute;
top: 5px;
right: 10px;
font-size: 18px;
color: #aaa;}}
@keyframes popUpEffect {
0% {transform: scale(0.8);opacity: 0;}
50% {transform: scale(1);opacity: 1;}
100% { transform: scale(1);opacity: 1;}}
h1 {animation: popUpEffect 1.5s ease-out;
/* 1.5s duration with ease-out timing function */}
</style>
<h1> Dashboard </h1>
<div class="item p-3">
<!-- Individual notification content here -->
<!-- Replace 'notificationImage', 'notificationMessage', and 'notificationTime' with
actual data -->
<div class="row gx-2 justify-content-between align-items-center">
<div class="col-auto">
{{-- <img class="profile-image" src="{{ $notification->image }}" alt="" />
--}}
</div>
<div class="col">
<div class="info">
<div class="desc">
{{-- {{ $notification->message }} --}}
</div>
{{-- <div class="meta">{{ $notification->time }}</div> --}}
</div>
</div>
</div>
{{-- <a class="link-mask" href="{{ $notification->link }}"></a> --}}
</div>
{{-- @endforeach --}}
</div>
<div class="dropdown-menu-footer p-2 text-center">
{{-- <a href="{{ route('consultation.notifications') }}">View all</a> --}}
</div></div></div>
<div class="app-utilities col-auto">
<div class="flex-container">
{{-- <div class="flex-item">
<div class="card">
<a href="{{ route('report') }}">Daily Medicine
<canvas id="medicineChart"></canvas>
 </a></div></div> --}}
<div class="flex-item">
<div class="card">
<a href="{{ route('report') }}">Monthly Consumption
<canvas id="medicineSupplyChart"></canvas>
</a>
</div>
</div>
<div class="flex-item">
<div class="card">
<a href="{{ route('inventory') }}">Equipment and Medicine Count
<canvas id="equipmentMedicineChart"></canvas>
</a>
</div>
</div>
</div>
<div class="flex-container">
<div class="flex-item">
<div class="card">
<a href="{{ route('students') }}"><small>Total Student</small> <small
id="studentsLabelCount">
</small>
<canvas id="myDonutChart"></canvas>
</a>
</div>
</div>
<div class="flex-item">
<div class="card">
<a href="{{ route('consultation') }}">
<h3>Diagnosed Consultations</h3>
<canvas id="diagnosedCountChart"></canvas>
</a>
</div>
</div>
@if (Auth::user()->role == 'nurse')
<div class="flex-item">
<div class="card">
<a href="{{ route('user') }}">
<h3>User Roles</h3>
<canvas id="userRoleChart"></canvas>
</a>
</div>
</div>
@endif
</div>
</div>
@stop
@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function toggleNotification() {
var notificationContainer = document.getElementById('notificationContainer');
notificationContainer.style.display = 'block';
// Simulate closing the notification after 5 seconds (adjust as needed)
setTimeout(function() {
hideNotification();
}, 5000);
}
function hideNotification(event) {
var notificationContainer = document.getElementById('notificationContainer');
// Check if the click event happened inside the notification, if not, hide it
if (!event || !notificationContainer.contains(event.target)) {
notificationContainer.style.display = 'none';
}
}
let myDonutChart;
// start for student chart
$(function() {
initialize();
$("#semester").on("change", function() {
initialize();
});
$('#schoolYear').on('change', function() {
initialize();
updateUsedData();
});
updateUsedData();

$('#test').on('click', function() {
$.ajax({
url: "{{ route('two-factor.enable') }}"
})
})
});
function initialize() {
$.ajax({
url: "{{ route('home') }}",
method: "get",
data: {
semester: $("#semester").val(),
schoolyear: $('#schoolYear').val()
},
 success: function(response) {
console.log(response); // Log the response to verify data
$('#studentsLabelCount').html(response.students);
updateDonutChart(response.bsit, response.bsa);
},
error: function(xhr, status, error) {
console.error("AJAX Request Error: " + error);
console.log("Status: " + status);
}
});
}
// start student chart
function updateDonutChart(bsitCount, bsaCount) {
let ctx = document.getElementById('myDonutChart').getContext('2d');
if (myDonutChart) {
myDonutChart.destroy(); // Destroy the existing chart instance }
myDonutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['BSIT', 'BSA'],
datasets: [{
data: [bsitCount, bsaCount],
backgroundColor: [
'#0056ed',
'#00ed2b'
]
}]
},
options: {}
});
}
// end student chart
// start equipment and medicine Chart
function createEquipmentMedicineChart(equipmentCount, medicineCount) {
// Convert values to integers, default to 0 if NaN or undefined
equipmentCount = parseInt(equipmentCount) || 0;
medicineCount = parseInt(medicineCount) || 0;
var ctx = document.getElementById('equipmentMedicineChart').getContext('2d');
var equipmentMedicineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Equipment', 'Medicine'],
datasets: [{
label: 'Equipment',
data: [equipmentCount, 0], // Values in respective positions
backgroundColor: '#d01bb8',
 borderColor: '#d01bb8',
borderWidth: 1},
{
label: 'Medicine',
data: [0, medicineCount], // Values in respective positions
backgroundColor: '#57b1e6',
borderColor: '#57b1e6',
borderWidth: 1
}]},
options: {
indexAxis: 'y', // Change orientation to vertical
barPercentage: 0.5, // Adjust bar thickness
categoryPercentage: 0.5, // Adjust space between bars
scales: {
x: {
beginAtZero: true
}
}
}
});
}
// Get values from PHP, default to 0 if not set or invalid
var equipmentCount = <?php echo isset($equipment) ? (int) $equipment : 0; ?>;
var medicineCount = <?php echo isset($medicine) ? (int) $medicine : 0; ?>;
createEquipmentMedicineChart(equipmentCount, medicineCount);
// end equipment and medicine Chart
// consultaion
function createDiagnosedCountChart(diagnosedCount, pending,
notDiagnosedCount) {
if (!isNaN(diagnosedCount) && !isNaN(pending) && !
isNaN(notDiagnosedCount)) {
diagnosedCount = parseInt(diagnosedCount);
pending = parseInt(pending);
notDiagnosedCount = parseInt(notDiagnosedCount);
var ctx = document.getElementById('diagnosedCountChart').getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Diagnosed', 'Pending', 'Not Diagnosed'],
datasets: [{
label: 'Diagnosed',
data: [diagnosedCount, 0, 0], // Values in respective positions
backgroundColor: '#005dff',
borderColor: '#005dff',
borderWidth: 1
},
 {
label: 'Pending',
data: [0, pending, 0], // Values in respective positions
backgroundColor: '#0cf6e6',
borderColor: '#0cf6e6',
borderWidth: 1
},
{
label: 'Not Diagnosed',
data: [0, 0, notDiagnosedCount], // Values in respective positions
backgroundColor: '#ff0000',
borderColor: '#ff0000',
borderWidth: 1
}
]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 0
}
}]
},
legend: {
display: true,
labels: {
fontColor: 'black'
}
}
}
});
} else {
console.error('Invalid or undefined values for the chart data.');}}
var diagnosedCount = {{ isset($approvedCount) ? $approvedCount : '0' }};
var pendingCount = {{ isset($pendingCount) ? $pendingCount : '0' }};
var declinedCount = {{ isset($declinedCount) ? $declinedCount : '0' }};

createDiagnosedCountChart(diagnosedCount, pendingCount, declinedCount);

// user///////////////
function createUserRoleChart(nurseCount, doctorCount) {
var ctx = document.getElementById('userRoleChart').getContext('2d');
var userRoleChart = new Chart(ctx, {
type: 'doughnut',
 data: {
labels: ['Nurse', 'Doctor'],
datasets: [{
data: [nurseCount, doctorCount],
backgroundColor: [
'#cc65fe', // Blue color for Nurse
'#ffce56' // Red color for Doctor
],
borderColor: [
'#cc65fe',
'#ffce56'
],
borderWidth: 1
}]
},options: {
responsive: true,
}});}
document.addEventListener("DOMContentLoaded", function() {
createUserRoleChart(<?php echo $nurseCount; ?>, <?php echo $doctorCount; ?
>);
});
//user end/////////////
// medsup and medequip
let medicineSupplyChart; // Declare the chart variable globally
// Function to update the chart with medicine and equipment used data
function updateUsedData() {
$.ajax({
url: 'monthlyConsumption', // Update with your actual route
type: 'GET',
dataType: 'json',
data: {
schoolYear: $('#schoolYear').val(),},
success: function(data) {
var ctx =
document.getElementById('medicineSupplyChart').getContext('2d');
// Destroy the existing chart instance if it exists
if (medicineSupplyChart) {
medicineSupplyChart.destroy();}
// Create a new chart instance
medicineSupplyChart = new Chart(ctx, {
type: 'bar',
data: {
labels: Object.keys(data.medicine),
datasets: [{
label: 'Medicine Used',
backgroundColor: '#2986cc',
 data: Object.values(data.medicine).length === 0 ? [0] : Object
.values(data.medicine),}, {
label: 'Equipment Used',
backgroundColor: '#c90076',
data: Object.values(data.equipment).length === 0 ? [0] : Object
.values(data.equipment),}]},
options: {
scales: {
y: {
beginAtZero: true,},},
},
});
},
error: function(error) {
console.error('Error fetching used data:', error);
alert('Error fetching used data. Please try again.');
}
});
}
var days = ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'];
var medicineTaken = [2, 3, 1, 4, 2, 5, 3]; // Sample data for medicines taken eachday
var ctx = document.getElementById('medicineChart').getContext('2d');
var medicineChart = new Chart(ctx, {
type: 'line', // Set the type to 'line' for a line chart
data: {
labels: days,
datasets: [{
label: 'Medicine Intake',
data: medicineTaken,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.4
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
@endpush
 APPENDICE B.

Evaluation Instrument
 Republic of the Philippines
Isabela State University
Santiago City, Isabela

Name: ______________________________________________________________

Dear respondent, undersigned are undergoing a capstone research study entitled:

“eHealth Mate” Your responses will be kept confidential and combined with responses
when reporting the results.

Rating: 5 = Strongly Agree; 4 = Agree; 3 = Undecided; 2 = Disagree; 1 = Strongly

Disagree;

Criteria 1 2 3 4 5
Functionality
1. The system performs the tasks assigned?
2. Shows accurate information and results?
3. The system provides security measure?
4. The system covers all the specified task user and
objectives?
5. The system can authorize users efficiently manage data
within the system (e.g., store, edit, delete)?
6. The system data collection process through surveys,
questionnaires, and other methods user-friendly and
effective?
Efficiency
1. The system operates quickly and efficiently?
2. The system requires less resources.
3. The system Does the Record Management System load
and respond quickly, even with large amounts of data?
4. The system is there any performance issues that hinder
user experience?
5. The system can the system be configured to prioritize
performance for specific tasks or users?
6. The system does the system efficiently utilize resources
without impacting performance?
Usability
1. The system be understood easily?
2. The system is easy to operate?
 3. The system is user-friendly?
4. The system visually appealing and user-friendly?
5. The system is user to is easy to navigate?
6. The system has search function within the system to
locate specific data points?
Portability
1. The system requires less efforts to install?
2. The system can use everywhere?
3. The system makes the request faster and easier?
4. The system be learnt easily?
5. The system is adapted well to different screen size and
resolution?
Reliability
1. The system stored data securely and reliably within the
system?
2. The system-generated reports accurate and consistent
over time?
3. The system is there any data integrity issues that need to
be addressed?
4. The system provides clear error messages and when
information is not complete.?
5. The system is not freezing when the user browsing the
internet?
6. The system eHealth Mate meet the needs of its user under
normal operation?
Compatibility
1. The system eHealth Mate can perform its required
operations efficiently while sharing its environment and
information resources with system?
2. The system be easily integrated with existing student
information systems?
3. The system is compatible in major browser (e.g. Google
Chrome, Mozilla Firefox)?
4. The system adapts well to different screen sizes and
resolutions?
5. The system accessed and used on mobile devices (e.g.,
smartphones, tablets)?
6. The system Is eHealth Mate compatible with all major
operating systems (e.g., Windows, macOS, Linux)?
Security
 1. The system has Record Management Program to adequate
security measures in place to protect user data and
privacy?
2. The system will only authorize the users granted
appropriate access levels and permissions based on their
roles?
3. The system had data stored securely and encrypted to
prevent unauthorized access?
4. The system had regular backups and recovery procedures
in place?
5. The system be used to identify it’s authorized user
through two-factor authentication for user accounts one is
the user account and the second one is One Time Pin
(OTP)?
Maintainability
1. The system can easily be modified?
2. The system can be tested easily?
3. The system can be analyze easily?
4. Can the system be deployed and configured easily in
different environments?
5. Can the system be easily extended with new features and
functionality?

Evaluators Signature
___________________
APPEDIX C.

Testing Results
Apache JMeter: Load Performance Testing
Start Threa Label Sampl Status Bytes Sent Latenc Connec
Time d /Pages e Time Byte y t Time
Name (ms) s (ms)
17:47:1 Threa Dashboard 746 Succes 1000 353 180 155
6 d s 4
Group
1-1
17:47:1 Threa Student 358 Succes 1001 369 21 0
6 d Information s 7
Group
1-1
17:47:1 Threa Inventory 435 Succes 1001 371 21 0
6 d s 3
Group
1-1
17:47:1 Threa Consultatio 377 Succes 1002 377 22 0
6 d n s 1
Group
1-1
17:47:1 Threa Reports 376 Succes 1001 365 21 0
6 d s 0
Group
1-1
17:47:1 Threa User & 374 Succes 1001 361 20 0
6 d Signatories s 3
Group
1-1

In summary, the load test results indicate successful responses across various
pages of the web application. The "Dashboard," "Student Information," "Inventory,"
"Consultation," "Reports," and "User & Signatories" pages all demonstrated rapid
response times, low latency, and instantaneous connection times. This efficient
performance ensures smooth operation and facilitates tasks such as managing
consultations, supplies, inventory, and reports for the campus nurse. The user-friendly
interface and dependable performance contribute to increased efficiency, reduced stress,
and improved productivity within the healthcare facility.
Lighthouse Tool

Load Performance: Google Chrome

Using Google Chrome, the system achieves a commendable performance score of

79, indicating efficient content delivery for a smooth user experience. However, there is
potential for optimization to further improve speed and responsiveness. The accessibility
score of 89 suggests areas for enhancement to ensure optimal accessibility for users with
disabilities. Despite this, Google Chrome excels in Best Practices with a perfect score,
demonstrating a strong commitment to high-quality code, security, and compliance with
established standards. However, the SEO score of 82 indicates average practices in
optimizing the system for search engines, leaving room for improvement to enhance
online visibility and discoverability.
 Load Performance: Mozilla Firefox

When accessed through Mozilla Firefox, the system demonstrates an impressive

performance score of 86, indicating potential for improvement in speed and
responsiveness. This suggests that optimizing the system could enhance its overall
performance and provide a smoother user experience. The accessibility score of 92
surpasses those of other browsers, indicating a strong commitment to ensuring
accessibility for users with disabilities. With a perfect score of 100 in Best Practices, the
system adheres to industry standards and coding practices, highlighting its commitment
to quality code, security, and compliance. Additionally, the SEO score of 100 suggests
effective optimization for search engines, contributing to improved visibility and
discoverability.
 Load Performance: Microsoft Edge
Microsoft Edge achieves a performance score of 63, indicating commendable
efficiency with potential for optimization to improve speed and responsiveness. This
reflects the system's ability to swiftly deliver content for a smooth user experience. The
accessibility score of 89 suggests areas for enhancement to ensure optimal accessibility
for users with disabilities. Microsoft Edge excels in Best Practices with a perfect score,
demonstrating a strong commitment to high-quality code, security, and compliance.
However, the SEO score of 82 indicates average practices in optimizing the system for
search engines, leaving room for improvement to enhance online visibility and
discoverability.
 APPENDICE D.

Sample System Generated Reports

APPENDICE E.

User Manual
APPENDIX F.

Documentation
 FEASIB

We consulted our campus nurse, Debie-lyn P. Dolojan, to gather information on

the criteria and necessary files needed for developing the system's objectives. Our aim is
to simplify the management of student health records and enhance access to medical
services on campus. To achieve this, the system must integrate smoothly with existing
databases, offer user-friendly interfaces for students and medical staff, ensure robust
security to safeguard sensitive health information, and be scalable for future growth.
 PROPOSAL DEFENSE
We successfully defended the proposal entitled eHealth Mate: Student and
Medical Resources Record Management System for ISU Santiago Extension.
 SYSTEM DEVELOPMENT

We consulted our Capstone Adviser, Catleen Glo M. Feliciano, MIT, to refine the
objectives of our proposed eHealth Mate system for ISU Santiago Extension. With her
expertise, we ensured our goals matched the institution's needs. Ms. Feliciano's guidance
clarified aspects like system integration, security, and user training, preparing us for
developing a robust health record system. She emphasized continuous improvement and
stakeholder engagement, making our project more effective.
 SKILL TESTING

We've completed the task that proves we're the developers of our system.

SYSTEM DEFENSE

We successfully defended our system with minor bugs to fix.

 SYSTEM COMPLIANCE

We implemented the system recommendation feature of the panelist to align to the

research objectives.
 We Trained the users of our system to let them familiarize with the functionality
and features of the system.

USER EVALUATION (Physician)

 USER EVALUATION (Physician)

After we trained the users, we give them a questionnaire that will evaluate
the system based on their experience while using the system.
IT EXPERT EVALUATION

IT EXPERT EVALUATION
 IT EXPERT EVALUATION

IT EXPERT EVALUATION

We asked I.T. experts to evaluate the system using the questionnaire we provided.
 DOCUMENT EDITING
We edit the documents to align it to the panelists feedback to correct the content
of our document to align it to the objectives of our research.
 FINAL DEFENSE

We successfully completed our final defense, demonstrating our solid

understanding of the topic. Our presentation was clear and concise, and we confidently
addressed all panel questions. This success underscores our dedication and preparation,
highlighting our commitment to excellence.
 APPENDIX G.

Certificate of Implementation
 APPENDIX H.

Grammarian Certificate
 APPENDIX I.

Curriculum Vitae

Nathaniel M. Andoy
Address: Phase 1, EM Pinzon, Purok 5 Brgy. San Fabian Echague,
Isabela
Contact No.: 09380898179
Email: nathanielandoy707@gmail.com

Personal Information:
Gender: Male
Date of Birth: September 18, 2000
Age: 23 years old.
Religion: Mormons
Civil status: Single
Nationality: Filipino
Mother’s Name: Emma M. Leonidas
Father’s Name: Rodolfo B. Andoy
Education:
College Isabela State University Santiago Extension (2020-2024)
NIA, Batal, Santiago City

Senior Cainta Senior High School (2018-2020)

Parola St Brgy. San Roque
Cainta, Rizal

Junior Rizal High School (2013-2017)

Dr. Sixto Antonio Ave.,
Pasig, 1600 Metro Manila

King A. Tumamao
Address: Quinsay street, purok 5 Divisoria
Santiago City, Isabela
Contact No.: 09269478525
Email: kingtumamao63@gmail.com

Personal Information:
Gender: Male
Date of Birth: May 23 2002
Age: 21years old.
Religion: INC
Civil status: Single
Nationality: Filipino
Mother’s Name: Imelda A. Tumamao
Father’s Name: Juanito A. Tumamao Sr.
Education:
 College Isabela State University Santiago Extension (2020-2024)
NIA, Batal, Santiago City

Senior Divisoria high School (2018-2020)

Ruperto Fabros St,
Divisoria Santiago, Isabela

Junior Divisoria High School

(2013-2017)
Ruperto Fabros St,
Divisoria Santiago Isabela
Glenn F. Alvarez IV
Address: #145 Sittio ilot caquilingan cordon Isabela
Contact No.: 09161552850
Email: glennalvareziv@gmail.com

Personal Information:
Gender: Male
Date of Birth: July 05, 2001
Age: 22 years old.
Religion: Iglesia Ni Cristo
Civil status: Single
Nationality: Filipino
Mother’s Name: Gloria F. Alvarez
Father’s Name: Glenn G. Alvarez Sr.
Education:
College Isabela State University Santiago Extension (2020-
2024)
NIA, Batal, Santiago City

Senior St.John Berchmans High School Inc. (2018-2020)

Magsaysay cordon, Isabela

Junior St.John Berchmans High School Inc. (2013-2017)

Magsaysay cordon, Isabela

Elementary Cordon South Center School (2007-2013)

Magsaysay cordon, Isabela,
 APPENDIX J.

Complete Entity Relationship Diagram