1. Microsoft Visual Basic 2008 CHAPTER SEVEN Creating Web Applications

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

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

4. 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 )

5. 7 Chapter 7: Creating Web Applications5 Introduction

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

8. 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)

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

10. 7 Chapter 7: Creating Web Applications10 Specifying a Web Form Title

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

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

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

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

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

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

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

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

19. 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 http://scsite.com/ vb2008/ch7/images/ bb.jpg as the ImageUrl property

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

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

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

23. 7 Chapter 7: Creating Web Applications23 Adding CheckBox Objects

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

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

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

27. 7 Chapter 7: Creating Web Applications27 Adding a DropDownList Object

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

29. 7 Chapter 7: Creating Web Applications29 Adding a Calendar Object

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

31. 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)

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

33. 7 Chapter 7: Creating Web Applications33 Adding a Required Field Validator

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

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

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

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

38. 7 Chapter 7: Creating Web Applications38 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

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

40. 7 Chapter 7: Creating Web Applications40 Applying Multiple Validations

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

42. 7 Chapter 7: Creating Web Applications42 Using the Tag in Visual Basic Code

43. 7 Chapter 7: Creating Web Applications43 Finding String Length

44. 7 Chapter 7: Creating Web Applications44 Using the Trim Procedure

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

46. 7 Chapter 7: Creating Web Applications46 Program Design

47. 7 Chapter 7: Creating Web Applications47 Program Design

48. 7 Chapter 7: Creating Web Applications48 Event Planning Document

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

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

51. Microsoft Visual Basic 2008 CHAPTER SEVEN COMPLETE Creating Web Applications