Unit 3 – Program Design

Instructor: Brent Presley

OVERVIEW

• Program Design• Algorithms• Levels of Design• IOOP’s• User Interface Design• TOE Charts• Flow charts• Pseudocode• Testing applications

PROGRAM DESIGN, WHY IS THIS IMPORTANT?

• Programming is part art, part engineering. Design is the engineering– Bridge builder example: don’t build bridge without design – Home builder example: don’t build a home without a blue print. – 40/20/40 Programming Rule:

• 40% of your time should be spent planning/designing the program and application

• 20% of your time should be spent coding • 40% of your time should be spent testing • This portion can vary greatly, but a good rule is that if you are

spending more time coding/testing – you are not spending enough time up front in the design phase.

DESIGN FAILURES

DESIGN FAILURES

DESIGN FAILURES

DESIGN FAILURES

DESIGN FAILURES

STEP BY STEP PROCESS

• Simplifies large program development– Break program into smaller parts

• Develop those parts separately• Why is this helpful?

– Small is easier to program than large– Testing small is easier than testing large. Imagine testing a

federal website vs testing a calculator– Leads to better programs– Easier maintenance of programs because problems are able

to be localized to a smaller area

• Document the parts consistently

STEP BY STEP PROCESS

• Better productivity and efficiency– Time spent designing and planning will reduce

the time spent at the computer creating the solution

• There is a trade-off between planning and getting to work.– Agile philosophy vs waterfall. You will see both

in the industry

ALGORITHMS

• Computers are designed to follow instructions– The programs you will write are a set of instructions

(using the C# programming language) that allows the computer to solve a problem or perform a task for the user.

– Algorithm – a set of well-defined steps for performing a task or solving a problem. Algorithms are written in English.

– Algorithms are converted into programming languages (Visual Basic, C#, Java, COBOL, RPG for example).

– The programming languages are converted into machine level language, which is used by the computer to perform the task or solve the specific problem.

LEVELS OF DESIGN

1. Define what the application is to do

2. Design user interface

3. Create toe chart to diagram the relationships between tasks, objects, and events

4. Flowchart and pseudocode each event

5. Test flowchart and pseudocode

LEVELS OF DESIGN – DEFINE WHAT THE APPLICATION IS TO DO• Use bowling application from Unit 4 as an

example. Open and demo it.• What is the application going to do?

– IOP can be used to analyze what’s needed (Inputs-Outputs-Processing)• Inputs = data that comes from a source outside the

program. A database, or user entry, etc• Outputs = end result of the program & how its done• Processes = what must be done, but not how.

LEVELS OF DESIGN – DEFINE WHAT THE APPLICATION IS TO DO – IOP CHART

– Use the table format above in an Excel sheet – Inputs and Outputs are nouns, simply a list of the program’s inputs and NET

outputs. – Process column contains processes required to convert inputs into outputs.

Each step begins with a verb (process)•  Steps to complete IOP:

• Start with the easy stuff. Inputs, then outputs. – These are usually clearly specified in the program requirements. – If not, get clarification, don’t assume.

• Fill in the processes for converting inputs to outputs.– Get all inputs– Calculate appropriate outputs

» Most outputs need to calculated» Some outputs are simply echoed. No processing required

– Display all outputs.

SCRABBLE IOP

IOP EXAMPLES – IN CLASS ASSIGNMENT IN TEAMS• Develop an IOP for the following

– meters to yards– Years to days

• Develop an IOP for bowling

BOWLING IOP

• Inputs Outputs ProcessingBowler Name Average Get InputsGame 1 SeriesGame 2 Next Bowl Date Calculate SeriesGame 3   Calculate AverageBowl Date   Calculate Next Bowl Date         Display Outputs                                             

METERS TO YARDS IOP

•

Inputs Outputs Processingmeters yards take meters and

multiply by a factor to obtain yards

   

     

     

YEARS TO DAYS IOP

• Inputs Outputs Processingyears total number of days determine if there is a leap year in each year being considered

beginning date  

multiply by 365 or 366 depending on the yearend date    

     

INDIVIDUAL EXERCISE

• Create an IOP for a program to generate a pay sheet. – Enter employee name, total hours worked,

hourly pay.– We want to know the employees name, regular

hours worked, OT hours worked, regular pay, OT pay, and gross pay

• Assume OT is paid at 1.5 * regular pay rate

PAYROLL IOP CHART

BAD GUI

BAD GUI

BAD GUI

BAD GUI

BAD GUI

BAD GUI

BAD GUI

BAD GUI

Interface Hall of Shamehttp://hallofshame.gp.co.at/

LEVELS OF DESIGN – DESIGN USER INTERFACE

• Plan the design of the user interface – the windows or web pages the user will interact with to complete the tasks.

• Design the user interface so that it is simple, self-explanatory and without distracting features.

• History of the Graphic User Interface– https://

www.youtube.com/watch?v=U1Oy4X5Ni8Y

UX GUIDELINES

• Color – Use dark text on light background– Be cautious with bright colors

• Contrast– Best contrast = black text on white background– “squint” test

• Best Practices site http://juicystudio.com/

• Padding– Spacing around boxes and text– Importance of whitespace

UX GUIDELINES

• Font– Be careful on what types

you use• Default may not be the best

choice• People are used to seeing

the defaults

– Use of bold, italics• may have odd display with

different fonts• Possibly hard to read

UX GUIDELINES

• UX and Layout Design - Oracle– https://www.youtube.com/watch?v=dXL2eTnWakA

• Windows Visual Guidelines– https://

msdn.microsoft.com/en-us/library/dn688964.aspx• Review Controls area• Review Text area (user interface text)

UX GUIDELINES – FLOW OF THE CONTROLS

• Flow of controls – left to right (buttons on right)

OR – top to bottom (buttons on

bottom)• Group common controls• Set the form location• Provide a Splash/Welcome

Screen

UX GUIDELINES – FLOW OF THE CONTROLS

• Define logical tab order• Assign tool tips• Provide keyboard access

– Use keyboard access keys

– Assign a default button and a cancel button

• Group common controls• Set the form location

COMMON WINDOWS CONTROLS THAT CAN BE USED IN DESIGN• Form• Textbox• Check box• Combo box• Group box• Date picker• Button

• Label• Radio button• List box• Picture box

ASSIGNMENTS

• Group– Create screen design for meters to yards– Create screen design for years to days– Create screen design for bowling

• Individual– Create screen design for Paysheet

LEVELS OF DESIGN -TASK –OBJECT-EVENT (TOE) CHART• Helps you determine

the following:– which objects to

create– which events to

respond to• Under the tasks, use

the IOP

TOE CHART - TASKS

• Tasks – separate into parts..– Input tasks, Output tasks,

Process tasks

• User provided information (based on IOP info)– Any Information or commands

the user enters– Results/output the application

will display or store– Processing needed to take the

input and develop it into results/output

TOE CHART - OBJECTS

• Objects– Assign each task an object in

the interface (text box, label, button, etc..) and give object a unique name

– Every item will have an object

• Textbox• Labels• Buttons

TOE CHART- EVENTS

• Event – Events are assigned to the objects

which will perform a task to process the information

– Text boxes/labels usually do not have events

• Events that you commonly have– btnCalculate– btnClear

TOE SHEET – METERS TO YARDS

IN CLASS ASSIGNMENTS• Download program design template• Small groups

– Create TOE chart for years to days– Create TOE chart for bowling

• Individual exercise– Create TOE chart for payroll example- via email

• Individual exercise to turn in– Rental Gas Cost Estimate program design, part

1 - on blackboard/OneDrive

YEARS TO DAYS TOE

BOWLING TOE

TOE CHART PAYROLL

LEVELS OF DESIGN – FLOWCHARTS & PSEUDOCODE• This step fills in the last details of the program. This step shows

how the actual tasks are accomplished – the algorithm to solve the task. This step consists of multiple diagrams, one for each part of the program.

• Any program can be written using a combination of three processing control structures: sequential processing, decision processing, and repetitive processing.

LEVELS OF DESIGN – FLOWCHARTS & PSEUDOCODE• To begin building your program design abilities, we’ll start by

learning how to design and code sequential processing programs. After you’ve mastered/experienced this, we’ll move on to the other two (later in the course)

• This step of design can be done using a multitude of tools/techniques; you’ll learn about two of them: flowcharts and pseudocode

FLOWCHARTS

Download Visio Instructions from website

FLOWCHARTS

FLOWCHARTS

FLOWCHART RULES

• One output box (I/O) per output command.

• Lines connecting symbols should have arrows pointing to the following symbol

• If abbreviated variable names are used, I recommend a legend or glossary box near the bottom of the flowchart.

VISIO EXAMPLE–YEARS TO DAYS

INTRODUCTION TO VISIO

• Introduction to Visio– https://

www.youtube.com/watch?v=ivOS3haI2NY

– The first 6 minutes or so are relating to programming flow charts

• Flowchart visualization of decision structures– https://

www.youtube.com/watch?v=MHe1N5veQhg

WHAT ARE THESE FLOW CHARTS DOING?

VISIO PRACTICE• Open Visio

– If you do not have it, follow along and install it in your machine prior to the next class

– Create this diagram

ASSIGNMENTS

• Create flowcharts for the following: Hand-in as group (all names) -via email– Meters to yards– Years to days– Bowling

• Individually -via email– Pay sheet program flowchart

PSEUDOCODE

• Structured, English-like statements that represent the sequence of steps a program follows to complete its task.

• Easier to generate than the pictorial design techniques– can be quickly generated

using any word processor– As programmers gain

experience, their pseudocode begins to look more and more like actual code, making it less useful as documentation for non-programmers.

PSEUDOCODE VS FLOWCHARTS

• Supervisors prefer the pictorial design techniques. Automated tools have made generating and changing flowcharts easier.

• Where pseudocode is used, it is often strictly controlled, almost making it a language of its own.

• Pseudocode usually starts out with the event module’s name and ends with the keyword End (or Return). Between these lines are English-like descriptions of the steps the program must accomplish. Keywords are used for certain types of processing.

PSEUDOCODE VS FLOWCHART

KEYWORDS FOR PSEUDOCODE

• Outputting Information:– DISPLAY (output to screen)– PRINT (output to printer)

• Arithmetic:– Mathematical formulas may be

preceded by the keyword CALCULATE, but this is not required. Formulas are usually self-evident without the keyword.

• Simply list the formula (result = equation) in your pseudocode.

• Initializing or assigning a value may be preceded by the keyword INITIALIZE, but this is not required

KEYWORDS FOR PSEUDOCODE

• Receiving Information:– READ (input from a file)

• Decisions– IF, THEN, ELSE, ELSEIF,

ENDIF, and CASE – To be discussed fully later

• Repetition– REPEAT… UNTIL, DO…

WHILE, FOR•  END• RETURN

ASSIGNMENTS

• Small groups– Create pseudocode for Meters to Yards and Years to Days– Create pseudocode for bowling– Create pseudocode for Paysheet program

• Individual exercises to hand in:– Unit 3 worksheet– Rental Gas Cost Estimate program design, part 2

TESTING ALGORITHMS

• Use IOP or TOE as a guide• For each input, select appropriate value• Determine the expected value of program

outputs (if possible)– May need to determine the values of the working

variables as well– Create multiple sets of test data to thoroughly

test the application. • Make sure to test data that will fail

BLANK TESTING PLAN GUIDE

SALES AMOUNT TEST EXAMPLETest Plan for : Sales Amount

  Assigned or Expected Values

Inputs: Test 1 Test 2 Test 3

salesTotal 25.00 1534.13 1000

taxRate 5.5% 4.25% 5 Percent

       

Processing Anticipated Equations

tax = salesTotal * taxRate tax = 25.00 * .055 tax = 1534.13 *.0425 Error

invoiceTotal = salesTotal + tax invoiceTotal = 25 + 1.38 invoiceTotal = 1534.13 * 65.20 Error

       

Outputs Anticipated Results

invoiceTotal 26.38 1599.33 Error

       

There may seem to be a lot of redundant information here, but when you combine this Test Plan tool with a debugger, they blend together very well.

While using a debugger, you can touch variable names (like salesTotal and tax in the example above) in a program that is running to see what values they contain.

compare these values with the values in your test plan to help uncover errors.

ASSIGNMENTS

• Rental Gas Cost Estimate program design, part 3• Math Program• Additional Assignment (you must pick one of the 3

on my website)