CS125UDF - heckman.net
Download
Report
Transcript 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