1

INFORMATION SYSTEMS IIA 2021

C# PROGRAMMING

PREAMBLE
I have said before that programming is not difficult, but it does require practice and an attention to detail. I have also
mentioned that programming comes easily to some, but not to all, but everyone can learn to program! I taught you the
principles of designing good programs in the ISIB course; we now will learn how to implement these in a programming
language, and we will use C# for this purpose. C# is a programming language that is used in business more often than
others that tend to be used for more technical applications.

In previous years (before the Covid pandemic) ISIB would have a lab session each week, lasting up to 3 hours, where the
students would take the class example produced in the lecture in the previous week and create the C# solution for that
example. The ISIIA course would then cover more advanced C# topics. As we were not able to follow this approach last
year, we need a far more intensive approach to C# now, in order to make up for lost time. In addition, where you were
able to do the work in Wits’ computer labs before, with the assistance of tutors, you will now have to do the work more
independently. This is not entirely new, as many students would often choose to do the practical lab work at home or in
their own time.

The 1st session has step-by-step instructions, but thereafter there will be a short brief only, with some notes to help you
along for each session. Besides doing what the briefs say, you might also want to play around and see what else is available
in C#, but I will be expecting you to do what each brief says as a minimum. I will be available via Chat on Ulwazi during
each Tuesday afternoon session for you to ask questions, but you are also able to use the internet (however, see the next
sentence) as well as ask each other, as sometimes a different explanation can help. About the internet – when you search
for something online to do with programming, not only will you get MANY responses, but sometimes the answers you get
will be far more advanced (and complicated/confusing) than what you need. Because of this, it might be difficult to find
the answers you need on the internet. Students often ask for a text book or other recommended text. There are many
books available, but most approach C# programming at a console level (command line) of programming, and do not use
Windows forms, which is what we will use. The books are also very expensive, and for the limited use you will make of
these books, they are not worth it. I am going to suggest you use the briefs and notes I give you as the starting point. Then
if you need more assistance, speak to me or each other first.

As this is the 1st time I will be doing this practical work remotely, I will be providing more guidance (in the form of notes
together with the briefs) than I would if we were doing the practical work in a lab with tutors to guide you, so we may find
that this is too much or too little, but please give me feedback as you go along. It does mean there will be more reading
for you. Remember also that because attention to detail is important, reading carefully instead of just scanning over the
notes is important. Another complication is that, while I know how the software works in the labs, and all software is
loaded onto the machines in the same way, it is more difficult when each person has the software loaded in a particular
way and may have a different device with different constraints and settings.

We are going to build the solution for each class example we did in ISIB. If you no longer have the briefs, you can read
them in the document called Class Example Briefs, but it would be helpful to have the pseudocode and/or MOs at hand
as well. Those students who did ISIB before 2020 will have to familiarize themselves with these particular examples. You
may recall we produced the “plans” for each solution, we now have to “build” each one – those solutions we produced in
ISIB are the plans. To start, we need to download the software onto your laptops/computer.

DOWNLOADING THE SOFTWARE

Go to https://visualstudio.microsoft.com/downloads/. Then choose the Visual Studio 2019 Community Free download.
This means that you do not need a licence or product key. It will download an .exe file. Run it (click on it) and allow Visual
Studio Installer to make changes to your device. It will Download and Install (it may take a short while depending on your
computer and/or internet connection).
 2
It will then come up with various options in large rectangles, using small blocks (in the top right corner of each option)
that you click to make those choices. Make sure that you choose .NET desktop development and Universal Windows
Platform development, then choose Install. These are the options we need for this course, but as you go further with
development (for example, app development for mobiles), you will need other options. It will then install the software,
which may also take a little time (again it will depend on your situation). If you have clicked (chosen) Start after Installation,
Visual Studio will start automatically, else you will open it by choosing it in the apps on your device (or by clicking the icon
, if you have pinned Visual Studio to the Start bar). You can create an account; if you don’t, it will run for a trial period
and you will have to “start again”, so I suggest you create an account. It will ask you to Choose a color theme and select
your Development Settings. These don’t really matter and they can be changed later. Then choose Start Visual Studio.

INTRODUCTION TO C#
In the drop down lists, choose C# - Windows - Desktop for Languages, Platforms and Project types respectively. Then
choose Windows Forms App and click Next (this means we are developing a program using forms and windows). Once you
click Next, you will get a screen that asks for the details of your new project (see screenshot below – your location will be
different). Overtype WinFormsApp1 with ClassExample1 for the Name of your project/solution. If you do not type in
anything, it will default to calling the project WinFormsApp1, and each subsequent project will be …App2, … App3, etc.
This is very sloppy and will not help you when you are looking for a particular project/solution later, so please give the
project a meaningful name. There should be no spaces in the name. Underneath that type in the location where you want
your projects to be saved. This location is VERY IMPORTANT for finding the project later so make a note of the location
so you can find your project later.

Then click Next and Create on the following screen.

You should have a screen similar to the one on the next page. Under the image is an explanation of the different parts of
the screen and what they are used for [ignore that mine is called Class Example 1b here, yours should be Class Example
1].
 3

Every item that we place on the form is a type of control. The Toolbox is the area where we get the different controls to
put on the form. If the Toolbox on the left of the screen is not visible (but it says Toolbox vertically along the left of the
screen), click where that vertical tab says Toolbox (on extreme left). The Toolbox should become visible. To make it stay
visible, click on the pushpin (Auto Hide). Do the same if the Solution Explorer and/or Properties parts of the screen are
not visible on the right hand side of the screen. The Solution Explorer is where you can view the various files of the project
and solution. The Properties section is where you can view and change the descriptions of each of the controls. If the
Toolbox, Solution Explorer or Properties parts of the screen are not visible at all, you should go to the main menu bar at
the top of the screen and click View, then Toolbox, Solution Explorer and/or Properties Window. In the Toolbox, you can
click on the various arrow heads to show or hide the controls under each “heading”. To start with, we will be using the
controls under Common Windows Forms, so perhaps hide the rest for now.

You will now develop the solution to Class Example 1 from ISIB. (Remember Class Example 1 asks the user (for now the
customer who will order pizzas) to enter his/her name and phone number, and the program should display a message
that says Welcome to Pizza Pronto together with the customer’s name).

Now follow the steps very closely and carefully to code the program. Make sure you do not leave out any steps, and do
them in the given order. Following a process in this way will appear to be very tedious, and you will not have a step-by-
step set of instructions for future sessions, but it is to get you started so you know how to do things correctly from the
very beginning. Once you have done this a couple of times, it will be much quicker and easier.

Naming the Form

Click on the form (the centre grey square). Go to the Properties window (bottom right) and scroll until you find Design.
(Name) should be the line below, in the left column – you may need to expand (click on +) Design to see (Name). Some
versions may have (Name) and other properties already in the main list, i.e., not under other headings like Design. Scroll
up and down to find them. Double click on (Name) and then type in ClassEg1 (NO SPACES) in the right hand column – this
will type in the name of the form.

Scroll until you find Appearance (in the Properties window). Find the Text property (in the left column – again you may
have to expand Appearance); double click and type in Class Example 1 (THIS TIME THERE ARE SPACES) – this is the text in
the top left of the form (like a title) and is not a name, so it can have spaces.

Each time you double click on a property description (the left column of the Properties window), it will take you to the
actual property value in the right column so that you can view/change it.
 4
Sizing the form
Click on the form again (the centre square); make the form bigger by dragging the bottom right little square, until the form
is the size you want (this will depend on how much input and output will appear on the form – for this example, there are
only a few items, so the form can be relatively small).

Saving the project

At this point I want you to save your form (and work so far). To save in C#, we do not click the Save icon as we do in
Windows. We have to click on the Save All icon (as there are many files and folders associated with each program
solution we develop). The Save All icon is the 6th icon from the left in the Standard toolbar – the icon looks like two small
disks – NEVER just click Save!!! as then parts of your program will not be accessible. Save All will save all the files of the
project to the location you specified at the beginning. It is suggested that you regularly Save All!

Adding and naming controls

Go to the Toolbox (a reminder that you may need to expand Common Windows Forms to see the full Toolbox by clicking
on the arrow head) and click on Label, then click on the form (this will place a label onto the form).
Go to the Properties window, double click on Text and type in Pizza Pronto (this is the heading for our form).
Scroll to the Font property and expand it (click on the +); make the size 14 and the bold True (this changes the appearance
of the heading) – each time you double-click on the property and then type in or choose what the control should look like
– you are describing it! You can now drag that label to where you want the heading to be placed.

Go to the Toolbox, click on Label, then click on the form (this will again place a label on the form).
Go to the Properties window, double click on Text and type in Please enter your name (this gives the prompt for the
user – the customer).

Go to the Toolbox, click on TextBox, then click on the form (this will place a textbox on the form). You can drag to size it if
necessary. Go to the Properties window, find (Name) under Design, double click on (Name) and type in txtCustName (this
names our text box). Text boxes are for input – where the user will enter data on the form, for input to the program.

Go to the Toolbox, click on Label, then click on the form (this will again place a label on the form).
Go to the Properties window, double click on Text and type in Please enter your phone number (this gives the prompt
for the user to enter his/her phone number).

Go to the Toolbox, click on TextBox, then click on the form (this will place a textbox on the form).
Go to the Properties window, find (Name) under Design, double click on (Name) and type in txtPhoneNo (this names our
text box). Again, this is for input, for the user to enter data on the form, for input to the program.

Go to the Toolbox, click on Label, then click on the form (adding another label for our message).
Go to the Properties window, double click on Text and type in XXXXX (this places the XXXXX where our message will
display).
Also in the Properties window, find (Name), double click on (Name) and type in lblMessage (this names our message area)
(note the prefix is “ell bee ell” – not ones!)
Labels are used for titles, headings, etc., but are also used for output. This output means that the user cannot change it
once it is shown.
Go to the Toolbox, click on Button, then click on the form (this will place a button on the form). Each time you can drag to
(re-)size the controls you add to the form.
Go to the Properties window, find (Name), double click on (Name) and type in btnProcess (this names our button).
Also in the Properties window, double click on Text and type in Process (this is the text that will appear on the button).

What we have done is placed “controls” on our form and given them names and/or text where appropriate (the names
and/or text are the properties or descriptions for each of the controls). Labels that we do not need to reference in the
program do not need names (for example, the heading and the label for the prompt). Note that I have suggested you use
prefixes for all control names (txt for textboxes, lbl for labels, btn for buttons) which is good programming practice.
 5
You can arrange the controls (by dragging them) so that they are well spaced and neat (remember that this is the form
that the user will see, so it should look “professional”, but don’t spend too long on this).
You should have a form that looks similar to the one below.

Perhaps Save All again now, in case you haven’t. What we have done up to now is DEVELOP THE FORM. This is step FIVE
a) of The Process of Producing Programs that was covered in the notes in ISIB. We now will CODE THE SOLUTION. This will
be step FIVE b).

A quick note: when we developed the solutions in pseudocode and in our method outlines, we used the words Accept and
Display to input and output data and information. C# does not have these words so we use the forms and the code (in a
different way) to carry out these functions.

Writing code for the program

Double click on the Process button (this opens up the editor so you can write the code for the process button).

NB!!! Do not overtype/overwrite any code that is already on the screen!! This includes any code, brackets and
curly brackets, or punctuation marks that appear on the form.
Within the curly brackets (where the cursor was placed), type in (EXACTLY as given below)

lblMessage.Text = "Welcome to Pizza Pronto " + txtCustName.Text;

You should have the following code

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace ClassExample1
{
public partial class ClassEg1 : Form
{
public ClassEg1()
{
InitializeComponent();
}
 6

private void btnProcess_Click(object sender, EventArgs e)

{
lblMessage.Text = "Welcome to Pizza Pronto " + txtCustName.Text;
}
}
}

This is displaying the message together with the name that was input (accepted) into the text box on the form. Note that
there are no words saying accept or display.
There is probably a warning message about using a small “b”in btnProcess (some dots under the b) – you can ignore that.
They prefer to start names with uppercase, but I prefer to use lowercase for the prefix. Note the syntax. Each statement
in C# ends with a semi-colon, and groups of statements are in curly brackets. For now the curly brackets will enclose the
entire method that you code (for each button), but later we will use curly brackets for ifs and whiles as well.
The code starting with private void is a method and it starts with that line of heading, followed by curly brackets –
within these brackets will be the code you write for this method.

Click on the Design tab above your form (called Form1.cs [Design] ) to go back to the form. Note there are now 2 tabs, the
Design tab and the code tab. You can move between them by clicking the tabs. Note also that when there is an asterisk
next to the name(s), the form and/or form design have not been saved. Click on the Save All icon as before to save.

Running the program

Click on the green arrowhead in the Standard toolbar. If the program comes up with a box that says there were build
errors. Click No, so you can return to the program to fix what is wrong.
If there are no errors, enter a name and a phone number (these would usually be the representative examples from your
Test Plan) and click Process. Your program should now give the output that is shown in your Expected Results. If it doesn’t,
there is a problem with the code.
This is step SIX of The Process of Producing Programs that was covered in the notes in ISIB.

Close the program by clicking on the cross in the top right hand side. It will now return to your code.

You can now make the following changes.

Adding more controls

Go to the Toolbox (which only shows when you are on the form, not in the code). You should now add a button for clearing
the form. The Name should be btnClear, and the Text should say Clear. Do the same for an exit button. The Name will be
btnExit, and the Text is Exit.
Note the difference between the name of the controls and what the text is actually showing on the controls (the buttons
in this case).
Double click on the Clear button (this opens up the editor so you can write code for the method for the clear button)
Type in

txtCustName.Text = "";
txtPhoneNo.Text = "";
lblMessage.Text = "";
txtCustName.Focus();

Click on the Design tab to go back to the form.

Double click on the Exit button (this opens up the editor so you can write code for the method for the exit button).
Type in

Application.Exit();
 7
These 2 new buttons will allow us to clear the form and exit the program respectively. The focus property makes sure that
the cursor starts at the customer name when the program runs. You would always put focus to the input where you would
like the user to start entering data when the program starts.

Note that everytime you double click anything on the form, it will open a method for you to code. This can mean you have
a lot of empty methods, so try avoid double-clicking unless YOU WANT to write code. If you try and undo, you could lose
work if you haven’t been saving regularly. I would recommend that at the start, you save often so that you can undo, to
avoid having many empty methods (which again is sloppy and unprofessional), as you will find you double click often by
mistake.

Save All at this point and then you can play around with various properties.

Changing more properties of the form

Change the Background colour (BackColor under Appearance) of the form to any other colour (make sure you are on the
form and not within any control).
Change the StartPosition (under Layout) on the form to CenterScreen. The form then appears in the centre of the screen
when we run it.
Change the Foreground colour of the buttons (ForeColor under Appearance) to any other colour).
Include a PictureBox (from the Toolbox) on your form. Find a picture on Google (or elsewhere) that would be suitable for
your form. Include it by clicking on the Image property of the PictureBox, then clicking on the ellipsis (the 3 dots on the
extreme right). This will allow you to Import the picture onto your form. You will have to provide its location. You may also
need to re-size/move parts of your form and/or re-size the picture, depending on the size of the image.

You can also play with the properties of all of the controls, by changing them to see what happens. Save All and run again
each time, by entering different names and clicking Process, then clicking Clear. You might want to change the code for
the clear button, to re-insert the XXXXX when the form is cleared. To do this change the code to

lblMessage.Text = "XXXXX";
Finally to stop running the program, you can click the Exit button. Also close the project/solution by clicking on the cross
in the top right of the screen. Make sure you can retrieve/open it again, by looking in the location that you saved it.

Zipping and uploading to Ulwazi

Besides the instructions given below, you should also read the document “How to upload and download C# projects” for
a more detailed description of the process.

Close the project, then go to the highest level folder of your project – there should be a folder called ClassExample1. If
there is a file with the type Microsoft Visual Studio Solution under the same folder, go back a level so there is only the one
folder name in the list. Right click on the folder. Choose 7-Zip then choose Add to “ClassExample1.zip”. Please DO NOT use
.rar or .7z compression formats.
A compressed (zipped) folder should appear in the same location where you are working. Right click on the folder and
Rename it to your student number. Log in to the Information Systems IIA (INFO2000A) site on Ulwazi and upload the
zipped folder to Assignments/Lab 1.

NOTE WELL:
There are many instructions that are given in this document that you will need to follow/carry out for ALL your future
programs. These include the following:
 naming of the program and controls
 saving the program (both using Save All and specifying the location in which you will save your program)
 the fact that no given code should be overtyped or deleted
 the zipping and uploading of your program
 8
You will not be given step-by-step instructions for future examples, so you will need to create, develop, save, run and
upload future programs following these guidelines. Re-do this example again if necessary to make sure you know how to
do these things. After a few sessions I will show you how to copy an entire project/solution, but for now you need to be
able to create and develop a solution from scratch.

Some tips/notes:
 C# is case sensitive, so if Text needs a capital T, it must be a capital!
 C# makes use of Intellisense, which is a type of code completer. If it knows the possible completions for your code, the
suggestions will pop up as you type. As you continue typing, the list of the possibilities is filtered to include only what
is possible. Pressing Tab or Enter will insert the selected possibility, so you don’t have to type it.
 Syntax is VERY important in C#; this includes brackets, semi-colons, curly brackets, etc. Again, this means an attention
to detail is vital.

Remember “do not be afraid to fail, be afraid to try!” 