1. Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications

2. Previewing the DJ Tom Application Programming with Microsoft Visual Basic 20122 Figure 12-1 Result of clicking the Submit button Registers a DJ for a wedding party Inputs: –Names –Date –Email –Song

3. Lesson A Objectives After studying Lesson A, you should be able to: Define basic Web terminology Create a Web application Add Web pages to an application Customize a Web page Add static text to a Web page Format a Web page’s static text Programming with Microsoft Visual Basic 20123

4. Lesson A Objectives (cont.) View a Web page in full screen view Add a link button and an image to a Web page Start a Web application Close and open a Web application Reposition a control on a Web page Programming with Microsoft Visual Basic 20124

5. Web server –A computer that contains special software that “serves up” Web pages in response to requests from client computers Web pages –Documents stored on a Web server Client computer –A computer that requests information from a Web server Programming with Microsoft Visual Basic 20125 Web Applications

6. Browser – A program that allows users to view Web pages Static Web page –A document whose purpose is merely to display information to the viewer –Static Web pages are not interactive Dynamic Web page –An interactive page that can accept information from the user and also retrieve information for the user Programming with Microsoft Visual Basic 20126 Web Applications (cont.)

7. Programming with Microsoft Visual Basic 20127 Web Applications (cont.) Figure 12-2 Example of a static Web page Figure 12-3 Another example of a static Web page Figure 12-4 Example of a dynamic Web page

8. Programming with Microsoft Visual Basic 20128 Web Applications (cont.) ASP –Active server page –A technology used to create Web pages –All ASP pages contain HTML tags for formatting –Many ASP pages contain: ASP tags for controls included on a page Code for objects to respond to user actions –ASP pages communicate with the Web server to provide data requested by users

9. Programming with Microsoft Visual Basic 20129 Web Applications (cont.) Figure 12-5 Illustration of the relationship between a client computer and a Web server

10. Programming with Microsoft Visual Basic 201210 Creating a Web Application Web applications in Visual Basic are created using Visual Studio 2012 for Web –Available as a stand-alone product (called Visual Studio Express 2012 for Web) –Available as part of Visual Studio 2012 –Free download of Visual Studio Express 2012 for Web from Microsoft’s Web site

11. Programming with Microsoft Visual Basic 201211 Creating a Web Application (cont.) Figure 12-6 Options dialog box

12. Programming with Microsoft Visual Basic 201212 Creating a Web Application (cont.) Figure 12-7 New Web Site dialog box

13. Programming with Microsoft Visual Basic 201213 Adding the Default.aspx Web Page to the Application Figure 12-8 Add New Item dialog box Figure 12-9 Default.aspx Web page shown in Design view

14. Including a Title on a Web Page Use the Properties window to include a title on a Web page –The properties appear in the Properties window when you select DOCUMENT in the window’s Object box Adding Static Text to a Web Page Static text cannot be changed by the user You can add static text to a Web page by simply typing the text on the page itself; or you can use a label control that you dragged to the Web page from the Toolbox window 14 Adding the Default.aspx Web Page to the Application (cont.) Programming with Microsoft Visual Basic 2012

15. Adding Static Text to a Web Page (cont.) Programming with Microsoft Visual Basic 201215 Adding the Default.aspx Web Page to the Application (cont.) Figure 12-11 Result of clicking the arrow in the Block Format box Figure 12-12 Result of clicking the Alignment button Figure 12-10 Formatting toolbar

16. Programming with Microsoft Visual Basic 201216 Viewing a Web Page in Full Screen View Figure 12-13 Default.aspx Web page displayed in full screen view Use the Full Screen option on the VIEW menu to determine how the Web page will appear to the user

17. Programming with Microsoft Visual Basic 201217 Adding Another Web Page to the Application Click WEBSITE on the menu bar and then click Add New Item If necessary, click Visual Basic in the Installed list and then (if necessary) click Web Form in the middle column of the dialog box

18. Programming with Microsoft Visual Basic 201218 Adding a Link Button Control to a Web Page Figure 12-16 Link button control added to the Default.aspx Web page A link button control on the Default.aspx page will display the Hours.aspx page The link button control on the Hours.aspx page will return the user to the Default.aspx Web page Figure 12-14 Link button control added to the Hours.aspx Web page Figure 12-15 Select URL dialog box

19. Programming with Microsoft Visual Basic 201219 Starting a Web Application Figure 12-17 Customize dialog box Start a Web application either by pressing Ctrl+F5, or by clicking the Start Without Debugging option on the DEBUG menu

20. Programming with Microsoft Visual Basic 201220 Starting a Web Application (cont.) Figure 12-19 Hours.aspx Web page displayed in a browser window Figure 12-18 Default.aspx Web page displayed in a browser window

21. Click WEBSITE on the menu bar Click Add Existing Item Find the image you want to add –Click All Files (*.*) if you do not see the file you are looking for Click the Add button Click the Image tool in the toolbox and drag your mouse pointer to the location where you want the picture, and then release the mouse button Programming with Microsoft Visual Basic 201221 Adding an Image to a Web Page

22. Programming with Microsoft Visual Basic 201222 Adding an Image to a Web Page (cont.) Figure 12-20 Image control added to the Default.aspx Web page Figure 12-21 Default.aspx Web page

23. To close: –Click FILE on the menu bar and then click Close Solution to close the application To open: –Click FILE on the menu bar and then click Open Web Site to open the Open Web Site dialog box –If necessary, click the File System button; and if necessary, click the Yes button to use IIS Express –Right-click in the Solution Explorer window on the file you want to open and then click View Designer Programming with Microsoft Visual Basic 201223 Closing and Opening an Existing Web Application

24. Click the control on the Web page Drag the control to a new location and then release the mouse button Programming with Microsoft Visual Basic 201224 Repositioning a Control on a Web Page Figure 12-22 Modified Default.aspx Web page

25. Lesson A Summary Use the New Web Site command on the FILE menu to create a Web application Use the F5 key to start the Web application and display the Web page Set the DOCUMENT object’s Title property to add a title to a Web page Static text can be entered directly on the Web page or by using a label control Programming with Microsoft Visual Basic 201225

26. Lesson A Summary (cont.) Use the Full Screen command on the VIEW menu to display the page in full screen view Use the LinkButton tool to add a link button control to a Web page Use the Close Solution 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 Drag a control to reposition it on a Web page Programming with Microsoft Visual Basic 201226

27. Lesson B Objectives After studying Lesson B, you should be able to: Add a text box, a label, and a button to a Web page Code a control on a Web page Use a RequiredFieldValidator control Programming with Microsoft Visual Basic 201227

28. Programming with Microsoft Visual Basic 201228 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 the page layout before adding controls to a Web page Figure 12-27 Sketch of the Recipe application’s Web page

29. Programming with Microsoft Visual Basic 201229 Dynamic Web Pages (cont.) Figure 12-29 Static text added to the Web page Figure 12-28 Partially-completed interface for the Recipe Web application 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

30. Programming with Microsoft Visual Basic 201230 Dynamic Web Pages (cont.) Figure 12-31 Web page displayed in a browser window Figure 12-30 Selected text and controls

31. Programming with Microsoft Visual Basic 201231 Coding the Submit Button’s Click Event Procedure Figure 12-32 Pseudocode and variables for the btnSubmit_Click procedure Figure 12-33 Code Editor and Solution Explorer windows

32. Programming with Microsoft Visual Basic 201232 Coding the Submit Button’s Click Event Procedure (cont.) Figure 12-34 btnSubmit_Click procedure

33. Programming with Microsoft Visual Basic 201233 Coding the Submit Button’s Click Event Procedure (cont.) Figure 12-35 Result of clicking the Submit button

34. Programming with Microsoft Visual Basic 201234 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

35. Programming with Microsoft Visual Basic 201235 Validating User Input (cont.) Figure 12-36 Validator tools

36. Programming with Microsoft Visual Basic 201236 Validating User Input (cont.) Figure 12-37 Result of clicking the Submit button when both text boxes are empty

37. Programming with Microsoft Visual Basic 201237 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

38. 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 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 tag Programming with Microsoft Visual Basic 201238

39. Programming with Microsoft Visual Basic 201239 Creating the DJ Tom Application DJ Tom application –Allows the user to enter the names of the bride and groom, the wedding date, an e-mail address, and the name of the first song –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 tag to affect all text on the Web page

40. Creating the DJ Tom Application (cont.) Programming with Microsoft Visual Basic 201240 Figure 12-42 Sketch of the DJ Tom application’s Web page Figure 12-43 Modified tag

41. Creating a Columnar Layout Programming with Microsoft Visual Basic 201241 Figure 12-44 Completed tag for the first column Figure 12-45 Web page showing the three columns tag –Can be used to divide a Web page into columns

42. ASP table control –Displays information in a row and column format –Often used to align data on a page Using an ASP Table Programming with Microsoft Visual Basic 201242 Figure 12-47 TableRow Collection Editor dialog box Figure 12-46 ASP table control added to the ContentColumn

43. Using an ASP Table (cont.) Programming with Microsoft Visual Basic 201243 Figure 12-49 Table containing six rows and two columns Figure 12-48 TableCell Collection Editor dialog box

44. Using an ASP Table (cont.) Programming with Microsoft Visual Basic 201244 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 Dragging Controls in Source View To drag controls in Source view: –Deselect the table control and then click the Source tab –Using the appropriate tool for the control, drag the control into the desired cell in the table in Source view

45. Using an ASP Table (cont.) Programming with Microsoft Visual Basic 201245 Figure 12-52 Text box control shown in the table Figure 12-53 Controls added to the table Figure 12-51 Opening and closing text box tags added to the table instructions Figure 12-50 Text box control being dragged in Source view Dragging Controls in Source View (cont.)

46. Adding Items to a DropDownList Control Programming with Microsoft Visual Basic 201246 Figure 12-56 Song titles displayed in the drop-down list control Figure 12-55 Additional song titles added to the drop-down list control Use the tag to add items to a drop-down list control Figure 12-54 First song title added to the drop-down list control

47. Coding DJ Tom’s Web Page Programming with Microsoft Visual Basic 201247 Figure 12-57 Message displayed in the lblMsg control The button’s Click event procedure will display a message in the lblMsg control, which is contained in the MessageColumn on the Web page Using the Tag tag –Causes a line break without starting a new paragraph –Can be concatenated into a string to format the value into separate lines

48. Coding DJ Tom’s Web Page (cont.) Programming with Microsoft Visual Basic 201248 Figure 12-58 Modified btnSubmit_Click procedureFigure 12-59 Message displayed on separate lines in the lblMsg control Using the Tag (cont.)

49. Programming with Microsoft Visual Basic 201249 Lesson C Summary Use the font-family property in the tag to set the font for text on a Web page Use the 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 tag to add items to a drop-down list control

50. Programming with Microsoft Visual Basic 201250 Lesson C Summary (cont.) 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 tag to create a new line on a Web page