Web Programming: Client/Server Applications

1. Web Programming: Client/Server Applications • Server sends the web pages to the client. • built into Visual Studio for development purposes • Client displays the web pages in a browser. • e.g., IE, Firefox, Chrome, Safari • web pages are Web Forms in VB.NET

2. Web Documents (Pages) • Documents (web pages) consist of HTML, CSS, Java applets, Javascript. • Web page is generally stateless • does not store any information about its contents from one invocation to the next • Techniques for working around stateless issue: • cookies stored on local machine • send state information to server as part of the page's address, uniform resource locator (URL)

3. ASP.NET • ASP.NET is a Web programming technology from Microsoft. • ASP.NET provides libraries, controls, and programming support for: • Interacting with the user • Maintaining state, rendering controls • Displaying data, and generating appropriate HTML • When using Web Forms in VB .NET you are using ASP.NET. • 2 files are generated: • .aspx extension contains HTML • .aspx.vb extension hasVB code (not compiled into .exe)

4. Create a New Project in Visual Web Developer • Under Visual Basic/Web, select ASP.NET Empty Web Application When project opens, connection to a Web Server is established.

5. IDE for Visual Web Developer with New Web Project

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

7. ToolBox 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. • VS Designer adds a small green arrow in the upper-left corner of server controls. ASP Server Control Client-side HTML Control

8. Using Tables for Layout • 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. • Table is an HTML control, requiring no server-side programming, and provides good layout capabilities. • Add controls and text to the table cells to align the columns.

9. Entering Controls or Text in a Table • Add a label and assign it a property for ID to be able to refer to the text in a cell at run time. –OR— • Type text directly into the cell.

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

11. Navigating Web Pages • Add a HyperLink control to allow the 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. • To go to another website, type the Web address as the NavigateUrl property value.

12. 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 check Place code in separate file.

13. Using the Validator Controls • ASP.NET provides several controls that can automatically validate input data. Examples: • RangeValidator control verifies user input is within a minimum and maximum value. • RequiredFieldValidator control verifies the user input is not empty. • First add a validator control then attach it to an input control and set the error message (done by setting properties). • At run time, when data is input, the error message displays if the validation rule is violated. • Validator controls run on the client side.

14. Maintaining the State of a Web Page • When an ASP.NET application loads, the Page-Load event occurs—the page is reloaded for each “round-trip” to the server. This is known as a postback. Postbacks occur many times in a Web application and you lose the value of controls upon each reload. • Use module-level variables in controls to hold their values during postback. (Do not use local variables!) • Set EnableViewState to True (default), so the control contents reappear for each postback. • 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 a True value to make sure that actions are only performed on postbacks.

15. A Couple of Final Facts • By default, web projects are tested in Microsoft Internet Explorer. To test in another browser on your machine: • Right-click on the project name • Select Browse With • To copy a web project you’ve created, simply copy the Solution folder to the desired location (just as for Windows projects).

16. A Complete Example • Exercise 9.3, page 395: • Create a web page to enter customer information like name, email, username, password. • Format the web page using a table. • Validate the fields. • When the user clicks Submit, display a second confirmation page.