1 / 51

CHAPTER SEVEN

CHAPTER SEVEN. Creating Web Applications. Objectives. Create a Web application. We have already created the following types of applications: Windows Application Smart Device Application There are similarities and differences in all of these types of applications.

ipo
Download Presentation

CHAPTER SEVEN

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CHAPTER SEVEN Creating Web Applications

  2. Objectives • Create a Web application. We have already created the following types of applications: • Windows Application • Smart Device Application • There are similarities and differences in all of these types of applications. • Build a Web form using ASP.NET 3.5 • Set Web form properties • Use the full screen view Chapter 7: Creating Web Applications

  3. Objectives • Add objects to a Web form • Add a DropDownList object • Add a Calendar object • Add a custom table for layout • Use the <br> tag in Visual Basic code • Use string manipulation methods in the String class Chapter 7: Creating Web Applications

  4. Introduction • Visual Studio allows you to create applications that can execute on the World Wide Web • Visual Basic 2008 includes ASP.NET 3.5 technology, with which you can create a user interface and a form for a Web application • A Web formis a page displayed in a Web browser such as Internet Explorer or Firefox that requests data from the user ( DHTML ) Chapter 7: Creating Web Applications

  5. Introduction Chapter 7: Creating Web Applications

  6. Creating a Web Application • A Web page that allows users to enter information on a Web form is considered a dynamic Web page because the user enters data and the Web page reacts to the data the user enters • A static Web page has no interactivity • A Web serveris a computer that stores Web documents and makes them available to people on the Internet • The ASP.NET 3.5 technology used with Visual Basic 2008 creates an active server page (ASP) Chapter 7: Creating Web Applications

  7. Creating a Dynamic Web Site Using Visual Basic • Start Visual Studio. • Click the New Web Site button on the Standard toolbar • In the list of Visual Studio installed templates, click ASP.NET Web Site. Name the chapter project application MysticReservations in the Location text box.The location should be : "File System" • Click the OK button in the New Web Site dialog box Chapter 7: Creating Web Applications

  8. Creating a Dynamic Web Site Using Visual Basic Notice the Default.aspx (equivalent to Form1 in a Windows Application and the Web.config file (an XML file with configuration data) Chapter 7: Creating Web Applications

  9. Specifying a Web Form Title • In the design window [Default.aspx] of the Web form, click the background of the Web form to select the form • In the Properties window, scroll until the Title property is visible, and then click in the right column of the Title property. Enter the title Mystic Bed and Breakfast Reservation FormThis is similar to setting the Text property for a Windows App. Form • To view the title bar with the title Mystic Bed and Breakfast Reservation Form, click the Start [Without] Debugging button on the Standard toolbar. If the Debugging Not Enabled dialog box is displayed, select the Modify the Web.config file to enable debuggingradio button and then click the OK button [ or click the option to continue without debugging… ] • To close the browser window, click the Close button on the title bar of the browser window Chapter 7: Creating Web Applications

  10. Specifying a Web Form Title Chapter 7: Creating Web Applications

  11. Naming the Page Divisions • Click in the div element, and then select the (Id) property in the Properties window • Type leftcolumn as the (Id) property Chapter 7: Creating Web Applications

  12. Arranging the Div Contentsof the Web Page • Click the div#leftcolumn heading above the div element. • Position the mouse pointer over the sizing handle in the lower-right corner of the div element • Resize the div#leftcolumn element until the width is 115px and the height is 600px • To add another div element, click the plus sign to open the HTML tools in the Toolbox, and then drag the Div element to the upper-left corner of the Web page. In the Properties window, select the (Id) property and type the name header Chapter 7: Creating Web Applications

  13. Arranging the Div Contentsof the Web Page Chapter 7: Creating Web Applications

  14. Moving the Div Element[Absolute Positioning] • Select the div#header element. Click Format on the menu bar, and then click Position on the Format menu. The Position dialog box opens. In the Positioning style section, click Absolute • Click the OK button to close the Position dialog box. Click the middle-right sizing handle of div#header. Drag the two-headed arrow to the right until the width is 470 pixels, as noted in the ScreenTip. Click the middle-left sizing handle of div#header, and then drag so that the left side of div#header is slightly to the right of div#leftcolumn. Drag the lower-middle sizing handle down until the height is 115 pixels • Add another div element and name it center. Click Format on the menu bar, click Position on the Format menu, and then click Absolute in the Position dialog box to change the position setting. Move the div#center element to the location shown on the next slide. Resize div#center to 270 X 400 pixels. Add another div element and name it rightcolumn. Change the position of div#rightcolumn to absolute positioning. Resize div#rightcolumn to 200 X 400 Chapter 7: Creating Web Applications

  15. Moving the Div Element Create 4 div elements [containers] div#leftcolumn div#header div#rightcolumn div#center Chapter 7: Creating Web Applications

  16. Using Full Screen View • Click View on the menu bar, and then click Full Screen • To return to the standard view, click the Full Screen button on the menu bar Chapter 7: Creating Web Applications

  17. Adding a Style to a Div Element • Select the div#header element by clicking the div#header name above the div element. In the Properties window, select the Style property, and then click its ellipsis button • Click the font-family list arrow, and then click Edwardian Script ITC. Type 48 in the font-size box. Select bold for the font-weight and white for the color • In the Category list, click Block. Set the vertical-align setting to top. In the Category list, click Background. Click the background-color list arrow, and then click More Colors. The More Colors dialog box appears. Select the second color from the left in the top row, a slate blue, as shown in Figure 7-22 on page 498 • Click the OK button in the More Colors dialog box. A preview of the font background, font face, and font size is shown in the preview window. Click OK Chapter 7: Creating Web Applications

  18. Adding a Style to a Div Element[ font name, style, background color, alignment ] Chapter 7: Creating Web Applications

  19. Adding an Image Object • Drag the Image object from the Toolbox to the Web form. Resize the object so that it is about 115 x 115 pixels • In the Properties window, name the Image object by entering picMystic in its (ID) property. Specify the image to display by entering the Web address http://scsite.com/vb2008/ch7/images/bb.jpgas the ImageUrl property Chapter 7: Creating Web Applications

  20. Entering Text Directly on the Web Form • Click to the right of the Image object in the div#header at the top of the form. Type Mystic Bed and Breakfast. • To display the full screen to view the full title of the page, click View on the menu bar, and then click Full ScreenDrag to select the words you just typed, click the Font Size list arrow on the Formatting toolbar, and then click 16pt • Click in the div#center container. Type Guest Registration Form. Chapter 7: Creating Web Applications

  21. Entering Text Directly on the Web Form[ Static text can be typed directly on the web page ] Chapter 7: Creating Web Applications

  22. Adding CheckBox Objects • Drag the CheckBox object from the Toolbox to the Web form, and then position it on the form • Name the CheckBox object by clicking to the right of its (ID) property in the Properties window, and then entering chkSerenity • Change the Text property of the CheckBox object to Serenity Suite $220 • In the Mystic Bed and Breakfast application, the Serenity suite is the most popular suite. This suite, therefore, should be checked when the form opens to save time for the user. To select the Serenity suite check box, change the Checked property for the object from False to True Chapter 7: Creating Web Applications

  23. Adding CheckBox Objects Chapter 7: Creating Web Applications

  24. Coding for CheckBox Objects Notice that these are NOT nested If statements, they are stacked! Chapter 7: Creating Web Applications

  25. Adding a DropDownList Object • Drag the DropDownList object to the Web form, and then click Format on the menu bar, click Position, and click Absolute in the Position dialog box so you can move the object on the form. Click OK in the Position dialog box • Name the DropDownList object by clicking to the right of the (ID) property in the object’s Properties window, and then typing ddlNights • To fill the DropDownList object with list items, click the Smart Tag on the upper-right corner of the object • Click Edit Items on the DropDownList Tasks menu Chapter 7: Creating Web Applications

  26. Adding a DropDownList Object • Click the Add button. In the ListItem properties pane on the right side of the dialog box, click to the right of the Text property and enter 1 • Click the Add button and enter 2 as its Text property. Repeat this step, entering the numbers 3 through 7 to specify the number of nights users can select in the DropDownListobject. • Click the OK button in the ListItem Collection Editor dialog box. Resize the DropDownList object to the width of a single digit. • To view the completed DropDownList object, run the application by clicking the Start [Without] Debugging button on the Standard toolbar. • Click the list arrow on the DropDownList object in the Web page Chapter 7: Creating Web Applications

  27. Adding a DropDownList Object Chapter 7: Creating Web Applications

  28. Adding a Calendar Object • Drag the Calendar object from the Toolbox to the Web form, and then position it on the form. In the (ID) property, name the Calendar object cldArrival • Select the Calendar object, if necessary, and then click the Smart Tag on the upper-right corner of the Calendar object • Click Auto Format on the Calendar Tasks menu. When the Auto Format dialog box opens, click the Colorful 2 scheme in the Select a scheme list • Click the OK button to resize the Calendar object as needed Chapter 7: Creating Web Applications

  29. Adding a Calendar Object Chapter 7: Creating Web Applications

  30. Code for a Calendar Object Chapter 7: Creating Web Applications

  31. Adding a Required Field Validator • In the Toolbox, hide the Standard tools by clicking the minus sign next to Standard. Expand the Validation tools by clicking the plus sign next to Validation • Click at the top of the div#rightcolumn. Press ENTER three times. Drag the RequiredFieldValidator to the right of the Name TextBox object • Name the RequiredFieldValidator by typing rfvFirstName in its (ID) Chapter 7: Creating Web Applications

  32. Adding a Required Field Validator • To specify that the rfvName RequiredFieldValidator object validates the txtFirstName TextBox object, click to the right of the ControlToValidate property in the Properties window, click the list arrow, and then select txtFirstName • In the Properties window for the RequiredFieldValidator, change the ErrorMessage property to * Enter Name. If necessary, resize the RequiredFieldValidator to fit in the table cell Chapter 7: Creating Web Applications

  33. Adding a Required Field Validator Chapter 7: Creating Web Applications

  34. Applying the Range Validator • ControlToValidate property contains the name of the object you are validating • # MinimumValueproperty contains the smallest value in the range • # MaximumValueproperty contains the largest value in the range • # Typeproperty matches the data type of the value, such as Integer or String • # ErrorMessageproperty explains to the user what value is requested Chapter 7: Creating Web Applications

  35. Applying the Compare Validator • # ControlToValidateproperty contains the name of the object that you are validating • # ControlToCompareproperty contains the name of the object that you are comparing to the ControlToValidate property • # ErrorMessageproperty contains a message stating that the value does not match Chapter 7: Creating Web Applications

  36. Applying the Regular Expression Validator • ControlToValidate property contains the name of the object that you are validating • ErrorMessageproperty contains a message stating that the value does not match the valid format • ValidationExpressionproperty allows the user to select the format for the object Chapter 7: Creating Web Applications

  37. Applying the Regular Expression Validator • Drag the RegularExpressionValidator object from the Toolbox to the right of the E-mail Address TextBox object in the custom Table object. Resize the RegularExpressionValidator object to fit the table cell • Name the RegularExpressionValidator by typing revEmail in its (ID) property • Click to the right of the ControlToValidate property, click the list arrow, and then click txtEmail • Change the ErrorMessage property to * Error E-mail Format Chapter 7: Creating Web Applications

  38. Applying the Regular Expression Validator • To set txtEmail to validate that it contains a standard e-mail address, click to the right of the ValidationExpression property, and then click its ellipsis button. In the Regular Expression Editor dialog box, select Internet e-mail address in the Standard expressions list • Click the OK button in the Regular Expression Editor dialog box. Run the application by clicking the Start Debugging button on the Standard toolbar. • Enter an e-mail address without an @ symbol, such as brit.world.net, and then press the ENTER key Chapter 7: Creating Web Applications

  39. Applying the Regular Expression Validator Chapter 7: Creating Web Applications

  40. Applying Multiple Validations Chapter 7: Creating Web Applications

  41. Displaying the Validation Summary Control • The ValidationSummarycontrol lets you display validation error messages in a single location, creating a clean layout for the Web form • You can use the ValidationSummary object to display all of the error messages in a different place, listing them in a blank area at the top or bottom of the form • To use a ValidationSummary object, drag the object to the location on the Web page where you want the summary to appear Chapter 7: Creating Web Applications

  42. Using the <br> Tag in Visual Basic Code Chapter 7: Creating Web Applications

  43. Finding String Length Chapter 7: Creating Web Applications

  44. Using the Trim Procedure Chapter 7: Creating Web Applications

  45. Converting Uppercase and Lowercase Text Chapter 7: Creating Web Applications

  46. Program Design Chapter 7: Creating Web Applications

  47. Program Design Chapter 7: Creating Web Applications

  48. Event Planning Document Chapter 7: Creating Web Applications

  49. Summary • Create a Web application • Build a Web form using ASP.NET 3.5 • Set Web form properties • Use the full screen view • Add objects to a Web form • Add a DropDownList object Chapter 7: Creating Web Applications

  50. Summary • Add a Calendar object • Add a custom table for layout • Validate data on Web forms • Use the <br> tag in Visual Basic code • Use string manipulation methods in the String class Chapter 7: Creating Web Applications

More Related