Download CS125UDF - heckman.net

Dreamweaver
“UltraDev”
CS125UDF
©2001-2003 Michelle C. Heckman
All Rights Reserved.
v6.0
This course qualifies as a CAS Web Master Related Elective
CS125UDF
Dynamic Content
Non-static content placed in an html
page
Various types of content
Text
Images - jpg, gif, swf, etc.
Sound
Form objects - checkboxes, radio buttons, list
menu, etc.
“Other” object parameters
Plug-in parameters, Java applet parameters and parameters
of Flash objects, ActiveX, Shockwave, Director and Generator
objects
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Dynamic Content
Data Sources
Column in a recordset (from a field in a
database)
Value submitted by HTML form
Value contained in a server object, such as
environment variables (browser type, time/date,
etc.)
Cookie values
Certification fields
Session variables
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Dynamic Content
Possible placement:
At the insertion point
Replace a text string
Insert it in an HTML attribute, such as:
 the SRC attributes of an image tag
 the height/width attribute of an embed tag
 the value attributes of a form field
 In principle, any HTML attribute may be “bound”
to dynamic content.
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Dynamic Content
Once the data source is selected,
Dreamweaver inserts a server-side script in
the page’s source code
Server is instructed to insert the content
from the data source into the page’s source
HTML default is to display one record at a
time
© 2001-2003
Michelle C. Heckman
v6.0
Add links to move through the records one at a
time
Create a repeat region to display more than one
record
CS125UDF
Dynamic Content
Can also be used to:
Update / Delete records in a database
Create a visitor log-in application
Restrict access to a page
Redirect user to another page
Install additional server behaviors from
Dreamweaver Extensions
Write your own server behaviors
JavaScript
VBScript
© 2001-2003
Michelle C. Heckman
v6.0
Java
ColdFusion
CS125UDF
Dreamweaver - Dynamic
Professional editor for creating &
managing web sites
Specifically adds the ability to design web
pages that interact with server-side
databases
Customizable - create your own objects,
commands and server behaviors
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Dreamweaver - Dynamic
Allows the creation of
 Active Server pages (asp and asp.net)
 ColdFusion applications (cfm)
 JavaServer Pages (jsp)
 PHP
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Dreamweaver - Dynamic
In addition to Dreamweaver, you need:
 A Web Server
 An Application Server
note: some web servers double as application servers
 IIS, for Windows NT or 2000
 PWS for Windows NT or 2000
 A database with appropriate database driver
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Interfacing w/Databases
Browser
Web
Server
App
Server
JDBC Interface
ODBC Interface
OLE-DB Interface for ODBC
(database driver/provider)
ODBC
Interface
ASP
OLE-DB
ColdFusion ODBC
JSP
JDBC
© 2001-2003
Michelle C. Heckman
v6.0
Object Linking & Embedding
Open DataBase Connectivity
JavaDataBase Connectivity
Access
SQL
DB2
Oracle
etc.
CS125UDF
Dreamweaver - Dynamic
Typical system configurations for ASP
with Microsoft Access Databases:
© 2001-2003
Michelle C. Heckman
v6.0
System
Win 95, 98, NT
Workstation
Web Server
PWS running
locally
App Server
Database Driver
PWS running MS Access
locally
Win NT Server,
Win 2000
Macintosh
IIS running
locally
IIS running
remotely
IIS running
locally
IIS running
remotely
MS Access
MS Access
CS125UDF
Interfacing w/Databases
MS Windows
Development System - Testing Server
C:\Inetpub\wwwroot
Browser
Web
Server
ODBC Data Source Administrator
C:\where-ever...
App
Server
Http://www…….
Browser
Web
Server
Same
Production (live data server)
Access
Database
System DSN
ODBC Data Source Administrator
Q:\where-ever...
© 2001-2003
Michelle C. Heckman
v6.0
App
Server
System DSN
Access
Database
CS125UDF
Configuring Windows
 Start > Settings > Control Panel >
ODBC Data Sources
Windows 2000:
ODBC Data
Sources - found
in Administrative
Tools
 System DSN tab
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring Windows
 Add - Select the MS Access Driver (*.mdb)
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring Windows
 Enter System Data Source Name (“nickname”)
 Select database (identify path)
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring Dreamweaver
Setting up Dreamweaver
 Create a new local folder to hold your development
web site
 Create the “remote” folder to hold your published web
site
If using a local web server (PWS or IIS) - |
it actually resides in the Web Server directory:
C:\Inetpub\wwwroot
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring Dreamweaver
Open
Applications
Panel
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring Dreamweaver
Select Basic tab
© 2001-2003
Michelle C. Heckman
v6.0
Type name of site
Next >>
Configuring Dreamweaver
CS125UDF

© 2001-2003
Michelle C. Heckman
v6.0
Yes, Use server technology
Select type (ASP VBScript)
Next >>
Configuring Dreamweaver
CS125UDF

© 2001-2003
Michelle C. Heckman
v6.0
Edit & test locally
Select site in Inetpub/wwwroot
Next >>
Configuring Dreamweaver
CS125UDF

© 2001-2003
Michelle C. Heckman
v6.0
If necessary, type in the path to the site
Test the connection
Next >> No > Done
CS125UDF
Configuring Dreamweaver
Select Site > New Site
Complete Local Info:
 Site Name: MySite
“address-book name”
 Local Root Folder:
C:\Inetpub\wwwroot\website
location of local development web site
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring Dreamweaver
Complete Remote Info:
 Access: None
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring Dreamweaver
 Complete Testing Server:
 Server Model: ASP VBScript
 Access: Local/Network
 Testing Server Folder: C:\Inetpub\wwwroot\cosmo_root\
 URL Prefix: http://localhost/cosmo_root/
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Exercise One
 Copy the folder cosmo_root, from
G:/faculty/web/ultradev to C:\Inetpub\wwwroot\
 Test the PWS by opening
http://localhost/cosmo_root/ in a browser
 Set up a Site definition - text pg 624-626
 Copy the database, cosmofarmer.mdb, to a new
folder you create in: C:/MyDocuments/yourname
 Set up the DSN in Windows: Start >
Settings > Control Panel > ODBC Data Sources
- follow text pg 629-630.
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring UltraDev
Complete web pages-to-database
connection:
 Select the Database tab in the Application panel
 Select “+” and Data Source Name
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring UltraDev
If DSN is not created you’ll have to
select:
 Custom
Connection
String
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Configuring UltraDev
Complete database connection:
 In the dialog box name the connection
it is customary to start the name with “conn” to aid
in identification.
 Select the DSN Name from the drop down choices
 Select OK
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recap. . . So far, we (must)
have
 Created a database
(perhaps a test version)
 “Obtained” both a web server and an application
server
(both functions may be satisfied with either IIS or PWS for
Windows machines)
 In Windows, set up a database driver
(MS Access
driver *.mdb)
and assigned a data source name (DSN)
(CosmoClassifieds)
and pointed it to the database
© 2001-2003
Michelle C. Heckman
v6.0
(C:\MyDocuments\database)
CS125UDF
Recap. . . So far, we (must)
have
In UltraDev, defined the web site
Web Site location: local
(in the Web Server folder
C:\Inetpub\wwwroot\cosmo_root\)
Application Server location
(web server doubling as application server,
C:\Inetpub\wwwroot\)
and type (ASP VBScript)
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recap. . . So far, we (must)
have
Configured UltraDev to connect the web
site with the database (called connCosmo, used DSN
definition in Windows)
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Database Terminology
Databases consist of collections of
information, called tables, each with a
unique name
Records are collections of related data
items, presented as rows in the table
Each item, is called a field, presented as a
column cell in the row
A recordset is a subset of the database
data, extracted from one or more tables,
based on a query of search criteria,
‘bound’ to a specific web page
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Database Terminology
SQL, Structured Query Language, is a
common language for writing commands
to extract data from a relational database.
Dreamweaver allows you to write SQL
directly, but it also “creates” SQL based on
the answers to dialog box questions
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
 EACH dynamic web PAGE works with a
recordset – a subset of the data in extracted
from the database
 Keep them small – the server temporarily holds
the recordset in memory
 Defined by a query – a statement of search
criteria to find and extract information
 Can be created by using the Recordset dialog
box or directly in SQL using the advanced
Recordset dialog box
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets & Data Bindings
Like other data sources,
Recordsets are bound to
the web page through
the Bindings panel
 Window > DataBindings
 Add (+)
© 2001-2003
Michelle C. Heckman
v6.0
Recordsets
CS125UDF
 SIMPLE Recordsets
Can be created by using
the Recordset dialog box
or
 ADVANCED Recordsets
(or recordsets requiring data
from more than one table)
Directly in SQL using the
advanced Recordset
dialog box
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Can be defined by a stored procedure
(one or more SQL statements stored in the database)
Stored procedures can return one or more
recordsets (or none) – Dreamweaver only
supports stored procedures
that return ‘none’ or one recordset
Invoked on the Advanced Recordset dialog
box
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Dreamweaver Working
Environment
Viewing & Working on Documents
 Preview in Browser (F12)
 Code View
 Code View & Design View
(split window)
 Document window Design View
 Live Data window Design View
displays page with dynamic data, “runs” through the
application server
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Dreamweaver Dynamic
Working Environment
Document window Design View
 Traditional Dreamweaver editing window
 Displays page before dynamic content added
 Dynamic content represented by placeholders
ie. {Results.LASTNAME} - Results recordset and
LASTNAME field
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Dreamweaver Dynamic
Working Environment
Live Data window Design View
 Displays actual dynamic content
 If page expects data from the user – you can provide
the page with that data in the Live Data Setting
Dialog box
 Editing is possible
Adjust page layout
Add, edit, delete dynamic content
Add, edit or delete server behaviors
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Exercise Two
 Establishing the connection - pg 632-633
 Creating a Recordset – pg. 670 - 672
 Formatting Dynamic Info – pg. 673 - 674
 Live Data View & Repeating Regions –
pg. 675 - 676
 Editing a Recordset & Linking to detail page – pg.
677 – 679
 Building a detail page – pg. 680 – 683
 Filling in the details – pg. 683 - 685
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Web Site & Data Flow
Search
page
submit
Results
page
link
Details
page
Data
© 2001-2003
Michelle C. Heckman
v6.0
Search page – lets users find product info by
supplying one or more search criteria in an HTML
form
Results page – displays in abbreviated form the
information that meets the criteria – where each
item is a link to get the details
Details page – gives detailed item information
CS125UDF
Recordsets
A recordset
is a subset of the database data
 extracted from one or more tables
 based on a query of search criteria
 which can be sorted (on an included field)
 and is ‘bound’ to a specific web page
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Add recordset to an open page
 Using the Recordset Button
Insert bar, Application tab
 Insert > Application Object > Recordset
 Binding Panel “+” Button
(Application group)
© 2001-2003
Michelle C. Heckman
v6.0
Recordsets
CS125UDF
 SIMPLE Recordsets
includes data from ONE table
 Name
nickname
 Connection
to specific database
 Table
select desired
database table
 Fields
all / selected
 Filters
field
criteria
 Sort
© 2001-2003
Michelle C. Heckman
v6.0
field
ascend/descend
CS125UDF
Recordsets - Filtering
Restricts Record selection
 Field to be used in the criteria
more than 1 field requires Advanced
 Comparison Operator
equals
greater than
less than
greater than or equal
less than or equal
not equal (greater or
less)
begins with
ends with
contains
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets - Filtering
Restricts Record selection
 Comparison Value Source
URL Parameter
Form Variable
Cookie
Session Variable
Application Variable
Entered Value
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets - Filtering
Restricts Record selection
 Comparison Value
Source
Entered Value
set by the programmer
type in value in
Value (next) box
restricted to set value
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Web Site & Data Flow
Search
page
submit
Results
page
link
Details
page
Data
Search page – form values are sent with POST or
GET as the form METHOD parameter
-- identifies how the data is packaged
 POST packages data in request body
generally preferred
more secure
less browser work
 GET packages the data in the URL Request
© 2001-2003
Michelle C. Heckman
v6.0
may be less secure - data visible in URL
URL has finite limit for # of characters
CS125UDF
Web Site & Data Flow
Search
page
submit
Results
page
link
Details
page
Data
Search page – form values are sent with
POST or GET as the form parameter -identifies how the data is packaged
 POST packages data in request body
Use Form Variable
 GET packages the data in the URL Request
© 2001-2003
Michelle C. Heckman
v6.0
Use URL Parameter
CS125UDF
Recordsets - Filtering
Restricts Record selection
 Comparison Value
Source
Cookie
Session variable
Application variable
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets - Sorting
Orders the Record selection
 Sort Field
select from the
fields present in
the recordset
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets - Sorting
Orders the Record selection
 Order
Ascending
low-high, A-Z
or
Descending
high-low, Z-A
© 2001-2003
Michelle C. Heckman
v6.0
Recordsets
CS125UDF
ADVANCED Recordsets
(or recordsets
requiring data
from more than
one table)
SQL
 Which data
 Which table
 How filtered
 Sort order
© 2001-2003
Michelle C. Heckman
v6.0
Recordsets
CS125UDF
ADVANCED Recordsets - SQL
 Which data
SELECT
 Which table
FROM
 How filtered
WHERE
 Sort order
ORDER BY
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
ADVANCED Recordsets - SQL
 SQL Variables &
Default values
© 2001-2003
Michelle C. Heckman
v6.0
Recordsets
CS125UDF
ADVANCED Recordsets - SQL
 Data Tree
 Buttons
Select
Where
Order By
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
A recordset
is a subset of the database data
 extracted from one or more tables
 based on a query of search criteria
 which can be sorted (on an included field)
 and is ‘bound’ to a specific web page
Reuse recordsets when appropriate!
 Select the recordset in the binding panel, Edit > copy
 Open new page, click in bindings panel, Edit > paste
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Editing a recordset
double-click recordset name in bindings
panel, make changes in dialog box
Deleting a recordset
select the recordset in the bindings panel,
click “-”
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Adding Dynamic data to the page
 place your insertion point on the page
 select the field in the recordset (bindings panel)
 Click “Insert” button
 Placeholder appears
when NOT in
LiveData Mode
{recordsetName.fieldName}
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Formatting Dynamic data to the page
 Once selected, formatting
available to the right in
the binding panel
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Repeating Dynamic data in an HTML
page
 Select the region to be repeated
Usually a whole row/set of data
 Click on the Repeat Region button in the Insert toolbar
 Type number of
records to display
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Repeating Dynamic data in an HTML
page
 Note: the Server Behavior
that is added
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Creating a Dynamic Table
 Insert > Application Object > Dynamic Table
 Repeat region included “automatically”
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets Navigation
Allows users to identify where they “are”
in the recordset
Allows users to navigate forward (and
back) in the recordset
Insert a Recordset Navigation Bar
 Insert > Application Object > Recordset Navigation Bar
 Text
First Previous Next Last
 Graphics
   
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets Navigation Status
Insert a Recordset Navigation Status
 Insert > Application Object > Recordset Navigation
Status
 Text
© 2001-2003
Michelle C. Heckman
v6.0
Records 10 to 15 of 35
CS125UDF
Web Site & Data Flow
Search
page
submit
Results
page
link
Details
page
Data
Search page – form values are sent with POST or
GET as the form METHOD parameter
-- identifies how the data is packaged
 POST packages data in request body
generally preferred
more secure
less browser work
 GET packages the data in the URL Request
© 2001-2003
Michelle C. Heckman
v6.0
may be less secure - data visible in URL
URL has finite limit for # of characters
CS125UDF
Web Site & Data Flow
Search
page
submit
Results
page
link
Details
page
Data
Search page – form values are sent with
POST or GET as the form parameter -identifies how the data is packaged
 POST packages data in request body
Use Form Variable
 GET packages the data in the URL Request
© 2001-2003
Michelle C. Heckman
v6.0
Use URL Parameter
CS125UDF
Recordsets
Live Data Settings
(LiveData Toolbar)
Allows you to set the default settings
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Recordsets
Live Data Settings Dialog Box
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Go To Detail Page
Search
page
submit
Master
page
link
Details
page
Data
Results/Master links to a
Detail Page
Select text/graphic to be the link
Go To Detail Page Server Behavior
Pass Info for filtering records
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Go To Detail Page
Results/Master links to a
Detail Page
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Web Site & Data Flow
Search
page
submit
Master
page
link
Details
page
Data
Master – Detail Page Set
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Master – Detail Page Set
Master – Detail Page Set
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Go To Related Page
Initial page links to a Related Page
Select text/graphic to be the link
Go To Related Page Server Behavior
Select Info to pass for filtering records
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Go To Related Page
Initial page links to a Related Page
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Web Site & Data Flow
User
Search
page
submit
Results
page
link
Details
page
DEL
IN
Update
page
UP
Data
Insert
page
submit
 Administrator
© 2001-2003
Michelle C. Heckman
v6.0
submit
CS125UDF
Web Site & Data Flow
Search
page
submit
Results Details
page
page
IN
link DEL UP
Data
Update
page
submit
Insert
Details page –
page
also provides links for the
submit
Administrator to delete the current
record and link to update & insert pgs
Update page – allows administrators to update
records via an online form
Insert page – allows administrators create a new
record using an on line form
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Input Page
Needs to gather the data to create a
new record for the database
Two options:
 Use Dreamweaver’s object to create “standard” input
page
 Create formatted html page and add labels and form
objects, matching field names and setting values.
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Adding an Insert page
Record Insertion Form
(Live Objects)
 Create a new page with a recordset assigned
 From the Insert toolbar – select Record Insertion Form
or: Insert > Application Object > Record Insertion Form
Creates an array of fields, on a web page
Inserts records
Redirects users to the home page
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Adding an Insert page
Record Insertion Form Dialog Box
 After identifying the connection and the table to
insert the record into, all of the data fields and their
type are listed
field name
screen label
display type
data type
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Adding an Insert page
Record Insertion Form Dialog Box
field name
screen label
display type
data type
© 2001-2003
Michelle C. Heckman
v6.0
Editable:
screen label “Label”
display type “Display As”
data type “Submit As”
CS125UDF
Adding an Insert page
Record Insertion Form Dialog Box
Add +
Delete Up arrow –
move up in the list
Down arrow –
move down in the list
Default Value
specified
bound to dynamic data
© 2001-2003
Michelle C. Heckman
v6.0
 Server variable
 Field from different
data table
 etc.
CS125UDF
© 2001-2003
Michelle C. Heckman
v6.0
Adding an Insert page
CS125UDF
Exercise Three
 Adding an insert page - pg 708 - 713
 Finishing the form – pg. 713 – 714
 Linking to an update page – pg. 716 - 717
 Creating an update page – pg. 718 - 722
 Creating & linking to a Delete page –
pg. 722 - 725
© 2001-2003
Michelle C. Heckman
v6.0
CS125UDF
Exercise Four
 Build a log-in page - pg 748 - 751
 Password protecting pages – pg. 751 – 753
 Display portions of pages to logged in users –
pg. 754 - 755
© 2001-2003
Michelle C. Heckman
v6.0