1. Programming with Microsoft Visual Basic 2008 Fourth Edition
Chapter Twelve
Web Applications

2. Previewing the DJ Tom Application
Web application for DJ (disc jockey) Tom
Specializes in weddings
Application should allow user to enter bride and groom names, wedding date, , and name of the first song to be played
Programming with Microsoft Visual Basic 2008, Fourth Edition

3. Previewing the DJ Tom Application (continued)
Figure 12-1: Result of clicking the Submit button
Programming with Microsoft Visual Basic 2008, Fourth Edition

4. Programming with Microsoft Visual Basic 2008, Fourth Edition
Lesson A Objectives
After studying Lesson A, you should be able to:
Create a Web application
View a Web page in a browser window
Add static text to a Web page
View a Web page in full screen view
Close and open a Web application
Add an image to a Web page
Move a control on a Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

5. Programming with Microsoft Visual Basic 2008, Fourth Edition
Web Applications
Internet: World’s largest computer network
Web pages: Documents that are stored on Web servers
Web server: Computer with special software that “serves up” Web pages requested by client computers
Client computer: Computer that requests information from a Web server
Programming with Microsoft Visual Basic 2008, Fourth Edition

6. Web Applications (continued)
Browser: Program used to request and view information from Web servers
Static Web page: Document that merely displays information to the viewer
Dynamic Web page: Interactive page that can accept information from the user and retrieve information for the user
Programming with Microsoft Visual Basic 2008, Fourth Edition

7. Web Applications (continued)
Figure 12-2: Example of a static Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

8. Web Applications (continued)
Figure 12-3: Example of a dynamic Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

9. Web Applications (continued)
ASP: Active server page
A technology used to create Web pages
ASP pages contain HTML tags for formatting, for controls included on page, and code for objects to respond to user actions
ASP pages communicate with the Web server to provide data requested by users
Programming with Microsoft Visual Basic 2008, Fourth Edition

10. Web Applications (continued)
Figure 12-4: Illustration of the relationship between a client computer and a Web server
Programming with Microsoft Visual Basic 2008, Fourth Edition

11. Creating a Web Application
Visual Web Developer 2008: Used to create Web applications
Available as a standalone product or as part of Visual Studio 2008
Select File on menu and then click New Web Site
Select File System in Location box
Select Visual Basic in Language box
Select ASP.NET Web Site in Templates
Click OK
Programming with Microsoft Visual Basic 2008, Fourth Edition

12. Creating a Web Application (continued)
Figure 12-5: Completed New Web Site dialog box
Programming with Microsoft Visual Basic 2008, Fourth Edition

13. Creating a Web Application (continued)
Click Source tab to display the Source view
Click Design tab to display the Design view
Click Split tab to show both Source and Design view
Display the properties window on the right side of the work area
Adjust the Visual Aids settings:
Click View on menu and then click Visual Aids
Programming with Microsoft Visual Basic 2008, Fourth Edition

14. Creating a Web Application (continued)
Figure 12-7: Visual Aids submenu
Programming with Microsoft Visual Basic 2008, Fourth Edition

15. Adding a Title to the Web Page
Title property: Its value appears in the browser’s title bar and on the browser tab
Select Document in the Properties window’s Object box, and then set the Title property value
Start Web application by pressing F5 key
May have to select Modify the Web.config file to enable debugging option
Programming with Microsoft Visual Basic 2008, Fourth Edition

16. Adding a Title to the Web Page (continued)
Figure 12-8: Browser window showing the Title property
Programming with Microsoft Visual Basic 2008, Fourth Edition

17. Changing the Background Color of a Web Page
BgColor property: Controls the background color of a Web page
Select Document in Properties window’s Object box, click BgColor property, and then click ellipsis button (…) to display More Colors dialog box
Click on a color in the dialog box then click OK
Programming with Microsoft Visual Basic 2008, Fourth Edition

18. Changing the Background Color of a Web Page (continued)
Figure 12-9: More Colors dialog box
Programming with Microsoft Visual Basic 2008, Fourth Edition

19. Adding Static Text to a Web Page
Static text: Text that cannot be changed by the user
Add static text by typing directly inside the rectangle that appears below the <div> tag
Can format the text using the formatting toolbar
Programming with Microsoft Visual Basic 2008, Fourth Edition

20. Adding Static Text to a Web Page (continued)
Figure 12-10: Static text entered on the Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

21. Adding Static Text to a Web Page (continued)
Figure 12-11: Formatting toolbar
Programming with Microsoft Visual Basic 2008, Fourth Edition

22. Adding Static Text to a Web Page (continued)
Figure 12-12: Selected text and alignment choices
Programming with Microsoft Visual Basic 2008, Fourth Edition

23. Viewing a Web Page in Full Screen View
Web page should be previewed in full screen mode to determine how it will appear to the user
Allows you to verify the placement of controls and text on the Web page
Click View on menu and then click Full screen
Programming with Microsoft Visual Basic 2008, Fourth Edition

24. Viewing a Web Page in Full Screen View (continued)
Figure 12-13: Web page displayed in full screen view
Programming with Microsoft Visual Basic 2008, Fourth Edition

25. Closing and Opening an Existing Web Application
To close a Web application in Visual Studio 2008:
Click File menu and then click Close Solution
To close a Web application in Visual Web Developer 2008:
Click File menu and then click Close Project
To open an existing web application:
Click File menu and then click Open Web Site
Programming with Microsoft Visual Basic 2008, Fourth Edition

26. Adding an Image to a Web Page
First add the image to the application:
Click the Website menu and then click Add Existing Item
Add an image control to the Web page using the Image tool
In Properties window, click ImageURL, and then click the ellipsis button (…)
Navigate to the image and select it
Can set other properties such as BorderWidth and BorderColor
Programming with Microsoft Visual Basic 2008, Fourth Edition

27. Adding an Image to a Web Page (continued)
Figure 12-14: Image control added to the Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

28. Adding an Image to a Web Page (continued)
Figure 12-15: Completed Web page displayed in a browser window
Programming with Microsoft Visual Basic 2008, Fourth Edition

29. Repositioning a Control on a Web Page
Click the image control, press left mouse button, and then drag it to the new location
Programming with Microsoft Visual Basic 2008, Fourth Edition

30. Repositioning a Control on a Web Page (continued)
Figure 12-17: Modified Web page displayed in a browser window
Programming with Microsoft Visual Basic 2008, Fourth Edition

31. Programming with Microsoft Visual Basic 2008, Fourth Edition
Lesson A Summary
Use the New Web Site command on the File menu to create a Web application
Use Document’s Title property to add a title to a Web page
Use F5 key to start the Web application and display the Web page
Use Document’s BgColor property to set the background color of a Web page
Static text can be entered directly on the web page and formatted in design mode
Programming with Microsoft Visual Basic 2008, Fourth Edition

32. Lesson A Summary (continued)
Use the Full Screen command on the View menu to display the page in full screen view
Use the Close Solution (Visual Studio 2008) command or Close Project (Visual Web Developer 2008) command on the File menu to close a Web application
Use the Open Web Site command on the File menu to open an existing Web application
Programming with Microsoft Visual Basic 2008, Fourth Edition

33. Lesson A Summary (continued)
Use the Add Existing Item command on the Website menu to add an image to the application
Use an image control to display an image
Reposition controls by dragging and dropping
Programming with Microsoft Visual Basic 2008, Fourth Edition

34. Programming with Microsoft Visual Basic 2008, Fourth Edition
Lesson B Objectives
After studying Lesson B, you should be able to:
Add a text box, label, and button to a Web page
Code a control on a Web page
Include a RequiredFieldValidator control on a Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

35. Programming with Microsoft Visual Basic 2008, Fourth Edition
Dynamic Web Pages
Dynamic Web page:
Contains controls with which the user can interact
Contains code that tells the controls how to respond to user actions
Plan page layout before adding controls to a Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

36. Dynamic Web Pages (continued)
Figure 12-21: Sketch of the Currency Converter application’s Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

37. Dynamic Web Pages (continued)
Figure 12-22: Image control and static text on the Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

38. Dynamic Web Pages (continued)
Figure 12-23: Additional controls added to the Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

39. Dynamic Web Pages (continued)
To position an image control in relation to the text around it:
Click the Format menu and then click Position
Set the wrapping style, positioning style, location, and size in the Position dialog box
Programming with Microsoft Visual Basic 2008, Fourth Edition

40. Dynamic Web Pages (continued)
Figure 12-24: Position dialog box
Programming with Microsoft Visual Basic 2008, Fourth Edition

41. Dynamic Web Pages (continued)
Figure 12-25: Size and position of the image control
Programming with Microsoft Visual Basic 2008, Fourth Edition

42. Coding a Control on a Web Page
Currency Converter application’s Submit button must convert American dollars to British pounds
Must add code to the Submit button to accomplish this task
After coding, test the application
Programming with Microsoft Visual Basic 2008, Fourth Edition

43. Coding a Control on a Web Page (continued)
Figure 12-27: btnSubmit control’s Click event procedure
Programming with Microsoft Visual Basic 2008, Fourth Edition

44. Coding a Control on a Web Page (continued)
Figure 12-28: Result of entering data and clicking the Submit button
Programming with Microsoft Visual Basic 2008, Fourth Edition

45. Programming with Microsoft Visual Basic 2008, Fourth Edition
Validating User Input
Validation section of the toolbox contains tools for validating user input
Validator tools: Each has a purpose and validates a particular type of input
ValidationSummary tool: Used to display all validation error messages in a single location on a Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

46. Validating User Input (continued)
Figure 12-29: Listing of validator tools
Programming with Microsoft Visual Basic 2008, Fourth Edition

47. Validating User Input (continued)
Figure 12-30: Result of clicking the Submit button before entering any data
Programming with Microsoft Visual Basic 2008, Fourth Edition

48. Programming with Microsoft Visual Basic 2008, Fourth Edition
Lesson B Summary
Use the Position command on the Format menu to wrap text around an image control
Use the Code Editor window to code a control on a Web page
Use validator tools to validate user input on a Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

49. Programming with Microsoft Visual Basic 2008, Fourth Edition
Lesson C Objectives
After studying Lesson C, you should be able to:
Make changes to the Web page in Source view
Create columns using the <div> tag
Utilize an ASP table in a Web page
Add a calendar to a Web page
Add a drop-down list box to a Web page
Create a new line using the <br /> tag
Programming with Microsoft Visual Basic 2008, Fourth Edition

50. Creating the DJ Tom Application
Allows user to enter names of bride and groom, wedding date, address, and name of first song to be danced
Should provide a Submit button that displays a message on the page, containing the information entered
font-family property: Used to set the font for the Web page
Set in the <body> tag to affect all text on the Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

51. Creating the DJ Tom Application (continued)
Figure 12-33: Sketch of the DJ Tom application’s Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition

52. Creating the DJ Tom Application (continued)
Figure 12-34: Modified <body> tag
Programming with Microsoft Visual Basic 2008, Fourth Edition

53. Creating a Columnar Layout
<div> tag: can be used to divide a Web page into columns
Programming with Microsoft Visual Basic 2008, Fourth Edition

54. Creating a Columnar Layout (continued)
Figure 12-35: <div> tag for the first column
Programming with Microsoft Visual Basic 2008, Fourth Edition

55. Creating a Columnar Layout (continued)
<div> is a container that can hold other controls
Message column will contain a label
Programming with Microsoft Visual Basic 2008, Fourth Edition

56. Creating a Columnar Layout (continued)
Figure 12-36: Web page showing the three columns
Programming with Microsoft Visual Basic 2008, Fourth Edition

57. Programming with Microsoft Visual Basic 2008, Fourth Edition
Using an ASP Table
ASP table control: Displays information in a row and column format
Often used to align data on a page
Programming with Microsoft Visual Basic 2008, Fourth Edition

58. Using an ASP Table (continued)
Figure 12-37: ASP table control added to the ContentColumn
Programming with Microsoft Visual Basic 2008, Fourth Edition

59. Using an ASP Table (continued)
Use the Rows property to display the TableRow Collection Editor dialog box
Add a row, then set the cells for the row
Use the Cells property of a row to display the TableCell Collection Editor dialog box
Add cells and set their properties
Programming with Microsoft Visual Basic 2008, Fourth Edition

60. Using an ASP Table (continued)
Figure 12-38: TableRow Collection Editor dialog box
Programming with Microsoft Visual Basic 2008, Fourth Edition

61. Using an ASP Table (continued)
Figure 12-39: TableCell Collection Editor dialog box
Programming with Microsoft Visual Basic 2008, Fourth Edition

62. Using an ASP Table (continued)
Figure 12-40: Table containing six rows and two columns
Programming with Microsoft Visual Basic 2008, Fourth Edition

63. Dragging Controls in Source View
To drag controls in source view:
Auto-hide the Properties window
Deselect the table control and then click the Source tab
Drag the tool into the appropriate cell in the table in Source view
Programming with Microsoft Visual Basic 2008, Fourth Edition

64. Dragging Controls in Source View (continued)
Figure 12-41: Text box control being dragged in Source view
Programming with Microsoft Visual Basic 2008, Fourth Edition

65. Dragging Controls in Source View (continued)
Figure 12-42: <asp:TextBox> tag added to the table instructions
Programming with Microsoft Visual Basic 2008, Fourth Edition

66. Dragging Controls in Source View (continued)
Figure 12-42: Text box tag control shown in the table
Programming with Microsoft Visual Basic 2008, Fourth Edition

67. Dragging Controls in Source View (continued)
Figure 12-43: Controls added to the table
Programming with Microsoft Visual Basic 2008, Fourth Edition

68. Adding Items to a DropDownList Control
Use the <asp:ListItem> tag to add items to a drop-down list control
Programming with Microsoft Visual Basic 2008, Fourth Edition

69. Adding Items to a DropDownList Control (continued)
Figure 12-46: Remaining song titles added to the drop-down list control
Programming with Microsoft Visual Basic 2008, Fourth Edition

70. Adding Items to a DropDownList Control (continued)
Figure 12-47: Web page shown in a browser window
Programming with Microsoft Visual Basic 2008, Fourth Edition

71. Adding Items to a DropDownList Control (continued)
Figure 12-48: Message displayed in the lblMsg control
Programming with Microsoft Visual Basic 2008, Fourth Edition

72. Using the <br /> Tag
<br /> tag: causes a line break without starting a new paragraph
Can be concatenated into a string to format the value into separate lines
Programming with Microsoft Visual Basic 2008, Fourth Edition

73. Using the <br /> Tag (continued)
Figure 12-49: Modified Click event procedure for the btnSubmit control
Programming with Microsoft Visual Basic 2008, Fourth Edition

74. Using the <br /> Tag (continued)
Figure 12-50: Message displayed on separate lines in the lblMsg control
Programming with Microsoft Visual Basic 2008, Fourth Edition

75. Programming with Microsoft Visual Basic 2008, Fourth Edition
Lesson C Summary
Use the font-family property in the <body> tag to set the font for text on a Web page
Use the <div> tag to divide a Web page into columns
Use the Rows property of an ASP table control to set up the cells for each row
Drag a control into the table’s cell in Source view to place it in the table
Use the <asp:ListItem> tag to add items to a drop-down list control
Programming with Microsoft Visual Basic 2008, Fourth Edition

76. Lesson C Summary (continued)
Use the Calendar control’s SelectedDate property to determine the date selected by the user
Use the Calendar control’s ToShortDateString method to format a date as mm/dd/yyyy
Use the SelectedItem property of a drop-down list control to determine the item selected by the user
Use the <br /> tag to create a new line on a Web page
Programming with Microsoft Visual Basic 2008, Fourth Edition