Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications

Previewing the DJ Tom Application Programming with Microsoft Visual Basic Figure 12-1 Result of clicking the Submit button Registers a DJ for a wedding party Inputs: –Names –Date – –Song

Lesson A Objectives After studying Lesson A, 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 Programming with Microsoft Visual Basic 20123

Lesson A Objectives (cont.) View a Web page in full screen view Add a link button and an image to a Web page Start a Web application Close and open a Web application Reposition a control on a Web page Programming with Microsoft Visual Basic 20124

Web server –A computer that contains special software that “serves up” Web pages in response to requests from client computers Web pages –Documents stored on a Web server Client computer –A computer that requests information from a Web server Programming with Microsoft Visual Basic Web Applications

Browser – A program that allows users to view Web pages Static Web page –A document whose purpose is merely to display information to the viewer –Static Web pages are not interactive Dynamic Web page –An interactive page that can accept information from the user and also retrieve information for the user Programming with Microsoft Visual Basic Web Applications (cont.)

Programming with Microsoft Visual Basic Web Applications (cont.) Figure 12-2 Example of a static Web page Figure 12-3 Another example of a static Web page Figure 12-4 Example of a dynamic Web page

Programming with Microsoft Visual Basic Web Applications (cont.) ASP –Active server page –A technology used to create Web pages –All ASP pages contain HTML tags for formatting –Many ASP pages contain: ASP tags for controls included on a page Code for objects to respond to user actions –ASP pages communicate with the Web server to provide data requested by users

Programming with Microsoft Visual Basic Web Applications (cont.) Figure 12-5 Illustration of the relationship between a client computer and a Web server

Programming with Microsoft Visual Basic Creating a Web Application Web applications in Visual Basic are created using Visual Studio 2012 for Web –Available as a stand-alone product (called Visual Studio Express 2012 for Web) –Available as part of Visual Studio 2012 –Free download of Visual Studio Express 2012 for Web from Microsoft’s Web site

Programming with Microsoft Visual Basic Creating a Web Application (cont.) Figure 12-6 Options dialog box

Programming with Microsoft Visual Basic Creating a Web Application (cont.) Figure 12-7 New Web Site dialog box

Programming with Microsoft Visual Basic Adding the Default.aspx Web Page to the Application Figure 12-8 Add New Item dialog box Figure 12-9 Default.aspx Web page shown in Design view

Including a Title on a Web Page Use the Properties window to include a title on a Web page –The properties appear in the Properties window when you select DOCUMENT in the window’s Object box Adding Static Text to a Web Page Static text cannot be changed by the user You can add static text to a Web page by simply typing the text on the page itself; or you can use a label control that you dragged to the Web page from the Toolbox window 14 Adding the Default.aspx Web Page to the Application (cont.) Programming with Microsoft Visual Basic 2012

Adding Static Text to a Web Page (cont.) Programming with Microsoft Visual Basic Adding the Default.aspx Web Page to the Application (cont.) Figure Result of clicking the arrow in the Block Format box Figure Result of clicking the Alignment button Figure Formatting toolbar

Programming with Microsoft Visual Basic Viewing a Web Page in Full Screen View Figure Default.aspx Web page displayed in full screen view Use the Full Screen option on the VIEW menu to determine how the Web page will appear to the user

Programming with Microsoft Visual Basic Adding Another Web Page to the Application Click WEBSITE on the menu bar and then click Add New Item If necessary, click Visual Basic in the Installed list and then (if necessary) click Web Form in the middle column of the dialog box

Programming with Microsoft Visual Basic Adding a Link Button Control to a Web Page Figure Link button control added to the Default.aspx Web page A link button control on the Default.aspx page will display the Hours.aspx page The link button control on the Hours.aspx page will return the user to the Default.aspx Web page Figure Link button control added to the Hours.aspx Web page Figure Select URL dialog box

Programming with Microsoft Visual Basic Starting a Web Application Figure Customize dialog box Start a Web application either by pressing Ctrl+F5, or by clicking the Start Without Debugging option on the DEBUG menu

Programming with Microsoft Visual Basic Starting a Web Application (cont.) Figure Hours.aspx Web page displayed in a browser window Figure Default.aspx Web page displayed in a browser window

Click WEBSITE on the menu bar Click Add Existing Item Find the image you want to add –Click All Files (*.*) if you do not see the file you are looking for Click the Add button Click the Image tool in the toolbox and drag your mouse pointer to the location where you want the picture, and then release the mouse button Programming with Microsoft Visual Basic Adding an Image to a Web Page

Programming with Microsoft Visual Basic Adding an Image to a Web Page (cont.) Figure Image control added to the Default.aspx Web page Figure Default.aspx Web page

To close: –Click FILE on the menu bar and then click Close Solution to close the application To open: –Click FILE on the menu bar and then click Open Web Site to open the Open Web Site dialog box –If necessary, click the File System button; and if necessary, click the Yes button to use IIS Express –Right-click in the Solution Explorer window on the file you want to open and then click View Designer Programming with Microsoft Visual Basic Closing and Opening an Existing Web Application

Click the control on the Web page Drag the control to a new location and then release the mouse button Programming with Microsoft Visual Basic Repositioning a Control on a Web Page Figure Modified Default.aspx Web page

Lesson A Summary Use the New Web Site command on the FILE menu to create a Web application Use the F5 key to start the Web application and display the Web page Set the DOCUMENT object’s Title property to add a title to a Web page Static text can be entered directly on the Web page or by using a label control Programming with Microsoft Visual Basic

Lesson A Summary (cont.) Use the Full Screen command on the VIEW menu to display the page in full screen view Use the LinkButton tool to add a link button control to a Web page Use the Close Solution command on the FILE menu to close a Web application Use the Open Web Site command on the FILE menu to open an existing Web application Drag a control to reposition it on a Web page Programming with Microsoft Visual Basic

Lesson B Objectives After studying Lesson B, you should be able to: Add a text box, a label, and a button to a Web page Code a control on a Web page Use a RequiredFieldValidator control Programming with Microsoft Visual Basic

Programming with Microsoft Visual Basic Dynamic Web Pages Dynamic Web page –Contains controls with which the user can interact –Contains code that tells the controls how to respond to user actions Plan the page layout before adding controls to a Web page Figure Sketch of the Recipe application’s Web page

Programming with Microsoft Visual Basic Dynamic Web Pages (cont.) Figure Static text added to the Web page Figure Partially-completed interface for the Recipe Web application To position an image control in relation to the text around it: –Click the Format menu and then click Position –Set the wrapping style, positioning style, location, and size in the Position dialog box

Programming with Microsoft Visual Basic Dynamic Web Pages (cont.) Figure Web page displayed in a browser window Figure Selected text and controls

Programming with Microsoft Visual Basic Coding the Submit Button’s Click Event Procedure Figure Pseudocode and variables for the btnSubmit_Click procedure Figure Code Editor and Solution Explorer windows

Programming with Microsoft Visual Basic Coding the Submit Button’s Click Event Procedure (cont.) Figure btnSubmit_Click procedure

Programming with Microsoft Visual Basic Coding the Submit Button’s Click Event Procedure (cont.) Figure Result of clicking the Submit button

Programming with Microsoft Visual Basic Validating User Input Validation section of the toolbox contains tools for validating user input Validator tools –Each has a purpose and validates a particular type of input ValidationSummary tool –Used to display all validation error messages in a single location on a Web page

Programming with Microsoft Visual Basic Validating User Input (cont.) Figure Validator tools

Programming with Microsoft Visual Basic Validating User Input (cont.) Figure Result of clicking the Submit button when both text boxes are empty

Programming with Microsoft Visual Basic Lesson B Summary Use the Position command on the Format menu to wrap text around an image control Use the Code Editor window to code a control on a Web page Use validator tools to validate user input on a Web page

Lesson C Objectives After studying Lesson C, you should be able to: Make changes to the Web page in Source view Create columns using the tag Utilize an ASP table in a Web page Add a calendar to a Web page Add a drop-down list box to a Web page Create a new line using the tag Programming with Microsoft Visual Basic

Programming with Microsoft Visual Basic Creating the DJ Tom Application DJ Tom application –Allows the user to enter the names of the bride and groom, the wedding date, an address, and the name of the first song –Should provide a Submit button that displays a message on the page containing the information entered font-family property –Used to set the font for the Web page –Set in the tag to affect all text on the Web page

Creating the DJ Tom Application (cont.) Programming with Microsoft Visual Basic Figure Sketch of the DJ Tom application’s Web page Figure Modified tag

Creating a Columnar Layout Programming with Microsoft Visual Basic Figure Completed tag for the first column Figure Web page showing the three columns tag –Can be used to divide a Web page into columns

ASP table control –Displays information in a row and column format –Often used to align data on a page Using an ASP Table Programming with Microsoft Visual Basic Figure TableRow Collection Editor dialog box Figure ASP table control added to the ContentColumn

Using an ASP Table (cont.) Programming with Microsoft Visual Basic Figure Table containing six rows and two columns Figure TableCell Collection Editor dialog box

Using an ASP Table (cont.) Programming with Microsoft Visual Basic Use the Rows property to display the TableRow Collection Editor dialog box –Add a row, then set the cells for the row Use the Cells property of a row to display the TableCell Collection Editor dialog box –Add cells and set their properties Dragging Controls in Source View To drag controls in Source view: –Deselect the table control and then click the Source tab –Using the appropriate tool for the control, drag the control into the desired cell in the table in Source view

Using an ASP Table (cont.) Programming with Microsoft Visual Basic Figure Text box control shown in the table Figure Controls added to the table Figure Opening and closing text box tags added to the table instructions Figure Text box control being dragged in Source view Dragging Controls in Source View (cont.)

Adding Items to a DropDownList Control Programming with Microsoft Visual Basic Figure Song titles displayed in the drop-down list control Figure Additional song titles added to the drop-down list control Use the tag to add items to a drop-down list control Figure First song title added to the drop-down list control

Coding DJ Tom’s Web Page Programming with Microsoft Visual Basic Figure Message displayed in the lblMsg control The button’s Click event procedure will display a message in the lblMsg control, which is contained in the MessageColumn on the Web page Using the Tag tag –Causes a line break without starting a new paragraph –Can be concatenated into a string to format the value into separate lines

Coding DJ Tom’s Web Page (cont.) Programming with Microsoft Visual Basic Figure Modified btnSubmit_Click procedureFigure Message displayed on separate lines in the lblMsg control Using the Tag (cont.)

Programming with Microsoft Visual Basic Lesson C Summary Use the font-family property in the tag to set the font for text on a Web page Use the tag to divide a Web page into columns Use the Rows property of an ASP table control to set up the cells for each row Drag a control into the table’s cell in Source view to place it in the table Use the tag to add items to a drop-down list control

Programming with Microsoft Visual Basic Lesson C Summary (cont.) Use the Calendar control’s SelectedDate property to determine the date selected by the user Use the Calendar control’s ToShortDateString method to format a date as mm/dd/yyyy Use the SelectedItem property of a drop-down list control to determine the item selected by the user Use the tag to create a new line on a Web page