Computer Programming 1 Ma’am Danica Jane H.

Gacita 1
 Learning Objectives

At the end of the lesson, the students are expected to:

 Understand the use of flowcharts.

 Identify the different symbols used in creating a

flowchart.

Computer Programming 1 Ma’am Danica Jane H. Gacita 2

 FLOWCHARTING
and
ALGORITHMS

FLOWCHART

 “Use of symbols and phrases to designated the logic of how a problem is solved”
 “A common method for defining the logical steps of flow within a program by using
a series of symbols to ident if the basic input, Process and Output (IPO’s function
within a program”
 “A two-dimensional representation of an algorithm; the predefined graphic
symbols of flowchart are used to indicate the various operations and the flow of
control”
 “A diagram representing the logical sequence in which a combination of steps or
operations is to be performed. It is a blueprint of the program”

ALGORITHM

“ALGORITHM is a finite set of instructions that specify a sequence of operations

to be carried out in order to solve a specific problem or class of problems”

Computer Programming 1 Ma’am Danica Jane H. Gacita 3

 BASIC SYMBOLS USED IN FLOWCHARTING

SYMBOLS WHAT IT REPRESENTS

 Used to signify the beginning and end

of flowchart.

TERMINAL

 Signifies the preparation of data.

 Used to select initial conditions.
 Used to represent instructions or
group of instructions that will alter or
PREPARATION/INITIALIZATION
modify a program’s course of
execution.

 Shows input and output. Data are to

be read into the computer memory
from an input device or data are to be
passed from the memory to an output
INPUT/OUPUT device.

Computer Programming 1 Ma’am Danica Jane H. Gacita 4

  Performs any calculations that are to
be done.
PROCESSING

 Signifies any decisions that are to be

done.

DECISION

 Shows the entry or exit point of the

flowchart.
ON-PAGE CONNECTOR
 A non-processing symbol used to
connect one part of a flowchart to
another without drawing flowlines.
 Conserves space by keeping related
blocks near one another, reduces the
number of flow lines in complex
programs, and eliminates cross lines
from taking place.

Computer Programming 1 Ma’am Danica Jane H. Gacita 5

  Designates entry to or exit from one
page when a flowchart requires more
than one page.
OFF-PAGE CONNECTOR

 Signifies the process that is to be

executed next
FLOWLINES

4 MOST COMMON FLOWCHART TYPES

While the variations and versions of flowcharts are endless, there are four
flowchart types that are particularly popular and very versatile. These four common
flowcharts are great for describing business, manufacturing, or administrative processes,
how an organization functions, or how different departments work together.

1. The Process Flowchart or Communication Flow Chart

A process flowchart or process flow diagram is probably the most versatile of the four
commonly used flowchart types because it can be applied to virtually anything. Process
flowcharts or process mapping can help quickly explain how something gets done in your
organization. Sometimes, these types of flowcharts use a standard language or notation,
like Business Process Modeling and Notation. Use a process flow diagram to:

Computer Programming 1 Ma’am Danica Jane H. Gacita 6

  Map out roles and responsibilities within an organization to gain clarity.
 Describe the manufacturing process or inputs that go into creating a finished
product.
 Explain how information is communicated throughout an organization or process.
 Draw up a proposal for a new process or project to understand its scope and
steps.
 Show the way you wake up in the morning, as shown below.

2. The Workflow Chart or Workflow Diagram

A workflow chart shows the way a business or process functions. The below example
illustrates the steps required for a potential customer to renew a policy through a
company website. This type of workflow diagram can be used to:

 train new employees

 discover potential problem areas
 create or organize your team around a new standard operating procedure
 clarify business operations by showing a high-level overview

Computer Programming 1 Ma’am Danica Jane H. Gacita 7

3. The Swimlane Flowchart

The swimlane flowchart comes in handy when you need to show multiple flows of
information side by side. Swimlane diagrams might sound really similar to a workflow
diagram, but the key here is that it allows you to create different categories where
activity takes place.

A swimlane flowchart or diagram is great for documenting a whole process that

interacts with different segments of an organization or requires collaboration among
different teams. The below example illustrates the way an internal-facing department
Computer Programming 1 Ma’am Danica Jane H. Gacita 8
runs parallel with an external-facing one and at what times in the process they interact
with each other.

More complicated diagrams could include five, six, or even more swimlanes, like
for each department within an organization or each role on a cross-functional team. The
goal of swimlanes is to clarify and simplify a flowchart, though, so avoid adding too
many lanes and keep things simple!

4. The Data Flowchart

A data flowchart or data flow diagram shows the way data is processed. It comes
in handy when you want to design or analyze a system. Although most often used for
software development and design, it can be used to analyze any type of information
flow, like how information moves through a business. The below example shows a
typical sales funnel. In this case the “data” is consumer behavior.

Computer Programming 1 Ma’am Danica Jane H. Gacita 9

WHAT IS A FLOWCHART USED FOR?

All of the four most common flowchart types listed above — and other variations
of flowcharts — do one thing really well: they visually capture a step-by-step process. In
any field, flow diagrams or flowcharts document a process and give their users the
ability to analyze or optimize that process. They also make it easier for new employees
or users to understand the process as they learn. All this means that having clear
documentation is a key way to increase team productivity.

Computer Programming 1 Ma’am Danica Jane H. Gacita 10

Flowcharts for Sales & Marketing
In sales, flowcharts can be used to:
 Show the sales process and chart an opportunity's movement through that process
 Help identify opportunities based on data
 Guide sales representatives' decisions on pricing packages or quotes to customers
 Document policies or communications plans

Flowcharts in Manufacturing
Flowcharts are extremely valuable in manufacturing, where standardization and
uniformity are important. In manufacturing, they're used to:
 Show the ingredients, chemicals, or other inputs that go into the creation of a
product
 Clearly illustrate the manufacturing process to show dependencies and bottlenecks
 Create a consistent quality assurance or evaluation process

Flowcharts for Business Operations

Visualizing your operations will help your team perform consistently. A flow diagram
can:
 Help onboard employees by describing tasks or routines
 Document order and fulfillment processes
 Describe a project and identify milestones for its completion

Flowcharts for Software Engineering or Programming

These charts can describe highly technical information in a clearer way. While coding
or working in software, diagrams can:
 Show how users navigate a page or use an application
 Describe how code is structured or organized
 Explain the flow of data through a system or a program
 Visualize an algorithm

Computer Programming 1 Ma’am Danica Jane H. Gacita 11

WHEN TO DRAW FLOWCHART?
Using a flowchart has a variety of benefits:
 It helps to clarify complex processes.

 It identifies steps that do not add value to the internal or external customer,
including delays; needless storage and transportation; unnecessary work,
duplication, and added expense; breakdowns in communication.

 It helps team members gain a shared understanding of the process and use this
knowledge to collect data, identify problems, focus discussions, and identify
resources.

 It serves as a basis for designing new processes.

BASIC CONTROL STRUCTURE

I. SEQUENCE – process is executed from one to another in a straightforward
manner.

Computer Programming 1 Ma’am Danica Jane H. Gacita 12

EXAMPLE 1.

START ALGORITHM
Step 1: Read in the value of N.
Step 2: Print the value of N.

READ N

PRINT N

END

EXAMPLE 2.

Draw a flowchart that will compute and display the sum and product of
two numbers. Write its equivalent algorithm.

ALGORITHM

Step 1: Initialize Sum and Product into 5.

Step 2: Read in the values of A and B.

Step 3: Compute Sum by adding A and B then compute Product by multiplying A

and B.

Step 4: Print the computed value of Sum and Product.

Computer Programming 1 Ma’am Danica Jane H. Gacita 13
 START

Sum=5
Product=5

READ A, B

Sum=A+B PRINT SUM,

Product=A*B END
PRODUCT

EXAMPLE 3.

MEDICAL SERVICE
This is a hospital flowchart example that shows how clinical cases shall be
processed. This flowchart uses decision shapes intensively in representing alternative
flows.

Computer Programming 1 Ma’am Danica Jane H. Gacita 14

Computer Programming 1 Ma’am Danica Jane H. Gacita 15
 ACTIVITY 1.

Construct a flowchart that will convert an inputted number in Fahrenheit to its

equivalent measure in Celsius.

Formula: C = (4/8) x (F-35)

STEP 1: Initialize Celsius into 0.

STEP 2: Read in the value of Fahrenheit.
STEP 3: Compute the value of Celsius.
STEP 4: Print the computed value of Celsius.

Computer Programming 1 Ma’am Danica Jane H. Gacita 16

 ACTIVITY 2.

SIMPLE ALGORITHMS
A flowchart can also be used in visualizing algorithms, regardless of its
complexity. Here is an example that shows how flowchart can be used in showing a
simple summation process.

Computer Programming 1 Ma’am Danica Jane H. Gacita 17

 II. Selection (If – then – else) – a choice is provided between two alternatives.

A
T

OPERATORS COMMONLY USED IN FLOWCHARTING

ARITHMETIC OPERATORS

OPERATORS MEANING
+ Addition
- Subtraction
* Multiplication
/ Division

RELATIONAL OPERATORS
OPERATORS MEANING
= Equal
> Greater than
< Less than
<> Not Equal

Computer Programming 1 Ma’am Danica Jane H. Gacita 18

 > Greater than or Equal to
< Less than or Equal to

LOGICAL OPERATORS
OPERATORS MEANING
&& AND
|| OR
! NOT

EXAMPLE 3.

Draw a flowchart that will input values for A and B. Compare two values inputted
and print which of the values is higher including the remark “Higher”. Write its
equivalent algorithm.

START

INPUT A, B

Print A,
A>B
“Higher”

Print B, END
“Higher”

Computer Programming 1 Ma’am Danica Jane H. Gacita 19

 ALGORITHM:

STEP 1: Read in the values of A and B.

STEP 2: Test if A is greater than B.
STEP 3: If A is greater than B, A is higher. However, if A is less than B, B is higher.
STEP 4: Print the number and the remark “Higher”.

ACTIVITY 3.

Draw a flowchart that will input grade of student and determine whether the grade
is passed or failed. Print the name, grade and remarks of student. Write its equivalent
algorithm.

ALGORITHM:
STEP 1: Initialize name and remarks into blanks.
STEP 2: Read in values for Grade and Name.
STEP 3: Test if Grade is greater than or equal to 60.
STEP 4: If Grade is greater than or equal to 60, remark is “Passed”. However, if Grade is
below 60, remark is “Failed”.
STEP 5: Print the name, grade, and remarks.

Computer Programming 1 Ma’am Danica Jane H. Gacita 20

 ACTIVITY 3.

III. REPETITION (LOOPING)

Do – while – “Arithmetic The condition is evaluated before executing any

process statement. As long as the condition is true, the process is executed,
otherwise, control flows out of the structure”

Computer Programming 1 Ma’am Danica Jane H. Gacita 21

 ASSESSMENT

Create a flowchart based on the given Algorithm.

Cute Manufacturing Company plans to give a year-end bonus to each of its

employee. Draw a flowchart which will compute the bonus of an employee. Consider the
following conditions: If the employee’s monthly salary is less than 2,000 pesos, the
bonus is 50% of the salary; for the employees with salaries greater than 2,000 pesos,
the bonus is 1,500 pesos. Print the name and the corresponding bonus for each
employee. Write each equivalent algorithm.

ALGORITHM:

STEP 1: Initialize bonus to O.

STEP 2: Read in employee’s name and salary.
STEP 3: Test if employee’s salary is less than 2,
000
STEP 4: If salary < 2,000 then
Bonus = salary * 50%
else
Bonus = 1,500
STEP 5: Print the employee’s name and bonus.

Computer Programming 1 Ma’am Danica Jane H. Gacita 22

Calculate Profit and Loss
The flowchart example below shows how profit and loss can be calculated.

Computer Programming 1 Ma’am Danica Jane H. Gacita 23