Educational Blog Web-App: It’s Effectiveness of Online reference materials.

A Thesis Presented to the Faculty of AMA Computer College Lucena Campus, Lucena
City

In Partial Fulfillment of the Requirements

For the Degree Bachelor of Science in
Information Technology

Mark Kinnedy V. Anda

Khrisialyn M. Tolentino
Angelo E. Villa-or
 CHAPTER I

PROJECT AND IT’S BACKGROUND

Introduction

In today's digital age, online reference materials have revolutionized the way we access
information and conduct research. From academic papers to DIY guides, the internet offers a
vast array of resources at our fingertips. These materials provide a wealth of knowledge on
various subjects, making learning more accessible and convenient than ever before. Whether
you're a student working on a research project or an enthusiast exploring a new hobby, online
reference materials serve as invaluable tools to expand your understanding and enhance your
skills. Embrace the power of online resources and unlock a world of information right from the
comfort of your own home.By utilizing online reference materials, individuals can delve into
diverse topics, broaden their perspectives, and stay informed on the latest trends and
developments. The convenience of accessing information at any time and from anywhere has
truly transformed the way we learn and grow. Moreover, online resources often offer interactive
elements such as videos, quizzes, and forums, fostering engagement and collaboration among
learners worldwide. Embrace the power of online resources and unlock a world of information
right from the comfort of your own home. Take advantage of this digital treasure trove to expand
your knowledge and fuel your curiosity.

Project Context

Online Reference Materlas, a lot of people rely on online resources for information and
learning. Online resources are becoming increasingly prevalent in education that has becoming a
vast and ever-expanding realm of online information, presenting a significant challenge for
education. Students bombarded with a constant stream of content, making it difficult to
distinguish between reliable and informative sources that help them to improve their learning
outcomes, also that may lead to misleading information and irrelevant information. This can
hinder learning outcomes and potentially expose them to inaccurate or biased content. Similarly,
educators and librarians are facing a challenge in curating a high-quality online resource and
effectively sharing them. The Internet is a vast ocean for everyone to get a resource that helps
them lot, many students having hard time to access some information as to it becoming private or
paid option that limited their capacity to learn.

Online Reference Materilas , the internet has become an invaluable tool for expanding
our horizons and acquiring new knowledge. The abundance of online resources has opened up
endless possibilities for learning and discovery. Whether you are interested in history, science,
art, or any other subject, there is a wealth of information waiting to be explored at your
fingertips.
One of the greatest advantages of online reference materials is the ability to learn at your own
pace and on your own terms. With just a few clicks, you can access a vast array of articles,
videos, and interactive content that cater to your specific interests and learning style. This
flexibility allows you to tailor your learning experience to suit your individual needs and
preferences.
Furthermore, the interactive nature of many online resources enables users to engage with
the material in a more dynamic and immersive way. From virtual labs and simulations to online
discussion forums and live webinars, there are countless opportunities to interact with fellow
learners and experts from around the globe. This collaborative environment not only enhances
the learning experience but also fosters a sense of community and connection among like-
minded individuals.
So, whether you are looking to expand your skill set, stay informed on current events, or
simply satisfy your curiosity, the world of online resources is ripe for exploration. Embrace the
endless possibilities that await you online and embark on a journey of lifelong learning and
growth. The digital landscape is yours to discover – seize the opportunity and let your thirst for
knowledge lead the way.

Purpose and Description

The purpose of “Educational Blog Web-App: It’s Effectiveness of Online Reference

Materials” aims to develop a free platform for every end user to access without paying option
that hinder their learning outcomes or sharing their curate-high quality information that focuses
on enhancing the effectiveness of online reference materials. The web-app will provide
functionalities to empower both students and educators:
 Students:
o A user-friendly interface and user-friendly search engine specifically designed for
educational blog purposes.
o A free content access to browse all post and filter by its categories.
o Optional user engagement features like discussion forum, to foster collaboration
and knowledge exchange.

 Educators or Editors (content creator):

o A platform to curate and share high-quality educational resources with students.
o Tools for creating and managing resources post aligned with specific categories or
learning objectives.
o Potential community features for educators to share best practices and collaborate
on resources development.

Objective of the Study

In this study, the researchers’ main objective is Educational Blog Web-App:It’s Effectiveness of
Online Reference Materials.
The researchers specifically aim for the following objectives:

1
2
3
Significance of the Study

Scope and Limitations

The researchers will focus on assessing the effectiveness of online reference materials within the
context of the Educational Blog Web-App for Travel and Tourism. This includes evaluating the
impact of these materials on users' understanding of various aspects of travel and tourism, such
as vacation destinations, cultural awareness, and tourism management, The study's scope is
limited to assessing the effectiveness of online reference materials specifically within the context
of the Educational Blog Web-App for Travel and Tourism. Other forms of educational resources
or platforms will not be included in the analysis.

The researchers will rely on user engagement indicators, such as time spent on the site
and frequency of visits, to assess the impact of the online reference materials. However, other
factors influencing user behavior, such as external influences or individual preferences, may not
be fully accounted for, while efforts will be made to ensure the quality and relevance of the
online resources offered by the web-app, the researchers acknowledge that the availability and
accuracy of these materials may vary over time. External factors beyond the control of the study
may impact the reliability of the information.

The study will primarily focus on the educational aspects of the web-app and may not
delve into broader issues such as technical functionality or user interface design, Due to resource
constraints, the researchers may not be able to comprehensively evaluate all aspects of user
engagement and satisfaction or assess the full range of educational outcomes resulting from the
use of online reference materials.
 CHAPTER II

REVIEW OF RELATED LITERATURE AND STUDIES

Related Literature

2.1 FOREIGN LITERATURE

As we had discussed in beginning, the world is moving towards smartphone

applications and total activity on mobile phone through web browsing or through app is almost
close to 67% which the recent survey had identified. Most of the time for the user had been spent
browsing the site through the web browser of smartphone. But as discussed earlier, because the
interface of most websites is not auto responsive in mobile web browser, the user doesn’t feel
good about the contents in browsing the application. Even though the mobile browser is trying to
become full fleshed software platform but still as of today the mobile web application struggles
to provide eye pleasing and satisfactory experience to the user mainly because of lack of strong
network connection across the various area. That’s why PWA progressive Web Apps is a new
technology designed and developed by Google to overcome the limitation of mobile browsing
and native applications. PWA can be launched by clicking on an icon on the home screen of the
device just like how one goes with native apps. PWA’s get instantly loaded on your screen
regardless of what kind of network connectivity is available in your area. They support the splash
screen through push notifications. In background of PWA the service worker comes in picture
which is a set of APIS which allows developer to programmatically cache and preloaded assets
and manages the data through a concept called push notifications. Service Worker is a module
which runs its own thread, and it is responsible to provide generalized entry points by which
PWA can process the background task.

The main characteristics and features of progressive web apps are as follows.
 Progressive:
Work for every user, regardless of browser choice because they’re built with progressive
enhancement as a core tenet.

 Responsive:
Fit any form factor, desktop, mobile, tablet, or whatever is next.

 Connectivity independent:
Enhanced with service workers to work offline or on low quality networks.

 App-like:
Use the app-shell model to provide app style navigation and interactions.

 Fresh:
Always up to date thanks to the service worker update process.

 Safe:
Served via TLS to prevent snooping and ensure content hasn’t been tampered with.

 Discoverable:
Are identifiable as Applications’ thanks to W3C manifests and service worker registration
scope allowing search engines to find them.

 Re-engageable:
Make re-engagement easy through features like push notifications.

 Installable:
Allow users to Keep apps they find most useful on their home screen without the hassle of an
app store.
 Linkable
 Easily share via URL and does not require complex installation.

By taking this topic for research and building the progressive web app for an educational
system we come across lot of background work created and conducted by various researchers
worldwide. As we are more familiar with the invention of using mobile web which has existed
for years as a subset of WWW which is really a slow and not so good interface on mobile
phones. It has support of WAP protocol and we generally load m.website.com pages on limited
browser supported smartphone and tables which could not handle full web support. For a few
years it looked like the old, dirty mobile Web was going to die. Adaptive and responsive design
came to make full websites look good on mobile with rich and immersive experiences. The
Mobiles bit was going to be stripped out and all we were left with was the Web, in all its glory,
from any device we decide to access it. But it now looks like the mobile Web is making a
comeback. Instead of breaking down barriers between the mobile Web and the full Web, a group
of technology companies is working to try and make the mobile version of the Web faster.
Native Apps on mobiles are fast whereas mobile websites are comparatively slow. In 2016, this
problem of Web and native App was prime conversation during all the discussion and
conference. Researchers around the world were planning to launch a new way of programming
which will help fill this gap between Web and Native Apps. Putting by a summary, PWA
launches as a new tab in browser and progress like app where most of the people are used for
native app. We can have various pinpoints so that one can go to home screen or an application
from the app drawer by using notifications and by using offline access. Progressive Web apps
(PWA) are just like native apps in terms of security and full touch responses.
In this respect, research by Hamid et al. (2015) focused on students’ participation in
academic blogs with the aim of enhancing social learning through working together in virtual
learning communities. They found that students made effective use of social technologies to
boost peer learning and mobilize strong participation, thereby increasing their motivation and
social development.
In another study on a similar topic, Úbeda-Colomer and Molina (2016) examined
students’ views on the effectiveness of these online tools as an effective means to discuss certain
controversial social issues, such as gender stereotypes or other ethical issues. They found that
blogs were mainly used by respondents to enhance their social and civic competencies through
discussion forums where they could defend their own perspectives and broaden the scope and
depth of the topics under discussion.
The aim of this study is to investigate the effects of academic blogging on students’ self-reported
motivation and perceived learning of different skills and competencies that are significant in
their future teaching practice as social studies teachers, such as digital skills and social and civic
competencies. To achieve this general aim, the following research objectives have been
established:
RO1: To collect information on the digital skills learning that students report having acquired
through blogging, to get a clearer picture of their learning before and after using this online tool.
RO2: To collect information on students’ level of self-reported motivation when blogging.
RO3: To obtain information about the opinions of undergraduate students of education on the
perceived development of social and civic competencies achieved using blogs.
RO4: To obtain information on the opinions of undergraduate students with different levels of
self-perceived motivation and ICT competence on the acquisition of digital skills and the
development of social and civic competencies achieved using blogs.

2.2 LOCAL LITERATURE

2.3 FOREIGN STUDIES

The study involved two groups of student teachers, with a total of 101 participants, who
created their own blogs as a framework for exchanging their views and sharing their ideas on a
variety of contemporary issues related to social science teaching. Data were collected through
pre- and post-tests to measure whether the expected changes had occurred because of using this
digital information platform. The results indicate that the use of blogs helped students to develop
their digital literacy, to enhance their social and civic skills, and increase their self-perceived
motivation. It is therefore worth updating the current communication processes regarding online
learning with a view to promoting digital access to information and fostering a meaningful
learning network through these web resources.
 According in study of Marcelo-García et al.( 2015), the potential of information and
communication technologies to facilitate the exchange of information and networking with
different people around the world has become increasingly evident . This has opened the door to
new communicative practices that have increased interactivity, immediacy, and effective
collaboration among worldwide internet users. Blogs are a clear example of this global internet
usage.
In this study Richardson, (2010). A blog, a contraction of “web log,” is a website used to
publish regular information that may include diary entries, news, or hyperlinks to other websites,
among others. The entries in this web-based communication tool follow a reverse chronological
order to put more emphasis on the most recent posts that appear at the top. This order helps to
highlight current information that may be of particular interest to the blog readership.
According to García et al., (2014) . Blogs emerged in the late 1990s as a new web publishing
resource that made it possible to post information to be read online by non-computer experts who
had no significant knowledge of Hypertext Markup Language (HTML) programming. Some
years later, thanks to the Web 2.0 (participatory and social web) framework, blogs not only
enabled global communication but also promoted community participation in creating and
managing content on the Internet, while enriching networking through collective collaborative
practices. Thus, in recent years, most blogs have been interactive Web 2.0 meeting points that
have allowed readers to network with a wide range of blog users from around the world, leaving
online comments and sharing information with other social media sites such as Facebook,
Twitter, or Pinterest.

2.4 LOCAL STUDIES

SYNTHESIS
TECHNICAL BACKGROUND

In this chapter, we discuss the technology that we are about to use and the explanation for
all technical developments and technologies used in developing the educational blog web-app.

PHP is a programming language used for back-end web development scripting for
server-side usages. PHP stands for “Hypertext Preprocessor”, it’s a language created by Rasmus
Lerdorf in 1994. It’s a popular open-source scripting language widely used for creating dynamic
and interactive websites. Unliked HTML that defines the structure and content of a web page,
PHP code executes on the server before the web page is sent to the user’s browser. PHP has a
relatively simple syntax, making it easier to learn compared to some other programming
languages. This makes it a good choice for beginners or those new to web development.

MySQL is an open-source relational database management system (RDBMS) that allows

you to store, manage, and access data efficiently. MySQL organizes data into tables with rows
and columns, like spreadsheets.

HTML stands for Hypertext Markup Language, is the foundation for creating web pages.
It defines the structure and content of a web page, acting as a blueprint that web browsers can
understand and translate into a visual representation for users. HTML has relatively basic
syntax, making it a good starting point for beginners to learn web development. Also, it focuses
on defining the structure rather than the visual style, which is handled by CSS (Cascading Style
Sheets).

CSS stands for Cascading Style Sheets. Its styling language is used in conjunction with
HTML to define the visual presentation of a web page. CSS doesn’t create the content or
structure of web pages, which is the domain of HTML. Instead, focuses on the aesthetic,
controlling aspects like making a interactive design for web pages.
 JavaScript (JS) is a versatile programming language that adds interactivity and
dynamics to web pages. It is not just about styling (like CSS) or defining a structure (like
HTML) – JavaScript brings web pages to life. Unlike HTML and CSS, JavaScript is an
Interpreted language, meaning it’s executed directly by the web browser, not pre-compiled into
machine code. This allows for dynamic behavior on web pages.

Bootstrap is a free open-source front-end framework widely used for developing

responsive websites. It provides a collection of pre-designed and customizable components,
styles, and functionalities to simplify and expedite the web development process. Bootstrap
offers a vast library of pre-built components like buttons, forms, navigation bars, modals (pop-up
windows), and more. These components are reusable across different projects, savings
developers time and effort. The clean and well-structured code allows for rapid prototyping and
quicker development cycles.
 Chapter 3

Methodology, Results, and Discussion

Software Design, Products, and/or Processes

This section shows the defined details of the researcher’s capstone project in accordance
with the standards and proper ethics. It’s shown as Hierarchical Input-Process-Output diagram
(HIPO).

Figure 1. HIPO of the Study

Figure 1 shows the structure of the study. It includes the Home Page, where all the
contents from the users are located. The admin can see all list of categories, sub-categories, add
users, and post of the users create, and control the content of the web-app system. The editor is
where to create a blog content and allocate it where categories & sub-categories they belong to
and edit their post before they publish it.
Figure 2. Home Page

The figure 2 show the following that is located on Home Page, and the users can
see the content of the web-app system that researchers create on the home page. The categories
are where the user picks which category they want to choose or to appear on the home page.
Contact is to know the users in what way they could contact us if the user had some suggestions
or problem that encounter inside the system. About us is to know what they need to know about
the system, what we offer on our product, and lastly is what they need to know about us
personally. This is the section that focuses on introducing us, about the system we offer to our
users, and if the users what to know truly about us and goals we want to achieve. Login is filled
with the user wanting to create account and saved in the system. The end users must fill out
email | username and password to login into the system if they want to be editor’s successfully
use the system for editor’s panel.
Figure 3. Category

Figure 3 shows the list of categories that are available inside the system that will help the
end users navigate what type of content they want to show inside the system. List of categories
are the categories that are had the system available and had content that tackles for that certain
category, if the end users click one of the available lists of categories the system will navigate the
content in database that had a category of the end users click in one of the lists of categories.

Figure 4. Contact Us

Figure 4 shows the process of contacting us form by filling out the end users Email
address and message the user fills in the form. The email address should be valid, and message
should only be for a purpose for concerns about the system, problems they encounter in system,
or others related to at least about the content suggestion that they want to know more about.

Figure 5. About Us

Figure 5 provides all the information about web-app systems including the purpose of it
and how it will change and impact blogging websites, also it provides a little information about
the system and what its purpose is. Additionally, it includes the mission and goals that want to
achieve and want to offer for the end users.

Figure 6. Login Page

Figure 6 shows the structure of login page, where it allocates the login page for the user
to direct inside the system and access the editors panel. Registration is where end users create an
account and save it in a system where they will fill out some information that needs to be filled
in. Forget password is the user will input their information to reset the password of their account
they create in system.

Figure 7. Login Page

Figure 7 shows the process for signing in the system for editors’ panels by inputting their
Email address or Username that they created in system and the password they fill out when
they’re registering an account in system.

Figure 8. Registration Page

Figure 8 shows the important data to fill out when creating an account. If end users don’t
have an account, first name and last name should be filled out with their real names. The
username is what appears on the system if they log in system editors panel and show if they
create a content. The end users existing or official email account which they used or a valid
email account in the email address field. This data purpose is if they forget the password they
input in system., the system finds the email address in the database and try to reset their
password. A password must at least be 8 minimum of characters long. Lastly the profile image of
the editors ends users which will show in the editors panel and in content when they make a
published of a content.

Figure 9. Forgot Password

Figure 9 shows the process when the users forgot their passwords, the end user must fill
the email address fields to make a reset password that system find the email address in database
and reset its password from the database and email back to the end users the link for their new
password to access the login page for editor’s panel.

Figure 10. Editors Page

 Figure 10 shows the navigation nav for editors (end users) to create content. The editors
(end users) had limited access to the system as to restrict to what can they only capable of in the
system. Editors page is for end users that register to be able to create content and manage the
content management of the individual end users.

Figure 11. Admin Page

Figure 11 shows the navigation nav of the admin page and views recent post of
the editors also published the new join users who became editors, and monitor the post
and comments of the end users in web-app. This helps to maintain the balance of
content of editors published inside the system and the end users feedback to the
editor’s comments, the admin has the full control over the system to add some new
categories and sub-categories that editors want to create a new content. Admin can
also create a post but also its main rule is to monitor the system and gather some
feedback from the end users and editors to give a new feature to the system. Lastly are
the settings where all the needed necessary for the system control.
System Architecture

Figure 12 System Architecture Educational Blog Web-App: It’s Effectiveness of Online

Reference Materials

The system architecture is designed to present the process of the system. It illustrates the
users the devices that connect to the website. This architecture helps the users, editors, and
administrators to easily access the website and be able to understand how the system works. The
users able to view freely on the system while the users want to be editors must make a procedural
request to sign up in system to be able to access the editors’ panel. The administrator is
responsible for managing the system and monitoring incoming upload of the editors to a new
content they made while the editors make some recommendations to administer to add some
categories and subcategories to add in features for it to be effective to attract more end users to
visit the webpage, lastly the administrator can also disapprove vulgar feedback comments from
the end users post to editors content.

Conceptual Design

Figure 13. Conceptual Design Educational Blog Web-App: It’s Effectiveness of Online
Reference Materials

Firstly, it shows the end users who will use the system and their respective roles. This
part will be critical for the end users cause it’s hard to know who will be using the system and
view the webpage in their expectation and experience on the system. Next section identifies their
roles and responsibilities inside the system, the end users are users who view the content of the
editors published inside the system while the administrator is monitoring the content of the
editors made a published in the system. The administrator can also manipulate the editors’
content if they see it as inappropriate, they can unpublished it to not be able to view by the end
users. Lastly is the finalization of the process of the end user interaction in the system, the end
user writes a feedback/comment to editors’ content, editors make a published a new content that
provide information for the end users, and administrator responsible for the action of the two by
monitoring and spectating the data they received.

Cost Benefits Analysis

The researchers analyzed the cost benefits analysis of the proposed system in detailed
information and divided it into 4 main stages wherein:
Stage 1: Researchers identify all relevant potential costs and benefits that will implement the
software cost.
Stage 2: Researcher will be analyzed and give a monetary value for each.
Stage 3: Researcher will forecast future cost and benefits of proposed system.
Stage 4: Researcher will summarize and decide which will take the best action for the system.

Stage 1.

Building a blog website ranges from zero to thousands of dollars, cause of customization,
functionality, hosting, and the complexity and features of design per pages also rates up more
than to target cost to achieve. Blog website refers to digital medium where writers can upload
their drafted content and promote it among their target audience to increase readership. Blogging
websites can be called a single entity where you add new content at regular intervals to engage
targeted traffic. As of today 2024, the actual cost of making a website according to market value,
starts from a minimum of P50,000.00 up to P100,000.00 ($900 - $1,800), but it is only estimated
that it will only range somewhere between P10,000.00 – P30,000.00. It includes the cost for web
designer/ developer, backend developer, website style, extra website tools, we also must include
the duration of the project cost timeline for building a website, number of pages website, domain
name, web hosting, web maintenance, lastly is the web marketing essential for faster Return on
Investment (ROI).
 Stage 2.

In this stage we now know that the cost for building the website will take large sums of
money to invest, in this part researcher will now analyze the cost and give value for each and
what benefits give to project. Researcher prepared a table for cost and benefits will take on
building the project with an estimated cost.

Cost & Benefits Value

Cost:

Web Hosting P2,500 – P10,000.00/yr.

Website Maintenance P5,000 – P20,000/mo.

Domain Name Registration Fee and Renewal P1,500 – P2,500.00/yr.

Fee

Benefits:

Advertising P5,000 – P8,000 /per-advertisement

Stage 3.

In this stage the researchers will forecast the future cost and benefits of the project. The
table below will show the new detailed cost and benefits analysis of the project and its foresight
in future development.

Table 1 Forecasting Cost Benefit Analysis

Cost & Benefits Value Year 1 Year 1 Year 2 Year 2

(units) (units)
 Cost: P72,500.00 P52,500.00

Web Hosting P10,000.00/yr. 1 P10,000.00 1 P10,000.00

Website P10,000.00 6 P60,000.00 4 P40,000.00

Maintenance

Domain Name P2,500.00/yr. 1 P2,500.00 1 P2,500.00

Registration Fee
and Renewal Fee

Benefits: P60,000.00 P75,000.00

Advertising P5,000.00 12 P60,000.00 15 P75,000.00

Stage 4.

From this section, the researchers will summarize and analyze the cost and benefits of the
projects. At this stage we can now determine if the project will be worth it to continue or not.
The table below will give some details of how to summarize and how the researcher computes
the cost and benefits.

Cost & Benefits Value Year 1 Year 1 Year 2 Year 2

(units) (units)

Cost: P72,500.00 P52,500.00

Web Hosting P10,000.00/yr. 1 P10,000.00 1 P10,000.00

Website P10,000.00 6 P60,000.00 4 P40,000.00

Maintenance

Domain Name P2,500.00/yr. 1 P2,500.00 1 P2,500.00

Registration Fee
and Renewal Fee

Benefits: P60,000.00 P75,000.00

Advertising P5,000.00 12 P60,000.00 15 P75,000.00

Net Benefits Year 1 Net Benefits Year 2

Total: -P12,500.00 Total: P22,500.00

Net Present Value = P10,000.00

The researcher estimates the cost for web hosting per year is P10,000, for the Website
Maintenance is cost of P10,000 per month, for the Domain Name Registration Fee and Renewal
Fee cost of P2,500 per year, while the benefits of advertising can only cost of P5,000 per
advertisement. The computation did researcher make is multiplying the value of cost to number
of units that researcher estimated will cost per year and month, while the benefits is multiplying
it by number of how much will researcher make in per advertising they make in a year.

Summary of cost and benefits

Estimated Cost = (Value * No. of Units), then add all the cost to get the total cost.
Estimated benefits = (Value * No. of Units)
Total estimated cost of year 1 = P72,500.00 Total estimated benefits of year 1 = P60,000.00
Total estimated cost of year 2 = P52,500.00 Total estimated benefits of year 2 = P75,000.00
To get the total net benefits per year.
Net benefits = (total estimated benefits – total estimated cost)
Net benefits year 1 = -P12,500.00 Net benefits year 2 = P22,500.00
Net present value = (net benefits year 2 – net benefits year 1)
Net present value = P10,000.00

After researcher making summarize the total benefits and cost for the project, the result
was totally worth making of time. It’s estimated that there’s a proven return that shows its
successful deployment of the project.

Requirement Analysis

In this chapter, presents the requirements analysis for the proposed system Educational
Blog Web-App: It’s Effectiveness of Online Reference Materials
.
 Category Requirement Description

Stakeholders End users Primary Users: need access to online

resources and search functionality.

Editors (Educators Blogger) Content creators and evaluators: need user-

friendly interface for creating and
publishing blog post, categorizing resources,
and integrating multimedia (images, video
URL).

Admin Administrator: Access to everything in

system, had the highest authority in system
and monitoring user content and interaction.

Goals Promote effective online Create a user-friendly and engaging

resources materials for education Blog Web-app and a responsive
learning and research web-app for any screen size devices.

Scope Core functionalities: user Optional Functionalities: user profile

management, content management, commenting/ discussion
management, search forum.
functionality, categories
management, content access.

Functional User management User registration, user login, profile

Requirements editing(optional)

Content Management Blog post creation (WYSIWYG editor,

multimedia embedding), editing, publishing,
categorization.

Search Functionality Search keyword, topic title, resource type,

post description.

Content Access Browse all post and filter by categories.

(Optional) Engagement Commenting on blog posts, discussion

Features forums

Non-Functional Usability Intuitive and easy to navigate for users with

Requirements varying technical skills

Performance Fast loading pages

 Security Secure login protocols and data encryption
for user data and content.

Responsiveness Function seamlessly on various devices

(laptops, tablets, smartphones)

Data Flow Diagram

In this section the Administrator had access to all modules of the system. The editor had a
minimal access to all modules of the system has it had only role is to create a content. While the
end users had free access to system content and made some optional features to make a comment
to the content.
System Flow

Figure 3.0 Login Page System Flowchart

The login page is where the editor’s (Content Creator) and Administrator login into
system panel and verify which modules will the system load based on the database credentials
they had. They will either be redirected to Editor’s panel or Admin panel; it depends on the
credentials they had in system that which will the load the modules that verify their identity.
Figure 3.1 Registration Page

On the registration page, the user is directed to create an account inside the system, if the
users want to be an editor’s they must fill out the requirement credentials the systems needed to
be one of the editors on the system.
Figure 3.2 Home Page

The section shows the Home page of the web-app, the end users view all the content
made by editors and search for the post they want to know. Also, they can see all categories
which the end users want to appeal to on their home page.
Figure 3.3 Editor Page

The editor’s page is where they create, manage, and edit the content also it had an
optional feature to update their profile.
Figure 3.4 Admin Page

The admin page is where the admin monitors the system and manage every incoming
post that editor made. They can also add some new categories and sub-categories for the end
users to be able to create some new content, also they can update or delete the post if it’s
inappropriate to be posted and viewed by end users. Lastly, they can also check the comment of
the end users about the content the editors create.
Block Diagram
The block diagram

administrator had all access to all modules while the editor had only access to modules of
creating blog and updating its profile.

Development and Testing

The development of the proposed system requires planning, analysis, requirements,

update, and maintenance. To build the system, the researchers used the Hypertext Preprocessor
(PHP) as their main computer language for web-based applications system development.
Additionally, they used another technology for functionality JavaScript for full stack
development. MySQL was also added to its database management system (DBMS). For the
front-end part, researchers use HTML, CSS, and JavaScript. In addition, researchers also add
framework technology for the front-end called Bootstrap for it making the web-app system
responsive to other devices.
Testing is essential when developing a system because there you can see if the system
was functioning properly and running smoothly, also it makes you find the bugs that may occur
when running and testing the system. Not only that, but also find a problem to every module if its
function was working or not, cause sometimes the faulty error occur when calling that module
that runs a lot of functions structure that developer’s assembly in code.

Input and Output Reports and Analysis

Module name: Home Page

Module name: Admin

Module name: Editors

Module name: Login

Module name: Change Password

Module name: Forgot Password

Module name: Adding Category

Module name: Adding Sub-category.

Module name: Adding Post

Module name: Adding User

Module name: Registration

Description of the Prototype

Educational Blog Web-app is a blogging website where they make solidified and
informative content. The educational blog web-app system helps to represent a promising step
towards a comprehensive educational web-app that empowers users to navigate to the vast ocean
of online information with confidence to gain from the online sources materials. The system had
three parts Homepage, admin panel, and editor panel. The system homepage can be accessed by
anyone, they can browse blog posted by editors (end user) or use the search engine to search
resources based on specific needs. It can search by using keyword, topic, or title. Editor panel is
for end users registered as to became editor for system that make content that shares their
experiences, knowledge, or information about a certain topic. They can also manage their own
content by editing it beforehand they publish it. Admin panel is the system administrator where
they control, manage, and monitor the events happening in the system. Also, it had access to all
modules that the developers made. Lastly, administrators can back up every deleted record of
post, categories, sub-categories, and user information.
Implementation Plan

The plan outlines the key phase for developing an educational blog web-app: its
effectiveness of online resources materials shown in the table below.

Strategies Activities Duration

Discovery and Conduct user research to understand 1-2 months
Definitions needs and desire functionality.
Finalized the technical
specifications including
programming languages,
frameworks, and database
architecture.
Designed the user interface (UI)
prototype.
Development Back-end development: Building 3-5 months
core functionalities like user
management, content management,
post management, category
management, and search engine.

Front-end: Implement the user

interface based on the design
prototype, ensuring its
responsiveness to across devices
screen size
Testing and Conduct internal testing to identify 1-2months
Deployment and fix bugs and usability issues.

User acceptance testing (UAT) with

target user group to gather feedback
and refine the web-app.

Deploy the app on the secure web-

hosting platform.
Maintenance and Monitor app performance and user Ongoing
Growth management.

Address bug reports and user

feedback through regular updates
and improvements.

Developed additional features based

on user need and future-plans.

Implement ongoing content

moderations and its security
measures to avoid data breaching.
 Reference

Mhaske, A., Bhattad,A., Khamkar,P., More, R.(2018).Progressive web app for

educationalsystem.5(1).310.https://www.academia.edu/download/55848148/IRJET-V5I166.pdf

Campillo-Ferrer, J.M., Miralles-Martínez, P. & Sánchez-Ibáñez, R. The effectiveness of using

edublogs as an instructional and motivating tool in the context of higher education. Humanit Soc
Sci Commun 8, 175 (2021). https://doi.org/10.1057/s41599-021-00859-x

Marcelo-García C, Yot-Domínguez C, Mayor-Ruiz C.(2015) University teaching with digital

technologies. Comunicar 45:117–124. https://doi.org/10.3916/C45-2015-12

Huang YM, Jeng YL, Huang TC (2009) An educational mobile blogging system for supporting
collaborative learning. J Educ Technol Soc 12(2):163–175.
https://www.jstor.org/stable/jeductechsoci.12.2.163

Kuo Y, Belland BR, Kuo YT (2017) Learning through blogging: students’ perspectives in
collaborative blog-enhanced learning communities. J Educ Technol Soc 20(2):37–50.
https://www.jstor.org/stable/90002162

García-Sabater JJ, Vidal-Carreras PI, Santandreu C, Perello-Marin R (2011) Practical experience

in teaching inventory management with Edublogs. JIEM 4(1):103–
122. https://doi.org/10.3926/jiem.v4n1.p103-122