1. Chapter 3 Program Design
Web Programming
Chapter 3 Program Design
Web Programming
Modern Management and Information Technology
College of Arts, Media and Technology, Chiang Mai University

2. Contents Creating an Input, Processing, Output (IPO) chart
Web Programming
Contents
Creating an Input, Processing, Output (IPO) chart
Designing the User Interface
Developing an Algorithm

3. Creating an Input, Processing, Output (IPO) chart

4. Input, Processing, Output (IPO) chart
It helps to write the program's inputs, processes and outputs as a list or table,
An IPO chart makes it easier to think about the design for your algorithm.

5. Input, Processing, Output (IPO) chart
Web Programming
Input, Processing, Output (IPO) chart
Example: IPO listing for a circle calculation program
Inputs: radius
Processing:
receive the radius from the user
calculate the area
calculate the circumference
display the radius, area and circumference
Outputs: radius, area and circumference
Radius – รัศมี
circumference - เส้นรอบวง

6. Designing the User Interface

7. Designing the User Interface
Web Programming
Designing the User Interface
Once we have an idea of inputs, outputs and processes, the next step is to design the user interface (also known as storyboarding)
Designing the interface helps us to plan our algorithm because it is common to design different parts of a program (the program modules) around each screen of an interface

8. Designing the User Interface
Example : The proposed design for the Circle Calculation interface
Source: Mike O’Kane (2011) A Web-Based Introduction to Programming

9. Designing the User Interface
Web Programming
Designing the User Interface
For more complex applications, the design phase is extensive.
Programs will be broken down into a large number of different modules and screens.
The work of software design is undertaken by senior programmers, while junior programmers develop the design into working code

10. Designing the User Interface
Web Programming
Designing the User Interface
Once you have a clear idea of your interface, it is useful to go back to your customer and review the requirements
That's because people can think more clearly about what they want when they see what the product will look like
Frequently, customers will clarify their needs when they see the interface design

11. Developing an Algorithm

12. Developing an Algorithm
Web Programming
Developing an Algorithm
When we design an application, we usually write our algorithms in English (We call this style of writing pseudocode)
From the previous topic, we designed our Circle application in two components, so we will develop the algorithm for each component separately

13. Developing an Algorithm
Web Programming
Developing an Algorithm
Here are the instructions for the first screen (circle.html) that provides a form for the user
circle.html algorithm:
Prompt the user for radius
Get the radius
Submit the radius to circle.php for processing
END
Prompt = reminds the programmer that the user must be provided with a message in order to know what to do
Get = = reminds the programmer to provide some ways for the input to be received (ex. insert a drop-down list, input box)

14. Developing an Algorithm
Web Programming
Developing an Algorithm
Here is an algorithm for the PHP program (circle.php) that uses the radius (from the user) to calculate and display the results
circle.php algorithm:
Receive the radius from circle.html
area = PI * square (radius)
circumference = 2 * PI *radius
Display radius, area circumference
END

15. Developing an Algorithm
Web Programming
Developing an Algorithm
Look at the two calculations in our algorithm:
These statements contain program variables, assignments and arithmetic expression
area = PI * square (radius)
circumference = 2 * PI *radius

16. Developing an Algorithm
Web Programming
Developing an Algorithm
Variables
Computer programs must store data in memory, so the program can access it later
Every storage location in a computer's memory is identified by a unique numeric address
Rather than refer to these addresses directly, we should create and use variable

17. Developing an Algorithm
Web Programming
Developing an Algorithm
Variables
Each variable has a name that represents the location in memory where a specific data value is stored
area = PI * square (radius)
circumference = 2 * PI *radius
Variables
การตั้งชื่อตัวแปร : ต้องไม่มีช่องว่าง

18. Developing an Algorithm
Web Programming
Developing an Algorithm
Assignment Operations
An instruction to store a value in a variable is known as an assignment operation
Assignment operation are written by the variables that is to receive a value on the left side of the assignment operator (=)
Assignment Operations ก็คือ การกำหนดค่า โดยจะใช้เครื่องหมาย =

19. Developing an Algorithm
Web Programming
Developing an Algorithm
Arithmetic Expression
An arithmetic expression is an arithmetic operation that generates a numeric result
For example, 3+2 is an arithmetic expression
Arithmetic expression can also include variables and the combination of variables and numbers
So, radius*radius is an arithmetic expression and radius * 2 is also an arithmetic expression

20. Developing an Algorithm
Web Programming
Developing an Algorithm
Logical Expression
Logical expression (also called Boolean expression), is used to compare values and has a True or False result.
For example, radius < 20 is a logical expression which tests whether the value of radius is less than 20 or not