BotanyInformationSystem CaseStudy Documentation

Republic of the Philippines
NUEVA ECIJA UNIVERSITY OF SCIENCE AND

TECHNOLOGY
Cabanatuan City, Nueva Ecija, Philippines
ISO 9001:2015 CERTIFIED
TALAVERA OFF – CAMPUS
SIMPLE CALCULATOR WITH BASIC FUNCTIONALITIES

AND CUSTOMIZABLE THEME FEATURE
A Case Study
Presented to
the Faculty of the NEUST Municipal Government of Talavera
NUEVA ECIJA UNIVERSITY OF SCIENCE AND TECHNOLOGY
Talavera Nueva Ecija
in Partial Fulfilment
of the Requirements for the Degree in
Bachelor of Science in Information Technology
By:
DOCTOR, JOMAR V.
ELAS, ERICA C.
ELAYDA, JERICKO I.
MARTINEZ, RYAN W.
December 2023
Transforming Communities through Science and Technology www.neust.edu.ph

TECHNOLOGY
Introduction
This Botany Information System offers a comprehensive exploration of various
types of plants through five categories. Each category featuring five unique species.
Detailed information and captivating visuals, fostering a profound understanding of plant
specification including their scientific names. This aims to deepen appreciation and
comprehension of plant biology.
Background
This case study focuses on developing an informative, and user-friendly system
for the College of Biology. It involves designing a structure that can help users learn
about different aspects of plants. As students, we find it difficult to comprehend and
learn things without a logical and visual representation of them. Therefore, our team
immediately seized the opportunity to leverage and deploy our modest skills in
addressing the issue. Developing a botany system specifically for a college of biology
can offer several benefits, providing students with an interactive and multimedia-rich
learning experience, making complex concepts more accessible and engaging.

TECHNOLOGY
Objectives
 Design the botany system to cater to diverse learning styles, accommodating
students with different preferences and strengths in their learning approaches.
 Reduce reliance on traditional textbooks and printed materials, contributing to
sustainability efforts and optimizing resource management within the biology
field.
 Cultivate a habit of lifelong learning by encouraging students to explore the
botany system independently, fostering curiosity and sustained interest in the
field.
Problem Statement
Most systems created mainly focus on deploying information about the student,
such as student portals, student information systems, and campus management
systems. We have observed that we only have a minimal number of proposed systems
intended to contribute knowledge and facilitate learning for students. We find it
challenging to develop an effective learning method, especially when it is solely verbal.
Some students are losing interest in learning through this type of setup.

TECHNOLOGY
Solution Overview
In addressing the identified problem of limited systems focused on facilitating
active learning, we developed an interactive botany information system that goes
beyond traditional content delivery. From it, you can easily learn and explore some
various living organism which exhibit their characteristics, scientific name and different
species from they category. This will provide you to interestingly learn their basic
characteristics. By implementing these solutions, you can create a dynamic and
engaging learning environment that caters to different learning interest in botany and
biology.
Technologies Used
1. Ionic 5.4.16 - A mobile UI toolkit, available as open-source, designed for creating
contemporary and high-quality cross-platform mobile applications.
2. Visual Studio Code - Frequently shortened to VS Code, this is a source code editor
created by Microsoft that is both free and open-source. It is a lightweight yet robust
editor extensively employed by developers for a variety of programming languages and

TECHNOLOGY
development purposes. Visual Studio Code is compatible with Windows, macOS, and
Linux operating systems.
3. Math.js (import) - Math.js is a JavaScript library offering an adaptable and extensive
collection of mathematical functions tailored for executing operations on numbers,
arrays, matrices, and other data types. Crafted for seamless integration with JavaScript,
it is commonly utilized in web applications and Node.js environments.
4. Angular - Angular is a framework for designing applications and a platform for
development, specifically crafted to build efficient and advanced single-page
applications.
5. Node.js - Node.js is a cross-platform, open-source JavaScript runtime environment
that runs JavaScript code independently of a web browser. It utilizes the V8 JavaScript
runtime engine, the same engine found in the Google Chrome browser. With Node.js,
developers can employ JavaScript to create server-side code, facilitating the
construction of scalable and high-performance network applications.

TECHNOLOGY
Architecture
The system is entirely implemented in Ionic and AngularJS. We ensured that the
system functions as it should. The routing of the ion-button is crucial because it delivers
you to another captivating tab of information. Therefore, giving our utmost care to
ensure its proper functioning is the best thing we did.
Ionic provides numerous high-quality components that can be used to develop this
system. Consequently, the functionality of the ion-back-button is our secondary priority,
ensuring it functions well and returns to the homepage. This allows users to interact with
another tab by going back to its page of origin.
For additional function of the system, with the help also of ionic, we conclude that it is
going to be an awesome thing we can do if we add some button inside the ion card in
the Species tab, which when the user interact with it, it will show a prompt or popover
that will display the scientific name of the plant that you chose to view.

TECHNOLOGY
Development Process
Planning and Requirements
The project involves a comprehensive assessment and improvement of the entire
system.
Phase 1: Assessment and Planning (Duration: 1 day)
 Defining project objectives.
 Develop a detailed project plan.
Phase 2: Planning development (Duration: 1 day)
 Implement methodical way of developing the system.
 Employ some helpful resources and integrate this in the process of development.
Phase 3: Testing, Recommendation, Improvement (Duration: Ongoing)
 Incorporate some proper debugging methods for the system potential and
improvement.
 Allows some user to test the system and materialized their recommendations.

TECHNOLOGY
Design and Prototyping
During the design phase, we explored various approaches to examining different
Graphical User Interface (GUI) options, thoroughly reviewing the ideas or everyone. E
ach team member's inspirations significantly influenced the aesthetics and overall
ambiance of the system. We examined the most prevalent visuals commonly found in a
basic botany system. Our first look out from the design is the home page, we set our
very best to make it interestingly attractive to the user, making in one shot of a sight will
immediately get to it.
Logical implementations were also specified in the foundational section of the system.
In here, we focused on the routing of every page. Mainly because it will serve the life of
the system. Another element incorporated into the application was the color or the
theme that we applied. Our team decided to incorporate a neutral shade of green in
depicting the view of the biology, and a minimal touch of light color to blend the contrast
of the two shades.

TECHNOLOGY
Implementation
Concerning the development process, each team member received assigned
responsibilities and specific roles to handle. First thing we challenged about doing is the
routing method, our set of knowledge about this field is quite not enough in order to
perform it well. But with the team’s dedication, we sought help in order for us to deploy it
well functionally. The routing page from tab 1 comes first in the form of link, but with our
dedication to make it more aesthetic we find some resources that will help us in
incorporating it better. During the testing and debugging we run out of patience, a lot of
things needed to change for the improvement. Especially in the proper sizing of the
buttons and card make us surrender. Despite that we managed it eloquently and got the
perfect size and fit for it. Besides the struggles of implementing the button and card
size as mentioned above. Another tough implementation when positioning the image
per category, but again we handled ad resolved it well.
Testing

TECHNOLOGY
The team invited group of users to enable them to test the developed system, providing
candid feedback. The majority of the user’s feedback received was positive, stating the
fruitful outcome of the team’s hard work.
Conclusion
Achievements
The team showcased their unwavering commitment and continuous advancement
during the entire application development journey. As with any collaborative effort, the
fruits of success were reaped during the intricate phases of the process. The
experience was not only enjoyable but also infused with excitement for each member
within the group. We take great pride and satisfaction in the final outcome of our
awesome crafted application
Future Steps
The application is based on the collaborative ideas of the team, as well as some
gathered information about system botany. This means that this system isn’t the best for
long-life usage, because this doesn’t possess the ability to protect and give the best

TECHNOLOGY
security. Therefore, in the coming time if we might get the opportunity again to focus
our time in deploying log in system to implement the security of the user, then it would
definitely of another milestone in to fulfil a great work of success in application
development.
References
Below are all the external sources utilized by the development team. Some
updates or modifications discovered from these sources are greatly appreciated and will
be incorporated to align with future application development.
 Creating Responsive Layouts with Ionic 4 Grid
o https://youtu.be/MiOWapznIzA?si=lcFLmeo9MQRCcqr3
 Card background imgaes in Ionic Framework –
https://youtu.be/rYc9jerhN5Y?si=2VPZ4aIWagfiL6kF
 Ionic Routing and Navigation - https://www.youtube.com/watch?v=mI5N0QfKzqA&t=225s
 Routes/Tabs - https://youtu.be/s-KEF_UHszM?si=zmZZRCwkn0o2oY-L
 Ionic Display Image – https://www.youtube.com/watch?v=7LgBxSlxiMc&t=376s

TECHNOLOGY
 Navigation button click - https://youtu.be/zmGuQ_ocvUM?si=jidlXcq_iZpHOHCD

BotanyInformationSystem CaseStudy Documentation

Uploaded by

Document Information

Original Title

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

BotanyInformationSystem CaseStudy Documentation

Uploaded by

Copyright:

Available Formats

Republic of the Philippines

NUEVA ECIJA UNIVERSITY OF SCIENCE AND

SIMPLE CALCULATOR WITH BASIC FUNCTIONALITIES

Transforming Communities through Science and Technology www.neust.edu.ph

This Botany Information System offers a comprehensive exploration of various

Detailed information and captivating visuals, fostering a profound understanding of plant

comprehension of plant biology.

This case study focuses on developing an informative, and user-friendly system

about different aspects of plants. As students, we find it difficult to comprehend and

learning experience, making complex concepts more accessible and engaging.

Transforming Communities through Science and Technology www.neust.edu.ph

 Design the botany system to cater to diverse learning styles, accommodating

students with different preferences and strengths in their learning approaches.

 Reduce reliance on traditional textbooks and printed materials, contributing to

sustainability efforts and optimizing resource management within the biology

 Cultivate a habit of lifelong learning by encouraging students to explore the

botany system independently, fostering curiosity and sustained interest in the

such as student portals, student information systems, and campus management

intended to contribute knowledge and facilitate learning for students. We find it

challenging to develop an effective learning method, especially when it is solely verbal.

Transforming Communities through Science and Technology www.neust.edu.ph

In addressing the identified problem of limited systems focused on facilitating

active learning, we developed an interactive botany information system that goes

characteristics. By implementing these solutions, you can create a dynamic and

1. Ionic 5.4.16 - A mobile UI toolkit, available as open-source, designed for creating

contemporary and high-quality cross-platform mobile applications.

editor extensively employed by developers for a variety of programming languages and

Transforming Communities through Science and Technology www.neust.edu.ph

Linux operating systems.

3. Math.js (import) - Math.js is a JavaScript library offering an adaptable and extensive

collection of mathematical functions tailored for executing operations on numbers,

it is commonly utilized in web applications and Node.js environments.

4. Angular - Angular is a framework for designing applications and a platform for

development, specifically crafted to build efficient and advanced single-page

5. Node.js - Node.js is a cross-platform, open-source JavaScript runtime environment

developers can employ JavaScript to create server-side code, facilitating the

construction of scalable and high-performance network applications.

Transforming Communities through Science and Technology www.neust.edu.ph

ensure its proper functioning is the best thing we did.

system. Consequently, the functionality of the ion-back-button is our secondary priority,

another tab by going back to its page of origin.

Transforming Communities through Science and Technology www.neust.edu.ph

Planning and Requirements

The project involves a comprehensive assessment and improvement of the entire

Phase 1: Assessment and Planning (Duration: 1 day)

 Defining project objectives.

 Develop a detailed project plan.

Phase 2: Planning development (Duration: 1 day)

 Implement methodical way of developing the system.

Phase 3: Testing, Recommendation, Improvement (Duration: Ongoing)

Transforming Communities through Science and Technology www.neust.edu.ph

Design and Prototyping

During the design phase, we explored various approaches to examining different

immediately get to it.

of the two shades.

Transforming Communities through Science and Technology www.neust.edu.ph

Concerning the development process, each team member received assigned

per category, but again we handled ad resolved it well.

Transforming Communities through Science and Technology www.neust.edu.ph

fruitful outcome of the team’s hard work.

The team showcased their unwavering commitment and continuous advancement

awesome crafted application

Transforming Communities through Science and Technology www.neust.edu.ph