Getting Started on the Project Bank in Visual Studio
Figuring out what to do!
Perhaps the hardest question to consider when designing a site is the question “where
do I begin?”
To simply open Visual Studio and starting writing code is a skill that takes along time
to acquire.
Every skill that we have was not learnt over night and certainly not without proper
help and support.
When I was learning to ride a bike I had something like the one above. The important
and an essential part of the design were the stabilisers attached to the back wheel.
Eventually over time these were removed and I learnt to ride a bike without them.
The same is true of programming. However the good news is that not only are the
strategies helpful to people new to programming they are also essential tools for
experienced programmers. To some extent the stabilisers never come off.
We are currently in the process of using some of those tools.
We are…



Taking time to think about the problem
Working collaboratively to get a grasp of the problem
Using documentation to help us model the problem
o System specification
o Event tables

o Use case diagrams / descriptions
o Class diagrams
Using tools to support us (Enterprise Architect and Visual Studio)
There are a few other tools at our disposal to help us build the system.



Paper based designs
Smoke and mirrors prototype
Test Driven Development
Implementing the Use Cases
At some point we will need to turn our use case diagrams into presentation layer
artefacts.
In creating a web based interface this will involve ASP.NET web forms.
In creating a desktop application this will require a Windows executable file using
Windows forms.
Paper Based Designs
Paper based designs may be drawn up quickly and at low cost and allow the developer
to plan out the screens and the flow of the pages. Once the individual screens have
been designed they may be built up into a story board of the system allowing a
potential user to get a feel for the finished system without having to use a large
amount of development time.
Pen and paper is fast and cheap.
If your design is way off the mark of the client’s expectations then it isn’t too painful
to change it.
I often use rough scribbles on paper just to plan out ideas if I am not sure what I need
to do.
The Smoke and Mirrors Prototype
The picture of the cute bunny is here to illustrate the meaning of “smoke and mirrors”.
Smoke and mirrors are used by magicians to cover up what is really going on and to
give the illusion that some magic is taking place.
The Smoke and Mirrors prototype will do exactly this.
Firstly it is a tool to allow you to mock up the system to the client quickly with a
minimum of effort on your part.
Secondly it provides a useful discussion point with the user / client to establish if you
are on the correct track.
Even the most experienced of developers have incorrect assumptions about user
interaction.
What seems like a perfectly sensible design to you may be very confusing when
presented to the user.
When I was using Windows 8 for the first time it took me ages till I realised that the
settings option on the charms bar allowed you to configure the current open
application.
The smoke and mirrors prototype is a valuable tool that allows you to test your
assumption of how the system is to be used.
Fortunately Visual Studio is an ideal environment for designing a system as it
supports the creation of system prototypes.
To illustrate this we will look at a prototype, the DVD swap shop.
Type your email address and password to log into the system.
The interface should change like so...
Now make an offer on one of the DVDs.
Hopefully you will be fooled into thinking that this system is fully functional.
Stop the program and now take a look at the code for the program...
You may be interested to note that there really isn’t very much code at all in this
system.
The two main items of code are as follows.
Response.Redirect
Response.Redirect may be used to navigate from one page in the site to another.
Fore example the click event for the “Sign Up” button ...
Contains only the following line of code...
This tells the program to redirect to the page “signup.asp” when the user clicks on this
button.
Much of the functionality for the prototype is driven by Response.Redirect.
.Visible .Enabled & .Text Properties
Another way of creating the illusion of functionality is to use various control
properties.
Take a look at the page signup.aspx...
Double click on the page in the solution explorer to see the page.
The idea is that to sign up the user enters their first name, last name and email
address. They are then sent a password when they press the button “Send me my
password”.
Like so...
They press the “Send me my password” button...
Note the following





The email text box is greyed out so the user cannot change the address
The password text box is made visible
The create account button is made visible
The “send me my password” button is hidden
A message is displayed to provide further instructions
Take a look at the code for the “send me my password” click event...
Here you can see how the visible and enabled properties are being manipulated to
control the interface. Also see how the message is displayed in the label control.
The whole point of the above is that it is possible to create the illusion of a working
system with very little code.
Prototyping
Creating prototypes of a system is a very useful way of checking if the design is on
track.
Consider a prototype for a new design of car. The prototype will have the
dimensions, shape and colour scheme of the finished car. The prototype will not be
the finished car as it is only 60cm long.
A software prototype is a mock up of the finished system. It often looks like it works
as intended however the functionality is a trick. The finished code is not in place.
The above tools allow us to create our system with the constant input of the client /
users.
The worst possible situation with any system is to get to the end of the design process
and find that it is wrong in some fundamental way.
The Benefits of Prototyping
One big benefit of prototyping is that you are able to show your system design to your
client to see if it is what they are looking for.
A prototype may be created very quickly and easily modified to suit the needs of your
client.
The prototype should look like a professional piece of software however the
functionality is just an illusion.
Once you know that your prototype design is suitable then you may get on with the
task of making the code work.
However – now that you have your presentation layer clearly defined it provides a
bigger insight into how the middle layer code will need to work along with the sort of
tables and attributes the data layer will need.
Solutions and Projects in Visual Studio
Going off on a slight tangent from prototyping I want to cover a few points about how
we are going to configure Visual Studio to try and reduce the amount of work we will
need to do.
As we saw in the lab last week Visual Studio allows us to create projects and
solutions.
A project may be a web site, a desktop application, an application based in the cloud,
a mobile phone app, class library etc.
In Visual Studio we have the option of adding projects to a solution.
A solution is a master container that allows us to work on multiple projects at the
same time also to create a single class library and link that class library to the projects
in the solution.
Looking at this in Visual Studio we see the following…
Solution
Projects
In this solution we have created six projects






Address Book Finished – the IMAT1604 work you did last year
Bookshop
Class Library – the middle layer of the three layers shared between all of the
projects
Connect4 – a connect 4 game written in Visual Basic. (This set up allows us
to mix up our languages a bit!)
PBBackOffice – A C# Windows desktop application which would be used to
maintain the project bank data
PBFrontEnd – a C# ASP.NET web site which will be the front end for the
project bank application
If we look at this from the point of view of the three layered architecture we would
see the following structure (concentrating on the projects PBBackOffice and
PBFrontEnd)…
PBFrontEnd
(Interface)
Middle Layer
Business Logic
(Classes)
Data Layer
Database
PBBackOffice
(Interface)
What we have here are two projects defining separate presentation layers sharing a
common middle layer. Sharing a common middle layer means that both projects
ultimately share a common data layer.
So where is the data Layer?
In a real world system the data layer would be stored on a dedicated computer running
the full blown version of the database software.
Since Visual Studio allows us to develop systems without too much of a configuration
overhead we will be handling the data requirement slightly differently.
In order for this to work we need to arrange the folders within the solution in a
particular way.
In last years address book we created the data layer inside a special folder called
App_Data.
When we place the database inside that folder it is only available to the project and
not to other projects we may create.
To solve this we move the App_Data folder containing the shared database to the
same level as the other folders in the solution like so…
The class clsDataConnection has been designed in such a way that it will search in the
following order
1. In the local folder for the current project
2. In the root folder of the solution
This means that the data from the shared database may be accessed by all projects in
the solution.
The data in the database looks like this…
The main list in PBFrontEnd will look like this…
The main list in PBBackOffice will look like this…
Any change made to the data is seen in both projects.
Any changes to the code in the middle layer will be passed on to both projects sharing
the class library.
Thick and Thin Layers
We have already discussed the idea of thick and thin layers.
In the three layered architecture a layer may be completely absent or it may not have
much content at all i.e. thin.
When we are creating any code it is always a good idea to write with an eye to re-use.
Any code in the middle layer class library may be shared across multiple projects.
Any code that is in the presentation layer is much harder to share with other projects.
We want to create as little code in the presentation layer as possible.
.NET has a number of facilities allowing us to use as little code in the presentation
layer as possible.
In IMAT1604 last year we used the following function to populate the list box on the
presentation layer…
//function use to populate the list box
Int32 DisplayAddresses(string PostCodeFilter)
{
///this function accepts one parameter - the post code to filter the list on
///it populates the list box with data from the middle layer class
///it returns a single value, the number of records found
//create a new instance of the clsAddress
clsAddressBook MyAddressBook = new clsAddressBook();
//var to store the count of records
Int32 RecordCount;
//var to store the house no
string HouseNo;
//var to store the street name
string Street;
//var to store the post code
string PostCode;
//var to store the primary key value
string AddressNo;
//var to store the index
Int32 Index = 0;
//clear the list of any existing items
lstAddresses.Items.Clear();
//call the filter by post code method
MyAddressBook.FilterByPostCode(PostCodeFilter);
//get the count of records found
RecordCount = MyAddressBook.Count;
//loop through each record found using the index to point to each record in the data table
while (Index < RecordCount)
{
//get the house no from the query results
HouseNo = Convert.ToString(MyAddressBook.AddressList[Index].HouseNo);
//get the street from the query results
Street = Convert.ToString(MyAddressBook.AddressList[Index].Street);
//get the post code from the query results
PostCode = Convert.ToString(MyAddressBook.AddressList[Index].PostCode);
//get the address no from the query results
AddressNo = Convert.ToString(MyAddressBook.AddressList[Index].AddressNo);
//set up a new object of class list item
ListItem NewItem = new ListItem(HouseNo + " " + Street + " " + PostCode, AddressNo);
//add the new item to the list
lstAddresses.Items.Add(NewItem);
//increment the index
Index++;
}
//return the number of records found
return RecordCount;
}
This loop is working its way through each record in the address book collection.
Copying the data to the main list box…
What if I told you that we could do the same thing without the loop?
What we are able to do is tell the code these are the attributes of the collection class…
To use these attributes for the list.
This is really to once again illustrate the following points.


We want to achieve results with the minimum amount of effort possible.
If we configure our code and tools correctly they will do a great deal to
support us in writing simpler code.