Microsoft Visual Basic 2012 CHAPTER NINE Creating Web Applications

9 Chapter 9: Creating Web Applications2 Objectives ►Create a Web application ►Build a Web form using ASP.NET 4.5 ►Set Web form properties ►Use the full screen view ►Add objects to a Web form ►Add a DropDownList object

9 Chapter 9: Creating Web Applications3 Objectives ►Add a Calendar object ►Add a custom table for layout ►Validate data on Web forms ►Use the tag in Visual Basic code ►Use string manipulation methods in the String class

9 Chapter 9: Creating Web Applications4 Introduction ►Visual Studio allows you to create applications that can run on the Web ►Visual Basic 2012 includes ASP.NET 4.5 technology, with which you can create a user interface and a form for a Web application ►A Web form is a page displayed in a Web browser such as Internet Explorer and Firefox and requests data from the user

9 Introduction Chapter 9: Creating Web Applications5

9 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 ►A Web server is a computer that stores Web documents and makes them available to people on the Internet ►The ASP.NET 4.5 technology used with Visual Basic 2012 creates an active server page (ASP)

9 Chapter 9: Creating Web Applications7 Creating a Dynamic Web Site Using Visual Basic ►Start Visual Studio. Tap or click the FILE tab and then tap or click New Web Site ►In the center pane, tap or click ASP.NET Web Forms Site. Name the chapter project application Cabin in the Location text box ►Tap or click the OK button in the New Web Site dialog box

9 Chapter 9: Creating Web Applications8 Creating a Dynamic Web Site Using Visual Basic

9 Customizing the Master Page ►In the Solution Explorer window, double-tap or double-click Site.master to open the page ►Tap or click VIEW on the menu bar, point to Toolbars, and then tap or click Formatting. Select the “your logo here” placeholder text at the top of the Site.master page. Type Big Bear Cabins to replace the original title. On the Formatting toolbar, tap or click the Font Size box arrow, and then select xx-large Chapter 9: Creating Web Applications9

9 Customizing the Master Page Chapter 9: Creating Web Applications10

9 Customizing Navigation Buttons on the Master Template ►On the Site.master page, select the text Contact. Press the delete key to delete the Contact link. Select the text About in the About link and type Reservations to rename the link ►Tap or click the Register and Log in tabs on the Site.master page ►Press the DELETE key to remove the Register and Log in tabs from the Site.master page Chapter 9: Creating Web Applications11

9 Customizing Navigation Buttons on the Master Template Chapter 9: Creating Web Applications12

9 Adding an Image Object ►Save Site.master. In the Solution Explorer, double-tap or doubleclick Default.aspx. Notice that the Default.aspx page has inherited the title and Reservations navigation page from the Site.master. Open the Toolbox. Select the text ‘Modify this template to jump-start your ASP.NET application.’ in the FeaturedContent(Custom) area, and then press the DELETE key ►Double-tap or double-click the Image object in the Standard category of the Toolbox to display it on the Web page in the FeaturedContent area. Resize the object so that it is 175 pixels (width) by 150 pixels (height) ►In the Properties window, name the Image object by entering picCabins in its (ID) property. Specify which image to display by entering the Web address ogy/cabins.jpg as the ImageUrl property. Press the Enter key. You need Internet connectivity to view the image Chapter 9: Creating Web Applications13

9 Adding an Image Object Chapter 9: Creating Web Applications14

9 Entering Text Directly on the Web Page ►Tap or click to the right of the Image object. Add a space using the spacebar and type Enjoy a Mountain Getaway directly on the Default.aspx page ►To change the vertical alignment, select the text, tap or click the style property in the Properties window, and then tap or click the ellipsis button to the right of the style property to display the Modify Style dialog box. In the Category pane of the Modify Style dialog box, tap or click Block. In the vertical-align drop box, select top Chapter 9: Creating Web Applications15

9 Entering Text Directly on the Web Page ►Tap or click the OK button, and then tap or click a blank spot to deselect the text ►Select the text in the placeholder paragraph below the image and press the DELETE key. Change the font size to medium using the Formatting toolbar. Enter the text Nestled in the trees surrounded by the Beartooth Mountains, our cabin retreat provides modern comfort with genuine mountain elegance, offering a rustic ambiance with wood burning fireplaces and cozy furnished kitchens. ►Select the text in the MainContent area and then press the DELETE key Chapter 9: Creating Web Applications16

9 Entering Text Directly on the Web Page Chapter 9: Creating Web Applications17

9 Adding a Table for Alignment on a Web Form ►In the Solution Explorer window, double-tap or double-click About.aspx to create a Web form for the Reservations page. Delete the text in the MainContent area. Tap or click in the MainContent area and type Guest Reservation Form. Press ENTER. Delete the Aside Title text area. Tap or click in the paragraph below the MainContact area and delete all the text. Tap or click TABLE on the menu bar, and then tap or click Insert Table. In the Size section of the Insert Table dialog box, change the number of Rows to 7 and the number of Columns to 3 Chapter 9: Creating Web Applications18

9 Adding a Table for Alignment on a Web Form ►Tap or click the OK button. To resize the columns, point to a column divider until a two- sided arrow appears. Drag the divider to change the column width. As you drag, a ScreenTip shows the width of the column in pixels. Resize the first column until it is 150 px wide. Resize the second column to 250 px wide Chapter 9: Creating Web Applications19

9 Adding a Table for Alignment on a Web Form Chapter 9: Creating Web Applications20

9 Adding TextBox and Button Objects ►On the About.aspx Web form, tap or click in the first cell of the table and type Name: to enter text directly into the table. Open the Toolbox, drag a TextBox object from the Toolbox to the form, and then position the TextBox object in the second cell in the table. Resize the TextBox object to a width of 250 px. Name this TextBox object txtName using the (ID) property ►In the first cell in the second row of the table, type Address: to enter text directly into the table. Drag a TextBox object from the Toolbox to the form and then position the TextBox object in the second cell in the second row in the table. Resize the TextBox object to a width of 250 px. Name this TextBox object txt using the (ID) property Chapter 9: Creating Web Applications21

9 Adding TextBox and Button Objects Chapter 9: Creating Web Applications22

9 Chapter 9: Creating Web Applications23 Adding CheckBox Objects ►On the third row, type Cabin Selection: in the first cell. Drag the CheckBox object from the Toolbox to the Web form, and then position it on the third row, second cell ►Name the CheckBox object by tapping or clicking to the right of its (ID) property in the Properties window and then entering chkGrizzly. Change the Text property of the CheckBox object to Grizzly (3 bedrooms) $99. ►At the Big Bear Cabins, the Grizzly is the most popular cabin. This cabin, therefore, should be checked when the form opens to save time for the user. To select the Grizzly check box, change the Checked property for the object from False to True ►In the second column, fourth and fifth rows of the table, add two more CheckBox objects named chkPolar and chkKodiak, respectively. Change the Text property of the first CheckBox object to Polar (2 bedrooms) $89 and the second CheckBox object to Kodiak (1 bedroom) $79

9 Chapter 9: Creating Web Applications24 Adding CheckBox Objects

9 Coding for Check Box Objects Chapter 9: Creating Web Applications25

9 Chapter 9: Creating Web Applications26 Adding a DropDownList Object ►In the sixth row of the table, type Night(s): in the first column. Drag the DropDownList object to the second column of the sixth row. Name the DropDownList object by tapping or 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, tap or click the Smart Tag on the upper-right corner of the object ►Tap or click Edit Items on the DropDownList Tasks menu

9 Chapter 9: Creating Web Applications27 Adding a DropDownList Object ►Tap or click the Add button. In the ListItem Properties pane on the right side of the dialog box, tap or click to the right of the Text property and enter 1 ►Tap or 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 DropDownList object. Tap or click the OK button in the ListItem Collection Editor dialog box. Resize the DropDownList object to the width of a single digit, if necessary. To view the completed DropDownList object, run the application by tapping or clicking the Start Debugging button on the Standard toolbar. If necessary, tap or click the Reservations navigation button to open the Reservations page in the browser. Tap or click the list arrow on the DropDownList object in the Web page

9 Chapter 9: Creating Web Applications28 Adding a DropDownList Object

9 Chapter 9: Creating Web Applications29 Adding a Calendar Object ►Close the browser window. In the last row of the table, type Check-in Date:. 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 tap or click the Smart Tag on the upper-right corner of the Calendar object ►Tap or click Auto Format on the Calendar Tasks menu. When the Auto Format dialog box opens, tap or click the Colorful 2 scheme in the Select a scheme list

9 Chapter 9: Creating Web Applications30 Adding a Calendar Object

9 Specifying a Web Form Title ►Tap or click the OK button to close the AutoFormat dialog box. In the Properties window of the Reservations Web form, tap or click the drop-down box at the top and select DOCUMENT ►In the Properties window, scroll until the Title property is visible, and then tap or click in the right column of the Title property. Enter the title Big Bear Cabins with a blank space following the text entry. When the Web page is displayed, the Title property appears in front of the MainContent title Chapter 9: Creating Web Applications31

9 Specifying a Web Form Title Chapter 9: Creating Web Applications32

9 Chapter 9: Creating Web Applications33 Code for a Calendar Object

9 Chapter 9: Creating Web Applications34 Adding a Required Field Validator ►In the Toolbox, hide the Standard tools by tapping or clicking the filled triangle icon next to Standard. Expand the Validation tools by tapping or clicking the open triangle icon next to Validation ►Drag the RequiredFieldValidator to the right of the Name TextBox object ►Name the RequiredFieldValidator by typing rfvFirstName in its (ID) property

9 Chapter 9: Creating Web Applications35 Adding a Required Field Validator ►To specify that the rfvName RequiredFieldValidator object validates the txtName TextBox object, tap or click to the right of the ControlToValidate property in the Properties window, tap or click the list arrow, and then select txtName ►In the Properties window for the RequiredFieldValidator, change the ErrorMessage property to *Enter Name

9 Chapter 9: Creating Web Applications36 Adding a Required Field Validator

9 Chapter 9: Creating Web Applications37 Applying the Range Validator ►ControlToValidate property contains the name of the object you are validating ►MinimumValue property contains the smallest value in the range ►MaximumValue property contains the largest value in the range ►Type property matches the data type of the value, such as Integer or String ►ErrorMessage property explains to the user what value is requested

9 Applying the Compare Validator ►ControlToValidate property contains the name of the object that you are validating ►ControlToCompare property contains the name of the object that you are comparing to the ControlToValidate property ►ErrorMessage property contains a message stating that the value does not match Chapter 9: Creating Web Applications38

9 Chapter 9: Creating Web Applications39 Applying the Regular Expression Validator ►ControlToValidate property contains the name of the object that you are validating ►ErrorMessage property contains a message stating that the value does not match the valid format ►ValidationExpression property allows the user to select the format for the object

9 Chapter 9: Creating Web Applications40 Applying the Regular Expression Validator ►Drag the RegularExpressionValidator object from the Toolbox to the right of the Address TextBox object in the table ►Name the RegularExpressionValidator by typing rev in its (ID) property ►Tap or click to the right of the ControlToValidate property, tap or click the list arrow, and then tap or click txt ►Change the ErrorMessage property to * Error Format

9 Chapter 9: Creating Web Applications41 Applying the Regular Expression Validator ►To set txt to validate that it contains a standard address, tap or click to the right of the ValidationExpression property, and then tap or click its ellipsis button. In the Regular Expression Editor dialog box, select Internet address in the Standard expressions list ►Tap or click the OK button in the Regular Expression Editor dialog box. Run the application by tapping or clicking the Start Debugging button on the Standard toolbar. Enter a name and an address without symbol, such as liam.world.net, and then press the ENTER key

9 Chapter 9: Creating Web Applications42 Applying the Regular Expression Validator

9 Chapter 9: Creating Web Applications43 Applying Multiple Validations

9 Chapter 9: Creating Web Applications44 Displaying the Validation Summary Control ►The ValidationSummary control 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

9 Chapter 9: Creating Web Applications45 Using the Tag in Visual Basic Code

9 Chapter 9: Creating Web Applications46 Finding String Length

9 Chapter 9: Creating Web Applications47 Using the Trim Procedure

9 Chapter 9: Creating Web Applications48 Converting Uppercase and Lowercase Text

9 Chapter 9: Creating Web Applications49 Program Design

9 Chapter 9: Creating Web Applications50 Program Design

9 Chapter 9: Creating Web Applications51 Event Planning Document

9 Chapter 9: Creating Web Applications52 Summary ►Create a Web application ►Build a Web form using ASP.NET 4.5 ►Set Web form properties ►Use the full screen view ►Add objects to a Web form ►Add a DropDownList object

9 Chapter 9: Creating Web Applications53 Summary ►Add a Calendar object ►Add a custom table for layout ►Validate data on Web forms ►Use the tag in Visual Basic code ►Use string manipulation methods in the String class

Microsoft Visual Basic 2012 CHAPTER NINE COMPLETE Creating Web Applications