1. Chapter 9 Web Applications Copyright © 2011 by The McGraw-Hill Companies, Inc. All Rights Reserved. McGraw-Hill

2. 9-2 Objectives Explain the functions of the server and the client in Web programming. Create a Web Form and run it in a browser. Describe the differences among the various types of Web controls and the relationship of Web controls to controls used on Windows forms. Understand the event structure required for Web programs. Design a Web Form using tables. Validate Web input using the validator controls. Define ASP, XML, WSDL, and SOAP.

3. 9-3 Visual Basic and Web Programming In VB.NET, Web Forms are used to create the user interface for Web projects. Web Forms display as a document in a browser. Create documents that display on mobile devices such as cell phones and personal digital assistants (PDAs).

4. 9-4 Client/Server Web Applications Require a server and a client –Server sends the Web Pages to the Client. –Client displays the Web Pages in Browser.

5. 9-5 Web Servers To develop Web applications use either a Remote Web Server --OR-- Local machine set up as a Web Server by installing IIS before installing VB --OR-- The web server built into Visual Studio (the best option for initial development)

6. 9-6 Web Clients Browsers display pages written in hypertext markup language (HTML). Microsoft Internet Explorer Netscape Pages may also contain program logic in the form of Java Applets Script – JavaScript – VBScript – JScript

7. 9-7 Web Pages Stateless Does not store any information about its contents from one invocation to the next Techniques for working around Stateless Cookies stored on local machine Sending state information to server as part of the page's address, uniform resource locator (URL)

8. 9-8 ASP.NET ASP.NET 3.5 is the latest Web programming technology from Microsoft. ASP.NET provides libraries, controls, and programming support for programs that: Interact with the user Maintain state, render controls Display data, and generate appropriate HTML When using Web Forms in VB.NET you are using ASP.NET. Object-oriented event-driven Web applications can be created using VB and ASP.NET.

9. 9-9 Visual Basic and ASP.NET Each Web Form has two distinct pieces HTML and instructions needed to render the page VB code Web Form generates a file with an.aspx extension for HTML and.aspx.vb extension for the VB code. Visual Studio IDE automatically generates the HTML. HTML tags can be viewed and modified in the Visual Studio editor. VB code contains the program logic to respond to events called the “code-behind” file. VB code is not compiled into an.exe file as it is for Windows applications.

10. 9-10 Creating a Web Project (1 of 2) Open the New Project Dialog. Select Empty Web Project from the VB Web category

11. 9-11 Creating a Web Project (2 of 2) Enter the project name and select a location for the solution folder (as you did for Windows applications). Add a Web Form to the project. The Web Project is preferred for portability. 9-11

12. 9-12 Creating a Web Site (1 of 2) Select New Web Site from the File menu — in the New Web Site dialog box, selections can be made for template, location, and language. A new Web site automatically contains one Web page called Default.aspx. A second file, Default.aspx.vb, the code-behind file, holds the VB code for the project.

13. 9-13 Creating a Web Site (2 of 2) Begin a new Web project by entering the location and project name on the New Web Site dialog box.

14. 9-14 Web Forms in the Visual Studio IDE As Web project opens, connection to the Web Server is established. Web Forms are based on a completely different class. Web Forms have different Controls Properties, Methods, and Events Toolbar, Toolbox, and lists of files in Solution Explorer

15. 9-15 Visual Web Developer with New Web Project

16. 9-16 Viewing the HTML Code Design and Sources tabs at bottom of the form in the Designer allow you to switch between the HTML code and VB code. Click on the Source tab to view the static HTML code. HTML creates the visual elements on the page and is automatically generated.

17. 9-17 Controls Several types of controls are available for Web Forms and can be mixed on a single form. Very often used are the Standard (ASP.NET server controls) — provided by ASP.NET and the.NET framework. Web server controls don’t directly correspond to HTML controls but are rendered differently for different browsers to achieve desired look/feel.

18. 9-18 ToolBox Controls Toolbox includes tabs for selecting control type. VS Designer adds a small green arrow in the upper-left corner of server controls. ASP Server Control Client-side HTML Control

19. 9-19 Event Handling Events are written in the same way as for Windows controls. Events may actually occur on Client Server Process of capturing an event, sending it to the server, and executing the required methods is all done automatically. Events of Web Forms are somewhat different than for Windows Forms. Example: Web Form has a Page_Load rather than Form_Load.

20. 9-20 Files Files in a Web application differ greatly from those in a Windows application. Two files make up the form:.aspx file Holds specifications for the user interface.aspx.vb (“code-behind” file) VB code written to respond to events

21. 9-21 Debugging The VS 2010 IDE automatically generates code necessary for debugging a Web application — No special action is required to enable debugging. The Web.config file breakpoints, single-step execution, and display, the contents of variable and properties can be set.

22. 9-22 Testing In Other Browsers By default, Web projects are tested in Microsoft Internet Explorer. To test in another browser Right-click on the project name Select Browse With

23. 9-23 Laying Out Web Forms Factors that will effect the layout of page: Browsers Screen Sizes Screen Resolutions Window Sizes ASP.NET generates appropriate HTML to render the page in various browsers but cannot be aware of the screen size, resolution, or window size on the target machine.

24. 9-24 Using Tables for Layout HTML Tables contain rows and columns. Add controls and text to the table cells to align the columns. Table is an HTML control, requiring no server-side programming.

25. 9-25 Entering Controls or Text in a Table Controls can be added to a table cell or type text in a cell during design time. Add a label and give it an ID to be able to refer to the text in a cell at run time. –OR— Type text directly into the cell.

26. 9-26 Including Images on Web Pages Use the Image control to add graphics to a Web page. Concept is similar to the PictureBox control on Windows Forms but the graphic file is connected differently due to the nature of the Web applications. Each Image control has an ImageUrl property that specifies the location of the graphic file. To place an image on a Web page, the graphic should first be copied into the Web site folder. Image controls can be added to a cell in a table or directly on a Web page.

27. 9-27 Table and Image Place images, text, and controls where you want them by using a table.

28. 9-28 Navigating Web Pages Add a HyperLink to allow user to navigate to another site or page. Enter a Text property for the text to display for the user. Enter a NavigateUrl property to specify the URL to which to navigate; the Select URL dialog box displays. Select the page from a list. If wanting to navigate to another Web site, type the Web address as the NavigateUrl property value.

29. 9-29 Select URL dialog box Select the page to which to navigate for a HyperLink control from the Select URL dialog box.

30. 9-30 Adding a Second Web Page To add a new Web Form to a Web site, select Web Form in the Add New Item dialog box. Make sure to choose Visual Basic for the language and select Place code in separate file.

31. 9-31 Using the Validator Controls ASP.NET provides several controls that can automatically validate input data. Steps for using Add a validator control — attach it to an input control and set the error message. At run time, when data is input, the error message displays if the validation rule is violated. Validator controls run on the client side.

32. 9-32 Maintaining State Must take steps to maintain values of variables and controls on page. Set EnableViewState to True (default), so control contents reappear for each postback. Local variables in a Web application are re- created each time the procedure begins. Store value of module-level variables in controls to hold their values during postback. Use IsPostBack property to control actions on postback.

33. 9-33 Checking for Postback When an ASP.NET application loads, the Page- Load event occurs—the page is reloaded for each “round-trip” to the server (each postback). The Page-Load event occurs many times in a Web application. The page’s IsPostBack property is set to False for the initial page load and to True for all page loads after the first. Check for IsPostBack = True to make sure that actions are only performed on postbacks.

34. 9-34 AJAX (1 of 2) Asynchronous JavaScript and XML (AJAX) for creating interactive applications allows to reload only a portion of the Web page, rather than the entire page. AJAX is an open and cross-platform technology that works on many operating systems. Using AJAX, the loading speed can increase dramatically by downloading and rendering only the portion that changes.

35. 9-35 AJAX (2 of 2)

36. 9-36 Managing Web Projects Moving and renaming Web projects is easy when using Web Project or File Systems Web sites as opposed to IIS sites. Make sure the project is closed so that the project folder can be renamed and then it can be moved or copied to different locations or computers.

37. 9-37 Using the Copy Web Site Tool & Copying Web Projects Can copy an entire Web site from one location to another on the same computer, or to another computer on a network, or to a remote site Can copy the Web site to a remote server where it can be accessed by multiple users To copy a Web Project, simply copy the solution folder to the desired location (as for Windows projects)

38. 9-38 Some Web Acronyms (1 of 2) XML Extensible Markup Language. This popular tag- based notation is used to define data and their format and transmit the data over the Web. XML is entirely text based, does not follow any one manufacturer’s specifications, and can pass through firewalls. SOAP Simple Object Access Protocol. An XML-based protocol for exchanging component information among distributed systems of many different types. Since it is based on XML, its messages can pass through network firewall.

39. 9-39 Some Web Acronyms (2 of 2) HTTP HyperText Transfer Protocol. The protocol used to send and receive Web pages over the Internet using standardized request and response messages Web Service Code in classes used to provide middle- tier services over the Internet WSDL Web Services Description Language. An XML document using specific syntax that defines how a Web service behaves and how clients interact with the service