Microsoft Visual Basic 2005 CHAPTER 7 Creating Web Applications

7 Chapter 7: Creating Web Applications2 Objectives ►Create a Web application ►Build a Web form using ASP.NET 2.0 ►Set Web form properties ►Use the full screen view

7 Chapter 7: Creating Web Applications3 Objectives ►Add objects to a Web form ►Add a DropDownList object ►Add a Calendar object ►Add a custom table for layout

7 Chapter 7: Creating Web Applications4 Objectives ►Validate data on Web forms ►Use the tag in Visual Basic code ►Use string manipulation methods in the String class

7 Chapter 7: Creating Web Applications5 Introduction ►Visual Studio allows you to create applications that can execute on the World Wide Web ►Visual Basic 2005 includes ASP.NET 2.0 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 that requests data from the user

7 Chapter 7: Creating Web Applications6 Introduction

7 Chapter 7: Creating Web Applications7 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 2.0 technology used with Visual Basic 2005 creates an active server page (ASP)

7 Chapter 7: Creating Web Applications8 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 ►Click the OK button in the New Web Site dialog box

7 Chapter 7: Creating Web Applications9 Creating a Dynamic Web Site Using Visual Basic

7 Chapter 7: Creating Web Applications10 Specifying a Web Form Title ►In the design window 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 Form ►To view the title bar with the title Mystic Bed and Breakfast Reservation Form, click the Start 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 ►To close the browser window, click the Close button on the title bar of the browser window

7 Chapter 7: Creating Web Applications11 Specifying a Web Form Title

7 Chapter 7: Creating Web Applications12 Specifying Web Page Color ►Click the background of the Web form, and select the BgColor property in the Properties window ►Click the ellipsis button to the right of BgColor property in the Properties window ►Click Maroon (color #990000), and then click the OK button

7 Chapter 7: Creating Web Applications13 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 Chapter 7: Creating Web Applications14 Adding a Label Object to a Web Form ►With the Standard category open in the Toolbox, drag a Label object to the Web form ►To absolutely position objects so you can move them by dragging, click the background of the Web form, click Layout on the menu bar, point to Position, and then click Auto-position Options ►With CSS Positioning selected in the left panel, click the “Change positioning to the following for controls added using the Toolbox, paste, or drag and drop” check box to select it. Click the list arrow in the associated list box, and then click Absolutely positioned, if necessary. If the “Snap pixel-based positions and sizes to the following setting: ” check box contains a check mark, click it to remove the check mark ►Click the OK button in the Options dialog box. Drag the Label object to the right, as shown on the following slide

7 Chapter 7: Creating Web Applications15 Adding a Label Object to a Web Form

7 Chapter 7: Creating Web Applications16 Naming and Formatting a Label on a Web Form ►After you name the Label object using the (ID) property and change the Text property to Mystic Bed and Breakfast, click the Label object ►Click the Font Name list arrow on the Formatting toolbar, scroll if necessary, and then click Edwardian Script ITC (or a similar font ) ►Click the Font Size list arrow on the Formatting toolbar, scroll if necessary, and then click 48pt ►To change the color of the font displayed in the lblTitle Label object, click the Foreground Color button on the Formatting toolbar. When the Color Picker window opens, ensure the Web Palette is displayed, and then click White in the Web Palette ►Click the OK button in the Color Picker dialog box. View the form to verify that the text in the lblTitle Label object appears as white Edwardian Script ITC text in 48 point size. Drag a sizing handle to the right, if necessary, to resize the Label object so that its text appears on one line

7 Chapter 7: Creating Web Applications17 Naming and Formatting a Label on a Web Form

7 Chapter 7: Creating Web Applications18 Entering Text Directly on the Web Form ►Click the background of the Web form. Type Guest Reservation Form: ►Drag to select the words you just typed, click the Font Size list arrow on the Formatting toolbar, and then click 16pt

7 Chapter 7: Creating Web Applications19 Adding TextBox and Button Objects

7 Chapter 7: Creating Web Applications20 Adding an Image Object ►Drag the Image object from the Toolbox to the Web form. Resize the object so that it is about 175 x 130 pixels ►In the Properties window for the Image object, name the Image object by entering picMystic in its (ID) property. Specify the image to display by entering the Web address 5/ch7/bb.jpg as the ImageUrl property

7 Chapter 7: Creating Web Applications21 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 a night ►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 Applications22 Adding CheckBox Objects

7 Chapter 7: Creating Web Applications23 Coding for Check Box Objects

7 Chapter 7: Creating Web Applications24 Adding a DropDownList Object ►Drag the DropDownList object to the Web form, and then position it on the form ►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 Applications25 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. To view the completed DropDownList object, run the application by clicking the Start Debugging button on the Standard toolbar. Click the list arrow on the DropDownList object in the Web page

7 Chapter 7: Creating Web Applications26 Adding a DropDownList Object

7 Chapter 7: Creating Web Applications27 Adding a Calendar Object ►Drag the Calendar object from the Toolbox to the Web form, and then position it on the form ►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 1 scheme in the Select a scheme list ►Click the OK button

7 Chapter 7: Creating Web Applications28 Adding a Calendar Object

7 Chapter 7: Creating Web Applications29 Code for a Calendar Object

7 Chapter 7: Creating Web Applications30 Using a Custom Table for Layout ►Click Layout on the menu bar, and then click Insert Table ►In the Custom section, change the number of rows to 9 and the number of columns to 3. Click the OK button. Position the table on the form ►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, the width is shown in pixels (px) in the column. Resize the first column until it is 130 px wide

7 Chapter 7: Creating Web Applications31 Using a Custom Table for Layout ►To resize the row height, you drag a row divider. As you drag, the height is shown in pixels in the row. Change the height of the first row to 25 px ►Click in the first cell and type First Name: to enter text directly into the Table object ►Resize the second column of the table to 155 px. Drag a TextBox object from the Toolbox to the form and then position the TextBox object in the second cell in the Table object. Name this TextBox object txtFirstName using the (ID) property

7 Chapter 7: Creating Web Applications32 Using a Custom Table for Layout

7 Chapter 7: Creating Web Applications33 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 ►Resize the third column in the table to 144 px. Drag the RequiredFieldValidator object to the right of the TextBox object in the custom Table object. If necessary, resize the RequiredFieldValidator object to fit the table cell ►Name the RequiredFieldValidator by typing rfvFirstName in its (ID)

7 Chapter 7: Creating Web Applications34 Adding a Required Field Validator ►To specify that the rfvFirstName 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 First Name. If necessary, resize the RequiredFieldValidator to fit in the table cell

7 Chapter 7: Creating Web Applications35 Adding a Required Field Validator

7 Chapter 7: Creating Web Applications36 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 an Integer or String ►ErrorMessage property explains to the user what value is requested

7 Chapter 7: Creating Web Applications37 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

7 Chapter 7: Creating Web Applications38 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 Applications39 Applying the Regular Expression Validator ►Drag the RegularExpressionValidator object from the Toolbox to the right of the Address TextBox object in the custom Table object. Resize the RegularExpressionValidator object to fit the table cell ►Name the RegularExpressionValidator by typing rev in its (ID) property ►Click to the right of the ControlToValidate property, click the list arrow, and then click txt ►Change the ErrorMessage property to * Enter a Valid Address. Resize the third table column if necessary

7 Chapter 7: Creating Web Applications40 Applying the Regular Expression Validator ►To set txt to validate that it contains a standard address, click to the right of the ValidationExpression property, and then click its ellipsis button. In the Regular Expression Editor dialog box, select Internet address in the Standard expressions list ►Click the OK button in the Regular Expressions Editor dialog box. Run the application by clicking the Start Debugging button on the Standard toolbar. Enter an address without symbol, such as brit.world.net, and then press the ENTER key

7 Chapter 7: Creating Web Applications41 Applying the Regular Expression Validator

7 Chapter 7: Creating Web Applications42 Applying Multiple Validations

7 Chapter 7: Creating Web Applications43 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 Applications44 Using the Tag in Visual Basic Code

7 Chapter 7: Creating Web Applications45 Finding String Length

7 Chapter 7: Creating Web Applications46 Using the Trim Procedure

7 Chapter 7: Creating Web Applications47 Converting Uppercase and Lowercase Text

7 Chapter 7: Creating Web Applications48 Program Design

7 Chapter 7: Creating Web Applications49 Program Design

7 Chapter 7: Creating Web Applications50 Event Planning Document

7 Chapter 7: Creating Web Applications51 Summary ►Create a Web application ►Build a Web form using ASP.NET 2.0 ►Set Web form properties ►Use the full screen view

7 Chapter 7: Creating Web Applications52 Summary ►Add objects to a Web form ►Add a DropDownList object ►Add a Calendar object ►Add a custom table for layout

7 Chapter 7: Creating Web Applications53 Summary ►Validate data on Web forms ►Use the tag in Visual Basic code ►Use string manipulation methods in the String class

Microsoft Visual Basic 2005 CHAPTER 7 COMPLETE Creating Web Applications