Tài liệu Module 1: Displaying Data from a Database docx

Contents
Overview 1
Introducing Data-Driven Web Sites 2
Demonstration: Tour of the Sample Web
Site 8
Retrieving Data from a Database 10
Lab 1.1: Retrieving Data from a Database 22
Demonstration: Creating a Detail Results
Page 28
Lab 1.2: Creating a Detail Results Page 30
Review 34

Module 1: Displaying
Data from a Database


Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual

property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you any
license to these patents, trademarks, copyrights, or other intellectual property.

 2000 Microsoft Corporation. All rights reserved.

Microsoft, BackOffice, FrontPage 2000, MS-DOS, Windows, Windows NT, and Windows 2000
are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other
countries.

The names of companies, products, people, characters, and/or data mentioned herein are fictitious
and are in no way intended to represent any real individual, company, product, or event, unless
otherwise noted.

Other product and company names mentioned herein may be the trademarks of their respective
owners.

Development Lead: Sonia Pande (NIIT)
Instructional Designers: Sangeeta Nair, Vijayalakshmi Narayanaswamy; Shruti Jain, Geetnjali
Arora, (NIIT)
Technical Contributors: Scott Swigart (3 Leaf Solutions, LLC); Gary Gumbiner (Great Barrier
Technologies, Inc.)
Program Managers: Steve Merrill
Graphic Artist: Scott Serna (Creative Assets)
Editing Manager: Lynette Skinner
Editor: Reid Bannecker (S&T Onsite)
Copy Editor: Reid Bannecker (S&T Onsite)
Production Manager: Miracle Davis
Production Coordinator: Jenny Boe
Production Tools Specialist: Julie Challenger

Production Support: Susie Bayers (Online Training Solutions, Inc.)
Test Manager: Sid Benavente
Courseware Testing: Eric Myers
Creative Director, Media/Sim Services: David Mahlmann
Web Development Lead: Lisa Pease
CD Build Specialist: Jenny Boe
Online Support: Debbi Conger
Manufacturing Manager: Rick Terek
Operations Coordinator: John Williams
Manufacturing Support: Laura King; Kathy Hershey
Lead Product Manager, Release Management: Bo Galford
Lead Product Manager, Internet Services: Hilary Vandal
Group Manager, Courseware Infrastructure: David Bramble
Group Product Manager, Content Development: David Bramble
General Manager: Robert Stewart

Module 1: Displaying Data from a Database iii


Instructor Notes
The module takes students on a tour to a sample intranet site and introduces a
case study of a fictitious company. The module introduces the components of
Web site architecture and database architecture. This module also teaches
students the procedure for retrieving records from a database by importing the
database to the current Web and establishing a connection with a database by
using the Database Results Wizard. The procedure for displaying data from a
database by specifying the rows and fields to be displayed, and selecting the
formatting options for database results are also covered. Finally, the module
teaches students how to create a detail results page.
After completing this module, students will be able to:

!
Understand the need for a data-driven Web site.
!
Identify the components of Web site architecture.
!
Describe the database architecture.
!
Retrieve records from a database.
!
Specify the data to be displayed.
!
Create a detail results page.

Materials and Preparation
This section provides you with the required material and preparation tasks that
are needed to teach this module.
Required Material
To teach this module, you need the following materials:
!
Microsoft PowerPoint file 1932A_01.ppt.
!
Module 1, “Displaying Data from a Database”
!
Lab 1.1, “Retrieving Data from a Database”
!
Lab 1.2, “Creating a Detail Results Page”

Preparation Tasks
To prepare for this module, you should:
!

Read all the material for this module.
!
Complete the lab.

Presentation:
65 Minutes
Labs:
55 Minutes
iv Module 1: Displaying Data from a Database


Module Strategy
Use the following strategy to present this module:
Start the module with an introduction of data-driven Web sites. Show them
some real examples of data driven Web sites. After the introductory topics are
over, take them through the sample site and tell them that they will create the
Personal Data part of the intranet site.
Demonstrate the procedures using the Database Results Wizard, while
explaining each option and telling them under what situation they would be
using each option. It is very important to tell them real examples of why they
would create a particular page.

Module 1: Displaying Data from a Database 1


#
##
#

Overview

!
Introducing Data-Driven Web Sites
!
Demonstration: Tour of the Sample Web Site
!
Retrieving Data from a Database
!
Lab 1.1: Retrieving Data from a Database
!
Demonstration: Creating a Details Results Page
!
Lab 1.2: Creating a Details Results Page
!
Review


Data-driven Web sites are some of the most useful resources on the Internet.
They enable users to update and retrieve information from an underlying
database. Microsoft FrontPage 2000 makes it easy to collect and display data on
Web pages and create a Web database application.
In order to use the information in a database on your pages, you need to create a
database connection. FrontPage helps you establish a database connection by
using the Database Results Wizard. The Database Results Wizard allows you to
specify the data to be displayed, select formatting options, and specify the
methods of displaying records.
After completing this module, you will be able to:
!
Understand the need for a data-driven Web site.
!
Identify the components of Web site architecture.

!
Describe the database architecture.
!
Retrieve records from a database.
!
Specify the data to be displayed.
!
Create a detail results page.


Slide Objective
To provide an overview of
the module topics and
objectives.
Lead-in
In this module, you will learn
about dynamic Web sites
and how to display results
from a database by
establishing a database
connection.
2 Module 1: Displaying Data from a Database


#
##
#

Introducing Data-Driven Web Sites
!

Components of a Data-Driven Web Site
!
Database Architecture
!
Interacting with Databases


The Internet has grown at a phenomenal pace since its inception. It has evolved
from static text pages to dynamic and interactive Web sites. A dynamic Web
site incorporates elements, such as scripts and database connectivity, to add
features and functionality to pages. Incorporating these features into a Web
page requires extensive programming skills. FrontPage 2000 provides you with
a graphical user interface (GUI) environment for creating and managing
dynamic and interactive Web sites.
Using FrontPage 2000, you can connect your Web site to a database. A site that
enables users to search, retrieve, and update data in a database is a data-driven
Web site. As a result of the enhanced functionality that data-driven Web sites
bring about, they have become the most useful resources on the Web. Examples
of data-driven Web sites include online commerce sites that facilitate shopping
on the Web by connecting databases, such as inventory and stock, to the Web
site. Also, sites such as corporate intranets, which allow employees to retrieve
information from the company databases connected to the site, are categorized
as data-driven Web sites.
Some examples of data-driven Web sites include
,

, and .
Slide Objective
To provide an overview of
the topics in the section.

Lead-in
In this module, you will
identify the need for a data-
driven Web site. You will
also identify the components
of Web site architecture and
database architecture.
Module 1: Displaying Data from a Database 3


Components of a Data-Driven Web Site


The architecture of a data-driven Web site consists of three major components,
Web browser, Web server, and database.
Web browser
The Web browser is an Internet client program that uses hypertext transfer
protocol (HTTP) to make requests of Web servers on behalf of the user.
Web server
The Web server is a program that uses the client/server model and HTTP to
generate the files that form Web pages for users. The Web server is responsible
for managing and delivering the content that you wish to make available over
the Web. The Web server takes a large repository of information from a
database and makes it easily available to users. Some of the common Web
server software includes Microsoft IIS, Microsoft Personal Web Server, and
Apache.
Database
Every organization maintains data pertaining to its business, employees, and
finances. This data needs to be accessed, maintained, and updated on a regular
basis. Data is stored in a database in the form of tables. A database is a

collection of information that is related to a particular subject or purpose, such
as tracking customer orders or maintaining employee details.
Slide Objective
To identify the components
of the Web site architecture.
4 Module 1: Displaying Data from a Database


How a data-driven Web site works
In a data-driven Web site, data is retrieved from an underlying database by
using scripts, such as active server pages (ASP) that run on a Web server. A
user connects to a Web server using a browser. The server receives the request
and processes the request by using ASP. ASP connects to a database and
retrieves data from the database. It then sends the results in HTML format to be
displayed in the client browser.
FrontPage 2000 uses ASP internally to extract data from a database. Therefore,
you do not need expertise in ASP, in order to create a data-driven Web site.
Module 1: Displaying Data from a Database 5


Database Architecture


A database is a collection of data stored in the form of tables. For example,
personnel data for all the employees of an organization can be stored in the
Employee table.
Need for related tables
A table is a set of records and fields that stores data in a database. However, if a
table has a complex structure with a large number of fields, it can lead to data
redundancy and inconsistency when adding, deleting, and updating the data.

Consider an example of a table named Student that contains information about
students in a batch along with their grades for each semester. Student data, such
as student name and student ID, is repeated each time that the grades for
students are recorded in different semesters. This results in data redundancy.
Additionally, if the value in one field is to be updated, the same value has to be
updated in multiple rows for that student. Otherwise, it would lead to data
inconsistency across rows.
To reduce redundancy and eliminate inconsistency in a table, you can break a
complex table into simple and related tables. For example, you can break down
the Student table and store student data, such as names and addresses in a table
called Student Details and the grades in another table called Performance.
When a database has related tables, it means that two or more tables contain one
or more fields that are related to each other by one or more common fields. For
example, each record in the Student Details table has a StudentID field that is
related to the StudentID field in the Performance table.
Slide Objective
To provide an overview of
database architecture.
Lead-in
A database is a collection of
data that you can sort,
search, add to, edit, and
print when required.
6 Module 1: Displaying Data from a Database


Interacting with Databases
!
To display records of all the employees in the Employee
table

!
To update Anne Austin’s telephone number
!
To delete the record of John Smith
SELECT * FROM Employee
SELECT * FROM Employee
UPDATE Employee
SET Phone="425-101-9000“
WHERE FirstName="Anne" AND LastName="Austin"
UPDATE Employee
SET Phone="425-101-9000“
WHERE FirstName="Anne" AND LastName="Austin"
DELETE Employee
WHERE FirstName="John" AND LastName="Smith"
DELETE Employee
WHERE FirstName="John" AND LastName="Smith"


A relational database is a collection of related tables from which data can be
accessed. To access data in relational databases, you use structured query
language (SQL). SQL allows you to specify the data to be accessed in the form
of queries. A query is an English-like statement sent by a client to the server. A
query allows you to retrieve or update data in a database. The server processes
the query, retrieves the data, and sends it back to the client.
Displaying records from a table
Consider the example of a database that contains records of all the employees in
an organization stored in the Employee table. To obtain a list of all the
employees in the organization, you can write the following SQL statement:
SELECT * FROM Employee

In the preceding code, the SELECT statement displays all the records in the
Employee table, because the asterisk (*) indicates all records.
Updating records in a table
Consider a situation where an employee, Anne Austin, changes her telephone
number. In this situation, you have to update a field in a record of the Employee
table. For this, you will use the UPDATE statement as shown in the following
code:
UPDATE Employee
SET Phone="425-101-9000"
WHERE FirstName="Anne" AND LastName="Austin"

Slide Objective
To identify the queries used
to interact with database.
Lead-in
In order to retrieve
information from a relational
database, you use queries.
Module 1: Displaying Data from a Database 7


Deleting records from a table
Consider a situation where an employee, John Smith, resigns. His record should
be deleted from the Employee table. To do this, you use the DELETE
statement as shown in the following code:
DELETE Employee
WHERE FirstName="John"
AND LastName="Smith"

8 Module 1: Displaying Data from a Database

Demonstration: Tour of the Sample Web Site


Fergusson and Bardell Inc. is a medium-sized IT solutions company based in
New York. With an increase in the number of its employees, it is becoming
difficult for the company to disseminate information, such as company policies,
employee performance data, and personnel information and policies, to the
employees. Also, the company is concerned about accidental disclosure of
confidential information due to the amount of sensitive, paper-based documents
in circulation.
The company wants to create a centralized system for disseminating
information to its employees. The Internal Communications department
recommended that they create an intranet site that will be accessible only to the
employees of the company. They also proposed that this should be a data-
driven site that would allow employees to retrieve and update data, such as
addresses and phone numbers. A decision was taken to create an intranet site
for the company in which all company policies and employee information
would be posted and from which the employees could access the information
they need.
During the course of this workshop, you will create an intranet site for
Fergusson and Bardell.
This demonstration takes you on a tour of a sample intranet site for a fictitious
company called Fergusson and Bardell Inc. In this demonstration, you will
focus on the PERSONNEL DATA link to retrieve detailed information for an
employee. The PERSONNEL DATA link connects you to the PERSONNEL
DATA page, which shows the information for each employee in the database
results page. A hyperlink is created on the database results page, which links to
the detail results page. The detail results page displays the information for a

given employee.
Slide Objective
To introduce the
demonstration of the sample
intranet site for Fergusson
and Bardell Inc.
Lead-in
This demonstration takes
you on a tour of the sample
intranet site.
Delivery Tip
Demonstrate the features of
the sample site, and also
demonstrate the part that
they would be creating at
the end of the module.

Ask students to read the
questions in the student
workbook and identify
answers to the questions as
they watch the
demonstration.

After the demonstration,
review the questions and
their answers.
Module 1: Displaying Data from a Database 9

Before you start this demonstration, you must:
1. Create a one-page web under http://localhost/1932/Sampsite.
2. When you get a message asking if we want to replace Home Page, click No.
3. In FrontPage, on the Tools menu, click Web Settings. In the dialog box,
click the Database tab. Select the Network database and click the Verify
button.
4. Close the dialog box.
5. Open Internet Explorer and type
http://localhost/1932/Sampsite/default.htm in the Address bar to view the
sample intranet site.


1. In the site navigation bar, click Personnel Data to view the personnel data
for all employees. The personnel information page displays.
a. Click Laura to access the personnel data for this employee. The
personnel information for Laura is displayed.
b. If you wish to edit Laura's personnel record, scroll down in the right
frame and click the I WANT TO MODIFY MY PERSONNEL DATA
link.
The Edit Your Data form appears. Type the employee code for Laura as
5 in the empcode field, and then click Submit Query.
c. Laura's personnel data appears in a table with fields that can be edited.
Once you edit the fields you wish to change, click Submit to display the
update page.
d. In the navigation bar, click Personnel Data, and then click Laura to
access the personnel data for this employee. Point out to the students that
the information has been updated.
2. In the navigation bar, click Quarterly Reports to view the quarterly
performance of the company.

Important
10 Module 1: Displaying Data from a Database


#
##
#

Retrieving Data from a Database
!
Demonstration: Importing a Database to the Current
Web
!
Demonstration: Connecting to a Database by Using
Database Results Wizard
!
Demonstration: Displaying Selective Records from a
Table
!
Demonstration: Setting the Sort Order and Limiting
Records
!
Demonstration: Displaying Data as a List


Retrieving data from a database involves the following steps:
1. Importing the database to the current Web.
2. Establishing a connection with the database.
3. Displaying data from the database.

FrontPage 2000 provides an easy way to create the Web pages that incorporate
useful information from a variety of data sources. Using FrontPage, you can
create Web pages that collect or display data dynamically without extensive
database or programming skills. FrontPage uses Active Server Pages (ASP),
which is a server-side scripting environment, to create dynamic Web pages.
FrontPage allows you to collect, store, and retrieve information from databases.
To access a database from within a FrontPage-based application, you need to
connect to a database using the Database Results Wizard.
Slide Objective
To identify how to retrieve
records from a database.
Lead-in
FrontPage 2000 provides
capabilities that help you to
retrieve information from
databases.
Module 1: Displaying Data from a Database 11


Demonstration: Importing a Database to the Current Web


Importing a database into FrontPage is a simple procedure to establish a
connection between a Web server and a database application. While creating a
Web site using FrontPage, you import required files or folders into the current
Web. This makes the files easily available to the current Web. This holds true
for databases as well. When you import the database that you want to use,
FrontPage places a copy of the database in your Web.

Slide Objective
To demonstrate the
procedure for importing a
database to the current
Web.
Lead-in
To make a database readily
available to the current
Web, you import a database
to the current Web.
Delivery Tip
Demonstrate the procedure
for importing a database to
the current web.

Ask students to follow you
while you demonstrate the
steps.
12 Module 1: Displaying Data from a Database


!
Import a database to the current Web:
1. Create a new one-page Web under http://localhost/1932/Democode/Myweb.
2. On the File menu, click Import.
The Import dialog box has the following buttons:
• Add File
Use this button to import a file, such as .mdb, .ppt, .xls, or .txt files to
the current Web.

• Add Folder
Use this button to import a folder to the current Web.
• From Web
Use this button to import a file or folder from a Web site.
3. Click Add File, to open the Add File to Import List dialog box.
4. Select Inventory.mdb from \Inetpub\wwwroot\1932\Democode\Mod01,
and then click Open.
5. Click OK to import the file into your current Web.
When you import an .mdb file, FrontPage prompts you to create a new
database connection and asks you to specify a name for this connection. The
name that you specify for the database is added to the list of available
databases.
6. Name the database connection as Inventory, and then click Yes.
When you import a database into your Web, FrontPage prompts you to save
it in a folder named fpdb. Then, FrontPage assigns special permissions to
this folder so that the folder cannot be viewed in a Web browser. To ensure
the privacy of your database, you should save it in the fpdb folder.
7. Click Yes to save the database in the fpdb folder.