Tải bản đầy đủ

microsoft visual basic 2015 chapter 09

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 DropDownList 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 scanned, copied or
duplicated, or posted to a publicly accessible website, in whole or in
part.

5


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
  • href="~/Contact">Contact

  • ►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:
  • href="~/Account/Register">Register

  • href="~/Account/Login">Log in

  • ►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 MainContent (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 FeaturedContent
    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
    picCabins in its (ID) property. Specify which image to display by
    entering the web address
    http://delgraphics.delmarlearning.com/CourseTechnology/
    bearcabins.jpg as the ImageUrl 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®. May not be scanned, copied or
    duplicated, or posted to a publicly accessible website, in whole or in
    part.

    15


    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
    MainContent area. Tap or click in the MainContent
    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 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 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 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 Text-Box object from the Toolbox to the form, and then position
    the TextBox object in the second cell in the first row of the table.
    Resize the TextBox object to a width of 250 px (Width property).
    Name this TextBox object txtName 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 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 (Width property). Name this TextBox object
    txtEmail 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 TextBox 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 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 in 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
    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 CheckBox 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.

    25


    Tài liệu bạn tìm kiếm đã sẵn sàng tải về

    Tải bản đầy đủ ngay

    ×
    x