© Michelle C. Heckman All Rights Reserved. v6.0 Dreamweaver “UltraDev” CS125UDF This course qualifies as a CAS Web Master Related Elective

© Michelle C. Heckman v6.0 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

© 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

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

© 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  Add links to move through the records one at a time  Create a repeat region to display more than one record

© Michelle C. Heckman v6.0 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  Java  ColdFusion

© Michelle C. Heckman v6.0 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

© 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

© 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

© 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) ASP OLE-DB Object Linking & Embedding ColdFusion ODBC Open DataBase Connectivity JSP JDBC JavaDataBase Connectivity ODBC Interface Access SQL DB2 Oracle etc.

© Michelle C. Heckman v6.0 CS125UDF Dreamweaver - Dynamic  Typical system configurations for ASP with Microsoft Access Databases:

© Michelle C. Heckman v6.0 CS125UDF Same Interfacing w/Databases Browser Web Server App Server ODBC Data Source Administrator Production (live data server) Access Database MS Windows Development System - Testing Server System DSN C:\Inetpub\wwwroot C:\where-ever... Browser Web Server App Server ODBC Data Source Administrator Access Database Q:\where-ever... System DSN

© Michelle C. Heckman v6.0 CS125UDF Configuring Windows  Start > Settings > Control Panel > ODBC Data Sources  Windows 2000: ODBC Data Sources - found in Administrative Tools  System DSN tab

© Michelle C. Heckman v6.0 CS125UDF Configuring Windows  Add - Select the MS Access Driver (*.mdb)

© Michelle C. Heckman v6.0 CS125UDF Configuring Windows  Enter System Data Source Name (“nickname”)  Select database (identify path)

© 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

© Michelle C. Heckman v6.0 CS125UDF Configuring Dreamweaver  Open Applications Panel

© Michelle C. Heckman v6.0 CS125UDF Configuring Dreamweaver  Select Basic tab  Type name of site  Next >>

© Michelle C. Heckman v6.0 CS125UDF Configuring Dreamweaver  Yes, Use server technology  Select type (ASP VBScript)  Next >>

© Michelle C. Heckman v6.0 CS125UDF Configuring Dreamweaver  Edit & test locally  Select site in Inetpub/wwwroot  Next >>

© Michelle C. Heckman v6.0 CS125UDF Configuring Dreamweaver  If necessary, type in the path to the site  Test the connection  Next >> No > Done

© Michelle C. Heckman v6.0 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

© Michelle C. Heckman v6.0 CS125UDF Configuring Dreamweaver  Complete Remote Info:  Access: None

© 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:

© 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 in a browser  Set up a Site definition - text pg  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

© 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

© Michelle C. Heckman v6.0 CS125UDF Configuring UltraDev  If DSN is not created you’ll have to select:  Custom Connection String

© 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

© 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 (C:\MyDocuments\database)

© Michelle C. Heckman v6.0 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)

© 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)

© 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

© 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

© 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

© 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 (+)

© Michelle C. Heckman v6.0 CS125UDF Recordsets  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

© 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 Recordsets

© 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

© 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

© 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 possible  Adjust page layout  Add, edit, delete dynamic content  Add, edit or delete server behaviors Dreamweaver Dynamic Working Environment

© Michelle C. Heckman v6.0 CS125UDF Exercise Two  Establishing the connection - pg  Creating a Recordset – pg  Formatting Dynamic Info – pg  Live Data View & Repeating Regions – pg  Editing a Recordset & Linking to detail page – pg. 677 – 679  Building a detail page – pg. 680 – 683  Filling in the details – pg

© Michelle C. Heckman v6.0 CS125UDF Web 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 Data Results page link Details page Search page submit

© 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

© 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)

© Michelle C. Heckman v6.0 CS125UDF Recordsets  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 field ascend/descend

© Michelle C. Heckman v6.0 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

© 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

© 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

© Michelle C. Heckman v6.0 CS125UDF Web 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 Data Results page link Details page Search page submit

© Michelle C. Heckman v6.0 CS125UDF Web 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 Data Results page link Details page Search page submit

© Michelle C. Heckman v6.0 CS125UDF Recordsets - Filtering  Restricts Record selection  Comparison Value Source Cookie Session variable Application variable

© Michelle C. Heckman v6.0 CS125UDF Recordsets - Sorting  Orders the Record selection  Sort Field select from the fields present in the recordset

© Michelle C. Heckman v6.0 CS125UDF Recordsets - Sorting  Orders the Record selection  Order Ascending low-high, A-Z or Descending high-low, Z-A

© Michelle C. Heckman v6.0 CS125UDF Recordsets  ADVANCED Recordsets (or recordsets requiring data from more than one table) SQL  Which data  Which table  How filtered  Sort order

© Michelle C. Heckman v6.0 CS125UDF Recordsets  ADVANCED Recordsets - SQL  Which data SELECT  Which table FROM  How filtered WHERE  Sort order ORDER BY

© Michelle C. Heckman v6.0 CS125UDF Recordsets  ADVANCED Recordsets - SQL  SQL Variables & Default values

© Michelle C. Heckman v6.0 CS125UDF Recordsets  ADVANCED Recordsets - SQL  Data Tree  Buttons Select Where Order By

© 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

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

© 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}

© Michelle C. Heckman v6.0 CS125UDF Recordsets  Formatting Dynamic data to the page  Once selected, formatting available to the right in the binding panel

© 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

© Michelle C. Heckman v6.0 CS125UDF Recordsets  Repeating Dynamic data in an HTML page  Note: the Server Behavior that is added

© Michelle C. Heckman v6.0 CS125UDF Recordsets  Creating a Dynamic Table  Insert > Application Object > Dynamic Table  Repeat region included “automatically”

© 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 FirstPreviousNext Last  Graphics    

© Michelle C. Heckman v6.0 CS125UDF Recordsets Navigation Status  Insert a Recordset Navigation Status  Insert > Application Object > Recordset Navigation Status  TextRecords 10 to 15 of 35

© Michelle C. Heckman v6.0 CS125UDF Web 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 Data Results page link Details page Search page submit

© Michelle C. Heckman v6.0 CS125UDF Web 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 Data Results page link Details page Search page submit

© Michelle C. Heckman v6.0 CS125UDF Recordsets  Live Data Settings (LiveData Toolbar) Allows you to set the default settings

© Michelle C. Heckman v6.0 CS125UDF Recordsets  Live Data Settings Dialog Box

© Michelle C. Heckman v6.0 CS125UDF Go 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 Data Master page link Details page Search page submit

© Michelle C. Heckman v6.0 CS125UDF Go To Detail Page  Results/Master links to a Detail Page

© Michelle C. Heckman v6.0 CS125UDF Web Site & Data Flow  Master – Detail Page Set Data Master page link Details page Search page submit

© Michelle C. Heckman v6.0 CS125UDF Master – Detail Page Set  Master – Detail Page Set

© 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

© Michelle C. Heckman v6.0 CS125UDF Go To Related Page  Initial page links to a Related Page

© Michelle C. Heckman v6.0 CS125UDF Data Web Site & Data Flow  User  Administrator Details page Search page submit Results page link Update page submit Insert page submit DEL IN UP

© Michelle C. Heckman v6.0 CS125UDF Web 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 Data Details page Search page submit Results page link Update page submit Insert page submit DEL IN UP

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

© 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 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 Adding an Insert page

© 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 listed  field name  screen label  display type  data type Adding an Insert page

© Michelle C. Heckman v6.0 CS125UDF Adding an Insert page  Record Insertion Form Dialog Box  field name  screen label  display type  data type  Editable:  screen label “Label”  display type “Display As”  data type “Submit As”

© Michelle C. Heckman v6.0 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  Server variable  Field from different data table  etc.

© Michelle C. Heckman v6.0 CS125UDF Adding an Insert page

© Michelle C. Heckman v6.0 CS125UDF Exercise Three  Adding an insert page - pg  Finishing the form – pg. 713 – 714  Linking to an update page – pg  Creating an update page – pg  Creating & linking to a Delete page – pg

© Michelle C. Heckman v6.0 CS125UDF Exercise Four  Build a log-in page - pg  Password protecting pages – pg. 751 – 753  Display portions of pages to logged in users – pg