Post on 30-Dec-2015
©2001-2003 Michelle C. Heckman All Rights Reserved. v6.0
DreamweaverDreamweaver
“UltraDev”“UltraDev”CS125UDF
This course qualifies as a CAS Web Master Related Elective
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Dynamic ContentDynamic Content
Non-static content placed in an html page
Various types of contentText Images - jpg, gif, swf, etc.SoundForm 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 ContentDynamic Content
Data SourcesColumn in a recordset (from a field in a
database)Value submitted by HTML formValue contained in a server object, such as
environment variables (browser type, time/date, etc.)
Cookie valuesCertification fieldsSession variables
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Dynamic ContentDynamic Content
Possible placement:At the insertion pointReplace 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 ContentDynamic 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
Add links to move through the records one at a time
Create a repeat region to display more than one record
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Dynamic ContentDynamic Content
Can also be used to:Update / Delete records in a databaseCreate a visitor log-in applicationRestrict access to a pageRedirect user to another page
Install additional server behaviors from Dreamweaver Extensions
Write your own server behaviors JavaScriptVBScript
JavaColdFusion
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Dreamweaver - DynamicDreamweaver - 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 - DynamicDreamweaver - 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 - DynamicDreamweaver - 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/DatabasesInterfacing w/Databases
BrowserBrowser WebServer
WebServer
App Server
App Server
JDBC Interface
ODBC Interface
OLE-DB Interface for ODBC(database driver/provider)
ASP OLE-DB Object Linking & EmbeddingColdFusion ODBC Open DataBase ConnectivityJSP JDBC JavaDataBase Connectivity
ODBCInterface
AccessSQLDB2Oracleetc.
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Dreamweaver - DynamicDreamweaver - Dynamic
Typical system configurations for ASP with Microsoft Access Databases:
System Web Server App Server Database DriverWin 95, 98, NT Workstation
PWS running locally
PWS running locally
MS Access
Win NT Server, Win 2000
IIS running locally
IIS running locally
MS Access
Macintosh IIS running remotely
IIS running remotely
MS Access
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF
Sam
e
Interfacing w/DatabasesInterfacing w/Databases
BrowserBrowser WebServer
WebServer
App Server
App Server
ODBC Data Source Administrator
Production (live data server)
AccessDatabase
MS WindowsDevelopment System - Testing Server
System DSN
C:\Inetpub\wwwroot
C:\where-ever...
BrowserBrowser WebServer
WebServer
App Server
App Server
ODBC Data Source Administrator
AccessDatabase
Http://www…….
Q:\where-ever...
System DSN
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring WindowsConfiguring 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 WindowsConfiguring Windows
Add - Select the MS Access Driver (*.mdb)
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring WindowsConfiguring Windows
Enter System Data Source Name (“nickname”)
Select database (identify path)
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring Configuring Dreamweaver 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 Configuring Dreamweaver Dreamweaver
Open Applications Panel
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring Configuring DreamweaverDreamweaver
Select Basic tab
Type name of site Next >>
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring Configuring DreamweaverDreamweaver
Yes, Use server technology Select type (ASP VBScript) Next >>
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring Configuring DreamweaverDreamweaver
Edit & test locally Select site in Inetpub/wwwroot Next >>
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring Configuring DreamweaverDreamweaver
If necessary, type in the path to the site Test the connection Next >> No > Done
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring Configuring DreamweaverDreamweaver
Select Site > New Site
Complete Local Info: Site Name: MySite
“address-book name” Local Root Folder:
C:\Inetpub\wwwroot\websitelocation of local development web site
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring Configuring DreamweaverDreamweaver
Complete Remote Info: Access: None
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring Configuring DreamweaverDreamweaver
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 Exercise OneOne 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 UltraDevConfiguring 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 UltraDevConfiguring UltraDev
If DSN is not created you’ll have to select: Custom
Connection String
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Configuring UltraDevConfiguring 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 Recap. . . So far, we (must)(must) havehave
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 (C:\
MyDocuments\database)
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Recap. . . So far, we Recap. . . So far, we (must)(must) havehave
In UltraDev, defined the web siteWeb 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 Recap. . . So far, we (must)(must) havehave
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 TerminologyDatabase 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 TerminologyDatabase 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 RecordsetsRecordsets
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 Recordsets & Data BindingsBindings
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
CS125UDF RecordsetsRecordsets
SIMPLE RecordsetsCan 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
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
RecordsetsRecordsets
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Dreamweaver Working Dreamweaver Working EnvironmentEnvironment
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 Dreamweaver Dynamic Working EnvironmentWorking 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
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 possibleAdjust page layoutAdd, edit, delete dynamic contentAdd, edit or delete server behaviors
Dreamweaver Dynamic Dreamweaver Dynamic Working EnvironmentWorking Environment
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF
Exercise Exercise TwoTwo 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 FlowWeb Site & Data Flow
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
DataData
Resultspagelink
Detailspage
Searchpage
submit
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
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 RecordsetsRecordsets
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
CS125UDF RecordsetsRecordsets
SIMPLE Recordsetsincludes data from ONE table Name
nickname Connection
to specific database Table
select desired database table
Fieldsall / selected
Filtersfieldcriteria
Sortfieldascend/descend
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Recordsets - Recordsets - FilteringFiltering
Restricts Record selection Field to be used in the criteria
more than 1 field requires Advanced
Comparison Operatorequalsgreater thanless than greater than or equalless than or equalnot equal (greater or less)begins withends withcontains
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Recordsets - Recordsets - FilteringFiltering
Restricts Record selection Comparison Value Source
URL ParameterForm VariableCookieSession VariableApplication VariableEntered Value
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Recordsets - Recordsets - FilteringFiltering
Restricts Record selection Comparison Value
SourceEntered Valueset by the programmertype in value in Value (next) box
restricted to set value
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Web Site & Data FlowWeb Site & Data Flow
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 may be less secure - data visible in URL URL has finite limit for # of characters
DataData
Resultspagelink
Detailspage
Searchpage
submit
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Web Site & Data FlowWeb Site & Data Flow
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 Use URL Parameter
DataData
Resultspagelink
Detailspage
Searchpage
submit
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Recordsets - FilteringRecordsets - Filtering
Restricts Record selection Comparison Value
SourceCookieSession variableApplication variable
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Recordsets - SortingRecordsets - Sorting
Orders the Record selection Sort Field
select from thefields present in the recordset
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Recordsets - SortingRecordsets - Sorting
Orders the Record selection Order
Ascending low-high, A-ZorDescendinghigh-low, Z-A
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
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
CS125UDF RecordsetsRecordsets
ADVANCED Recordsets - SQL Which data
SELECT Which table
FROM How filtered
WHERE Sort order
ORDER BY
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
ADVANCED Recordsets - SQL SQL Variables &
Default values
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
ADVANCED Recordsets - SQL Data Tree Buttons
SelectWhereOrder By
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
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 RecordsetsRecordsets
Editing a recordset double-click recordset name in bindings panel, make changes in dialog box
Deleting a recordsetselect the recordset in the bindings panel, click “-”
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
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 RecordsetsRecordsets
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 RecordsetsRecordsets
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 RecordsetsRecordsets
Repeating Dynamic data in an HTML page Note: the Server Behavior
that is added
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
Creating a Dynamic Table
Insert > Application Object > Dynamic Table
Repeat region included “automatically”
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Recordsets Recordsets NavigationNavigation
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 Recordsets Navigation Navigation StatusStatus
Insert a Recordset Navigation Status
Insert > Application Object > Recordset Navigation Status
Text Records 10 to 15 of 35
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Web Site & Data FlowWeb Site & Data Flow
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 may be less secure - data visible in URL URL has finite limit for # of characters
DataData
Resultspagelink
Detailspage
Searchpage
submit
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Web Site & Data FlowWeb Site & Data Flow
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 Use URL Parameter
DataData
Resultspagelink
Detailspage
Searchpage
submit
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
Live Data Settings(LiveData Toolbar)Allows you to set the default settings
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF RecordsetsRecordsets
Live Data Settings Dialog Box
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Go To Detail PageGo To Detail Page
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
DataData
Masterpagelink
Detailspage
Searchpage
submit
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Go To Detail PageGo To Detail Page
Results/Master links to a Detail Page
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Web Site & Data FlowWeb Site & Data Flow
Master – Detail Page Set
DataData
Masterpagelink
Detailspage
Searchpage
submit
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Master – Detail Page SetMaster – Detail Page Set
Master – Detail Page Set
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Go To Related PageGo 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 PageGo To Related Page
Initial page links to a Related Page
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF
DataData
Web Site & Data FlowWeb Site & Data Flow
User
Administrator
Detailspage
Searchpagesubmit
Resultspagelink
Updatepagesubmit
Insertpagesubmit
DELIN
UP
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Web Site & Data FlowWeb Site & Data Flow
Details page – also provides links for the 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
DataData
Detailspage
Searchpage
submit
Resultspagelink
Updatepage
submit
Insertpage
submit
DELIN
UP
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Input PageInput 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
Record Insertion Form (Live Objects)
Create a new page with a recordset assigned From the Insert toolbar – select Record Insertion
Formor: Insert > Application Object > Record Insertion FormCreates an array of fields, on a web page Inserts recordsRedirects users to the home page
Adding an Insert pageAdding an Insert page
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF
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 listedfield namescreen labeldisplay typedata type
Adding an Insert pageAdding an Insert page
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Adding an Insert pageAdding an Insert page
Record Insertion Form Dialog Boxfield namescreen labeldisplay typedata type
Editable:screen label “Label” display type “Display As”data type “Submit As”
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Adding an Insert pageAdding an Insert page
Record Insertion Form Dialog BoxAdd +Delete -Up arrow –
move up in the listDown arrow –
move down in the list Default Value
specifiedbound to dynamic data
Server variable Field from different
data table etc.
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF Adding an Insert pageAdding an Insert page
© 2001-2003 Michelle C. Heckman v6.0
CS125UDF
Exercise Exercise ThreeThree 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 Exercise FourFour 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