Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition

Objectives Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 2 After studying Chapter 27, you should be able to: Define basic Web terminology Create a Web application Add Web pages to an application Customize a Web page Add static text to a Web page Format a Web page’s static text

Objectives (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 3 View a Web page in full screen view Add controls (link button, image, text box, label, and button) to a Web page Start, close, and open a Web application Reposition a control on a Web page Code a control on a Web page Use a RequiredFieldValidator control

Web Applications Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 4 World Wide Web (the Web) World’s largest computer network Consists of Web pages stored on Web servers Web server Computer that contains special software to “serve up” Web pages Client computer Requests information from a Web server Browser Program used to request and view Web information

Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 5 Static Web page Document displays information to viewer Not interactive Links allow viewers to “jump” between Web pages Examples in Figures 27-1 and 27-2 on next slides

Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 6 Figure 27-1 Example of a static Web page

Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 7 Figure 27-2 Another example of a static Web page

Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 8 Dynamic Web pages Interactive Accept information from the user Retrieve information for the user Example shown in Figure 27-3 on next slide

Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 9 Figure 27-3 Example of a dynamic Web page

Web Applications (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 10 ASP Active server page Technology used to create Web applications in this chapter HTML Hypertext Markup Language All ASP pages contain HTML tags

Creating a Web Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 11 Create Web application Use Visual Web Developer 2010 Available as stand-alone Or as part of Visual Studio 2010 Configure Visual Web Developer 2010 Express Follow instructions on pages Begin creating the Cottage Toy Store Web application Follow instructions on pages

Adding the Default.aspx Web Page to the Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 12 After creating an empty Web application: Add a Web page to it First added Web page usually named Default.aspx Follow instructions on pages To add the Default.aspx page

Customizing a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 13 Properties window Used to customize a Web page Change the title and background color Follow instructions on page 504

Adding Static Text to a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 14 Static text Text that cannot be changed by a user Added by typing text on page itself Or by using a label control Drag from the Toolbox window Add static text to the Web page Follow instructions on page 504 Formatting static text Use Format menu or Formatting toolbar

Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 15 Figure Formatting toolbar Figure Result of clicking the Alignment button

Viewing a Web Page in Full Screen View Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 16 View page in full screen view: To see how it will appear to the user Use Full Screen option on the View menu Click Full Screen button again to return to standard view

Adding Another Web Page to the Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 17 Add a second Web page to the Cottage Toy Store application Follow instructions on pages

Adding a Link Button Control to a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 18 Controls added to a Web page: Using tools provided in Toolbox window Add a link button control to both Web pages Follow instructions on pages

Adding a Link Button Control to a Web Page (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 19 Figure Link button control added to the Default.aspx Web page

Starting a Web Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 20 Start a Web application by: Pressing Ctrl+F5 Clicking the Start Without Debugging option On the Debug menu May need to add this option to the menu Start the Cottage Toy Store Web application Follow instructions on pages

Adding an Image to a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 21 Add Small_house.jpg to the Default.aspx Web page Follow instructions on pages Be sure to understand copyright policies when choosing images to use Figure Image control added to the Default.aspx Web page

Closing and Opening an Existing Web Application Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 22 Use the File menu: To close and open an existing Web application Close and then open the Cottage Toy Store application Follow instructions on page 512

Repositioning a Control on a Web Page Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 23 Move image and link button controls: To different locations on Default.aspx Web page Follow instructions on pages

Repositioning a Control on a Web Page (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 24 Figure Modified Default.aspx Web page

Dynamic Web Pages Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 25 Contain controls with which user can interact Contain code that tells controls how to respond to user’s actions Create the Currency Converter Web application First plan the page’s layout Example sketch shown in Figure on next slide Follow instructions on pages

Dynamic Web Pages (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 26 Figure Sketch of the Currency Converter application’s Web page

Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 27 Figure Position dialog box

Coding the Submit Button’s Click Event Procedure Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 28 Submit button Converts American dollars to Mexican pesos Displays result on Web page Code Submit button’s Click event procedure Follow instructions on pages

Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 29 Figure btnSubmit control’s Click event procedure Figure Code Editor and Solution Explorer windows

Validating User Input Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 30 Validator tools Purpose: To validate user input Provided in the Validation section of the toolbox Figure lists characteristics of each validator tool

Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 31 Figure Validator tools

Summary Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 32 Web pages Stored on Web servers Can be either static or dynamic Client computer uses browser: To request Web page from Web server To view the Web page Use New Web Site option to create an empty Web application Add New Item adds a Web page to the application

Summary (cont’d.) Clearly Visual Basic: Programming with Visual Basic 2010, 2 nd Edition 33 DOCUMENT object’s Title property Used to add a title to a Web page Static text Can be added by typing or through a label control LinkButton tool Used to add a link button control to a Web page To wrap text around an image control: Use position option on the Format menu Several validator tools available to validate user input