Microsoft Visual Basic 2015 CHAPTER NINE Creating Web

Microsoft Visual Basic 2015 CHAPTER NINE Creating Web Applications

9 Objectives ►Create a web application ►Build a web form using ASP. NET 5 ►Set web form properties ►Use the full screen view ►Add objects to a web form ►Add a Drop. Down. List object Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 2

9 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 Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 3

9 Introduction ►Visual Studio allows you to create applications that can run on the web ►Visual Basic 2015 includes ASP. NET 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 Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 4

9 Introduction Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be

9 Creating a Web Application ►A webpage that allows users to enter information on a web form is considered a dynamic webpage because the user enters data and the webpage reacts to the data ►A static webpage contains no interactivity ►A web server is a computer that stores web documents and makes them available to people on the Internet ►The ASP. NET 5 technology used with Visual Basic 2015 creates an active server page (ASP) Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 6

9 Creating a Dynamic Website 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. Use the Location text box to name the chapter project application cabin ►Tap or click the OK button in the New Web Site dialog box Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 7

9 Creating a Dynamic Website Using Visual Basic Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 8

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 “Application name” 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 Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 9

9 Customizing the Master Page Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 10

9 Customizing Navigation Links on the Master Template ►On the Site. master page, tap or click the Source tab at the bottom left. Select the HTML code <li><a runat="server" href="~/Contact">Contact</a></li> ►Press the DELETE key to delete the Contact list item line of code. Select the black text “About” in the About list item link and type Reservations to rename the displayed text in the link Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 11

9 Customizing Navigation Links on the Master Template ►Select the following HTML code that displays Register and Log in links on the Site. Master page: <li><a runat="server" href="~/Account/Register">Register</a> </li> <li><a runat="server" href="~/Account/Login">Log in</a></li> ►Press the DELETE key to remove the Register and Log in links from the Site. master page Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 12

9 Customizing Navigation Links on the Master Template Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 13

9 Adding an Image Object ► Close and save Site. master. Open the Toolbox. If necessary, in the Solution Explorer, double-tap or double-click Default. aspx. Notice that the Default. aspx page has inherited the title from the Site. master. Select the “ASP. NET” heading in the Main. Content (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 webpage in the Featured. Content area. Resize the object so that it is 175 pixels (Width property) by 150 pixels (Height property) ► In the Properties window, name the Image object by entering pic. Cabins in its (ID) property. Specify which image to display by entering the web address http: //delgraphics. delmarlearning. com/Course. Technology/ bearcabins. jpg as the Image. Url property. Press the enter key. You need Internet connectivity to view the image Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 14

9 Adding an Image Object Chapter 9: Creating Web Applications © 2016 Cengage Learning®.

9 Entering Text Directly on the Webpage ► 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 ► Tap or click the OK button, and then tap or click a blank spot to deselect the text Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 16

9 Entering Text Directly on the Webpage ► Select the text in the placeholder paragraph below the image and press the delete key. Change the font size to large 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. ► Delete the button and the rest of the text on the page. Do not delete the footnote © - My ASP. NET Application Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 17

9 Entering Text Directly on the Webpage Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 18

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 Main. Content area. Tap or click in the Main. Content area and type Guest Reservation Form. Press the ENTER key. Tap or click in the paragraph below the typed text and delete all the text below Guest Reservation Form. 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 Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 19

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 Screen. Tip 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 Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 20

9 Adding a Table for Alignment on a Web Form Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 21

9 Adding Text. Box 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 Text-Box object from the Toolbox to the form, and then position the Text. Box object in the second cell in the first row of the table. Resize the Text. Box object to a width of 250 px (Width property). Name this Text. Box object txt. Name using the (ID) property ► In the first cell in the second row of the table, type Email Address: to enter text directly into the table. Drag a Text. Box object from the Toolbox to the form and then position the Text. Box object in the second cell in the second row in the table. Resize the Text. Box object to a width of 250 px (Width property). Name this Text. Box object txt. Email using the (ID) property Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 22

9 Adding Text. Box and Button Objects Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 23

9 Adding Check. Box Objects ► On the third row, type Cabin Selection: in the first cell. Drag the Check. Box object from the Toolbox to the web form, and then position it in the third row, second cell ► Name the Check. Box object by tapping or clicking to the right of its (ID) property in the Properties window and then entering chk. Grizzly. Change the Text property of the Check. Box 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 Check. Box objects named chk. Polar and chk. Kodiak, respectively. Change the Text property of the first Check. Box object to Polar (2 bedrooms) $89 and the second Check. Box object to Kodiak (1 bedroom) $79 Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 24

9 Adding Check. Box Objects Chapter 9: Creating Web Applications © 2016 Cengage Learning®.

9 Coding for Check Box Objects Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 26

9 Adding a Drop. Down. List Object ► In the sixth row of the table, type Night(s): in the first column. Drag the Drop. Down. List object to the second column of the sixth row. Name the Drop. Down. List object by tapping or clicking to the right of the (ID) property in the object’s Properties window and then typing ddl. Nights ► To fill the Drop. Down. List 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 Drop. Down. List Tasks menu Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 27

9 Adding a Drop. Down. List Object ► Tap or click the Add button. In the List. Item 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 Drop. Down. List object. Tap or click the OK button in the List. Item Collection Editor dialog box. Resize the Drop. Down. List object to the width of a single digit, if necessary. To view the completed Drop. Down. List 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 Drop. Down. List object on the webpage Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 28

9 Adding a Drop. Down. List Object Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 29

9 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 cld. Arrival ► 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 Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 30

9 Adding a Calendar Object Chapter 9: Creating Web Applications © 2016 Cengage Learning®.

9 Specifying a Web Form Title ►Tap or click the OK button to close the Auto. Format 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 webpage is displayed, the Title property appears before the Main. Content title Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 32

9 Specifying a Web Form Title Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 33

9 Code for a Calendar Object Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 34

9 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 Required. Field. Validator to the right of the Name Text. Box object in the third column of the table ►Name the Required. Field. Validator by typing rfv. Name in its (ID) property Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 35

9 Adding a Required Field Validator ►To specify that the rfv. Name Required. Field. Validator object validates the txt. Name Text. Box object, tap or click to the right of the Control. To. Validate property in the Properties window, tap or click the list arrow, and then select txt. Name ►In the Properties window for the Required. Field. Validator, change the Error. Message property to *Enter Name Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 36

9 Adding a Required Field Validator Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 37

9 Applying the Range Validator ►Control. To. Validate property contains the name of the object you are validating ►Minimum. Value property contains the smallest value in the range ►Maximum. Value property contains the largest value in the range ►Type property matches the data type of the value, such as Integer or String ►Error. Message property explains to the user what value is requested Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 38

9 Applying the Compare Validator ► Control. To. Validate property contains the name of the object that you are validating ► Control. To. Compare property contains the name of the object that you are comparing to the Control. To. Validate property ► Error. Message property contains a message stating that the value does not match Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 39

9 Applying the Regular Expression Validator ►Control. To. Validate property contains the name of the object that you are validating ►Error. Message property contains a message stating that the value does not match the valid format ►Validation. Expression property allows the user to select the format for the object Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 40

9 Applying the Regular Expression Validator ► Drag the Regular. Expression. Validator object from the Toolbox to the right of the Email Address Text. Box object in the table ► Name the Regular. Expression. Validator by typing rev. Email in its (ID) property ► Tap or click to the right of the Control. To. Validate property, tap or click the list arrow, and then tap or click txt. Email ► Change the Error. Message property to * Error Email Format Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 41

9 Applying the Regular Expression Validator ► To set txt. Email to validate that it contains a standard email address, tap or click to the right of the Validation. Expression property, and then tap or click its ellipsis button. In the Regular Expression Editor dialog box, select Internet e-mail 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 email address without an @ symbol, such as lochlan. email. com, and then press the ENTER key Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 42

9 Applying the Regular Expression Validator Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 43

9 Applying Multiple Validations Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 44

9 Displaying the Validation Summary Control ►The Validation. Summary control lets you display validation error messages in a single location, creating a clean layout for the web form ►You can use the Validation. Summary 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 Validation. Summary object, drag the object to the location on the webpage where you want the summary to appear Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 45

9 Using the Tag in Visual Basic Code Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 46

9 Finding String Length Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May

9 Using the Trim Procedure Chapter 9: Creating Web Applications © 2016 Cengage Learning®.

9 Converting Uppercase and Lowercase Text Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 49

9 Program Design Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not

9 Event Planning Document Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May

9 Summary ►Create a web application ►Build a web form using ASP. NET 5 ►Set web form properties ►Use the full screen view ►Add objects to a web form ►Add a Drop. Down. List object Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 53

9 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 Chapter 9: Creating Web Applications © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 54

Microsoft Visual Basic 2015 CHAPTER NINE COMPLETE Creating Web Applications