COMP3241 Practical Exercise 1: Web Server Environments
You should be aware that there is a lot of practical work to cover in this module!
already have some familiarity with HTML code, and constructs such as
hyperlinks and HTML
tables. Also, Cascading Style Sheets are used to control “look
and feel” of web sites, and some familiarity is again assumed.
Any existing knowledge of formatting and navigation within websites will be extended
to include “master/content” and “theme” pa
ge concepts, which will be investigated
before we get down to the serious business of creating a simple on
Static HTML pages, and HTML with embedded scripting (“client scripts”) run quite
happily through the browser, on the client ma
However, many web applications
you may be familiar with are actually “client server” applications. To create such
applications, “server scripts” are also essential as well as HTML and client side
To run web pages containing serve
r scripts, a web server that supports the scripting
language being used is required.
Knowledge of server
scripting with asp.net controls
is not assumed in this module, but understanding of client
server concepts will
certainly help! Y
ou will learn to use s
erver scripting for remote database interaction
with a client browser, in order to create a robust online shopping environment.
In this session
Familiarize yourself with Visual Web Developer/Visual Studio
Create ASP.NET pages using
Visual Web Developer
Use asp.net development server to create .aspx dynamic web pages
on a “file system” dynamic web site
Add some example server controls and event handlers to an aspx web
Setting up Visual Studio 2010 as a Development Environment
ummary of the client
As the web servers for the Business School currently use Microsoft Internet
Information Server, and the full Visual Studio environment is available for
editing purposes, it makes sense in the first insta
nce to use asp.net (and
.aspx scripts) to produce your web
Please note that Dreamweaver is an excellent tool for client
but recent versions are not compatible with asp.net.
Once they have been complete
d and tested, client
normally run the script on a remote server, which could be anywhere on the
www, and the user interface is created as a client
side page. When
it is often convenient NOT to use a remote web server
when developing the scripts (e.g. due to lack of connectivity), and only
uploading to the www server once the application has been thoroughly tested.
Would make good sense therefore, if possible, to run client
) on the local
Thankfully, recent versions of Visual Studio allow this to happen, using
asp.net development server
. The latest version (VS 2010)
is freely available to you for download via MSDN.
You will explore the exciting
things that happen
scripts interact with web pages.
If you have
the skills and wish to use PHP scripting with MySQL and Dreamweaver when
you do assignment 2, you are certainly welcome do this
but you will have to
be an autonomous learner!
Asp.net is a cut down
version of IIS (Internet Information Server), which is
Microsoft’s web server environment. IIS normally puts its files into a
folder or a subfolder thereof. The C: drive on the
development machines is not protected, so any work you save
to the C drive
must always be backed up.
Exercise 1(a) Creating and Executing a simple dynamic web
pages with Server Controls using Visual Studio 2010
Before going any further, you should make sure you understand the concepts behind
“localhost”. You sh
ould also be aware that the
is the software
platform that aspx server scripts run on, and that different versions of .net are
available for different versions of Visual Studio/Visual Web Developer:
.net framework v2.0
.net framework v3.5
.net framework v4.0
Finally, please note that the
is poor between different versions of the
.net framework and you are very much recommended to use the latest version (v4.0)
More about ASP.NET Develo
Reasons for using this instead of full blown IIS include “keeping it simple” (although
this is anything but simple!) and also because, in some circumstances, it may be
impractical to work with IIS because:
ASP.NET Web pages are being developed
while working with
XP Home Edition, which does not even support IIS
Reluctance to host a proper web server on a local computer for security
ASP.NET Development Server
runs locally on all Windows operating systems,
e Edition, Vista, and Windows 7, and is specifically built
to serve, or run, ASP.NET Web pages under the local host scenario (browsing from
the same computer as the Web server). This means it will serve pages to browser
requests on the local computer, but
it will not serve pages to another
computer. It is invoked on a randomly selected TCP port for the “localhost” scenario.
This helps to avoid clashes of TCP port with other web servers that may be running
as it is unlikely that po
rt 80 will be randomly chosen. However, if for
some reason, ASP.NET Development Server needs to run on a specific port, the
server can be configured to do so.
As an example, if a page called ExamplePage.aspx is being tested using ASP.NET
, the URL of the page might be:
where 31544 is the randomly generated TCP port. Don’t worry if this is
confusing at the moment… all will soon become clear.
SP.NET Development Server
has disadvantages (which needn’t concern us too
works only with individual pages and does not include the extra facilities of
IIS. (e.g. it does not support an SMTP mail server). If a web application is to
be developed inv
olving the sending e
mail messages, access to the IIS SMTP
virtual server is essential
will not serve files that are outside of the application scope.
And one big advantage…
it provides an efficient way to test pages locally before publishing to a
tion server that does run IIS.
Creating a “file system” dynamic web site
First of all, you have to set up the Visual Studio environment on your local
machine…. Many of you will be familiar with this. For those who are not…
on the relevant option from the desktop.
Now be patient! The first time you run Visual Studio, there will be a delay whilst all of
the configuration information is written, so you’ll have the same environment each
time you use it in future.
Studio has completed its set up cycle, it should be ready to use. Click
When prompted for a development language, choose C#. Don’t
worry… we won’t be doing any raw coding… not for a few weeks anyway!
This will be the default programming langu
age for your Web site. However, it
is possible to use multiple languages in the same Web application by creating
pages and components in different programming languages.
Visual Studio installed templates
will now be displayed
his will creates certain folders and a few default files)
box (bottom of screen), select the
box, and select
the folder where you want to keep the pages of your Web site. As IIS is not being
used, this does not have to be re
lated to wwwroot in any way (e.g. you could use
). You could also try using a folder on your 25 Gb of space in the
secure Microsoft cloud… (presented as “sky drive”)
If the folder is not acceptable for some reason, you will get an
will have to change it. Otherwise,
Visual Studio will create & display the requested
folder, a new page named
, and several other pages and subfolders.
These include files called
and web.config which is important (
about this later
Once all has been chosen, the system should set up the basics for a dynamic website
using C# code in the server scripts. The default.aspx file will be your home page and
should now be displayed in Source (Code) view.
For those who’ve
not seen the Visual Web Development environment before…
provide commands for formatting text, finding text, and so
on. Some toolbars are available only when
you are working in Design
displays the files and folders in your Web site.
displays the documents you are working on in
tabbed windows. You can switch between documents by clicking tabs.
ws you to change settings for the page,
HTML elements, controls, and other objects.
present different views of the same document. Design
view is a near
WYSIWYG editing surface. Source view is the HTML
editor for the page. You will work with the
se views later in this
walkthrough. If you prefer to open Web pages in Design view, on the
, select the
Start Pages In
provides controls and HTML elements that you can drag
your page. Toolbox elements are grouped by common function.
Server Explorer/Database Explorer
connections. If Server Explorer is not visible in Visual Web Developer,
, and then click
(Note: windows can be rearrange and resized to suit your
preferences and the
menu allows display of further windows)
Exercise 1(b): Creating a New Web Forms Page
page is the Microsoft convention for the home page for of a Web site.
other conventions use index.aspx. This won’t matter anyway in this exercise,
because, you will create and work with another new page.
Use the tab to switch to Design view, and back to Source. At the moment, this
is standard HTML? It will get more complex i
n future, but any page that
engages directly with the user via a browser has to use HTML. Close the
You now need to create another page. Locate
(assuming default name),
and then click
Visual Studio installed templates
, choose the preferred
programming language (C
The following screen shot shows the
, and a new file will be created, and displayed in “source”
view. In “design view”, this is a blank page.
A name is required for the file (currently,
Change this if you wish.
the programming code for ASP.NET pages can be located
either in the page or in a separate class file. By default, Visual Studio is set up
to generate the C# code in a separate
“code behind” file, with a .cs suffix,
when it is needed for web controls
. Visual Studio creates the new page and opens it in Source view.
At the bottom of the document window, click the
tab to switch to
Design view. This should be blank apart from a box marked div.
Inside the “div” box, type
ome to Visual Web Developer
development part of Visual Studio
which is available separately).
The following screen shot (div box not shown) shows what you should see:
Switch to Source view. The HTML can now be seen (the example shows a
header for VB code; yours should show C#)
It won’t be very exciting yet, but the rest
of this exercise gives you an
opportunity to try using ASP.NET Development Server. There are two ways to
run a web page file
through the ASP.NET Development Server
File/View in Browser
. This. An icon appears on the toolbar to
this web server is indeed running.
Although the web page has a .aspx extension, it should run
and display like any HTML page. Note the randomly generated TCP port
number, used with localhost.
If the page does not display, reque
Exercise 1(c): Adding and Programming Server Controls
You will now add a
, and a
control to the page and write code
to handle the
event for the
Server controls include buttons, labels, text boxes, and other typical web page
functionality. They provide typical form
processing capabilities for
pages. However, in this environment, it is possible to add & configure the controls
with code that runs on the server, not the client:
Close the Browser window from the last exercise, and make sure you are still
view. Press ENTER a fe
w times to create some room on the page
within the div box.
, from the
group, drag three controls onto the page:
control, and a
control. Check the source
code, and note how the asp controls appear… t
hen go back to Design view.
Put the insertion point above the
control, and then type
This static HTML text is the caption for the
control. You can
mix static HTML and server controls on the same page. The three controls
ould appear something like this in Design view. Rearrange a little, if
Exercise 1(d): Setting Control Properties
VWD offers various ways to set the proper
ties of controls on the page. In this part of
the exercise, properties will be set in both Design view and Source view.
In design mode, right
control, which should bring up the
, and close the proper
The Button design should appear as shown in the following screen shot:
. This displays the HTML for the page, including the
at Visual Web Developer has created for the server controls.
Notes: (i) Controls are declared using HTML
like syntax, except that the tags
use the prefix
and include the attribute
(ii) Control properties are declared as attributes. Fo
r example, when you set
property for the
control, in step 1, you were actually setting
attribute in the control's markup.
iii) All the controls are inside a
element, which has the attribute
. This attribute and the
prefix for control tags mark the
controls so that they are processed by ASP.NET on the server side when the
page runs. Code outside of
elements is interpreted by the browser as client
which is why the ASP.NET code must be inside.
In Design View, Bring the insertion point into a space between text within the
tag, and re
fer to the properties box
Scroll down and select
and then click on […]. The IntelliSense
feature displays a list of colours.
(An IntelliSense drop
t can be displayed at any time by pressing
Now Select a colour for the
Check that the
attribute should be set with the colour that you
Exercise 1(e): Programming the Button Control with associated web
In this first
exercise, you will write code that reads the name that the
user enters into the text box and then displays the name in the
Switch to Design view and double
Visual Studio swit
ches to Source view and creates a skeleton event handler
control's default event, the
a control in Design view is just one of several ways you can create event
Inside the handler, type:
Visual Studio displays a list of available
members for the
Continue, and complete the
event handler for the button so that it reads
as shown in the following code example:
sender, System.EventArgs e)
Label1.Text = TextBox1.Text +
", welcome to Visual Web Developer!"
Switch to the .aspx page, and look at the
element. Note that
there is now
. This attribute binds the
the handler method you coded in step 3 above.
Event handler methods can have any name; the name you see is the default
name created by Visual Studio. The important point is that the name used for
attribute must match the name of a method in the
Save and p
ress CTRL+F5 to run the page in the browser using the ASP.NET
Development Server and .click to
Is this what you expected?
Now, enter a name into the text box and click the button.
The name you entered is displayed in
control. Note that when you
click the button, the page is posted to the Web server. ASP.NET then
recreates the page, runs your code (in this case, the
event handler runs), and then sends the new page to the browser. If you
watch the status bar in the browser, you can see that the page is making a
round trip to the Web server each time you click the button.
In the browser, view the source code of the page you are running…
In the page source code, you see only ordinary HTML
; you do not see the
elements that you were working with in Source view.
There is a reason for this… when the page runs, ASP.NET processes the
server controls and renders HTML elements to the page that perform the
functions that represent the contr
ol. For example, the
rendered as the HTML element
Close the browser.
Exercise 1(f): Working with a more complex event handler Control
In this exercise, you will work with the
control, which displa
ys dates a
month at a time. This is a more complex control than the button, text box, and label
you have been working with and illustrates some further capabilities of server
Make sure you are using Design view.
section of the
, drag a
control onto the
page. The following screen shot shows the
control as rendered in
the Design view.:
The calendar's smart tag panel i
s displayed. The panel displays commands
that make it easy for you to perform the most common tasks for the selected
In the smart tag panel, choose
dialog box is displayed, which allows you to select a
eme for the calendar. The following screen shot (PTO) shows
dialog box for the
Select a scheme
Save the file, and switch to Source view.
element should be displayed (see below). This is much
longer than the elements for the simple controls created earlier. It also
includes subelements, eg
, which repres
Exercise 1(g): Programming the Calendar Control
In this section, the
control will be programmed to display the currently
lected date when run from the server.
Go back to Design view and Double click.
This will bring up the code behind page for the .aspx file.
event handler with the following highlighted
Label1.Text = Calendar1.SelectedDate.ToString();
Now press CTRL+F5 to run the page in the browser test the calendar control.
Click a date in the calendar.
The date you clicked is displayed in the
Within the browser window, find out how to view the source code for the
page, and then display that code. Find the code for the
Note that it has been rendered to the page by creating a HTML table, with
each day as a
ment containing a
OK. That’s all for now. Close the browser.
Now take one last look at the files being used: the code behind file uses the
same filename, but the suffix corresponds to the programming language
this case c# (sharp).
a copy of the folder you have created on the C: drive for future
reference. Next time you cannot guarantee that you’ll be working on the same
computer. To do this, the easiest way is to copy the whole folder to your “sky”
drive… Alternatively, copy the fol
der to a memory stick
Once copied, you can log out.
Well Done, if this is your first time with Visual Web Developer you’ve achieved a
lot in this session!
Additional .net functionality necessary to interface with templates and
formatting pages, databases
and shopping cart functionality will be explored in