Chapter 12 – Web Applications
description
Transcript of Chapter 12 – Web Applications
![Page 1: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/1.jpg)
1
Chapter 12 – Web Applications
12.1 Programming for the Web, Part I
12.2 Programming for the Web, Part II
12.3 Using Databases in Web Programs
![Page 2: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/2.jpg)
Web Programs
• The programs in this chapter require the use of either Visual Web Developer 2010 (packaged with this textbook) or the complete version of Visual Studio 2010.
• We assume that you are using one of these two software products.
2
![Page 3: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/3.jpg)
12.1 Programming for the Web, Part I
• Creating a Web Program with Visual Web Developer
• Using a Table to Lay Out a Web Page’s Content
• Accessing a Text File in a Web Program• Binding a Control to a LINQ Query• Opening an Existing Web Program• Building on an Existing Web Program
3
![Page 4: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/4.jpg)
Preliminary Settings
• The following setting need only be carried out once.
• Click on Options in the Tools menu, select General, click on Design View, and click on the OK button. (See next slide.)
4
![Page 5: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/5.jpg)
Options Settings
5
click on OK button
![Page 6: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/6.jpg)
Creating a Web Program
• Click on New Web Site in the File menu.
• Select Visual Basic in the left pane.
• Select ASP.NET Web Site in the middle pane.
• Select File System as the Web location.
• Give a name and path for the program.
• Click on the OK button.
6
![Page 7: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/7.jpg)
Creating a Web Program (continued)
7
enter name
click on OK
![Page 8: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/8.jpg)
Web Page (VWD Equivalent of the Form Designer)
8
Main Content region
Web page tab
![Page 9: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/9.jpg)
Web Page Tab
The Web page tab is titled “Default.aspx” instead of “Form1. vb [Design]”. The Web page is referred to as Default.aspx in the Solution Explorer window.
9
![Page 10: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/10.jpg)
Toolbox
10
The common controls, such as button, text box, and list box are contained in the Standard group of the Toolbox.
![Page 11: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/11.jpg)
Designing the Web Page
• Begin by clearing the Main Content region.
• Permanent text (called static text) can be typed into the page and formatted directly without the use of labels.
• Text boxes and buttons can be placed at the cursor position (called the insertion point) by double-clicking on them in the Toolbox.
11
![Page 12: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/12.jpg)
Sample Web Page
12
![Page 13: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/13.jpg)
Properties Window
13
The name of a control is specified by the ID property instead of the Name property.
![Page 14: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/14.jpg)
Code Editor
• The Code Editor tab reads “Default.aspc.vb” instead of “Form1.vb”.
• The code in the editor is referred to as the code behind.
14
![Page 15: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/15.jpg)
Sample CodeProtected Sub btnCalculate_Click(...) Handles _ btnCalculate.Click
Dim cost As Double = CDbl(txtCost.Text)
Dim percent As Double = CDbl(txtPercent.Text) / 100
txtTip.Text = FormatCurrency(percent * cost)
End Sub
Notice that “Sub” is proceeded by “Protected” instead of “Private”.
15
![Page 16: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/16.jpg)
Running a Program
• Press Ctrl+F5 to run program without debugging.
• Program runs in the computer’s Web browser.
• To terminate the program, close the browser by clicking on , the Close button.
• Close program by clicking on Close Project in the File menu.
16
![Page 17: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/17.jpg)
A Run of the Sample Program
17
![Page 18: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/18.jpg)
Tables
• A table control can be used to improve the layout of a Web page.
• Tables are created with the Insert Table command from the Table menu in the Toolbar.
18
![Page 19: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/19.jpg)
Sample Table
19
This table has 5 rows and 2 columns. Each subdivision is called a cell.
cell
![Page 20: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/20.jpg)
Cells
• Text and controls can be placed into cells.
• The alignment (such as right, left, or center) of the contents of a cell can be specified with the Align property from the Properties window.
• Commands from the Table menu allow you to insert and delete rows and columns, and to merge cells.
20
![Page 21: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/21.jpg)
Managing Tables
• Assorted arrows; such as , , , , , and , can be used to highlight groups of cells
and resize tables. • Dragging of the cursor also can be used to
highlight groups of cells.
21
![Page 22: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/22.jpg)
Text Files
• Normally placed in the Solution Explorer’s App_Data folder.
• A text file can be read into an array with a statement of the form
Dim strArrayName() As String = IO.File.ReadAllLines(MapPath("App_Data\" & filename))
• LINQ can then be used to obtain specific information.
22
![Page 23: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/23.jpg)
How to Display the Output of a LINQ Query in a List Box
lstBox.DataSource = query
lstBox.DataBind()
23
![Page 24: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/24.jpg)
How to Display the Output of a LINQ Query in a GridView
Note: The GridView is the VWD equivalent of the VB DataGridView.
grvGrid.DataSource = query
grvGrid.DataBind()
grvGrid.HeaderRow.Cells(0).Text = header for first column
grvGrid.HeaderRow.Cells(1).Text = header for second column etc.
24
![Page 25: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/25.jpg)
How to Open an Existing Web Program
25
first click here
Then navigate to the program’s folder and click on the Open button.
![Page 26: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/26.jpg)
12.2 Programming for the Web, Part II
• Multiple Web Pages
• Validation Controls
• Postback
• The Page Load Event
• Class-Level Variables
• The RadioButtonList Control
• The CheckBox Control
26
![Page 27: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/27.jpg)
How to Add an Additional Web Page to a Program
• Click on an existing Web page to make sure it has the focus.
• Click on Add New Item in the Website menu. (An Add New Item dialog box will appear.)
• Select Web Form in the center pane, type a name into the Name box, and click on the Add button.
27
![Page 28: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/28.jpg)
How to Add an Additional Web Page to a Program (cont.)
28
select
click on Add button
change name
![Page 29: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/29.jpg)
Hyperlink Control
• Found in the General group of the Toolbox.
• Appears on a page as underlined text.
• Used to navigate to another page.
• NavigateUrl property specifies the page to navigate to.
29
![Page 30: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/30.jpg)
Sample Web Page
30
hyperlink control
![Page 31: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/31.jpg)
Validation Controls
• Used to validate user input.
• The RequiredFieldValidator control checks that data has been entered into a text box or that an item of a list box has been selected.
• The RangeValidator control checks that the entry in a text box falls within a specified range of values.
31
![Page 32: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/32.jpg)
Sample Web Page
32
RequiredFieldValidator
RangeValidator
Validation controls are not visible at run time. Only appear when input is missing or invalid.
![Page 33: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/33.jpg)
RequiredFieldValidator Control
• The key properties are ControlToVerify and ErrorMessage.
• The ErrorMessage setting is the text that appears when input into the specified control does not meet the given criteria.
33
![Page 34: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/34.jpg)
RangeValidator Control
• The key properties are ControlToVerify, ErrorMessage, Type, MinimumValue, and MaximumValue.
• Possible settings for Type are String, Integer, Double, Date, and Currency.
• The entry in the text box must lie between the MinimumValue and the MaximumValue.
34
![Page 35: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/35.jpg)
Postback
• A postback occurs when the contents of a Web page are sent to the server for processing. Afterwards, the server sends a new page back to the browser.
• When a validation control is triggered, the matter is handled entirely by the browser—no postback occurs.
35
![Page 36: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/36.jpg)
The Page Load Event
• Raised when a Web page is first loaded and every time it is reloaded after a postback.
• The IsPostBack property can be used to guarantee that the page load event is raised only once.
36
![Page 37: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/37.jpg)
Class-Level Variables
• In VWD, class-level variables are of limited value since they do not retain their values after postbacks.
• Devises known as cookies or session variables can be used to retain values.
37
![Page 38: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/38.jpg)
RadioButtonList Control
38
rblAgesrfvAge
VWD does not have a group box control. The radio-button list control is the counterpart of the VB group box containing a set of radio buttons.
![Page 39: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/39.jpg)
RadioButtonList Control (continued)
• The radio-button list control is populated via a ListItem Collection Editor that is invoked from the Tasks button.
• In the previous slide, the control rfvAge, a RequiredFieldValidator, guarantees that a radio button has been selected before the button is clicked on.
39
![Page 40: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/40.jpg)
Check Box Control
40
Example 5 of Section 4.4.
To convert this VB program to a VWD program, the AutoPostBack property of each check box must be set to True.
![Page 41: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/41.jpg)
12.3 Using Databases in Web Programs
• Creating a Bar Chart from a Database
• Displaying Database Information in a Grid
41
![Page 42: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/42.jpg)
The Goal of Section 12.3 is to Generate the Bar Chart Below
42
Note: The data will be extracted from a database.
![Page 43: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/43.jpg)
Four Stages to Create Program
1. Design the Web page
2. Add a database connection
3. Create an object model for the database. (The object model is needed to enable LINQ queries to the database.)
4. Use a LinqDataSource control to display the bar chart.
43
![Page 44: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/44.jpg)
Stage 1: Design Web Page
44
Chart control showing its default bar chart.
The Chart control is found in the Data group of the Toolbox.
![Page 45: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/45.jpg)
Stage 2: Add a Database Connection
45
click here
![Page 46: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/46.jpg)
Stage 2: Add a Database Connection (continued)
46
Make SQL Server Database File the data source. If necessary, use the Change button to alter the data source.
![Page 47: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/47.jpg)
Stage 2: Add a Database Connection (continued)
47
Click on the Browse button, navigate, and double-click on Megacities.mdf database. Then click on the OK button at bottom of window.
![Page 48: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/48.jpg)
Stage 3: Create an Object Model for the Database
48
select
![Page 49: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/49.jpg)
Stage 3: Create an Object Model for the Database (cont.)
49
select
click on Add buttonchange name
![Page 50: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/50.jpg)
Stage 3: Create an Object Model for the Database (cont.)
50
click on the Yes button
An Object Relational Designer will appear.
![Page 51: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/51.jpg)
Stage 3: Create an Object Model for the Database (cont.)
51
click on tables
![Page 52: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/52.jpg)
Stage 3: Create an Object Model for the Database (cont.)
52
drag to left pane of Object Relational Designer
![Page 53: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/53.jpg)
Stage 3: Create an Object Model for the Database (cont.)
53
The window below appears after the first table is dragged into the Object Relational Designer.
click on the Yes button
![Page 54: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/54.jpg)
Stage 3: Create an Object Model for the Database (cont.)
54 Object Relational Designer
![Page 55: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/55.jpg)
Stage 3: Create an Object Model for the Database (cont.)
55
click on the Save All button
![Page 56: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/56.jpg)
Stage 4: Add a LinqDataSource Control
56
Place a LinqDataSource control (in the Data group of the Toolbox) at the bottom of the Web page.
click here
![Page 57: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/57.jpg)
Stage 4: Add a LinqDataSource Control (continued)
57
select MegacitiesDataContext
click on Next button
![Page 58: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/58.jpg)
Stage 4: Add a LinqDataSource Control (continued)
58
click on Finish button
![Page 59: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/59.jpg)
Stage 4: Add a LinqDataSource Control (continued)
59
double-click on the Display button to bring up the Code- Behind window
![Page 60: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/60.jpg)
Code for btnDisplay_ClickDim mcDC As New MegacitiesDataContext
Dim query = From city In mcDC.Cities
Order By city.pop2010 Descending
Select city.name, city.pop2010
chtMegacities.DataBindTable(query, "name")
chtMegacities.ChartAreas(0).AxisX.Interval = 1
chtMegacities.ChartAreas(0).AxisX.Title = "City"
chtMegacities.ChartAreas(0).AxisY.Title = "2010 Population in Millions"
60
![Page 61: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/61.jpg)
Output of PopBarChart Program
61
![Page 62: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/62.jpg)
Displaying Database Information in a Grid
62
use a GridView control, call it grvMegacities, instead of a Chart control
![Page 63: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/63.jpg)
Code for btnDisplay_ClickDim mcDC As New MegacitiesDataContext
Dim query = From city In mcDC.Cities
Order By city.pop2010 Descending
Select city.name, city.pop2010
grvMegacities.DataSource = query
grvMegacities.DataBind()
grvMegacities.HeaderRow.Cells(0).Text = "City"
grvMegacities.HeaderRow.Cells(1) = "2010 Population in Millions"
63
![Page 64: Chapter 12 – Web Applications](https://reader036.fdocuments.us/reader036/viewer/2022062518/56814bf5550346895db8eb1f/html5/thumbnails/64.jpg)
Output of PopGrid Program
64