microsoft visual basic 2008 chapter seven creating web applications

Microsoft Visual Basic 2008

CHAPTER SEVEN

Creating Web Applications

7

Chapter 7: Creating Web Applications 2

Objectives

►Create a Web application.

We have already created the following types of applications:

• Windows Application

• Smart Device Application

►There are similarities and differences in all of these types of applications.

►Build a Web form using ASP.NET 3.5

►Set Web form properties

►Use the full screen view

7

Chapter 7: Creating Web Applications 3

Objectives

►Add objects to a Web form

• Add a DropDownList object

• Add a Calendar object

• Add a custom table for layout

►Use the <br> tag in Visual Basic code

►Use string manipulation methods in the String class

7

Chapter 7: Creating Web Applications 4

Introduction

►Visual Studio allows you to create applications that can execute on the World Wide Web

►Visual Basic 2008 includes ASP.NET 3.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 or Firefox that requests data from the user ( DHTML )

7

Chapter 7: Creating Web Applications 5

Introduction

7

Chapter 7: Creating Web Applications 6

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 the user enters

►A static Web page has no interactivity

►A Web server is a computer that stores Web documents and makes them available to people on the Internet

►The ASP.NET 3.5 technology used with Visual Basic 2008 creates an active server page (ASP)

7

Chapter 7: Creating Web Applications 7

Creating a Dynamic Web Site Using Visual Basic

►Start Visual Studio.

►Click the New Web Site button on the Standard toolbar

►In the list of Visual Studio installed templates, click ASP.NET Web Site.

Name the chapter project application MysticReservations in the Location text box.The location should be : "File System"

►Click the OK button in the New Web Site dialog box

7

Chapter 7: Creating Web Applications 8

Creating a Dynamic Web Site Using Visual Basic

Notice the Default.aspx (equivalent to Form1 in a Windows Application and the Web.config file (an XML file with configuration data)

7

Chapter 7: Creating Web Applications 9

Specifying a Web Form Title

► In the design window [Default.aspx] of the Web form, click the background of the Web form to select the form

► In the Properties window, scroll until the Title property is visible, and then click in the right column of the Title property.

Enter the title Mystic Bed and Breakfast Reservation FormThis is similar to setting the Text property for a Windows App. Form

► To view the title bar with the title Mystic Bed and Breakfast Reservation Form, click the Start [Without] Debugging button on the Standard toolbar.

If the Debugging Not Enabled dialog box is displayed, select the Modify the Web.config file to enable debugging radio button and then click the OK button [ or click the option to continue without debugging… ]

► To close the browser window, click the Close button on the title bar of the browser window

7

Chapter 7: Creating Web Applications 10

Specifying a Web Form Title

7 Naming the Page Divisions

►Click in the div element, and then select the (Id) property in the Properties window

►Type leftcolumn as the (Id) property

Chapter 7: Creating Web Applications 11

7 Arranging the Div Contents of the Web Page

►Click the div#leftcolumn heading above the div element.

►Position the mouse pointer over the sizing handle in the lower-right corner of the div element

►Resize the div#leftcolumn element until the width is 115px and the height is 600px

►To add another div element, click the plus sign to open the HTML tools in the Toolbox, and then drag the Div element to the upper-left corner of the Web page. In the Properties window, select the (Id) property and type the name header

Chapter 7: Creating Web Applications 12

7 Arranging the Div Contents of the Web Page

Chapter 7: Creating Web Applications 13

7 Moving the Div Element[Absolute Positioning]

► Select the div#header element. Click Format on the menu bar, and then click Position on the Format menu. The Position dialog box opens. In the Positioning style section, click Absolute

► Click the OK button to close the Position dialog box. Click the middle-right sizing handle of div#header. Drag the two-headed arrow to the right until the width is 470 pixels, as noted in the ScreenTip. Click the middle-left sizing handle of div#header, and then drag so that the left side of div#header is slightly to the right of div#leftcolumn. Drag the lower-middle sizing handle down until the height is 115 pixels

► Add another div element and name it center. Click Format on the menu bar, click Position on the Format menu, and then click Absolute in the Position dialog box to change the position setting. Move the div#center element to the location shown on the next slide. Resize div#center to 270 X 400 pixels. Add another div element and name it rightcolumn. Change the position of div#rightcolumn to absolute positioning. Resize div#rightcolumn to 200 X 400

Chapter 7: Creating Web Applications 14

7 Moving the Div Element

Chapter 7: Creating Web Applications 15

Create 4 div elements [containers]

1.div#leftcolumn2.div#header3.div#rightcolumn4.div#center

7

Chapter 7: Creating Web Applications 16

Using Full Screen View

►Click View on the menu bar, and then click Full Screen

►To return to the standard view, click the Full Screen button on the menu bar

7 Adding a Style to a Div Element

► Select the div#header element by clicking the div#header name above the div element. In the Properties window, select the Style property, and then click its ellipsis button

► Click the font-family list arrow, and then click Edwardian Script ITC. Type 48 in the font-size box. Select bold for the font-weight and white for the color

► In the Category list, click Block. Set the vertical-align setting to top. In the Category list, click Background. Click the background-color list arrow, and then click More Colors. The More Colors dialog box appears. Select the second color from the left in the top row, a slate blue, as shown in Figure 7-22 on page 498

► Click the OK button in the More Colors dialog box. A preview of the font background, font face, and font size is shown in the preview window. Click OK

Chapter 7: Creating Web Applications 17

7 Adding a Style to a Div Element[ font name, style, background color, alignment ]

Chapter 7: Creating Web Applications 18

7

Chapter 7: Creating Web Applications 19

Adding an Image Object

► Drag the Image object from the Toolbox to the Web form. Resize the object so that it is about 115 x 115 pixels

► In the Properties window, name the Image object by entering picMystic in its (ID) property. Specify the image to display by entering the Web address http://scsite.com/vb2008/ch7/images/bb.jpg as the ImageUrl property

7 Entering Text Directly on the Web Form

►Click to the right of the Image object in the div#header at the top of the form. Type Mystic Bed and Breakfast.

►To display the full screen to view the full title of the page, click View on the menu bar, and then click Full ScreenDrag to select the words you just typed, click the Font Size list arrow on the Formatting toolbar, and then click 16pt

►Click in the div#center container. Type Guest Registration Form.

Chapter 7: Creating Web Applications 20

7 Entering Text Directly on the Web Form[ Static text can be typed directly on the web page ]

Chapter 7: Creating Web Applications 21

7

Chapter 7: Creating Web Applications 22

Adding CheckBox Objects

►Drag the CheckBox object from the Toolbox to the Web form, and then position it on the form

►Name the CheckBox object by clicking to the right of its (ID) property in the Properties window, and then entering chkSerenity

►Change the Text property of the CheckBox object to Serenity Suite $220

►In the Mystic Bed and Breakfast application, the Serenity suite is the most popular suite. This suite, therefore, should be checked when the form opens to save time for the user. To select the Serenity suite check box, change the Checked property for the object from False to True

7

Chapter 7: Creating Web Applications 23

Adding CheckBox Objects

7 Coding for CheckBox Objects

Chapter 7: Creating Web Applications 24

Notice that these are NOT nested If statements, they are stacked!

7

Chapter 7: Creating Web Applications 25

Adding a DropDownList Object

►Drag the DropDownList object to the Web form, and then click Format on the menu bar, click Position, and click Absolute in the Position dialog box so you can move the object on the form. Click OK in the Position dialog box

►Name the DropDownList object by 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, click the Smart Tag on the upper-right corner of the object

►Click Edit Items on the DropDownList Tasks menu

7

Chapter 7: Creating Web Applications 26

Adding a DropDownList Object

► Click the Add button. In the ListItem properties pane on the right side of the dialog box, click to the right of the Text property and enter 1

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

► Click the OK button in the ListItem Collection Editor dialog box. Resize the DropDownList object to the width of a single digit.

► To view the completed DropDownList object, run the application by clicking the Start [Without] Debugging button on the Standard toolbar.

► Click the list arrow on the DropDownList object in the Web page

7

Chapter 7: Creating Web Applications 27

Adding a DropDownList Object

7

Chapter 7: Creating Web Applications 28

Adding a Calendar Object

►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 click the Smart Tag on the upper-right corner of the Calendar object

►Click Auto Format on the Calendar Tasks menu. When the Auto Format dialog box opens, click the Colorful 2 scheme in the Select a scheme list

►Click the OK button to resize the Calendar object as needed

7

Chapter 7: Creating Web Applications 29

Adding a Calendar Object

7

Chapter 7: Creating Web Applications 30

Code for a Calendar Object

7

Chapter 7: Creating Web Applications 31

Adding a Required Field Validator

►In the Toolbox, hide the Standard tools by clicking the minus sign next to Standard. Expand the Validation tools by clicking the plus sign next to Validation

►Click at the top of the div#rightcolumn. Press ENTER three times. Drag the RequiredFieldValidator to the right of the Name TextBox object

►Name the RequiredFieldValidator by typing rfvFirstName in its (ID)

7

Chapter 7: Creating Web Applications 32

Adding a Required Field Validator

►To specify that the rfvName RequiredFieldValidator object validates the txtFirstName TextBox object, click to the right of the ControlToValidate property in the Properties window, click the list arrow, and then select txtFirstName

►In the Properties window for the RequiredFieldValidator, change the ErrorMessage property to * Enter Name. If necessary, resize the RequiredFieldValidator to fit in the table cell

7

Chapter 7: Creating Web Applications 33

Adding a Required Field Validator

7

Chapter 7: Creating Web Applications 34

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

7 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 7: Creating Web Applications 35

7

Chapter 7: Creating Web Applications 36

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

7

Chapter 7: Creating Web Applications 37

Applying the Regular Expression Validator

►Drag the RegularExpressionValidator object from the Toolbox to the right of the E-mail Address TextBox object in the custom Table object. Resize the RegularExpressionValidator object to fit the table cell

►Name the RegularExpressionValidator by typing revEmail in its (ID) property

►Click to the right of the ControlToValidate property, click the list arrow, and then click txtEmail

►Change the ErrorMessage property to * Error E-mail Format

7

Chapter 7: Creating Web Applications 38

Applying the Regular Expression Validator

►To set txtEmail to validate that it contains a standard e-mail address, click to the right of the ValidationExpression property, and then click its ellipsis button. In the Regular Expression Editor dialog box, select Internet e-mail address in the Standard expressions list

►Click the OK button in the Regular Expression Editor dialog box. Run the application by clicking the Start Debugging button on the Standard toolbar.

►Enter an e-mail address without an @ symbol, such as brit.world.net, and then press the ENTER key

7

Chapter 7: Creating Web Applications 39

Applying the Regular Expression Validator

7

Chapter 7: Creating Web Applications 40

Applying Multiple Validations

7

Chapter 7: Creating Web Applications 41

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

7

Chapter 7: Creating Web Applications 42

Using the <br> Tag in Visual Basic Code

7

Chapter 7: Creating Web Applications 43

Finding String Length

7

Chapter 7: Creating Web Applications 44

Using the Trim Procedure

7

Chapter 7: Creating Web Applications 45

Converting Uppercase and Lowercase Text

7

Chapter 7: Creating Web Applications 46

Program Design

7

Chapter 7: Creating Web Applications 47

Program Design

7

Chapter 7: Creating Web Applications 48

Event Planning Document

7

Chapter 7: Creating Web Applications 49

Summary

►Create a Web application►Build a Web form using ASP.NET 3.5►Set Web form properties►Use the full screen view►Add objects to a Web form►Add a DropDownList object

7

Chapter 7: Creating Web Applications 50

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

Microsoft Visual Basic 2008

CHAPTER SEVEN COMPLETE

Creating Web Applications