8/6/2019 Beginning Web Site Development - Module 2
1/38
Beginning Web SiteDevelopment
Module 2 Web Data
Building Data-Driven SitesWith ASP.NET and
C# Version
8/6/2019 Beginning Web Site Development - Module 2
2/38
IntroductionTarget audience
New to programming but want to build a dynamicdata-backed Web site
Prerequisites
Basic understanding of HTML, familiarity with Webinterfaces
Completed Beginning Web Site DevelopmentModule 1
ExpectationsLearn the basics of building dynamic data-backedWeb sites with Visual Web Developer Express andASP.NET 2.0
8/6/2019 Beginning Web Site Development - Module 2
3/38
Agenda
Dynamic, data-driven sites
Using SQL Server 2005 Express
Creating and using local databases
Structured Query Language (SQL)
Talking to a database with SQL
Data bindingBinding ASP.NET controls to data
8/6/2019 Beginning Web Site Development - Module 2
4/38
Dynamic Web Sites
Many sites today are dynamic andinteractive
Display content that is updatedfrequently
News sites, sports sites, stock analysis sites
Allow clients to interact with site
Shopping sites, internet portals, auction sites
Interaction requires storage
8/6/2019 Beginning Web Site Development - Module 2
5/38
Saving client-entered data
Where should user-entered data go?
ClientBrowser
WebServer
AddPoem.aspx
AddPoem.aspx.cs
?
8/6/2019 Beginning Web Site Development - Module 2
6/38
Saving client-entered data
Problem: interactive Web pages needa place to store data
Solution: relational database
Store data in tabular format(think spreadsheet)
Handles multiple users simultaneously
Standard language (SQL) and many toolsfor manipulating data
8/6/2019 Beginning Web Site Development - Module 2
7/38
SQL Server 2005 Express
VWD Express installs SQL 2005Express
Local file-based database engine
Full SQL support, databases up to 4GB
Easy to deploy copy database file (.mdf)to deployment server
8/6/2019 Beginning Web Site Development - Module 2
8/38
Creating a database
Add SQL 2005 Express databaseStores data in tables you define
8/6/2019 Beginning Web Site Development - Module 2
9/38
Database tables
Databases store data in tablesConceptually similar to spreadsheets
Each table is described as a collection
of columns, each storing a specific typeof data
A table contains rows of data that conform to t he tabledescription
8/6/2019 Beginning Web Site Development - Module 2
10/38
Defining a table
Create table(s) to store dataSeparate column for each attribute
Unique ID column
8/6/2019 Beginning Web Site Development - Module 2
11/38
Identity columns
Identity columnColumn storing a unique number for eachrow
Good practice to have an identitycolumn
Improves performance, adds flexibility
Unique ID generated for each new entry
8/6/2019 Beginning Web Site Development - Module 2
12/38
Filling tables with data
You can add data to tables you createInitial seed data or complete data fortables that store read-only data
(like a list of items and their prices)
8/6/2019 Beginning Web Site Development - Module 2
13/38
Creating a SQL 2005Express Database
Creating the initial database
Adding tables
Specifying identity columns Populating table data
8/6/2019 Beginning Web Site Development - Module 2
14/38
SQL
Structured Query Language (SQL)Standard way to retrieve data from andmodify data in a database
Basic understanding necessary to useASP.NET data controls
Four standard operations for
manipulating and retrieving dataSELECT
INSERT
UPDATE
DELETE
8/6/2019 Beginning Web Site Development - Module 2
15/38
Testing queries
VWD Express Database Explorerprovides query builder
Tables i nquerylisted here
Colum ns inquerylisted here
Querytext
Query
results
8/6/2019 Beginning Web Site Development - Module 2
16/38
SELECTing data
SQL method for retrieving data isSELECT
SELECT , ,ID Author Quote FROMQuotes
Columnnames
Tablename=
8/6/2019 Beginning Web Site Development - Module 2
17/38
Constraining with WHERE
Can add criteria to constrain results ofSELECT with WHERE clause
SELECT , ,ID Author Quote FROMQuotes WHERE ( = )Author 'William Shakespeare'
=
SELECT , ,ID Author Quote FROMQuotes
WHERE ( % % )Author LIKE ' ea '=
8/6/2019 Beginning Web Site Development - Module 2
18/38
INSERTing rows
SQL method for inserting rows isINSERT
INSERT ( , )Author Quote INTOQuotes VALUES ( , ! )'Me' 'Life is good '
Columnnames
Tablename
Values toinsert
8/6/2019 Beginning Web Site Development - Module 2
19/38
UPDATEing rows
SQL method for updating rows isUPDATE
UPDATEQuotes SET =Author 'Joe' WHERE =ID 3
Tablename
New columnvalue(s)
Constraint (whichrow(s) )
8/6/2019 Beginning Web Site Development - Module 2
20/38
DELETEing rows
SQL method for deleting rows isDELETE
DELETE FROMQuotes WHERE =ID 3
Tablename
Constraint (whichrow(s) )
8/6/2019 Beginning Web Site Development - Module 2
21/38
Interacting with adatabase using SQL
Selecting data
Inserting data
Updating data Deleting data
8/6/2019 Beginning Web Site Development - Module 2
22/38
Data binding
Data bindingA mechanism for displaying andmodifying dynamic data from a Web
pageASP.NET supports data binding
Can point controls to database table as
source for dataDisplayed content drawn from table
Interface for modifying data built intosome controls (update, delete, insert)
8/6/2019 Beginning Web Site Development - Module 2
23/38
Data bindingClientBrowser
WebServer
Default.aspx
QuotesDatabase
8/6/2019 Beginning Web Site Development - Module 2
24/38
Binding controls to data
Several ASP.NET controls designed tobind to data
GridView
Display/edit a database table as a grid
DetailsView
Display one table row at a time, insert newitems
BulletedList
Display a list of items from a table
Many more
8/6/2019 Beginning Web Site Development - Module 2
25/38
SqlDataSource control
SqlDataSource control handles dataretrieval, inserts, updates, anddeletes
Acts as bridge between database anddata-bound control
Contains SQL statements to performdatabase calls
8/6/2019 Beginning Web Site Development - Module 2
26/38
Adding a GridView
1. Set page t o Designmode
2. Open DatabaseExplorer3. Drag table onto
page4. Select desiredoptions5. Optionally AutoFormat6. Edit Columns andsetID column
Visible= false
8/6/2019 Beginning Web Site Development - Module 2
27/38
Generated source
8/6/2019 Beginning Web Site Development - Module 2
28/38
Adding a GridView
Adding a GridView to display tabledata
SqlDataSource control Enabling sorting and paging
Formatting the GridView
8/6/2019 Beginning Web Site Development - Module 2
29/38
SQL parameters
SQL supports parameters to fill valuesin dynamically
SQL Server syntax is @varname
Before executing statement, parametersmust be associated with values
UPDATEQuotes SET =Author @Author WHERE =ID @ID
parameters
8/6/2019 Beginning Web Site Development - Module 2
30/38
SqlDataSource
parametersHow to associate parameters withSqlDataSourceDELETE FROM Quotes WHERE ID @ID
StringStringInt32
Int32
Add Updateand Deletecommandswithparameters
List parameternames andtypes
Note: Param eters should always be named t he same as thecorrespondingcolumn nam es to work properly w ith t he GridView and
DetailsView cont rols
8/6/2019 Beginning Web Site Development - Module 2
31/38
GridView updates and
deletesOnce your SqlDataSource has Updateand Delete commands, the GridViewcan be enabled with Update and
Delete features
Must setDataKeyNamesto identity colum nnameto supportUpdate/Delete
8/6/2019 Beginning Web Site Development - Module 2
32/38
GridView updating
8/6/2019 Beginning Web Site Development - Module 2
33/38
Inserting with a
DetailsViewDetailsView provides insert featureCan also be used to display/update/deleteone row at a time
Configure new datasource
8/6/2019 Beginning Web Site Development - Module 2
34/38
Inserting with a
DetailsViewAdd InsertCommand to data sourceEnable Inserting and setDefaultMode=InsertINSERT INTO Quotes Author Quote VALUES @Author @Quote
stringstring
8/6/2019 Beginning Web Site Development - Module 2
35/38
Inserting with a
DetailsView
8/6/2019 Beginning Web Site Development - Module 2
36/38
Updating, Deleting,and Inserting
Enabling GridView Updating andDeleting
Using a DetailsView for inserting
8/6/2019 Beginning Web Site Development - Module 2
37/38
Summary
Interactive sites make the internetwhat it is today
VWD Express includes database
engineSQL Server 2005 Express
ASP.NET supports data binding
Display database content
Update, insert, delete
8/6/2019 Beginning Web Site Development - Module 2
38/38