Module - It Ipt 02

CHIEF AUTHOR
Niño G. Herrera, MSIT
CONTRIBUTORS / EDITORS
Angelito I. Cunanan, Jr, MSIT Andrew Caezar A. Villegas, MSIT Cris Norman P. Olipas, MSIT
Edward John T. Madrid, LPT Christian B. Peña
Johannah Mae C. Vasquez Marvin DG. Garcia, MSIT

PREFACE
This module IT IPT02 - Mobile Application Development, is prepared for students
and teachers of Nueva Ecija University of Science and Technology's different
campuses. this module will help the readers to understand the development occured
in hybrid mobile application; to help them gain a comprehensive knowledge, to
enable them to share their ideas and perform activities. This module covers a
thorough discussion of twenty-one lessons with comprehensible explanation and
exercises that will enhance readers' understanding of each lesson. Contents are
presented in a style that is easy to understand.
NEUST- CICT 2021

Table of Contents
LESSON 1: INTRODUCTION TO MOBILE APPS AND SETTING THE
DEVELOPMENT ENVIRONMENT 1
What is Mobile app? 1
Types of Mobile app 1
App Creation and Development Tools 2
Introducing the Ionic mobile development software 3
Pros 4
Cons 4
Creating Apps 7
Opening your Ionic Code 10
Test App in Browser 11
Folder Structure of the Project 11
EXERCISE 13
LESSON 2: Ionic – Forms 13
Making an Input Form 13
Ionic Labels 14
Stacked Label 16
EXERCISE 23
LESSON 3: Ionic Cards 24
Ion Cards 24
Adding Cards 24
EXERCISE 28
LESSON 4: Ionic Buttons 28
EXERCISE 31
LESSON 5: Ionic Checkbox 32
Adding Checkbox 32
Multiple Checkboxes 33
EXERCISE 39
LESSON 6: Ionic Radio Button 42
How to Add Radio Buttons in your App? 42
EXERCISE 44
LESSON 7: Ionic Toggle 48
Ion - Toggle 48
Using Ionic Toggle 48
EXERCISE 52
LESSON 8: Ionic List 55
Creating a List 55
EXERCISE 59
NEUST- CICT 2021

LESSON 9: Ionic Header 61
Adding the Header 61
EXERCISE 63
LESSON 10: Ionic Footer 64
Adding Footer 64
EXERCISE 66
LESSON 11: Ionic Content 66
Ionic – Content 66
EXERCISE 69
LESSON 12: Ionic Grid 70
Ionic Grid System 70
EXERCISE 74
LESSON 13: Ionic –Tabs 76
EXERCISE 79
LESSON 14: Ionic – Select 82
EXERCISE 87
LESSON 15: Ionic – Range 88
EXERCISE 91
LESSON 16: Basic form functionalities 91
EXERCISE 101
LESSON 17: Performing Calculations 101
Additional Examples 104
EXERCISE 109
LESSON 18: If and Switch 110
Applying the If Elseif and the double ampersand 🡪&& 112
The Switch Case 115
EXERCISE 119
LESSON 19: NGFOR 119
EXERCISE 129
LESSON 20: Tabs and Pages 131
EXERCISE 143
LESSON 21: Side Menus 144
EXERCISE 153
LESSON 22: PUBLISHING 153
Preparing the App 153
Converting your App to APK 156
Publishing your App into Google play console 157
CASE STUDY 166
NEUST- CICT 2021

Page 1 of 152
LESSON 1: INTRODUCTION TO MOBILE APPS AND SETTING THE

DEVELOPMENT ENVIRONMENT
(Reference: https://thinkmobiles.com/blog/popular-types-of-apps/)
What is Mobile app?

A Mobile App is versatile application otherwise called portable application (or
just called "app"), is a PC program or programming intended to work on a smartphones
or mobile devices, for example, a tablet, advanced cells, present day machines, savvy
watches and keen apparatuses. Apps were originally meant for efficiency and support
of task in businesses and due to its effectivity, it now applies to other sectors such as
in Education, Government, Medicine, Military, Science, Industry and Personal
entertainment and wellness, Since App is designed for small devices it can run in a
minimum amount of RAM.
Apps can be in the form of calendar, email, distribution list and contacts, it can
also in the form of database dependent Apps such as Accounting systems, order-
tracking, factory systems, banking systems, Transportation and cinema ticket
purchases and inventory management, most common Apps are mobile games, GPS
services and E-commerce services.
Apps can be purchased and uploaded to the distributors platforms these are
Google Play Store, Microsoft Store, Amazon App Store Appstore, F-Droid,
Blackberry world, and App Store (iOS), the profit is divided into the App Creator and
the distributor, however many apps are free but when installed there will instances
that advertisements appear while the App is active, Mobile applications can run in
desktop computers thru the use of Emulators.
Types of Mobile app

Mobile applications are distinguished into 3 types: native, crossbreed (or
hybrid), and web-based apps.
● Native app
The principle reason for making of Native applications is to run in a particular
versatile working framework. Native applications run toward a specific portable device
for instance an Application made in Android Studio can just disagreement Android
Working Frameworks and Applications made in “Objective C” which can only execute
in iPhone Operating systems.
● Web-based app
This application is made in JavaScript, HTML5 and CSS these applications
utilizes just least memory, however connection to internet is required to run the best
possible conduct and client experience, these Applications are associated into
individual databases and Web servers to gather and disperse information.
● Hybrid app
This Application is a mix of both the native applications and the web
applications, it utilizes single code base to work and work in numerous versatile
working frameworks. It can bolster web and local innovations over numerous stages.
these applications are simpler and quicker to create.
NEUSTCICT 2020
Page 2 of 152
Mixture applications are basically web applications that have been placed in a
native application shell. In spite of such favorable circumstances, crossover or hybrid
applications show lower execution.
When they are downloaded from an application store and introduced, the shell
can interface with the abilities of the portable working framework, gave through a
program that is implanted in the application.
Applications created utilizing React, Apache Cordova, Xamarin, Sencha and
other comparative innovation fall into this arrangement.
App Creation and Development Tools

Mobile application development requires the utilization of specific programming
which are called IDE's, Portable applications inside these IDE's are first tried utilizing
emulators. Emulators give a simple method to test the model applications without the
utilization of physical cell phone or portable device.
Creating applications for smartphones, smart appliances, tablets and smart
watches includes in considering the limitations and capacities of these devices’
highlights, for example, GPS area location, sensors and cameras.
Software Engineers, Programmers or Developers must have a worry in client's
concentration and collaboration with their gadget, and the easy to understand
interface must be perfect to the segments of both equipment and programming.
When planning the Software engineer must make arrangement in the broad
scope of equipment highlights, abilities, determinations, screen or sensor input,
screen sizes, and designs. what's more, should likewise place at the top of the priority
list that mobile or portable device work on battery and doesn't have ground-breaking
processors contrast with the work area and PCs
Some Applications are associated with front-closes which are needy in back-
finishes to help access to big business frameworks these frameworks are Portable
Backend as an assistance and versatile application server foundation, these back-end
are databases, security verification, and record synchronization.
There are many examples of IDE for building mobile Apps these are divided
into Native Mobile Development Tools and Cross-Platform Mobile Development
Tools.
● Native Mobile Development Tools
o AppCode
o Android Studio
o Xcode
● Cross-Platform Mobile Development Tools
o Alpha anywhere
o Quick Base
o AppSheet
o TrackVIA
o Fliplet
o OutSystems
o Onsen UI
o NativeScript
o Sencha
o Ninox
NEUSTCICT 2020
Page 3 of 152
o MobiLoud
o React Native
o Ionic
o Adobe PhoneGap
o Xamarin
o Appcelerator
In this course we will concentrate on the Ionic framework which is an open
source, making Applications in this framework is versatile and can run in different
platforms, since this is anything but difficult to-utilize and but somehow simple to-learn
structure that takes into consideration in fast prototyping. In our Ionic we will
incorporate it with Angular way of programming, this Precise is a TypeScript-based
open-source web application system made by Google which is a built on standard
web technology, Ionic helps developers build cross-platform hybrid and Advanced
Web Apps with ease and mobile UI.
Introducing the Ionic mobile development software

(Reference: https://ionicframework.com/docs/cli)
Ionic is open source development framework used for programming or creating
hybrid applications in mobile devices. Compare to other mobile app Software
Development Kit (SDK) Ionic requires a wrapper to be able to be installed and run on
portable devices and emulators. Ionic contains services, components, sub-
components. commands and tools for building Mobile Apps with common user
interface. Ionic is under MIT license.
Ionic contains elements such as HTML5, CSS and JavaScript to build and
design its UI or user interface (front end) and to create a look and feel of the
environment in using mobile devices, Ionic is built-on top of AngularJS and Apache
Cordova.
Ionic Framework pros and cons
Pros
Below are some of the known advantages of Ionic Framework–

● Organized and modular
● Ionic provides useful pre-created app arrangement with modest layouts which
makes your app quick and simple to start
● Ionic can bundle your apps for Android, IOS, Firefox OS and Windows Phone.
● Easy to maintainable and to upgrade.
● The updates are regular and forums and community support group are always
willing to assist.
Cons
● Since it depends on the internet browser and sometimes give you innacurate
info about the device environment the testing and debugging is somehow
difficult
● Uses numerous kinds of devices and platforms
NEUSTCICT 2020
Page 4 of 152
● Build errors that are tough to debug because of Plugin compatibility issues
exist.
Below are the features of Ionic
● Ionic Command Line Interface (CLI) – This contains commands for building,
starting, running, executing and emulating the Ionic created applications. This
CLI utility is powered by NodeJS.
● HTML5 − These components are encompassing webpage markup and
application programming interfaces (APIs) for complex web applications,
HTML5 contains elements in cross-platform mobile applications designed with
low-powered devices in mind and its natively include and handle multimedia
and graphical content
● JavaScript components − These components are encompassing JavaScript
capabilities to manage all elements of mobile device such as event-drive and
functional programming styles that cannot be ended by HTML or CSS.
● CSS components – Use in designing and to allow the parting of content,
presentation and colors, including layout, and font giving the native
appearance and feel of components and essentials that a mobile application
need.
● AngularJS − Ionic is uses the AngularJS Model–View–Controller (MVC) and
model–view–view model (MVVM) architecture for construction and simplifying
the development and the testing of rich single page apps enhanced for mobile
devices.
● Cordova Plugins − Apache Cordova plugins features wrapping up of CSS,
HTML, and JavaScript code. It encompasses the features of HTML and
extends the JavaScript to function in the portable devices.
● Ionic View – This is the platform used for testing uploading, sharing your
application on mobile devices.
●
List of elements needed to run with Ionic.

● Cordova and the Ionic
These are the important prerequisites expected to begin working with Ionic.
● Node JS
Is the base platform of Ionic needed to generate Mobile Apps , these NodeJS
executes JavaScript code outside of a web browser it allows developers use
JavaScript to write command line tools and for server-side scripting.
● Android SDK
This software is needed especially for those who are doing Ionic in Windows
O.S the Android SDK is somehow replaced by android studio.
● XCode
Because Ionic defines as a hybrid, this platform is used to work in the platform
of Macintosh and are developing apps for the iOS platform.
Cordova and Ionic (in Windows) Installation
1. In Windows open your command prompt by clicking Start and by typing CMD,
click and open when the word command prompt appears.
2. In Command prompt Go to your personal Folder profile, example:
NEUSTCICT 2020
Page 5 of 152
C:\Windows> cd\
C:\> cd\users\Mario
C:\Users\Mario>
3. install the Cordova and Ionic by typing the command of npm shown below:
C:\Users\Mario> npm install -g cordova ionic
Installing other required tools

● The Visual-Studio Code is the SDK that we are going to use to manage and
edit our codes in Ionic to install it go to https://code.visualstudio.com/
● install the Node.js because this is used in interacting with the Ionic ecosystem
https://nodejs.org/en/
● Install the latest jdk of java
● Install the Android Studio or SDK https://developer.android.com/studio/
● And then arrange the environment variables of Android and path of java shown
below
NEUSTCICT 2020
Page 6 of 152
Creating Apps
(Reference: https://www.tutorialspoint.com/ionic/ionic_environment_setup.htm)
There are following three templates to create an App in Ionic:
1. Blank App
2. Tabs App
3. Side menu app
1.Blank App
This will allow you to create blank mobile app from scratch. The following is
the command:
First create a folder for your App example. NOTES: the command MD means Make
a Directory (Folder) and the CD means Change Directory (Folder):
C:\Users\Mario> cd Documents
C:\Users\Mario\Documents> MD Ionic
C:\Users\Mario\Documents > CD Ionic
C:\Users\Mario\Documents\Ionic >
Then type the ionic start and your desired filename of the app and the word “blank”
the following example uses ExampleAPP as an example filename:
C:\Users\Mario\Documents\Ionic > ionic start ExampleAPP
The command “Ionic Start” will generate a folder named ExampleAPP and then
arrange and install folders and files.
C:\Users\Mario\Documents\Ionic> cd ExampleAPP
C:\Users\Mario\Documents\Ionic\ ExampleAPP >
Making android applications requires right stages to do these for the Android Platform
include the Cordova extend and introduce the fundamental Cordova modules
demonstrated as follows:
C:\Users\Mario\Documents\Ionic\ExampleAPP>ionic Cordova platform add android
next phase is to build the app
C:\Users\Mario\Documents\Ionic\ExampleAPP> ionic build android
NOTES: In case of error type the command🡪 npm i -g native-run
To run and start the App type the following code:
NEUSTCICT 2020
Page 7 of 152
C:\Users\Mario\Documents\Ionic\ExampleAPP> ionic run android
This command will output your App in the browser which is a blank interface with a
title “Ionic Blank starter”.
2.Tabs App
Allows you to create a default Ionic tabs template which contains a readymade
tab menu which are headers, common screens and functionalities. Open the
command prompt get out of the folder of our blank ExampleAPP folder:
C:\Users\Mario\Documents\Ionic\ExampleAPP> cd\
C:\Users\Mario\Documents\Ionic>
The command below begins the creation of the basic tabbed app:
C:\Users\Mario\Documents\Ionic> ionic start ExampleTabApp tabs
The command” Ionic Start” will generate a folder ExampleTabApp and then arrange
and install folders and the required files.
Enter into the newly created root folder of our Tabbed App (in this case
ExampleTabApp)
C:\Users\Mario\Documents\Ionic> cd ExampleTabApp
C:\Users\Mario\Documents\Ionic\ExampleTabApp >
Install the basic Cordova plugins and Install the Android Platform this will allow our
app to run in android emulators
C:\Users\Mario\Documents\Ionic\ExampleTabApp>Ionic cordova platform add

android
Now build the app:
C:\Users\Mario\Documents\Ionic\ExampleTabApp>ionic cordova build android
NOTES: In case of building errors during this command run, Install the Android SDK
and its supporting files. 🡪 npm i -g native-run
Then finally run your app, this will start if a mobile device is connected or an emulator
is present.
C:\Users\Mario\Documents\Ionic\ExampleTabApp> ionic cordova run android
This command will output your App in the browser with a tabbed graphical toolbar on
it.
NEUSTCICT 2020
Page 8 of 152
3.Side Menu App

This App Template contains sidemenu from the start.
Open the command prompt get out of the folder of our blank ExampleTabApp folder:
C:\Users\Mario\Documents\Ionic\ ExampleTabApp > cd\

C:\Users\Mario\Documents\Ionic>
To create an app with side menu type the following (in this example our filename will
be ExampleSideMenuApp):
C:\Users\Mario\Documents\Ionic>ionic start ExampleSideMenuApp sidemenu
This above command creates a folder ExampleSideMenuApp and then create and
install folders arrangements and the required files.
Get inside of the folder in our newly created App:
C:\Users\Mario\Documents\Ionic>cd ExampleSideMenuApp
C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp>
To run it in Android Emulator, install the basic Cordova plugins and then install the
Android Platform the command is shown below:
C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova platform add

android
To finalize the app command, type the following code:
C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova build

android
Finally, we will run the App shown in the command below:
C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova run android
This command will output your App in the browser with a built-in menu on it.
NOTES: To deploy Ionic App in your mobile device please visit:
https://ionicframework.com/docs/v3/intro/deploying/
Opening your Ionic Code

If you wish to view and manage your codes in visual studio type the following
command
C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> code .
NOTES: there are only single space between the word “code” and the “.”
NEUSTCICT 2020
Page 9 of 152
Test App in Browser

The building process of ionic is fast since it uses any web browser testing the
app requires a native emulator such as android SDK or android studio, also testing
can be done directly to Mobile devices. To start coding type the “ionic serve”
command:
C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic serve
With the ionic serve command, the web browser (Google Chrome
recommended) will open showing your App. To access the browser developer
console, Press the F12 key.
The webpage is auto refreshed, whenever. you make changes in the code.
Folder Structure of the Project

Below are the most used folders created by Ionic to form the anatomy of the
mobile App as mentioned:
NEUSTCICT 2020
Page 10 of 152
● Platforms − is the container where the Android and known platforms

particularly the IOS projects are developed.
● Plugins − This folder holds the Cordova plugins.
● Resources − This directory contains the resources such as your project’s icon
and the splash screen.
● www and src – www and src is the working folder that you will access most
of the time. This is where you devote most of your time in developing Ionic
programs
● Other important Files
o config.xml is the configuration file of the Cordova.
o package.json comprises the materials connected to apps and the
dependencies and the plugins which are mounted utilizing the package
manager of the NPM.
EXERCISE
Answer the following question (send the answer thru Email of your instructor or
Facebook messenger, if there is any problem contact your instructor or ask
assistance to your class group)
1.) Describe the importance of Mobile Apps
2.) How can mobile apps help business, industry, education and
government?
NEUSTCICT 2020
Page 11 of 152
LESSON 2: Ionic – Forms
The forms in Ionic are the least complex and for the most part generally
utilized type of communication among clients and the App you are planning these
structures are utilized to gather the information required
(Reference : https://ionicframework.com/docs/v3/developer-resources/forms/)
Making an Input Form
Utilizing item and the list as your fundamental classes permits your application
to comprise more than one-structure component and arrange the labels or
components in a rundown.
Utilizing the Label will give the capacity to center your content info.
The input type with a placeholder allows you to display any text that will act as
a caption, it will disappear as soon as you start typing and gets back again if you delete
all the text you type
The following examples are based on the traditional and previous version of
Ionic on how to put a label and text(with placeholder):
<div class = "list">
<label class = "item item-input">
<input type = "text" placeholder = "Type your Studno" />
</label>

<input type = "text" placeholder = "Type your Name" />
</label>
</div>
NEUSTCICT 2020
Page 12 of 152
The code above will display the following result −
Ionic Labels
In the event that you wish to have your placeholder to be on the left side when
you type the content simply type any content you wanted among <label> and </label>
The accompanying models depend on the conventional and past form of Ionic:
<label > What is your Studno?
<input type = "text" placeholder = "Type your Studno" />
</label>
<p></p>
<label > What is your name?

<input type = "text" placeholder = "Type your Name" />
</label>
</div>
NEUSTCICT 2020
Page 13 of 152
● The code shown in previous page will result the following screen:
Stacked Label
● Stacked label permits moving your mark on the top of the base of the
information. To do this, include the thing stacked label class to our name
component.
● NOTE the tag < span > is utilized before the information tag. In the event that
we changed their places, it would show up underneath it on the screen. The
following examples are based on the traditional and previous version of Ionic:

<label class = "item item-input item-stacked-label">
<span class = "input-label">Where do you live? </span>
<input type = "text" placeholder = " Type your address here" />
</label>
<p></p>
<label class = "item item-input item-stacked-label">
<input type = "text" placeholder = "Type your age here" />
<span class = "input-label">How old are you?</span>
</label>
</div>
NEUSTCICT 2020
Page 14 of 152
● The above code will display the following screen
THE NEW FORMAT

In the new Ionic 5 the use of traditional HTML tags is simplified and changed; the
following examples displays how to put input textbox using the new Ionic
Angular/Javascript format
● This is the how the new Ionic Label and Default Input textbox look like:
<ion-label>Type the student number</ion-label>

<ion-input></ion-input>
● This is the Input textbox with value :
<ion-label>Type your Firstname here</ion-label>

<ion-input value="This sentence you are reading is the value of this input "></ion-input>
NEUSTCICT 2020
Page 15 of 152
● This is the Input textbox with placeholder :

<ion-input placeholder="Type your lastname here"></ion-input>
● Apply all these codes in the home page of your Ionic program:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
NEUST Enrollment System
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<div >
<ion-label>Type the student number</ion-label>
<ion-label>Type your Firstname here</ion-label>
<ion-input value="This sentence you are reading is the value of this input "></ion-
input>
<ion-input placeholder="Type your lastname here"></ion-input>
</div>
</ion-content>
● When you run the program, the following is the output and interactions:
NEUSTCICT 2020
Page 16 of 152
● This is the Input textbox object plus a clear button:
<ion-label>Your Tuition Fee is</ion-label>

<ion-input clearInput value="Click the X on this input textbox to clear the contents"></ion-
input>
● This is the Number type input textbox:

<ion-input type="number" value="10500"></ion-input>
● This is the Disabled input textbox:
<ion-label>The amount you will pay is </ion-label>

<ion-input value="Disabled" disabled></ion-input>
● This is the Readonly input textbox:
<ion-label>Your status is </ion-label>

<ion-input value="Scholar" readonly></ion-input>
● Examples of Labels with their attributes together with Input textboxes, take
note each paired textbox and label are enclosed into <ion-item>:
<ion-item>
<ion-label>Type your Address </ion-label>
</ion-item>
<ion-item>
<ion-label position="floating">Enter your birthday</ion-label>
</ion-item>
<ion-item>
<ion-label position="fixed">Enter your age</ion-label>
NEUSTCICT 2020
Page 17 of 152
</ion-item>
<ion-item>
<ion-label position="stacked">Typ0e your telephone number</ion-label>
</ion-item>
● Combine all the commands you just learned like the one below and then run
it:
<ion-toolbar>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
<div >

<ion-input value="Click the X on this input textbox to clear the contents" clearInput ></ion-input>


<ion-input type="number" value="10500"></ion-input>


<ion-label>The amount you will pay is </ion-label>
<ion-input value="Disabled" disabled></ion-input>


<ion-label>Your status is </ion-label>
<ion-input value="Scholar" readonly></ion-input>

<ion-item>
NEUSTCICT 2020
Page 18 of 152
<ion-label>Type your Address </ion-label>

</ion-item>
<ion-item>
<ion-label position="floating">Enter your birthday</ion-label>
</ion-item>
<ion-item>
<ion-label position="fixed">Enter your age</ion-label><p></p>
</ion-item>
<ion-item>
<ion-label position="stacked">Type your telephone number</ion-label>
</ion-item>
</div>
</ion-content>
● The Following is the output and interactions:
NEUSTCICT 2020
Page 19 of 152
EXERCISE
Make an Ionic structure that will execute the NATIONAL INSURANCE Loan
Application structure.
First your Ionic structure must show the Title as demonstrated as follows:
NATIONAL INSURANCE EMERGENCY LOAN (ACTIVE MEMBER)

APPLICATION FORM
Form No. 0509842020-EL-Active-REV 1
Significant: Proceeds of this advance will be credited to the Electronic Card record
of the borrower. Preceding the recording of the cultivated application structure, the
borrower must peruse completely the terms and conditions underneath.
TO BE FILLED OUT BY THE APPLICANT
At that point your Ionic structure acknowledges client input demonstrated as follows:
Applicant complete name

Birthday (mm/dd/yyyy)
Surname
First Name
M.Iinitial
NATIONAL INSURANCE ID No. (any of the ID No. beneath might be given)
BNo. E-Card/ MID Card No. E-Card/ MID Bank Account No.
Address (Home)
Street
Brgy
District/City
Postal Office No.
Cellphone No.
Email Address
Present Office
NEUSTCICT 2020
Page 20 of 152
Present Office Address

Versatile No.
Last Name
First Name
Middle Name
LESSON 3: Ionic Cards
Ion Cards
Ion Cards are used in mobile devices to organize the content especially for
those mobile devices with reduced screen size, cards showing information will make
users sense user friendliness of the formed app.
(Reference: https://ionicframework.com/docs/api/card)
Adding Cards
In the previous versions of Ionic the card class is added in the element you
use the example below use the class “card” inside the <div> element. Cards will only
work if the item class is included. If there is too much text the item-text-wrap class
is used to wrap the contents inside your card.
<div class = "card">
<div class = "item">
Without the body and the mind, as all men know, the
Nation could not live.
</div>
<div class = "item item-text-wrap">
A nation, like a person, has a body--a body that must be fed

and clothed and housed, invigorated and rested, in a manner
that measures up to the objectives of our time.
</div>
</div>
In the new Ionic 5 the use of cards is simplified with the use of these commands’
ion-card-content, ion-card-header, ion-card-title, ion-card-subtitle. The following is an
example of cards using header, subtitle, card title and card content in
Angular/JavaScript:
<ion-card>
<ion-card-header>
<ion-card-subtitle>Rules</ion-card-subtitle>
<ion-card-title>International Students</ion-card-title>
</ion-card-header>
<ion-card-content>
Note: international students who enroll should
NEUSTCICT 2020
Page 21 of 152
bring up-to-date CASES23 to confirm the student's inauguration of

learning within 15 working days of graduation.
</ion-card-content>
</ion-card>
Here is another example with buttons, icons, buttons and large content inside:
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>Transfer Students</ion-label>
<ion-button fill="outline" slot="end">See more Policies</ion-button>
</ion-item>
<ion-card-content>
</ion-card-content>
</ion-card>
Here is how you put the 2 examples we have together:
<ion-toolbar>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-card>
<ion-card-header>
<ion-card-subtitle>Rules</ion-card-subtitle>
<ion-card-title>International Students</ion-card-title>
</ion-card-header>
<ion-card-content>
Note: The international students who wish to enroll should
NEUSTCICT 2020
Page 22 of 152
update CASES23 to confirm the student's commencement of

learning within 15 working days of graduation..
</ion-card-content>
</ion-card>
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>Transfer Students</ion-label>
<ion-button fill="outline" slot="end">See more Policies</ion-button>
</ion-item>
<ion-card-content>
Transferees from public and private schools in the Philippines who
failed to submit the SF 9 (formerly Form 138) during early registration
or upon enrollment shall only be temporarily enrolled until the submission
of required documents on or before August 31st of the current year. approved
by the parent or the guardian to be momentarily enrolled in the school.
</ion-card-content>
</ion-card>
</div>
</ion-content>
And the following is the output of the code above:
NEUSTCICT 2020
Page 23 of 152
EXERCISE
Make an Ion form that will display the Philippine Army history implementing
the Ionic cards, your card has to display the title:
THE HISTORY of the PHILIPPINE ARMY

NOTES: You can Reference to the Philippine Army website
https://www.army.mil.ph/home/index.php/component/sppagebuilder/?view=page&id=
139
● First create an Ionic card to display the Battles during Colonization.

● Second create an Ionic card to display the Forces’ First Test.
● Then Third create an Ionic card to display the Fight for Freedom.
● Fourth, create an Ionic card to display Philippine Army Rebirth.
● Fifth, create an Ionic card to display World War II history.
● In the sixth activity create an Ionic card to display the Building the Headquarters;
Expanding Horizons.
● In the Seventh create an Ionic card to display the Army the Nation Builder.
● In the Eighth create an Ionic card to display continuing Sacrifice, Bravery and
Patriotism.
● In the Ninth create an Ionic card to display the Philippine Army in Today’s world.
LESSON 4: Ionic Buttons
Buttons are graphical control element that provides the user a simple way to
trigger an event in modern Ionic 5 we use the command <Ion-button> </Ion-button>.
To see the attributes please explore in this reference:

https://ionicframework.com/docs/api/button)
The Following is the example of Ion-button:

<ion-button> Click this Button to Execute </ion-button>
The Following example contains an attribute “Color” with a value “Danger”:
<ion-button color="danger"> Delete File </ion-button>
NEUSTCICT 2020
Page 24 of 152
The Following is the Example of the Buttons
● This is how you make an Anchor:
<ion-item>
<ion-button href="#">Click to go below to see the Answer</ion-button>
</ion-item>
● The following is the output of the code above:
● This is how you apply the expand attribute:
<ion-item>
<ion-button expand="full">Click to install the Program</ion-button>
<ion-button expand="block">Click here to Uninstall</ion-button>
</ion-item>
● This example uses Round attribute:
<ion-item>
<ion-button shape="round">Run</ion-button>
<ion-button shape="round">Stop</ion-button>
</ion-item>
● This example uses Fill:
<ion-item>
<ion-button expand="full" fill="outline">Forward</ion-button>
<ion-button expand="block" fill="outline">Backward</ion-button>
<ion-button shape="round" fill="outline">Up</ion-button>
</ion-item>
NEUSTCICT 2020
Page 25 of 152
● The following uses Icons:
<ion-item>
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Go Left Icon
</ion-button>
</ion-item>
<ion-item>
<ion-button>
Go Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
</ion-item>
<ion-item>
<ion-button>
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
</ion-item>
● This example uses Size attribute:
<ion-item>
<ion-button size="large">Increase Font size</ion-button>
<ion-button>Make Normal Font size</ion-button>
<ion-button size="small">Decrease Fonts size</ion-button>
</ion-item>
● This example uses Colors attribute:
<ion-item>
<ion-button color="medium">Contact Electrician</ion-button>
<ion-button color="dark">Contact Security</ion-button>
<ion-button color="primary">Call the Civil Engineer</ion-button>
<ion-button color="warning">Call a Fireman</ion-button>
NEUSTCICT 2020
Page 26 of 152
<ion-button color="danger">Call Ambulance</ion-button>

<ion-button color="light">Call Gardener</ion-button>
<ion-button color="secondary">Contact Cleaner</ion-button>
<ion-button color="tertiary">Contact Kitchen</ion-button>
<ion-button color="success">Call the transport</ion-button>
</ion-item>
EXERCISE
Create an Ionic Form that will implement the use of buttons. Your program
must display the Title as shown below:
WELCOME TO NATIONAL DISASTER COORDINATING COUNCIL (NDCC) App

Click the Following Buttons to See the Information of the Relief in Your Region
Below are the buttons you are going to create, please put colors in your button:
Region 1 - Ilocos Region

Region 2 - Cagayan Valley
Region 3 - Central Luzon
Region 4 - CALABARZON
Region 5 - Bicol Region
Region 6 - Western Visayas
Region 7 - Central Visayas
Region 8 - Eastern Visayas
Region 9 - Zamboanga Peninsula
Region 10 - Northern Mindanao
Region 11 - Davao Region
Region 12 - SOCCSKSARGEN
National Capital Region of the republic
CARAGA
Cordilleras Administrative Region
MIMA
LESSON 5: Ionic Checkbox
Ionic checkbox are tags used for toggling and selecting, checkboxes are
used in license agreement pages, product selection, user registration with items
including the newsletters.
NEUSTCICT 2020
Page 27 of 152
(Reference: https://ionicframework.com/docs/api/checkbox)
Adding Checkbox
To include a checkbox form, add the checkbox class name to both label and
the input elements.
<label class = "checkbox"> Rice

<input type = "checkbox">
</label>
<p></p>
<label class = "checkbox"> Soup
<input type = "checkbox">
</label>
The code above will produce the following result:
Multiple Checkboxes
Here is how to Group the check boxes using item-checkbox class for each list
item again the code below uses the previous native and traditional ionic coding.
<ul class = "list">
NEUSTCICT 2020
Page 28 of 152
<li class = "item item-checkbox">

Internet Connectiom
<label class = "checkbox">
<input type = "checkbox" />
</label>
</li>

Laundry services
</label>
</li>

Vehicle/Transport service
</label>
</li>

Breakfast
</label>
</li>
</ul>
The code above will result the following:
NEUSTCICT 2020
Page 29 of 152
Here are the checkboxes in the modern-day version of Ionic instead of the
traditional<input type=” checkbox”> which is sometimes confusing we simply use <ion-
checkbox></ion-checkbox>.
This is how you create a Default Checkbox:
<ion-item>
<ion-label>Dash-Mounted Holders </ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>
This is how you create a Disabled Checkbox:
<ion-item>
<ion-checkbox disabled="true"></ion-checkbox>
<ion-label> Visor Accessories </ion-label>
</ion-item>
This is how you create a Checked Checkbox:
<ion-item>
<ion-checkbox checked="true"></ion-checkbox>
<ion-label> Seat Back Organizer </ion-label>
</ion-item>
This is how you create a Checkbox Colors:
<ion-item>
<ion-checkbox color="danger"></ion-checkbox>
Baby Seat Cushion
</ion-item>
<ion-item>
<ion-checkbox color="light"></ion-checkbox>
Car Seat Cover
</ion-item>
<ion-item>
NEUSTCICT 2020
Page 30 of 152
<ion-checkbox color="primary"></ion-checkbox>
Trunk Organizer
</ion-item>
<ion-item>
<ion-checkbox color="secondary"></ion-checkbox>
Dash-Mounted Holders
</ion-item>
<ion-item>
<ion-checkbox color="dark"></ion-checkbox>
Garbage guard
</ion-item>
Let’s combine the modern ionic examples in our home.page.html:
<ion-toolbar>
<ion-title>
NEUST COE Car Sales
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-label>Select a Car Accessories you wish to include in
your brand new vehicle</ion-label>

<ion-item>
<ion-label>Dash-Mounted Holders </ion-label>
<ion-checkbox></ion-checkbox>
</ion-item>


<ion-item>
<ion-checkbox disabled="true"></ion-checkbox>
<ion-label> Visor Accessories </ion-label>
</ion-item>


<ion-item>
<ion-checkbox checked="true"></ion-checkbox>
<ion-label> Seat Back Organizer </ion-label>
</ion-item>

NEUSTCICT 2020
Page 31 of 152
Other Accessories
<ion-item>
<ion-checkbox color="danger"></ion-checkbox>
Baby Seat Cushion
</ion-item>
<ion-item>
<ion-checkbox color="light"></ion-checkbox>
Car Seat Cover
</ion-item>
<ion-item>
<ion-checkbox color="primary"></ion-checkbox>
Trunk Organizer
</ion-item>
<ion-item>
<ion-checkbox color="secondary"></ion-checkbox>
Dash-Mounted Holders
</ion-item>
<ion-item>
<ion-checkbox color="dark"></ion-checkbox>
Garbage guard
</ion-item>
</div>
</ion-content>
The following will be the output:
NEUSTCICT 2020
Page 32 of 152
EXERCISE
Create an Ionic App that will use checkboxes, labels and input text boxes, the
App you are about to create will be used by LAND TRANSPORTATION OFFICE for
their INSPECTION REPORT. Below are the detailed requirements:
First your App must display the Title as shown below:
REPUBLIC OF THE MAHARLIKA

DEPARTMENT OF TRANSPORTATION
LAND AIR TRANSPORTATION OFFICE
Daang Binuksan, Cabanatuan City
INSPECTION REPORT
Then Second Create a label and input boxes for the items below:
NAME OF DRIVING SCHOOL/TRAINING CENTER:_______________

ADDRESS: _______________________________________________
● Create check boxes for the lettered items in the CLASSROOM AREA:
CLASSROOM AREA: (√)

_____ A. Must not be less than twenty-four (24) square meters
_____ B. Fully airconditioned or well-ventilated classroom
_____ C. restructured set of traffic symbols, indications and street markings,
exhibition and Acoustic-photographic materials.
NEUSTCICT 2020
Page 33 of 152
_____d. Closed circuit television (CCTV) system with built-in date and time
recording features
_____ E. Chair with an armrest, seat measuring not less than 0.5x0.5 meter
_____ F. Parts assemblies, or automotive components that are aids in
teaching “Troubleshooting”
● Create check boxes for the lettered items in the LIBRARY FACILITIES
LIBRARY FACILITIES: (√)

_____ A. Republic Act (R.A.) No. 4136, as amended and R.A. No. 10930
_____ B. Letters of Instructions, Administrative Orders/ Memorandum
Circulars of the DOTr, LATO, LTFRB, and city/municipal ordinance
comparative to land carriage and traffic flow instructions and guidelines
_____ C. Filipino Driver’s Manual, defensive driving manual, and automotive
mechanics manual to be provided to student-drivers
_____ D. R.A. 8712 - Maharlikan Clean Air Act of 1994
_____ E. R.A. 8751 - Seat Belts Use Act of 1999
_____ F. R.A. 8721 - An Act Daunting a Motor Vehicle Operator’s Control on
Entire Types of Motor Vehicles and for Extra Purposes
_____ G. R.A. 10046- Motorcycle attire Helmet Act of 2009
_____ H. R.A. 10578- Anti Drug user and Drunk Driving Act of 2013
_____ I. R.A. 10687 - Children’s Safety on Motorcycle Act of 2015
_____ J. R.A. 10934 - Anti-Distracted Driving Act
_____ K. R.A. 10976 - Road Speed Limiter Act of 2016
_____ L. R.A. 112233 - Youngster Safety in Motor Vehicle’s Act
_____ M. R.A. 11287 - Motorbike Crime Deterrence Act
● Create check boxes for the lettered items in the MANEUVERING SITE area
MANEUVERING SITE: (√)

_____ A. At least fourteen (14) meters in length and in width
_____ B. In situation the selected steering site is public possessions, it must
have a printed document from the local administration unit concerned
● Create check boxes for the lettered items in the MOTOR VEHICLES area:
MOTOR VEHICLES: (√)
*For Vehicle Category B, B1, B2

_____ A. At least two (2) light 4-wheeled motor vehicles (with manual and
automatic transmissions)
_____ B. Equipped with front and rear-view dashboard recording camera
_____ C. Altered to include a detached brake device for the mentor
_____ D. Markings “CAUTION – STUDENT-DRIVER” in white capital letters at
least eight (8) inches in height with red background, and readable from
the back of the motor vehicle
NEUSTCICT 2020
Page 34 of 152
*For Motorcycle
_____ A. At least two (2) motorcycles (manual and automatic)
_____ B. Helmet and safety gears
_____ C. “CAUTION – STUDENT-DRIVER” imprinted in the vest
● Then Finally Create Labels and textboxes for REMARKS and Inspected by
REMARKS:
____________________________________________
____________________________________________
____________________________________________
Inspected by:
____________________________________________
LESSON 6: Ionic Radio Button
Ionic Radio buttons are webpage control elements which allows the user to
choose only one options? The radio button makes it distinct from a checkbox, which
allows more than one (or no) item to be selected and for the unselected state to be
restored.
(Reference : https://ionicframework.com/docs/api/radio and
https://ionicframework.com/docs/api/radio-group )
How to Add Radio Buttons in your App?

When creating a radio button, it must be two or more than two, the technique
is to create a catalog or list and then convert it into radio button.
The following is an example of radio buttons in old ionic convention:
Laptop
<i class = "radio-icon ion-checkmark"></i>
</label>
<label class = "item item-radio">

<input type = "radio" name = "group1" />
Tablet
</label>
NEUSTCICT 2020
Page 35 of 152
<label class = "item item-radio">

<input type = "radio" name = "group1" />
Desktop
</label>
</div>
Here is the output of the program:
The Example below is a radio group written in Ionic structure:
<ion-toolbar>
<ion-title>
NEUST CICT Computer services
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-label>Internet Cafe </ion-label>
<ion-list>
<ion-radio-group value="biff">
<ion-list-header>
<ion-label> Choose a time duration </ion-label>
</ion-list-header>
<ion-item>
<ion-label>Internet</ion-label>
<ion-radio slot="start" value="internet"></ion-radio>
</ion-item>
<ion-item>
<ion-label> Gaming </ion-label>
NEUSTCICT 2020
Page 36 of 152
<ion-radio slot="start" value="games"></ion-radio>

</ion-item>
<ion-item>
<ion-label>MS Office and printing</ion-label>
<ion-radio slot="start" value="office"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</div>
</ion-content>
The following is the output:
EXERCISE
Create a multiple-choice exam using ion-radio-groups, follow the requirements

below:
In Question #1 display the following text:
Which of the following birds lays the world’s smallest egg?

Below this Question convert the following items into ion-radio-groups
o Gecko
o Pugo
o Humming Bird
o Gulls
NEUSTCICT 2020
Page 37 of 152
Which living creature below has the world's largest egg?

o T-rex
o Hummingbird
o ApatoSaurus
o Ostrich
Which is the following countries is the world’s largest in egg-production?

o China
o Philippines
o India
o Singapore
Which of the following is the most important part of an egg?

o Shell membrane
o White
o feathers
o Yolk
What is the term in science that describes egg laying mammals?

o Herbivorous
o Carnivorous
o Oviparous
o Omnivarous
What is the branch in science that studies bird eggs?

NEUSTCICT 2020
Page 38 of 152
o Zoology
o Schoology
o Monology
o Oology
Which of the following animals that behaves and moves like a camel?
o Mouse
o Snail
o Giraffe
o Elephant
What is the maturation period of a baby African elephant?

o 100 months
o 6 months
o 21 months
o 12 months
Which of the following birds does have eyes larger than its brain?
o Tarsier
o Maya
o Owl
o Eagle
Which animal use the eyes and look in any direction at the same time?
o Chameleon
o Monitor
o Snake
o Komodo
NEUSTCICT 2020
Page 39 of 152
NEUSTCICT 2020
Page 40 of 152
LESSON 7: Ionic Toggle
Ion - Toggle
There are times that clients must choose in 2 alternatives. The most ideal
approach to take care of this issue is with the utilization of switch. Switches can be
squeezed and swiped giving on and off qualities. They can likewise be changed
automatically by setting the checked property.
Using Ionic Toggle

To use the Toggle type <ion-toggle></ion-toggle> inside these tags a color
attribute can be applied, below is the application of toggle shown in the example
below:
<ion-toolbar>
<ion-title>
NEUST HRM Pearl and Halo halo shakes
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<p> Select your desired condiment for your drink </p>
<ion-label>nata de coco</ion-label>
<ion-toggle color="primary"></ion-toggle>
<p></p>
<ion-label>soy beans</ion-label>
<ion-toggle color="secondary"></ion-toggle>
<p></p>
<ion-label> Ube</ion-label>
<ion-toggle color="danger"></ion-toggle>
<p></p>
</div>
</ion-content>
Below is the output of the code in the previous page
NEUSTCICT 2020
Page 41 of 152
You can apply CSS in toggle by applying <Style></Style>, writing the ion-
toggle inside together with your desired CSS commands:
<ion-toolbar>
<ion-title>
NEUST HRM Halo Halo Station..
</ion-title>
</ion-toolbar>
</ion-header>
<style>
ion-toggle {
--background: rgb(233, 218, 16);
--background-checked: #24bb68;
--handle-background: #24bb68;
--handle-background-checked:
width: 100px;
}
</style>
<div >
<ion-label>Kaong</ion-label>
<p></p>
<ion-label> Avocado bits</ion-label>
NEUSTCICT 2020
Page 42 of 152
<p></p>
</div>
</ion-content>
The following is the output of the code above
You can put your toggles into a list:
<ion-toolbar>
<ion-title>
NEUST HRM Hamburgers and Fries Inc..
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-label>Select items you wish to have in your happy meal</ion-label>
<ion-list>
<ion-item>
<ion-label>Extra ketchup</ion-label>
<ion-toggle [(ngModel)]="ketchup"></ion-toggle>
</ion-item>
NEUSTCICT 2020
Page 43 of 152
<ion-item>
<ion-label>Resized Drink</ion-label>
<ion-toggle [(ngModel)]="Drink"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Extra Large fries(sorry not available)</ion-label>
<ion-toggle [(ngModel)]="fries" disabled="true"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Vanilla Sundae</ion-label>
<ion-toggle [(ngModel)]="VanillaSundae"></ion-toggle>
</ion-item>
</ion-list>
</div>
</ion-content>
Below is the output of the code above:
EXERCISE
Make a structure for civil aeronautics authority of the Australasia follow the
rules and necessities underneath:
● Display the accompanying writings

Common avionics authority of the Philippines
Business air transport flight
NEUSTCICT 2020
Page 44 of 152
Course capability
A. Application is thusly made for the accompanying pilot course capability for
business air transport:
● Convert the accompanying into switch

Yearly course check
explicit activities
MPSDA activities
Administered line flying
Exceptional region (determine):
● Display the accompanying content

B. Record of AOP holder pre-check warning to CAAP security guidelines office:
● Convert the accompanying into input text

1. Date and time of notice
2. CAAP official informed
3. Date/time check planned
4. Area and check pilot

C. Aviator individual data:
1. Name (last, first, center)

2. Changeless location (road or po box number)
3. Phone and fax
4. City 5. State 6. Mail code 7. Nation

D. Air administrator demand:
NEUSTCICT 2020
Page 45 of 152
1. Ensure that that the pilot recorded in area c is prepared for a course qualifying
check:

2. Airplane (make, model)
3. Allocated position (pic or sic,)
4. Aviator permit number
5. Pilot base month (for line check}
6. Air administrator business name:
7. AOP certificate#:
8. Phone
9. Fax
10. Mark of organization official (executive of activities or boss pilot)
11. Date marked
12. Printed name and title of organization official

E. Check led by: (embed qualification, testament or assignment number):
1 CAAP-FIS
2 affirmed preparing
3 flight inspector
4 check pilot
NEUSTCICT 2020
Page 46 of 152
LESSON 8: Ionic List
Lists are used for displaying arranged information and can be join with other
HTML tags to create unique tabs or menus.
(Reference : https://ionicframework.com/docs/api/list)
Creating a List
In your HTML lessons whenever you create a list you use <UL> for unordered
list and <OL> for ordered list and inside these tags you put <LI> on each item list, in
ionic we can use class=list to list the items you can apply the traditional example below
in previous version of ionic:

<div class = "item">Bald</div>
<div class = "item">Semi Bald</div>
<div class = "item">Curly Hair</div>
</div>
The above code will produce the following screen:
Here is the modern Ionic version in Angular /javascript format:
<ion-toolbar>
<ion-title>
NEUST CMBT Beauty Salon Services
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-list>
<ion-item>
<ion-label>Barbers cut</ion-label>
</ion-item>
<ion-item>
<ion-label>Under cut</ion-label>
NEUSTCICT 2020
Page 47 of 152
</ion-item>
<ion-item>
<ion-label>Medium Haircut</ion-label>
</ion-item>
<ion-item>
<ion-label>Thick Hair</ion-label>
</ion-item>
<ion-item>
<ion-label>Bald</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
The following is the output of the code:
The Following is the Example with controls in Angular format:
<ion-toolbar>
<ion-title>
NEUST CMBT Beauty Salon Services
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-list>
<ion-item>
NEUSTCICT 2020
Page 48 of 152
<ion-label>Please Input your name</ion-label>

</ion-item>
<ion-item>
<ion-label>Do you want shampoo in your haircut</ion-label>
<ion-toggle slot="end"></ion-toggle>
</ion-item>
<ion-item>
<ion-radio-group>
<ion-item>
<ion-label> I want Massage</ion-label>
<ion-radio value="yes"></ion-radio>
</ion-item>
<p></p>
<ion-item>
<ion-label> No I dont Like a Massage</ion-label>
<ion-radio value="no"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-item>
<ion-item>
<ion-label>I want a Special Perfume in my haircut</ion-label>
<ion-checkbox slot="start"></ion-checkbox>
</ion-item>
</ion-list>
</div>
</ion-content>
The above code’s output is shown below:
NEUSTCICT 2020
Page 49 of 152
EXERCISE
Create the following restaurant menu using <ion-list> and <ion-item>, include
all the texts below but apply these <ion-list> and <ion-item> only to the bulleted list
shown below:
Manong Escoffier restaurant and hotel

MENU
Appetizers
● Cabiao Oysters - half dozen, mignonette and cocktail sauce
● Gapan Shrimp Cocktail - fennel grapefruits salad, cocktail with cognac sauce
● San Isidro Smoked Salmon with matching quail egg, Tinapa - lemon crème
fraîche, radishes, caper berries,
● Salmon caviar de Jaen
● Gabaldon Sea Scallops with pork belly, parsnip purée, tempura onions
● Kapitan Pepe Tuna Tartare - slivered almonds, mint, avocado marble, purée,
basil oil
● Sumacab de Foie Gras - celery root and pear purée, compressed pears port
● Aduas Reduction torn cardamom brioche
● Beef Carpaccio - smoked carrot, caviar, crispy shallots Soups
● Chanterelle de Sta Rosa Porcini Bisque - herbes de provence crème
● Tabuating Lobster Bisque - lemon crème fraîche
NEUSTCICT 2020
Page 50 of 152
Salads
● Traditional Caesar Salad - white anchovy, brioche
● Rosette Lettuces – citrus lemon, petit vegetables
● Pomegranate vinaigrette
● Classic San Leonardo Wedge - pancetta, tomato, red onions
● Burrata Salad - root vegetables, pickled mustard
Prime Dry Aged Steaks
● New York Strip - 14oz.
● Ribeye - 22oz.
● Delmonico - 14oz.
Classic Cuts
● Veal Chop
● Colorado Lamb Rack
● Steak Temperatures
● Rare: Cool Red Center Medium Well
● Medium Rare: Warm Red Center Well Done: Hot Center, No Pink
● Filet Mignon
Steak Add Ons Sauces
● Maine Lobster Tail Hollandaise
● Lump Crab Oscar Red Wine Sauce
● Mint Jus
● Chimichurri
Side Dishes
● Roasted Brussels Sprouts - neuski bacon, bourbon - maple glaze
● Roasted Heirloom Carrots - brown butter - dijon vinaigrette, toasted pine nuts
● Asparagus - hollandaise
● Creamed Spinach
● Field Mushrooms
● Potato Purée
● Au Gratin Potatoes
● Lobster Burger & Cheese - smoked gouda cheese sauce
NEUSTCICT 2020
Page 51 of 152
LESSON 9: Ionic Header
Ionic header bar is the item in ionic which is placed in top of the screen, it
may contain title, buttons, icons, pictures and logos.
(Reference : https://ionicframework.com/docs/api/header)
Adding the Header

To add header in your app you use <ion-header> </ion-header> container,
inside these <ion-header> </ion-header> are text and tags you wish to display as a
header the following tis the example:
<ion-toolbar>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
<style>
ion-toggle {
--handle-background-checked: rgb(233, 218, 16);
width: 100px;
}
</style>
<div >
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-label>Home About us Products Services</ion-label>
</ion-toolbar>
<ion-toolbar>
<ion-label>You Choose Saging Con Yelo</ion-label>
NEUSTCICT 2020
Page 52 of 152
</ion-toolbar>
</ion-header>


<ion-header class="ion-no-border">
<ion-toolbar>
<ion-label>You are now in Condiments Section for Saging con yelo</ion-label>
</ion-toolbar>
</ion-header>
<p> Select your desired condiment for your dessert </p>

<ion-label>Mango bits</ion-label>
<ion-toggle color="primary"></ion-toggle>
<p></p>
<p></p>
<p></p>
</div>
</ion-content>
The Following is the output of the above program:
NEUSTCICT 2020
Page 53 of 152
EXERCISE
Apply the <ion-header> in the United States Declaration of Independence
shown below:
LESSON 10: Ionic Footer
Ionic footer is inserted at the base of the application screen. You can include
a logo or organization name, the name of the software engineer or creator, title or
other helpful data, for example, joins, copyright, addresses, telephone numbers, and
so forth. In HTML, the footer is a segmenting component, and whenever utilized is
frequently utilized for copyright data or creator data.
(Reference: https://ionicframework.com/docs/api/footer)
Adding Footer
To add footer, use ion-footer command, if you wish to remove the border type
class="ion-no-border" inside the ion-footer command:
<ion-toolbar>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
NEUSTCICT 2020
Page 54 of 152
<style>
ion-toggle {
background-checked: #24bb68;
handle-background: #24bb68;
handle-background-checked: rgb(233, 218, 16);
width: 100px;
}
</style>
<p></p>
<p></p>
<p></p>
<ion-content></ion-content>


<ion-footer>
<ion-toolbar>
<ion-label>neust hrm group of companies</ion-label>
</ion-toolbar>
</ion-footer>


<ion-footer class="ion-no-border">
<ion-toolbar>
<ion-label>all rights reserved copyright 2020</ion-label>
</ion-toolbar>
</ion-footer>
</div>
</ion-content>
Below is the output of the code above:
NEUSTCICT 2020
Page 55 of 152
EXERCISE
Go to this website:
https://www.biblegateway.com/passage/?search=Psalms+91&version=KJV
or if you have a electronic Bible copy the whole test of Psalm 91 put it on your App
and then apply the </ion-footer> on the footnotes shown in the bottom of the bible
verse:
Footnotes:
Psalm 19:1 In Hebrew texts 19:1-14 is numbered 19:2-15.

Psalm 19:4 Septuagint, Jerome and Syriac; Hebrew measuring line
Public Domain Holy Bible, KJV Version No copyright information ©1973, 1978, 1984,
2011
LESSON 11: Ionic Content
Ionic – Content
Most portable application contains some essential components. Typically,
those components incorporate a header and a footer that will cover the top and the
base piece of the screen. The various components will be set between these two.
Ionic gives <ion-content> </ion-content> component that fills in as a compartment
that will wrap the various components that we need to make. This ion-content has
a few distinctive characteristics or attributes, however since this is a JavaScript or
Angular it run in most browsers.
The Ion Content segment gives a simple to utilize content space with some
helpful procedures to control the scrollable region. There should just be one
substance in individual view.
(Reference: https://ionicframework.com/docs/api/card-content)
The following is the ion content used in early versions:

<div class = "bar bar-header">
<h1 class = "title">PAYMENT</h1>
NEUSTCICT 2020
Page 56 of 152
</div>

What is the name of the customer?
<input type = "text" />
</label>
<p></p>
Type the Amount paid
<input type = "text" />
</label>
</div>
<div class = "bar bar-footer">

<p class = "important">All rights reserved copyright 2018 © NEUST HRM </p>
</div>
Output:
Below is the modern Ionic 5 version in Angular/Javascript format:
<ion-toolbar>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">CMBT Tindahan Case study</ion-title>
</ion-toolbar>
</ion-header>
<style>
NEUSTCICT 2020
Page 57 of 152
ion-toggle {
--handle-background-checked: rgb(233, 218, 16);
width: 100px;
}
</style>
<div >
<ion-content
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()"
>
[scrollEvents]="true"
<h1> NEUST HRM</h1>
<div slot="fixed">
<h1>About us</h1>
From these humble beginning to its present success, Halo Halo Station ha
s proven that is not a passing peak, 70% of our current stores have been occupying
the same leased space for more than three years. NEUST HRM Halo Halo Station r
efreshments can be found in shopping centers, public markets and street
side location.
The achievement of every NEUST HRM Halo Halo Station store is our spe
cialized administration team and enthusiastic employees dedicated to treat the
customer in priority and accomplishing quality in everything.
</div>
</ion-content>
</div>
</ion-content>
NEUSTCICT 2020
Page 58 of 152
EXERCISE
Apply the <ion-content> on the following Poem shown below and make the
<ion-content> scrollable, there are 2 poems one in English the other one is Spanish
so you will create 2 groups of <ion-content>
English version the " Last Farewell" and Spanish version which is the "Mi
último adiós" can be found on
https://en.wikipedia.org/
or
https://cabactulanariel.wordpress.com/2014/05/06/my-last-farewell-tagalog-spanish-
and-english/
NEUSTCICT 2020
Page 59 of 152
LESSON 12: Ionic Grid
Ionic Grid System

The Ionic Grid System (see https://ionicframework.com/docs/api/grid )contains
and arranges data into rows (horizontal arrangement)and columns(Vertical
arrangement).
<ion-toolbar>
<ion-title>
NEUST CICT Enrollment
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-grid>
<ion-row>
<ion-col>
Studno
</ion-col>
<ion-col>
Student Name
</ion-col>
<ion-col>
Section
</ion-col>
<ion-col>
age
</ion-col>
</ion-row>
<ion-row>
<ion-col>
201976752
</ion-col>
<ion-col>
Coco Martin
</ion-col>
<ion-col>
BSIT3A
</ion-col>
<ion-col>
25
</ion-col>
</ion-row>
</ion-grid>
</div>
NEUSTCICT 2020
Page 60 of 152
</ion-content>
The following is the output:
Here is another example extending one of the columns:

<ion-grid>
<ion-row>
<ion-col size="6">
Student number and Name
</ion-col>
<ion-col>
Section
</ion-col>
<ion-col>
Age
</ion-col>
</ion-row>
<ion-row>
<ion-col>
201976752
</ion-col>
<ion-col>
Coco Martin
</ion-col>
<ion-col>
BSIT3A
</ion-col>
<ion-col>
25
</ion-col>
</ion-row>
</ion-grid>
The output below shows the merged word “ Studentnumber and name”:
NEUSTCICT 2020
Page 61 of 152
The following examples adds another row that uses classes of "ion-align”:
<ion-toolbar>
<ion-title>
NEUST CICT Enrollment
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-grid>
<ion-row>
<ion-col size="6">
Student number and Name
</ion-col>
<ion-col>
Section
</ion-col>
<ion-col>
Address
</ion-col>
</ion-row>
<ion-row>
<ion-col>
201976752
</ion-col>
<ion-col>
Coco Martin
</ion-col>
<ion-col>
BSIT3A
</ion-col>
<ion-col>
Tondo Manila
</ion-col>
</ion-row>
NEUSTCICT 2020
Page 62 of 152
<ion-row>
<ion-col class="ion-align-self-start">
2009283736
</ion-col>
<ion-col class="ion-align-self-center">
KIM Chu
</ion-col>
<ion-col class="ion-align-self-end">
BSIT3B
</ion-col>
<ion-col>
Bagong Pagasa
<br>Mindanao Avenue
<br>Quezon city
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
EXERCISE
Apply the <ion-grid> and its elements in the table below:
FIRST YEAR
1st Semester
Subject Code Description Units
CC-100 Introduction to Computing 3
IT-NET01 Networking l,Fundamentals 3
GE 04 Mathematicsin the Modern World 3
GE 05 Purposive Communication 3
Kontekswalisadong Komunikasyon sa
FIL l Filipino 3
GE07 Science, Technology and Society 3
PE l Advanced Gymnastics 2
NSTP ll National Service Training Program l 3
CC-101 Computer Programming I, Fundamentals 3
NEUSTCICT 2020
Page 63 of 152
2nd Semester
CC-102 Computer Programming 2, Fundamentals 3
IT-NET02 Networking 2, Advanced 3
IT-WS01 Web System And Technologies l 3
GE 01 Understanding the Self 3
Mga Babasahin HIngil sa Kasaysayan ng
GE 02 Pilipinas 3
FIL 2 Filipino sa Iba’t Ibang Disiplina (FILDIS) 3
Rhythmic Activities Folkdance/ Social
PE 2 Dances 2
NSTP 12 National Service Training Program 2 2
SECOND
YEAR
1st Semester
CC-103 Data Structure and Algorithm 3
IT-PF 01 Object-Oriented Programming 1 3
IT-WS 02 Discrete Mathematics 3
GE 06 Art Appreciation 3
FIL 3 Dalumat Ng/Sa Filipino (Dalumat FIL) 3
PE 4 Advance Individual & Dual Sports 2
IT-WS 02 Web Systems and Technologies 2 3
GE 08 Ethics 3
2nd Semester
CC-104 Information Management 3
Application Development and Emerging
CC-105 Technologies 3
IT-PF 02 Object-Oriented Programming 2 3
IT-MS 02 Quantitative Methods 3
GE 03 The Contemporary World 3
GE 09 The Life and Works of Rizal 3
PE 4 Advance Team Sports 2
LESSON 13: Ionic –Tabs
Ionic tabs are icons that are used in directing users in their desired pages. The
style is depending on the mobile platform. In android machines, tabs will be positioned
at the top of the screen, while on IOS will be at the lowest part of the screen.
(Reference: https://ionicframework.com/docs/api/tabs)
We use the command <ion-tabs> to do these, the succeeding example of ionic
tabs this time the sub element of <ion-tabs> is <ion-tab-bar>:
<ion-toolbar>
NEUSTCICT 2020
Page 64 of 152
<ion-title>
NEUST CICT Project Cumulus
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-tabs>


<ion-tab-bar slot="bottom">
<ion-tab-button tab="Customer">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="Contact Customer">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="Setup">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</div>
</ion-content>
The following is the output with the icons below:
NEUSTCICT 2020
Page 65 of 152
Here is another example using buttons with labels:
<ion-toolbar>
<ion-title>
NEUST CICT Project Cumulus
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-tabs>

<ion-tab-button tab="Events">
<ion-icon name="calendar"></ion-icon>
<ion-label>Events in NEUST</ion-label>
</ion-tab-button>
<ion-tab-button tab="People">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Invited People</ion-label>
</ion-tab-button>
<ion-tab-button tab="events location">

<ion-icon name="map"></ion-icon>
<ion-label>Location of grand event</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</div>
</ion-content>
Here is the output:
NEUSTCICT 2020
Page 66 of 152
EXERCISE
Create an App with 4 tab buttons on it select any icons for the tabbed buttons,
the name of the icons are listed below, remember select any 4 of your desired icons
for your tabbed buttons.
add at cafe code

add-circle attach calculator code-download
alarm backspace calendar code-working
albums barcode call logo-codepen
alert baseball camera cog
american-football basket car color-fill
analytics basketball card color-filter
battery-
logo-android cart color-palette
charging
logo-angular battery-dead cash color-wand
aperture battery-full chatboxes compass
logo-apple beaker chatbubbles construct
apps beer checkbox contact
appstore bicycle checkbox-outline contacts
archive logo-bitcoin checkmark contract
arrow-back bluetooth checkmark-circle contrast
checkmark-circle-
arrow-down boat copy
outline
arrow-dropdown body logo-chrome create
arrow-dropdown-circle bonfire clipboard crop
arrow-dropleft book clock logo-css3
arrow-dropleft-circle bookmark close cube
arrow-dropright bookmarks close-circle cut
logo-designer
arrow-dropright-circle bowtie closed-captioning
news
arrow-dropup briefcase cloud desktop
arrow-dropup-circle browsers cloud-circle disc
arrow-forward brush cloud-done document
arrow-round-back logo-buffer cloud-download done-all
arrow-round-down bug cloud-outline download
arrow-round-forward build cloud-upload logo-dribbble
arrow-round-up bulb cloudy logo-dropbox
arrow-up bus cloudy-night
NEUSTCICT 2020
Page 67 of 152
easel git-commit information-circle medkit

egg git-compare logo-instagram megaphone
logo-euro git-merge ionic menu
exit git-network ionitron mic
expand git-pull-request logo-javascript mic-off
eye logo-github jet microphone
eye-off glasses key moon
logo-facebook globe keypad more
fastforward logo-google laptop move
logo-
female leaf musical-note
googleplus
filing grid link musical-notes
logo-
film logo-linkedin navigate
hackernews
finger-print hammer list no-smoking
flag hand list-box logo-nodejs
flame happy locate notifications
flash headset lock notifications-off
notifications-
flask heart log-in
outline
flower heart-outline log-out nuclear
folder help magnet nutrition
folder-open help-circle mail logo-octocat
football home mail-open open
logo-foursquare logo-html5 male options
logo-freebsd-devil ice-cream man outlet
funnel image map paper
game-controller-a images logo-markdown paper-plane
game-controller-b infinite medal partly-sunny
git-branch information medical pause
paw sad logo-twitch

people logo-sass logo-twitter
person school umbrella
person-add search undo
phone-landscape send unlock
phone-portrait settings logo-usd
photos share videocam
pie share-alt logo-vimeo
pin shirt volume-down
pint shuffle volume-mute
logo-pinterest skip-backward volume-off
pizza skip-forward volume-up
plane logo-skype walk
planet logo-snapchat warning
play snow watch
logo-playstation speedometer water
podium square logo-whatsapp
power square-outline wifi
NEUSTCICT 2020
Page 68 of 152
pricetag star logo-windows

pricetags star-half wine
print star-outline woman
pulse stats logo-wordpress
logo-python logo-steam logo-xbox
qr-scanner stopwatch logo-yahoo
quote subway logo-yen
radio sunny logo-youtube
radio-button-off swap
radio-button-on switch
rainy sync
tablet-
recording
landscape
logo-reddit tablet-portrait
redo tennisball
refresh text
refresh-circle thermometer
remove thumbs-down
remove-circle thumbs-up
reorder thunderstorm
repeat time
resize timer
restaurant train
return-left transgender
return-right trash
reverse-camera trending-down
rewind trending-up
ribbon trophy
rose logo-tumblr
logo-rss tux
LESSON 14: Ionic – Select

Ionic Select creates a menu with select options for the user to select a choice.
At the point when a client taps the select, a dialog window shows up and the entirety
of the choices expands permitting the client to effortlessly choose the data list. A
command <ion-select > is the parent command and should be used with child <ion-
select-option> elements. (Reference: https://ionicframework.com/docs/api/select )
The following is the example Single Selection in Ion select:
<ion-toolbar>
<ion-title>
NEUST CICT Student computer rental services
</ion-title>
</ion-toolbar>
</ion-header>
NEUSTCICT 2020
Page 69 of 152
<div >
<ion-list>
<ion-list-header>
<ion-label>
Single Selection
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Type of Computer(Choose only one) </ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="f">Desktop</ion-select-option>
<ion-select-option value="m">Laptop</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Type of Mobile Device (Choose only one)</ion-label>
<ion-select value="tablet" okText="Okay" cancelText="Cancel">
<ion-select-option value="Android">Android Phone</ion-select-option>
<ion-select-option value="tablet">Tablet</ion-select-option>
<ion-select-option value="blackberry">Black berry phone</ion-select-option>
<ion-select-option value="IOS">Iphone</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-content>
The following are the outputs and interactions:
NEUSTCICT 2020
Page 70 of 152
The following is the example Multiple Selection in Ion select:

<ion-toolbar>
<ion-title>
NEUST CICT Internet Cafe<br> Pizza Toppings and condiments section
</ion-title>
</ion-toolbar>
</ion-header>
<ion-list>
<ion-list-header>
<ion-label>
You can have multiple selection on the ingredients you like
</ion-label>
</ion-list-header>
<ion-item>
<ion-label> Toppings</ion-label>
<ion-select multiple="true" cancelText="No Need" okText="Okay go">
<ion-select-option value="sausage">Sausage</ion-select-option>
<ion-select-option value="bacon">Bacon</ion-select-option>
<ion-select-option value="mushrooms">Mushrooms</ion-select-option>
<ion-select-option value="olives">Black Olives</ion-select-option>
<ion-select-option value="extracheese">Extra Cheese</ion-select-option>
<ion-select-option value="peppers">Green Peppers</ion-select-option>
<ion-select-option value="Anchovy">Anchovy</ion-select-option>
<ion-select-option value="onions">Onions</ion-select-option>
<ion-select-option value="pepperoni">Pepperoni</ion-select-option>
<ion-select-option value= >Salmon</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label> Condiments</ion-label>
<ion-select multiple="true" [value]="['Ketchup', 'HotSauce']">
<ion-select-option value="Ketchup">UFC Tomato Ketchup</ion-select-option>
<ion-select-option value="Curry">Curry Mustard</ion-select-option>
NEUSTCICT 2020
Page 71 of 152
<ion-select-option value="HotSauce">Chili Mexican Sauce</ion-select-option>

<ion-select-option value="Balsalmic">Italian Vinegar </ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-content>
The following are the outputs and interactions:
The following is the example of Ion select that uses the attribute
interface="action-sheet":
NEUSTCICT 2020
Page 72 of 152
<ion-toolbar>
<ion-title>
NEUST CICT Internet Cafe
<br> Pizza Toppings and condiments section
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-list>
<ion-item>
<ion-label>Select the size of your Pizza</ion-label>
<ion-select [interfaceOptions]="customActionSheetOptions" interface="action-
sheet" placeholder="Choose One">
<ion-select-option value="small">Slice</ion-select-option>
<ion-select-option value="normal">Medium</ion-select-option>
<ion-select-option value="Large">Large</ion-select-option>
<ion-select-option value="Giant">Giant</ion-select-option>
<ion-select-option value="Fiesta">Fiesta Party</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-content>
Here is the output of the program and the interactions:
EXERCISE
Create an Ionic App implementing the “Car Sales Program” using the <ion-
select>, use option boxes (radio buttons) and checkboxes(if required) inside the <ion-
NEUSTCICT 2020
Page 73 of 152
select>, the option boxes (radio buttons) and check boxes are grouped and they are
represented by a bulleted list shown below:
BOSS SCHUMACHER’S CABANATUAN LUXURY CAR SALES
BUILD YOUR OWN LAND ROVER

SIMPLY CHOOSE A MODEL TO START CREATING A LAND ROVER
CLICK HERE TO CHOOSE THE MODEL
o RANGE ROVER RUNNER
o RANGE ROVER SPORT
o NEW DISCOVERY SPORT
CLICK HERE TO SELECT THE COLOR
o Fuji White
o Indus Silver
o Pangea Green
o Gondwana Stone
o Eiger Grey
o Tasman Blue
o Santorini Black
CLICK HERE TO SELECT THE ENGINE
o D200 AWD AUTOMATIC
o D240 AWD AUTOMATIC
o P300 AWD AUTOMATIC
o P400 AWD AUTOMATIC
CLICK HERE TO SELECT THE WHEEL TYPE
o 22" Style 5098, 5 spoke, Gloss Sparkle Silver
o 22" Style 5098, 5 spoke, Gloss Black
o 20" Style 5095, 5 split-spoke, Gloss Dark Grey with contrast Diamond
finish
o 20" Style 5098, 5 spoke, Satin Dark Grey
o 20" Style 6011, 6 spoke, Gloss Black
o 19" full size spare wheel
o 18" Style 5093, Gloss White, Steel
SELECT AND CHECK THE ACCESSORY PACKS YOU DESIRED
✔ Front Classic Mudflaps

✔ Rear Classic Mudflaps
✔ Matte Black Bonnet Decal
✔ Spare Wheel Cover
✔ Wheel Arch Protection
✔ Raised Air Intake
✔ Expedition Roof Rack
NEUSTCICT 2020
Page 74 of 152
✔ Exterior Side-Mounted Gear Carrier
LESSON 15: Ionic – Range
Ion range is a command used to display and alter the level of any figures you
want to represent. It will represent the actual value in relation to minimum and
maximum values.
(Reference: https://ionicframework.com/docs/api/range)
The Following is the example of ranges in different types:
<ion-toolbar>
<ion-title>
NEUST Hotel Sumacab
<br> Remote Appliance Control adjustment system
</ion-title>
</ion-toolbar>
</ion-header>
<div >
<ion-list>
<ion-item>
<ion-label slot="start">Room Light</ion-label>
<ion-range color="danger" pin="true"></ion-range>
</ion-item>
<ion-item>
<ion-label > Aircondition</ion-label>
<ion-range min="-16" max="25" color="secondary">
<ion-label slot="start">16</ion-label>
<ion-label slot="end">25</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-label > StudyRoom</ion-label>
<ion-range min="10" max="100" step="2">
<ion-icon size="small" slot="start" name="light"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
NEUSTCICT 2020
Page 75 of 152
<ion-item>
<ion-label > TVRoomLight</ion-label> <p></p>
</ion-item>
<ion-item>
<ion-
range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-
range>
</ion-item>
<ion-item>
<ion-label > Light in Dining Room</ion-label>
</ion-item>
<ion-item>
<ion-
range min="50" max="1000" step="10 " snaps="true" ticks="false" color="secondary"
></ion-range>
</ion-item>
<ion-item>
<ion-label > KitchenLight</ion-label>
<ion-range dualKnobs="true" min="11" max="52" step="2" snaps="true"></ion-
range>
</ion-item>
</ion-list>
</div>
</ion-content>
The Following is the output:
NEUSTCICT 2020
Page 76 of 152
EXERCISE
Create an Ionic app implementing “Smart House Appliances Remote Control

using the <ion-range> the following are the ranges you are going to create and its
requirements:
STA.ROSA Electronics SMART APPLIANCE CONTROL APP

#5 Brgy Rajal Sta Rosa Nueva Ecija/9405566 /947809871
[email protected]
Cold Room Temperature ( set the maximum temperature into 25 and minimum
temperature to 0)
Shower Temperature( set the maximum temperature into 100 and minimum
temperature to 0)
NEUSTCICT 2020
Page 77 of 152
Refrigerator Freezer Temperature( maximum temperature into 20 and minimum

temperature to 0)
Oven Heat Temp. ( set the maximum temperature into 200 and minimum
temperature to 0)
Surround Sound Noise Level ( set the maximum Decibels into 225 and minimum
Decibels to 1)
LESSON 16: Basic form functionalities
This subject module initiates the students to the fundamentals on how do we

make a mobile app that can interact to the users using Angular as a method of
programming/instruction, this first App we will do is displaying information in the
textbox only when a button is clicked, this module familiarizes you on how to declare
variables in Angular (using the TypeScript of VS Code as our IDE) and the datatypes
such as string and number.
NEUSTCICT 2020
Page 78 of 152
If you are confused and cannot read the code above here is the code in text version:
<ion-toolbar>
<ion-title>
MY FIRST NEUST APP
</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title size="large">my first NEUST app</ion-title>
</ion-toolbar>
</ion-header>
<ion-labeL>University name </ion-labeL>

<ion-input type="text"></ion-input>
<ion-button >Show</ion-button>
</ion-content>
Here is what it look like when you open your ionic lab, the one in your left is the
interface will appear when you r app runs in IOS (iPhone) and the one in your right is
the interface that will appear in android phones:
Unfortunately, when you click the button “Show” nothing will happen, so in our
next section we will modify our home.page.html .
We will put object name that is the [(ngModel)]" in our <ion-input type="text">
and we will put an event click in our <ion-button> that will call a function
ShowUniversity()" and we will go to the TS(Typescript of our home.page and type our
instructions for our function ShowUniversity.
NEUSTCICT 2020
Page 79 of 152
Again Open home.page.html and then modify the <ion-input type="text"> and
<ion-button> as shown in the underlined code below (Don’t forget to save your code
every time you are finished):
<ion-toolbar>
<ion-title>
MY FIRST NEUST APP
</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
</ion-toolbar>
</ion-header>

<ion-input type="text" [(ngModel)]="TxtUniversity"></ion-input>
<ion-button (click)="ShowUniversity()" >Show</ion-button>
</ion-content>
Underneath is the code in text version:
NEUSTCICT 2020
Page 80 of 152
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
TxtUniversity: string;
constructor() {}
ShowUniversity()
{
this.TxtUniversity="Nueva Ecija University of Science and Technology";
}
Explanation:
*This is how we declare variables in angular, and this is how we represent our object
(in this case textbox named “TxtUniversity” that will contain our university name which
are alphabets or strings) into our code.
ShowUniversity()
{
}
*This is our function which contains the instruction to display our university name in
our textbox named TxtUniversity
Now go to your Ionic lab and click the “show” button, you will see the button
“show” responded into click and then the click calls the function ShowUniversity() and
this function’s instruction to display the university name in our textbox is executed:
NEUSTCICT 2020
Page 81 of 152
Now we will put a Clear button in our App, when this button is clicked our
textbox will become blank.
Open and modify our home.page.html and add the highlighted code below:
<ion-toolbar>
<ion-title>
MY FIRST NEUST APP
</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
</ion-toolbar>
</ion-header>

<ion-button (click)="ClearUniversity()" >Clear</ion-button>
</ion-content>
Go to your Ionic Lab and check if the clear button appears:
NEUSTCICT 2020
Page 82 of 152
Now go to our TS(typescript) File which is the home.page.ts and add the
highlighted code below:
@Component({
})
constructor() {}
ShowUniversity()
{
}
ClearUniversity()
{
this.TxtUniversity=" ";
}
Now go to your Ionic lab and click the “clear” button, you will see the button
“clear” responded into click and then the click calls the function ClearUniversity() and
this function’s instruction to clear the university name in our textbox is executed:
NEUSTCICT 2020
Page 83 of 152
The Next thing we should do is to add additional labels and textboxes and a
single button to display the values and another button to clear the values.
Open and modify our home.page.html and add the highlighted code below:
<ion-toolbar>
<ion-title>
MY FIRST NEUST APP
</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar>
</ion-toolbar>
</ion-header>

<ion-button (click)="ClearUniversity()" >Clear</ion-button>
<div>
<ion-labeL>Date Founded </ion-labeL>
<ion-input type="text" [(ngModel)]="TxtDatefounded"></ion-input>
<ion-labeL>Number of Students enrolled </ion-labeL>
<ion-input type="text" [(ngModel)]="TxtNumberOfStudents"></ion-input>
<ion-button (click)="ShowDateFoundAndStudents()" >Show</ion-button>

<ion-button (click)="ClearDateFoundAndStudents()" >Clear</ion-button>
</div>
NEUSTCICT 2020
Page 84 of 152
</ion-content>
Save your HTML code then go to Ionic Lab to see the results:
Now Let us put actions in our Show and Clear buttons, open the home.page.ts
and add the highlighted code below:
import { Component } from '@angular/core';
import { formatDate } from '@angular/common';
@Component({
})
TxtDatefounded:string;
TxtNumberOfStudents:Number;
constructor() {}
ShowUniversity()
{
}
ClearUniversity()
{
this.TxtUniversity=" ";
}
ShowDateFoundAndStudents(){
this.TxtDatefounded=formatDate('06-01-1908', 'yyyy', 'en-US');
this.TxtNumberOfStudents=4500;
}
ClearDateFoundAndStudents(){
NEUSTCICT 2020
Page 85 of 152
this.TxtDatefounded="";
this.TxtNumberOfStudents=0;
}
}
Save your code then open the Ionic Lab, Click the buttons and you will see the
Date Founded and Number of Students are displayed:
EXERCISE
Create an App that will display your, Lastname, First Name, Middle Initial,
Address, Telephone Number, Age, Civil Status and Email address. All of the said data
will only display when a “Show my info” button is clicked. All the data will clear when
the “Clear all” button is clicked.
LESSON 17: Performing Calculations
This Module familiarizes you with the stray pieces on the most capable
technique to make an application that can perform Mathematical functions, you will
also learn the Number function() and the Javascript function called Math.pow() which
is used in exponents, you will also learn how to display variables in HTML using the
{{}} and how to translate real life formulas into a equation that the scripts will
understand
NEUSTCICT 2020
Page 86 of 152
<ion-toolbar>
<ion-title>
My test Calculator
</ion-title> Delete these Items
</ion-toolbar>
</ion-header>
<ion-toolbar>
<ion-title size="large"> My test Calculator </ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<ion-label>Enter your 1st number</ion-label>
<ion-input type="text" [(ngModel)]="FirstNumber"></ion-input>
<ion-label>Enter your 2nd number</ion-label>

<ion-input type="text" [(ngModel)]="SecondNumber"></ion-input>
<ion-label>Enter your 3rd number</ion-label>

<ion-input type="text" [(ngModel)]="ThirdNumber"></ion-input>
<ion-label>Answer</ion-label>
<ion-input type="text" [(ngModel)]="Ans"></ion-input>
<ion-label >The sum is {{Ans}} </ion-label>

<p></p>
<ion-button (click)="MySum()" >COMPUTE</ion-button>
<ion-button (click)="Reset()"> RESET </ion-button>
</div>
</ion-content>
Here is what it look like when you open your ionic lab:
NEUSTCICT 2020
Page 87 of 152
Now go to our TS(typescript) File which is the home.page.ts and then modify
and type as shown in the code below (the code in highlighted by boxes are the ones
you are going to type):

@Component({
})
FirstNumber:Number;
SecondNumber:Number;
ThirdNumber:Number;
Ans:Number;
constructor() {}
MySum()
{
this.Ans=(Number(this.FirstNumber)+Number(this.SecondNumber)+Number(this.ThirdNumb
er));
}
Reset(){
this.FirstNumber=null;
this.SecondNumber=null;
this.ThirdNumber=null;
this.Ans=null;
}
Now to see the results go to your browser that displays your Ionic lab and then
test your App, type any numbers you like in the inputs and then click compute, you will
see the answer appears in the last textbox and to the label
NEUSTCICT 2020
Page 88 of 152
Additional Examples
Create a New App that will compute the acceleration and the centripetal
acceleration, below is the formula of acceleration:
a= vf−vi
tf−ti
In this formula, vf is the final velocity while is the vi initial velocity. Tf represents
the final time and Ti represents the initial time.
In the computer programming we write this formula equation shown below:

a= ( vf−vi ) / ( tf−ti )
Shown below is the equation of centripetal acceleration:

Ac = v2
R
In this formula Ac is centripetal acceleration, v is the velocity and r is radius. In

the computer programming we write this formula equation shown below:
Ac = Math.pow(v,2) / r
The v2 is replaced by a Javascript built in function Math.pow() to perform exponents

The Following is our objective layout (must appear in Ionic Lab):
NEUSTCICT 2020
Page 89 of 152
As you see in our acceleration program a= ( vf−vi ) / ( tf−ti ) our inputs are
vf, vi, tf and ti, our output is “a” (or Acceleration)
In the computation below Acceleration is the centripetal acceleration Ac = v2/r

which has inputs of “V” and “r” and our ouput is the “AC” or Acceleration centripetal
However to do what you see in above you must open your home.page.html
then modify the HTML code as shown below:
<ion-toolbar>
<ion-title>
My test Calculator
</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<p></p>
<p> ACCELERATION CALCULATOR </p>
<ion-label>Enter the value of VF </ion-label>
<ion-input type="text" [(ngModel)]="vf"></ion-input>
<ion-label>Enter the value of Vi </ion-label>

<ion-input type="text" [(ngModel)]="vi"></ion-input>
<ion-label>Enter the value of TF </ion-label>

<ion-input type="text" [(ngModel)]="tf"></ion-input>
<ion-label>Enter the value of Ti </ion-label>

<ion-input type="text" [(ngModel)]="ti"></ion-input>
<ion-label>the result of Acceleration is </ion-label>

<ion-input type="text" [(ngModel)]="a"></ion-input>
<p>CENTRIPETAL ACCELERATION / r</p>

<ion-label>Enter the value of v </ion-label>
<ion-input type="text" [(ngModel)]="v"></ion-input>
<ion-label>Enter the value of r </ion-label>
NEUSTCICT 2020
Page 90 of 152
<ion-input type="text" [(ngModel)]="r"></ion-input>
<ion-label>the answer in Acceleration centripetal is </ion-label>

<ion-input type="text" [(ngModel)]="AC"></ion-input>
<ion-button (click)="Compute()" >COMPUTE</ion-button>

<ion-button (click)="Reset()"> RESET </ion-button>
</div>
</ion-content>
Below is the Typescript our main program (yourhome.page.ts) of our App

Shown In A Rectangle:
-
@Component({
})
vf:Number;
vi:Number;
tf:Number;
ti:Number;
a:Number;
v:Number;
r:Number;
AC:Number;
constructor() {}
Compute()
{
////Formula of your acceleration a= ( vf−vi ) / ( tf−ti )
this.a= ( Number(this.vf) - Number(this.vi) ) / ( Number(this.tf)-Number(this.ti) );
///Formula of Centripetal Acceleration Ac = Math.pow(v,2) / r
this.AC = Math.pow( Number(this.v) ,2) / Number(this.r);
Reset(){
this.vf=null;
this.vi=null;
this.tf=null;
this.ti=null;
this.a=null;
this.v=null;
this.r=null;
this.AC=null;
NEUSTCICT 2020
Page 91 of 152
Save all your work both HTML and your Typescript then go to Ionic Lab and
test your App similar to the illustration below:
EXERCISE
Create an App that will perform the Centimeter conversion program, the
following are the formulas :
CentimetertTODecimeter = Centimeter * 0.1

CentimetertTOFeet = Centimeter * 0.0328084
CentimetertTOinches = Centimeter * 0.3937008
CentimetertTOkilometers = Centimeter * 0.00001
CentimetertTOmeters = Centimeter *0.01
CentimetertTOmiles = Centimeter * 0.000006213712
CentimetertTOmm = Centimeter * 10
CentimetertTOnauticalMiles = Centimeter * 0.000005399568
CentimetertTOyards = Centimeter * 0.01093613
NEUSTCICT 2020
Page 92 of 152
NEUSTCICT 2020
Page 93 of 152
LESSON 18: If and Switch
This Module discusses to you the nuts and bolts on the most proficient method
to make an application that can perform IF Else If and Switch which most of you
already know during your previous semesters in the subjects of introduction to
programming and Webpage development subjects, this module is a review of those
past subjects combining the elements of Ionic platform.
<ion-toolbar>
<ion-title>
NEUST Grades
</ion-title>
</ion-toolbar>
<meta name="viewport" content="width=device-width">
</ion-header>
<div tappable (ionChange)="lookGrades" >

<ion-label>Type your Grade below</ion-label>
<ion-input type="text" [(ngModel)]="txtgrade" (ionChange)="lookGrades()"></ion-input>
<ion-button tappable (click)="lookGrades()">Check </ion-button>
<p> <ion-input type="text" [(ngModel)]="remarks1"></ion-input> </p>

<p> <ion-input type="text" [(ngModel)]="remarks2"> </ion-input> </p>
</div>
</ion-content>
Here is what it looks like when you open your ionic lab:
NEUSTCICT 2020
Page 94 of 152
Now go to our TS(typescript)File which is the home.page.ts and then modify

and types as shown in the code below(the code highlighted by red boxes are the ones
@Component({
})
txtgrade:Number;
remarks1:String;
remarks2:String;
constructor() {}
lookGrades(){
if(Number(this.txtgrade)<=74){
this.remarks1="Your grade means Failed";
this.remarks2=" Sorry ";
}
else{
this.remarks1="Your grade means you are Passed";
this.remarks2=" Congratulations ";
}
}
Here Is what will happen when you type numbers in the grade section.
NOTICE: Grade remarks appear below even though you did not click the
button.
NEUSTCICT 2020
Page 95 of 152
Applying the If Elseif and the double ampersand 🡪&&
To demonstrate this we will create a Login form to check if the username and
password,
Modify your home.page.html (or create a new Ion project) and type the
following code:
<ion-toolbar>
<ion-title>
NEUST Grades
</ion-title>
</ion-toolbar>
</ion-header>
<div tappable (ionChange)="lookGrades" >

<ion-label>Username</ion-label>
<ion-input type="text" [(ngModel)]="txtusername" (ionChange)="lookGrades()"></ion-
input>
<ion-label> Password</ion-label>
<ion-
input type="password" [(ngModel)]="txtpassword" (ionChange)="lookGrades()"></ion-input>
<ion-button tappable (click)="lookGrades()">LOGIN </ion-button>

<p> <ion-input type="text" [(ngModel)]="remarks2"> </ion-input> </p>
</div>
</ion-content>
NEUSTCICT 2020
Page 96 of 152
Here is what it looks like when you open your ionic lab:
Now go to our TS(typescript)File which is the home.page.ts and then modify

and types as shown in the code below(the code highlighted by red boxes are the ones
@Component({
})
txtusername:String;
txtpassword:String;
remarks1:String;
remarks2:String;
constructor() {}
lookGrades(){
if ( (this.txtusername=="pedro") && (this.txtpassword=="penduko") )
{
this.remarks1="USer name and password is correct";
this.remarks2=" WELCOME ";
}
else if ( (this.txtusername=="pedro") )
{
this.remarks1="USer name correct and password is NOT corect";
this.remarks2=" ACCESS Denied ";
}
else if ( (this.txtpassword=="penduko") )
{
this.remarks1="USer name NOT correct and password is corect";
}
NEUSTCICT 2020
Page 97 of 152
else
{
this.remarks1="Login incorrect";
}
}
Here Is what will happen when you type user name either existing or not and
password either wrong or correct this App will show its appropriate message below
the buttons:
The Switch Case
Switch case is utilized to perform various activities relying upon the conditions.
Just like in your early programming lessons the switch expression is the reference and
read once. The value of the variable outside is compared with the values of reference
(which is the case:). If there is an equal value, the related block of code is executed.
If there is no equal or values cannot be found, then the commands below the default
code block is executed.
Modify your home.page.html (or create a new Ion project) and type the
following code:
<ion-toolbar>
<ion-title>
NEUST Grades
</ion-title>
</ion-toolbar>

</ion-header>
<ion-label> Which of the following animals is the tallest?</ion-label>
NEUSTCICT 2020
Page 98 of 152
<ion-list>
<ion-radio-
group Name="Question1" [(ngModel)]="Question1" (ionChange)="SeeAnswer1()" >
<ion-item>
<ion-label> Elephant</ion-label>
<ion-radio Name="Question1" value="a" >
</ion-radio>
</ion-item>
<ion-item>
<ion-label> Hipopotamus </ion-label>
<ion-radio Name="Question1" value="b">
</ion-radio>
</ion-item>
<ion-item>
<ion-label> Giraffe </ion-label>
<ion-radio Name="Question1" value="c">
</ion-radio>
</ion-item>
<ion-item><ion-label> Zebra</ion-label>
<ion-radio Name="Question1" value="d">
</ion-radio></ion-item>
</ion-radio-group>
</ion-list>
</ion-content>
Here is what it look like when you open your ionic lab:
NEUSTCICT 2020
Page 99 of 152
Enter to our T.S(typescript)File which is the home.page.ts and then modify and
types as shown in the code below(the code highlighted by red boxes are the ones you
are going to type):
@Component({
})
export class HomePage{
Question1:String;
remarks1:String;
constructor() {}
SeeAnswer1()
{
switch(this.Question1)
{
case "a":
this.remarks1="Elephants are Huge but not tallest";
break;
case "b":
this.remarks1="Hippos are huge but cannot reach trees";
break;
case "c":
this.remarks1="You GOT IT RIGHT!!!!";
break;
case "d":
NEUSTCICT 2020
Page 100 of 152
this.remarks1="Zebras only reach grass and small trees";

break;
default:
this.remarks1="";
}
Here is the thing that will occur when you run it in ion lab and start clicking the
radio buttons, the textbox in the bottom which Is the remarks will start displaying
according to the instructions SeeAnswer1() written in home.page.ts:
EXERCISE
Create your own multiple choice App using radio buttons with If and switch,
create 5 multiple choice questions and put 4 choices on it.
LESSON 19: NGFOR
This Module discusses the fundamentals on the methods in making an app that
can execute NGFOR which is a looping statement comparable to the For, Do while
and While that you have studied in your earlier programming subjects, however unlike
the looping statements with blocks this NGFOR is enclosed to the element or HTML
tag, the moment the statement is true the NGFOR executes and reproduces its HTML
tag or element that enclosed to it.
This Module also introduces you to the arrays and multidimensional arrays ,
we will also demonstrate how to add on the arrays using .push() function and remove
array values using .splice() function. Included in this module acquaints you to Date
variables on how to extract the month, year, day and time and how to concatenate
them as strings
NEUSTCICT 2020
Page 101 of 152
For example and demo purposes we will make an online shopping app with
capabilities to show products and add products to the cart.
-
To do these we must create an array, we name this array as “prods” In our T.S
(typescript) which is home.page.ts modify and type the code which is highlighted by
dotted boxes in this case we type the code of the “prods array” including its data
values:
import { IonDatetime } from '@ionic/angular';
@Component({
})
prods:any[]=
[
{prodno:"001",name:"COGHLANS Mosquito Bed Net", price:1400},
{prodno:"002",name:"Osprey Men's Backpacking Backpack",price:5000},
NEUSTCICT 2020
Page 102 of 152
{prodno:"003",name:"Rapala Marine Fisherman Glove",price:300},

{prodno:"004",name:"Pocket Chain Saw ",price:500}
];
constructor() {}
Now let’s do the front end of our App we will use “*ngfor” to display our products
array(“that is “prods” by the way) we will pass the responsibility to “p” variable to
shorten its name, and we will use the <ion item> and {{Variable.name}} to display all
the Data of the array in our App.
-
<ion-toolbar>
<ion-title>
NEUST Online Market
</ion-title>
</ion-toolbar>
</ion-header>
PRODUCTS
<ion-list >
<ion-item *ngFor="let p of prods; let y = index">
<p> {{p.name}} {{p.price}} </p>
</ion-item>
</ion-list>
</ion-content>
NEUSTCICT 2020
Page 103 of 152
Now we insert ”Add to Cart” buttons in our design on each product and we will
put OrderNo container to generate Order Number if ever we buy a product (or click
the “add to cart” button) also when we click the “add to cart” button the product we just
clicked will then be added to the cart(array).
Go back to home.page.html and type the HTML code which is enclosed by

dotted lines. NOTES: the (click)="Additem(p)" this is the event that will generate
OrderNo and will add our selected product to the cart.
<ion-toolbar>
<ion-title>
NEUST Online Market
</ion-title>
</ion-toolbar>
</ion-header>
<ion-
input type="text" Name="txtOrderNo" [(ngModel)]="txtOrderNo" placeholder="Order
No">
</ion-input>
PRODUCTS
<ion-list >
NEUSTCICT 2020
Page 104 of 152

<p> {{p.name}} {{p.price}} </p>
="Additem(p)" >Add to cart </ion-button></p>

</ion-item>
</ion-list>
</ion-content>
Now let use put the instructions of adding to cart and OrderNo generator in
our function “Additem(p)" to do these goto home.page.ts and type the code which is
shown in the dotted boxes:

@Component({
})
prods:any[]=
[
];
cart:any[]=
[
{OrderNo:"",prodno:"", name:"", price:0 }
]
Today:Date;
M:any;
D:any;
Y:any;
H:any;
MI:any;
S:any;
MS:any;
txtOrderNo:any;
constructor() {}
Additem(p)
{
this.Today=new Date();
NEUSTCICT 2020
Page 105 of 152
this.M=String(this.Today.getMonth() );
this.D=String(this.Today.getDay() );
this.Y=String(this.Today.getFullYear() );
this.H=String(this.Today.getHours() );
this.MI=String(this.Today.getMinutes() );
this.S=String(this.Today.getSeconds() );
this.MS=String(this.Today.getUTCMilliseconds() );
this.txtOrderNo=this.M + this.D + this.Y + this.H+ this.D+ this.MI+ this.S+ this.MS;
this.cart.push({OrderNo: this.txtOrderNo , prodno:p.prodno, name:p.name, price:p.pr

ice });
Now go to Ionic Lab and then Click the “Add to Cart” buttons, you will notice
that a OrderNo(see top of your App) is generated using a combination of Months,
day, Year, Hours, Minutes, Seconds and Milliseconds, however we cannot see our
added products in the cart(by the way we don’t have a cart yet):
This is our next objective to show our added products in our cart which will be
located in the bottom, we have the program already that add products in the cart, this
is shown in the previous pages of this module, this is the .push() method (please visit
the Additem(p) function to see this ). Also the moment our product is shown in the
cart it should have a remove to cart button that when clicked the selected item in the
cart will be removed.
NEUSTCICT 2020
Page 106 of 152
Open the home.page.html and type the HTML code which is enclosed by dotted
lines. NOTES: the (click)="Removeitem(B,i)" this is the event that when clicked the
selected item (represented by index variable “i”) will be removed in the list (that is our
cart array) that variable “B” is the variable that represents our Cart items.
<ion-toolbar>
<ion-title>
NEUST Online Market
</ion-title>
</ion-toolbar>
</ion-header>
<ion-
input type="text" Name="txtOrderNo" [(ngModel)]="txtOrderNo" placeholder="Order
No"></ion-input>
PRODUCTS
<ion-list >
<p> {{p.name}} {{p.price}}
="Additem(p)" >Add to cart </ion-button></p>
</ion-item>
</ion-list>
BELOW IS YOUR CART

<ion-list >
<ion-item *ngFor="let B of cart; let i = index">
<p> {{B.OrderNo}} {{B.name}} {{B.price}} </p>
<p> <ion-button (click)=Removeitem(B,i)> Remove to cart </ion-button></p>
NEUSTCICT 2020
Page 107 of 152
</ion-item>
</ion-list>
Now let use put the instructions of removing items to cart in our function
“Removeitem(B,i)" to do these goto home.page.ts and type the code which is shown
in the dotted boxes located in the next page:

@Component({
})
prods:any[]=
[
];
cart:any[]=
[
{OrderNo:"",prodno:"", name:"", price:0 }
]
Today:Date;
M:any;
D:any;
Y:any;
H:any;
MI:any;
S:any;
MS:any;
NEUSTCICT 2020
Page 108 of 152
txtOrderNo:any;
constructor() {}
Additem(p)
{
this.Today=new Date();
this.M=String(this.Today.getMonth() );
this.D=String(this.Today.getDay() );
this.Y=String(this.Today.getFullYear() );
this.H=String(this.Today.getHours() );
this.MI=String(this.Today.getMinutes() );
this.S=String(this.Today.getSeconds() );
this.MS=String(this.Today.getUTCMilliseconds() );
this.txtOrderNo=this.M + this.D + this.Y + this.H+ this.D+ this.MI+ this.S+ this.M

S;
this.cart.push({OrderNo: this.txtOrderNo , prodno:p.prodno, name:p.name, pric
e:p.price });
}
Removeitem(B,i)
{
this.txtOrderNo=i ;
this.cart.splice(i,1);
}
}
Now Open the ionic lab and click tha add to cart buttons, you will notice that
your selected product will be added in the cart shown in the bottom of your app, now
try clicking the remove to cart buttons and you will notice that your selected cart item
is removed.
NEUSTCICT 2020
Page 109 of 152
EXERCISE
Design an App that will achieve Online Ramen noodle shop, like the figure
below:
When the drop arrow

of Garlic is Clicked
(for example) its
selection choices will
appear
Use <ion-select> to execute the ngfor to show the vaLues of each item, the
following is the clue / syntax of <ion-select> for your reference:
<IonItem>
<IonLabel>YEAR</IonLabel>
<ion-select >
NEUSTCICT 2020
Page 110 of 152
<ion-select-option “PUT YOUR NGFOR HERE” value="{{PUT YOUR

VARIABLE THAT WILL REPRESENT AS A VALUE}}">
{{your VARIABLE you Like to Show}}
</ion-select-option>
</ion-select>
</IonItem>
The following are the items you will display in your app and the bulleted list
below them are their Array values that will display if you click the drop arrow of the
item you choose
Dashi
● Light
● Medium
● Strong
Richness
● None
● Light
● Medium
● Rich
● Extra rich
Garlic
● None
● Drop
● Medium
● ½ Clove
● 1 clove
Chashu Sliced Pork
● No Pork
● With Pork
Spices
● None
● Mild
● Medium
● Spicy
● Very spicy
Noodle Texture
● Extra Firm
● Firm
● Medium
● Soft
NEUSTCICT 2020
Page 111 of 153
LESSON 20: Tabs and Pages
This Part of module is all about the fundamentals on how to make an app with
Tabbed pages, these tabbing is used to organize pages into one window saving space
and time of reloading. This module introduces you on how to navigate on the tabs
programmatically, we will put the instructions on the ion-buttons (actually to the
typescript file) and these instructions makes the app to jump from one tab to another
plus it will collect data and pass it to another tab, these passing of data behaves like
global variables in your previous programming subjects. Part of this module is the
“Toast” which is a messagebox that appears in the App, you will see this near the last
part of this module.
For demo purposes we will make a Registration Form that can collect data from
tabbed pages and then send them from other tabbed pages
Open your Command prompt and navigate into your folder (NOTES: Make sure
you already created the IONIC Folder inside your Documents folder)
● C:\Windows\System> cd\Users\YourUserName\Documents\IONIC\
Make a new project name it as TABSP :

● C:\Users\YourUserName\Documents\IONIC>ionic start TABSP --
type=angular
After the command processing go to the folder of our new project:
● C:\Users\YourUserName\Documents\IONIC>cd TABSP
Open the Visual Studio Code IDE and execute the command shown below:
● C:\Users\YourUserName\Documents\IONIC\ TABSP > code .
Open our App simulator Ionic Lab . NOTES: if this instruction below does not
work install it using this command 🡪 npm i @ionic/lab --save-dev
● C:\Users\YourUserName\Documents\IONIC\ TABSP > ionic lab
Here is our objective we are going to working on, create 3 pages and then we will
put them inside the tabs:
NEUSTCICT 2020
Page 112 of 153
Click and open the Home.page.html and delete everything:
Replace the deleted items of Home.page.html with these:
<ion-tabs>
<ion-tab-button tab="tab1">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-icon name="ellipse"></ion-icon>
NEUSTCICT 2020
Page 113 of 153
</ion-tab-button>
<ion-icon name="square"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Don’t forget to Save it

The code above creates the tab buttons for our Webpages
Now let’s add the Webpages the Forms of Tab1, Tab2, Tab3 and the Submit
Page. Open a New Terminal and type the following commands:
ionic g page tab1
ionic g page tab2
ionic g page tab3
ionic g page tabs
ionic g page Submit
Delete All codes in app-routing.module.ts and replace it with the code below:
NEUSTCICT 2020
Page 114 of 153
import { NgModule } from '@angular/core';

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [

{
path: '',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
The Code above gives directional navigation to the app telling the addresses
of tab1, tab2 and tab3 is under the control of “tabs page”, it also gives instruction
to the home page tabs the webpage that they will load on each tab, these codes are
globalized and can be seen by most pages, however there where times that when you
click the tab the other tabs will disappear
We said the control belongs to “tabs” well lets do it and lets put instruction to its file
tabs-routing.module.ts , go to this file and delete all the codes and replace
it with the codes as shown below
NEUSTCICT 2020
Page 115 of 153
import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [

{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
},
{
path: 'tab2',
},
{
path: 'tab3',
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
NEUSTCICT 2020
Page 116 of 153
})
export class TabsPageRoutingModule {}
Our next objective is to modify our Tab pages we will put textboxes, labels and
buttons that pass Data from one Tabbed Page to another tab page (like Global
Variables):
Replace the code of tabs.page.html with code as shown

<ion-tabs>
<ion-tab-bar slot="top">
<ion-label>Tab1 Form</ion-label>
</ion-tab-button>
</ion-tab-button>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Now Go to Tab1.Page.HTML type the subsequent code:
NEUSTCICT 2020
Page 117 of 153
<h1> PERSONAL INFO </h1>

<ion-label>Name:</ion-label>
<ion-input type="text" placeholder="Type your name here" [(ngModel)]="txtName">
</ion-input>
<ion-label>Shipping Address:</ion-label>
<ion-input type="text" placeholder="Type your Shipping Address here"[(ngModel)]="txtAddress">
</ion-input>
<ion-label>Business Name:</ion-label>
<ion-input type="text" placeholder="Type your Business name here" [(ngModel)]="txtBuss">
</ion-input>
<ion-button (click)="gotoTab2()" >Goto Tab2</ion-button>
</ion-content>
The code above creates the output shown at the left:
In this page the user of the app must type its

Name, Shipping Address and Business name
and must click the Go to Tab2
If the Go to Tab2 is clicked the program
instruction (click)="gotoTab2()” will be called
and executed this program instruction is in the
Tab1.Page.TS file (see in the next instruction)
Go to Tab1.Page.TS and type the code below
@Component({
selector: 'app-tab1',
templateUrl: './tab1.page.html',
styleUrls: ['./tab1.page.scss'],
})
export class Tab1Page implements OnInit {

txtName:String;
txtAddress:String;
txtBuss:String;
constructor( private router: Router ) {
NEUSTCICT 2020
Page 118 of 153
ngOnInit()
{
}
gotoTab2()
{
let NAVI:NavigationExtras={
state:{
NameNgPerson: this.txtName,
Tirahan: this.txtAddress,
Negosyo: this. txtAddress
}
}
this.router.navigate(['tabs/tab2'],NAVI);
}
The code above collects the infos of txtName, txtAddress and txtAddress which
are input textboxes of our Tab1.Page.HTML
These infos are then passed to the variables NameNgPerson, Tirahan and
Negosyo. And these variables are contained to a Navigation variable “NAVI” which
acts as a transportation to the next tabbed pages
This.router.navigate(['tabs/tab2'],NAVI); instructs the App to got to “Tab2”

tabbed page and pass the passengers of NAVI variable also to “Tab2”
Go to Tab2.Page.HTML and type the code shown below:
<ion-input type="text" placeholder="Type your Tel no here" [(ngModel)]="txtTelno">

</ion-input>
<ion-label>Email:</ion-label>
<ion-input type="text" placeholder="Type your Email here"[(ngModel)]="txtEmail">
</ion-input>
<ion-button (click)="gotoTab3()" >Go to Tab3</ion-button>

</ion-content>
NEUSTCICT 2020
Page 119 of 153
The code above creates the output shown at the left
In this page the user of the app must type its

Telephone No and Email and must click the Go
to Tab3
If the Go to Tab3 is clicked the program
instruction (click)="gotoTab3()” will be called
and executed this program instruction is in the
Tab1.Page.TS file (see in the next instruction)
Go to Tab2.Page.TS and type the code displayed below
@Component({
})
txtTelno:any;
txtEmail:any;
fromTab1txtName:any;
fromTab1txtShipping:any;
fromTab1txtBusiness:any;
constructor(private route:ActivatedRoute, private router:Router)

{
{
this.fromTab1txtName=this.router.getCurrentNavigation().extras.state.NameNgPerson
this.fromTab1txtShipping=this.router.getCurrentNavigation().extras.state.Tirahan
this.fromTab1txtBusiness=this.router.getCurrentNavigation().extras.state.Negosyo
}
});
}
ngOnInit() {
NEUSTCICT 2020
Page 120 of 153
gotoTab3(){
let NAVI:NavigationExtras={
state:{
NameNgPerson: this.fromTab1txtName,
Tirahan:this.fromTab1txtShipping,
Negosyo:this.fromTab1txtBusiness,
Tawagan: this.txtTelno,
Sulatan: this.txtEmail,
}
}
this.router.navigate(['tabs/tab3'],NAVI);
}
}
The code above collects the infos of txtTelno and txtEmail which are input
textboxes of our Tab2.Page.HTML.
Meanwhile in the constructor the variables
fromTab1txtName,fromTab1txtShipping and fromTab1txtBusiness collects data
passed by our “Tab1” page.
These infos are then passed to the variables Tawagan and Sulatan. We have
variables NameNgPerson, Tirahan and Negosyo which we recycle and reused, we
commission these variables to store our infos in “Tab1” and we will use these
variables(together with Tawagan and Sulatan) to pass it in “Tab3”.
All these variables are contained to a Navigation variable “NAVI” which acts as
a transportation to the next tabbed pages.
this.router.navigate(['tabs/tab3'],NAVI); instructs the App to got to “Tab3”
tabbed page and pass the passengers of NAVI variable also to “Tab3”.
Go to Tab3.Page.HTML and type the code as displayed below:
<h1> SUMMARY OF YOUR INFO </h1>

<ion-label>Name:</ion-label>
<ion-input type="text" [(ngModel)]="txtName"></ion-input>
<ion-label>Shipping Address:</ion-label>
<ion-input type="text" [(ngModel)]="txtAddress"></ion-input>
<ion-label>Business Name:</ion-label>
<ion-input type="text" [(ngModel)]="txtBuss"></ion-input>
<ion-label>Telephone Number:</ion-label>
NEUSTCICT 2020
Page 121 of 153
<ion-input type="text" [(ngModel)]="txtTelno"></ion-input>

<ion-label>Email:</ion-label>
<ion-input type="text" [(ngModel)]="txtEmail"></ion-input>
<ion-button (click)="Sabmit()" >SUBMIT</ion-button>
<ion-input type="text" [(ngModel)]="txtMessage"></ion-input>
</ion-content>
The code above creates the output shown at the left
In this page the user of the app must have all the
inputs filled up and must click the Submit
If the Submit is clicked the program instruction
(click)=" Submit()” will be called and executed this
program instruction is in the Tab3.Page.TS file
(see in the next instruction)
Go to Tab3.Page.TS and type the following code:
@Component({
})

txtTelno:any;
txtEmail:any;
txtName:String;
txtAddress:String;
txtBuss:String;
txtMessage:String;
constructor(private route:ActivatedRoute, private router:Router, private Tosta:

ToastController)
{
this.route.queryParams.subscribe(params =>{
if(this.router.getCurrentNavigation().extras.state)
NEUSTCICT 2020
Page 122 of 153
{
this.txtName=this.router.getCurrentNavigation().extras.state.NameNgPerson
this.txtAddress=this.router.getCurrentNavigation().extras.state.Tirahan
this.txtBuss=this.router.getCurrentNavigation().extras.state.Negosyo
this.txtTelno=this.router.getCurrentNavigation().extras.state.Tawagan
this.txtEmail=this.router.getCurrentNavigation().extras.state.Sulatan
}
});
ngOnInit()
{
sabmit(){
if ( (this.txtName==null)||(this. txtAddress ==null)
|| (this.txtEmail==null) || (this.txtBuss==null)|| (this.txtTelno==null))
{
this.txtMessage="Please Fill in the Blank inputs";
}
else
{
this.txtMessage=" ";
this.ShowToast(‘Your Data is now saved in our servers’)
this.router.navigate(['/submit']);
}
message: mensahe,
duration: 5000
});
toast.present();
}
}
The code above which is the submit() procedure (executed by the click from
our button in Tab3) instructs the app to go in “Submit” page ONLY when if satisfies
the condition if the inputboxes from our tab3.page.html : txtName, txtAddress,
txtAddress, txtAddress and txtAddress ARE NOT null (which means blank)
Meanwhile our constructor displays all collected data from our “Tab2”
thanks to the NAVI Variable
The Toast Message for the App users executes in submit() procedure, this
Toast is programmed in async ShowToast(mensahe) procedure which is supported
NEUSTCICT 2020
Page 123 of 153
by variable “private Tosta: ToastController” which is in the constructor, and the

“import { ToastController} from '@ionic/angular';”
Goto submit.page.html and type the following code:
<ion-header>
<ion-toolbar>
<ion-title>submit</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>
CONGRATULATIONS!
Your Data is now Submitted!

</h1>
</ion-content>
The code above is just our Submit interface which is a message:
Whenever the App user clicks the button in Tab3 and satisfy all the conditions
these Submit page will appear
NOTES: There is no database involved in this Submit page
EXERCISE
Create an App that will implement the University Enrollment form, each tab
must have buttons that pass data similar to our examples in our lesson.
In Tab1 page which is the STUDENT INFO your App must collect the following:
Birth Certificate No
NEUSTCICT 2020
Page 124 of 153
Last Name
FirstName
Middle Name
Birthday
Gender
In Tab2 which is the STUDENT ADDRESS your App must collect the following:
House Street Number
Barangay
Municipality
Province
Country
In Tab3 which is the STUDENT PARENTS your App must collect the following:
Father Name
Mother Name
Guardian
Telephone number
Email
Cellphone Number
In Tab 4 all the collected info must be displayed on each input textboxes
Do not put buttons in Tab4 and do not create a submit page.
LESSON 21: Side Menus
This part of module introduces you to the basics on how to create an app with
Sidemenus, these SideMenus are used to store links that contains commands that
executes programs or to open webpages
For demonstration purposes we will create a simple “Restaurant App”, this app
will contain Sidemenus that will store links allowing the user of the App to navigate in
the different pages.
Open your Command prompt and navigate into your folder (NOTES: Make sure
you already created the IONIC Folder inside your Documents folder)
● C:\Windows\System> cd\Users\admin\Documents\IONIC\
NEUSTCICT 2020
Page 125 of 153
Create a new project name it as menu07012021:
● C:\Users\admin\Documents\IONIC>ionic start menu07012021--type=angular

Select > Blank
After the processing enter to the folder of our new project:
● C:\Users\admin\Documents\IONIC>cd menu07012021
Open the Visual Studio Code IDE by typing the command below:
● C:\Users\admin\Documents\IONIC\ menu07012021> code .
Execute our App simulator Ionic SERVE or if you like IONIC LAB.
● C:\Users\admin\Documents\IONIC\ menu07012021> ionic SERVE

NOTES:: always Maximize the Window of your App which is our Ionic
serve so we can see the menu
Here is our target in this module we will make side menu for Jabi Restaurant
(a fictional restaurant, that gave us a contract to do their app)
We are about to create 5 Webpages that this our example will demonstrate.
Open the Terminal prompt of your Visual Studio then on this Terminal type the
following commands:
Ionic g page Pages/meal1
NEUSTCICT 2020
Page 126 of 153
WE ARE NOW GOING TO CREATE OUR MENUS, Go to app.component.html

and do the modifications as shown below:
<ion-app>
<ion-menu menuId="main-menu" content-Id="main">
<ion-header>
<ion-toolbar>
<ion-title>
Menu Menu
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item routerLink="">
<ion-icon name="mail" slot="start"></ion-icon>
<ion-label>HOME </ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item routerLink="/meal1">
<ion-icon name="mail" slot="start"></ion-icon>
<ion-label>PASTAs </ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
NEUSTCICT 2020
Page 127 of 153
<ion-icon name="paper-plane" slot="start"></ion-icon>
<ion-label>BREADS</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-icon name="archieve" slot="start"></ion-icon>
<ion-label>DRINKS</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<img src="../../assets/Hamburger.jpg" height=50 width=50>
<ion-icon name="trash" slot="start"></ion-icon>
<ion-label>BURGERS</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-icon name="warning" slot="start"></ion-icon>
<ion-label>ICE CREAMS</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main"></ion-router-outlet>
</ion-app>
Once Finished click File > Save
NEUSTCICT 2020
Page 128 of 153
Go to home.page.html and let’s include the menus every time our home page
appears and do the modifications as shown below:
<ion-toolbar>
<ion-title> Jabi Restaurant</ion-title>
<ion-menu-button menu="main-menu">
</ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
</ion-content>
Go to your Ionic Lab and Drag the Top Right Side of the Phone to show the menus
or you Can click the 3 Lined Button in the top right of the phone
Lets edit one of the pages Lets put objects, texts, pictures, angular programs in it Lets
try that in meal4 page which is the hamburgers page.
NEUSTCICT 2020
Page 129 of 153
Delete or Modify the code of meal4.page.html type the code as shown below:
<ion-header>
<ion-toolbar>
<ion-title>meal4</ion-title>
<ion-menu-button menu="main-menu"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>product</ion-label>
<ion-label></ion-label>
<ion-label> price</ion-label>
<ion-label>qty</ion-label>
<ion-label>amount</ion-label>
</ion-item>
<ion-item>
<img src="../../assets/Hamburger.jpg" height=150 width=150>
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="checkbox1" (ionChange)="verifyEvent()"></ion-checkbox>
<ion-label>Regular Yum</ion-label>
<ion-input type="text" value=65.32 [(ngModel)]="txtPriceregularYum"> </ion-input>
<ion-input type="text" value=1 [(ngModel)]="txtQtyregularYum" (ionChange)="verifyEvent()">

</ion-input>
<ion-input type="text" value=0 [(ngModel)]="txtAmountregularYum"> </ion-input>

</ion-item>
Go to internet to the site https://pixabay.com/ download free pictures of Hamburger, Cheeseburger

and Doubleburger
NEUSTCICT 2020
Page 130 of 153
WARNING: for some reasons ionic is case sensitive in respect of filenames, so name the pictures in a
right name
in our case we do the filenames shown below
Goto the location where your downloaded images are saved, Drag your downloaded images into the
Assets folder into your Visual Studio
Lets put functionality lets make the Checkboxes and Inputboxes alive and
Computing, Go to meal4.page.ts delete or modify the codes and use the code
that will appear below
NEUSTCICT 2020
Page 131 of 153
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-meal4',
templateUrl: './meal4.page.html',
styleUrls: ['./meal4.page.scss'],
})
export class Meal4Page implements OnInit {
constructor() { }
txtAmountregularYum:Number;
checkbox1: any;
checkbox2: any;
checkbox3: any;
txt1: any;
txtQtyregularYum:any;
txtPriceregularYum:any;
txtPriceCheeseBurger:any;
txtQtyCheeseBurger:any;
txtAmountCheeseBurger:any;
txtPriceDoublePatty:any;
txtQtyDoublePatty:any;
txtAmountDoublePatty:any;
txtTotalBurger:any;
ngOnInit() {
this.txtQtyregularYum=0;
this.txtPriceregularYum=0;
this.txtPriceCheeseBurger=0;
this.txtQtyCheeseBurger=0;
this.txtAmountCheeseBurger=0;
this.txtPriceDoublePatty=0;
this.txtQtyDoublePatty=0;
this.txtAmountDoublePatty=0;
this.txtTotalBurger=0;
verifyEvent()
NEUSTCICT 2020
Page 132 of 153
if(this.checkbox1==true){
this.txtPriceregularYum=65.32;
if(this.checkbox1==false)
this.txtPriceregularYum=0;
this.txtQtyregularYum=0;
this.txtPriceCheeseBurger=160.43;
this.txtPriceCheeseBurger=0;
this.txtQtyCheeseBurger=0;
this.txtPriceDoublePatty=234.43;
this.txtQtyDoublePatty=0;
this.txtPriceDoublePatty=0;
this.txtAmountregularYum=Number(this.txtQtyregularYum) * Number(this.txtPriceregularYum);
this.txtAmountCheeseBurger=Number(this.txtQtyCheeseBurger) * Number(this.txtPriceCheeseBurger);
this.txtAmountDoublePatty=Number(this.txtQtyDoublePatty) * Number(this.txtPriceDoublePatty);
this.txtTotalBurger=Number(this.txtAmountDoublePatty)+Number(this.txtAmountCheeseBurger)+Number(this.txtAmountregularYum);
Go to Ionic lab and check if the objects such as checkbox when checked the price of
the specific burger will appear, and also type any number in the quantity inputbox and
see if the calculations will display
NEUSTCICT 2020
Page 133 of 153
EXERCISE
Create a simple App about the Constitution of Republic of the Philippines
that will display the Preamble and at least the first 7 Articles, here is what you are
going to do:
In Menu 1 the task will be to display the Preamble
In Menu 2 display the Article 1
All contents of the Philippine constitution can be found in the Official Gazette
website https://www.officialgazette.gov.ph/constitutions/1987-constitution/
LESSON 22: PUBLISHING
To Publish your App means to run it in your Mobile Phone (using the generated
APK file) or to sell it using your Google Account in Google Play Store. This Module
will show you how to accomplish these task step by step.
Preparing the App
1.) Start building your App
In the App you are working on Open the Terminal in your Visual Studio
Click View>Terminal
Or click Terminal>New Terminal
In this terminal type the command Ionic build –prod
NEUSTCICT 2020
Page 134 of 153
Ionic build --prod
Wait…until the
process is finished
NEUSTCICT 2020
Page 135 of 153
2.) Lets make our program an Android App, type the command below to generate support files and
scripts for your program to become Android
In the Terminal type Ionic capacitor add android
Ionic capacitor add android

After the command is finished
the android folder will be
created
3.) Now that your program has now Android files and scripts its time for us to open our newly
converted App into Android Studio, type the command ionic capacitor open android
ionic capacitor open android

The Android Studio Will Open
Donot do anything in Android studio
until the progress bar is complete and
finished
NEUSTCICT 2020
Page 136 of 153
Just for your Info, only if you want to test your app in android studio (Which I do not recommend)
try to check and install the SDKs
Converting your App to APK

4.) Lets make your App now as Android Package or APK File in order for us to run it in your Mobile
Phone or to the our optional Emulator (Which is a Mobile phone Simulator in your P.C, we will use
BlueStacks as emulator) In Android Studio Click Build> Build Bundle(s)/APK> Build APK(s)
Build APK
5.) Monitor the Event Log if the BUILD is successful, if it is click the Locate Link
NEUSTCICT 2020
Page 137 of 153
Event Log
6.) Test your APK into your smartphone (you can transfer this APK thru your USB Cable) or test your
App with the use of Emulator (BlueStacks) which you can freely download and install
The file app-debug is your APK File In your Desktop, Open the Blue
Stacks Emulator for Testing, The
Blue Stacks will act and behave as
a tablet or Smartphone
Drag your APK file into Blue Stacks wait for it to be installed once installed, double click its icon and
it will run and behave just like in the real smartphone or tablet
app-debug is not the

final APK its just for
testing purposes the
next slide will show you
how to make your final
APK
7.) Follow the steps to make a Final APK file which you will transfer to Google PlayStore
NEUSTCICT 2020
Page 138 of 153
Publishing your App into Google play console

8. Now that you have the Final APK, you can now upload it to Google Console (this is your personal
Google play store repository). By the way you can test your Final APK in your own smartphone or
Blue Stacks
Anyhow go to Google play console search it in Google and then Register, fill up necessary info and
pay the one time $ 25 payment using credit or debit card
NEUSTCICT 2020
Page 139 of 153
9. Click Create Apps
NEUSTCICT 2020
Page 140 of 153
10. Fill up the necessary details for your App
NEUSTCICT 2020
Page 141 of 153
Fill up the content rating and target audience
Go back again to dashboard and fill up the category details
NEUSTCICT 2020
Page 142 of 153
Go back again to dashboard and fill up the store listings, make sure you have already App logos and
screen shots of what your app look like
NEUSTCICT 2020
Page 143 of 153
Click SAVE when you are done and finish
Uploading the previews, videos and pictures for your app
11. Go back to Dashboard and Fill Up the initial setup
NEUSTCICT 2020
Page 144 of 153
12. Click Production and click Create new Release and upload your APK
13. Make sure you put all the countries you needed
NEUSTCICT 2020
Page 145 of 153
REVIEW
RELEASE
15. Start the Release
NEUSTCICT 2020
Page 146 of 153
Wait approximately 8-10 days for Google to

review and approve your app
Again after 8 to 10 days Check if it is approved and it is in production
NEUSTCICT 2020
Page 147 of 153
CASE STUDY
Your instructor will select a case study problem for your group. The group Leader
and the members must finish the case study in the given deadline of your instructor.
CASE STUDY 1: Create a Botany information system for the College of Biology.
This app is divided into 5 categories: Trees, Shrubs, Herbs, Cactuses, Grasses on
each category there should be 5 species with information and pictures
CASE STUDY 2: Create a simple multiple-choice reviewer for the Civil Service
exam it must have 5 Categories Vocabulary Questions, Idiomatic Expressions,
Reading comprehension test, Numerical Reasoning and Word analogy logic test.
Each category must have 10 questions each and it must show the score to the user
after each of the category is finished.
CASE STUDY 3: The College of Electrical Engineering is asking for an App to have
electrical equations calculator these are Voltage, Current, Resistance, Conductance,
Power, Capacitance, Inductance, Impedance, Charge, Frequency and Time Period
CASE STUDY 4: The Education Department is asking for a Noli me Tangere App for
the students of the remote province of Ifugao, Abra and Guimaras it must have 15
chapters with pictures and the whole content of the book.
CASE STUDY 5: Because of lack of funds in printing the Local Government of the
Province of Siquijor is asking a El Filibusterismo App to be used by the students of
the provincial high school.
CASE STUDY 6: The National Research of Chemistry is asking you the Mobile App
developers to create an App that list all the periodic table of elements(in a side
menu), they require that when they tap an element the related info will be shown
together with the picture (periodic elements contain 118 items but you will only
choose 50 items to be shown in the App)
CASE STUDY 7: Create the multiple-choice practice exam reviewer for College of
Law, it must have 5 categories: Remedial law, Civil Law, Mercantile Law, Taxation
and Criminal law. Each category must have 10 questions and must display the score
after the practice.
CASE STUDY 8: The Japanese Multinational company the MechWarrior’s Car
Company is asking for an app for their employees to perform Newtonian mechanics
calculations these are : Kinematics, Net Force, Friction force, Centripetal
acceleration, torque, momentum, impulse, power, velocity power, spring force,
NEUSTCICT 2020
Page 148 of 153
spring potential energy, period of spring, period of pendulum, kinetic energy,

gravitational potential energy and mechanical work.
NEUSTCICT 2020

Module - It Ipt 02

Uploaded by

Copyright:

Available Formats

Module - It Ipt 02

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

Module - It Ipt 02

Uploaded by

Copyright:

Available Formats

CHIEF AUTHOR

Niño G. Herrera, MSIT

Edward John T. Madrid, LPT Christian B. Peña

Johannah Mae C. Vasquez Marvin DG. Garcia, MSIT

NEUST- CICT 2021

NEUST- CICT 2021

NEUST- CICT 2021

LESSON 1: INTRODUCTION TO MOBILE APPS AND SETTING THE

What is Mobile app?

Types of Mobile app

App Creation and Development Tools

Introducing the Ionic mobile development software

Below are some of the known advantages of Ionic Framework–

List of elements needed to run with Ionic.

C:\Users\Mario> npm install -g cordova ionic

Installing other required tools

There are following three templates to create an App in Ionic:

C:\Users\Mario\Documents\Ionic > ionic start ExampleAPP

C:\Users\Mario\Documents\Ionic\ExampleAPP>ionic Cordova platform add android

next phase is to build the app

C:\Users\Mario\Documents\Ionic\ExampleAPP> ionic build android

NOTES: In case of error type the command🡪 npm i -g native-run

To run and start the App type the following code:

C:\Users\Mario\Documents\Ionic\ExampleAPP> ionic run android

C:\Users\Mario\Documents\Ionic> ionic start ExampleTabApp tabs

C:\Users\Mario\Documents\Ionic\ExampleTabApp>Ionic cordova platform add

Now build the app:

C:\Users\Mario\Documents\Ionic\ExampleTabApp>ionic cordova build android

C:\Users\Mario\Documents\Ionic\ExampleTabApp> ionic cordova run android

3.Side Menu App

C:\Users\Mario\Documents\Ionic\ ExampleTabApp > cd\

C:\Users\Mario\Documents\Ionic>ionic start ExampleSideMenuApp sidemenu

Get inside of the folder in our newly created App:

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova platform add

To finalize the app command, type the following code:

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova build

Finally, we will run the App shown in the command below:

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic cordova run android

Opening your Ionic Code

Test App in Browser

C:\Users\Mario\Documents\Ionic\ExampleSideMenuApp> ionic serve

Folder Structure of the Project

● Platforms − is the container where the Android and known platforms

LESSON 2: Ionic – Forms

<label class = "item item-input">

The code above will display the following result −

<label > What is your name?

<div class = "list">

● The above code will display the following screen

THE NEW FORMAT

<ion-label>Type the student number</ion-label>

● This is the Input textbox with value :

<ion-label>Type your Firstname here</ion-label>

● This is the Input textbox with placeholder :

● This is the Input textbox object plus a clear button:

<ion-label>Your Tuition Fee is</ion-label>

● This is the Number type input textbox:

<ion-label>Your Tuition Fee is</ion-label>

● This is the Disabled input textbox: