Gordon College

College of Computer Studies

Olongapo City Sports Complex, East Tapinac, Olongapo City
PHILIPPINES 2200 tel. No. (047)774-6929

____________________________________________________________________________________________

College of Computer Studies

Gordon College

AN ASSISTIVE HEALTH & FITNESS APPLICATION USING ENHANCED

ABC ALGORITHM

Application Development Project Presented By:

Daryl Tadeo

Paolo Miranda

Mark Jerico Fabro

In partial fulfillment of the requirements for the ITC221

Submitted to:

Ms. Armilyn T. Martinez

Application Development Instructor
 EXECUTIVE SUMMARY

Many people like students, workers or even people at home are looking

for a way to diet. Although many people tend to diet in their own way without

thinking twice what will be the result of it. Despite having many kinds or way of

dieting most of them are just doing they’re diet routines on their own, without

considering the fact that they’re doing diet routines that affecting their own

health. Although they just want the result to lessen fats and become more fit.

With the help of the survey and interviews the researchers found out that the

random ways of dieting can become a big problem for one’s health. The results

say’s that there is an existing difficulty for a person when dieting. Also they are

experiencing problems such as: how they diet without going to gym and working

out. Also what food would they eat if they want to have a healthy diet. As the

application development title suggest, this assistive health & fitness application

using enhanced abc algorithm is all about developing web and mobile

application for the proponents and provide smart way to diet. This application

aims to provide the proponents smart diet strategies or plans that is built with

food sets and home workouts that enables them to workout at home. Another

is build an environment for the application administrator that makes it easy for

them to supply users more plans to choose from.

 TABLE OF CONTENTS

Title Page

Executive Summary

List of Figures, List of Tables, List of Notation

Chapter 1 – Introduction 1

1.1 Project Context 2

1.2 Purpose and Description 2

1.3 Objective 2

Scope and Limitation 3

Chapter 2 – Review of Related Literature 3

Chapter 3 – Technical Background 15

Chapter 4 – Methodology, Results and Discussions 21

4.1 Requirements Analysis 21

4.2 Requirements Documentation 24

4.3 Design of Software, Systems, Products/Process 30

4.4 Development and Testing 59

4.5 Description of Prototype 61

4.6 Implementation Plan 61

4.7 Implementation Result 62

Chapter 5 – References/Bibliography 62
 APPENDICES

1. Relevant Source Code

2. Evaluation Tool or Test Document

2.1 Sample Interview/Questionnaires with responses

2.2 Final Defense Evaluation Form

2.3 Validation Tool

2.4 Business Model Canvas

3. Sample Input/Output Reports

4. User Guide

5. Process/Data/Information Flow

6. Screen Layouts/ Test Results/ Sample Generated Output

7. Pictures showcasing the data gathering and investigation

8. Curriculum Vitae
 LIST OF FIGURES, LIST OF TABLES, LIST OF NOTATIONS

Figure 1: How Rest API works (Page No. 11)

Table 1: Hardware Requirements Table (Page No. 14)
Table 2: Software Requirements Table (Page No. 14)
Figure 2: Conceptual Model of the Study (Page No. 16)
Figure 3: System Architecture (Page No. 17)
Figure 4: Entity Relationship Diagram (Page No. 17)
Figure 5: Flowchart (Page No. 18)
Figure 6: Gantt Chart (Page No. 19)
Figure 7: Data Flow Diagram Level 1 (Page No. 20)
Figure 8: All Tables Overview (Page No. 54)
Figure 9: User/Admin Accounts Table Structure (Page No. 54)
Figure 10: Plans Table Structure (Page No. 55)
Figure 11: History Table Structure (Page No. 55)
Figure 12: Foods Table Structure (Page No. 56)
Figure 13: Exercise Table Structure (Page No. 56)
 CHAPTER I
INTRODUCTION

Considering that in today’s situation numerous of dietary or health

problems are existing. In form of not proper diet, not proper workout and many

more problems related to this like lack of financial capability and lack of

knowledge on how to diet properly. That is why many people is tend to become

unhealthy in a way that some looks thin but healthy and some looks overweight

yet they’re still healthy looks strange isn’t it? Also there are some that is

overweight but feels light and healthy on their own and there are also some that

is underweight but feels perfectly fine and strong as well. So why this scenarios

happening? In the first glance nutrition is about the foods we eat that nourishes

our body and it helps us become strong and grow. But many of us tends to have

unbalanced nutrition that’s why the above scenarios are happening.

Workout and nutrition is the best partner in making our health good and

fortify our bodies. It promotes the balanced and relativity of our body and our

health condition. We also sought that this is very effective way to become fit

and healthy. In today’s generation that has many more process foods and fast

foods that is basically delicious yet not recommended if we talk about healthy

foods, So we need to find a way to have an Idea what food to eat and what will

be the ideal foods for our health status. In that way we can become healthy plus

doing the workouts will make it more fun and produce greater results in our

body shape. Lastly one must have the hard work and strong will within

ourselves to become a healthy person and it all starts with our self-discipline

and anything that we do afterwards will succeed.

1
1.1 PROJECT CONTEXT

Some people doesn’t know how to diet properly this leads to

unhealthy way of diet. Also there are some that is becoming fit using their diet

methods but becomes fir unnaturally that affects his/her own health too. There

are also some that wants to be fit that wants to go to the gym to workout but

didn’t have the financial capacity to take the gyms program. Others are just not

eating at night and sometimes just nothing eat at all that is a bad habit of dieting.

So the researchers came up to the solution to build an application that will assist

them with their diet goals. Thru the help suggested plans that they can take that

is made personally for them. This will give users ideas and foods they can eat

to support their diet routine and make it a healthy one. Also with the help of

home workout sets that didn’t need any equipment and they can do anytime at

home to replace the idea of taking gyms.

1.2 PURPOSE AND DESCRIPTION

The purpose of the study is to give assistance to people that is searching

for a good way to take a diet. In a way that they can avoid unhealthy diet

routines that might get them sick and weak internally. The researchers seek to

create an application that will give them personal dietary plans for them base

on their health status calculated through their age and Body Mass index that

can assist them for a healthy diet routine.

2
1.3 OBJECTIVE

The objective of this application is to give a healthy way of diet routines

for the users and also to replace the idea of self-taught dieting and unguided

dieting that is basically unhealthy for peoples.

1.4 SCOPE AND LIMITATION

The proposed web and mobile application for now will focus on the

features that will lead someone to a healthy way of dieting using our application

in which this have they’re health checker (BMI Calculator), Diet strategies,

Personal planner and they can also see their history in which they can know if

they’re losing or gaining more weight.

CHAPTER II

RELATED LITERATURE

The following related studies are taken into account by the researcher to be

better equipped in implementing the system. These studies helped overall in

identifying the advantages, challenges, and the improvements needed to be

done for such implementation

3
Healthy Out

Americans tend to eat out a lot, and at restaurants and take-out joints people

often give themselves a “hall pass” from healthy eating. This can result in a

reversal of hard fought gains from good eating habits.

But eating out doesn’t have to be a guilty pleasure. Many restaurants offer

healthy options that align with even the strictest eating plans. HealthyOut helps

you find them. It provides access to menus of local restaurants, and matches

items on their menu to your dietary needs and preferences.

Calorie Counter & Food Diary

Calorie Counter & Food Diary by MyNetDiary is one of several popular food

diary apps. To get the most out of the tool, enter your nutritional goals or weight

loss goals, and use features within the app to plan your meals and monitor your

adherence. Useful features include the ability to scan supermarket barcodes to

get nutritional information that helps you make smart choices while grocery

shopping, and the tracking of macronutrients such as carbohydrates, protein,

and fat. In fact, you can track your intake of 45 separate nutrients.

What makes this app stand apart is an elegant user interface that makes

entering your food intake fast and easy. This is important because people are

bound to abandon a food diary app when it becomes too troublesome to use.

This app also lets you track your fitness regimen, and is compatible with fitness

trackers like FitBit.

4
Food Intolerances

Food Intolerances is focused on aiding people with allergies and food

insensitivities. It’s targeted at people with conditions such as histamine

intolerance, mastocytosis, fructose malabsorption, sorbitol intolerance, gluten

sensitivity, and lactose intolerance. The app contains a database of hundreds

of foods, and will tell you whether a particular food is compatible with your

allergies or food sensitivities.

One of the app’s faults is that it doesn’t contain databases of particular

products, but rather broad categories of foods. For instance, it doesn’t

distinguish between Kraft’s macaroni and cheese and Annie’s brand macaroni

and cheese. We also noticed that the iOS version of the app is more feature

rich than the Android version.

Nutrients

Another popular nutrients database and diet tracker is Nutrients. Nutrients

contains the nutritional info for a wide range of foods and a food journal which

makes tracking your food intake simple. One favorite feature is the ability to

enter your recipes, and get an instant nutritional breakdown.

One deficiency as of this writing is lack of availability on Android. Some

reviewers have also complained that the nutritional browser lacks some foods,

although we didn’t encounter any notable absences in our testing.

5
Carbs Control

As its name suggest, Carbs Control is designed to help you monitor your

carbohydrates, and may be a good choice for diabetics or those on low-carb

diets. You can track daily carb intake, as well as look at a meal-by-meal

breakdown. As you look up the carbs totals of the food you eat, a food diary is

created automatically.

CHAPTER III

Technical Background

In this chapter, the researchers will list down all different technologies

and framework used all throughout the development of this system and some

definitions that will help non-IT readers to understand its meaning.

The tools used in this system development are:

Integrated Development Environment

An integrated development environment (IDE) is a software application

that provides comprehensive facilities to computer programmers for software

development. An IDE normally consists of at least a source code editor, build

automation tools and a debugger.

6
Visual Studio Code

Visual Studio Code is a source code editor that can be used with a

variety of programming languages, including Java, JavaScript, Go, Node.js and

C++. Instead of a project system it allows users to open one or more directories,

which can then be saved in workspaces for future reuse. It’s our main source-

code editor for our Mobile Application.

Sublime Text

Sublime Text is a shareware cross-platform source code editor with a

Python application programming interface (API). It natively supports many

programming languages and markup languages, and functions can be added

by users with plugins, typically community-built and maintained under free-

software licenses. It’s our main source-code editor for our Web Application.

C. Ionic Framework

Ionic Framework is an open source UI toolkit for building performant,

high-quality mobile and desktop apps using web technologies — HTML, CSS,

and JavaScript — with integrations for popular frameworks like Angular and

React. ... Learn to easily customize and modify your Ionic app's visual design

to fit your brand. Ionic helps us make the structure and layout of our mobile

application.

7
D. Programming Languages

A programming language is a type of written language that tells

computers what to do in order to work. Programming languages are used to

make all the computer programs and computer software. ... Usually, the

programming language uses real words for some of the commands, so that the

language is easier for a human to read. Listed below are the programming

languages used in the development of the application.

HTML5

HTML5 is the latest version of Hypertext Markup Language, the code

that describes web pages. It's actually three kinds of code: HTML, which

provides the structure; Cascading Style Sheets (CSS), which take care of

presentation; and JavaScript, which makes things happen. It is used to layout

the overall page and show things on the part of the page that you wanted it to

show.

Cascading Style Sheets (CSS)

CSS is the language for describing the presentation of Web pages,

including colors, layout, and fonts. It allows one to adapt the presentation to

different types of devices, such as large screens, small screens, or printers. CSS

is independent of HTML and can be used with any XML-based markup

language. It is used to make the Frontend for the users and have a great UI/UX.

8
JavaScript

JavaScript is a programming language commonly used in web

development. It was originally developed by Netscape as a means to add

dynamic and interactive elements to websites. ... Like server-side scripting

languages, such as PHP and ASP, JavaScript code can be inserted anywhere

within the HTML of a webpage. It is used to make functions and hard complex

programs to make the web application functional and let user do what they want

with ease.

jQuery

jQuery is a JavaScript library that allows web developers to add extra

functionality to their websites. It is open source and provided for free under the

MIT license. ... jQuery can also work with Ajax code and scripting languages,

such as PHP and ASP to access data from a database. It is used to make

JavaScript code simple to write and read.

AJAX

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new

technique for creating better, faster, and more interactive web applications with

the help of XML, HTML, CSS, and Java Script. A user can continue to use the

application while the client program requests information from the server in the

background. It is used to make the Web page dynamic.

9
JSON

JSON (JavaScript Object Notation) is a lightweight format for storing and

transporting data and often used when data is sent from a server to a web page

that is "self-describing" and easy to understand. This is used by the proponent

to make the fetched data from the back end easy to read.

PHP

PHP Hypertext Preprocessor (or simply PHP), used by the proponent to

create the APIs connecting to the MySQL database is a server side scripting

language that is used to develop Static websites or Dynamic websites or Web

applications. PHP stands for Hypertext Preprocessor, that earlier stood for

Personal Home Pages. PHP scripts can only be interpreted on a server that

has PHP installed.

Angular

AngularJS is a JavaScript-based open-source front-end web framework

mainly maintained by Google and by a community of individuals and

corporations to address many of the challenges encountered in developing

single-page applications. It is the base of Ionic framework used by the

proponent in developing the mobile application.

10
Typescript

Typescript simplifies JavaScript code, making it easier to read and

debug. Typescript is open source. Typescript provides highly productive

development tools for JavaScript IDEs and practices, like static checking.

Typescript makes code easier to read and understand. It is the JavaScript of

the Ionic framework where the functions and methods is made.

Application Programming Interface (API)

API stands for Application Programming Interface. An API is a software

intermediary that allows two applications to talk to each other. In other words,

an API is the messenger that delivers your request to the provider that you're

requesting it from and then delivers the response back to you

Figure 1: How Rest API works

11
B. LOCAL NETWORK AND DATABASE MANAGEMENT

XAMPP

XAMPP is an open source software developed by Apache friends. The

use of XAMPP is to test the clients or your website before uploading it to the

remote web server. This XAMPP server software gives you the suitable

environment for testing MYSQL, PHP, Apache and Perl projects on the local

computer.

CHAPTER IV

METHODOLOGY, RESULTS, AND DISCUSSION

In this chapter, different requirements and processes that are needed to

implement the system in the form of web and mobile application will be

discussed. This includes diagrams, designs, and tables that are intended to aid

in the organization of the said system.

4.1 Requirement Analysis

This section discusses the needed requirements to run the developed

system seamlessly wherein it is covered by three main branches: knowledge,

hardware, and software requirements.

12
Knowledge Requirements

The system is accessible by the following means:

First the web application was developed to run on desktops computers or

laptops browsers which can also be accessed by any mobile devices with

browser support. It is designed responsive and able to adjust varying with the

screen size of the device used. Although it is not yet a hosted application so

the user as of now can have a user manual to how install and use the

application using mobile or computers.

Accessing the system both in web and mobile application requires a little

patience in installing the required pre requisites listed in manual. The

application also has tutorial screenshots for new users so that they will be

informed on how to operate the said application. Overall, users don’t need any

special requirements unless specified so by the software and hardware

requirements below.

A. Hardware Requirements

Computer

A computer is a machine or device that performs processes,

calculations and operations based on instructions provided by a software or

hardware program. It is designed to execute applications and provides a variety

of solutions by combining integrated hardware and software components. This

is also our main device used in building the application

13
Smartphone

A smartphone is a mobile phone that can do more than other phones.

They work as a computer but are mobile devices small enough to fit in a user's

hand. Uses include: Sending and receiving emails, text, photographs and

multimedia messages. This will be used for testing the mobile version of our

application.

MOBILE ANDROID

ITEM DESCRIPTION/FUNCTION

Processor 1.2GHz Quad Core

RAM Minimum of 1GB

COMPUTERS

Processor Quad Core Intel Celeron or higher recommended

2 GB RAM or more recommend for database or combined

RAM
web/database server

Monitor Monitor with minimum resolution of 1024x728.

The Keyboard is the piece of computer hardware used to input

Keyboard text, characters, and other commands into a computer or

similar device.

A Computer mouse is a hand-held pointing device that detects

two-dimensional motion relative to surface. This motion is

Mouse
typically translated into the motion of a pointer on a display,

which allows a smooth control of the graphical user interface.

Table 1: Hardware Requirements Table

B. Software Requirements

14
 NAME SPECIFICATIONS

Operating System Windows 7 or higher

Android Version Android Version 6.0 or higher

Web Browser Google Chrome, Mozilla Firefox, etc.

Table 2: Software Requirements Table

4.2 Requirements Documentation

Conceptual Model

A conceptual model is a representation of a system, made of the

composition of concepts which are used to help people know, understand, or

simulate a subject the model represents.

15
 INPUT PROCESS OUTPUT

Knowledge Meeting and Planning

Requirements - To brainstorm
1. Knowledge in ideas and
workouts and determine the
foods. goals of the
2. Knowledge in application.
Developing -
Web and Mobile Designing
application. - UI/UX building,
3. Knowledge in designs and
Database functionalities
Management
are apparently
System
achieved
4. Knowledge in UI
Design
Software Development
Development - Building the
1. Android 6.0 application STRICTFOODS:
(Marshmallow) - Demonstrate
- Improve AN ASSISTIVE
or above for
smartphones HEALTH &
2. Windows 7 Testing FITNESS
Operating - Focused on the
System or Higher debugging and APPLICATION
3. Google Chrome or effectiveness USING
Mozilla and discovery ENHANCED ABC
Firefox Browser
Program Implementation ALGORITHM
Specifications - The project plan
1. Ionic is put into
2. HTML 5 motion and
3. JavaScript performed
4. CSS
5. JSON
6. API
7. MySQL
8. jQuery
9. AJAX
10. Angular
Hardware
Requirements
1. Android
Smartphones
2. Computer

Figure 2: Conceptual Model of the Study

16
System Architecture

A system architecture or systems architecture is the conceptual model

that defines the structure, behavior, and more views of a system.

Smartphones

Database

Computers

Figure 3: System Architecture

Entity-Relationship Diagram

An entity relationship model, also called an entity-relationship (ER)

diagram, is a graphical representation of entities and their relationships to each

other, typically used in computing in regard to the organization of data within

databases or information systems.

Figure 4: Entity Relationship Diagram

17
Flowchart

is a formalized graphic representation of a logic sequence, work or

manufacturing process, organization chart, or similar formalized structure. The

purpose of a flow chart is to provide people with a common language or

reference point when dealing with a project or process.

Figure 5: Flowchart

18
Gantt Chart

This shows the schedule of activities done by our team to create Strict

Foods. We planned with our adviser the things we must need to do first last

January in this year 2020, Afterwards we start to research and learn about the

things we must know in creating this system. Then it was presented in date

given by the class adviser thru a 10minute pitch, From March to April we started

developing the application and give a 7minute presentation pitch about it

through a video. While still in April we also started to debug and test the

application while still improving and developing it. We also started the

documentation for the final requirements to lessen the work load later on. At

last it’s May and the application are all settled and implemented.

Figure 6: Gantt Chart

19
Data Flow Diagram

To describe a much more detailed flow of data between modules of the

system and how it is processed, the proponents also created a Data Flow

Diagram. Data flow diagrams are much more complex representations of data

transfers and it shows more of the “process aspects”.

Figure 7: Data Flow Diagram Level 1

4.3 Design of Software, Systems, Product, and/or Processes

In this section, the user interface of the mobile and web application will be

displayed with descriptions on how they work.

20
 MOBILE APPLICATION INTERFACE

Screen No.1 Screen No.2

Screen Name: Splash Screen Screen Name: Splash Screen

Narrative Overview: This is the Narrative Overview: This is the

Splash Screen where this is the first Splash Screen 2 when they slide

one the user can see when they and when they clicked Get Started

open the app. they will be redirected in Login

Page

21
 Screen No.3

Screen Name: Login Page

Narrative Overview: This page is

where the user can log in to make

use of the application’s provided

services or proceed to the

registration page to make an

account.

32
 Screen No.4

Screen Name: Register Page

Narrative Overview: New users of

the application can create an

account through this page.

Screen No.5

Screen Name: User Dashboard

Narrative Overview: Users can

see their quick summary and take a

health check here.

33
 Screen No.6

Screen Name: Plans page

Narrative Overview: Users can see

the suggested plans for him/her and

use it also if premium account he can

see his personal plan here

34
 Screen No.7

Screen Name: Create Plan Page

Narrative Overview: Premium Users

can create their own personal plan

here by picking thru the workouts and

food sets from the database

35
 Screen No.8

Screen Name: Profile Page

Narrative Overview: Users can

browse their whole information here

and manage their account and also

logout.

36
 Screen No.9

Screen Name: Edit Profile Page

/Modal

Narrative Overview: Users can

change their email and contact even

address if there are future changes to

their current information like this.

Screen No.10

Screen Name: Change Password

Page/ Modal

Narrative Overview: Users can

change their current password to a

new one here.

37
 Screen No.11

Screen Name: History Page

Narrative Overview: Users can see

their recent weight and height here

also to see if there’s improvement with

them.

WEB APPLICATION INTERFACE

38
39
 Screen No. 1

Screen Name: Home Page

Narrative Overview: This is the

main screen in web application

where the users can see the

overview of Strict Foods.

40
 Screen No. 2

Screen Name: Register Page

Narrative Overview: New users of

the application can create an

account through this page.

41
 Screen No.3

Screen Name: Login Page

Narrative Overview: This page is

where the user can log in to make use

of the application’s provided services

or proceed to the registration page to

make an account.

42
 Screen No.4

Screen Name: User Dashboard

Narrative Overview: Users can see

their quick summary and take a health

check here.

43
 Screen No.5

Screen Name: Plans page

Narrative Overview: Users can see

the suggested plans for him/her and

use it also if premium account he can

see his peronsal plan here

Screen No.6

Screen Name: History Page

Narrative Overview: Users can see

their recent weight and height here

also to see if there’s improvement with

them.

44
 Screen No.7

Screen Name: Profile Page

Narrative Overview: Users can

browse their whole information here

and manage their account and also

logout.

45
 Screen No.8

Screen Name: Change Password

Page/ Modal

Narrative Overview: Users can

change their current password to a

new one here.

46
 Screen No.9

Screen Name: Edit Profile Page

/Modal

Narrative Overview: Users can

change their email and contact even

address if there are future changes to

their current information like this.

47
 Screen No.10

Screen Name: Create Plan Page

Narrative Overview: Premium Users

can create their own personal plan

here by picking thru the workouts and

food sets from the database

Screen No.11

Screen Name: PayPal Payment

Narrative Overview: Users can use

this payment method to become

Premium Users.

48
Web Application Admin Interface

49
 Screen No.1

Screen Name: Admin Dashboard

Narrative Overview: In this page it

shows the quick summary of what

application has and generate report for

printing and hardcopy use.

50
 Screen No.2

Screen Name: Admin Manage User

Page

Narrative Overview: In this page it

shows the list of the users in form that

its divided base on subscription type.

51
 Screen No.3

Screen Name: Admin Manage Foods

Page

Narrative Overview: In this page it

shows the list of food sets and to add

food sets or delete one’s

Screen No.4

Screen Name: Admin Manage

Exercise Page

Narrative Overview: In this page it

shows the list workouts and

administrator can add or delete

workouts.

52
 Screen No.5

Screen Name: Admin Create Plan

Narrative Overview: In this page it

allows admin to create plans for the

users.

53
List of Tables Used in Database

Figure 8. All Tables Overview

Figure 9. User/Admin Accounts Table Structure

54
 Figure 10. Plans Table Structure

Figure 11. History able Structure

55
 Figure 12. Foods Table Structure

Figure 13. Exercise Table Structure

56
DATABASE NAME: strictfoods

USERINFO TABLE

Field Name Description Data Type Data Size

ui_id(PK) User ID INT 10

ui_uname User Username VARCHAR 15
ui_pword User Password TEXT --
ui_fname User Firstname VARCHAR 25
ui_lname User Lastname VARCHAR 25
ui_mname User Middlename VARCHAR 25
ui_extname User Name VARCHAR 5
Extension

ui_sex User Sex VARCHAR 8

ui_bday User Birthday VARCHAR 25
ui_height User Height INT 10
ui_weight User Weight DOUBLE --
ui_address User Address VARCHAR 50
ui_email User Email VARCHAR 30
ui_contact User Contact VARCHAR 13
Number

ui_sub User Subscription INT 2

Type

ui_plan(FK) User Plan INT 10

ui_token User Token VARCHAR 25
ui_datereg User Date DATETIME CURRENT
Registered TIMESTAMP
ui_datesub User Date DATE --
Subscribed

57
PLAN TABLE

Field Name Description Data Type Data Size

pl_id(PK) Plan ID INT 10

pl_name Plan Name VARCHAR 20
pl_exa Exercise A VARCHAR 20
pl_cnta Exercise A Count INT 10
pl_exb Exercise B VARCHAR 20
pl_cntb Exercise B Count INT 10
pl_exc Exercise C VARCHAR 20
pl_cntc Exercise Count C INT 10
pl_bf Breakfast Set TEXT --
pl_lnch Lunch Set TEXT --
pl_dnr Dinner Set TEXT --
pl_minage Minimum Age for INT 3
the Plan
pl_maxage Maximium Age INT 3
for the Plan
pl_minbmi Minimum BMI for DOUBLE --
the Plan
pl_maxbmi Maximum BMI for DOUBLE --
the Plan
pl_creator(FK) Plan Creator VARCHAR 20

FOOD TABLE

Field Name Description Data Type Data Size

fd_id(PK) Food ID INT 10

fd_name Food Name TEXT --

58
 fd_type Food Type VARCHAR 25

EXERCISE TABLE

Field Name Description Data Type Data Size

ex_id(PK) Exercise ID INT 10

ex_name Exercise Name VARCHAR 50
ex_type Exercise Type VARCHAR 20
ex_difficulty Exercise Difficulty VARCHAR 10

HISTORY TABLE

Field Name Description Data Type Data Size

h_id(PK) History ID INT 10

h_uiid(FK) User History ID INT 10
h_weight User Weight DOUBLE --
History
h_height User Height INT 10
History
h_date History Date TIMESTAMP --
Taken

59
4.4 Development and Testing

In this section, the software development process will be discussed.

The proponents follow the sequence given by the standard software

development cycle.

Meet

The meeting phase is where all of us team members is gathering in a

specific place and time brainstorming sharing ideas on how we’re going to make

the application.

Plan

The planning phase is when the project plans are documented, the

project deliverables and requirements are defined, and the project schedule is

created. It involves creating a set of plans to help guide your team through the

implementation and closure phases of the project.

60
Design

In the design phase the architecture is established. This phase starts

with the requirement document delivered by the requirement phase and maps

the requirements into an architecture. The architecture defines the

components, their interfaces and behaviors. The deliverable design document

is the architecture. The design document describes a plan to implement the

requirements.

Develop

In the developing phase is where we make the functionality and

backend features in our application where we focused in specific tasked each

and collaborate to make it work as one.

Test

The Testing phase does not guarantee a 100% working, and stable

system. This is where you focus your investigation and discovery. During

the testing phase, developers find out whether their code and programming

work according to customer requirements. And while it's not possible to solve

all the failures you might find during the testing phase, it is possible to use the

results from this phase to reduce the number of errors within the software

program.

61
Evaluate and Implementation

In this phase is when we completed the application and evaluates it it’s

good or not, also if we meet the goal of the application or not this is where the

application will be truly tested and evaluated.

4.5 Description of Prototype

Before implementation, the developers designed a prototype with which any

revisions and changes shall be put into. The prototype includes the initial

designs that the proponents deemed necessary at first before being revised

into a more generally accepted design that reflects an e-commerce theme for

both in web and mobile application. The prototype was also subjected to

changes in logical processes in the back-end category to improve and meet its

revisions goals.

4.6 Implementation Plan

After the approval of all the revisions, implementation phase will be the next

step. The developer aims to implement the application manually in the reason

that we don’t have the web hosting provider yet we aim to implement it manually

where we let other people explore and use it and see what it can do for them.

62
4.7 Implementation Results

With all the studies being considered, the proponent therefore concludes

that STRICTFOODS: an assistive health & fitness application using enhanced

ABC algorithm will help users with their diet routines and strategies. Also for the

target users of the application which are the students, workers or people at

home will be having more ideas about how can they diet healthily.

The developer would like to add the following features to the application

if given the time and resources:

 Improvements to the user interface of the application and expand the

database data for plans

 Increase number of workout sets for more challenging and effective

results

63
 CHAPTER V

REFERENCES/BIBLIOGRAPHY

https://www.webmd.com/diet/default.htm

https://mymemory.translated.net/en/Tagalog/English

https://www.thesaurus.com/browse/healthy

https://en.wikipedia.org/wiki/Diet_(nutrition)

http://www.nutritionaustralia.org/sites/default/files/Diet%20and%20nutrit

ion%20chapter%20from%20Apprentices%20-

%20young%20people%20in%20transition.pdf

https://exerciseright.com.au/exercise-on-a-budget/

https://business.inquirer.net/223197/filipinos-lack-exercise

https://med.stanford.edu/news/all-news/2013/04/change-diet-exercise-

habits-at-same-time-for-best-results-study-says.html

https://www.healthline.com/health/5-benefits-healthy-habits

https://en.wikipedia.org/wiki/Integrated_development_environment

https://simple.wikipedia.org/wiki/Smartphone

https://www.techopedia.com/definition/4607/computer

https://en.wikipedia.org/wiki/Visual_Studio_Code

https://en.wikipedia.org/wiki/Sublime_Text

https://ionicframework.com/docs

https://simple.wikipedia.org/wiki/Programming_language

https://www.techradar.com/uk/news/internet/web/html5-what-is-it-

1047393

https://www.w3.org/standards/webdesign/htmlcss

64
https://techterms.com/definition/javascript

https://techterms.com/definition/jquery

https://www.tutorialspoint.com/ajax/what_is_ajax.htm

https://developers.squarespace.com/what-is-json

https://www.guru99.com/what-is-php-first-php-program.html

https://docs.angularjs.org/guide/introduction

https://www.tutorialspoint.com/typescript/typescript_overview.htm

https://blogs.mulesoft.com/biz/tech-ramblings-biz/what-are-apis-how-do-

apis-work

https://www.tutorialspoint.com/sdlc/sdlc_agile_model.htm

https://www.google.com/url?sa=i&url=https%3A%2F%2Fproject-

management.com%2F10-key-principles-of-agile-software-

development%2F&psig=AOvVaw0Y6mYFWSNWrSU_rWfm5Zhj&ust=158

7302698533000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOCd7M

KQ8ugCFQAAAAAdAAAAABAD

https://en.wikipedia.org/wiki/Android_version_history

https://en.wikipedia.org/wiki/Data-flow_diagram

https://www.webopedia.com/TERM/E/entity_relationship_diagram.html

65
 APPENDICES

SOURCE CODE – Given in other document.

EVALUATION TOOLS/ TEST

DOCUMENTS

NAME: Marc Roger Sevilla (Body builder)

1. Do you have problems or difficulties in dieting?

- I think yes, kasi kahit nag woworkout ako minsan di ko nasusupplyan

ng tamang nutrisyon sa pagkain.

2. Do you eat normally and on time?

- No, Madalas dahil sa may pasok sa school etc. nakakaligtaan na.

3. Are you doing some exercise? When is the last time you did it?

- Yes, Kagabi lang.

 4. Are you aware of your health status if your ( ex. obese,

overweight, underweight and normal )

- No, pero tingin ko normal naman.

5. If we are going to make an app that will monitor your health and

fitness would you use it? Why?

- Yes, kasi kung makakatulong sya saken why not.

NAME: Eizza Jel Clavo (Student)

1. Do you have problems or difficulties in dieting?

- Yes, I can't refrain myself from eating too much sweets.

2. Do you eat normally and on time?

- No, I am not able to to eat on time because I always wake up late

3. Are you doing some exercise? When is the last time you did it?

- No, I am too busy to exercise.

4. Are you aware of your health status if your ( ex. obese,

overweight, underweight and normal )

- Yes, I am normal.

5. If we are going to make an app that will monitor your health and

fitness would you use it? Why?

 - Yes, if it could improve my health, why not.

NAME: Lian Dale Elefane (Worker)

1. Do you have problems or difficulties in dieting?

- I guess not? Because im already in a normal weight.

2. Do you eat normally and on time?

- No, i eat whenever i want and more than 3 meals a day.

3. Are you doing some exercise? When is the last time you did it?

- Every morning after eating breakfast.

4. Are you aware of your health status if your ( ex. obese,

overweight, underweight and normal )

- Yes, the last time I checked my weight i was underweight but now I

think I gain.

5. If we are going to make an app that will monitor your health and

fitness would you use it? Why?

- Absolutely yes. Because it’ll monitor my health and fitness. I would love

to see my improvements if there’s any.

NAME: Jeremy Serrano (Student Athlete – Volleyball Player)

1. Do you have problems or difficulties in dieting?

 - No, not at all

2. Do you eat normally and on time?

- Yes, I eat normally and on time, but there is some days I don't eat on

time because I need to do some stuffs that will get me busy.

3. Are you doing some exercise? When is the last time you did it?

- I think yes because doing a cleanup in your own house is considered

as an exercises for a person.

4. Are you aware of your health status if your ( ex. obese,

overweight, underweight and normal )

- I'm not aware of that because I don't know how to calculate it.

5. If we are going to make an app that will monitor your health and

fitness would you use it? Why?

- Definitely yes, that would be a great help to the people and also to an

organizations or establishments if the app is seriously amazing to use

that will help the people to calculate their own weight without hassle they

will just open the app and do the calculation to their phones, it is really

helpful if you will create an app like that not only me will get the benefits

of it.

NAME: Jhayce Anne Manalang (Student)

1. Do you have problems or difficulties in dieting?

- I don’t have problems or difficulties in dieting.

 2. Do you eat normally and on time?

- No, because sometimes I don’t usually eat.

3. Are you doing some exercise? When is the last time you did it?

- Yes, sometimes I do some exercise and it was yesterday.

4. Are you aware of your health status if your ( ex. obese, overweight,

underweight and normal )

- Yes, I’m aware of my health status and I’m in normal.

5. If we are going to make an app that will monitor your health and

fitness would you use it? Why?

- Yes, I will try to use your app so that I can see and observe my health

and fitness.

NAME: Johncel Gonzaga (Student, Futsal Player)

1. Do you have problems or difficulties in dieting?

- Yes, kasi minsan di nakakain on time

2. Do you eat normally and on time?

- Hindi, madalas busy sa mga Gawain saka wala ng time masyado agad

para kumain.

3. Are you doing some exercise? When is the last time you did it?

- Oo, pero minsan lang mga twice o thrice a month

4. Are you aware of your health status if your ( ex. obese, overweight,

underweight and normal )

- Yes, sa last check normal

 5. If we are going to make an app that will monitor your health and

fitness would you use it? Why?

- Yes, dahil mukhang maganda if may mag guguide saken once na mag

pursue nako mag diet.

NAME: Geraldyne Ambrocio (Student)

1. Do you have problems or difficulties in dieting?

- Honestly, I don't do diet. I am petite, so the thing here is I need to eat

more healthy foods. So basically, I don't need the diet process.

2. Do you eat normally and on time?

- Sometimes, I skip food because I can't leave my homeworks and

projects undone and I have this mindset that I will not going to eat if I

am still not finished doing my task which is not a good habit. I am

prioritizing my school works instead on my health condition.

3. Are you doing some exercise? When is the last time you did it?

- Honestly I don’t do exercises.

4. Are you aware of your health status if your ( ex. obese,

overweight, underweight and normal )

- I am not aware on what is my current weight right now. But since this

past few days, I have less hours of sleep doing projects at school, I

hope my weight is still at normal.

5. If we are going to make an app that will monitor your health and

fitness would you use it? Why?

 - I will definitely use the application, because it focuses on the health

issues and fitness that a lot of people need, more specifically to the

teenagers like me.

The Validation Board is a tool to help you validate the parts of your vision.

There is room for the Customer Segment, Problem and Solution, but mostly

so you can easily iterate on them. After creating an initial customer segment

and problem you define a couple of assumptions and mark those that are

really risky.
Business Model Canvas is a strategic management and lean startup template

for developing new or documenting existing business models. It is a visual chart

with elements describing a firm's or product's value proposition, infrastructure,

customers, and finances.

SAMPLE INPUT, OUTPUT and REPORT

 Web and Mobile Application

Mobile Application Forms (Registration and Login

Mobile Application Interface (User Dashboard where they can health check)

Mobile Application Interface (Plans page where they can use plans)
Mobile Application Interface (Create Plans for premium users)
Web Application Interface (Register Page)

Web Application Interface (Login Page)

Web Application Interface (User Dashboard)

Web Application Interface (Plans Page)

Web Application Interface (Create Plan Page for Premium Users)
 Web Application Interface (Admin Dashboard)

Web Application Interface (Admin Manage Foods)

Web Application Interface (Admin Manage Exercises)

 Web Application Interface (Admin Create Plan)

USER MANUAL
In this section we are trying to give an quick insight on how to use

the application both for web and mobile and as for our application it needs a lot

of necessary pre requisites due to it’s not hosted yet.

 Gordon College
College of Computer Studies
Olongapo City Sports Complex, East Tapinac, Olongapo City
PHILIPPINES 2200 tel. No. (047)774-6929

____________________________________________________________________________________________

STRICTFOODS
User Manual

Developed by:
Daryl John Tadeo
Paolo Miranda, Mark Jericho Fabro
Introduction
This manual will guide you how to install necessary files and assets need to run
and use Strict Foods at your own computer please follow it strictly and use Strict Foods
by Team !Dev.

Needs
- Google Chrome
- XAMPP
- Ionic
- Angular
- Node JS
- Internet Connection (for downloading purposes! only optional once installed)

Guide for Installing and Using the

Strict Foods Web Application

Step 1: Download all the necessary files to avoid errors or bugs make sure also to
download the same bit as your operating system example if you’re using 64 bit
windows then download 64 Installers for the necessary files.

Google Chrome
- DOWNLOAD LINK: https://www.google.com/chrome/
XAMPP
- DOWNLOAD LINK: https://www.apachefriends.org/download.html
IONIC
- DOWNLOAD INSTRUCTIONS:
https://ionicframework.com/docs/v3/cli/package/download/

ANGULAR
- DOWNLOAD INSTRUCTIONS: https://angular.io/guide/setup-local

Node JS
- DOWNLOAD LINK: https://nodejs.org/en/
MySQL
- DOWNLOAD LINK: https://dev.mysql.com/downloads/installer/

Step 2: Once all the necessary files is installed import the strictfoods.sql located
inside strictfoods-front folder to MySQL database you just installed.
How to import it?
- Search XAMPP Control Panel in search bar in your computer and Start both
Apache and MySQL module it should looked like this after started

- Once started go to Google Chrome and type localhost/dashboard

- And the Apache dashboard will show in your browser now click phpMyAdmin
in header

- Once redirected in the phpMyAdmin click IMPORT in the navigation menu at the
top

- When it’s loaded click Choose File under the File to import header
 - The popup window will appear and search the strictfoods.sql file and select it
and click Open

- Once done you can now close that window.

Step 3: Now you imported the database you can now copy the strictfoods-front
folder to htdocs it is found in your XAMPP folder directory the default folder location
is C:\xampp\htdocs after copying you can now access Strict Foods.

Step 4: Go back to your browser and type localhost/strictfoods-front/www and you

will be redirected in the Strictfoods.

Step 5: Now you can explore the application all you want but first you must create
an account by clicking the Get Started.
Step 6: After creating account you can login and see your quick summary and
health status in your dashboard the BMI Calculator or Health Check part is where
you can calculate your new BMI after a week or so in dieting or working out to check
if your health status or BMI is normal, The convertion part is where you can convert
your height in foot to cm for you to calculate your BMI it will refreshed the page and
displays your new BMI.
Step 7: Now go to plans page and you can see all the suggested plans there and you
can also select which one to use that can be your current plan.

Step 8: Now browse over the profile page and you can see your information and
you can also edit your information or change password there.
Step 9: After browsing the pages there is the history page that must be blank if you
saw but once you use the BMI calculator it will filled up by your recent weight and
height records as shown here there is one when we try to use the BMI calculator
earlier.

Step 10: You can become a premium user too by clicking the Go premium button
and pay through Paypal. After being premium you must log out and login again and
the new function which is Plan maker will be enabled you can your own personalized
plans in plan maker and you can browse it in plans too. Otherwise you can still stay
free and use that application as it is.
Step 11: After browsing you can now follow the plans you use and continue working
out at home and dieting, It is also recommended to check your BMI every 2 or 3 weeks
to check your progress.

Step 12: Log out and check Strict Foods whenever you need it keep in mind that
always Start the Apache and MySQL first before accessing the application it will not
open once you restarted your computer without starting the Apache and MySQL in
XAMPP Control Panel.
 Guide for Installing and Using the
Strict Foods Mobile Application

NOTE: For the first Three steps check the pictures above for more
detailed instructions Functions works the same for the web application

Step 1: Download all the necessary files to avoid errors or bugs make sure also to
download the same bit as your operating system example if you’re using 64 bit
windows then download 64 Installers for the necessary files.

Google Chrome
- DOWNLOAD LINK: https://www.google.com/chrome/
XAMPP
- DOWNLOAD LINK: https://www.apachefriends.org/download.html
IONIC
- DOWNLOAD INSTRUCTIONS:
https://ionicframework.com/docs/v3/cli/package/download/

ANGULAR
- DOWNLOAD INSTRUCTIONS: https://angular.io/guide/setup-local
Node JS
- DOWNLOAD LINK: https://nodejs.org/en/
MySQL
- DOWNLOAD LINK: https://dev.mysql.com/downloads/installer/

Step 2: Once all the necessary files is installed import the strictfoods.sql located
inside strictfoods-front folder to MySQL database you just installed.
How to import it?
- Search XAMPP Control Panel in search bar in your computer and Start both
Apache and MySQL module
- Once started go to Google Chrome and type localhost/dashboard
- And the Apache dashboard will show in your browser now click phpMyAdmin
in header
 - Once redirected in the phpMyAdmin click IMPORT in the navigation menu at the
top
- When it’s loaded click Choose File under the File to import header
- The popup window will appear and search the strictfoods.sql file and select it
and click Open
- Once done you can now close that window.

Step 3: Now you imported the database you can now copy the Mobile folder to
htdocs it is found in your XAMPP folder directory the default folder location is
C:\xampp\htdocs.

Step 4: After copying access the Mobile folder and then strict-foods then
StrictFOODS and you will see the main file folder.

- Now click the directory path

- Then type cmd.. in that path area

- And you will see the CMD

 - now type “ionic serve” and wait for the application to open.

Step 5: when the application opens you can see that you will be redirected in
localhost:8100 as default address and you can see the Strict Foods Splash screen it
might open as web view but to use in mobile view you can click f12 and click the
Mobile view button it looks like this the one in blue highlight.

Step 6: After going in the mobile view you can now use the app so first thing is to
slide thru first and click Get Started to create an account or login to login your
existing account.

Step 7: After creating account or logging in you can see your quick summary and
health status in your dashboard the BMI Calculator or Health Check part is where
you can calculate your new BMI after a week or so in dieting or working out to check
if your health status or BMI is normal, The convertion part is where you can convert
your height in foot to cm for you to calculate your BMI.
Step 8: Now go to plans page and you can see all the suggested plans there and you
can also select which one to use that can be your current plan.

Step 9: Now browse over the profile page and you can see your information and you
can also edit your information or change password there.
Step 10: After browsing the pages there is the history page that must be blank if you
saw but once you use the BMI calculator it will filled up by your recent weight and
height records so this one has one the history we recorded earlier.

Step 11: You can become a premium user too but you need to go and login your
account in our web application by clicking the Go premium button and pay through
Paypal. After being premium you must log out and login again and the new function
which is Plan maker will be enabled you can your own personalized plans in plan maker
and you can browse it in plans too. Otherwise you can still stay free and use that
application as it is.

Step 12: After browsing you can now follow the plans you use and continue working
out at home and dieting, It is also recommended to check your BMI every 2 or 3 weeks
to check your progress.

Step 13: Log out and check Strict Foods whenever you need it keep in mind that
always Start the Apache and MySQL first before accessing the application it will not
open once you restarted your computer without starting the Apache and MySQL in
XAMPP Control Panel.
PROCESS/ DATA/ INFORMATION FLOW
The following data flow diagram brings a graphical representation of how data

is being processed inside the system.

System Data Flow Diagram Level 1

The application is developed for the students, workers and people at

home or people’s that wants to diet but didn’t know how to do it and Strict Foods

will give them ways and strategies on how to diet. The user will send information

by registering and once it done he/she will login to the application by logging in

he can see his dashboard and see some quick summary of his health status.

The user will do health checks and his/her recent weight and height will be

stored on his history and his current data will be updated to a new one. User

can also check his history and view his profile and even create personal plans
if his/her is premium user. Meanwhile on the administrator side the

administrator after logging in can delete other admins and add/ delete foods

sets by adding food sets the plan creator will expand and will have new foods

sets choices. Administrators after adding / deleting some food sets he can also

add new exercise and or delete one this exercise can also expand the choices

in creating plan. Lastly administrators can create plans for its users.

To have a better visualization on what should be the output, the developers

created a conceptual model. Following the design of this model shall aid in

yielding a better output.

INPUT PROCESS OUTPUT

Knowledge Meeting and Planning

Requirements
- To brainstorm
1. Knowledge in ideas and
workouts and determine the
foods. goals of the
2. Knowledge in application.
Developing
Web and Mobile Designing
application.
3. Knowledge in - UI/UX building,
Database
designs and
STRICTFOODS:
Management
functionalities AN ASSISTIVE
System
4. Knowledge in
are apparently HEALTH &
User achieved FITNESS
Interface Design APPLICATION
Development
Software USING
Development - Building the ENHANCED ABC
1. Android 6.0 application
(Marshmallow) - Demonstrate ALGORITHM
or above for - Improve
smartphones
Testing
 2. Windows 7
Operating - Focused on the
System or Higher debugging and
3. Google Chrome or effectiveness
Mozilla and discovery
Firefox Browser
Implementation
Program
Specifications - The project plan
is put into
11. Ionic motion and
12. HTML 5 performed
13. JavaScript
14. CSS
15. JSON
16. API
17. MySQL
18. jQuery
19. AJAX
20. Angular

Hardware
Requirements

1. Android
Smartphones
2. Computer

IPO Diagram of the application

Developing an information system under the constraints of time is no easy

task, the developers opt to create a Gantt chart to keep track on their process

and keep a sense of responsibility to do what is needed to be done. The chart

shows the activities being conducted by the proponents from January to May.
 Gantt Chart of the application

In order to visualize the flow of each process an end-user may take,

and the system’s response in collaboration with it, the developers created a

flowchart to virtually assess the logic between transactions and user inputs

System Flowchart of the application

Screen Layouts, Test Results,
Sample Generated Output, Pictures
MOBILE APPLICATION INTERFAC
WEB APPLICATION INTERFACE
Web Application Admin Interface
Pictures showcasing the data gathering,
investigation done
GOOGLE FORMS SURVEY
INTERVIEWS