Beginning Web Site Development - Module 2

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


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


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


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


5/38

Saving client-entered data

Where should user-entered data go?

ClientBrowser

WebServer

AddPoem.aspx

AddPoem.aspx.cs

?


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


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/38

Creating a database

Add SQL 2005 Express databaseStores data in tables you define


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


10/38

Defining a table

Create table(s) to store dataSeparate column for each attribute

Unique ID column


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


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)


13/38

Creating a SQL 2005Express Database

Creating the initial database

Adding tables

Specifying identity columns Populating table data


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


15/38

Testing queries

VWD Express Database Explorerprovides query builder

Tables i nquerylisted here

Colum ns inquerylisted here

Querytext

Query

results


16/38

SELECTing data

SQL method for retrieving data isSELECT

SELECT , ,ID Author Quote FROMQuotes

Columnnames

Tablename=


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 '=


18/38

INSERTing rows

SQL method for inserting rows isINSERT

INSERT ( , )Author Quote INTOQuotes VALUES ( , ! )'Me' 'Life is good '

Columnnames

Tablename

Values toinsert


19/38

UPDATEing rows

SQL method for updating rows isUPDATE

UPDATEQuotes SET =Author 'Joe' WHERE =ID 3

Tablename

New columnvalue(s)

Constraint (whichrow(s) )


20/38

DELETEing rows

SQL method for deleting rows isDELETE

DELETE FROMQuotes WHERE =ID 3

Tablename

Constraint (whichrow(s) )


21/38

Interacting with adatabase using SQL

Selecting data

Inserting data

Updating data Deleting data


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)


23/38

Data bindingClientBrowser

WebServer

Default.aspx

QuotesDatabase


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


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


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


27/38

Generated source


28/38

Adding a GridView

Adding a GridView to display tabledata

SqlDataSource control Enabling sorting and paging

Formatting the GridView


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


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


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


32/38

GridView updating


33/38

Inserting with a

DetailsViewDetailsView provides insert featureCan also be used to display/update/deleteone row at a time

Configure new datasource


34/38

Inserting with a

DetailsViewAdd InsertCommand to data sourceEnable Inserting and setDefaultMode=InsertINSERT INTO Quotes Author Quote VALUES @Author @Quote

stringstring


35/38

Inserting with a

DetailsView


36/38

Updating, Deleting,and Inserting

Enabling GridView Updating andDeleting

Using a DetailsView for inserting


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


38/38

Beginning Web Site Development - Module 2

Documents

Transcript of Beginning Web Site Development - Module 2