©2001-2003 Michelle C. Heckman All Rights Reserved. v6.0 Dreamweaver “UltraDev” CS125UDF This...

©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



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



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.



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



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


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



Allows the creation of Active Server pages (asp and asp.net) ColdFusion applications (cfm) JavaServer Pages (jsp) PHP



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


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.



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


CS125UDF

Sam

e

Interfacing w/DatabasesInterfacing w/Databases


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...


WebServer

App Server

App Server

ODBC Data Source Administrator

AccessDatabase

Http://www…….

Q:\where-ever...

System DSN


CS125UDF Configuring WindowsConfiguring Windows

Start > Settings > Control Panel > ODBC Data Sources

Windows 2000: ODBC Data Sources - found in Administrative Tools

System DSN tab



Add - Select the MS Access Driver (*.mdb)



Enter System Data Source Name (“nickname”)

Select database (identify path)


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


CS125UDF Configuring Configuring Dreamweaver Dreamweaver

Open Applications Panel


CS125UDF Configuring Configuring DreamweaverDreamweaver

Select Basic tab

Type name of site Next >>



Yes, Use server technology Select type (ASP VBScript) Next >>



Edit & test locally Select site in Inetpub/wwwroot Next >>



If necessary, type in the path to the site Test the connection Next >> No > Done



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



Complete Remote Info: Access: None



Complete Testing Server: Server Model: ASP VBScript Access: Local/Network Testing Server Folder: C:\Inetpub\wwwroot\

cosmo_root\ URL Prefix: http://localhost/cosmo_root/


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.


CS125UDF Configuring UltraDevConfiguring UltraDev

Complete web pages-to-database connection: Select the Database tab in the Application

panel Select “+” and Data Source Name



If DSN is not created you’ll have to select: Custom

Connection String



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


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)



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)



Configured UltraDev to connect the web site with the database (called connCosmo, used DSN definition in Windows)


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


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


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


CS125UDF Recordsets & Data Recordsets & Data BindingsBindings

Like other data sources, Recordsets are bound to the web page through the Bindings panel Window > DataBindings Add (+)



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


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


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


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


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


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


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



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



Add recordset to an open page Using the Recordset Button

Insert bar, Application tab Insert > Application Object > Recordset Binding Panel “+” Button

(Application group)



SIMPLE Recordsetsincludes data from ONE table Name

nickname Connection

to specific database Table

select desired database table

Fieldsall / selected

Filtersfieldcriteria

Sortfieldascend/descend


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



Restricts Record selection Comparison Value Source

URL ParameterForm VariableCookieSession VariableApplication VariableEntered Value



Restricts Record selection Comparison Value

SourceEntered Valueset by the programmertype in value in Value (next) box

restricted to set value



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



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


CS125UDF Recordsets - FilteringRecordsets - Filtering

Restricts Record selection Comparison Value

SourceCookieSession variableApplication variable


CS125UDF Recordsets - SortingRecordsets - Sorting

Orders the Record selection Sort Field

select from thefields present in the recordset


CS125UDF Recordsets - SortingRecordsets - Sorting

Orders the Record selection Order

Ascending low-high, A-ZorDescendinghigh-low, Z-A



ADVANCED Recordsets(or recordsets requiring data from more than one table)

SQL Which data Which table How filtered Sort order



ADVANCED Recordsets - SQL Which data

SELECT Which table

FROM How filtered

WHERE Sort order

ORDER BY



ADVANCED Recordsets - SQL SQL Variables &

Default values



ADVANCED Recordsets - SQL Data Tree Buttons

SelectWhereOrder By



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



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 “-”



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}



Formatting Dynamic data to the page Once selected, formatting

available to the right in the binding panel



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



Repeating Dynamic data in an HTML page Note: the Server Behavior

that is added



Creating a Dynamic Table

Insert > Application Object > Dynamic Table

Repeat region included “automatically”


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


CS125UDF Recordsets Recordsets Navigation Navigation StatusStatus

Insert a Recordset Navigation Status

Insert > Application Object > Recordset Navigation Status

Text Records 10 to 15 of 35



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



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



Live Data Settings(LiveData Toolbar)Allows you to set the default settings



Live Data Settings Dialog Box


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


CS125UDF Go To Detail PageGo To Detail Page

Results/Master links to a Detail Page



Master – Detail Page Set

DataData

Masterpagelink

Detailspage

Searchpage

submit


CS125UDF Master – Detail Page SetMaster – Detail Page Set

Master – Detail Page Set


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


CS125UDF Go To Related PageGo To Related Page

Initial page links to a Related Page


CS125UDF

DataData

Web Site & Data FlowWeb Site & Data Flow

User

Administrator

Detailspage

Searchpagesubmit

Resultspagelink

Updatepagesubmit

Insertpagesubmit

DELIN

UP



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


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.


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


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


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”



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.


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


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

©2001-2003 Michelle C. Heckman All Rights Reserved. v6.0 Dreamweaver “UltraDev” CS125UDF This...

Documents

Transcript of ©2001-2003 Michelle C. Heckman All Rights Reserved. v6.0 Dreamweaver “UltraDev” CS125UDF This...