Microsoft Visual Basic 2008 CHAPTER SEVEN Creating Web Applications

7 Chapter 7: Creating Web Applications2 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 Applications3 Objectives ►Add objects to a Web form Add a DropDownList object Add a Calendar object Add a custom table for layout ►Use the tag in Visual Basic code ►Use string manipulation methods in the String class

7 Chapter 7: Creating Web Applications4 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 Applications5 Introduction

7 Chapter 7: Creating Web Applications6 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 Applications7 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 Applications8 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 Applications9 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 Form This 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 Applications10 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 Applications11

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 Applications12

7 Arranging the Div Contents of the Web Page Chapter 7: Creating Web Applications13

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 Applications14

7 Moving the Div Element Chapter 7: Creating Web Applications15 Create 4 div elements [containers] 1.div#leftcolumn 2.div#header 3.div#rightcolumn 4.div#center

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

7 Adding a Style to a Div Element [ font name, style, background color, alignment ] Chapter 7: Creating Web Applications18

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

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

7 Chapter 7: Creating Web Applications22 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 Applications23 Adding CheckBox Objects

7 Coding for CheckBox Objects Chapter 7: Creating Web Applications24 Notice that these are NOT nested If statements, they are stacked!

7 Chapter 7: Creating Web Applications25 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 Applications26 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 Applications27 Adding a DropDownList Object

7 Chapter 7: Creating Web Applications28 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 Applications29 Adding a Calendar Object

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

7 Chapter 7: Creating Web Applications31 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 Applications32 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 Applications33 Adding a Required Field Validator

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

7 Chapter 7: Creating Web Applications36 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 Applications37 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 * Error Format

7 Chapter 7: Creating Web Applications38 Applying the Regular Expression Validator ►To set txt 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 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 address without symbol, such as brit.world.net, and then press the ENTER key

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

7 Chapter 7: Creating Web Applications40 Applying Multiple Validations

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

7 Chapter 7: Creating Web Applications43 Finding String Length

7 Chapter 7: Creating Web Applications44 Using the Trim Procedure

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

7 Chapter 7: Creating Web Applications46 Program Design

7 Chapter 7: Creating Web Applications47 Program Design

7 Chapter 7: Creating Web Applications48 Event Planning Document

7 Chapter 7: Creating Web Applications49 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 Applications50 Summary ►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

Microsoft Visual Basic 2008 CHAPTER SEVEN COMPLETE Creating Web Applications