Chapter 3 Program Design 954240 Web Programming 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 954240 Web Programming 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.

Input, Processing, Output (IPO) chart 954240 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 - เส้นรอบวง

Designing the User Interface

Designing the User Interface 954240 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

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

Designing the User Interface 954240 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

Designing the User Interface 954240 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

Developing an Algorithm

Developing an Algorithm 954240 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

Developing an Algorithm 954240 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)

Developing an Algorithm 954240 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

Developing an Algorithm 954240 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

Developing an Algorithm 954240 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

Developing an Algorithm 954240 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 การตั้งชื่อตัวแปร : ต้องไม่มีช่องว่าง

Developing an Algorithm 954240 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 ก็คือ การกำหนดค่า โดยจะใช้เครื่องหมาย =

Developing an Algorithm 954240 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

Developing an Algorithm 954240 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