Chapter 3 Program Design 954240 Web Programming Modern

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

Contents • Creating an Input, Processing, Output (IPO) chart • Designing the User Interface • Developing an Algorithm

Creating an Input, Processing, Output (IPO) chart

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. 4

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 5

Designing the User Interface

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 7

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

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 9

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 10

Developing an Algorithm

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 12

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 13

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 14

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

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 16

Developing an Algorithm Variables • Each variable has a name that represents the location in memory where a specific data value is stored Variables area = PI * square (radius) circumference = 2 * PI *radius 17

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 (=) 18

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 19

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 20