Valena Group Manuscript

CAGAYAN STATE UNIVERSITY – LAL-Lo CAMPUS
Sta. Maria, Lal-lo, Cagayan
COLLEGE of INFORMATION and COMPUTING SCIENCES
VALENA HERITAGE NETWORK (VALENANet):

DESIGN AND DEVELOPMENT OF CSU LAL-LO WEBSITE
A Capstone Project
Presented to the Faculty of the
College of Information and Computing Sciences
Cagayan State University
Lal-lo Campus
In Partial Fulfillment for the

Academic Requirements for the degree
Bachelor of Science in Information Technology
By:
Taroy, Adolfo
Tarubal, Rey Mark
Alcid, John Paul Josef
Balas, Lyngel
Curioso, Elmer Jr.
Onza, Rhojane Mae
January 2023
Chapter I
1
INTRODUCTION
The Problem and Its Background
In modern days, we mostly rely on our trusted websites and apps for
carrying information for our everyday work. It has become an integral part of our
way of life. The whole civilization has become dependent on modern media that it
uses as its help us to finish our task easier. Technology has made life easy and
convenient. Websites, as a valuable outcome of technology, help companies,
organizations, and any other types of groups to spread something about what are
their purpose in their nation or even in our world. Websites are commonly used to
share information with every citizen quickly, easily, and effectively.
Campus websites, for example, are an essential instrument especially on pandemic

to provide information for different types of interested users to access campus-
related up-to-date information. A good campus website is expected to include a
range of quality content. Remember to add basic information like contact details,
welcoming messages, school values, and images to the homepage followed by
learning resources, curriculum information, news, events calendar, and other
school information. Building a website for a school can prove to be extremely
beneficial if it is done in the right way. It may be time-consuming and include a lot
of effort to be put into developing a website for the school, but it is very
advantageous for the school community. The school website gives the school’s
information and also a clear idea about what they are good at. School websites will
provide the up to dates, as well as help them to link between schools, their
communities, and also to the entire world.
The Cagayan State University Lal-lo Campus is an organizational unit that

has identified the need for an independent and active dynamic website that will
help the campus to post information without any limitation and also widen its
platform that is not only limited to existing social media applications. In addition,
the website has to have its own separated VAP (Valena Admin Panel) which is
prohibited by unauthorized personnel, and only registered administrator is allowed
2
to have an access. VAP will be used as a platform to perform changes of contents

inside the said website.
To meet the demand, this study aimed to develop a website called

“VALENA HERITAGE NETWORK (ValenaNet): DESIGN AND
DEVELOPMENT OF CSU LAL-LO WEBSITE” to be used by the MIS
Coordinator of the campus. The project would ensure that the collected
information about campus administration, admission, academics and all other
information is up-to-date and directly collected by a primary source to ensure its
credibility and authenticity.
Purpose and Description
The purpose of the study is to develop Valena Campus website of CSU

Lallo is to serve as a comprehensive online platform that provides students, faculty,
staff, and the wider community with easy access to essential information and
resources related to campus life, academic programs, and administrative services. It
aims to enhance communication, facilitate collaboration, and promote engagement
within the CSU Lallo community.
The website provides detailed information about academic programs offered at

CSU Lallo, including undergraduate courses, admission requirements, and
program-specific highlights. Prospective students can explore various faculties and
departments, gaining insights into the curriculum, faculty members, and research
opportunities available.
In addition to academic information, the Valena Campus website features a

comprehensive directory of campus services, such as the library and organizational
structure. Users can easily find contact information, campus staffs and
downloadable forms, ensuring convenient access to essential support services.
To foster community engagement, the website includes a dedicated section for

campus events. Students can stay updated on upcoming events and can comment on
3
the posted article. The website also features news articles, campus announcements,
and success stories to keep the community informed and inspired.
Overall, the Campus website of CSU Lallo aims to provide a seamless online
experience, ensuring that all users can easily navigate and find the information they
need. By promoting effective communication, collaboration, and engagement, the
website contributes to the growth, development, and success of the CSU Lallo
community.
Statement of the Problem
The project aimed to develop a website for CSU Lal-lo. Specifically, it

sought to answer the following questions:
1. What are the programs, activities and projects (PAPs) of the campus along
instruction, research, extension and production, partnership and resource
mobilization, and agri-tourism?
2. What are the different services of the campus to its students and stakeholders?
3. What are the accomplishments of the campus along higher education,

research, extension and community service, support to operations and general
administration and support?
4. What are the major links that the campus website shall have?
5. What is the extent of compliance of the developed application to ISO 25010

Software Quality Standards in terms of?
a. Functional suitability,
4
b. Performance efficiency,
c. Compatibility,
d. Usability,
e. Reliability,
f. Security,
g. Maintainability, and
h. Portability?
6. What enhancements can be made to improve the website?
Scope and Limitation
The project primarily focused on the design and development of a website for
CSU Lal-lo which include presentation and publication of pertinent campus data
and information.
Furthermore, because the developed website is dynamic, it is accessible online. The

website displays the elements campus announcements, accomplishments, statistics,
contacts, geographical location, among others.
Participants in the development of the project were limited to the campus planning
coordinator, campus information officer and IT professionals, who evaluated the
developed system.
Significance of the Study
The project’s goal was to create an active and dynamic campus website for CSU-
Lal-lo. The website is thought to be beneficial for the following:
5
Cagayan State University Lal-lo Campus. This project would help the institution
provide information to all interested parties and stakeholders without the need for
actual interaction. Additionally, it will give the campus an independent platform to
share information that is not supported by social media platforms such as
displaying downloadable forms.
Researchers. The project will enable the researchers to improve their abilities in
both back-end and front-end website development.
Future Researchers. The project will provide future researchers the information
that are beneficial in the analysis of their studies related to the system.
Stakeholders. The project will keep students, parents, alumni, government and
non-government agencies, and other stakeholders informed and updated with the
relevant news and information about the campus.
Definition of Terms
To ensure optimal understanding of the concepts of this study, the following

terms are provided with operational definitions:
Compatibility. It is the degree to which the developed system can exchange

information with other products, systems or components, and/or perform its
required functions, while sharing the same hardware or software environment.
Dynamic website. Website with pages that are generated in real-time which
include web scripting code such as PHP or ASP.
Efficiency. It is the quality of the developed system of being able to do a task

successfully without exerting too much effort, saving time and costs towards the
production of necessary information.
Functionality. It is the summary or any aspect of what the developed project can
do for the user meeting its required outputs without fear of generating or
6
manipulating the system. It includes the ability to perform the task or function as
per requirement.
Functional Suitability. It is the characteristic that represents the degree to which

the developed project provides functions that meet stated and implied needs when
used under specified conditions.
Maintainability. It is the extent of which the developed project is understood,

repaired, or enhanced. It would include the ability for the organization to sustain
the utilization of the system in place.
Performance Efficiency. This characteristic of the developed project which

represents its performance relative to the number of resources used under stated
conditions.
Portability. It is the extent of the developed project to be used in an operating

system other than one in which it was created without requiring major assistance
or rework. It is the ability of the system to run and execute smoothly in a new
environment.
Reliability. It is the degree to which the developed project could be relied on or

depended on, as for the accuracy, quality, yielding the same results based on
requirements.
Satisfaction. It is the degree to which the developed project provides customer

level approval when comparing the system’s perceived performance with his or
her expectations. Users and/or experts are fulfilled with what the system could
offer meeting their required outputs.
Security. It is the degree to which the developed project protects information and
data so that persons or other products or systems have the degree of data access
appropriate to their types and levels of authorization.
Usability. It is the degree to which the developed project as used by users achieve
their quantified goals with effectiveness, efficiency, ease of use and learnability of
utilizing the system.
7
Valena. The name of the place in CSU Lal-lo where its nature wonders are
located.
Diagram 1: Conceptual Framework
INPUT PROCESS OUTPUT
Campus Instruction, System/Web THE VALENA

Research, Extension Development using HERITAGE
and Production Agile Methodology NETWORK
(IREP) Programs, (ValenaNet): CSU
8 LAL-LO WEBSITE
Activities and Assessment of the
Projects System on the Extent
of Compliance to ISO
The conceptual framework followed the input-process-output diagram with

a feedback mechanism. The elements of the input are the data and information
about the programs, activities and projects (PAPs) of the campus along instruction,
research, extension and production. Likewise, PAPs on the areas of partnership
and resource mobilization and agri-tourism shall also form part of the input.
Moreover, the assessment tool for software quality standards was used to evaluate
the system to be developed.
9
The processes focused on the design and development of the website and the
assessment and evaluation of it vis-s-vis software quality standards.
The output of the study is the dynamic website developed to inform the public
about the programs and services of Cagayan State University – Lal-lo Campus, the
CSU Lal-lo Website
A feedback mechanism is incorporated to help in the holistic development and

improvement of the system.
CHAPTER II
RELATED LITERATURE AND STUDIES
This part presents the literature and studies from foreign and local research and
related readings, which significantly impact the research. Sources include journal
articles, research reviews, news articles, unpublished materials, and articles from
new sites and websites
Evaluating the Effectiveness of College Web Sites for Prospective Students
10
Abrahamson (2015) and Steele (2016) profile the 60 million high school student
population as growing up with the Internet and having a strong attraction to
technology. For this generation, a Web presence is a direct extension of the
institution itself. To stress the point, Abrahamson observes that in the past,
colleges marketed in a free-for-all manner, with the admission office sending one
message and each department creating its own literature and brochures to send its
message. This community patchwork approach is evident in college Web sites
where each department is encouraged to develop and maintain its own pages. The
result is a disjointed presence of varying levels of technical sophistication and
inconsistent information depth and tone.
The Importance of Website Innovation on Students’ Satisfaction of University

Websites
Ali Rezaeean, Sona Bairamzadeh and Alireza Bolhari (2012) conducted a survey
among 270 university students. Results of the empirical analysis revealed that
greater innovation has a significant impact on users’ trust and satisfaction. More
than that, innovation is the most important factor influencing the satisfaction.
Also, students’ trust increases as they perceive the system is usable. Finally, trust
has a positive influence on satisfaction.
The Importance of a University Website
New statistics show an increase from previous research, whereby 85 percent of

students in the 2016/2017 academic year had applied without making any contact
before application, showing the numbers are rising.
Their decision to apply seems to have been primarily based on their perusal of the
university website, Uniquest found after tracing the path these stealth students
took.
11
Jennifer Parsons, Uniquest’s Director of Marketing and Insights, told The PIE
News, “We already knew from monitoring the data at offer holder stage that the
university website was the most important information source for international
stealth applicants.”
“What surprised us in doing a deeper analysis of the combination of research

channels for those students who went on to enroll, is that for a staggering 50% of
enrolled students, the university website wasn’t just the most important channel, it
was the only channel used.”
The results showed that for over half of the students surveyed, the institution’s
website was the only channel where they received information on the school and
consequently applied.
How Higher Education Handles Website Design
The website must appeal to the university’s commercial interests, which are
primarily the sources of presenting their objectives to the visitors and especially to
those visitors who are interested in seeking information. It also aims to facilitate
their prospective students and scholars by providing the proper guidelines on the
website to help them accordingly. Nevertheless, of equal importance, a university
website should serve the non-commercial information that is the need of its current
students and faculty. Information like the complexities of curriculum choices and
the information about the daily events and procedures that happens within a busy
university campus. Therefore, usability is considered the key credentials of
effective higher education website design.
Importance of a Website
Shaik (2016) in his article “Importance of having Website” believes that a website
is the identity of an institution and business. He further says that there are many
other reasons which encourage institutions and companies to have websites. For
example, there are about 970 million Internet users around the world which makes
15% of the world’s population. So, it is a nice way of “getting involved with a
12
large percent of people for sharing ideas and finding potential customers” (2016,
p.1).
Changing Role and Purpose of the School Website
They are moreover multi-purpose entities where the website provides seamless
access to a plethora of online facilities and services, removing the divide between
the school’s physical and online offerings. While reference has been made to the
‘website’ that is partly a misnomer because as apparent in both the above-
mentioned sites there are links to an ever-evolving digital communications suite
that includes such diverse services as an emailed school communiqué, an online
survey facility, advice on new teaching programs or resources, the online
advisement of student absence, Twitter, Facebook and the facility to instantly
inform parents of a critical incident, like a death. Indeed, as a colleague has
suggested it might be opportune to find another term to describe the role played by
the website in a digital school.
Importance of Website in Schools
Cebu Web Maker stated that Internet has become one of the largest platforms of
communication. It is the most effective technology available today. Building a
website for school can prove to be extremely beneficial if it is done in the right
way. It maybe time consuming and include a lot of effort to be put in for
developing a website for the school, but it is very advantageous for the school
community. The school website gives the school’s information and also clear idea
about what they are good at. School websites will provide the up to dates, as well
as help them to link between schools, their communities and also to the entire
world.
The Benefits of Modern School Website Development
13
The website reflects the school in terms of values, attitude towards prospects and
acceptance of modern trends. Such a development will give your school a
competitive advantage and help you set yourself apart from the competition.
A Regularly Updated School Website Leaves a Good Impression
A school’s website is often the main source people go to when they have inquiries
or questions about the school. The website is typically where people first visit,
which in turn is where they obtain their first impression. If someone were to visit a
school's website and see that it hadn't been updated in months, they might get a
negative impression due to a seeming lack of concern for keeping the community
up to date.
In addition, a regularly updated website creates an accurate and current depiction

of the school. Having a list of upcoming events and programs that exist through
the school and community shows the diversity in activity among campus, and
leaves people with the impression that the community is very involved and has lots
of school spirit. By maintaining the schedule on school wide events, students will
feel more inclined to attend them and thus support their school. It can also convey
that the school cares about their community by keeping them updated and
rewarding success with features, such as having a picture of a winning sports team
on the home page, or displaying images from the school play.
Why a School Website is Important in 2020.
Irish students are online from an early age. Some from as young as 6 years of age!
Their parents have also embraced the trend to search online first, for anything and
everything. Yet, the educational colleges and institutes are often sadly lacking in
their online presence. Websites are out of date and social media is often ignored.
In 2020, only 1.5% of all the specifically Irish domain names (iedr.ie) were held
by Irish schools and educational institutions. While many schools have websites,
a great many of them have not been recently updated. It makes complete sense to
get the best use out of the tools that are at your disposal and for schools, this
14
means updating your website and using it as the primary means of getting general
information to parents and students alike.
Evaluating the importance of common components in school-based websites:

Frequency of appearance and stakeholder, judged value
Why do schools have district websites? The benefits include the following: linking
schools in the district, developing communication in classes, grade levels, and
cultures, encouraging parental involvement, presenting information to visitors
about the school and acquisition of technology skills (Miller, Adsit & Miller,
2015).
Design and development of an effective university website: A case study

of Gauhati University. International Journal of Web Engineering and
Technology
Websites are one of the technologies that can define as a set of related network
web resources, such as multimedia content or web pages, which are typically
identified with a common domain name, and published on at least one web server.
University website is one example of the use of technology used by universities to
help disseminate information to the academic community as well as promotional
events outside. For that, it needs an attractive display so that people are interested
in using it. In order to make the appearance of the website become more
interesting than before, there is usability evaluation method that called usability
testing which can measure the usability in order to develop more easily
environment, to increase the number of user satisfaction, to improve the system
itself and also to evaluate the perspective of user.
15
CHAPTER III
METHODOLOGY
This chapter includes the project design, locale of the study, participants of the
study, instrumentation, data gathering procedures, and data analysis tools used in
the study. These parts provide justification to the researchers’ methods of
collecting and analyzing the data.
Project Design
This research project employed the descriptive and development method

using Software Development Life Cycle (SDLC) specifically the Agile
Methodology. The Agile methodology in software development is an approach
based on iterative development. In this method, tasks are broken into smaller
iterations, or parts do not directly involve long term planning. The project scope
and requirements are laid down at the beginning of the development process.
Figure 1 depicts Agile methodology in Software Development Life Cycle (SDLC)

as a process that produces software with the highest quality and lowest cost in the
shortest time possible. It involves constant collaboration with stakeholders and
continuous improvement at every stage. Once the work begins, teams’ cycle
through a process of planning, executing, and evaluating.
Figure 1: https://targettrend.com/agile-methodology-meaning-advantages-
disadvantages-more/
System Architecture
16
Figure 2 depicts how the developed website functions. To test its credibility, the
information officer submits the contents and materials to be posted to MIS
Coordinator. During the process, the submitted soft copies of reports will be
inputted by the MIS Coordinator, also MIS Coordinator have the ability to perform
crud in the said website by logging into Admin Panel, if the inputted admin code
and pass code is not recorded in login database, accessing the admin panel will not
be granted, otherwise it will be granted. Output, on the other hand, is verified and
up-to-date data that is ready to be published online.
Figure 2: System Architecture
Context and Data Flow Diagram
17
The developed website system is depicted graphically in the following image

(Figure 3). The materials uploaded in website are the responsibility of the MIS
Coordinator and Information Officer, MIS Coordinator is an authorized
administrator on the operating website admin panel.
Figure 3: Lvl. 0 Data Flow Diagram of the proposed project
Locale of the Study
18
The project was conducted at Cagayan State University at Lal-lo Campus located at
Sta. Maria, Lal-lo, Cagayan.
Participants of the Study
The participants in the development of the project as presented in Table 1

composed of the following:
Table 1. Participants of the Study
Participants Number
Planning Coordinator 1
Web Administrator/ MIS Coordinator 1
Information Officer 1
IT professionals as panelists 5
Campus officials as website evaluators 3
1. The Planning coordinator and the Information Officer were the primary
informant and source of major inputs to the website.
2. The MIS coordinator was responsible in the deployment of the website.
3. The Panelists and evaluators who are IT professionals and campus officials
serve as evaluators of the features and the performance of the developed
website vis-à-vis software quality standards.
Data Gathering Tools
19
The following were the research instruments used in gathering the needed data for
the study:
Heatmaps. Heatmaps are used by the developers to visually represent user

interactions on the website, showing where users click, scroll, or spend the most
time. This tool helped the developers on what parts of the website do need
improvements.
Feedback Tabs. Feedback tab allow the developers to gather random user
feedback. These tools provide valuable insights into usability, accessibility, and
overall user satisfaction.
Letter. Use to ask approval to conduct the proposed project.
Key Informant Interview. Interviews were conducted with the campus information
officer and the planning coordinator to collect vital data and information related to
the features on the proposed website.
Documentary Analysis. Sample reports and documents were requested from the
campus planning office and these were analyzed to provide useful information in the
design of the proposed website.
Data Gathering Procedure
Prior to data gathering and collection, the researchers performed the following
steps:
1. Sought approval from the Campus Executive Officer for the development of
the proposed website.
2. Sent a request letter to the concerned campus officials for the conduct of
interview to gather data as specified in the objectives of the study.
20
3. Sent formal communication to IT professionals for them to be informed of

being chosen to test the viability of the system before site deployment. Their
suggestions during evaluation were considered for the improvement and
enhancement of the website.
Data Analysis
The answers obtained from the participants in the interviews were recorded and
studied. The interviewee’s responses were noted and from there interesting points
related to the interview questions were taken up to help in the analysis of the
responses.
Mean was used to analyze the rating of the IT experts with respect to the
compliance of the developed website in relation to ISO standards. The extent of
compliance of the system was rated using the following matrix:
Table 2. Likert Scale for the Measurement of the Extent of Compliance to ISO
25010:2011 Software Quality Standards
Descriptive
Mean Range Interpretation
Equivalent
4.20 – 5.00 Very Great Extent The measure described in the item is
compliant to the very high extent or
OUTSTANDING.
3.40 – 4.19 Great Extent The measure described in the item is
compliant to a high extent or
VERY SATISFACTORY.
2.60 – 3.39 Moderate Extent The measure described in the item is
compliant to the moderate extent or
SATISFACTORY.
1.80 – 2.59 Low Extent The measure described in the item is
compliant at low extent or
FAIR.
1.00 – 1.79 Very Low Extent The measure described in the item is
compliant at the lowest extent or
POOR.
21
Interface Requirements
User interface of a campus website typically serves as a digital gateway for

students, faculty, staff, and other members of the campus community to access
various services, information, and resources related to the campus. Here's a
description of CSU Lal-lo campus website user interface:
Administration Login Panel: It provides access to administrative functions and

controls. Typically designed for authorized administrators who have specific
privileges and responsibilities within the campus or institution.
In addition, the login credentials of a registered admin are being converted into a
hexadecimal code to prevent sabotaging whenever there's a leakage issue of the
database.
Dashboard: Upon successful login, administrators are directed to the dashboard,

which serves as the main control center of the Admin Login Panel. The
dashboard provides an overview of key information and statistics related to the
campus or institution. It may include summary data, quick links to commonly
used functions, and notifications about important updates or tasks.
Home Page: It serves as the landing page for the website. It includes a visually
appealing layout with high-quality images showcasing the campus, students, and
various activities. It may also feature important announcements, upcoming
events, and quick links to commonly accessed information.
Search Bar: It present on the homepage or in the header area to facilitate quick
searches within the website. Users can enter keywords or phrases to find specific
information, such as courses, faculty members, campus facilities, or resources.
Events and News Section: This section features the latest campus news,
announcements, and upcoming events. Users can find details about lectures,
workshops, conferences, performances, and other campus activities. It may also
include an archive of past events and news articles.
22
Navigation Menu: It features a prominent navigation menu at the top or side of the
page depending on the current layout. This menu provides easy access to different
sections of the website, such as Home, Admissions, Academics, Research and
Developments, and etc.
Hardware Used:
Laptop: Developers used laptops in system development due to their portability,

allowing developers to work from various locations, collaborate with team
members, and perform on-site demonstrations. Their versatility enables the
installation of different development tools, programming languages, and
environments, facilitating efficient coding, debugging, and testing.
Desktop: To check the responsiveness of the website, developers must use

different gadgets such as desktop.
MINIMUM REQUIREMENTS
Hardware Components Size
CPU 2.0 – 3.5 GHz
RAM 4 GB
SSD (for faster performance) 256 GB
Server IP (optional) 1 IP Address
Table 3. Minimum Hardware Requirements for the Proposed System
23
Software Used:
Visual Studio Code: Developers of the above-mentioned system used VS Code

for its lightweight nature, rich editing environment, language support, integrated
version control, extension ecosystem, cross-platform compatibility, and
community support make it a suitable choice for developing systems.
MySQL Database: The database used by the developers because of its database
management, data manipulation, SQL querying, import/export capabilities,
security features, relationship visualization, user-friendly interface, and
community support make it a valuable tool for developing systems.
Adobe Photoshop: Developers used the platform for developing high-quality

custom images that’s been used for banners and icon.
WYSIWYG Editor: WYSIWYG stands for "What You See Is What You Get."
It is used to allows developers to see a representation of the final output while
editing content or designing a layout. In other words, the displayed content
during editing closely resembles the way it will appear when published or
displayed to the end-user.
XAMPP: XAMPP is an acronym that stands for "Cross-Platform, Apache,

MySQL, PHP, and Perl." It is a widely used open-source software package that
provides a local development environment for building and testing web
applications. XAMPP is designed to be easy to install and use, making it popular
among developers, especially those working with PHP and MySQL.
Bootstrap: is a popular open-source framework for building responsive and

mobile-first websites and web applications. It provides a collection of CSS and
JavaScript components, as well as pre-designed templates and themes, that make
it easier to create visually appealing and functional web interfaces.
24
Table 4. Minimum Software Requirements for the Proposed System
MINIMUM REQUIREMENTS
Software Versions
Windows OS 10
XAMPP 8.0.11
WYSIWYG (Summernote) 0.8.18
Adobe Photoshop 2019
Bootstrap 5
Visual Studio Code 1.6.0
25
CHAPTER IV
RESULTS AND DISCUSSION
The System Interface
User-side
The user side page consists of different sections like the homepage where in all of
the main contents such as campus announcements and events are posted. Also, the
user have an access to visit About CSU, Administration, Academics, RDE and
PRM menus.
Figures 5. Homepage
26
Figures 6. Continuity of Homepage
Figures 7. About Us Section
27
Figures 8. Administration Section
Figures 9. Academic Section
28
Figures 10. RDM Section
Figures 11. Administration Login Panel
In this section, only the authorize personnel have the authority to access the Admin
Dashboard. To ensure security, the admin login credentials are converted into
hexadecimal code using md5 hash and security PHP code to prevent bypass by
accessing directly using Admin Dashboard localhost URL.
29
Figures 12. Administration Dashboard
If the Admin successfully entered the needed credentials. The website will directly
take the admin-to-admin dashboard where in the authorized personnel have the
authority to perform CRUD.
30
31
32
33
CHAPTER V
SUMMARY OF FINDINGS, CONCLUSIONS AND

RECOMMENDATIONS
This chapter is composed of three sections, namely: the summary of findings,

conclusions and recommendations which were formulated as a result of synthesizing
the major findings.
Summary of Findings
The goal of CSU Lal-lo Campus Website is to serve as a comprehensive online

platform that provides information, resources, and services to the campus
community, prospective students, and other stakeholders. The primary objectives
of the above-mentioned campus website are:
Information Dissemination: CSU Lal-lo Campus Website aims to provide

accurate and up-to-date information about the campus, its academic programs,
faculty, staff, departments, facilities, and services. It serves as a central hub where
students, faculty, and staff can access relevant information easily.
Promoting the Institution: CSU Lal-lo Campus Website acts as a marketing tool
to promote the institution to prospective students, parents, and the general public.
It highlights the campus's unique features, achievements, and strengths, creating a
positive image and attracting potential applicants.
Admissions and Enrollment: CSU Lal-lo Campus Website facilitates the

admissions process by providing detailed information about admission
requirements, procedures, deadlines, and application forms (via downloadable
forms).
34
Campus News and Announcements: CSU Lal-lo Campus Website keeps the
campus community informed about news, events, important dates, policy updates,
and other announcements. It may include features like newsletters and blogs to
deliver timely information to students, faculty, staff, and alumni.
Alumni Engagement: The website can serve as a platform to connect with

alumni, providing updates on alumni achievements, networking opportunities, and
ways to contribute to the institution. It may also include alumni directories,
mentorship programs, and alumni event information.
Practices and procedures of the CSU Lal-lo Campus Website
CSU Lal-lo website provides a centralized, user-friendly, and informative

online presence that supports the needs of the campus community, promotes the
institution, facilitates admissions and enrollment, enhances student engagement,
and offers valuable resources and services to various stakeholders.
Problems, needs and gaps in the existing CSU Lal-lo Campus Website
The current CSU Lal-lo Website which is accessible thru this URL
(http://lallo.csu.edu.ph/) is out-to-date. The latest posted article about the campus
is around September of Year 2019. In addition, the current website has the same
lay-out with other campuses making it dependent on templated websites. Having
an outdated campus website can pose several problems and challenges for the
institution.
The Developed Website, CSU Lal-lo Website
The developed new campus website represents a significant leap forward

from the outdated version, offering an enhanced online experience for our campus
community and visitors. With a fresh design, improved functionality, and up-to-
date content, the new website is designed to meet the evolving needs of our
stakeholders.
35
The new campus website represents our commitment to providing an engaging,

user-friendly, and informative online platform. It serves as a valuable resource for
prospective students, current students, faculty, staff, and other visitors, enabling
them to explore our campus, access important information, and actively engage
with the institution. We are confident that the new website will enhance the overall
digital experience and effectively showcase the excellence of our campus
community.
Conclusion
Based on the findings of the study by the use of ISO 25010 software quality
criteria and by presenting it to the panelist, the presented campus website is better
than the current and previous campus website presented by the past batches.
Through its modern design, intuitive user interface, secured database and
administration section, the website exceeds to other presented campus websites in
the campus.
36
RECOMMENDATIONS
Panelists’ Recommendations
During the Oral Defense last January, the presentation ended with an
excellent remark with minor recommendations by the group of panels.
1. The error messages must specify the current problem.
2. Search Bar must present in every part of the website.
3. The footer must full screen.
4. Change Academic Rank into Work Status
End User’s Recommendations
1. The website content must full-width.
Researchers’ Recommendations
The panelists gave the Valena Team presented website a favorable review.
However, there is opportunity for improvement to strengthen and
modernize its characteristics. As a result, developers have offered the
following suggestions for potential improvements:
 The campus must provide at least one IP Address to be used as a unique

identifier for a device or server connected to the internet.
37
APPENDICES
38
SYSTEM SOURCE CODES
Login Form
<?php
include 'config.php';
session_start();
error_reporting(0);
if (isset($_SESSION['AdminUsername'])) {
("Location:ValenaDashboard.php");
}
if (isset($_POST['submit'])) {
$AdminUsername = $_POST['AdminUsername'];
$AdminPassword = ($_POST['AdminPassword']);
$sql = "SELECT * FROM admindb WHERE AdminUsername

='$AdminUsername' AND AdminPassword ='$AdminPassword'";
$result = mysqli_query($conn, $sql);
if ($result->num_rows > 0) {
$row = mysqli_fetch_assoc($result);
$_SESSION['AdminUsername'] = $row['AdminUsername'];
header("Location:ValenaDashboard.php");
exit();
} else {
echo "<script>alert('Username or Password is
incorrect.')</script>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
39
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css"

href="../CSS/LoginForm.css">
<title>CSU Lal-lo Admin Dashboard</title>

</head>
<body>
<div class="container">
<form action="" method="POST" class="login-email">
<img style = "max-width:30%; display:block; margin-
left:auto; margin-right: auto; padding-bottom: 20px"
src="../PHOTOS/CSULLogo.png" alt="" srcset="">
<p class="login-text" style="font-size: 2rem; font-
weight: 800;">CSU Lal-lo Dashboard Login </p>
<div class="input-group">
<input type="textbox" placeholder="Admin Username"
name="AdminUsername" value="<?php echo $username; ?>" required>
</div>
<input type="password" placeholder="Admin Passcode"
name="AdminPassword" value="<?php ?>" required>
</div>
<button name="submit" class="btn">Login</button>
</div>
<p class="all-rights-reserved">Cagayan State University -
Lal-lo Campus <br>All Rights Reserved 2022.</p>
</form>
</div>
</body>
</html>
Dashboard
40
<?php
include('security.php');
include('includes/config.php');
/*include('../includes/function.php'); //functions for storing IP

address web visitor
$page_id = 2;
$visitor_ip = $_SERVER['REMOTE_ADDR']; // stores IP address of
visitor in variable
add_view($con, $visitor_ip, $page_id);*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<meta name="description" content="">
<meta name="author" content="Coderthemes">

<title>VALENA Net Admin | Dashboard</title>
<link rel="stylesheet" href="../plugins/morris/morris.css">


<link href="assets/css/bootstrap.min.css" rel="stylesheet"
type="text/css" />
<link href="assets/css/core.css" rel="stylesheet"
type="text/css" />
<link href="assets/css/components.css" rel="stylesheet"
type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet"
type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet"
type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet"
type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet"
type="text/css" />
href="../plugins/switchery/switchery.min.css">
<script src="assets/js/modernizr.min.js"></script>
41
</head>
<body class="fixed-left" style="background-image: linear-

gradient(135deg, rgba(159, 159, 159, 0.46) 0%, rgba(159, 159, 159,
0.46) 14.286%,rgba(165, 165, 165, 0.46) 14.286%, rgba(165, 165, 165,
0.46) 28.572%,rgba(171, 171, 171, 0.46) 28.572%, rgba(171, 171, 171,
0.46) 42.858%,rgba(178, 178, 178, 0.46) 42.858%, rgba(178, 178, 178,
0.46) 57.144%,rgba(184, 184, 184, 0.46) 57.144%, rgba(184, 184, 184,
0.46) 71.43%,rgba(190, 190, 190, 0.46) 71.43%, rgba(190, 190, 190,
0.46) 85.716%,rgba(196, 196, 196, 0.46) 85.716%, rgba(196, 196, 196,
0.46) 100.002%),linear-gradient(45deg, rgb(252, 252, 252) 0%,
rgb(252, 252, 252) 14.286%,rgb(246, 246, 246) 14.286%, rgb(246, 246,
246) 28.572%,rgb(241, 241, 241) 28.572%, rgb(241, 241, 241)
42.858%,rgb(235, 235, 235) 42.858%, rgb(235, 235, 235)
57.144%,rgb(229, 229, 229) 57.144%, rgb(229, 229, 229)
71.43%,rgb(224, 224, 224) 71.43%, rgb(224, 224, 224) 85.716%,rgb(218,
218, 218) 85.716%, rgb(218, 218, 218) 100.002%);">


<div id="wrapper">
<div class="topbar">
<?php include('includes/topheader.php');?> 
</div>
<?php include('includes/leftsidebar.php');?> 


<div class="content-page" >
<div class="content">
<div class="container" >
<div class="page-title-box">
<h3 class="page-title">Dashboard</h3>
<ul class="dropdown-menu dropdown-menu-right arrow-

dropdown-menu arrow-menu-right user-list notify-list">
<li>
<h5>Hi, <?php echo
htmlentities($_SESSION['AdminUsername']);?> </h5>
</li>
42
</div>
<div class="row">
<a href="manage-articles.php">
<div class="col-lg-3 col-md-3 col-sm-3 ">
<div class="card-box widget-box-one "
style="background-image: linear-gradient(240deg, rgba(37,37,37,0.2)
0%,transparent 51%),linear-gradient(26deg, rgba(37,37,37,0.2)
0%,transparent 33%),repeating-linear-gradient(146deg,
rgba(140,140,140,0.1) 0px,transparent 4px),repeating-linear-
gradient(207deg, rgba(140,140,140,0.1) 0px,transparent
4px),repeating-linear-gradient(6deg, rgba(140,140,140,0.1)
0px,transparent 4px),linear-gradient(90deg,
rgb(241,194,117),rgb(241,194,117));">
<i class="mdi mdi-newspaper
widget-one-icon "></i>
<div class="wigdet-one-content ">
<p class="m-0 text-uppercase
font-600 font-secondary text-overflow text-dark"
title="Statistics">News Posted</p>
<?php $query=mysqli_query($con,"select * from tblposts");
$countpost=mysqli_num_rows($query);
?>
<h2><?php echo htmlentities($countpost);?> <small></small></h2>
</div></div></div></a>
<a href="manage-imageslider.php">
style="background-color:darkcyan;">
<i class="mdi mdi-image-filter
title="Statistics">Uploaded Image Slider</p>
<?php $query=mysqli_query($con,"select * from images");
43
$countslide=mysqli_num_rows($query);
?>
<h2><?php echo htmlentities($countslide);?> <small></small></h2>
<a href="manage-comments.php">
<div class="col-lg-3 col-md-3 col-sm-3
">
<div class="card-box widget-box-one"
style="background-image: repeating-linear-gradient(90deg,
hsla(31,0%,65%,0.2) 0px, hsla(31,0%,65%,0.2) 0px,transparent 0px,
transparent 1px,hsla(31,0%,65%,0.2) 1px, hsla(31,0%,65%,0.2)
4px,transparent 4px, transparent 5px,hsla(31,0%,65%,0.2) 5px,
hsla(31,0%,65%,0.2) 8px),repeating-linear-gradient(0deg,
hsla(31,0%,65%,0.2) 0px, hsla(31,0%,65%,0.2) 0px,transparent 0px,
transparent 1px,hsla(31,0%,65%,0.2) 1px, hsla(31,0%,65%,0.2)
4px,transparent 4px, transparent 5px,hsla(31,0%,65%,0.2) 5px,
hsla(31,0%,65%,0.2) 8px),linear-gradient(135deg, rgb(234, 234,
234),rgb(12, 12, 12));">
<i class="mdi mdi-send widget-
one-icon "></i>
font-600 font-secondary text-overflow text-dark">Comments Listed</p>
<?php $query=mysqli_query($con,"select * from comments");
$countcomm=mysqli_num_rows($query);
?>
<h2><?php echo htmlentities($countcomm);?> <small></small></h2>
</div>
</div>
</div></a>
<a href="manage-college.php">
style="background-color:dodgerblue;">
<i class="mdi mdi-google-circles-
group widget-one-icon "></i>
44

title="Statistics">Colleges Added</p>
<?php $query=mysqli_query($con,"select * from college");
?>
<a href="manage-
downloadablelinks.php">
style="background-color:lightslategrey;">
<i class="mdi mdi-download
title="Statistics">Dowloadable Forms Posted</p>
<?php $query=mysqli_query($con,"select * from downloadableforms");
?>
</a>
</div>
</div> 
</div> 
<?php include('includes/footer.php');?> 
</div>
</div>



<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="../plugins/switchery/switchery.min.js"></script>


<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
</body>
</html>
Adding an Article to Website
46
The codes shown are similar to other adding of contents.
<?php
session_start();
error_reporting(0);
// for adding post

if(isset($_POST['submit']))
{
$posttitle=$_POST['posttitle'];
$postdetails=$_POST['postdescription'];
$arr = explode(" ",$posttitle);
$url=implode("-",$arr);
$imgfile=$_FILES["postimage"]["name"];
// get the image extension
$extension = substr($imgfile,strlen($imgfile)-4,strlen($imgfile));
// allowed extensions
$allowed_extensions =
array(".jpg","jpeg",".png",".gif",".mp4",".mp3");
// Validation for allowed extensions .in_array() function searches an
array for a specific value.
if(!in_array($extension,$allowed_extensions))
{
echo "<script>alert('Invalid format. Only jpg / jpeg/ png /gif format
allowed');</script>";
}
else
{
//rename the image file
$imgnewfile=($imgfile).$extension;
// Code for move image into directory
move_uploaded_file($_FILES["postimage"]["tmp_name"],"postimages/".
$imgnewfile);
$query=mysqli_query($con,"insert into
tblposts(PostTitle,PostDetails,PostUrl,PostImage)
values('$posttitle','$postdetails','$url','$imgnewfile')");
if($query)
{
$msg="Post successfully added ";
}
else{
$error="Something went wrong . Please try again.";
47
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">


<link rel="shortcut icon" href="assets/images/favicon.ico">
<title>VALENA.Net | Add Articles</title>


<link href="../plugins/summernote/summernote.css"
rel="stylesheet" />


<link href="../plugins/select2/css/select2.min.css"
rel="stylesheet" type="text/css" />


<link href="../plugins/jquery.filer/css/jquery.filer.css"
rel="stylesheet" />
<link href="../plugins/jquery.filer/css/themes/jquery.filer-
dragdropbox-theme.css" rel="stylesheet" />


type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
48

type="text/css" />
href="../plugins/switchery/switchery.min.js">
</head>

gradient(135deg, rgba(49, 49, 49,0.07) 0%, rgba(49, 49, 49,0.07)
12.5%,rgba(76, 76, 76,0.07) 12.5%, rgba(76, 76, 76,0.07)
25%,rgba(102, 102, 102,0.07) 25%, rgba(102, 102, 102,0.07)
37.5%,rgba(129, 129, 129,0.07) 37.5%, rgba(129, 129, 129,0.07)
50%,rgba(155, 155, 155,0.07) 50%, rgba(155, 155, 155,0.07)
62.5%,rgba(182, 182, 182,0.07) 62.5%, rgba(182, 182, 182,0.07)
75%,rgba(208, 208, 208,0.07) 75%, rgba(208, 208, 208,0.07)
87.5%,rgba(235, 235, 235,0.07) 87.5%, rgba(235, 235, 235,0.07)
100%),linear-gradient(45deg, rgba(5, 5, 5,0.07) 0%, rgba(5, 5,
5,0.07) 12.5%,rgba(39, 39, 39,0.07) 12.5%, rgba(39, 39, 39,0.07)
25%,rgba(73, 73, 73,0.07) 25%, rgba(73, 73, 73,0.07) 37.5%,rgba(107,
107, 107,0.07) 37.5%, rgba(107, 107, 107,0.07) 50%,rgba(141, 141,
141,0.07) 50%, rgba(141, 141, 141,0.07) 62.5%,rgba(175, 175,
175,0.07) 62.5%, rgba(175, 175, 175,0.07) 75%,rgba(209, 209,
209,0.07) 75%, rgba(209, 209, 209,0.07) 87.5%,rgba(243, 243,
243,0.07) 87.5%, rgba(243, 243, 243,0.07) 100%),linear-
gradient(90deg, #ffffff,#ffffff);">


<div id="wrapper">
<?php include ('includes/leftsidebar.php') ?>
<?php include ('includes/topheader.php') ?>
<div class="content-page">

<div class="row">
<div class="col-xs-12">
<h4 class="page-title">Add Post </h4>
<ol class="breadcrumb p-0 m-0">
49
<li>
<a href="#">Post</a> </li>
<li>
<a href="#">Add Post </a></li>
<li class="active"> Add Post</li>
</ol>
<div class="clearfix"></div>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-6">
<?php if($msg){ ?>

<div class="alert alert-success" role="alert">
<strong>Well done!</strong> <?php echo htmlentities($msg);?>
</div>
<?php } ?>
<?php if($error){ ?> 

<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <?php echo htmlentities($error);?></div>
<?php } ?>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="p-6">
<div class="">
<form name="addpost" method="post" enctype="multipart/form-data">
<div class="form-group m-b-20">
<label for="exampleInputEmail1">Post Title</label>
<input type="text" class="form-control" style="border-radius:10px;"
id="posttitle" name="posttitle" placeholder="Enter title" required>
</div>
<div class="row">
<div class="card-box">
<h4 class="m-b-30 m-t-0 header-title" ><b>Post Details</b></h4>
<textarea class="summernote" name="postdescription"
required></textarea>
50
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="m-b-6 m-t-0 header-title"><b>Feature Image</b></h4>
<input type="file" class="form-control" id="postimage"
name="postimage" required>
</div>
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary waves-

effect waves-light" style="border-radius:5px;">Save and Post</button>
<button type="button" class="btn btn-danger waves-effect waves-
light" style="border-radius:5px;">Discard</button>
</form>
</div>
</div>
</div> 
</div>

</div> 
</div> 
<?php include('includes/footer.php');?> 
</div>
</div>

<script>
var resizefunc = [];
</script>


51

<script
src="../plugins/summernote/summernote.min.js"></script>

<script src="../plugins/select2/js/select2.min.js"></script>

<script
src="../plugins/jquery.filer/js/jquery.filer.min.js"></script>


<script src="assets/pages/jquery.blog-add.init.js"></script>


<script>
jQuery(document).ready(function(){
$('.summernote').summernote({
height: 240, // set editor height
minHeight: null, // set minimum
height of editor
maxHeight: null, // set maximum
height of editor
focus: false // set focus to
editable area after initializing summernote
});
// Select2
$(".select2").select2();
$(".select2-limiting").select2({
maximumSelectionLength: 2
});
});
</script>
52
</body>
</html>
Adding Video to Homepage
<?php
session_start();
error_reporting(0);
// for adding post

if(isset($_POST['submit']))
{
$postdetails=$_POST['postdetails'];
$postvideo=$_POST['postvideo'];
$query=mysqli_query($con,"insert into tblvideo

(PostTitle,PostDetails,PostVideo)
values('$posttitle','$postdetails','$postvideo')");
if($query)
{
$msg="Post successfully added ";
}
else{
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">


53

<title>VALENA.Net | Add Video</title>


rel="stylesheet" />




rel="stylesheet" />


type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
href="../plugins/switchery/switchery.min.js">
</head>

gradient(135deg, rgba(49, 49, 49,0.07) 0%, rgba(49, 49, 49,0.07)
12.5%,rgba(76, 76, 76,0.07) 12.5%, rgba(76, 76, 76,0.07)
25%,rgba(102, 102, 102,0.07) 25%, rgba(102, 102, 102,0.07)
37.5%,rgba(129, 129, 129,0.07) 37.5%, rgba(129, 129, 129,0.07)
50%,rgba(155, 155, 155,0.07) 50%, rgba(155, 155, 155,0.07)
62.5%,rgba(182, 182, 182,0.07) 62.5%, rgba(182, 182, 182,0.07)
54
75%,rgba(208, 208, 208,0.07) 75%, rgba(208, 208, 208,0.07)

87.5%,rgba(235, 235, 235,0.07) 87.5%, rgba(235, 235, 235,0.07)
100%),linear-gradient(45deg, rgba(5, 5, 5,0.07) 0%, rgba(5, 5,
5,0.07) 12.5%,rgba(39, 39, 39,0.07) 12.5%, rgba(39, 39, 39,0.07)
25%,rgba(73, 73, 73,0.07) 25%, rgba(73, 73, 73,0.07) 37.5%,rgba(107,
107, 107,0.07) 37.5%, rgba(107, 107, 107,0.07) 50%,rgba(141, 141,
141,0.07) 50%, rgba(141, 141, 141,0.07) 62.5%,rgba(175, 175,
175,0.07) 62.5%, rgba(175, 175, 175,0.07) 75%,rgba(209, 209,
209,0.07) 75%, rgba(209, 209, 209,0.07) 87.5%,rgba(243, 243,
243,0.07) 87.5%, rgba(243, 243, 243,0.07) 100%),linear-
gradient(90deg, #ffffff,#ffffff);">


<div id="wrapper">
<?php include ('includes/leftsidebar.php') ?>
<?php include ('includes/topheader.php') ?>
<div class="row">
<h4 class="page-title">Add Video </h4>
</div>
</div>
</div>

<div class="row">
<?php if($msg){ ?>

</div>
<?php } ?>
<?php if($error){ ?> 
55

<?php } ?>
</div>
</div>
<div class="row">
<div class="p-6">
<div class="">
<form name="addpost" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" style="border-radius:10px;"
id="posttitle" name="posttitle" placeholder="Enter title" required>
</div>
<div class="row">
<h4 class="m-b-30 m-t-0 header-title" ><b>Insert Video (Click the
video icon!)</b></h4>
<textarea class="summernote" name="postvideo" required></textarea>
</div>
</div>
</div>
<div class="row">
<h4 class="m-b-30 m-t-0 header-title" ><b>Insert video
details</b></h4>
<textarea class="summernote" name="postdetails"
required></textarea>
</div>
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary waves-

effect waves-light" style="border-radius:5px;">Save and Post</button>
</form>
</div>
56
</div>
</div> 
</div>

<?php include('includes/footer.php');?> 
</div>
</div>
<script>
</script>


<script

<script



<script>
57
height: 240, // set editor height
height of editor
height of editor
});
// Select2
});
});
</script>
</body>
</html>
Editing of content
<?php
error_reporting(0);
session_start();
if(isset($_POST['update']))
{
$postdetails=$_POST['postdescription'];
$arr = explode(" ",$posttitle);
$url=implode("-",$arr);
58
$postid=intval($_GET['pid']);
$query=mysqli_query($con,"update tblposts set
PostTitle='$posttitle',PostDetails='$postdetails',PostUrl='$url'
where id='$postid'");
if($query)
{
$msg="Post updated ";
}
else{
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">


<title>Valena Net Admin | Dashboard</title>


rel="stylesheet" />




rel="stylesheet" />


type="text/css" />
59

type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
</head>
<body class="fixed-left">


<div id="wrapper">


<?php include('includes/leftsidebar.php')?>
<?php include('includes/topheader.php')?>
<div class="row">
<h4 class="page-title">Edit Post </h4>
<li>
<a href="#">Admin</a>
</li>
<li>
<a href="#"> Posts </a>
60
</li>
<li class="active">
Add Post
</li>
</ol>
</div>
</div>
</div> 
<div class="row">
<?php if($msg){ ?>

</div>
<?php } ?>
<?php if($error){ ?>

<?php } ?>
</div>
</div>
<?php
$postid=intval($_GET['pid']);
$query=mysqli_query($con,"select tblposts.id as
postid,tblposts.PostImage,tblposts.PostTitle as
title,tblposts.PostDetails from tblposts where
tblposts.id='$postid'");
while($row=mysqli_fetch_array($query))
{
?>
<div class="row">
<div class="p-6">
<div class="">
<form name="addpost" method="post">
61

<input type="text" class="form-control" id="posttitle" value="<?php
echo htmlentities($row['title']);?>" name="posttitle"
placeholder="Enter title" required>
</div>
<div class="row">
<h4 class="m-b-30 m-t-0 header-title"><b>Post Details</b></h4>
<textarea class="summernote" name="postdescription" required><?php
echo htmlentities($row['PostDetails']);?></textarea>
</div>
</div>
</div>
<div class="row">
<h4 class="m-b-30 m-t-0 header-title"><b>Post Image</b></h4>
<img src="postimages/<?php echo htmlentities($row['PostImage']);?>"
width="400"/>
<br />
<a href="change-image.php?pid=<?php echo
htmlentities($row['postid']);?>">Update Image</a>
</div>
</div>
</div>
<?php } ?>
<button type="submit" name="update" class="btn btn-success waves-

effect waves-light">Update </button>
</div>
</div>
</div> 
</div>
</div>
</div> 
62
<script>
var resizefunc = []; //animation
</script>


<script

<script



<script>
height: 240, // format editor
height
height of editor
height of editor
});
// Select2
63
});
});
</script>
<script
</body>
</html>
Managing of content
<?php
error_reporting(0);
session_start();
if($_GET['presid'])
{
$id=intval($_GET['presid']);
$query=mysqli_query($con,"delete from tblposts where
id='$id'");
$delmsg="Post deleted forever";
}
?>
<!DOCTYPE html>
64
<html lang="en">
<head>
scale=1.0">


<title>VALENA.Net | Manage Articles</title>


type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
</head>


<div id="wrapper" style="background-image: repeating-linear-
gradient(45deg, rgb(249, 249, 249) 0px, rgb(249, 249, 249)
109px,rgb(234, 234, 234) 109px, rgb(234, 234, 234) 218px,rgb(242,
242, 242) 218px, rgb(242, 242, 242) 327px);">
<?php include('includes/leftsidebar.php');?>
65
<?php include('includes/topheader.php');?>
<div class="content">

<div class="row">
<h4 class="page-title">Manage Posts </h4>
<li>
<a href="#">Admin</a></li>
<li>
<a href="#">Posts</a></li>
<li class="active">
Manage Post </li>
</ol>
</div>
</div>
</div> 
<?php
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
$no_of_records_per_page = 5;
$offset = ($pageno-1) * $no_of_records_per_page;
$total_pages_sql = "SELECT COUNT(*) FROM tblposts";

$result = mysqli_query($con,$total_pages_sql);
$total_rows = mysqli_fetch_array($result)[0];
$total_pages = ceil($total_rows / $no_of_records_per_page);?>
<div class="row">
<?php if($delmsg){ ?>

<strong>Well done!</strong> <?php echo htmlentities($delmsg);?>
</div>
66
<?php } ?>
</div>
<div class="card-box" style="background-image: linear-
gradient(45deg, transparent 0%, transparent 51%,rgba(130, 130,
130,0.05) 51%, rgba(130, 130, 130,0.05) 71%,transparent 71%,
transparent 100%),linear-gradient(0deg, transparent 0%, transparent
69%,rgba(130, 130, 130,0.05) 69%, rgba(130, 130, 130,0.05)
84%,transparent 84%, transparent 100%),linear-gradient(135deg,
transparent 0%, transparent 37%,rgba(130, 130, 130,0.05) 37%,
rgba(130, 130, 130,0.05) 73%,transparent 73%, transparent
100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
border:none;">
<div class="table-responsive">
<table class="table table-colored table-centered table-inverse m-0">
<thead>
<tr>
<th>Title</th>
<th>Posting Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
postid,tblposts.PostTitle as title,tblposts.PostingDate as postdate
from tblposts");
$rowcount=mysqli_num_rows($query);
if($rowcount==0)
{
?>
<tr>
<td colspan="6" align="center"><h3 style="color:red">No record

found</h3></td>
<tr>
<?php
} else {
{
?>
67
<tr>
<td><b><?php echo htmlentities($row['title']);?></b></td>
<td> <?php $timestamp = $row['postdate'];
echo date('M d<\sup>S</\s\up>,Y',strtotime($timestamp));?></td>
<td style="width:16px;"><a href="edit-articles.php?pid=<?php echo

htmlentities($row['postid']);?>"><i class="fa fa-pencil"
style="color: #29b6f6;"></i></a>
<a href="manage-articles.php?presid=<?php echo
htmlentities($row['postid']);?>&&action=del" onclick="return
confirm('Do you really want to delete ?')"> <i class="fa fa-trash-o"
style="color: #f05050"></i></a> </td>
</tr>
<?php } }?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php include('includes/footer.php');?>

</div>
</div>
<script>
</script>


68


</body>
</html>
Session Start Code
<?php
session_start();
if (!$_SESSION['AdminUsername']){
header('Location:index.php');
}
?>
Unapproved Comment
<?php
session_start();
error_reporting(0);
if(strlen($_SESSION['login'])==0)
{
header('location:index.php');
}
else{
69
if( $_GET['disid'])
{
$id=intval($_GET['disid']);
$query=mysqli_query($con,"update comments set status='0' where
id='$id'");
$msg="Comment unapprove ";
}
// Code for restore
if($_GET['appid'])
{
$id=intval($_GET['appid']);
$query=mysqli_query($con,"update comments set status='1' where
id='$id'");
$msg="Comment approved";
}
// Code for deletion

if($_GET['action']=='del' && $_GET['rid'])
{
$id=intval($_GET['rid']);
$query=mysqli_query($con,"delete from comments where
id='$id'");
$delmsg="Category deleted forever";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title> | Manage Categories</title>

type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
type="text/css" />
70
</head>


<div id="wrapper">


<?php include('includes/topheader.php');?>


<?php include('includes/leftsidebar.php');?>



<div class="row">
<h4 class="page-title">Manage
Unapproved Comments</h4>
<li>
<a href="#">Admin</a>
</li>
<li>
<a href="#">Comments </a>
</li>
<li class="active">
Unapprove Comments
71
</li>
</ol>
</div>
</div>
</div>

<div class="row">
<?php if($msg){ ?>

</div>
<?php } ?>
<?php if($delmsg){ ?>

<strong>Oh snap!</strong> <?php echo htmlentities($delmsg);?></div>
<?php } ?>
</div>
<div class="row">
<div class="demo-box m-t-
20">
<div class="table-
responsive">
<table
class="table m-0 table-colored-bordered table-bordered-primary">
<thead>
<tr>
<th>#</th>
<th>
Name</th>
<th
width="300">Comment</th>
<th>Status</th>
<th>Post / News</th>
72
<th>Posting Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$query=mysqli_query($con,"Select comments.id,
comments.name,comments.postingDate,comments.comment,posts.id as
postid,posts.PostTitle from comments join posts on
posts.id=comments.postId where comments.status=0");
$cnt=1;
{
?>
<tr>
<th scope="row"><?php echo htmlentities($cnt);?></th>
<td><?php echo htmlentities($row['name']);?></td>
<td><?php echo htmlentities($row['comment']);?></td>
<td><?php $st=$row['status'];
if($st=='0'):
echo "Wating for approval";
else:
echo "Approved";
endif;
?></td>
<td><a href="edit-post.php?pid=<?php echo

htmlentities($row['postid']);?>"><?php echo
htmlentities($row['PostTitle']);?></a> </td>
<td><?php echo htmlentities($row['postingDate']);?></td>
<td>
<?php if($st=='0'):?>
<a href="unapprove-comment.php?disid=<?php echo
htmlentities($row['id']);?>" title="Disapprove this comment"><i
class="ion-arrow-return-right" style="color: #29b6f6;"></i></a>
<?php else :?>
<a href="unapprove-comment.php?appid=<?php echo
htmlentities($row['id']);?>" title="Approve this comment"><i
class="ion-arrow-return-right" style="color: #29b6f6;"></i></a>
<?php endif;?>
73
<a href="unapprove-comment.php?rid=<?php echo

htmlentities($row['id']);?>&&action=del"> <i class="fa fa-trash-o"
style="color: #f05050"></i></a> </td>
</tr>
<?php
$cnt++;
} ?>
</tbody>
</table>
</div>
</div>
</div>
</div>

<div class="row">
<div class="demo-box m-t-20">
<div class="m-b-30">
</div>
</div>
</div>
</div>

<?php include('includes/footer.php');?>
</div>
</div>
<script>
</script>
74




</body>
</html>
<?php } ?>
Articles CSS
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'
);
body {
text-align: center;
}
.wrapper {
width: 1170px;
}
header {
height: 100px;
background: rgb(109, 27, 27);
width: 100%;
z-index: 10;
position: fixed;
float: center;
}
.logo {
75
width: 30%;
float: left;
line-height: 100px;
}
.logo a {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: absolute;
}
nav {
float: right;
line-height: 100px;
}
nav a {
text-decoration: none;
letter-spacing: 4px;
font-size: 20px;
margin: 0 10px;
color: #fff;
}
.banner-area {
height: auto;
width: 100%;
position: relative;
top: 100px;
background-size: cover;
background-position: center center;
margin-bottom:50px ;
float: center;
}
.content-area {
width: 100%;
position: relative;
top: 450px;
background: #ebebeb;
height: 1500px;
}
.content-area h2 {
padding-top: 30px;
font-size: 40px;
margin: 0;
}
.content-area p {
76
padding: 2% 0px;
font-family: poppins;
line-height: 30px;
}
.dropbtn {
background-color: transparent;
color: white;
padding: 16px;
font-size: 16px;
border: none;
font-family: "Metropolis";
padding-top:43px ;
position: relative;
.dropdown {
position: relative;
}
/* Dropdown Content (Hidden by Default) */

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown-content a:hover {background-color: rgb(235, 180, 80) ;

transition: linear 0.3s; border-radius: 10px;}
77
.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {color: rgb(247, 183, 8); transition:
linear 0.3s; cursor: pointer;}
.dropdown a{
}
.wrap{
height: 700px;
width: 100%;
background: transparent;
}
.move{
display: flex;
position: relative;
top: 0;
right: 0;
}
.slide{
width: 100%;
flex-shrink: 0;
text-align: center;
margin-top: 240px;
}
@keyframes slide1{
0% { right: 0%; }
30% { right: 0%; }
33% { right: 100%; }
63% { right: 100%; }
66% { right: 200%; }
97% { right: 200%; }
100% { right: 0%; }
}
.move {
transition: linear 8s;
animation: slide1 linear 8s infinite;}
.slide{
width: 100%;
color: azure;
position:relative;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
78
}
.slide h1{
font-size: 65px;
font-weight: 900;
line-height: 50px;
}
.slide p{
font-size: 14px;
color:azure;
.marquee{
background-color: rgb(24, 23, 23);
height: 70px;
}
.marquee p{
padding-top: 10px;
color: #f1f1f1;
}
.Seminars{
width: 80%;
margin: auto;
text-align: center;
margin-top: 40px;
.CITNews, .download{
width: 80%;
margin: auto;
text-align: center;
margin-top: -20px;
}
.other{
background-color: teal;
color: white;
}
.Seminars h1, .CITNews h1, .download h1{
font-size:50px;
79
font-weight: 900;
padding-bottom: 20px;
text-align: center;
}
.Seminars .CITNews h1{

color: rgb(20, 20, 20);
font-size: 14px;
font-weight: 300;
line-height: 22px;
padding: 10px;
}
a{
}
ul{
list-style: none;
}
#news{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 100px;
border-bottom: 0px solid rgb(15, 15, 15);
text-align: left;
}
.news-heading{
display: flex;
text-align: left;
}
.news-heading span{
color: #25a2c5;
font-size: 1.4rem;
}
.news-heading h3{
font-size: 3.4rem;
color:rgb(247, 243, 243);
font-weight: 900;
text-align: left;
80
}
.news-container{
display: flex;
margin: 40px 0px;
flex-wrap: wrap;
text-align: left;
}
.news-box{
width: 450px;
background-color: rgb(145, 62, 62);
margin: 20px;
.news-box:hover{
transition: .4s linear;
box-shadow: 0 0 20px 0px rgb(27, 27, 27);
}
.news-img{
width: 100%;
height: auto;
border-radius: 5px;
}
.news-img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.news-text{
padding: 30px;
display: flex;
}
.news-text span{
81
color: #fafafa;
font-size: 0.9rem;
}
.news-text .news-title{
font-size: 1.3rem;
font-weight: 700;
color: rgb(255, 255, 255);
}
.news-text .news-title:hover{
color:#f5ad5b;
transition: linear 0.3s;
}
.news-text p{
color: rgb(248, 246, 246);
font-size: 0.9rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin: 20px 0px;
}
.news-text a{
color: rgb(122, 187, 248);
}
.news-text a:hover{
color: #fafbfc;
transition: .3s linear;
}
.back-button{
font-size: 1em;
background: white;
padding: 10px 30px;
color: black;
text-transform: uppercase;
transition: 0.5s;
border-style: solid;
border-color: white;
}
82
.back-button:hover{
font-size: 1em;
padding: 10px 30px;
color: rgb(247, 239, 239);
text-transform: uppercase;
transition: 0.2s;
border-style: solid;
border-color:rgb(104, 202, 231);
}
.container{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
background-color: #24262b;
padding: 70px 0;
flex-shrink: 0;
margin-top: 30%;
}
.footer-col{
width: 19%;
padding: 0 5px;
}
.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
83
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
}
.footer-col ul li a{
font-size: 16px;
color: #ffffff;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover{
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a{
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
.footer-col .logo{
84
margin-left: 500%;
margin-top: -200%;
}
/*responsive*/
@media(max-width: 767px){
.footer-col{
width: 50%;
}
}
@media(max-width: 574px){
.footer-col{
width: 100%;
}
}
.center{
position: relative;
top: 25%;
left: 50%;
z-index: 10;
}
.center button{
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
color: #222;
border: none;
outline: none;
cursor: pointer;
}
.popup{
position: absolute;
top: 50%;
left: 50%;
width:500px;
padding: 20px 30px;
}
85
.popup .form h2{

text-align: left;
color: rgb(34, 33, 33);
margin: 10px 0px 20px;
font-size: 25px;
}
.popup .form .form-element{
margin: 15px 0px;
}
.popup .form .form-element label{
font-size: 14px;
color: rgb(34, 33, 33);
}
.popup .form .form-element input[type="text"],
.popup .form .form-element input[type="password"]{
margin-top: 5px;
display: block;
width: 100%;
padding: 10px;
outline: none;
border: 1px solid rgb(122, 122, 122);
border-radius: 5px;
}
.popup .form .form-element button{
width: 100%;
height: 40px;
border: none;
outline: none;
font-size: 15px;
background: #f6f8f8;
color: rgb(34, 34, 34);
cursor: pointer;
font-weight: 400;
}
.popup .form .form-element a{
display: block;
text-align: center;
font-size: 10px;
color: #023130;
font-weight: 600;
.success {
86

color: rgb(26, 25, 25);
padding: 10px;
width: 440px;
border-radius: 5px;
opacity: .7;
}
.org{
position: relative;
}
.center{
position: absolute;
top: 50%;
left: 50%;
}
.center button{
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
color: #222;
border: none;
outline: none;
cursor: pointer;
}
.popup{
position: absolute;
top: 50%;
left: 50%;
width:500px;
padding: 20px 30px;
background: white;
}
.popup .form h2{

text-align: center;
color: rgb(34, 33, 33);
margin: 10px 0px 20px;
font-size: 25px;
}
87
.popup .form .form-element{

margin: 15px 0px;
}
.popup .form .form-element label{
font-size: 14px;
color: rgb(34, 33, 33);
}
.popup .form .form-element input[type="text"],
.popup .form .form-element input[type="password"]{
margin-top: 5px;
display: block;
width: 100%;
padding: 10px;
outline: none;
border: 1px solid rgb(122, 122, 122);
border-radius: 5px;
}
.popup .form .form-element button{
width: 100%;
height: 40px;
border: none;
outline: none;
font-size: 15px;
background: #eba611;
color: rgb(34, 34, 34);
cursor: pointer;
font-weight: 400;
}
.popup .form .form-element button:hover{

width: 100%;
height: 40px;
border: none;
outline: none;
font-size: 15px;
background: #861906;
color: rgb(255, 253, 253);
cursor: pointer;
font-weight: 400;
transition: linear 0.3s;
}
.popup .form .form-element a{
88
display: block;
text-align: center;
font-size: 10px;
color: #023130;
font-weight: 600;
.column1, .column2 {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row p {
font-size: 20px;
color: #861906;
}
.row p:hover{
font-weight: 900;
color: #dd9206;
transition: linear .2s;
}
.footer {
background-color: #24262b;
flex-shrink: 0;
margin-top: -20px;
}
.footer-col {
width: 25%;
padding: 0 0px;
.footer-col h4 {
font-size: 18px;
89
color: #ffffff;
font-weight: 500;
position: relative;
}
.footer-col ul li:not(:last-child) {
}
.footer-col ul li a {
font-size: 16px;
color: #ffffff;
font-weight: 300;
color: #bbbbbb;
display: block;
}
.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a:hover {

color: #24262b;
background-color: #ffffff;
}
Sub-Menus Page Code
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
90
scale=1, shrink-to-fit=no">
<meta name="author" content="">
<title>Cagayan State University | Philosophy, Legal Basis and

Mandate</title>


<link href="vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min
.js"></script>
</head>
<link rel = "shortcut icon" type="image/png"

href="images/csulogo.png">
</head>
<body style = "background-image: url('Background.jpg');

background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;">


<?php include 'headerwoclock.php';?>


<img src="Academics - Admissions.jpg" style="display: flex;

width: 100%; margin-top:18%"alt="">
<div class="row" style="margin-top: 2%">
91


<div class="col-md-


<?php
$query=mysqli_query($con,"select PostTitle,PostDetails,PostingDate
from admission");
while ($row=mysqli_fetch_array($query)) {
?>
<div class="card mb-4" style="background-color:transparent;

font-size: 20px; color:white; border: hidden; text-align:center;">
<div class="card-body" style= "border: hidden;">

<h1 class="card-title text-center font-weight-bold pb-4 "
style="font-family:'Segoe UI Black'; color:white;"><?php echo
htmlentities($row['PostTitle']);?></h1>
<hr />
<h5 class="card-text text-left" style="font-

size:21h5x; text-align:left;font-family:'Times New Roman';"><?php
$pt=$row['PostDetails'];
echo (substr($pt,0));?></h5>
</div>
<div class="card-footer text-muted">
</div>
</div>
<?php } ?>
</div> <?php
include "includes/sidebarforadmission.php";
?>
</div>
</div>
<?php include 'footer.html' ?>
Current Time Code
<html lang="en">
92
<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">
<h5 style = "color:black; position:relative;">Philippine Standard
Time: <span id="time"> </span></h5>
<script src="index.js"> </script>
</head>
<body>
</body>
</html>
Faculty and Staffs Code
<div class="row">
<div class="table-responsive"style="border-radius:10px;">


<table class="table m-0 table-responsive " style="width:100%; border-
style : hidden!important;" border-collapse:collapse; cellpadding="0"
cellspacing="0">
<thead >
<tr style="border-collapse:collapse;"><h1 style = "text-
align:left; font-family:'Times New Roman'; color: white; font-
weight:bold;">Campus Executive Officer</h1></tr>
<tr>
<th style = "text-align:center; color:aliceblue; font-size:22px;
width:15%; border-top: none !important;
border-left: none !important;">Photo</th>
border-left: none !important;">Name of the Official</th>
border-left: none !important; ">Designation</th>
</tr>
</thead>
<tbody>
<?php
$query=mysqli_query($con,"select id,name,designation,image,role
from campus_officials where role = 'Campus Executive Officer'");
if($rowcount==0)
93
{
?>
<tr>
found</h3></td>
<tr>
<?php
}else{
{
?>
<tr style="width:100%;">
<td style = "width: 100px;"><img class="img-fluid rounded-circle
mx-auto d-block" style="vertical-align: middle; width: 100%; border-
radius:50%;" src="../MainPage/admin/campus-officials/<?php echo
htmlentities($row['image']);?>"></td>
<td style = "font-weight:100; text-align:center; color:aliceblue;
font-size:21px; height:50%; vertical-align: middle; "><?php echo
htmlentities($row['name']);?></td>
<td style = "font-weight:100; text-align:center; color:aliceblue;
font-size:21px; vertical-align: middle;"><?php echo
htmlentities($row['designation']);?></td>
</tr>
<?php
}}?>
</tbody>
</table>

<br><br><br>

<table class="table m-0 table-responsive" style="width:100%;">
<thead >
<h1 style = "text-align:left; font-family:'Times New Roman';
color: white; font-weight:bold;">Office of the Campus Executive
Officer</h1>
<th style = "border-top: none !important;
border-left: none !important; text-align:center;
color:aliceblue; font-size:27px; width:15%;">
color:aliceblue; font-size:27px; width:60%;">
color:aliceblue; font-size:27px; width:40%;"></th>
</thead>
<tbody>
94
<?php
$query=mysqli_query($con,"Select id,name,designation,image,role
from campus_officials where role = 'Office of the Campus Executive
Officer'");
if($rowcount==0)
{
?>

found</h3></td>
<?php
}else{
{
?>
<tr style="width:100%; ">
<td style = "width: 100px; border-top: none !important;
border-left: none !important; "><img class="img-fluid
rounded-circle mx-auto d-block" style="vertical-align: middle; width:
100%; border-radius:50%;" src="../MainPage/admin/campus-officials/<?
php echo htmlentities($row['image']);?>"></td>
<td style = "border-top: none !important;
border-left: none !important; font-weight:100; text-
align:center; color:aliceblue; font-size:21px; height:50%; vertical-
align: middle; "><?php echo htmlentities($row['name']);?></td>
<td style = "border-top: none !important;
border-left: none !important; font-weight:bold; text-
align:center; color:aliceblue; font-size:20px; vertical-align:
middle;"><?php echo htmlentities($row['designation']);?></td>
</tr>
<?php
}}?>
</tbody>
</table>

<br><br><br>
Footer Code
<script>
let mybutton = document.getElementById("myBtn");
95
// When the user scrolls down 20px from the top of the document, show
the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the
document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE
and Opera
}
</script>
<video
class="footer_video"
muted=""
loop=""
autoplay
>
<link href="footer.css" rel="stylesheet" type="text/css" />
</video>
<div class="container-fluid">
<div class="footer_inner">
<div class="c-footer">
<div class="layout">
<div class="layout_item w-50">
<div class="newsletter">
<img src="CSULogo.png" alt="" style="width:400px;
">
96
<h5 class="newsletter_title">Sta. Maria, Lal-lo,

Cagayan, 3509 <br> (078) 844-0098/0099 Loc. 122 <br> Email:
president@csu.edu.ph</h5>
</form>
</div>
</div>

<nav class="c-nav-tool">
<h4 class="c-nav-tool_title">Online Services</h4>
<ul class="c-nav-tool_list">
<li>
<a href="https://csu.edu.ph/helpdesk/" class="c-
link">CSU Help Desk</a>
</li>
<li>
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSdE9ARiOADMweoo8Oerl-
H9QyOZk5WNlhmvsIser4mwvQhyjQ/viewform" class="c-link">CSU Alumni
Tracer</a>
</li>
<li>
<a href="http://lib.csu.edu.ph/" class="c-
link">Online Library</a>
</li>
</ul>
</nav>
</div>

<nav class="c-nav-tool">
<h4 class="c-nav-tool_title">Government Links</h4>
<ul class="c-nav-tool_list">
<li class="c-nav-tool_item">
<a href="https://www.ched.gov.ph/" class="c-link"
>CHED Website</a
>
</li>
97
<a href="https://www.dbm.gov.ph/" class="c-

link">DBM Website</a>
</li>
<a href="https://www.coa.gov.ph/" class="c-link"
>COA Website</a
>
</li>
<a href="https://www.dost.gov.ph/" class="c-link"
>DOST Website</a
>
</li>
<a href="https://www.da.gov.ph/" class="c-link">DA
Website</a>
</li>
<a href="https://www.neda.gov.ph/" class="c-
link">NEDA Website </a>
</li>
</ul>
</nav>
</div>
</div>
<div class="layout c-2">
<ul class="flex">
<li>
<a href="https://www.facebook.com/CSULallo">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="32"
height="32"
>
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657
9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-
3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63
98
1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-

5.523-4.477-10-10-10z"
/>
</svg>
</a>
</li>
<a href="#">
<svg
viewBox="0 0 24 24"
width="32"
height="32"
>
<path
d="M22.162 5.656a8.384 8.384 0 0 1-
2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656
1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37
4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168
0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-
1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732
11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9
0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
/>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
viewBox="0 0 24 24"
width="32"
height="32"
>
<path
d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05
1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1
1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122
0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883
4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-
1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-
99
4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153

4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013
15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-
2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45
2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5
5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.25a1.25 1.25 0 0 0-2.5 0 1.25 1.25
0 0 0 2.5 0zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
/>
</svg>
</a>
<li>
</ul>
</div>
<ul class="flex">
</li>
</ul>
</div>
<div
class="layout_item w-25"
style="display: flex; justify-content: end; align-items:
center"
>
<button onclick="topFunction()" id="myBtn" title="Go to
top"><svg
viewBox="0 0 24 24"
width="36"
height="36"
>
<path
d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52
2 12 6.48 2 12 2zm1 10h3l-4-4-4 4h3v4h2v-4z"
/>
</svg>
</button>
</div>
</div>
</div>
100
</div>
<div class="footer_copyright">
<p>© Site developed by Capstone Group 05 of A.Y 2022-
2023.</p>
</div>
</div>
</footer>
Header Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSU Lal-lo Website</title>
<meta charset="utf-8" />
scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>


<header class="header" style="background-color: white">
<div class="header-main">
<div class="logo">
<a href="index.php"> <img src="Csul.png" alt="close"
style="width: 270px;"></a>
</div>
<div class="open-nav-menu">
<span></span>
</div>
<div class="menu-overlay"></div>


<nav class="nav-menu">
<div class="card mb-4" style = "border:none;
float:right;">
101
<div class="" style="width:500px; padding-left:12%;">

<form name="search" action="search.php" method="post">
<input type="text" name="searchtitle" class="form-control"
placeholder="Search for News and Articles" required>
<span class="input-group-btn">
<button class="btn btn-danger" type="submit">Go!</button>
</span>
</form>
</div>
</div>
<div class="close-nav-menu">
<img src="img/close.svg" alt="close">
</div>
<ul class="menu">
<li class="menu-item menu-item-has-children">

<a href="#" data-toggle="sub-menu"
>About CSU <i class="arrow"></i
></a>
<ul class="sub-menu">
<li class="menu-item">
<a href="VMCV.php">Vision, Mission and Core
Values</a>
</li>
<a href="PLBM.php">Philosophy, Legal Basis and
Mandate</a>
</li>
<li class="menu-item"><a
href="CampusHistory.php">Campus History</a></li>
</ul>
</li>

>Administration<i class=""></i
></a>
102
<li class="menu-item"><a href="OfficeCEO.php">Office
of the CEO</a></li>
<a href="OrgStructure.php">Organizational
Structure</a>
</li>
<a href="OrgChart.php">Organizational Chart</a>
</li>
href="CampusOfficials.php">Campus Officials</a></li>
</ul>
</li>

>Academics<i class="down-arrow"></i
></a>
href="Admission.php">Admissions</a></li>
<a href="CollegeAcademic.php">College &
Faculty</a>
</li>
<a href="Undergraduate.php">Undergraduate
Programs</a>
</li>
</ul>
</li>

>RDE<i class="down-arrow"></i
></a>
<a href="VMCVRDET.php">Vision, Mission, Goals and
Objectives</a>
</li>
103
<a href="RDEFramework.php">Framework</a>
</li>
<a href="RDETandP.php">Thrusts and Priorities</a>
</li>
<a href="RDELinkages.php">Linkages</a>
</li>
</ul>
</li>

>PRM<i class="down-arrow"></i
></a>
<a href="#">Alumni</a>
</li>
<a href="BusinessResources.php">Business
Resources</a>
</li>
</ul>
</nav>

</div>
</div>
</header>



<section class="home-section">
</section>

<script src="js/script.js"></script>
</body>
</html>
Search Bar Code
+<?php
104
session_start();
error_reporting(0);
include('config.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
scale=1, shrink-to-fit=no">
<meta name="author" content="">
<title>Cagayan State University Lallo Campus | Search

Page</title>
<link href="vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.m
in.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min
.js"></script>
</head>
<body style = "background-image: url('Background.jpg');

background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;">


<?php
include 'header.php';
?>
105


<div class="row" style="margin-top: 15%">




<?php
if($_POST['searchtitle']!=''){
$st=$_SESSION['searchtitle']=$_POST['searchtitle'];
}
$st;
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
$no_of_records_per_page = 8;
$offset = ($pageno-1) * $no_of_records_per_page;
$total_pages_sql = "SELECT COUNT(*) FROM tblposts";

$result = mysqli_query($con,$total_pages_sql);
$total_rows = mysqli_fetch_array($result)[0];
$total_pages = ceil($total_rows / $no_of_records_per_page);
pid,tblposts.PostTitle as
posttitle,tblposts.PostImage,tblposts.PostDetails as
postdetails,tblposts.PostingDate as postingdate,tblposts.PostUrl as
url from tblposts where tblposts.PostTitle like '%$st%' LIMIT
$offset, $no_of_records_per_page");
if($rowcount==0)
106
{
echo "<h4 style=color:white; text-align:center > No record found
</h4>";
}
else {
while ($row=mysqli_fetch_array($query)) {
?>
<div class="card mb-4" style="border:hidden; background-

color:transparent;">
<h2 class="card-title text-left font-weight-bold pb-4"
style="font-family:Segoe UI Black; color:white;"><?php echo
htmlentities($row['posttitle']);?></h2>
<div class="text-left"><h4 style="color:white;">
<?php $timestamp = $row['postingdate'];
echo 'Date Posted: '. date('M d<\sup>S</\s\
up>,Y',strtotime($timestamp));?>
</div>
</h4>
<div class="card-body">
<p class="text-left" style="font-family: Rockwell;

color:white"><?php
$content=$row['postdetails'];
$string= strip_tags($content);
if(strlen($string) > 300):

$stringCut=substr($string,0,300);
$endPoint=strrpos($stringCut,' ');
$string=$endPoint?
substr($stringCut,0,$endPoint):substr($stringCut
,0);
endif;
echo $string;
?>
<a href="news-details.php?nid=<?php echo
htmlentities($row['pid'])?>" class="" style="font-size:12px;
color:wheat;"> Read More...</label></a>
107
</p> </div>
</div>
<?php } ?>
<ul class="pagination justify-content-center mb-4">

<li class="page-item"><a href="?pageno=1" class="page-
link">First</a></li>
<li class="<?php if($pageno <= 1){ echo 'disabled'; } ?>
page-item">
<a href="<?php if($pageno <= 1){ echo '#'; } else { echo
"?pageno=".($pageno - 1); } ?>" class="page-link">Prev</a>
</li>
<li class="<?php if($pageno >= $total_pages){ echo
'disabled'; } ?> page-item">
<a href="<?php if($pageno >= $total_pages){ echo '#'; }
else { echo "?pageno=".($pageno + 1); } ?> " class="page-
link">Next</a>
</li>
<li class="page-item"><a href="?pageno=<?php echo
$total_pages; ?>" class="page-link">Last</a></li>
</ul>
<?php } ?>

</div>


<?php include('includes/sidebar.php');?>
</div>

</div>



108
<script src="vendor/jquery/jquery.min.js"></script>
<script
src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
</body>
<?php
include "footer.html";
?>
</html>
USER MANUAL
In this panel, the admin must enter the admin code and passcode.
109
After entering the needed credentials, the website will redirect the admin to
VALENA Dashboard. Here on our dashboard, the admin had the authority to
perform CRUD on the specific section. Performing CRUD in the dashboard are
similar to each tab.
110
For adding a preferred type of post. Just click the type of post you want in the
sidebar of the dashboard. For example, let’s try to add a post.
Just enter the Post Title you want, the details and the corresponding photo.
111
Let’s select the photo we want to use.
Now that everything is all set now, just click the save and post and a confirmation
message will appear.
112
Now that our post is posted, let’s check our homepage.
The uploaded post is now accessible to read to our website. Clicking the read more
will redirect us to more detailed part of the news.
113
In the article section, the user can leave a comment.
114
CURRICULUM VITAE
PERSONAL INFORMATION
Last Name: Taroy Address: Magapit, Lal-lo, Cagayan
Given Name: Adolfo Mobile No.: 09674050623
Middle Name: Ammaqui Email: adolfotaroy0429@gmail.com
Sex: Male Birthdate: September 12, 2000
EDUCATIONAL BACKGROUND
ELEMENTARY EDUCATION
SOUTHVILLE 5 ELEMENTARY SCHOOL

Timbao, City of Binan, Laguna
SECONDARY EDUCATION
MAGAPIT NATIONAL HIGH SCHOOL

Magapit, Lal-lo, Cagayan
TERTIARY EDUCATION
CAGAYAN STATE UNIVERSITY

115
Last Name: Tarubal Address: Dummun, Gattaran, Cagayan
Given Name: Rey Mark Mobile No.: 09352888586
Middle Name: Osorio Email: rukawakaede189@gmail.com
Sex: Male Birthdate: September 27, 1999
DUMMUN ELEMENTARY SCHOOL

Dummun, Gattaran, Cagayan
SECONDARY EDUCATION
GATTARAN NATIONAL TRADE SCHOOL

Gattaran, Cagayan
TERTIARY EDUCATION

116
Last Name: Curioso Address: Naguilian, Lal-lo, Cagayan
Given Name: Elmer Jr Mobile No.: 09050412903
Middle Name: Rita Email: elmercurioso15@gmail.com
Sex: Male Birthdate: January 14, 2000
NAGUILIAN ELEMENTARY SCHOOL

Naguilian, Lal-lo, Cagayan
SECONDARY EDUCATION
CAMALANIUGAN NATIONAL HIGH SCHOOL

Camalaniugan, Cagayan
TERTIARY EDUCATION

117
Last Name: Alcid Address: Sta. Maria, Lal-lo Cagayan
Given Name: John Paul Josef Mobile No.: 09602615978
Middle Name: Polinar Email: snowpiie08@gmail.com
Sex: Male Birthdate: March 19, 1998
STA. MARIA ELEMENTARY SCHOOL

SECONDARY EDUCATION
LYCEUM OF LAL-LO
Lal-lo, Cagayan
TERTIARY EDUCATION

118
Last Name: Onza Address: Iringan, Allacapan, Cagayan
Given Name: Rhojane Mae Mobile No.: 09204258079
Middle Name: Email: rhojanemaeonza736@gmail.com
Sex: Female Birthdate: December 02, 1998
LOGAC ELEMENTARY SCHOOL

Logac, Lal-lo, Cagayan
SECONDARY EDUCATION
LOGAC NATIONAL HIGH SCHOOL

Logac, Lal-lo, Cagayan
TERTIARY EDUCATION

119
Last Name: Balas Address: Dalaya, Lal-lo, Cagayan
Given Name: Lyngel Mobile No.: 09999798372
Middle Name: Agcaoili Email: lyngelbalas13@gmail.com
Sex: Female Birthdate: February 29, 2000
DALAYA ELEMENTARY SCHOOL

Dalaya, Lal-lo, Cagayan
SECONDARY EDUCATION
LAL-LO NATIONAL HIGH SCHOOL

Lal-lo, Cagayan
TERTIARY EDUCATION

120
121

Valena Group Manuscript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Valena Group Manuscript

Uploaded by

Copyright:

Available Formats

CAGAYAN STATE UNIVERSITY – LAL-Lo CAMPUS

Sta. Maria, Lal-lo, Cagayan

COLLEGE of INFORMATION and COMPUTING SCIENCES

VALENA HERITAGE NETWORK (VALENANet):

In Partial Fulfillment for the

COLLEGE of INFORMATION and COMPUTING SCIENCES

The Problem and Its Background

Campus websites, for example, are an essential instrument especially on pandemic

The Cagayan State University Lal-lo Campus is an organizational unit that

COLLEGE of INFORMATION and COMPUTING SCIENCES

to have an access. VAP will be used as a platform to perform changes of contents

To meet the demand, this study aimed to develop a website called

Purpose and Description

The purpose of the study is to develop Valena Campus website of CSU

The website provides detailed information about academic programs offered at

In addition to academic information, the Valena Campus website features a

To foster community engagement, the website includes a dedicated section for

COLLEGE of INFORMATION and COMPUTING SCIENCES

Statement of the Problem

The project aimed to develop a website for CSU Lal-lo. Specifically, it

3. What are the accomplishments of the campus along higher education,

5. What is the extent of compliance of the developed application to ISO 25010

COLLEGE of INFORMATION and COMPUTING SCIENCES

6. What enhancements can be made to improve the website?

Scope and Limitation

Furthermore, because the developed website is dynamic, it is accessible online. The

Significance of the Study

COLLEGE of INFORMATION and COMPUTING SCIENCES

To ensure optimal understanding of the concepts of this study, the following

Compatibility. It is the degree to which the developed system can exchange

Efficiency. It is the quality of the developed system of being able to do a task

COLLEGE of INFORMATION and COMPUTING SCIENCES

Functional Suitability. It is the characteristic that represents the degree to which

Maintainability. It is the extent of which the developed project is understood,

Performance Efficiency. This characteristic of the developed project which

Portability. It is the extent of the developed project to be used in an operating

Reliability. It is the degree to which the developed project could be relied on or

Satisfaction. It is the degree to which the developed project provides customer

COLLEGE of INFORMATION and COMPUTING SCIENCES

Diagram 1: Conceptual Framework

INPUT PROCESS OUTPUT

Campus Instruction, System/Web THE VALENA

COLLEGE of INFORMATION and COMPUTING SCIENCES

The conceptual framework followed the input-process-output diagram with

COLLEGE of INFORMATION and COMPUTING SCIENCES

A feedback mechanism is incorporated to help in the holistic development and

RELATED LITERATURE AND STUDIES

Evaluating the Effectiveness of College Web Sites for Prospective Students

COLLEGE of INFORMATION and COMPUTING SCIENCES

The Importance of Website Innovation on Students’ Satisfaction of University

The Importance of a University Website

New statistics show an increase from previous research, whereby 85 percent of

COLLEGE of INFORMATION and COMPUTING SCIENCES

“What surprised us in doing a deeper analysis of the combination of research

How Higher Education Handles Website Design

COLLEGE of INFORMATION and COMPUTING SCIENCES

Changing Role and Purpose of the School Website

Importance of Website in Schools

The Benefits of Modern School Website Development

COLLEGE of INFORMATION and COMPUTING SCIENCES

A Regularly Updated School Website Leaves a Good Impression

In addition, a regularly updated website creates an accurate and current depiction

Why a School Website is Important in 2020.

COLLEGE of INFORMATION and COMPUTING SCIENCES