Lecture 1D - CST4708 - VisualStudio - Console & Windows Apps - (Part4) - Version4

CST4708 Lecture Notes
A Practical Approach to Object-Oriented-Programming

Object-Oriented-Programing Theory Using C#
Visual Studio IDE Overview & the Development Environment
Console & Windows Applications
(Part 4 of 5)
(Lecture Notes 1D)

Prof. Abel Angel Rodriguez
4.1 The Visual Studio Development Environment ............................................................................................................................ 3
4.1.1 Introduction & Chapter Overview ............................................................................................................................................ 3
4.1.2 Brief Overview of the Visual Studio 2019 IDE ........................................................................................................................ 3
4.1.3 Visual Studio Solutions, Projects & File Structure ................................................................................................................... 5
4.1.4 Installing Visual Studio 2019 IDE............................................................................................................................................ 6
4.2 Type of Applications you can create with Visual Studio ............................................................................................................. 7
4.2.1 Overview of Applications you can create in Visual Studio ....................................................................................................... 7
4.2.2 Type of Applications we will create in this course.................................................................................................................... 8
4.3 Creating a Console Application in Visual Studio Step-by-Step ................................................................................................ 14

4.3.1 Example Program #1: Console Application – Simple Login Authentication Application ........................................................ 14
4.3.2 Example Program #1: Console Application – Login Authentication Application .................................................................... 15
4.4 Creating a Windows Application in Visual Studio Step-by-Step.............................................................................................. 34

4.4.1 Example Program #2: Windows Form Application – Simple Login Authentication Windows Application ............................. 34
4.4.2 Example Program #2: Windows Form Application – Simple Login Authentication Application ............................................ 36
Built-in Automatic Windows Form-Driven Program Flow (You don’t implement this Algorithm it happens by default
automatically): ............................................................................................................................................................................ 66
Step a - Set Form Properties: ...................................................................................................................................................... 76
Step b - Set Labels Properties: .................................................................................................................................................... 77
Step c - Set Textboxes Properties: ............................................................................................................................................... 78
Step d - Set Buttons Properties:................................................................................................................................................... 79
Visual Studio 2019 Community Edition Installation Steps ............................................................................................................. 95
Appendix B Visual Basic Debugging Tool ..................................................................................................................................... 118
Appendix B1 Visual Basic Debugging Tool (Troubleshooting your code. Important!) ............................................................... 119
B1.1 Development Modes ............................................................................................................................................................ 119
B1.2 Programming Errors ............................................................................................................................................................. 119
Appendix B2 Debugging Tool (Troubleshooting your code. Important!) .................................................................................... 120

B2.1 Understanding the Debugger ................................................................................................................................................ 120
B2.2 Setting Breakpoints .............................................................................................................................................................. 121
2
Chapter 4 – Setting up your Visual Studio Programing
Environment
4.1 The Visual Studio Development Environment
4.1.1 Introduction & Chapter Overview

❑ In this lecture my goals are as follows:
1. Learn about the Visual Studio Integrated Development Environment (IDE)

tool and how is used to create applications in C#.
2. Provide step-by-step guide to create your LAB environment for this course
by installing Visual Studio 2019 (SEE THE APPENDIX SECTION AT THE END
OF THIS LECTURE)
3. Create your first C# program by creating a class and testing the class
❑ This chapter will assist you in preparing your lab environment required to create the applications required for HWs and Projects
in this course.
4.1.2 Brief Overview of the Visual Studio 2019 IDE

Overview of Visual Studio IDE main windows
❑ The Visual Studio Integrated Development Environment (IDE) is a creative launching pad that you can use to edit, debug, and
build code, and then publish an app.
❑ Visual Studio integrated development environment is a feature-rich program that a developer uses to perform the many aspects
of the software development process such as compilation, debugging etc.
❑ Visual Studio includes:
▪ Code Editors – to create and edit your code

▪ Graphical Designers ToolBox – to create the Graphical User Interface (GUI) for your application.
▪ Code Completion Tools – A code completion tools that uses intelligence or Machine Learning AI to predicts what should be
typed as you create and edit your code. It speeds up the coding process by reducing typos and common mistakes. In other
words, the AI is helping you make less mistakes when you are typing your code.
▪ Compilers – to compile your code from High-level Language like C# to Machine Language the computer understands.
▪ And many more features to ease the software development process. See the following link to get additional details on Visual
Studio:
https://docs.microsoft.com/en-us/visualstudio/get-started/visual-studio-ide?view=vs-
2019
▪ In this section, we will provide an overview only
3
❑ Image below illustrates some key features of the Visual Studio IDE:
▪ (#6) Cloud Explorer if selected for this frame

▪ (#5) Server Explorer if selected for this frame (not shown)
▪ (#4) Toolkit if selected for this frame (not shown) ▪ (#1) Solution Explorer
▪ (#3) Property Window if

▪ (#2) Editor Window selected for this frame (not
shown)
▪ (#7) Team Explorer if
selected for this frame
❑ Before providing a brief description of the image above, please note that the frames can be customized as you like.
❑ The image shows Visual Studio IDE with an open project and several key tools inside frame windows (key tools for this course
highlighted in yellow):
▪ Solution Explorer (top right #1) – lets you view, navigate and manage/organize your code files
▪ Editor Windows (center #2) – this is where you enter and edit your code. Most of your time will be in this
window
▪ Property Window (bottom right #3) – shows the properties for every class & objects selected in the editor
window. This window is not shown in this diagram, but very important for this class and will be shown in all the
future diagram illustrating the IDE.
▪ Toolbox Window (top left #4) – a palate of controls and forms for you to build your Graphical User-Interfaces
(GUIs). This window is not shown in this diagram, but very important for this class and will be shown in all the
future diagram illustrating the IDE
▪ Server Explorer & Cloud Explorer (top-left #5 & #6) – is where you have access to your servers and
physical computers hosting your applications in the cloud (Azure) or on-premise in the datacenter. Cloud explorer
window is being shown in the frame in the image.
▪ Team Explorer (bottom-right #7) – track work item and share code with others using version control
technologies such as Git, etc.
❑ In future sections we will dive deeper into the Solution Explorer Window, Editor Window, Property Window & Toolkit Window
in more details.
4
4.1.3 Visual Studio Solutions, Projects & File Structure
❑ With the Visual Studio Integrated Development Environment (IDE) you can create many types of applications and some of
these applications are composed of a SOLUTION and PROJECTS. Note that some applications can also be created without a
Project concept. Therefore, is important to understand what a SOLUTION & a PROJECT is:
▪ Below table describes the concept of SOLUTION and PROJECTS:
Folder Description
Solution Folder ▪ A Solution is a CONTAINER or FOLDER that holds ALL projects and files for an application.
▪ An application can be made of several code projects.
▪ Think of the solution as the CONTAINER that will host the entire application which may
includes multiple projects and their respective files all interconnected to make up the
application.
▪ A Solution has a file with extension .sln, which contains information on the solution, and the
projects, project items and files inside the solution.
▪ Think of a Solution as containing all files and metadata for the project.
▪ A solution is the top folder in the hierarchy for all project folders & files within the application
(see diagram below).
Project Folder ▪ A Project is a Visual Studio concept that encapsulate the code project for an application.
▪ A Project is CONTAINER or FOLDER that holds ALL project files and information on the
project.
▪ Within a Project folder, there is a hierarchy of files, folders and resources associated with the
project (source files, executable, DLL etc.).
▪ A Project has a file with extension .csproj, which contains information on the project and all
files inside the project.
▪ Think of a Project as containing all files and metadata for the project.
▪ Below diagram illustrates the layout of the FOLDERS and FILE structure for a solution with multiple projects.
Solution
Solution File
Project1 Project2 Project(n)
Project1 Folders Project(n) Folders

Project2 Folders
& Files & Files
& Files
Project1 Files Project2 Files Project2 Files
5
4.1.4 Installing Visual Studio 2019 IDE
❑ The APPENDIX Section of this document shows step-by-step guidance on installing the Visual Studio Integrated
Development Environment (IDE).
❑ NOW GO TO THE APPENDIX SECTION OF THIS

DOCUMENT FOR STEP-BY-STEP INSTRUCTION ON
INSTALLATION OF VISUAL STUDIO 2019
COMMUNITY EDITION AND YOUR
LAB/DEVELOPMENT ENVIRONMENT.
6
4.2 Type of Applications you can create with Visual Studio
4.2.1 Overview of Applications you can create in Visual Studio

❑ In this section we provide an overview of what you can accomplish with Visual Studio.
Type of Applications you can create with Visual Studio

❑ Visual Studio is an integrated development environment to create various type of applications such as:
Application Type Description

Web development ▪ Create Web application such as eCommerce apps etc., using
ASP.NET, JavaScript, Python and other web technologies
Cloud development (Application deployed in ▪ Deploy your web and other type of applications in the Azure
cloud) cloud.
.NET Desktop development – Console ▪ Create client Console Application or text-based using
Applications etc. command prompt. No UI apps.
.NET Desktop development – Windows Form ▪ Create client applications using Windows Forms.
Application
.NET Windows Presentation Foundation ▪ Windows Presentation Foundation (WPF) in Visual Studio
development provides developers with a unified programming model for
building line-of-business desktop applications on Windows
using .NET and Extensible Application Markup Language
(XAML).
Universal Windows platform development ▪ Create Windows 10 Universal Application that can be
purchased in the Windows store
.NET Core development ▪ .NET core is a new Microsoft Technology that enables
creation of cross-platform development – apps that can run in
several platform or operating systems such as Windows OS,
Mac OS, Linux, etc.
Mobile development ▪ Create cross-platform mobile development in Visual Studio
for Android, IOS, and Windows devices.
Game Development ▪ Use Visual Studio to develope cross-platform games and
apps.
Python ▪ Create Python applications including web applications, web
services, desktop apps, scripting,
Node.js ▪ Visual Studio allows you to easily create Node.js web
applications. Node.js is a server-side JavaScript runtime
environment that executes JavaScript server-side
Data storage processing ▪ With Visual Studio, you can design, deploy and maintain the
databases for your application. Create tables etc., right from
the Visual Studio window and create connections from your
application to the databases.
Data Science ▪ Create Data Science and Analytical Application using Visual
Studio, with Python being the primary scripting language
used for data science.
Office/SharePoint development ▪ You can also use Visual Studio to create applications for
SharePoint Online or SharePoint Server and other Office 365
workloads such as Excel, Office Add-ins, etc.
Linux Development ▪ Use Visual Studio to create applications for the Linux
Operating System in C++
7
Supported Programming Languages in Visual Studio
❑ Visual Studio support the following languages for the application types in previous section:
▪ C#
▪ F#
▪ Visual Basic
▪ C++
▪ Python
▪ JavaScript
Target Programming Languages for this course

❑ We will use C# language for all the programming in this course, unless otherwise stated:
▪ C#
4.2.2 Type of Applications we will create in this course

❑ This section lists the type of applications in scope of this course.
Type of Application we are targeting for this course

❑ The types of Visual Studio applications we will create in this course are follows:
1. Console Application – Text-based applications that run from a COMMAND PROMPT screen. All input
and output user interaction with application is text-based via COMMAND PROMPT screen or NO
interaction with user at all. Application simply executes and does what is intended to do with no user
interaction.
2. Windows Form Desktop Application (Form-Driven Windows Application) – Client application using
Forms to build your Graphical User-Interface & processing. User interacts with Forms.
3. Web Development with ASP.NET – Web application using ASP.NET web platform which provides all
the required services to build enterprise-class server-based web applications.
❑ In the next section we discuss each type of these applications in details.
8
Console Application Overview
❑ A Console Applications is a program whose output is usually text based (No Graphics).
❑ Console Applications usually do not contain Forms or any graphics.
▪ Console Applications are created when an application performs processing that requires very little or no user
interaction.
▪ They are lighter and have less overhead than standard windows applications since they contain no graphical libraries etc.
▪ Console Applications are a good choice when creating programs such as login scripts, device drivers, backend
processes, test programs, programs that control hardware devices etc.
▪ Great for scenarios where you DON’T need a UI.
▪ The results of a Console Application is placed or controlled from a Command Prompt Window:
Figure 1-Running Console Application
9
Windows Application (Form-Driven Windows Application) Overview
❑ Windows Application – Graphical Interface user application.
❑ This is the same typical Windows application that you normally use, such as MS WORD, Notepad, Excel, form-based applications,
etc.
❑ Windows Apps use graphical entities such as Forms/Frames, Controls such as BUTTONS, CHECK BOXES etc., to build the
Graphical User Interface (GUI) as shown in image below:
Figure 2-Login Windows Form Application

Figure 3-Running Windows Form Application
Figure 4-Windows Form Application with list box and additional controls
Figure 5-More complex Windows Form App
10
Figure 6-Single Document Interface (SDI) Windows Form App. Includes Frame with menu & document inside the frame
❑ Windows Application (Form-Driven Windows Application):

▪ The Windows Application is said to be Form-Driven Windows Application because:
o The FORM DRIVES & CONTROLS the flow of the program.

o When the program STARTS, IT IS A CHOSEN FORM THAT DRIVES THE PROGRAM (Usually the first FORM
created but does not have to be)
o WHEN THE FORM THAT DRIVES THE PROGRAM IS CLOSED or you EXIT, THE PROGRAM ENDS!
11
Web Application Overview
❑ A web application is an application that executes in a BROWSER CLIENT APPLICATION such as Internet Explorer, Edge,
Chrome, Firefox etc.
❑ These are applications created for the World-Wide-Web or Internet.
❑ These applications run in a Browser, but the actual Program Code for these applications resides in a Web Page stored in a Web
Server application. The Program Code in the Web Page is created using web technologies like HTML, Microsoft ASP.NET,
Java Server Pages, Node.js, JavaScript, Python etc.
❑ These types of applications are very popular today due to e-commerce and social media networks like Facebook, Twitter, mobile
app like Instagram, etc.
❑ Below are examples of web applications:
▪ Browser Client App
Figure 7-Web Application hosted by the Browser Application
▪ Web Page/Application from the Web Server

executed & rendered by the Browser Client App
12
Figure 8-Example of e-Commerce Web App ▪ Web Page/Application from the Web Server
executed & rendered by the Browser Client App
▪ Web Page/Application from the Web Server

Figure 9- Example of web portal to other web pages executed & rendered by the Browser Client App
13
4.3 Creating a Console Application in Visual Studio Step-by-Step
4.3.1 Example Program #1: Console Application – Simple Login Authentication Application
❑ In this section we create a simple Console Application text-based application using Visual Studio.
❑ Project Management Methodology – We will use a simple project management methodology that can be applied to
Waterfall or within Agile Methodology Sprints.
❑ The methodology is as follows:
❑ High-level description of this methodology:
▪ Planning – Plan the entire project from a high-level. Gather requirements from business. Decide on methodology etc.
▪ Analysis – Detailed analysis of the business & technical requirements. In addition to review, analysis of technology &
concepts to create application.
▪ Design – Organize all the requirements and produce a detailed design of the User-Interface presentation design, User-
Interface Code algorithm design, Class UML design and algorithms, Other code algorithm. This includes purchase of all
hardware, software etc.
▪ Implementation – Create the Application. Implement the UI Presentation Layer Design, UI Code algorithm, Class
specification and algorithm, any other algorithm implementation. Test and install system, train users, and document the
installation and Standard Operation Procedures (SOP)
▪ Maintenance\Administration – Monitor, backup & repair the system. Periodically audit system to ensure it
continues to meet requirements. Have a disaster/recovery system in place.
14
Planning & Analysis Phase
Step 1 – Analyze Requirements & Concepts
4.3.2 Example Program #1: Console Application – Login Authentication Application
Console Application Business Requirements

❑ The requirements are as follows:
▪ Create a Console Application that prompts the user for the username & password.
▪ Allows the user to enter the username & password
▪ The program displays the username & password on the Command Prompt screen
15
About Console Applications
Concept #1 – Console Applications are Test-based Applications
❑ A Console Applications is a program whose output is text based (No Graphics).
❑ The canvas is a text-based window with no graphics.
❑ As stated in previous session, usage are as follows:
▪ Console Applications are created when an application performs processing that requires very little or no user
interaction.
▪ They are lighter and have less overhead than standard windows applications since they contain no graphical libraries etc.
▪ Console Applications are a good choice when creating programs such as login scripts, device drivers, backend
processes, test programs, programs that control hardware devices etc.
▪ Great for scenarios where you DON’T need a UI.
▪ The results of a Console Application are placed and controlled from a Command Prompt Window:
16
Concept #2 – Console Applications HAVE NO BUILT-IN PROCESSING FLOW
❑ Unlike Windows & ASP.NET Web applications (we will look at this in sections to follow), Console
Applications have NO BUILT-IN processing flow other than calling a Main() function to execute. It is an empty/blank
application where the programmer needs to start from scratch:
▪ The only built-in flow is a call to a Main() function when the program executes.
▪ ONLY the Main() function controls the EXECUTION OF THE APPLICATION.
▪ When the Main() function ends execution, so does the program end.
▪ THERE IS NO ADDITIONAL built-in background program flow or code that will execute to assist you with the
application processing FLOW.
▪ IT IS AN EMPTY DEVELOPMENT ENVIRONMENT where the only automation provided by the environment is the
execution of the Main() function when you run the program. Once the Main() function ends execution, the
program ends.
▪ AS LONG AS THE Main() function IS RUNNING SO IS THE PROGRAM. ONCE THE Main() function
ENDS, SO DOES THE PROGRAM!
▪ This means THE CODE THAT CONTROLS THE FLOW OF THE APPLICATION IS INSIDE THE Main()
function. It is from the Main() function that ALL OTHER CODE YOU CREATE SUCH AS CLASSES,
OBJECTS, FUNCTIONS & PROCEDURES ARE CALLED FROM. The Main() function DRIVES &
CONTROLS the flow of the program
▪ In future sections, you will see that Windows Applications & ASP.NET Web Applications have additional
built-in processing flow that control the flow of the program in addition to the Main() function unlike Console
Applications.
❑ For a Console Applications are driven by the Main() function and the basic algorithm is shown below:
▪ When the program starts execution, it calls the Main() function and once the Main() function ends execution, the
program ends.
Built-in Program Flow Algorithm Built-in Program Flow Algorithm Pseudo-code

Flow Chart
START
➢ Based on the algorithm, the pseudo code look as follows
1. START
2. Call Main(x)
3. END
Call Main(x)
➢ Now all we need to do is translate the pseudo code to actual
language code.
END
❖ IMPORTANT! When creating Console Applications, YOU DON’T HAVE TO IMPLEMENT THE ABOVE
ALGORITHM, IT IS ALREADY BUILT-IN BY THE FRAMEWORK.
❖ When you RUN a Console Application, this algorithm is automatically EXECUTED.
17
Step 2 – Create the Console App Project
Create A Console Application Project & Understand Console Application
Structure
Step 1: Start Visual Studio
1. Go to Start Menu and navigate to Visual Studio 2019 icon or navigate location to Visual Studio 2019 shortcut icon to open
visual studio:
18
Step 2: Create a new Console Application:
1. In the Visual Studio 2019 screen select Create a new Project:
2. In the Create a new Project screen, 1) SELECT C# in the Language drop-down listbox, 2) SCROLL & SELECT
Console App(.NET Framework) C# version & 3) CLICK the Next button (caution – do not select console app(.Net
Core):
19
3. In the Configure your new project so the following: ENTER the following project properties & click Create:
1) ENTER the following project properties & BROWSE/NAVIGATE to the folder location you want to store the application
files:
Screen Property Value

Configure Project Name UserAuthenticationConsoleApp1
your new Location Browse to desired folder in your computer
Project Solution Name Assigned automatically via Project Location
Place solution and project in the Unchecked
same directory
Framework .NET Framework 4.7.2
2) CLICK the Create button to create the console application:
20
4. In the new Console Application UserAuthenticationConsoleApp is created. In this case displaying the following Visual
Studio frames/section which includes the following sections:
1) Code Editor Window – where you enter your code

2) Solution Explorer Window – List the files associated with your project (switch between files as needed in this window).
3) Properties Window – lists the properties of any objects in the editor window
▪ (#2) Solution Explorer
▪ (#1) Editor Window ▪ (#3) Property Window if

selected for this frame (not
shown)
21
Step 2: View the Created Files & Folder Created for the Application:
1. A Console Application will create a FILE STRUCTURE in your computer to host all your applications projects, files &
folders.
▪ The FILE STRUCTURE created in your computer contains the following components:
File Extension/Folder Project Item Description
Solution Folder Folder containing all project ▪ A solution is a container that holds all projects and files for an
folders and files. application.
▪ An application or solution can be made of several projects.
▪ A solution is the top folder in the hierarchy for all project
folders & files within the solution or application.
.sln Visual Studio Solution ▪ File containing information on the solution, and the projects,
project items and files inside the solution.
Project Folder A project is a Visual Studio ▪ Every application within a solution has a project folder.
project that you can create ▪ Within a project folder, there is a hierarchy of files, folders
or add to a solution to create and resources associated with the project (source files,
the application. executable, DLL etc.).
.csproj Project file ▪ File containing information on the project.
Bin/Debug Folder Folder that contains the ▪ This is an important folder that contains the actual executable
actual executable file (.exe) file (.exe) or program.
& others ▪ It also contains other files containing information on
debugging and the compilation etc.
.exe File The actual executable file ▪ The actual executable file (.exe) that is packaged and
(.exe) or the application installed on user’s computer so user can double-click it and
ready to run on any windows run the program.
computer ▪ Note that this file exists only after you build or compile the
application.
▪ This file is usually packaged for installation on a user’s
computer and shortcut in the start menu is created, so user
can select it and run the program.
22
2. NAVIGATE/BROWSE to the location you chose during the creation of the A Console Application project to store your
project/solution files. For this example, the location is shown below:
▪ Location of solution from

previous step
3. View the FILE STRUCTURE created by the Console Application in your computer as shown below:
▪ The Solution Folder:
23
▪ The Solution Folder containing the Solution file and the Console Application Project Folder:
▪ The Console Application Project Folder containing the Project Folders & files for the project:
▪ The bin/Debug Folder inside the Project Folder containing the .exe executable files to run the
application from any windows OS computer. Important – this file is currently empty since we have not yet compiled the
application. The image below was created after the build process executed later in this application:
24
Analysis – A brief look at the Console Application Editor Window and default
code generated by Visual Studio
❑ In the Program.cs file, if we look closely at the Editor window, we see that by default the following section of code
automatically created for the console application project template:
▪ Imported .NET Libraries - .NET framework libraries being used in this application
▪ The application Namespace – a namespace or .NET section is created for the application
▪ Class Program – the class created for this application
▪ Main() function method that controls the execution of the program:
o The Console Application will automatically create a Main() function that will control the program flow of the
program.
o When you execute the program, the code inside the Main() function will execute sequentially. Once every code in the
main method is executed, the program will end.
o This means once the last statement is executed and the end of the Main() function is reached, the program ends.
using System;
using System.Collections.Generic; ▪ .NET imported Libraries
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace UserAuthenticationConsoleApp1 ▪ .NET Namespace created for app

{
class Program
▪ Program Class for app
{
static void Main(string[] args)
{ ▪ Program execution STARTS here
}
} ▪ Program execution ENDS here
}
25
Design Phase
Step 1 – Design your Algorithm
Step 1: Plan your Code – Design your algorithm
❑ As with any application you create, you need to plan and design your algorithm or the list of step-by-step statements to solve your
problem
❑ In this step, you plan (THINK/DESIGN/CREATE) the steps required for the program to solve the problem:
▪ You write down the action required to solve the problem or ALGORITHM.
▪ You use programming tools like Flow Charts, Pseudo-code, UML to create your algorithm and workflow.:
o Flow chart – is a very important VISUALIZATION tools to help you design the necessary logic & flow in order to
solve the problem.
o Pseudo-code – is a language using short-hand English expressions that you derive from your Flow Charts.
o Unified Modeling Language (UML) – is another general purpose and common VISUALIZATION tool used to assist
in visualizing the design of a system. Very popular in designing Object-Oriented Class models.
▪ This is really the tough part of programming since it requires thinking, creativity, problem solving
skills etc. But in my opinion, the MOST VALUABLE ASPECT OF PROGRAMING!
❑ IMPORTANT! – Console Application Program Flow:
❖ Remember that Console Applications have a built-in program flow that simply calls the Main()
Function to execute when the program starts running.
❖ It is within this Main() Function that your application CODE will execute to control your application code and
programming flow.
❖ Once the Main() Function ends execution, so does the program.
26
❑ The built-in automatic flow that calls the Main() Function and the application algorithm CODE Flow Chart located in the
Main() Function is shown below. Also the derived pseudocode that will eventually be converted to language code as shown
below:
Your Application Program Flow

Built-in Program Flow Algorithm Algorithm Flow Chart
Flow Chart
START
START Main()
Prompt user for

username
Call Main(x)
Get username
from keyboard
END ▪ Your Application

CODE is here!
Prompt user for

password
Built-in Program Flow Algorithm Pseudo-code
Get password
➢ Based on the algorithm, the pseudo code look as follows from keyboard
1. START
2. Call Main(x)
3. END Display
username &
➢ Now all we need to do is translate the pseudo code to actual password
entered
language code.
END
Main()
Your Application Program Flow Algorithm Pseudo-code
1. START Main()
2. Prompt user for username
3. username = Get username from keyboard
4. Prompt user for password
5. Password = Get password from keyboard
6. Display username & password
7. END Main()
➢ Now all we need to do is translate the pseudo code to actual language code. 27
Implementation Phase
Step 1 – Implement the Algorithm Code
Step 1: Add Code in main() Function – Implement your Algorithm
❑ Based on the Flow Chart & Pseudo-code derived in previous section, we implement the algorithm using C# code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace UserAuthenticationConsoleApp1
{
class Program
{
{
▪ Program execution STARTS here
//Step 1 - Create variables
string username;
string password;
//Step 2 - Prompt user to enter usersname

Console.WriteLine("Please enter username");
//Step 3 - Get user imput & assign to username variable

username = Console.ReadLine();
//Step 4 - Prompt user to enter password

Console.WriteLine("Please enter password");
//Step 5 - Get user imput & assign to password variable

password = Console.ReadLine();
//Step 6 - display results

Console.WriteLine("The username you entered is {0}", username);
Console.WriteLine("The password you entered is {0}", password);
}
} ▪ Program execution ENDS here
}
28
Step 2 – Build/Compile & Debug the
Program
Step 1: Build the Application
1. Build the application to compile the program and generate the Machine Language executable program. In the Menu Bar
SELECT Build|Build Solution,
2. The Output Window is invoked at the bottom of the IDE with results of compilation.
▪ Output window displays

▪ Showing results of build
29
Step 2: Analyze the Results of the Build & Debug any Compiler Issues
1. Analyzed the results of the build:
▪ If build is a success proceed to RUN the program, else, engage in problem solving and debugging your code. Only when the
build is a success can we proceed to running the program.
▪ In this case, note the message indicates the following results:
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
▪ This indicates the build was successful for the 1 project, there were 0 failures etc. we can proceed to next step.
▪ Output window Contains

results of build – in this
case a success and no
errors
30
Step 4 – Run the Program
Step 1: [SKIP THIS STEP FOR OUR CLASSWORK. USED IN REAL WORLD SCENARIO] Run
the Application using Start button – Program executes you see no results
1. Run the Console Application as follows: In the Menu Bar SELECT the Start Arrow as shown below:
2. The Command Prompt Window is displayed. ENTER each requested input using the keyboard as requested by program:
31
▪ IMPORTANT! Once the last input is entered and you press the ENTER KEY, the application continues to execute and
DISAPPEARS IMMEDIATELY!
▪ This makes sense since Console Applications ends once the Main() function ends!
▪ All code gets executed in the Main() function and program terminates, unfortunately YOU WON’T SEE THE
RESULTS of the last two WriteLine() statements which display the results as highlighted below:
class Program
{
{
▪ Program execution STARTS here
//Step 1 - Create variables
string username;
string password;
//Step 2 - Prompt user to enter usersname

Console.WriteLine("Please enter username");
//Step 3 - Get user imput & assign to username variable

username = Console.ReadLine();
//Step 4 - Prompt user to enter password

Console.WriteLine("Please enter password");
//Step 5 - Get user imput & assign to password variable

password = Console.ReadLine();
//Step 6 - display results

Console.WriteLine("The username you entered is {0}", username);
Console.WriteLine("The password you entered is {0}", password);
}
▪ Program execution ENDS here
}
}▪ Once the last input is entered and you press the ENTER KEY, the application continues to execute and DISAPPEARS:
32
Step 2: [REQUIRED FOR OUR CLASSWORK] Run the Application using Debug|Start
Without Debugging option in the Menu Bar – Program stops before last program statement
1. Run the Console Application as follows: In the Menu Bar SELECT the Debug|Start Without Debuging menu option
as shown below:
2. The Command Prompt Window is displayed. ENTER each requested input using the keyboard as requested by program:
▪ IMPORTANT! Once the last input is entered and you press the ENTER KEY, the application continues to execute and
STOPS just before Main() function ends! Thus, allowing you to view the OUTPUT of the program.
▪ The Debug|Start Without Debuging mode, in a Console Applications, RUNS the program in DEBUG
MODE, stopping the program before the end of the Main() function so you can view and analyzed the results before
ending the program as shown below:
▪ Note that the output windows remain displayed until the user presses any key.
33
4.4 Creating a Windows Application in Visual Studio Step-by-Step
4.4.1 Example Program #2: Windows Form Application – Simple Login Authentication
Windows Application
❑ In this section we create a simple Windows Form Application in Visual Studio.
❑ We will analyze the requirements and derive WHAT needs to be done & HOW to implement following characteristics of
Windows Applications and theory.
The HOW – How are we going to implement this Application?

❑ We start with a project management methodology like Waterfall or Agile, Agile preferred & Best Practice!
❑ Project Management Methodology – We will use a simple project management methodology that can be applied to
Waterfall or within Agile Methodology Sprints.
❑ The methodology is as follows:
❑ High-level description of this methodology:
▪ Planning – Plan the entire project from a high-level. Gather requirements from business. Decide on methodology etc.
▪ Analysis – Detailed analysis of the business & technical requirements. In addition to review, analysis of technology &
concepts to create application.
▪ Design – Organize all the requirements and produce a detailed design of the User-Interface presentation design, User-
Interface Code algorithm design, Class UML design and algorithms, Other code algorithm. This includes purchase of all
hardware, software etc.
▪ Implementation – Create the Application. Implement the UI Presentation Layer Design, UI Code algorithm, Class
specification and algorithm, any other algorithm implementation. Test and install system, train users, and document the
installation and Standard Operation Procedures (SOP)
▪ Maintenance\Administration – Monitor, backup & repair the system. Periodically audit system to ensure it
continues to meet requirements. Have a disaster/recovery system in place.
34
Windows Form Application Business Requirements
❑ The requirements are as follows:
▪ Create a Windows Form Application that displays a Login Form requesting a username & password.
▪ The form is to contains Form Controls such as TextBoxes, Labels & Buttons to build your GUI
▪ After the username & password values are entered, if the user clicks the Ok button, a message is displayed via
a message box listing the username & password entered.
▪ When the user clicks the Cancel Button, the text boxes are cleared
35
Planning & Analysis Phase
Step 1 – Analyze Requirements & Concepts
4.4.2 Planning & Analysis: Windows Form Application Foundational Concepts
❑ We will discuss important concepts of an Windows Form Application that must be understood to develop these types of
applications.
About Windows Form Applications

Concept #1 – Windows Form Applications are Graphical User-Interface (GUI) Applications
❑ Windows Application – is a Graphical User -Interface application using a form or type of UI as a canvas and GUI Controls such
as textboxes, buttons, labels, tables etc., to build the user-interface.
❑ This is the same typical Windows application that you normally use, such as MS WORD, Notepad, Excel, form-based applications,
etc.
❑ Windows Apps use graphical entities such as Forms/Frames, Controls such as BUTTONS, CHECK BOXES etc., to build the
Graphical User Interface (GUI) as shown in image below:
36
Concept #2 – Graphical User-Interface Concept: Difference Between Graphical User-Interface
PRESENTATION Layer & Graphical User-Interface CODE Layer in a Windows Application
❑ In Windows Form Applications, there is a difference between the PRESENTATION CODE or code that renders the
graphics on the screen and the USER-INTERFACE CODE or code that handles the functionality of the User-interface:
1. Graphical UI PRESENTATION CODE Layer – The presentation layer is the code

that handles the VISUALS of a GUI Form or screen.
‐ This is the code that handles the rendering or putting the UI components on the
physical screen.
‐ This is the visual that you see when a form or GUI screen is running such as buttons,
checkboxes, comboboxes, etc.
‐ The developer usually does not create this code, it is handled by the IDE
programming framework and the Operating System.
2. Graphical USER-INTERFACE CODE Layer – The User-Interface layer code is the

code that handles the INTERACTION or the programming of the functionality of the
GUI Screens.
‐ This is the code that handlers the functionality or what happens when the user
clicks a button, checks, comboboxes, etc.
‐ This programming code controls the actions or functionality that takes place when the
user interacts with the GUI controls.
‐ The developer Owns Creating this code. This is what User-Interface
Programming is.
37
❑ CONCEPT #2 TAKEAWAY – The Main Concept or TAKE-AWAY is that for Windows Application
concerning Presentation code & User-Interface code:
▪ For Windows Applications, both the Presentation code & User-Interface

code is COUPLED TOGETHER AS ONE!
▪ There is NO SEPARATION. THEY ARE LOCATED IN THE SAME
USER-INTERFACE OR SAME APPLICATION.
▪ WHEN YOU RUN A WINDOWS APPLICATION, THE GUI
RENDERING OR PRESENTATION CODE & USER-INTERFACE
CODE ARE FOUND IN THE SAME APPLICATION, THE WINDOWS
APPLICATION!!!!
▪ In other words, they live in the same house or Windows Application as shown below!
▪ Both Presentation Code & User-Interface Code reside in a

Windows Application
❖ As you will learn when we discuss Web Applications, the Presentation

code & User-Interface code are in separate application.
❖ This is an important difference between Windows Applications and Web

Applications that governed how these applications are created/programmed.
❖ Windows Applications provides a better user-experience when it comes to

performance than Web Applications since is the same process hosting the
Presentation code & User-Interface code.
❖ More on this in the future.
38
Concept #3 – Windows Application Architecture
Concept 3 Part 1 – Windows Application Physical Architecture (How is Physically

Configured/Topology)
❑ Client/Server Architecture Technology is one of the most widely used architecture for Windows & Web Applications.
❑ For a standard Two-Tiered Windows Application, the topology is composed of the following TWO PARTS or Tiers:
1. The Client – Custom Built by programmers at a company or PURCHASED from a software vendor. Usually, a
Windows Application or Windows Graphical Interface application (forms, frames, multi-window etc.)
2. The Server/Database Management System (DBMS) – A Database Server Application like MS SQL
Server, Oracle etc.
▪ Physical Computer
▪ Physical User Desktop/Laptop/Device
▪ SERVER Database Management System Application!

▪ CLIENT Windows Application!
▪ FOCUS of this section &
Discussion
3. The Network – A component that connects the two parts (Windows_Client &
Database_Client applications)!
❖ IMPORTANT! The complete application is a combination of BOTH, THE CLIENT APPLICATION & THE
DATABASE SERVER APPLICATION!!!!
❖ NEVERTHELESS, our focus is the Windows Client Application or what we refer to a Windows
Application which is the Front-End application used by a Computer User!
39
Concept 3 Part 2 – Windows Application Software Architecture (How is Application
Programmed)
❑ To implement or develop the Windows Application itself within this Client/Server Physical Architecture, we
need to base our application design on a SOFTWARE APPLICATION ARCHITECTURE. There are several types of
Software Architecture such as the Client/Server Software Architecture some simple, some complex. We will review
the following two:
▪ Simple software client/server architecture – This architecture is just a client talking to a Database
Management System.
▪ (Best Practice) Scalable Client/Server Software Architecture – This is a powerful scalable architecture
and focus of the application software architecture we will be using in the projects in this course.
Concept 3 Part 2a – Simple Non-Scalable Client/Server Software Architecture for a Windows

Application (not best practice but common)
❑ This is a simple architecture many developers especially in a teaching environment tend to immediately default to, but not scalable
for the Physical Client/Server Topology.
❑ This simple Windows Application software architecture looks as follows:
▪ All programming code (UI, Business

Classes & Data Access Classes) located in
the Windows Client container
▪
▪ In this scenario, all the User-Interface Code & Class Processing Code are inside the Windows Client
Application:
o Presentation Code
o User-Interface Code
o Classes to process the application functionality
o Classes to communicate with the database on behalf of the business classes.
▪ Main point is that ALL CODE IS IN THE Windows Application executable and this approach is non-scalable. It cannot
be spread across the N-TIER Client/Server Physical Architecture.
40
❑ For a basic Windows Application architecture integrated into the Client/Server Physical Architecture looks as follows:
41
Concept 3 Part 2b – N-Tier Scalable Client/Server Software Architecture (best practice & used
for Enterprise Apps)
❑ This architecture is best practice and used in creating enterprise applications.
❑ This scalable N-Tier Windows Client/Server Software Application architecture looks as follows:
▪ All code, Presentation/User-Interface,

Business Processing Classes, Data Access
Processing Classes are separated into
separate containers.
▪ TAKEAWAY –
1. User-Interface Code is separated from

Processing Code!
2. All containers (Presentation/User-
Interface, Business Processing
Classes, Data Access Processing
Classes) are Executed & Hosted by
the Presentation/User-Interface
container which is the Windows
Application Executable!
▪ In this scenario, the application code is separated as follows:
o Presentation Code & User-Interface Code are together in the same container which is the actual Windows
Application project. This container or project, is the executable windows project.
o The Business Classes or Classes that perform the business processing are separated into a separate container called a
Dynamic-Lync-Library (DLL) in .NET and JAR file in JAVA. Note that this container, CANNOT execute on its
own. It is just a container to separate it from other containers.
o The Data Access Classes or classes to communicate with the database on behalf of the business classes are in a separate
DLL/JAR container
▪ Main point is here is the following:
o Presentation & User-Interface CODE are in a separate container the Windows Application
executable where GUI Rendering & User-Interface code is found.
o Business Classes PROCESSING CODE is found in a separate container from Presentation & User-
Interface & Data Access Classes code called a JAR file in Java and DLL in .NET.
o the Data Access Classes PROCESSING CODE or code that handles the interaction with the Database, are also
in a separate container from Business Classes CODE & Presentation & User-Interface CODE also in
a JAR file in Java and DLL in .NET.
42
❑ The scalable N-Tier Windows Client/Server Software Application architecture integrated into the
Client/Server Physical Architecture looks as follows:
▪ CLIENT Windows Application with

Presentation/User-Interface, Business
Processing Classes, Data Access Processing ▪ Database Management System (DBMS)
Classes separated into separate containers! Application!
▪ Nevertheless, hosted and managed by the ▪ Also a separate application.
Presentation/User-Interface Windows
Application Executable
43
Concept #4 – Windows Form Applications are Form-Driven Windows Applications
❑ Unlike a Console Applications, The Windows Application is a Form-Driven Windows Application due
to the following:
▪ The FORM DRIVES & CONTROLS the flow of the program.

▪ When the program STARTS, OPENS A FORM THAT DRIVES THE PROGRAM.
▪ WHEN THE FORM THAT DRIVES THE PROGRAM IS CLOSED or you EXIT, THE PROGRAM
ENDS!
▪ This is done via 2 automatic built-in workflows that execute in a Windows Application:
1. Auto executed Flow #1 – Program calls the Main() function:
1) The Main() function auto-executes just like a Console Application.
2. Auto executed Flow #2 – The Main() function auto-executes another flow:
1) Enables some internal window application visual settings.

2) Sets text rendering window application parameters.
3) Creates a MainForm Object
4) Opens & Displays the MainForm
5) Program flow LOOPS while MainForm is Open (Form-Driven). Note Open means form is not closed. It
could be hidden or invisible, but the MainForm object is still running.
6) Your application code is created inside the Event-Handlers of the Main Form and all other Forms created,
execute as the user interacts with the controls on the Forms.
7) Once MainForm is closed Program ends since the Main() function also ends.
▪ Because is the MainForm inside the Main() function drives and controls the program flow, Windows
Applications are called Form-Driven Windows Applications.
▪ AS LONG AS THE MainForm object IS OPEN or RUNNING SO IS THE PROGRAM. ONCE THE MainForm
object IS CLOSED, SO DOES THE PROGRAM SINCE THE Main() function ENDS !
▪ In future sections, you will see that ASP.NET Web Applications has a similar multi-flow architecture but different
steps inside the Main() function.
44
❑ For a Windows Form Application that is form-driven, the basic high-level algorithm described above is shown below.
Built-in Program Flow Algorithm Built-in Program Flow Algorithm

Flow Chart (Part 1) Flow Chart (Part 2)
START
START Main()
Call Application.EnableVisualStyles()
Call Main()
Call Application.
SetCompatibleTextRenderingDefault(false)
END
Call Application. Run(new MainForm())
Display
MainForm Form ▪ Your Application
CODE goes here!
Execute MainForm
Form_Load Event-Handler & others code
Execute all Event-

while True Handler code in
MainForm is Form’s GUI controls
open (Your Application
Code
Is here in Event-
False Handlers)
Execute MainForm
Form_Closed Event-Handler & others code
END
Main()
❖ The difficulty is in deciding which part of your code implemented in which FORM & which Event-Handler Method
of the Forms!!
45
❑ The Windows Form Application that is form-driven, the pseudo-code for the high-level algorithm is shown below.
Built-in Program Flow Algorithm

Pseudo-code (Part 1)
1. START
2. Call Main()
3. END

language code.

1. START Main()
2. Call Application.EnableVisualStyles()
3. Call Application. SetCompatibleTextRenderingDefault(false)
4. Call Application. Run(new MainForm())
5. Display MainForm Form
6. Execute MainForm Form_Load Event-Handler & others code (Your Application Code goes here in
Event-Handlers)
7. While MainForm is open
1) Execute all Event-Handler code in Form’s GUI controls (Your Application Code goes here in
Event-Handlers)
2) Loop
8. Execute MainForm Form_Closed Event-Handler & other Event-Handlers code (Your Application
Code goes here in Event-Handlers)
9. END Main()
➢ Now all we need to do is translate the pseudo code to actual C# language code.
❑ IMPORTANT! When creating Windows Form Driven Applications, YOU DON’T HAVE TO IMPLEMENT
THE ABOVE ALGORITHM, IT IS ALREADY TAKEN CARED OF BY THE FRAMEWORK When you RUN a
Windows Form Application.
46
Concept #5 – Windows Application Programming User-Interface Programming is Event-Driven
Programming
❑ Event-Driven programming is used when programming using a GRAPHICAL USER INTERFACES (GUI).
❑ Event-Driven applications react to user EVENTS or ACTIONS taken upon a GUI FORMS & CONTROLS:
▪ An EVENT is an action you TRIGGER such as clicking a BUTTON buttons, checking a CHECK BOX, selecting RADIO
BUTTON, Moving away from a control, any graphical interaction with the CONTROLS in the FORM, etc., thus the name
Event-Driven.
▪ TRIGGERING the EVENT by taking an action on a GUI control, will automatically execute a special type of procedure
called Event-Handler:
▪ It is inside the Event-Handlers that you will add the steps or code to solve the problem
▪ Your programing code to respond to

the EVENT is placed inside the
EVENT-HANDLER
47
Concept #6 – The Two Aspects of Programming Windows Form Applications – 1) Designing
the User-Interface & 2) Programming the User-Interface Code Behind the Form
❑ In Windows Form Applications, when creating the Graphical User-Interface (GUI) programming requires
TWO aspects or TWO PARTS:
1. User Interface or Graphical Design – Dropping GUI CONTROLS on the Form to

design and build the layout of the User-Interface or what the user sees (Windows Form,
Controls etc.)
2. Programming the Code behind the Form or EDIT Window Code – Code behind the
Form or when the program code exists is inside the Event-Handlers of the controls
on the Form. This is where the programming is done in Event-Driven
Programming.
❑ This is all about Event-Driven programming since you are programming the Event-Handlers for the GUI
Controls in the form as in the previous example:
▪ Graphical User-Interface Graphical Design:
▪ Programming the code in the behind the Form or Event-Handlers programming:
▪ It is inside the Event-Handlers that you will add the steps or code to solve the problem
▪ Code behind the Form in the

EVENT-HANDLER
48
Step 1 – Create the Windows Form App
Project
Create A Windows Form Application Project & Understand Windows Application
Structure
Step 1: Start Visual Studio
1. Go to Start Menu and navigate to Visual Studio 2019 icon or navigate location to Visual Studio 2019 shortcut icon to open
visual studio:
49
Step 2: Create a new Windows Form Desktop Application:
2. In the Visual Studio 2019 screen select Create a new Project:
3. In the Create a new Project screen, 1) SELECT C# in the Language drop-down listbox, 2) SCROLL & SELECT
Windows Forms App(.NET Framework) C# version & 3) CLICK the Next button (caution – do not select
Windows Form App (.Net Core)):
50
4. In the Configure your new project so the following: ENTER the following project properties & click Create:
1) ENTER the following project properties & BROWSE/NAVIGATE to the folder location you want to store the application
files:
Screen Property Value

Configure Project Name UserAuthenticationWindowsFormsApp1
your new Location Browse to desired folder in your computer
Project Solution Name Assigned automatically via Project Location
Place solution and project in the Unchecked
same directory
Framework .NET Framework 4.7.2
2) CLICK the Create button to create the Windows Form Application:
51
5. In the new Windows Form Application UserAuthenticationWindowsFormApp1 is created. In this case displaying the
following Visual Studio frames/section which include:
1) Code Editor Window – where you create your GUI and enter the code to support the GUI
2) Solution Explorer Window – List the files associated with your project (switch between files as needed in this window)
3) Properties Window – lists the properties of any objects in the editor window, in this case manage the properties to the form
controls in the form GUI.
4) Toolbox Window – The Toolbox is a palette that holds the control objects such a TexBoxes, Labels, Buttons etc., you
will place on the Forms. In the default view the Toolbox is docked and hidden to give you more space in the edit window.
See the second image on the next page with the Toolbox opened.
▪ (#4) Toolbox Window with GUI

Controls to build the GUI (Hidden)
▪ (#2) Solution Explorer
▪ (#1) Editor Window

▪ Contains First Default
Form
▪ (#3) Property Window if

selected for this frame (not
shown)
52
▪ (#4) Toolbox Window opened
showing GUI Controls & other
GUI related feature to build the
GUI
53
Step 2: View the Created Files & Folder Created for the Application:
1. A Windows Form Application will create a FILE STRUCTURE in your computer to host all your applications projects,
files & folders.
▪ The FILE STRUCTURE created in your computer contains the following components:
File Extension/Folder Project Item Description
Solution Folder Folder containing all project ▪ A solution is a container that holds all projects and files for an
folders and files. application.
▪ An application or solution can be made of several projects.
▪ A solution is the top folder in the hierarchy for all project
folders & files within the solution or application.
.sln Visual Studio Solution ▪ File containing information on the solution, and the projects,
project items and files inside the solution.
Project Folder A project is a Visual Studio ▪ Every application within a solution has a project folder.
project that you can create ▪ Within a project folder, there is a hierarchy of files, folders
or add to a solution to create and resources associated with the project such as the Forms,
the application. source files, executable, DLL etc.).
.csproj Project file ▪ File containing information on the project.
Bin/Debug Folder Folder that contains the ▪ This is an important folder that contains the actual executable
actual executable file (.exe) file (.exe) or program.
& others ▪ It also contains other files containing information on
debugging and the compilation etc.
.exe File The actual executable file ▪ The actual executable file (.exe) that is packaged and
(.exe) or the application installed on user’s computer so user can double-click it and
ready to run on any windows run the program.
computer ▪ Note that this file exists only after you build or compile the
application.
▪ This file is usually packaged for installation on a user’s
computer and shortcut in the start menu is created, so user
can select it and run the program.
54
2. NAVIGATE/BROWSE to the location you chose during the creation of the Windows Form Application project to store
your project/solution files. For this example, the location is shown below:
▪ Location of solution
3. View the FILE STRUCTURE created by the Windows Form Application in your computer as shown below:
▪ The Solution Folder:
55
▪ The Solution Folder containing the Solution file and the Windows Form Application Project
Folder:
▪ The Windows Form Application Project Folder containing the Project Folders & files for the
project. Note the Fom1.cs file which contains the code you will enter on the form:
▪ Form code files
▪ The bin/Debug Folder inside the Project Folder containing the .exe executable files to run the
application from any windows OS computer. Important – this file is currently empty since we have not yet compiled the
application. The image below was created after the build process executed later in this application:
56
Confirmation of Concept #4 – Main() Function & Form-Driven Application
The Main() Function Creates the Form that Drives the Project
❑ In Concept #2 of this Windows Application Section, we stated that Windows Applications are Form-Driven
Windows Application due to the following:
▪ The FORM DRIVES & CONTROLS the flow of the program via the Main() function.
▪ The are 2 automatic built-in flows that execute in a Windows Application:

❑ To view these 2 flows, open the Program.cs file in Solution Explorer Window to see the Main() Function,
as you did for the Console Application:
▪ Creation of Form Object

that drives the program
workflow
57
❑ In the Program.cs file, if we look closely at the Editor window, we see that by default the following section of code
automatically created for the Windows Application project:
▪ Class Program – the class created for this application
▪ Main() function method that controls the execution of the program as follows:
1) The Main() function method CALLS a Static Method Application.EnableVisualStyles() to

handle internal visual parameters. This is internal to the project framework and we don’t need to concern ourselves with
this now.
2) The Main() function method CALLS a Static Method
Application.SetCompatibleTextRenderingDefault(false) to handle internal parameters for the project.
3) IMPORTANT! The Main() function method CALLS a Static Method Application.Run(new
frmLogin()) that CREATES THE FORM1 OBJECT THAT CONTROLS THE FLOW OF THE
PROGRAM!
‐ This FORM1 OBJECT controls the flow of the program and the end of the program.
‐ Once FORM1 OBJECT is closed, the program ends since there is no more processing and the END of Main()
function is reached
▪ See code & explanation below:

▪ .NET imported Libraries
using System;
using System.Collections.Generic; ▪ .NET Namespace created for app
using System.Linq;
using System.Windows.Forms;
▪ Program Class for app
namespace UserAuthenticationWindowsFormsApp1
{
static class Program
{
/// <summary>
/// The main entry point for the application.
/// </summary>
[STAThread]
static void Main() ▪ Program execution STARTS here
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new Form1()); ▪ Form1 Object is created here
} ▪ Form1 Object DRIVES the
} program since as long as is open
} the program continues.
▪ Once Form1 Object is closed, it is

▪ Program execution ENDS here the last code in Main() Fuction
and execution ENDS.
58
Analysis – A brief look at the Windows Form Application Form GUI & Controls
and default FORM code generated by Visual Studio in the Editor Window
Creating Your Graphical User-Interface GUI using the Form Controls & the Toolbox
❑ First thing to note when you create a Visual Studio Windows Form Application is the following:
▪ A blank Form is automatically created for you as a building block for creating you Graphical User-Interface
(GUI).
▪ This makes sense since Windows Application are Form-driven applications. When the program is executing, once you close
the main Form, the program ends.
❑ Second, clicking on the Toolbox icon on the left side of the IDE, will invoke the Toolbox:
▪ By default, the Toolbox displays a listing all GUI functionality & GUI Controls available for you to manage & create the
GUI (shown in image below on the left)
▪ Select the “All Windows Forms” command and the full palate of GUI Form Controls are displayed as shown in
image on the right.
▪ Click & drag onto the Form, the desired GUI Controls to design and build your Graphical User Interface
(GUI).
▪ The Toolbox window will automatically hide when done adding a control(s) or you can dock it and keep it permanently
open until you are don.
59
An overview of programming the code that drives the Form – Event-Driven Programming
❑ Programming in this type of scenario is based on Event-Driven Programming, where the programmer is programming Event-
Handler methods.
❑ The programing code to manage the Windows Form is entered in the Form Code Editor window of the form itself:
▪ There are two methods to open the Form’s Code Editor:
1) Double-click on the Form in the main Editor Window and the Form Code Editor file will open showing the
default code for a Windows Form Application.
2) In Solution Explorer Window, Right-click on the Form1.cs file and select View Code from menu as shown in image
below. The Form Code Editor file will open showing the default code for a Windows Form Application.
▪ Either methods will result in the Form Code Editor file opening showing the default code for a Windows Form
Application:
▪ Form Editor code file
▪ Form Editor code
60
❑ Analyzing the content of the Form Editor window, we see that by default the following section of code automatically
created by Visual Studio from the Windows Form Application project template:
▪ The Form Class – Visually the Form is a GUI, but the behind the scene the Form is a CLASS, and as you can see in the
code, a public partial class Form1 : Form CLASS is created.
▪ The Form Method() procedure – This is the method that controls the execution of the program:
o The Windows Form Application will automatically create a class and inside the class there is a Form
Method()procedure that will control the flow of the program.
o This method is automatically executed when you run the program. Once every code in the Form Method()is
executed, the program will end.
o This means once the last statement is executed and the end of the Form Method()is reached, the program ends.
▪ The Form_Load() Event-Handler Method – This is all about Event-Driven Programming where most of the
coding will be done inside Event-Handler Methods:
o An Event-handler is a method that will automatically execute when the event is tied to is TRIGGERED.
o The The Form_Load() Event-Handler Method will execute automatically when the form loads executing
the code inside the The Form_Load() Event-Handler Method.
o Place code inside the Form_Load() Event-Handler Method that you want executed at the start of the form
being displayed. You can do things like:
‐ Any initialization you wish to do such as modifying controls, opening a file and getting data, or anything you wish
to execute at the start of the program.
using System;
using System.ComponentModel;
using System.Data; ▪ .NET imported Libraries
using System.Drawing;
using System.Linq;
using System.Text;
▪ .NET Namespace created for app
{
public partial class Form1 : Form
{
▪ Form Class for this Form
public Form1()
{
InitializeComponent(); ▪ Form code execution STARTS here
}
▪ Form code execution ENDS here
private void Form1_Load(object sender, EventArgs e)

{
} ▪ Form Load_Event Handler

} automatically executes when Form
} loads
61
Design Phase
Step 1 – Design your GUI Presentation
❑ In this section we focus on the design of the Presentation Layer-GUID Wireframe and the User-Interface
Code that drives the Presentation Layer.
❑ For a Windows Form Application, the steps can be as follows:
1) Analyze the Business & Technical Requirements

2) Plan & design the GUI Presentation & Wireframe(Forms & Controls)
3) Plan & design the Property Values for the GUI (Forms & Controls)– Property names
Step 1: Design & Plan your Presentation Layer Design – Design your GUI Presentation
❑ We first focus on the Presentation Layer or design of the GUI.
Step 1-1 – Analyze the Business Requirements

❑ As with any application you create, you need to plan and design your algorithm or the list of step-by-step statements to solve your
problem based on the requirements:
▪ The form is to contains Form Controls such as TextBoxes, Labels, Buttons etc., to build your GUI
▪ After analyzing the Business & Technical Requirements, we know the following:
1) We need a FORM – A Login Form.

2) We need to create Form Controls such as TextBoxes, Labels, Buttons etc., to design & build our User-
Interface.
3) The users will enter the username and passwords in text boxes in the form.
4) If user clicks the OK button, a Message Box is displayed showing the username and password entered by the user.
5) If user clicks the CANCEL button, the text boxes are cleared.
▪ From results of the analysis know the following:
o Steps 1) and 2) involves the GUI design & the GUI controls needed. We need only one Form, a Login Form.
o Steps 3), 4) & 5) is the programming that needs to be done in the Event-Handler Methods of the OK & CANCEL
Control Objects of the Login Form.
62
Step 1-2 – Plan & Design the Presentation Layer Graphical User-Interface (GUI) Wireframe
❑ STEP 1 – PLAN & DESIGN the GUI or user interface Forms:
▪ We analyze the requirements to design our approach to creating this application:
▪ The form is to contains Form Controls such as TextBoxes, Labels, Buttons etc., to build your GUI
▪ Design the User-Interface (GUI) – You draw a Wireframe sketch of what the Front-End or GUI will look like and the Control
Objects required.
▪ You use programming tools like Drawing Tools to build the wireframe for the FORMS to create your GUID and
Form workflow:
o Drawing Tools to build the design wireframe for the FORMS – you first need to design what your GUI will look
like. You just don’t start dropping controls on a form and figure it out along the way. You first design your user
interface by figuring out the best GUI design for the users of the application, then you build it in Visual Studio.
o You can use drawing tools to help you. There are drawing specialized tools you can download and purchase that will not
only let you create your GUI design, but also create simulations of your program, so you can enter data and simulate the
flow of the GUI before you start coding. I believe Adobe has these types of a drawing tool.
▪ Based on the requirement section highlighted in BLUE, we need GUI Controls for the following logon screen Form: to
create a login screen with labels describing what it is and text box controls to accept the input from the user. In addition, push
buttons to proceed or cancel the operation. For example, we could draw the following diagram:
o Login Form – we will use the default Form1 as the logon screen
o Text Controls for user inputs – 2 Textboxes to store the username and password entered by the user
o Label Controls for description and message on the form – Label Control describing each Textbox and any other
message we wish to display on the form
o Button Controls to take actions by Triggering their Event-Handlers – 1 Button control for OK feature to execute code
to grab the user inputs & from username & password Textboxes, and display the values entered in the username & password
Textboxes.
▪ From the analysis, we design the following GUI wireframe:
Username
OK
Password Cancel
63
Step 2: Design a Naming Convention for GUI Form & Controls – Plan Your GUI Naming
Convention
❑ We focus on the names of the Forms & Controls created in the presentation Layer.
Step 2-1 – Plan & Design the Names of the Properties of the Form and the Controls on the
Form
❑ PLAN/DESIGN the Properties for the Form and Form Controls for each GUI user interface Form:
▪ Plan the Properties or attributes for each GUI Object such as the Form1, Labels, Textboxes etc.
▪ Property values can include name of control, text displayed and other important control properties.
▪ GUI controls come with a list of properties for you to use as needed.
▪ You need to write down the properties to the Control Objects that will make up the GUI. Usually you create a table listing the
control and its properties.
▪ From the diagram above we see that we need one Form, two labels, two textboxes and two buttons.
▪ After analysis and thinking we decide on the following properties and their values
Object Property Value

Form 1 Name frmLogin
Text Login Form
Label1 Name lblUsername

Text Username
Label2 Name lblPassword

Text Password
Textbox1 Name txtUsername
Textbox1 Name txtPassword
Button 1 Name btnOK

Text OK
Button 2 Name btnCancel

Text Cancel
▪ We are now ready to proceed to plan our code and algorithm based on the requirements.
64
Step 2 – Design your UI Code Algorithm
❑ In this section we shift focus to the algorithm code or User-Interface Code that is going to drive the controls in the
Presentation Layer-GUID Wireframe.
Step 1: Identify Where Location of User-Interface Code – Design Where to PLACE your GUI
Code
❑ In this section we focus on the design of the User-Interface Code that drives the GUI Controls from the previous section.
❑ Our focus is now on the Windows Form Application User-Interface Code Algorithm Design:
1) Understand the framework of a Windows Application and where within the auto-programming flow of the framework
is where you enter your programming code.
2) Plan & design the ALGORITHM for the programming code inside the Forms & Controls Event-Handler
methods.
Step 1-1 – Review the Windows Application Programming Flow from Concept #4 to decide
Where to place your Code
❑ As per previous sections, keep in mind the following:
▪ The are 2 automatic built-in flows that execute in a Windows Application:

▪ You need to program the MAIN FORM FORM1 and any other FORMS created via their Event-Handler Methods.
▪ So, the programming for the application is located inside Event-Handler Methods of the MAIN FORM FORM1
and any other FORMS created. Therefore, you are creating algorithm for the code inside the event handlers of the MAIN
FORM FORM1 and any other FORMS created. The only exception is the AUTO-BUILT-IN ALGORITHM of a
Windows Application which is already created for you.
❖ Conclusion – All programming is done in the Event-Handler Methods of the MAIN FORM
FORM1 and any other Event-Handler Methods of other FORMS you create!
65
Built-in Automatic Windows Form-Driven Program Flow (You don’t implement this Algorithm it happens by
default automatically):
❑ For a Windows Form Application, the algorithm for the automatic program flow that executes when a program starts is
shown below.

Flow Chart (Part 1)
START
Flow Chart (Part 2)
START
Call Main() Main()
END
Call Application.
▪ In some cases, developers

add Application CODE Call Application. Run(new Form1())
that need to happen
before the MAIN FORM
display!
▪ Can you think of code
that can go here? Display Form1 ▪ Your Application
Form CODE goes here!
Execute Form1
Form_Load Event-Handler & others code
Execute all Event-

True Handler code in
while Form1
Form’s GUI controls
is open (Your Application
Code
Is here in Event-
False Handlers)
Execute Form1
END
Main()
66
❑ The Windows Form Application Flow pseudo-code for the high-level algorithm is shown below.

1. START
2. Call Main()
3. END

language code.

1. START Main()
2. Possible Specific Code that need to take place before the Form Displays
5. Possible Specific Code that need to take place before the Form Displays
8. Execute MainForm Form_Load Event-Handler & others code (Your Application Code goes here in
Event-Handlers)
Event-Handlers)
2) Loop
10. Execute MainForm Form_Closed Event-Handler & other Event-Handlers code (Your Application
Code goes here in Event-Handlers)
11. END Main()
❑ IMPORTANT! When creating Windows Form Driven Applications, YOU DON’T HAVE TO IMPLEMENT
THE ABOVE ALGORITHM, IT IS ALREADY TAKEN CARED OF BY THE FRAMEWORK When you RUN a
Windows Form Application.
67
Step 2: Design the User-Interface Code Algorithm – Design your GUI & Code
❑ Now that you know where you can place your User-Interface Code, Create the algorithm.
Step 2-1 – Plan & design the ALGORITHM In desired location in the Forms & Controls Event-
Handlers
❑ PLAN & DESIGN the PROGRAMING CODE or ALGORITHM for the code that drives each Form based on requirements:
❑ In this step, you plan (THINK/DESIGN/CREATE) the steps required for the program to solve the problem:
▪ You use programming tools like Drawing Tools to create the Flow Charts, Pseudo-code, UML diagrams to create your
algorithm and program flow:
o Flow chart – is a very important VISUALIZATION tools to help you design the necessary logic & flow in order to
solve the problem. You can use a Drawing Tools to build the Flow chart.
o Pseudo-code – is a language using short-hand English expressions that you derive from your Flow Charts. Use any
word processor to create the pseudo-code.
o Unified Modeling Language (UML) Diagram – is another general purpose and common VISUALIZATION tool used
to assist in visualizing the design of a system. Very popular in designing Object-Oriented Class models. You can use a
Drawing Tools to create the UML Diagram.
▪ This is really the tough part of programming since it requires thinking, creativity, problem solving
skills etc. But in my opinion, the MOST VALUABLE ASPECT OF PROGRAMING!
❑ Since that Windows Form Applications are FORM-DRIVEN or controlled by a MAIN FORM which is controlled by
an automatic program flow built-in, you are only programming in Event-Handler Methods of the forms created for the
application. Therefore, you will need to:
1. Plan & create your algorithm for the desired Event-Handler Methods of the forms created in the application.
2. Implement the algorithm for each Event-Handler Methods of the forms using a programming language, in this case C#.
❑ Discussion of these 2 steps:
▪ Plan the Main Form Form1 code – In this step, you plan (THINK) the programming code or steps required for the program
to run based on the Business & Technical Requirements:
▪ The form is to contains Form Controls such as TextBoxes, Labels & Buttons.
▪ After the username & password values are entered in the Form’s text boxes, if the user clicks the Ok
button, a message is displayed via a message box listing the username & password entered.
▪ To create the algorithm for each Event-Handler Methods, use programming tools like UML, flow charts etc.
▪ We based our code design on the Business & Technical Requirement section highlighted in BLUE in the requirements
above.
▪ At this point we have executed the following steps:
1) Understand the framework of a Windows Application and where within the auto-programming flow of the
framework is where you enter your programming code.
2) Analyze the Business & Technical Requirements
3) Plan & design the GUI (Forms & Controls)
4) Plan & design the Property Values for the GUI (Forms & Controls)– Property names
68
▪ We understand the framework, analyzed the requirements, designed our GUI, designed the GUI control properties and we
know which Event-Handler Methods to place our code the OK & CANCEL Control Objects Event-Handler
Methods of the Login Form.
▪ We have everything we need to design the algorithm for the Event-Handler Methods of the forms needed for the
application, in this case LoginForm Event-Handler Methods.
Step 2-2 – Algorithm for the frmLogin Load Event-Handler:

❑ As per the auto-default program flow, the Form_Load Event-Handler method is one of the first event-handler
that executes when the program inside the Main() Function executes:
Algorithm the frmLogin LOAD Event-Handler code – frmForm1_Load () Event-Handler:
▪ Based on our requirements, this Event-Handler Method remains EMPTY with no code since there is no actions required
when the FORM LOADS, thus NO Algorithm.
Step 2-3 – Algorithm for the frmLogin OK button Event-Handler:

❑ We also identified that this part of this part of the requirements is implemented inside the OKButton_Click Event-Handler
method:
▪ This Event-Handler Method would be the best place to execute the following section of the requirements:
After the username & password values are entered, if the user clicks the Ok button, a message is displayed via a
message box listing the username & password entered.
Algorithm the OK Button Code – btnOK_Click() Event-Handler Method:
▪ The OK button Event-Handler Method algorithm is as follows:
Event-Handler Program Flow Algorithm

Flow Chart
START
OK button Event-Handler
Get username from

txtUsername.Text
Algorithm Pseudo-code
➢ Based on the flow-chart algorithm, the pseudo code look as follows

Get password from
txtPassword.Text 1. START OK button Event-Handler
2. GET username from username textbox: username = txtUsername.Text
3. GET password from password textbox: password = txtPassword.Text
4. DISPLAY username & password
Display 5. END OK button Event-Handler
username &
password ➢ Now all we need to do is translate the pseudo code to actual C# language code.
entered
END
OK button Event-Handler 69
Step 2-4 – Algorithm for the frmLogin CANCEL button Event-Handler:
❑ We also identified that this part of this part of the requirements is implemented inside the CancelButton_Click Event-
Handler method:
▪ This Cancel button Event-Handler Method would be the best place to execute the following section of the
requirements:
When the user clicks the Cancel Button, the text boxes are cleared.
Algorithm the Cancel Button Code – btnCancel_Click() Event-Handler Method:
▪ The Event-Handler Method algorithm is as follows:

Flow Chart
START
CANCEL button Event-Handler
SET text box:

txtUsername.Text = nothing
SET text box:

txtPassword.Text = nothing
END
Event-Handler Algorithm Pseudo-code
1. START Cancel button Event-Handler

2. SET username text box with blank: txtUsername.Text = nothing
3. SET password text box with blank: txtPassword.Text = nothing
70
Step 2-5 – Algorithm for the frmLogin Closed Event-Handler:
❑ As per the auto-default program flow, the Form_Closed Event-Handler method is one of the last event-handler
that executes when the program inside the Main() Function executes:
Algorithm the frmLogin Closed Event-Handler code – frmForm1_Closed () Event-

Handler:
▪ Based on our requirements, this Event-Handler Method remains EMPTY with no code since there is no actions required
when the FORM CLOSES, thus NO Algorithm.
71
Step 2-6 – Full View of all User-Interface Code:
❑ The big picture:
Built-in Program Flow Algorithm Built-in Program Flow Algorithm

Flow Chart (Part 1) Flow Chart (Part 2)
START
START Main()
Call Main()
Call Application.
END
Call Application. Run(new frmLogin())
▪ For this
Display application CODE
frmLogin Form
goes only in OK &
Cancel Event-
Handlers!
Execute frmLogin
Form_Load Event-Handler
OkButton_Event-
while True Handlers)
MainForm is
open Cancel
Button_Event-
Handlers)
False
Execute frmLogin
END
Main()
72
1. START
2. Call Main()
3. END

language code.

1. START Main()
6. Execute MainForm Form_Load Event-Handler & others code
OKButton Event-Handler and CancelButton Event-Handler)
2) Loop
8. Execute MainForm Form_Closed Event-Handler & other Event-Handlers code

9. END Main()
73
Event-Handler Program Flow Algorithm or your
code Flow Chart
START
Get username from

txtUsername.Text
Algorithm Pseudo-code

Get password from
txtPassword.Text 1. START OK button Event-Handler
Display 5. END OK button Event-Handler
username &
password ➢ Now all we need to do is translate the pseudo code to actual C# language code.
entered
END

Flow Chart
START
SET text box:

txtUsername.Text = nothing
SET text box:

txtPassword.Text = nothing
END
Event-Handler Algorithm Pseudo-code

➢ Now all we need to do is translate the pseudo code to actual C# language code. 74
Implementation Phase
Step 1 – Implement the Presentation Layer
Design
Step 1: Implement the Presentation Layer User Interface (GUI) – Implement your From Design
❑ Based on the Form Design derived in previous section, we implement the GUI as follows:
STEP 1-1 – using the Toolbox, ADD GUI CONTROLS based on our wireframe design for the
Form.
Username OK
Password Cancel
STEP 1-2 – Align & Position the GUI CONTROLS on the Form based on the wireframe design
of the previous section. The results is as follows:
75
Step 2: Set the Properties to all the Graphical User Interface (GUI) Forms & Controls – Set
Properties
❑ Based on the Form Design set properties as follows:
STEP 2-1 – review the Property Table from our design:

Text Login Form
Text Username
Text Password
Button 1 Name btnOK
Text OK
Text Cancel
STEP 2-3 – SET the Properties for the Form & each GUI CONTROL as follows:
1) DOUBLE-CLICK the Control to invoke the Property Window’s Property page for that Control.
2) SET the required property based on the table above.
3) ADJUST the layout as required.
4) REPEAT this until the Properties for the form and all the Control are set.
▪ Executing these three steps is each of the objects is as follows:
Step a - Set Form Properties:

Text Login Form
76
Step b - Set Labels Properties:

Text Username

Text Password
77
Step c - Set Textboxes Properties:

78
Step d - Set Buttons Properties:

Button 1 Name btnOK
Text OK

Text Cancel
79
Step 2 – Implement the User-Interface
Algorithm Design for each Form & Controls
Event-Handlers
Step 1: Implement OK Button Event-Handler from your Algorithm – Implement your Algorithm
❑ Based on the algorithm derived in previous section, convert the pseudo-codes to C# statements.
Step 1-1 – Review the OK BUTTON Event-Handler Method algorithm from design phase, since
you need to convert these pseudo-codes to C# code
Programming the OK Button Code – btnOK_Click() Event-Handler Method:
OK Button Algorithm Pseudo-code
1. START OK button Event-Handler

5. END OK button Event-Handler
80
STEP 1-2 – Open the Event-Handler Method to enter the code
❑ There are two methods I will show you on how to generate and display the Event-Handler Methods:
▪ Method #1 (Easiest – but does not work for all Event-Handler in a control, only the Default) – Double-Click on
the OK Button to invoke the Event-Handler Method Editor Window:
81
▪ Method #2 (works on all controls events) – Use Property Window to generate the OK Button to invoke the
Event-Handler Method Editor Window:
1) SELECT & HIGHLIGHT the OK Button on the form.

2) In the Property Window, SELECT the Event Icon in the menu bar to display the all the events for this Control:
▪ Event Icon
3) SCROLL/NAVIGATE to the CLICK Event for this button and DOUBLE-CLICK the event as shown below:
▪ Double-click the Click Event
82
4) The Event-Handler Method Editor Window is invoked as in previous method:
83
STEP 1-3 – Implement the OK Button btnOK_Click() Event-Handler Method code
❑ IMPLEMENT the code for the btnOK_Click() Event-Handler Method as follows:
private void btnOK_Click(object sender, EventArgs e)

{
//Declare variables to store the username & password & to create our display string
String username;
String password;
String output;
//Set username & password variables with data entered by user in textboxes
username = txtUsername.Text;
password = txtPassword.Text;
//Create concatenated formatted string

output = "The username = " + username + "\n\n";
output = output + "The password = " + password + "\n\n";
//Display output string using MessageBox

MessageBox.Show(output);
84
Step 2: Implement CANCEL Button Event-Handler from your Algorithm – Implement your
Algorithm
❑ Based on the algorithm derived in previous section for the Cancel Button, convert the pseudo-codes to C# statements.
Programming the Cancel Button Code – btnCancel_Click() Event-Handler Method:
STEP 2-1 – Review the btnCancel_Click() Event-Handler Method algorithm pseudo-code

from design phase:
Cancel Button Event-Handler Algorithm Pseudo-code

85
STEP 2-2 – Open the Event-Handler Method to be able to enter the code. I will only use one
of the method shown in previous section:
▪ Method #1 (Easiest) – Double-Click on the OK Button to invoke the Event-Handler Method Editor Window:
STEP 2-3 – IMPLEMENT the code for the btnOK_Click() Event-Handler Method as
follows:
private void btnCancel_Click(object sender, EventArgs e)

{
//Clear the text boxes
txtUsername.Text = "";
txtPassword.Text = "";
86
Step 3: Summary of all the code – Entire Algorithm Implementation
Summary of all the Programming code in the Form Event-Handler Methods:

❑ The style of programming we have done in this example is known as EVENT-DRIVEN PROGRAMING and very popular
with GUI programming.
❑ The idea of EVENT-DRIVEN PROGRAMING is that you program Event-Handler Methods triggered by the user
interactions with the GUI. The programmer simply programs the Event-Handler Methods to do what the program should
do when the user interacts with each control on a form and triggered the Event-Handler Methods.
87
❑ Below is a summary of all the C# code for this application:
using System;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
{
public partial class frmLogin : Form
{
public frmLogin()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)

{
▪ OK button Event-Handler
} programmed
private void btnOK_Click(object sender, EventArgs e)

{
//Declare variables to store the username & password & to create our display string
String username;
String password;
String output;
//Set username & password variables with data entered by user in textboxes
username = txtUsername.Text;
password = txtPassword.Text;
//Create concatenated formatted string

output = "The username = " + username + "\n\n";
output = output + "The password = " + password + "\n\n";
//Display output string using MessageBox

MessageBox.Show(output);
▪ Canceel button Event-
} Handler programmed
private void btnCancel_Click(object sender, EventArgs e)

{
//Clear the text boxes
txtUsername.Text = "";
txtPassword.Text = "";
}
}
}
88
Step 3 – Build/Compile & Debug the
Program
Step 1: Build the Application
1. Build the application to compile the program and generate the Machine Language executable program. In the Menu Bar
SELECT Build|Build Solution,
2. The Output Window is invoked at the bottom of the IDE with results of compilation.
▪ Output window displays

▪ Showing results of build
89
Step 2: Analyze the Results of the Build & Debug/Fix All Compiler Errors
1. Analyzed the results of the build:
▪ If build is a success proceed to RUN the program, else, engage in problem solving and debugging your code. Only when the
build is a success can we proceed to running the program.
▪ In this case, note the message indicates the following results:
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
▪ This indicates the build was successful for the 1 project, there were 0 failures etc. we can proceed to next step.
▪ Output window Contains

results of build – in this
case a success and no
errors
90
Step 4 – Run the Program
Step 1: Run the Application using Start button – Program executes
1. Run the Windows Form Application as follows: In the Menu Bar SELECT the Start Arrow as shown below:
2. The Windows Form Application Login Form that CONTROLS the flow of the program is DISPLAYED:
▪ Running Windows Form

Application.
▪ The Login Form controls
the flow of the program
▪ Once you close this form,
the program ends
91
Step 2: – Test the Application by TRIGGERING Event-Handlers for OK & Cancel button
TEST #1 – The Login Form OK Event-Handler Method:

❑ We enter values in the textboxes and click ok button to execute the code inside the Event-Handler and see if the algorithm works.
1. ENTER a username and password in the Textboxes of the Login Form:
2. CLICK the OK Button on the Login Form to SELECT the OK Button Click Event-Handler Method and
display the message via a Message Box as shown below:
3. CLICK the OK Button on the Message Box to close the Message Box window & return to the Login Form window:
92
TEST #2 – The Login Form Cancel Event-Handler Method:
❑ We now clear the values in the textboxes by clicking the cancel button to clear each text box.
1. CLICK the Cancel Button on the Login Form to CLEAR the Username & Password Textboxes as shown below:
TEST #3 – CLOSE the Windows Form App by Closing the Login Form to Test END of Program
❑ To close the program simply close the Login Form which controls the program.
1. CLICK the Close Button on the Login Form (shown as an X top right side of form) to END the application and return to
the Visual Studio IDE as shown below:
93
Step 3: – Summary of Windows Form App – Did the Algorithm Work?
Summary & Results

❑ We followed a processed to create and program a basic Windows Form Application using Visual Studio:
1) The Windows Form App was created

2) The planning and design of the algorithm was executed.
3) Used EVENT-DRIVEN PROGRAMMING to program the Event-Handler Methods for the Login Form
and GUI Controls and IMPLEMENT our ALGORITHM.
4) We built & compile the program.
5) Ran or executed the program.
6) Finally tested the program to test our algorithm
▪ The result was a success!
94
APPENDIX A – Installing Visual Studio 2019 Community
Edition & Verifying your installation
Appendix A – Visual Studio 2019 Community

Edition Installation Steps
Visual Studio 2019 Community Edition Installation Steps
Overview of Installation
❑ This appendix provides the step-by-step instruction on the following:
▪ Installing Visual Studio 2019 Community Edition EXECUTABLE program on your computer.
▪ Testing your installation by creating a simple Windows Form application.
❑ Follow the steps in the next sections to create your development environment.
95
STEP 1– Confirm Visual Studio can run on your computer
❑ Below are the Visual Studio 2019 System Requirements from the Microsoft’s Visual Studio documentation website:
https://docs.microsoft.com/en-us/visualstudio/releases/2019/system-requirements
❑ I will show the listing of the full requirements for your information in case you run into some serious problems, but I will focus
on the main important requirements and steps for verification ASSUMING YOU HAVE WINDOWS 10!
❑ Below is a listing of the full requirements from the Microsoft website:
Visual Studio 2019 System Requirements
The following products support the minimum system requirements below:

• Visual Studio Enterprise 2019
• Visual Studio Professional 2019
• Visual Studio Community 2019
• Visual Studio Team Foundation Server Office Integration 2019
Supported Visual Studio 2019 will install and run on the following operating systems (64 bit
Operating Systems recommended; ARM is not supported):
• Windows 10 version 1703 or higher: Home, Professional, Education, and Enterprise
(LTSC and S are not supported)
• Windows Server 2019: Standard and Datacenter
• Windows Server 2016: Standard and Datacenter
• Windows 8.1 (with Update 2919355): Core, Professional, and Enterprise
• Windows Server 2012 R2 (with Update 2919355): Essentials, Standard, Datacenter
• Windows 7 SP1 (with latest Windows Updates): Home Premium, Professional, Enterprise,
Ultimate
Hardware • 1.8 GHz or faster processor. Quad-core or better recommended

• 2 GB of RAM; 8 GB of RAM recommended (2.5 GB minimum if running on a virtual
machine)
• Hard disk space: Minimum of 800MB up to 210 GB of available space, depending on
features installed; typical installations require 20-50 GB of free space.
• Hard disk speed: to improve performance, install Windows and Visual Studio on a solid
state drive (SSD).
• Video card that supports a minimum display resolution of 720p (1280 by 720); Visual
Studio will work best at a resolution of WXGA (1366 by 768) or higher.
Supported Visual Studio is available in English, Chinese (Simplified), Chinese (Traditional),

Languages Czech, French, German, Italian, Japanese, Korean, Polish, Portuguese (Brazil),
Russian, Spanish, and Turkish.
You can select the language of Visual Studio during installation. The Visual
Studio Installer is available in the same fourteen languages, and will match the
language of Windows, if available.
Note: Visual Studio Team Foundation Server Office Integration 2019 is available
in the ten languages supported by Visual Studio Team Foundation Server 2019.
96
Additional • Administrator rights are required to install Visual Studio.
Requirements • .NET Framework 4.5.2 or above is required to install Visual Studio. Visual Studio requires
.NET Framework 4.7.2 to run, but this will be installed during setup.
• .NET Core has specific Windows prerequisites for Windows 8.1 and earlier.
• Windows 10 Enterprise LTSC edition, Windows 10 S and Windows 10 Team Edition are
not supported for development. You may use Visual Studio 2019 to build apps that run on
Windows 10 LTSC, Windows 10 S and Windows 10 Team Edition.
• Internet Explorer 11 or Edge is required for internet-related scenarios. Some features might
not work unless these, or a later version, are installed.
• For Hyper-V emulator support, A supported 64-bit operating system is required. A
processor that supports Client Hyper-V and Second Level Address Translation (SLAT) is
also required.
• For Android Emulator support, a supported processor and operating system is required.
• Universal Windows app development, including designing, editing, and debugging,
requires Windows 10. Windows Server 2019, Windows Server 2016, and Windows Server
2012 R2 may be used to build Universal Windows apps from the command line.
• The Server Core and Minimal Server Interface options are not supported when running
Windows Server.
• Running Visual Studio 2019 (Professional, Community, and Enterprise) in Windows
containers is not supported.
• Team Foundation Server 2019 Office Integration requires Office 2016, Office 2013, or
Office 2010.
• Xamarin.Android requires a 64-bit edition of Windows and the 64-bit Java Development
Kit (JDK).
• PowerShell 3.0 or higher is required on Windows 7 SP1 to install the Mobile Development
with C++, JavaScript, or .NET workloads.
97
STEP 1a – Verify the Operating System Requirements: Windows 10 Operating
System version 1703 or higher & 64-bit Operating System
❑ To verify the version of the Windows 10 Operating System and if you have a 32 or 64-bit operating system, click the following
on your windows OS:
1. Navigate to Control Panel|Administrative Tools.

2. Double-click the System Information program to run it.
3. In the System Information program, go to left pane and select System Summary.
4. In the System Summary page, go to right pane, verify the following:
a) Operating System version = higher than 1703.

b) Operating System type = 64 bits
5. In the System Summary page, in the right pane, scroll as needed to verify each of the requirements above as follows:
6. KEEP the System Information program running since we will get all the information we need from this program.
98
STEP 1b – Verify the Hardware Requirements: Processor Speed & RAM Memory
❑ To verify the hardware requirements processor speed and RAM memory, do the following in the System Information program:
1. System Information program System Summary page, in the right pane, verify the following:
a) Processor Speed = 1.8 GHz or faster processor. Quad-core or better recommended

b) RAM Memory = 2 GB of RAM minimum; 8 GB of RAM recommended
2. In the System Summary page, in the right pane, scroll as needed to verify each of the requirements above as follows:
99
STEP 1c – Verify the Hardware Requirements: Hard Disk Fee Space
❑ To verify the hardware requirements for hard disk free space, do the following in the System Information program:
1. In the System Information program, go to left pane and select to expand Components.
2. In the Components tree, expand Storage.
3. In the Storage tree, select Drives.
4. In the Drives page, go to right pane, verify the following:
a) Free Space = 20-50 GB of free space recommended
5. In the Drives page, right pane, scroll as needed to verify this requirement as follows:
100
STEP 1d – Verify the Hardware Requirements: Minimum Display Resolution
❑ To verify the hardware requirements for minimum display resolution, do the following in the System Information program:
1. In the System Information program, go to left pane and select to expand Components.
2. In the Components tree, select Display.
3. In the Display page, go to right pane, verify the following:
b) Display Resolution = minimum display resolution of 720p (1280 by 720)
4. In the Display page, right pane, scroll as needed to verify this requirement as follows:
5. CLOSE the System Information program.
101
STEP 1e – Verify you have Administrators Rights: Must have administrative
privileges to install Visual Studio
❑ To verify the hardware requirements for minimum display resolution, do the following in the System Information program:
1. Navigate to Control Panel|Administrative Tools.

2. Double-click the Computer Management program to run it.
3. In the Computer Management program, go to left pane and select to expand Local Users and Groups.
4. In the Local Users and Groups tree, select Groups:
5. In the Groups page, go to right pane, Double-click the Administrators group to open its Dialog Window.
6. In the Dialog Window members section, verify the following:
a) Your username/account is in the list, which means that you have administrative privileges.
7. In the Dialog Window members section, your name should be listed, for example here is my username showing in the list as
a local administrator of my computer:
102
STEP 1f – Verify you Browser Requirements: Internet Explorer 11 or Edge
Browser Required
❑ In the second half of this course, we will need Internet Explorer 11 or Edge Browser to do our Web Development.
❑ If you have recently installed Windows 10 you should have Edge Browser installed.
❑ To verify the version of Internet Explore you have, do the following:
1. Download the Internet Explorer 11 Browser if you don’t have it.

2. If you already have Internet Explorer Browser but not sure of the version do the following:
1) Open your Internet Explorer Browser select the cog wheel icon on the top right of browser to invoke the Tools menu
and select About Internet Explorer:
2) The About Internet Explorer window should display verifying version 11:
3. If the version of your existing Internet Explorer Browser is not version 11, download the Edge Browser if you don’t
already have it.
103
STEP 2– Download & Install Visual Studio 2019 Community
Edition
Download Visual Studio Community Edition program
STEP 2a – Use link below to download the Community Edition of

Visual Studio
Actions Description
Install Visual Studio 2019 ▪ We will use the Visual Studio Community Edition for this course
o The Community Edition since is Free and contains all the feature and
(Community Edition) capabilities we will need for our lab environment.
Step 1 – Download & Install Visual o IMPORTANT! Note that the version of Visual Studio on your classroom
Studio 2019 Community Edition (Link computer is Visual Studio 2015. We will discuss how to work around this
on the right) issue when doing work in the classroom.
Step 2 – Follow instruction in this ▪ Links to download:

document for next steps
https://visualstudio.microsoft.com/downloads/
▪ Links to documentation:
o Installation and user guide:
https://docs.microsoft.com/en-us/visualstudio/get-
started/visual-studio-ide?view=vs-2019
o Visual Studio Documentation:
https://docs.microsoft.com/en-
us/visualstudio/windows/?view=vs-2019
104
STEP 2b – Close the Tips & Resources to get started, unless
you wish to get information from Microsoft etc., then enter
your information. This is not required for this course.
STEP 2c – Select the arrow next to Save Button, to show Save

As option. Click Save As.
105
STEP 2d – Browse/Navigate to the location you want to place
your installation file. Click Save button to save the file.
STEP 2e – Click to the Run button to begin the installation.
106
STEP 2f – Click YES when prompted to allow application to make
changes to your computer.
STEP 2g – In the Visual Studio Installer window, Click

Continue button to continue the installation.
107
STEP 2h – Identify the workloads or feature sets that you want
to install in Visual Studio.
▪ Our goal is to develop Desktop applications and Web

Applications.
▪ Select/Click the ASP.NET and Web development & .NET
Desktop development options as shown in screen below.
▪ Click Install button when done.
108
STEP 2i – Installation will continue. Do not close the window.
STEP 10 – When prompted to restart, Click Restart button to

end the installation.
109
STEP 3 – Verify Visual Studio Installation and Finalize the
Setup
STEP 3a – Open Visual Studio, use the Start Menu to navigate
to the Visual Studio 2019 icon & Select it to run the program.
110
STEP 3b – When prompted to sign in & Select Not now, maybe
later.
STEP 3c – When prompted to:

▪ select Development Settings, chose General.
▪ select Color Theme, chose Blue or desired color theme.
▪ Click the Start Visual Studio button.
111
STEP 3d – The Visual Studio 2019 project window will display,
ready for you to execute some of the following:
▪ Open a recent project – since this is a new installation,

there are no recent projects thus no option or drop-down
box is given to open it.
▪ Open an existing project or solution – existing
applications projects.
▪ Create a new Project – create a console, windows app, web
app, mobile app, etc.
▪ Other options
112
STEP 3e – Lets create a Windows Form Application to test our
setup:
▪ In the Visual Studio 2019 window, select Create a new

project button to invoke the Create a new project Window.
113
STEP 3f – In the Create a new project Window, do the
following:
1. SCROLL/NAVIGATE to the following application type:
Windows Form App (.NET Framework)
2. Click the Next button:
▪ Warning! Caution not to select Windows Form App (.NET

Core) by mistake. Most of the applications types are
targeted for different Operating System platforms such as
Mac OS, Linux etc.
114
STEP 3g – In the Configure your new project Window, do the
following:
1. In the Project name text box, ENTER the name for your
project
2. CLICK the BROWSE/NAVIGATE button to browse & navigate to

the location where you want your project files to exist.
3. CLICK the Create button to create your Windows Form

application.
▪ Caution! You can leave the other parameters as default.

Do not make any additional changes.
115
STEP 3h – The Project Window is displayed ready for you to
begin your coding. It includes:
▪ A form ready for you to begin to create your GUI.

▪ Solution Explore window to manage your application files.
▪ Property Windows to display the properties of your form
control objects or class object etc.
▪ Other windows/tools to develop your application.
116
STEP 3i – The Visual Studio 2019 Community Edition
Installation is complete & tested! You are now ready to create
your applications using Visual Studio. You may close this
window since we are not using this application at this point.
117
APPENDIX B – Visual Studio Debugger
Appendix B – Visual Studio 2019 Debugger &

Debugging your Application
Appendix B Visual Basic Debugging Tool
Overview of the Visual Studio Debugger

❑ This appendix provides an overview the following:
▪ What is the Visual Studio 2019 DEBUGGER?

▪ How to use Visual Studio 2019 DEBUGGER to troubleshoot logical issues in your application.
❑ This section is under construction. For temporary use, I copy/paste a lecture from a Visual Basic Programming course we can
leverage in the meantime until this section is updated
UNDER CONSTRUCTION
118
Appendix B1 Visual Basic Debugging Tool (Troubleshooting your code. Important!)
B1.1 Development Modes

❑ Visual Studio has three distinct modes:
▪ Design Time – When you design the User Interface (GUI) and writing the code.
▪ Run Time – When you execute and test the program
▪ Break Time – When you have Run time errors and you stop execution
B1.2 Programming Errors

❑ There are three varieties of programming errors:
▪ Syntax Errors – Errors generated due to the code not following the rules of the language
o These errors usually involve improper punctuation, spelling or format
o These problems are easier to solve since the compiler identifies the erroneous statement and you just have to review the
rules of the language to make sure you are writing the statement properly
▪ Run Time Errors – Program halts during execution. The program passed the syntax test but fails during execution. .
o These problems are usually caused by improper arithmetic execution, attempting to access recourses that are not available
etc.
o These problems are difficult to solve since they only show up when the program runs.
▪ Logical Error – The program is not doing what is supposed to do. .

o The algorithm fails to solve the problem the program was written to resolve
o These problems are even more difficult to solve since you need to re-think and go back to the planning phase and review
the Algorithm.
119
Appendix B2 Debugging Tool (Troubleshooting your code. Important!)
B2.1 Understanding the Debugger

❑ The Visual Studio debugger is a powerful and useful tool available for you to debug or isolate errors.
❑ Some errors are sometimes difficult to isolate when the program is executing. The debugger can assist you in isolating some of
these errors.
❑ The debugger is not intended to help you identify syntax errors, that is the job of the Compiler or Build engine.
❑ When you execute a program, you can execute it in Debug Mode.
❑ Once you execute a program in Debug Mode, you can use the tools and features of the debugger to isolate problems.
Why is Debugger Important?

❑ Provides a mechanism to TROUBLESHOOT your program.
▪ To be able to isolate section of code and be able to identify sections where your error may be.
▪ The debugger allows you to isolate RUN TIME ERRORS, which are very difficult to troubleshoot.
▪ The debugger provides the tools to isolate and identify where the error is being triggered as follows:
o Breakpoints – Isolate a section of code by setting Breakpoints to stop the execution at a particular point.
o Single-step through Breakpoints – stop at a breakpoint, then run again until next breakpoint)
o Single-step through each Instruction – single step instruction by instruction to identify where error is being triggered
120
B2.2 Setting Breakpoints
❑ The debugger contains many powerful features that I will not cover fully here, but one feature that we will be using quite often to
identify Run-Time Errors in our program is to set breakpoints.
What is a Breakpoint?
❑ Breakpoint definition:
▪ A location in the code program flow where you want the execution to pause.
▪ The idea is to pause at the breakpoint.
▪ a flag or insertion point that tells the debugger to temporarily STOP the execution of the program at that point.
How are breakpoints used to identify RUN-TIME ERRORS?

❑ Run-time errors are errors that occur during the run-time or execution of the application.
▪ During run-time, where an error occurs, an EXCEPTION is thrown by the framework/application.

▪ The resultant error message provides some insight, but from the message you most likely DON’T KNOW WHERE THE
ERROR IS!
▪ Debugging and Troubleshooting a run-time error is NOT EASY!
▪ Setting breakpoints allows you to implement the troubleshooting strategy called PROCESS OF ELIMINATION:
o Process of elimination is method of divide & conquer

o The idea is to break the program code into pieces, checking the input and output of each piece until you identify which
piece has the issue or program breaks.
o Once you identify which piece has the issue, you break that piece into pieces and repeat the process until you narrow down
to the smallest piece which should be the problematic code.
o The goal is to ISOLATE THE PROGRAMMING CODE WITH ERROR.
❑ Breakpoints work as follows:
▪ To implement Process of Elimination using Visual Studio, you use BREAKPOINTS to separate & enclose each piece during
a divide and conquer strategy.
▪ How ti works:
o The program execution will stop at every breakpoint in sequence of the program flow.
o As program flow executes from breakpoint to breakpoint, once a run-time error occurs between two breakpoints you found
the section where the error is located.
o Now you set breakpoints within the section that cause the run-time error, repeating this process until the troublesome code
is isolated!
❑ IMPORTANT!
❖ Without using BREAKPOINTS in most cases, it would be impossible to isolate a

RUN-TIME ERROR!
❖ Using breakpoints is the KEY TOOL to be able to troubleshoot programming errors!
121
How to SET Breakpoints in Visual Studio
1. Method 1 - At the desired point, in the code window, right-click on a code statement and a
menu will appear, select Insert Brakepoint:
▪ Step 1 – Identify the location in the code to insert breakpoint:
▪ Location
where we
want to set a
breakpoint
122
Step 2 - At the desired point, in the code window, right-click on a code statement and a menu will appear, select Insert
Breakpoint
▪ Insert the Breakpoint
123
Step 3 – a RED DOT or Breakpoint is set at the desired code location:
▪ Breakpoint Inserted
124
2. Method 2 - (easiest and recommended) - At the desired point or instruction, on the left border,
double click and the Brakepoint will automatically appear:
▪ Step 1 – Identify the location in the code to insert breakpoint:
▪ Location
where we
want to set a
breakpoint
125
Step 2 - At the desired point, in the code window, double-click on the VERTICAL GREY BAR on the left side of the code
window to Insert Breakpoint
▪ DOUBLE-CLICK here!
126
Step 3 – a RED DOT or Breakpoint is set at the desired code location:
▪ Breakpoint Inserted
127

Lecture 1D - CST4708 - VisualStudio - Console & Windows Apps - (Part4) - Version4

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 1D - CST4708 - VisualStudio - Console & Windows Apps - (Part4) - Version4

Uploaded by

Copyright:

Available Formats

CST4708 Lecture Notes

A Practical Approach to Object-Oriented-Programming

(Lecture Notes 1D)

4.3 Creating a Console Application in Visual Studio Step-by-Step ................................................................................................ 14

4.4 Creating a Windows Application in Visual Studio Step-by-Step.............................................................................................. 34

Visual Studio 2019 Community Edition Installation Steps ............................................................................................................. 95

Appendix B Visual Basic Debugging Tool ..................................................................................................................................... 118

Appendix B2 Debugging Tool (Troubleshooting your code. Important!) .................................................................................... 120

4.1 The Visual Studio Development Environment

4.1.1 Introduction & Chapter Overview

1. Learn about the Visual Studio Integrated Development Environment (IDE)

4.1.2 Brief Overview of the Visual Studio 2019 IDE

▪ Code Editors – to create and edit your code

▪ In this section, we will provide an overview only

▪ (#6) Cloud Explorer if selected for this frame

▪ (#3) Property Window if

▪ Below table describes the concept of SOLUTION and PROJECTS:

Project1 Project2 Project(n)

Project1 Folders Project(n) Folders

Project1 Files Project2 Files Project2 Files

❑ NOW GO TO THE APPENDIX SECTION OF THIS

4.2.1 Overview of Applications you can create in Visual Studio

Type of Applications you can create with Visual Studio

Application Type Description

Target Programming Languages for this course

4.2.2 Type of Applications we will create in this course

Type of Application we are targeting for this course

❑ In the next section we discuss each type of these applications in details.

Figure 1-Running Console Application

Figure 2-Login Windows Form Application

Figure 5-More complex Windows Form App

❑ Windows Application (Form-Driven Windows Application):

o The FORM DRIVES & CONTROLS the flow of the program.

▪ Browser Client App

Figure 7-Web Application hosted by the Browser Application

▪ Web Page/Application from the Web Server

▪ Browser Client App

▪ Web Page/Application from the Web Server

❑ High-level description of this methodology:

Console Application Business Requirements

Built-in Program Flow Algorithm Built-in Program Flow Algorithm Pseudo-code

Step 1: Start Visual Studio

1. In the Visual Studio 2019 screen select Create a new Project:

Screen Property Value

2) CLICK the Create button to create the console application:

1) Code Editor Window – where you enter your code

▪ (#2) Solution Explorer

▪ (#1) Editor Window ▪ (#3) Property Window if

File Extension/Folder Project Item Description

.csproj Project file ▪ File containing information on the project.

▪ Location of solution from

▪ The Solution Folder:

namespace UserAuthenticationConsoleApp1 ▪ .NET Namespace created for app

❑ IMPORTANT! – Console Application Program Flow:

Your Application Program Flow

Prompt user for

END ▪ Your Application

Prompt user for

Built-in Program Flow Algorithm Pseudo-code

Your Application Program Flow Algorithm Pseudo-code

➢ Based on the algorithm, the pseudo code look as follows

//Step 2 - Prompt user to enter usersname