microsoft visual basic 2015 chapter 09

Microsoft Visual Basic 2015
CHAPTER NINE

Creating Web Applications


9

Objectives

►Create a web application
►Build a web form using ASP.NET 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

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole
or in part.

2


9

Objectives

►Add a Calendar object

►Add a custom table for layout
►Validate data on web forms
►Use the
tag in Visual Basic code
►Use string manipulation methods in the String
class

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole
or in part.

3


9

Introduction

►Visual Studio allows you to create applications
that can run on the web
►Visual Basic 2015 includes ASP.NET 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

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole
or in part.

4


9

Introduction

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

5


9

Creating a Web Application

►A webpage that allows users to enter information
on a web form is considered a dynamic webpage
because the user enters data and the webpage
reacts to the data
►A static webpage contains no interactivity
►A web server is a computer that stores web

documents and makes them available to people
on the Internet
►The ASP.NET 5 technology used with Visual
Basic 2015 creates an active server page (ASP)
Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

6


9

Creating a Dynamic Website
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. Use the Location text box to name
the chapter project application cabin
►Tap or click the OK button in the New Web Site
dialog box

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in

part.

7


9

Creating a Dynamic Website
Using Visual Basic

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

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 “Application name” 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

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole
or in part.

9


9

Customizing the Master Page

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

10


9

Customizing Navigation Links
on the Master Template

►On the Site.master page, tap or click the Source
tab at the bottom left. Select the HTML code
<li>href="~/Contact">Contact</a></li>
►Press the DELETE key to delete the Contact list
item line of code. Select the black text “About” in
the About list item link and type Reservations
to rename the displayed text in the link

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole
or in part.

11


9

Customizing Navigation Links
on the Master Template

►Select the following HTML code that displays
Register and Log in links on the Site.Master page:
<li>href="~/Account/Register">Register</a>
</li>
<li>href="~/Account/Login">Log in</a></li>

►Press the DELETE key to remove the Register
and Log in links from the Site.master page

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole
or in part.

12


9

Customizing Navigation Links
on the Master Template

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

13


9

Adding an Image Object

► Close and save Site.master. Open the Toolbox. If necessary, in the
Solution Explorer, double-tap or double-click Default.aspx. Notice that
the Default.aspx page has inherited the title from the Site.master.
Select the “ASP.NET” heading in the MainContent (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 webpage in the FeaturedContent
area. Resize the object so that it is 175 pixels (Width property) by 150
pixels (Height property)
► 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
/>bearcabins.jpg as the ImageUrl property. Press the enter key. You
need Internet connectivity to view the image
Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

14


9

Adding an Image Object

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or

duplicated, or posted to a publicly accessible website, in whole or in
part.

15


9

Entering Text Directly on the Webpage

► 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
► Tap or click the OK button, and then tap or click a blank
spot to deselect the text

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

16

9

Entering Text Directly on the Webpage

► Select the text in the placeholder paragraph below the
image and press the delete key. Change the font size to
large 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.
► Delete the button and the rest of the text on the page. Do
not delete the footnote © - My ASP.NET Application

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

17


9

Entering Text Directly on the Webpage

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

18


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 the ENTER key. Tap or click in the
paragraph below the typed text and delete all the
text below Guest Reservation Form. 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

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole

or in part.

19


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 two-sided 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

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole
or in part.

20


9

Adding a Table for Alignment

on a Web Form

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

21


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 Text-Box object from the Toolbox to the form, and then position
the TextBox object in the second cell in the first row of the table.
Resize the TextBox object to a width of 250 px (Width property).
Name this TextBox object txtName using the (ID) property
► In the first cell in the second row of the table, type Email 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 (Width property). Name this TextBox object
txtEmail using the (ID) property

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

22


9

Adding TextBox and Button Objects

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

23


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 in 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

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

24


9

Adding CheckBox Objects

Chapter 9: Creating Web Applications

© 2016 Cengage Learning®. May not be scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

25