Microsoft Visual Basic 2012
CHAPTER NINE
Creating Web Applications
9
Objectives
►Create a Web application
►Build a Web form using ASP.NET 4.5
►Set Web form properties
►Use the full screen view
►Add objects to a Web form
►Add a DropDownList object
Chapter 9: Creating Web Applications
2
9
Objectives
►Add a Calendar object
►Add a custom table for layout
►Validate data on Web forms
►Use the <br> tag in Visual Basic code
►Use string manipulation methods in the String
class
Chapter 9: Creating Web Applications
3
9
Introduction
►Visual Studio allows you to create applications
that can run on the Web
►Visual Basic 2012 includes ASP.NET 4.5
technology, with which you can create a user
interface and a form for a Web application
►A Web form is a page displayed in a Web
browser such as Internet Explorer and Firefox
and requests data from the user
Chapter 9: Creating Web Applications
4
9
Introduction
Chapter 9: Creating Web Applications
5
9
Creating a Web Application
►A Web page that allows users to enter
information on a Web form is considered a
dynamic Web page because the user enters data
and the Web page reacts to the data
►A Web server is a computer that stores Web
documents and makes them available to people
on the Internet
►The ASP.NET 4.5 technology used with Visual
Basic 2012 creates an active server page (ASP)
Chapter 9: Creating Web Applications
6
9
Creating a Dynamic Web Site
Using Visual Basic
►Start Visual Studio. Tap or click the FILE tab and
then tap or click New Web Site
►In the center pane, tap or click ASP.NET Web
Forms Site. Name the chapter project application
Cabin in the Location text box
►Tap or click the OK button in the New Web Site
dialog box
Chapter 9: Creating Web Applications
7
9
Creating a Dynamic Web Site
Using Visual Basic
Chapter 9: Creating Web Applications
8
9
Customizing the Master Page
►In the Solution Explorer window, double-tap or
double-click Site.master to open the page
►Tap or click VIEW on the menu bar, point to
Toolbars, and then tap or click Formatting. Select
the “your logo here” placeholder text at the top of
the Site.master page. Type Big Bear Cabins
to replace the original title. On the Formatting
toolbar, tap or click the Font Size box arrow, and
then select xx-large
Chapter 9: Creating Web Applications
9
9
Customizing the Master Page
Chapter 9: Creating Web Applications
10
9
Customizing Navigation Buttons
on the Master Template
►On the Site.master page, select the text Contact.
Press the delete key to delete the Contact link.
Select the text About in the About link and type
Reservations to rename the link
►Tap or click the Register and Log in tabs on the
Site.master page
►Press the DELETE key to remove the Register
and Log in tabs from the Site.master page
Chapter 9: Creating Web Applications
11
9
Customizing Navigation Buttons
on the Master Template
Chapter 9: Creating Web Applications
12
9
Adding an Image Object
► Save Site.master. In the Solution Explorer, double-tap or doubleclick
Default.aspx. Notice that the Default.aspx page has inherited the title
and Reservations navigation page from the Site.master. Open the
Toolbox. Select the text ‘Modify this template to jump-start your
ASP.NET application.’ in the FeaturedContent(Custom) area, and
then press the DELETE key
► Double-tap or double-click the Image object in the Standard category
of the Toolbox to display it on the Web page in the FeaturedContent
area. Resize the object so that it is 175 pixels (width) by 150 pixels
(height)
► In the Properties window, name the Image object by entering
picCabins in its (ID) property. Specify which image to display by
entering the Web address
http://delgraphics.delmarlearning.com/CourseTechnol
ogy/cabins.jpg as the ImageUrl property. Press the Enter key.
You need Internet connectivity to view the image
Chapter 9: Creating Web Applications
13
9
Adding an Image Object
Chapter 9: Creating Web Applications
14
9
Entering Text Directly on the Web Page
► Tap or click to the right of the Image object. Add a space
using the spacebar and type Enjoy a Mountain
Getaway directly on the Default.aspx page
► To change the vertical alignment, select the text, tap or
click the style property in the Properties window, and then
tap or click the ellipsis button to the right of the style
property to display the Modify Style dialog box. In the
Category pane of the Modify Style dialog box, tap or click
Block. In the vertical-align drop box, select top
Chapter 9: Creating Web Applications
15
9
Entering Text Directly on the Web Page
► Tap or click the OK button, and then tap or click a blank
spot to deselect the text
► Select the text in the placeholder paragraph below the
image and press the DELETE key. Change the font size
to medium using the Formatting toolbar. Enter the text
Nestled in the trees surrounded by the
Beartooth Mountains, our cabin retreat
provides modern comfort with genuine
mountain elegance, offering a rustic
ambiance with wood burning fireplaces and
cozy furnished kitchens.
► Select the text in the MainContent area and then press the
DELETE key
Chapter 9: Creating Web Applications
16
9
Entering Text Directly on the Web Page
Chapter 9: Creating Web Applications
17
9
Adding a Table for Alignment
on a Web Form
►In the Solution Explorer window, double-tap or
double-click About.aspx to create a Web form for
the Reservations page. Delete the text in the
MainContent area. Tap or click in the
MainContent area and type Guest
Reservation Form. Press ENTER. Delete the
Aside Title text area. Tap or click in the paragraph
below the MainContact area and delete all the
text. Tap or click TABLE on the menu bar, and
then tap or click Insert Table. In the Size section
of the Insert Table dialog box, change the number
of Rows to 7 and the number of Columns to 3
Chapter 9: Creating Web Applications
18
9
Adding a Table for Alignment
on a Web Form
►Tap or click the OK button. To resize the
columns, point to a column divider until a twosided arrow appears. Drag the divider to change
the column width. As you drag, a ScreenTip
shows the width of the column in pixels. Resize
the first column until it is 150 px wide. Resize the
second column to 250 px wide
Chapter 9: Creating Web Applications
19
9
Adding a Table for Alignment
on a Web Form
Chapter 9: Creating Web Applications
20
9
Adding TextBox and Button Objects
► On the About.aspx Web form, tap or click in the first cell of
the table and type Name: to enter text directly into the
table. Open the Toolbox, drag a TextBox object from the
Toolbox to the form, and then position the TextBox object
in the second cell in the table. Resize the TextBox object
to a width of 250 px. Name this TextBox object txtName
using the (ID) property
► In the first cell in the second row of the table, type E-mail
Address: to enter text directly into the table. Drag a
TextBox object from the Toolbox to the form and then
position the TextBox object in the second cell in the
second row in the table. Resize the TextBox object to a
width of 250 px. Name this TextBox object txtEmail
using the (ID) property
Chapter 9: Creating Web Applications
21
9
Adding TextBox and Button Objects
Chapter 9: Creating Web Applications
22
9
Adding CheckBox Objects
► On the third row, type Cabin Selection: in the first cell. Drag the
CheckBox object from the Toolbox to the Web form, and then position
it on the third row, second cell
► Name the CheckBox object by tapping or clicking to the right of its
(ID) property in the Properties window and then entering
chkGrizzly. Change the Text property of the CheckBox object to
Grizzly (3 bedrooms) $99.
► At the Big Bear Cabins, the Grizzly is the most popular cabin. This
cabin, therefore, should be checked when the form opens to save
time for the user. To select the Grizzly check box, change the
Checked property for the object from False to True
► In the second column, fourth and fifth rows of the table, add two more
CheckBox objects named chkPolar and chkKodiak, respectively.
Change the Text property of the first CheckBox object to Polar (2
bedrooms) $89 and the second CheckBox object to Kodiak (1
bedroom) $79
Chapter 9: Creating Web Applications
23
9
Adding CheckBox Objects
Chapter 9: Creating Web Applications
24
9
Coding for Check Box Objects
Chapter 9: Creating Web Applications
25
9
Adding a DropDownList Object
► In the sixth row of the table, type Night(s): in the first
column. Drag the DropDownList object to the second
column of the sixth row. Name the DropDownList object
by tapping or clicking to the right of the (ID) property in the
object’s Properties window and then typing ddlNights
► To fill the DropDownList object with list items, tap or click
the Smart Tag on the upper-right corner of the object
► Tap or click Edit Items on the DropDownList Tasks menu
Chapter 9: Creating Web Applications
26
9
Adding a DropDownList Object
► Tap or click the Add button. In the ListItem Properties pane on the
right side of the dialog box, tap or click to the right of the Text property
and enter 1
► Tap or click the Add button and enter 2 as its Text property. Repeat
this step, entering the numbers 3 through 7 to specify the number of
nights users can select in the DropDownList object. Tap or click the
OK button in the ListItem Collection Editor dialog box. Resize the
DropDownList object to the width of a single digit, if necessary. To
view the completed DropDownList object, run the application by
tapping or clicking the Start Debugging button on the Standard
toolbar. If necessary, tap or click the Reservations navigation button
to open the Reservations page in the browser. Tap or click the list
arrow on the DropDownList object in the Web page
Chapter 9: Creating Web Applications
27
9
Adding a DropDownList Object
Chapter 9: Creating Web Applications
28
9
Adding a Calendar Object
► Close the browser window. In the last row of the table,
type Check-in Date:. Drag the Calendar object from
the Toolbox to the Web form, and then position it on the
form. In the (ID) property, name the Calendar object
cldArrival
► Select the Calendar object, if necessary, and then tap or
click the Smart Tag on the upper-right corner of the
Calendar object
► Tap or click Auto Format on the Calendar Tasks menu.
When the Auto Format dialog box opens, tap or click the
Colorful 2 scheme in the Select a scheme list
Chapter 9: Creating Web Applications
29
9
Adding a Calendar Object
Chapter 9: Creating Web Applications
30
9
Specifying a Web Form Title
►Tap or click the OK button to close the
AutoFormat dialog box. In the Properties window
of the Reservations Web form, tap or click the
drop-down box at the top and select DOCUMENT
►In the Properties window, scroll until the Title
property is visible, and then tap or click in the
right column of the Title property. Enter the title
Big Bear Cabins with a blank space following
the text entry. When the Web page is displayed,
the Title property appears in front of the
MainContent title
Chapter 9: Creating Web Applications
31
9
Specifying a Web Form Title
Chapter 9: Creating Web Applications
32
9
Code for a Calendar Object
Chapter 9: Creating Web Applications
33
9
Adding a Required Field Validator
►In the Toolbox, hide the Standard tools by tapping
or clicking the filled triangle icon next to Standard.
Expand the Validation tools by tapping or clicking
the open triangle icon next to Validation
►Drag the RequiredFieldValidator to the right of the
Name TextBox object
►Name the RequiredFieldValidator by typing
rfvFirstName in its (ID) property
Chapter 9: Creating Web Applications
34
9
Adding a Required Field Validator
►To specify that the rfvName
RequiredFieldValidator object validates the
txtName TextBox object, tap or click to the right of
the ControlToValidate property in the Properties
window, tap or click the list arrow, and then select
txtName
►In the Properties window for the
RequiredFieldValidator, change the
ErrorMessage property to *Enter Name
Chapter 9: Creating Web Applications
35
9
Adding a Required Field Validator
Chapter 9: Creating Web Applications
36
9
Applying the Range Validator
►ControlToValidate property contains the name
of the object you are validating
►MinimumValue property contains the smallest
value in the range
►MaximumValue property contains the largest
value in the range
►Type property matches the data type of the
value, such as Integer or String
►ErrorMessage property explains to the user what
value is requested
Chapter 9: Creating Web Applications
37
9
Applying the Compare Validator
► ControlToValidate
property contains the
name of the object that
you are validating
► ControlToCompare
property contains the
name of the object that
you are comparing to the
ControlToValidate
property
► ErrorMessage property
contains a message
stating that the value does
not match
Chapter 9: Creating Web Applications
38
9
Applying the Regular Expression Validator
►ControlToValidate property contains the name
of the object that you are validating
►ErrorMessage property contains a message
stating that the value does not match the valid
format
►ValidationExpression property allows the user
to select the format for the object
Chapter 9: Creating Web Applications
39
9
Applying the Regular Expression Validator
► Drag the RegularExpressionValidator object from the
Toolbox to the right of the Email Address TextBox object
in the table
► Name the RegularExpressionValidator by typing
revEmail in its (ID) property
► Tap or click to the right of the ControlToValidate property,
tap or click the list arrow, and then tap or click txtEmail
► Change the ErrorMessage property to * Error Email
Format
Chapter 9: Creating Web Applications
40
9
Applying the Regular Expression Validator
► To set txtEmail to validate that it contains a standard email
address, tap or click to the right of the
ValidationExpression property, and then tap or click its
ellipsis button. In the Regular Expression Editor dialog
box, select Internet e-mail address in the Standard
expressions list
► Tap or click the OK button in the Regular Expression
Editor dialog box. Run the application by tapping or
clicking the Start Debugging button on the Standard
toolbar. Enter a name and an email address without an @
symbol, such as liam.world.net, and then press the
ENTER key
Chapter 9: Creating Web Applications
41
9
Applying the Regular Expression Validator
Chapter 9: Creating Web Applications
42
9
Applying Multiple Validations
Chapter 9: Creating Web Applications
43
9
Displaying the Validation Summary Control
►The ValidationSummary control lets you display
validation error messages in a single location,
creating a clean layout for the Web form
►You can use the ValidationSummary object to
display all of the error messages in a different
place, listing them in a blank area at the top or
bottom of the form
►To use a ValidationSummary object, drag the
object to the location on the Web page where you
want the summary to appear
Chapter 9: Creating Web Applications
44
9
Using the <br> Tag in Visual Basic Code
Chapter 9: Creating Web Applications
45
9
Finding String Length
Chapter 9: Creating Web Applications
46
9
Using the Trim Procedure
Chapter 9: Creating Web Applications
47
9
Converting Uppercase and Lowercase Text
Chapter 9: Creating Web Applications
48
9
Program Design
Chapter 9: Creating Web Applications
49
9
Program Design
Chapter 9: Creating Web Applications
50
9
Event Planning Document
Chapter 9: Creating Web Applications
51
9
Summary
►Create a Web application
►Build a Web form using ASP.NET 4.5
►Set Web form properties
►Use the full screen view
►Add objects to a Web form
►Add a DropDownList object
Chapter 9: Creating Web Applications
52
9
Summary
►Add a Calendar object
►Add a custom table for layout
►Validate data on Web forms
►Use the <br> tag in Visual Basic code
►Use string manipulation methods in the String
class
Chapter 9: Creating Web Applications
53
Microsoft Visual Basic 2012
CHAPTER NINE
COMPLETE
Creating Web Applications