Class 9 Chapter 8 Creating WebBased Database Applications Using ASP'NET

1
Class 9Chapter 8Creating Web-Based Database
Applications Using ASP.NET
2
Learning Objectives

• Describe the architecture of the World Wide Web
  and Web-database applications
• Understand the structure of an ASP.NET Web
  application
• Create an ASP.NET Web site
• Create Web database forms that allow users to
  process database data using single record,
  tabular, and master-detail displays
• Enhance Web database forms with pick lists,
  validation controls, and images

3
Introduction to the World Wide Web

• A network of server and client computers that
  share information
• Various components
• Architecture of the Web
• Explore Web addresses
• Hypertext Markup Language (HTML)

4
Web Architecture

• Web Client computers run Web browsers
• Applications that request Web pages
• Web server
• A computer running special Web server software
  that services client requests for Web pages
• Network
• A communication path between a sender and a
  receiver

5
Web Architecture
6
Web Architecture (contd)

• Web page is a file with an .html or .htm
  extension
• Contains hypertext markup language (HTML)
  commands
• ASP.NET enables creating a rich user interface
  with highly interactive controls
• In the Web-database architecture, the database
  server process runs on a separate server from the
  Web server process

7
Web Architecture (contd)
8
Web Addressing Concepts

• Communication protocols
• Uniform Resource Locators (URLs)
• Ports

9
Communication Protocols

• Communication protocol is an agreement between a
  sender and a receiver
• Specifies how they will format, send, and receive
  data
• Internet Protocol (IP)
• Primary communication protocol used by most
  Internet traffic

10
Communication Protocols (contd)

• A domain name server converts the domain name to
  its associated numeric IP address
• HyperText Transfer Protocol
• A communication protocol that works with and on
  top of IP
• Coordinates the messages between a browser and
  Web server
• Determines how the Web server sends html files to
  browsers

11
Uniform Resource Locators

• First component in a URL is the communication
  protocol, usually http//
• Folder path specifies the Web pages location in
  the Web servers file system
• URL does not include a folder path and filename -
  the Web server returns its default document,
  which is a home page

12
Uniform Resource Locators

• If file name is missing
• index.htm, default.htm, main.htm, home.htm

13
Ports

• The address for a server process is called a port
• A value that references a server process using a
  number between 0 and 65,535
• A server maintains an IP port table
• Contains port numbers in one column
• Main memory locations of associated server
  processes in the second column
• http//localhost1685/WebExamples/Default.aspx

14
Hypertext Markup Language (HTML)

• HTML provides a standard notation for specifying
  the appearance and content of Web pages
• An HTML document is a text file that contains
• Text and embedded tags
• Codes that specify Web page formatting and links

15
Tags

• A tag is a formatting code
• Encloses a Web page element such as a line of
  text or an image
• Instructs the browser how to process or display
  the item
• HTML tags appear in angle brackets (ltgt)
• Some tags are one-sided tags
• Do not enclose an element but instead instruct
  the browser to perform a one-time action

16
HTML Document Structure

• An HTML document
• Begins with an opening lthtmlgt tag and ends with a
  closing lt/htmlgt tag
• Heading section is enclosed in ltheadgt tags
• Final section of an HTML document is the body
  section
• Enclosed in ltbodygt tags, and contains all the Web
  pages content and format tags

17
HTML Document Structure
18
HTML Forms

• HTML forms are enhancements to HTML documents
• Contain controls such as text boxes and buttons
• Allow users to enter inputs and interact with the
  Web page
• Inputs allow to submit data values to the Web
  server for processing by a server-side program
• Tags can have attributes, which are values that
  modify the tag

19
HTML Forms

• Client-side scripts/processing
• VBScript, JavaScript
• Server-side scripts/processing
• CGI, ASP, PHP

20
Introduction to ASP.NET

• In the past, CGI was mostly used
• Was not suitable for high-volume processing
• Security was an issue

21
Introduction to ASP.NET

• ASP.NET provides adequate performance for
  high-volume Web sites
• An IDE that allows developers to create complex
  interactive Web applications quickly and easily
• An overview of the ASP.NET technology includes
• ASP.NET processes Web pages
• Web Form Files
• Web Site Structure

22
ASP.NET Web Page Processing

• A Web page can be
• Static
• Content is fixed at design time and does not
  depend on user inputs
• If a user requests an html page, the server knows
  it is a static page
• Dynamic
• Web server creates based on user inputs
• If a user requests an aspx page, the server knows
  it is a dynamic page
• ASP.NET uses a different processing approach

23
ASP.NET Web Page Processing (contd)

• The client browser initially requests the ASP.NET
  Web page called a Web form
• User interacts with the Web form
• Enters values or performs actions that cause
  event handlers to execute
• Postback Processing
• Process of repeatedly raising events and posting
  the same Web form back to the server

24
ASP.NET Web Page Processing (contd)
25
ASP.NET Web Page Processing (contd)

• How does the server know which events to process,
  which inputs were changed?
• Server sends an ASP.NET form together with
  ViewState hidden input about the initial state
  of the form
• When the browser sends the form back, the server
  compares the original ViewState values with
  current ones, and runs event handlers based on
  these changes

26
Web Form Files

• .aspx file includes
• HTML tags and elements
• Server controls such as text boxes and buttons
• Contains program commands that perform
  server-side processing, e.g., content
  presentation in the browser
• Places the HTML and server control definitions in
  the Web form file

27
.aspx Files

• Page directive specifies how ASP.NET processes
  the Web page
• The ASP.NET control define Web page controls such
  as text boxes and buttons
• Web pages Language
• Specifies the programming language in which the
  pages event handlers are written
• Codefile links the .aspx file to the aspx.vb file
  
• Stores the Web pages event-handling commands

28
Web Form Files

• .aspx.vb file
• Code file
• Places program commands for the Web forms
  server-side event handlers
• E.g., retrieve data from the database

29
Code Files

• Code file contains event handlers for processing
  user actions
• First command uses the Partial keyword to declare
  a class
• Creating a partial class allows a single class to
  be split into several separate files
• Next block of a code defines an event handler for
  a Web page control

30
Code Files
31
Web Site Structure

• Web site consists of one or more Web-based
  applications
• IDE creates the Web sites root folder
• Web sites starting point that contains all the
  sites files and subfolders
• The Solution Explorer displays the Web sites
  root folder as the top node
• The App_Data folder provides a secure location
  for local database files

32
Web Site Structure (contd)

• The Images folder provides a central location for
  the Web sites image files
• A master page is a template contains
• Items appearing on all the sites Web pages
• The HTML document codes for all the Web site
  pages
• Links to all the other Web forms

33
Web Site Structure (contd)

• To open website
• click root folder, not
• an individual file

34
Creating an ASP.NET Web Site

• Open VS 2005
• Tools, Import and Export Settings

35
Creating an ASP.NET Web Site
36
Creating an ASP.NET Web Site
37
Creating an ASP.NET Web Site
38
Creating an ASP.NET Web Site
39
Creating an ASP.NET Web Site

• The first step is creating a new website
• File/New Website
• A Web form .aspx file in the IDE
• Allows Design view which shows how the Web form
  will appear to the user
• Source view which shows the HTML source code for
  the form
• The Default.aspx Web form represents the Web
  sites default document

40
Creating the Home Page

• The home page displays
• A title and image
• A site map that allows users to navigate to other
  Web forms
• The site map displays nodes for the different Web
  forms
• Web sites master page is a master template for
  all the sites page

41
Creating the Master Page

• A master page defines the layout and appearance
  of all a Web sites pages
• Creating a master page ensures that all the
  sites pages have a consistent appearance
• A content page links to a master page, and
  displays the specific content of the Web form
• A content placeholder is a control that defines
  the area to place the controls that appear on the
  Web form

42
Creating the Web Site Map

• Web site map
• A tree structure that shows the layout of the Web
  site forms
• Allows users to navigate to any form by clicking
  on the associated node
• To create the site map, define a siteMapNodes
  element for each tree node
• Nest the elements to create the hierarchical
  structure

43
Creating the Web Site Map
44
Creating the Web Site Map

• ltsiteMapNode url"/Default.aspx" title"Home
  Page" description"ASP.NET Examples"gt
• ltsiteMapNode url"/DetailsView.aspx"
  title"Details View" description"Details View
  Examples" /gt
• ltsiteMapNode url"/GridView.aspx"
  title"Grid View" description"Grid View
  Examples" /gt
• ltsiteMapNode url"/MasterDetail.aspx"
  title"Master Detail" description"Master Detail
  Examples" /gt
• ltsiteMapNode url"/Images.aspx"
  title"Student Images" description"Student
  Images Examples" /gt
• lt/siteMapNodegt

45
Displaying the Web Site Map on the Master Page

• To display the site map on the master page
• Open the master page in Design view
• Create a TreeView control
• A TreeView control
• Displays hierarchical data items in a tree
  structure with nodes and branches
• Link the TreeView control to the site map file

46
Displaying the Web Site Map on the Master Page
47
Creating and Formatting the Home Page

• Create home page
• Delete the existing Default.aspx Web page
• Alternatively
• Delete the existing tags on the Default.aspx page
• Add the commands to link it to the master page
• Specify the new form as the Web sites Start page
• Always appears first when you run the project

48
Adding Items to Web Forms
49
Adding Items to Web Forms
50
Adding Items to Web Forms

• There are two basic positioning options for Web
  form items
• Absolute
• Specify its exact position by dragging and
  dropping it into place on the form
• Relative
• An item resides in a container object
• Drag the item directly from the Toolbox to the
  container object, and then set its position
  attribute to Relative
• Item then moves to the specified container

51
Adding Items to Web Forms

• Absolute positioning Layout/Position

52
Creating Web Database Forms

• To create Web forms that interact with databases
• ASP.NET enables Web pages to access database data
• Web forms that display data in singlerecord,
  tabular, and master-detail displays
• Web form that displays image data
• Functionality to Web forms with pick lists and
  validation controls

53
Web-Database Connectivity

• ASP.NET provides data-bound server controls that
  support complex data binding
• Two approaches to data binding
• SQL data source control
• Specifies a database connection
• Uses a SQL query to specify the records that the
  data source contains, and has associated queries
• Used in this book
• Object data source
• A custom class defines a strongly typed data set
  with one or more associated table adapters
• Uses table adapter and/or custom class methods to
  process the data

54
Web-Database Connectivity
55
Read-Write Single-Record Display

• To create the form that uses a data-bound control
  to support a read-write single-record display
• DetailsView control
• Data-bound server control that creates a
  single-record display of database data
• Specify the DetailsView controls data source

56
Read-Write Single-Record Display

• Book page 414, set up
• a connection to your
• Assign 1 database

57
Read-Write Single-Record Display
58
Read-Write Single-Record Display (contd)

• To configure the DetailsView control
• Specify that it will support paging (navigation),
  insert, update, and delete operations
• Format the control by changing its format style
• Creating a Pick List
• Display a field value as a pick list, modify the
  data source to retrieve the pick list values
• Convert the field to a combo box that displays
  the retrieved values

59
Modifying the SQL Data Source

• Modify the existing controls SQL data source
  query
• Displays the foreign key values of existing
  records
• Uses the values that is selected from the pick
  list
• Create a SQL data source that joins two or more
  tables
• The wizard cannot generate the action queries
• The data source cannot support action query
  operations

60
Modifying the Field Properties

• In data-bound control in a Web form, all its
  fields are called bound fields
• In the Fields dialog box
• Select the field to modify in the Selected fields
  list
• Modify the selected fields properties in the
  BoundField properties list

61
Creating and Configuring the Pick List

• Modify the DetailsView control
• Displays the pick list when user inserts a new
  record
• Updates an existing record
• Template field
• An associated HTML template, made of HTML form
  tags and elements
• The IDE places in the rendered version of the
  HTML document
• Retains its original data binding

62
Validating User Inputs

• Details View Web form validates some data
• Does not allow to directly enter or edit the
  primary key
• Forces to select a valid foreign key value using
  a pick list
• Validation controls display an error message
  directly on the form with incorrect input
• Validation controls are associated with template
  fields
• Web forms data validation is not comprehensive

63
Creating Navigation Buttons

• Create the navigation buttons
• Add Button server controls to the form
• Create the position locator label
• Add a Label server control
• Create event handlers for the navigation buttons
• Allow the user to step through the records
• The navigation button event handlers use the
  DetailsView controls PageIndex and PageCount
  properties

64
Read-Write Tabular Display

• ASP.NET GridView control
• Create a tabular data display on a Web form
• Allows users to edit and delete record values
• The data fields appear as text boxes and/or pick
  lists
• User can modify values
• Click Update
• The control saves the changes and redisplays the
  form

65
Creating a GridView Control

• Create a new Web form
• Add a GridView control to the form
• Configure its properties
• Create an associated data source that retrieves
  data values from the table
• Modify the data source
• Format the controls column headings

66
Creating a Pick List

• Create the pick list that appears when the user
  opens the control for editing
• Create an associated SQL data source that
  retrieves the values

67
Resizing the Edit Columns and Adding Data
Validation

• Configure the data properties of the template
  fields
• Modify the field widths when the control is
  opened for editing
• Add validation controls to validate input values
• Configure the template fields
• MaxLength property values match their database
  table definitions

68
Resizing the Edit Columns and Adding Data
Validation (contd)

• Modify the template field Width
• Property values resize the display widths when
  the fields are opened for editing
• Create the RequiredFieldValidator controls for
  the required fields
• Create a RangeValidator control
• Format the template fields
• Validation control messages always appear below
  the template field text boxes

69
Creating the Web Form and Master List

• Follow the standard steps for creating a new Web
  form
• Save the Web form as MasterDetail.aspx
• Place the code in a separate file
• Configure the form to use absolute positioning
  for new form controls

70
Creating the Detail GridView

• Create a search condition in the controls SQL
  data source
• Format the GridView
• Create a GridView control that displays detail
  records in a master-detail relationship
• UPDATE query attempts to update the master record
  field

71
Creating a Form to Insert New Detail Records

• Calling a second form from the current form
  requires passing a variable value to the second
  form
• Use Response.Redirect to display a Web form .aspx
  file
• To improve system performance use Server.Transfer
  with .aspx files

72
Creating a Form to Insert New Detail Records
(contd)

• A session variable
• A variable that the server stores as long as a
  new page or postback from the browser is received
  within a specific time interval
• A cookie
• Can contain multiple data values
• Can be temporary, lasting until the user closes
  the browser
• Can be persistent, available whenever the user
  connects to the Web site that creates the cookie,
  even after closing and reopening the browser
• Web site that can access a cookie is the one that
  originally creates the cookie

73
Preventing Users from Deleting Master Records

• Referential integrity
• Constraints that prevent users from deleting a
  master record with related detail records
• Prevent users from seeing a cryptic
  system-generated error page
• Create an event handler for the GridView
  controls RowDeleting event
• Event handler cancels the delete operation, then
  tries to delete the record programmatically
• Create a label on the MasterDetail.aspx Web form
  to display a message if the deletion fails

74
Displaying Images

• Web pages provide an excellent way to display and
  distribute image data
• Format the controls fields
• Change the field labels
• Specify not to display the image file name
• To display the image
• Create an Image control which is a server control
  that displays an image from an image file

75
Displaying Images (contd)

• To reference the file name value to load the
  Image, use the DetailsView controls DataKeyNames
  property
• DataKeyNames
• Creates a collection data structure
• Allows the referencing of the values of
  individual bound fields in a control
• IndexValue specifies the fields position in the
  collection
• Event handler sets the Image controls
  URLLocation property using the DataKeyNames
  collection to specify the image file name