Download Web Applications - University of Houston

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
1
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
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
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
Options Settings
click on OK button
5
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
Creating a Web Program
(continued)
enter name
click on OK
7
Web Page (VWD Equivalent
of the Form Designer)
Web page tab
Main Content
region
8
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
Toolbox
The common controls, such as button, text
box, and list box are contained in the
Standard group of the Toolbox.
10
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
Sample Web Page
12
Properties Window
The name of a control is specified by the
ID property instead of the Name property.
13
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
Sample Code
Protected 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
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
A Run of the Sample Program
17
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
Sample Table
cell
This table has 5 rows and 2 columns. Each
subdivision is called a cell.
19
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
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
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
How to Display the Output of a
LINQ Query in a List Box
lstBox.DataSource = query
lstBox.DataBind()
23
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
How to Open an Existing Web
Program
first click
here
Then navigate to the program’s folder
and click on the Open button.
25
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
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
How to Add an Additional Web
Page to a Program (cont.)
select
change
name
click on
Add button
28
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
Sample Web Page
hyperlink control
30
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
Sample Web Page
RequiredFieldValidator
RangeValidator
Validation controls are not visible at run time.
Only appear when input is missing or invalid.
32
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
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
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
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
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
RadioButtonList Control
rblAges
rfvAge
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.
38
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
Check Box Control
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.
40
12.3 Using Databases in Web
Programs
• Creating a Bar Chart from a Database
• Displaying Database Information in a Grid
41
The Goal of Section 12.3 is to
Generate the Bar Chart Below
Note: The data
will be extracted
from a database.
42
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
Stage 1: Design Web Page
The Chart control is
found in the Data
group of the Toolbox.
Chart control showing
its default bar chart.
44
Stage 2: Add a Database
Connection
click here
45
Stage 2: Add a Database
Connection (continued)
Make SQL Server Database File the data
source. If necessary, use the Change button to
alter the data source.
46
Stage 2: Add a Database
Connection (continued)
Click on the Browse button, navigate, and
double-click on Megacities.mdf database. Then
click on the OK button at bottom of window. 47
Stage 3: Create an Object
Model for the Database
select
48
Stage 3: Create an Object
Model for the Database (cont.)
select
change name
click on Add button
49
Stage 3: Create an Object
Model for the Database (cont.)
click on the Yes button
An Object Relational Designer will appear.
50
Stage 3: Create an Object
Model for the Database (cont.)
click on tables
51
Stage 3: Create an Object
Model for the Database (cont.)
drag to left pane of Object
Relational Designer
52
Stage 3: Create an Object
Model for the Database (cont.)
The window below appears after the first table
is dragged into the Object Relational Designer.
click on the Yes button
53
Stage 3: Create an Object
Model for the Database (cont.)
Object Relational Designer
54
Stage 3: Create an Object
Model for the Database (cont.)
click on the Save All button
55
Stage 4: Add a LinqDataSource
Control
Place a LinqDataSource control (in the
Data group of the Toolbox) at the bottom
of the Web page.
click here
56
Stage 4: Add a LinqDataSource
Control (continued)
select MegacitiesDataContext
click on Next button
57
Stage 4: Add a LinqDataSource
Control (continued)
click on Finish button
58
Stage 4: Add a LinqDataSource
Control (continued)
double-click on
the Display
button to bring
up the CodeBehind window
59
Code for btnDisplay_Click
Dim 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
Output of PopBarChart
Program
61
Displaying Database
Information in a Grid
use a GridView control,
call it grvMegacities,
instead of a Chart control
62
Code for btnDisplay_Click
Dim 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
Output of PopGrid Program
64