1. Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic 2010 2 nd Edition

2. Objectives Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 2 After studying Chapter 27, 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

3. Objectives (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 3 View a Web page in full screen view Add controls (link button, image, text box, label, and button) to a Web page Start, close, and open a Web application Reposition a control on a Web page Code a control on a Web page Use a RequiredFieldValidator control

4. Web Applications Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 4 World Wide Web (the Web) World’s largest computer network Consists of Web pages stored on Web servers Web server Computer that contains special software to “serve up” Web pages Client computer Requests information from a Web server Browser Program used to request and view Web information

5. Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 5 Static Web page Document displays information to viewer Not interactive Links allow viewers to “jump” between Web pages Examples in Figures 27-1 and 27-2 on next slides

6. Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 6 Figure 27-1 Example of a static Web page

7. Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 7 Figure 27-2 Another example of a static Web page

8. Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 8 Dynamic Web pages Interactive Accept information from the user Retrieve information for the user Example shown in Figure 27-3 on next slide

9. Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 9 Figure 27-3 Example of a dynamic Web page

10. Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 10 ASP Active server page Technology used to create Web applications in this chapter HTML Hypertext Markup Language All ASP pages contain HTML tags

11. Creating a Web Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 11 Create Web application Use Visual Web Developer 2010 Available as stand-alone Or as part of Visual Studio 2010 Configure Visual Web Developer 2010 Express Follow instructions on pages 500-501 Begin creating the Cottage Toy Store Web application Follow instructions on pages 501-502

12. Adding the Default.aspx Web Page to the Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 12 After creating an empty Web application: Add a Web page to it First added Web page usually named Default.aspx Follow instructions on pages 502-503 To add the Default.aspx page

13. Customizing a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 13 Properties window Used to customize a Web page Change the title and background color Follow instructions on page 504

14. Adding Static Text to a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 14 Static text Text that cannot be changed by a user Added by typing text on page itself Or by using a label control Drag from the Toolbox window Add static text to the Web page Follow instructions on page 504 Formatting static text Use Format menu or Formatting toolbar

15. Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 15 Figure 27-10 Formatting toolbar Figure 27-11 Result of clicking the Alignment button

16. Viewing a Web Page in Full Screen View Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 16 View page in full screen view: To see how it will appear to the user Use Full Screen option on the View menu Click Full Screen button again to return to standard view

17. Adding Another Web Page to the Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 17 Add a second Web page to the Cottage Toy Store application Follow instructions on pages 506-507

18. Adding a Link Button Control to a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 18 Controls added to a Web page: Using tools provided in Toolbox window Add a link button control to both Web pages Follow instructions on pages 507-508

19. Adding a Link Button Control to a Web Page (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 19 Figure 27-15 Link button control added to the Default.aspx Web page

20. Starting a Web Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 20 Start a Web application by: Pressing Ctrl+F5 Clicking the Start Without Debugging option On the Debug menu May need to add this option to the menu Start the Cottage Toy Store Web application Follow instructions on pages 509-510

21. Adding an Image to a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 21 Add Small_house.jpg to the Default.aspx Web page Follow instructions on pages 510-511 Be sure to understand copyright policies when choosing images to use Figure 27-19 Image control added to the Default.aspx Web page

22. Closing and Opening an Existing Web Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 22 Use the File menu: To close and open an existing Web application Close and then open the Cottage Toy Store application Follow instructions on page 512

23. Repositioning a Control on a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 23 Move image and link button controls: To different locations on Default.aspx Web page Follow instructions on pages 512-513

24. Repositioning a Control on a Web Page (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 24 Figure 27-21 Modified Default.aspx Web page

25. Dynamic Web Pages Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 25 Contain controls with which user can interact Contain code that tells controls how to respond to user’s actions Create the Currency Converter Web application First plan the page’s layout Example sketch shown in Figure 27-22 on next slide Follow instructions on pages 514-517

26. Dynamic Web Pages (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 26 Figure 27-22 Sketch of the Currency Converter application’s Web page

27. Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 27 Figure 27-25 Position dialog box

28. Coding the Submit Button’s Click Event Procedure Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 28 Submit button Converts American dollars to Mexican pesos Displays result on Web page Code Submit button’s Click event procedure Follow instructions on pages 517-519

29. Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 29 Figure 27-28 btnSubmit control’s Click event procedure Figure 27-27 Code Editor and Solution Explorer windows

30. Validating User Input Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 30 Validator tools Purpose: To validate user input Provided in the Validation section of the toolbox Figure 27-30 lists characteristics of each validator tool

31. Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 31 Figure 27-30 Validator tools

32. Summary Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 32 Web pages Stored on Web servers Can be either static or dynamic Client computer uses browser: To request Web page from Web server To view the Web page Use New Web Site option to create an empty Web application Add New Item adds a Web page to the application

33. Summary (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 33 DOCUMENT object’s Title property Used to add a title to a Web page Static text Can be added by typing or through a label control LinkButton tool Used to add a link button control to a Web page To wrap text around an image control: Use position option on the Format menu Several validator tools available to validate user input