Setting up Visual Studio 2010 as a Development Environment

waisttherapeuticΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

68 εμφανίσεις


RCH2012

Page
1

05/11/2013

COMP3241 Practical Exercise 1: Web Server Environments



Introduction


You should be aware that there is a lot of practical work to cover in this module!


You
should

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
-
line ordering
system.


Static HTML pages, and HTML with embedded scripting (“client scripts”) run quite
happily through the browser, on the client ma
chine.
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
programming code.


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

you will:



Familiarize yourself with Visual Web Developer/Visual Studio
environment



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
page


Setting up Visual Studio 2010 as a Development Environment


S
ummary of the client
-
server environment:








As the web servers for the Business School currently use Microsoft Internet
Information Server, and the full Visual Studio environment is available for
Client

(browser)

Server

(web server)

network


RCH2012

Page
2

05/11/2013

editing purposes, it makes sense in the first insta
nce to use asp.net (and
.aspx scripts) to produce your web
-
based client
-
server applications.


Please note that Dreamweaver is an excellent tool for client
-
based scripting,
but recent versions are not compatible with asp.net.


Once they have been complete
d and tested, client
-
server applications
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
developing scripts,
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
and

server code
(via
localhost
) on the local
machine.


Thankfully, recent versions of Visual Studio allow this to happen, using
something called
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
when server
-
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
C:
\
inetpub
\
wwwroot

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
.net framework

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:



VS 2005
----

.net framework v2.0


VS 2008

----

.net framework v3.5


VS 2010
----

.net framework v4.0


Finally, please note that the
compatibility

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
pment Server

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:


RCH2012

Page
3

05/11/2013



ASP.NET Web pages are being developed

while working with
Windows

XP Home Edition, which does not even support IIS



Reluctance to host a proper web server on a local computer for security
reasons.

ASP.NET Development Server

runs locally on all Windows operating systems,
including Windows

XP Hom
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
(
of course!)

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
(e.g. Apache)

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
Development Server
, the URL of the page might be:

http://localhost:31544/ExamplePage.aspx



where 31544 is the randomly generated TCP port. Don’t worry if this is
confusing at the moment… all will soon become clear.

A
SP.NET Development Server

has disadvantages (which needn’t concern us too
much…):



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
produc
tion server that does run IIS.


Exercise 1(a)

:
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…


1.

Simply click
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.



RCH2012

Page
4

05/11/2013

2.

Once Visual
Studio has completed its set up cycle, it should be ready to use. Click
New Project
.
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.


3.

Visual Studio installed templates

will now be displayed
.

C
lick
ASP.NET
Application
.(t
his will creates certain folders and a few default files)

4.

In the
Web

Location
box (bottom of screen), select the
File System

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
C:
\
BasicWebSite
). You could also try using a folder on your 25 Gb of space in the
secure Microsoft cloud… (presented as “sky drive”)

5.

Click
OK
….

If the folder is not acceptable for some reason, you will get an

error, and
will have to change it. Otherwise,
Visual Studio will create & display the requested
folder, a new page named
default.aspx
, and several other pages and subfolders.
These include files called
site.master

and web.config which is important (
more
about this later
).

6.

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
it
should now be displayed in Source (Code) view.

7.

For those who’ve
not seen the Visual Web Development environment before…


o

Toolbars

-

provide commands for formatting text, finding text, and so
on. Some toolbars are available only when

you are working in Design
view.

o

Solution Explorer

-

displays the files and folders in your Web site.

o

Document window

-

displays the documents you are working on in
tabbed windows. You can switch between documents by clicking tabs.

o

Properties window

-

allo
ws you to change settings for the page,
HTML elements, controls, and other objects.

o

View tabs

-

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
Tools

menu, click
Options
, select the
HTML Designer

node, and
change the
Start Pages In

option.

o

Toolbox

-

provides controls and HTML elements that you can drag
onto
your page. Toolbox elements are grouped by common function.

o

Server Explorer/Database Explorer

-

displays database
connections. If Server Explorer is not visible in Visual Web Developer,
on the
View

menu, click
Other Windows
, and then click
Server

RCH2012

Page
5

05/11/2013

Explorer
.

(Note: windows can be rearrange and resized to suit your
preferences and the
View

menu allows display of further windows)

Exercise 1(b): Creating a New Web Forms Page

Default.aspx

page is the Microsoft convention for the home page for of a Web site.
Most
other conventions use index.aspx. This won’t matter anyway in this exercise,
because, you will create and work with another new page.

1.

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
default.aspx page.


2.

You now need to create another page. Locate
Solution Explorer
, right
-
click
WebApplication1
(assuming default name),

and then click
Add
f
ollowed by

New Item
.


3.

Under
Visual Studio installed templates
, choose the preferred
programming language (C
#

as before
).


4.

The following screen shot shows the
Add
,
New Item

dialog box:



5.

Click
Web Form
, and a new file will be created, and displayed in “source”
view. In “design view”, this is a blank page.


RCH2012

Page
6

05/11/2013

6.

A name is required for the file (currently,
webform1.aspx i
n the
Name

box).
Change this if you wish.

(
Important note
:

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


ne
xt exercise…)

7.

Click
Add
. Visual Studio creates the new page and opens it in Source view.
At the bottom of the document window, click the
Design

tab to switch to
Design view. This should be blank apart from a box marked div.

8.


9.

Inside the “div” box, type
Welc
ome to Visual Web Developer
(the web
development part of Visual Studio


which is available separately).

The following screen shot (div box not shown) shows what you should see:


10.

Switch to Source view. The HTML can now be seen (the example shows a
header for VB code; yours should show C#)



RCH2012

Page
7

05/11/2013

11.

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


a.

either use
File/View in Browser


b.

or p
ress
CTRL+F5
. This. An icon appears on the toolbar to
indicate that
this web server is indeed running.

Your choice…

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
st help…


Exercise 1(c): Adding and Programming Server Controls



You will now add a
Button
, a
TextBox
, and a
Label

control to the page and write code
to handle the
Click

event for the
Button

control.

Server controls include buttons, labels, text boxes, and other typical web page
functionality. They provide typical form
-
processing capabilities for
ASP.NET Web
pages. However, in this environment, it is possible to add & configure the controls
with code that runs on the server, not the client:

1.

Close the Browser window from the last exercise, and make sure you are still
in
Design

view. Press ENTER a fe
w times to create some room on the page
within the div box.

2.

In the
Toolbox
, from the
Standard

group, drag three controls onto the page:
a
TextBox

control, a
Button

control, and a
Label

control. Check the source
code, and note how the asp controls appear… t
hen go back to Design view.

3.

Put the insertion point above the
TextBox

control, and then type
Enter your
name:

This static HTML text is the caption for the
TextBox

control. You can
mix static HTML and server controls on the same page. The three controls
sh
ould appear something like this in Design view. Rearrange a little, if
necesssary:



RCH2012

Page
8

05/11/2013

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.

1.

In design mode, right
-
click the
Button

control, which should bring up the
Properties

box. Set
Text

to
Display Name
, and close the proper
ties box.
The Button design should appear as shown in the following screen shot:



2.

Switch to
Source view
. This displays the HTML for the page, including the
elements th
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
asp:

and include the attribute
runat="server"
.

(ii) Control properties are declared as attributes. Fo
r example, when you set
the
Text

property for the
Button

control, in step 1, you were actually setting
the
Text

attribute in the control's markup.

(
iii) All the controls are inside a
<form>

element, which has the attribute
runat="server"
. This attribute and the
asp:

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
<f
orm runat="server">

and
<script
runat="server">

elements is interpreted by the browser as client
-
side code,
which is why the ASP.NET code must be inside.

3.

In Design View, Bring the insertion point into a space between text within the
<asp:label>

tag, and re
fer to the properties box


RCH2012

Page
9

05/11/2013

4.

Scroll down and select
ForeColor

and then click on […]. The IntelliSense
feature displays a list of colours.

(An IntelliSense drop
-
down lis
t can be displayed at any time by pressing
CTRL+J.)

5.

Now Select a colour for the
Label

control's text.

Check that the
ForeColor

attribute should be set with the colour that you
have selected.

Exercise 1(e): Programming the Button Control with associated web

controls

In this first
event handling

exercise, you will write code that reads the name that the
user enters into the text box and then displays the name in the
Label

control.

1.

Switch to Design view and double
-
click the
Button

control.

Visual Studio swit
ches to Source view and creates a skeleton event handler
for the
Button

control's default event, the
Click

event.

(Note:

Double
-
clicking
a control in Design view is just one of several ways you can create event
handlers.)

2.

Inside the handler, type:

Label1.

Visual Studio displays a list of available
members for the
Label

control

3.

Continue, and complete the
Click

event handler for the button so that it reads
as shown in the following code example:

protected

void

Button1_Click(
object

sender, System.EventArgs e)

{


Label1.Text = TextBox1.Text +
", welcome to Visual Web Developer!"
;

}


4.

Switch to the .aspx page, and look at the
<asp:Button>

element. Note that
there is now

the attribute
OnClick="Button1_Click"
. This attribute binds the
button's
Click

event to
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
the
OnClick

attribute must match the name of a method in the

page.


5

Save and p
ress CTRL+F5 to run the page in the browser using the ASP.NET
Development Server and .click to
test
the button

Is this what you expected?

6

Now, enter a name into the text box and click the button.

The name you entered is displayed in
the
Label

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
Button

control's
Click


RCH2012

Page
10

05/11/2013

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.

7.

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
<asp:>

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
<asp:Button>

control is
rendered as the HTML element
<input type="submit">
.

8.

Close the browser.

Exercise 1(f): Working with a more complex event handler Control


In this exercise, you will work with the
Calendar

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
controls.

1.

Make sure you are using Design view.

2.

From the
Standard

section of the
T
oolbox
, drag a
Calendar

control onto the
page. The following screen shot shows the
Calendar

control as rendered in
the Design view.:




RCH2012

Page
11

05/11/2013

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
control.

3.

In the smart tag panel, choose
Auto Format
.

The
Auto Format

dialog box is displayed, which allows you to select a
formatting sch
eme for the calendar. The following screen shot (PTO) shows
the
Auto Format

dialog box for the
Calendar

control.


4.

From the
Select a scheme

list, select
Simple

and then
click
OK
.

5.

Save the file, and switch to Source view.

The
<asp:Calendar>

element should be displayed (see below). This is much
longer than the elements for the simple controls created earlier. It also
includes subelements, eg
<WeekEndDayStyle>
, which repres
ent various
formatting settings.



RCH2012

Page
12

05/11/2013

Exercise 1(g): Programming the Calendar Control

In this section, the
Calendar

control will be programmed to display the currently
se
lected date when run from the server.

1.

Go back to Design view and Double click.

This will bring up the code behind page for the .aspx file.

2.

Finish the
SelectionChanged

event handler with the following highlighted
code.

protected

void

Calendar1_SelectionChan
ged(
object

sender,
System.EventArgs e)

{


Label1.Text = Calendar1.SelectedDate.ToString();

}

4.

Now press CTRL+F5 to run the page in the browser test the calendar control.

5.

Click a date in the calendar.

The date you clicked is displayed in the
Lab
el

control.

6.

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
Calendar

control.

Note that it has been rendered to the page by creating a HTML table, with
each day as a
<td>

ele
ment containing a
<a>

element.

7.

OK. That’s all for now. Close the browser.

8.

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


in
this case c# (sharp).

9.

Take
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

10.

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
future sessions.