IntroductionWelcome| 00:00 | (Music playing.)
| | 00:05 | Welcome to Dreamweaver CS4 Dynamic
Development. Hi! I'm David Gassner. I've
| | 00:10 | used my background as an Adobe
certified developer of ColdFusion and
| | 00:14 | Dreamweaver to put together a course
that shows you how to use the latest
| | 00:17 | development functions of Dreamweaver
CS4 to improve your website without having
| | 00:21 | to do the heavy lifting of a programmer.
That's right. It can be easier now to
| | 00:26 | make your site look more professional.
| | 00:28 | In the course, I describe the process
of using Dreamweaver CS4 to integrate
| | 00:33 | websites with two major application
servers, ColdFusion and PHP, so you have the
| | 00:38 | tools to access and present
dynamic data on your web pages.
| | 00:42 | I also described how to use the Spry
framework, a set of Ajax based tools to
| | 00:47 | present XML based data and to add cool
visual effects to a web page. You will
| | 00:52 | also see how you can build and test your
dynamic web pages with more speed and ease.
| | 00:57 | These are all functions that you can
do using the code that's in Dreamweaver.
| | 01:00 | So you don't need to know JavaScript
or cascading style sheets to get the
| | 01:04 | results you want for your website.
However, to get the most out of this course
| | 01:08 | I'd suggest a basic understanding of
Dreamweaver CS4. You will find a course
| | 01:12 | for that here on lynda.com.
| | 01:14 | Now, let's get started with
Dreamweaver CS4 Dynamic Development.
| | Collapse this transcript |
| Series overview| 00:00 | This video series, Dreamweaver CS4
Dynamic Development, is an update to the
| | 00:04 | Dreamweaver CS3 version of the same
course. I teach how to use Dreamweaver CS4
| | 00:09 | to build dynamic web pages. That is,
web pages that integrate data from dynamic
| | 00:14 | applications servers and from XML
formatted data using the Spry framework.
| | 00:18 | This video series focuses on two
applications servers, Adobe ColdFusion and
| | 00:23 | PHP. Here is what's in the series.
In the first chapter, I describe the
| | 00:27 | relationship between web browsers,
web servers, applications servers and
| | 00:31 | databases. How they all work together to
create and present dynamic web applications.
| | 00:36 | I then show how to define a
Dreamweaver site associated with your choice of
| | 00:40 | applications server. Throughout the
video series you will be able to choose
| | 00:43 | between ColdFusion and PHP using the
application server that you prefer.
| | 00:48 | How to use two major features of Dreamweaver
called bindings and server behaviors.
| | 00:52 | These are tools that generate server
side and client side code to get data from
| | 00:57 | your server side database and
present it using a combination of HTML,
| | 01:01 | JavaScript, and cascading style sheets.
| | 01:04 | I'll show you how to build data
entry systems that allow you to collect
| | 01:07 | information from your users and how
to authenticate the users using an
| | 01:11 | application server and a database.
| | 01:13 | I'll show you how to use this Spry
framework, a set of Ajax tools that are used
| | 01:18 | for validating data entry forms,
presenting data that's formatted in XML and
| | 01:23 | to layer web pages so that you can
reveal or hide different parts of a web page
| | 01:27 | automatically. These are all things
that you could build yourself in your web
| | 01:30 | pages using a combination of
JavaScript and cascading style sheets.
| | 01:35 | But the Spry framework contains
prebuilt behaviors that you can leverage
| | 01:39 | easily and Dreamweaver CS4 will
generate all the code you need so you won't
| | 01:43 | need to know how to write the
JavaScript or cascading style sheets code.
| | 01:47 | Here is what you need to know a little
bit of before you get started. It's a
| | 01:50 | good idea to have some
understanding of Dreamweaver CS4, not much.
| | 01:54 | But understanding the basics of how to
create a website and how to create a web
| | 01:57 | page are good. It's also good to
know a little bit about databases and
| | 02:01 | applications servers. Although I'll be
covering most of the basics during this series.
| | 02:05 | But here is what you don't need to know.
You don't have to be a programmer to
| | 02:09 | be able to use this skills taught in
this video series. I'll be working with
| | 02:13 | the code that's generated by
Dreamweaver and only occasionally will I go into
| | 02:17 | the code and make any manual tweaks.
| | 02:19 | The goal of this video series is to
teach you how to implement these skills
| | 02:23 | using the tools that Dreamweaver CS4
gives you. If you know something about PHP
| | 02:28 | or ColdFusion markup language, you can
extend to these capabilities, but again,
| | 02:32 | those are not required.
| | 02:34 | Here are some other helpful titles.
Dreamweaver CS4 Essential Training is a new
| | 02:38 | video series from lynda.com that
covers the basics of the new release of
| | 02:43 | Dreamweaver. Also useful if you
want to go further with the application
| | 02:46 | servers are ColdFusion 8 Essential
Training, which is my own video series, and
| | 02:51 | PHP Essential Training. Both of these
video series focus on the programming
| | 02:55 | side of using these application servers.
| | 02:58 | So if you have done what you can with
Dreamweaver CS4 and you want to learn how
| | 03:02 | to do more with the application servers,
those two video series can be very helpful.
| | Collapse this transcript |
| Using ASP and ASP.NET with Dreamweaver| 00:00 | As I mentioned in the previous video,
this video series describes how to
| | 00:04 | integrate Dreamweaver CS4 with PHP and
ColdFusion. I don't cover integration
| | 00:09 | with Microsoft's application servers:
active server pages, also known sometimes
| | 00:14 | as Classic ASP, or ASP.NET, the
newer web technology from Microsoft.
| | 00:19 | If you want to learn how to
integrate Dreamweaver with these application
| | 00:22 | servers, here are some video titles you
might be interested in. Dreamweaver CS3
| | 00:27 | Dynamic Development, which I authored
in the previous version of Dreamweaver,
| | 00:31 | contains information on
integration with ASP.NET.
| | 00:35 | Dreamweaver CS3 and CS4 only integrate
with ASP.NET 1.1, whereas ASP.NET itself
| | 00:42 | has moved up to version 3.5 and in
fact, Adobe has announced that future
| | 00:46 | versions of Dreamweaver will not
add new tools for ASP.NET integration.
| | 00:51 | However, the tools that are included
with Dreamweaver are valuable if you are
| | 00:54 | working with ASP.NET and so if you
want to learn how to use those tools, go
| | 00:58 | back to this older version of the title.
| | 01:01 | For developers working with active
server pages known sometimes as Classic ASP,
| | 01:06 | you might want to look at this older title,
Dreamweaver MX 2004 Dynamic Development with ASP.
| | 01:12 | This video series is specific to the
world of active server pages and covers
| | 01:17 | some of the issues that are unique to the
world of working with that application server.
| | 01:21 | Dreamweaver CS4 does contain updated
features for ASP. I just don't cover them
| | 01:26 | in this video series. But it's worth
mentioning that nearly all of the tools
| | 01:30 | that I described how to use with
ColdFusion and PHP in the series also apply to
| | 01:35 | the world of active server pages.
| | Collapse this transcript |
| Installing the exercise files| 00:00 | Just a quick word about the
exercise files we'll be using. If you are a
| | 00:03 | premium member of the lynda.com online
training library or if you are watching
| | 00:08 | this tutorial on a disc, you have access to
the exercise files used throughout this title.
| | 00:13 | In the exercise files folder, I have
collected some assets for you to use
| | 00:17 | during our tour of Dreamweaver CS4
PHP, ColdFusion and other dynamic
| | 00:21 | technologies. They include graphics, a
database script and other text files for
| | 00:26 | use in the sample
websites that I'll be creating.
| | 00:29 | I have copied the folder to my desktop,
but you can put it wherever you want.
| | 00:33 | To get started with the video series,
you will need to follow the instructions
| | 00:36 | in Chapter 2 where I describe how to
install the software and database that
| | 00:40 | you'll need, whether you'll be
working with ColdFusion or PHP.
| | 00:44 | In Chapter 3, I describe how to define
a Dreamweaver site for use with PHP and
| | 00:48 | in Chapter 4 I describe how to
complete the same tasks with ColdFusion. From
| | 00:52 | that point forward, you can choose to
work through the entire video series or
| | 00:56 | if you would like to jump in at a
particular point you can use the solution files.
| | 01:00 | In the solutions folder there are
number of sub-folders. Each of these folders
| | 01:05 | contains the state of the sample
website for one of the application servers
| | 01:09 | after a particular chapter has been
completed. For example, if you want to
| | 01:13 | start with Chapter 6, copy the contents
of the Chapter 5 solution files to your
| | 01:17 | website folder and start from there.
| | 01:19 | If you are a monthly or annual
subscriber to lynda.com, you don't have access to
| | 01:24 | the exercise files, but you could
easily follow along the instructions and
| | 01:27 | demonstrations on the screen and
create any files you want for your own
| | 01:31 | exercise website. Let's get started.
| | Collapse this transcript |
|
|
1. Understanding Browsers, Servers, and DatabasesStatic vs. dynamic web pages| 00:00 | Before I describe how you can use
Dreamweaver CS4 to generate dynamic web
| | 00:04 | applications, I'm going to describe the
basic architecture of the world wide web.
| | 00:08 | The web includes clients and servers
connected together over what we know as the Internet.
| | 00:15 | The Internet uses a technology called
TCP/IP and requests and responses are
| | 00:19 | sent between these clients and servers
using a variety of protocols. Classic
| | 00:24 | web pages are requested and received
over the Internet using a protocol called
| | 00:29 | Hyper Text Transfer
Protocol, also known as HTTP.
| | 00:33 | The HTTP protocol allows requests to be
sent from a browser and responses to be
| | 00:39 | sent from a server. On a personal
computer, to participate in the web you need
| | 00:43 | a web browser. Common web browsers
include Internet Explorer, Firefox, Safari,
| | 00:49 | Chrome and Opera. And then there are
many proprietary browsers available.
| | 00:54 | You can also make requests for web
resources over devices such as cell phones.
| | 00:59 | When a request is sent over the web,
it's received by a computer running a
| | 01:03 | piece of software called an HTTP server.
| | 01:06 | Common versions of this HTTP server
software include Internet Information
| | 01:11 | Services or IIS used on Windows, or
Apache, a free HTTP server product that can
| | 01:18 | be installed on many operating systems,
including Windows, Mac, Linux and many others.
| | 01:23 | And then just as with browsers,
there are proprietary solutions from various vendors.
| | 01:29 | When you build a static website
using Dreamweaver or any other tool,
| | 01:33 | you deliver static files to your web
server. These files commonly have a file
| | 01:38 | extension of .HTM or .HTML and they are
saved as text files on the web server's
| | 01:44 | disc. When the browser makes a
request for a static web page, it sends this
| | 01:48 | request over the HTTP protocol. The
request is received by the web server and
| | 01:53 | the web server retrieves the file
from its server disc. It then returns the
| | 01:57 | HTML files content, which is pure text,
over the HTTP connection to the browser.
| | 02:03 | When you work in dynamic pages, the
architectures are little bit different. The
| | 02:07 | first part works the same; the
browser makes the request over HTTP and it's
| | 02:11 | received by the server. But now
instead of directly opening a text file from
| | 02:16 | its disc, the HTTP server dispatches
the request to a piece of software known
| | 02:20 | as an application server.
| | 02:22 | The application server receives and
interprets the request and it executes a
| | 02:26 | script, which might have references
to a database or other server-side
| | 02:31 | resources. After doing its work, it
then generates response in the form of
| | 02:35 | HTML. This generated HTML is then sent
back to the browser over the HTTP connection.
| | 02:41 | From the browser's point of view it's
receiving HTML that looks exactly the
| | 02:45 | same as in a static environment. It has
no sense that there is a dynamic server
| | 02:50 | on the backend and so as long as the
application server generates well-formed
| | 02:54 | HTML that can be interpreted by the browser,
then the application works as expected.
| | 03:00 | Here are the available application
servers that you can choose from in your
| | 03:03 | environment. Adobe's ColdFusion has a
long history, as one of the earliest
| | 03:08 | implementations of application
servers for the web. It's available on many
| | 03:12 | operating systems including Windows,
Mac, Linux and Solaris. And you can
| | 03:18 | download and install a free
developers edition of ColdFusion for free.
| | 03:22 | Although deployment of ColdFusion
does require a license fee. You can also
| | 03:26 | choose PHP. PHP is a completely free
open source application server software
| | 03:32 | package. You can download and
install PHP on any of its supported operating
| | 03:35 | systems. Again, including
Windows, Mac, Linux and many others.
| | 03:41 | PHP is commonly paired with the MySQL
database server. You can also choose
| | 03:46 | Microsoft's active server pages,
known these days as the Classic ASP.
| | 03:51 | While Microsoft doesn't directly support
ASP anymore, in favor of its newer technology ASP.NET,
| | 03:57 | ASP is still very commonly used
especially by Dreamweaver users because
| | 04:02 | Dreamweaver CS4 has very strong
support for this technology. In fact, if you
| | 04:06 | are a Dreamweaver user, these first
three technologies are the most strongly
| | 04:10 | recommended, ColdFusion, PHP or ASP,
because these are the technologies that
| | 04:16 | Adobe continues to build
functionality for and will continue to support.
| | 04:20 | There is also support in Dreamweaver
CS4 for Microsoft's newer technology,
| | 04:25 | ASP.NET, but it's important to note
that Adobe has announced they will no
| | 04:28 | longer add new features for ASP.NET
support. And in fact, the current version
| | 04:34 | of Dreamweaver only supports ASP.NET 1.1
while the ASP.NET technology has moved
| | 04:39 | on since then to version 3.5 and added
a lot of new features and architectures
| | 04:44 | that Dreamweaver doesn't understand.
| | 04:47 | And for Java developers, you can choose
among the different J2EE servers, such
| | 04:51 | as WebSphere, WebLogic, JBoss or
Tomcat. Adobe's own J2EE server, JRun, has
| | 04:58 | actually been discontinued and Adobe
has announced they will no longer do
| | 05:02 | development on that server.
| | 05:04 | If you want to use Java, I do recommend
the free products JBoss or Tomcat. But
| | 05:09 | once again as with ASP.NET, Adobe
has announced that future versions of
| | 05:13 | Dreamweaver will not add new features
for support of the Java based servers.
| | 05:18 | You can also select other application
server technologies when building a dynamic
| | 05:23 | application environment such as Perl
or other proprietary products, but those
| | 05:28 | products are not supported by Dreamweaver.
| | 05:30 | In this video series, I'll be
describing how to integrate Dreamweaver CS4 with
| | 05:35 | Adobe ColdFusion and PHP. I won't be
describing the use of ASP.NET or Java
| | 05:41 | based servers because Dreamweaver
won't be adding new features for those
| | 05:44 | technologies and I won't be describing
any other technologies because there is
| | 05:49 | no Dreamweaver support for those.
However, if you have ColdFusion, PHP or ASP,
| | 05:54 | this course will show you how to
build the applications on those platforms.
| | Collapse this transcript |
| Selecting an application server| 00:00 | Before building a dynamic web
application using Dreamweaver CS4, you first have
| | 00:04 | to select an application server.
Application server software runs on the server
| | 00:10 | and is responsible for receiving
request from the browser, processing scripts
| | 00:14 | and returning dynamically
generated HTML to the browser.
| | 00:18 | Here are some of the questions you
should ask. First of all, does your
| | 00:22 | organization already have an
investment in one of the supported application
| | 00:25 | server products? For example, if
your organization has a site license for
| | 00:29 | ColdFusion or a number of programmers
experienced in PHP those are factors that
| | 00:34 | would steer you through
those application servers.
| | 00:37 | You should also know which operating
system you will be using on your server.
| | 00:41 | If you are using Windows, you can
choose pretty much any application server. If
| | 00:45 | you are using Linux, Mac or some other
non-Windows environment, you will be a
| | 00:49 | little bit more limited. And you should
also know whether it's going to be okay
| | 00:53 | to pay license fees for your
application server software. In particular,
| | 00:57 | ColdFusion requires license fee while
the other application server products I
| | 01:01 | describe here are completely free or are
bundled with software that comes from Microsoft.
| | 01:06 | Here the application server products
that are supported by Dreamweaver. The
| | 01:11 | first three application servers that
are listed here, PHP, ColdFusion, and ASP,
| | 01:16 | are the most strongly recommended.
This is because these are the product that
| | 01:19 | Adobe currently maintains and fully
tests which each new Dreamweaver release.
| | 01:24 | There is existing support for ASP.NET
and J2EE servers, but that support has
| | 01:29 | not been fully tested by Adobe and in
fact, Adobe has indicated that future
| | 01:33 | versions of Dreamweaver may not include
support for these application servers.
| | 01:38 | If you need a completely free solution
and one that works equally well on all
| | 01:42 | operating systems, take a look at PHP.
| | 01:45 | PHP is a free open source application
server product, which you can download
| | 01:49 | and install in a number of ways.
It's most commonly paired with MySQL, a
| | 01:53 | database server which is free under
many circumstances. PHP is available on
| | 01:58 | most operating systems including
Windows, Mac and Linux and you can install it
| | 02:02 | either as an individual product paired
with an exiting Apache installation or
| | 02:07 | you can download and install a free
server bundle that includes a Apache,
| | 02:10 | the web server, MySQL, the database and
PHP the application server. During this
| | 02:16 | video series, I'll be describing the
use of WAMP, a server bundle for Windows
| | 02:20 | and MAMP, a server bundle for Mac. Both
WAMP and MAMP include all three servers
| | 02:26 | and supporting administrative applications.
| | 02:29 | Another option is ColdFusion.
ColdFusion was originally created in 1995 by a
| | 02:35 | company called Allaire. After a
couple of acquisitions it's now owned and
| | 02:39 | maintained by Adobe. It's available
for many operating systems once again,
| | 02:43 | including Windows, Mac, Linux, Solaris
and others. And unlike PHP, it works out
| | 02:49 | of the box with pretty much any
database you might need to use. For example,
| | 02:53 | all editions of ColdFusion include
drivers for MySQL, SQL server and Microsoft
| | 02:59 | Access and if you are using the more
advanced Enterprise Edition of ColdFusion,
| | 03:03 | there are also built-in drivers for Oracle,
DB2 and other enterprise level databases.
| | 03:09 | ColdFusion does require a license fee
if you want your own dedicated copy of
| | 03:13 | the server. But ColdFusion support is
also included by many ISPs with shared
| | 03:18 | hosting services. Of the
available application servers supported by
| | 03:22 | Dreamweaver, my favorites are PHP and
ColdFusion. PHP because it's completely
| | 03:28 | free and ColdFusion because its code,
that is, its programming language, is the
| | 03:32 | easiest to understand of any of these
software packages. If you want to use ASP
| | 03:38 | or ASP.NET, there are
couple of things to know about.
| | 03:41 | First of all, ASP or Active Server
Pages is Microsoft's older application
| | 03:46 | server product. It's integrated into
IIS but it must be explicitly installed in
| | 03:51 | IIS7. It uses two programming
languages that you can choose from, VBScript and
| | 03:57 | JScript, and it's important to know that
if you are installing ASP under IIS7 on
| | 04:03 | Windows Vista, there is a quite a bit
of special configuration you need to go
| | 04:06 | through to get it working correctly.
| | 04:09 | ASP.NET is Microsoft's newer web
application technology. It's a highly
| | 04:14 | object-oriented environment that
supports multiple programming languages.
| | 04:18 | A significant limitation of using ASP.
NET with Dreamweaver is that Dreamweaver
| | 04:22 | only supports ASP.NET 1.1 while the
ASP.NET product itself has evolved to
| | 04:28 | version 3.5 and Adobe has announced
they will not be upgrading ASP.NET support
| | 04:33 | in Dreamweaver in future releases.
For these reasons I don't cover ASP and
| | 04:38 | ASP.NET in these videos, but as I
mentioned in an earlier video there is
| | 04:42 | available training for ASP and ASP.NET
integration with Dreamweaver in earlier
| | 04:48 | video series from lynda.com.
| | Collapse this transcript |
| Selecting a database| 00:00 | Along with selecting an application
server you also need to choose a database
| | 00:04 | before you are building your web
application using Dreamweaver CS4. Here are
| | 00:08 | some of the questions you will need to
ask. First, what operating system are
| | 00:12 | you using to host the database? In many
cases the hardware that's used to host
| | 00:17 | the application server and
the database are the same.
| | 00:20 | In other cases, you can have a separate
machine for the application server from
| | 00:24 | the database. You will need to know
whether your database server will be based
| | 00:28 | on Windows, Linux or some other
operating system. You also need to know whether
| | 00:32 | you can pay license fees. Some of the
very powerful database servers such as
| | 00:37 | SQL Server, Oracle or DB2 can
involve significant license fees for web
| | 00:42 | deployment. Many of these databases
including SQL Server have free versions.
| | 00:47 | So you will need to know what your
parameters are, before you make the
| | 00:50 | selection. You will also need to know
generally how busy your web application
| | 00:54 | will be. By busy I'm talking about
the issue of scalability. How many
| | 00:59 | simultaneous users will be hitting
the database to retrieve or modify data?
| | 01:03 | Here are some of the common
databases used in the web. MySQL, SQL Server,
| | 01:09 | Oracle, DB2, Access and Apache Derby.
On the next slides I'll describe some of
| | 01:15 | the most common choices and their pros and cons.
| | 01:18 | Microsoft Access is available for
use on Windows based application server
| | 01:23 | environments. It's not a database
server instead Access database files are
| | 01:28 | addressed directly through the
application server. You use Microsoft Access on
| | 01:33 | your development system to create the
database structure and then optionally
| | 01:37 | you can see to your database with
initial data. You then upload the .mdb file
| | 01:43 | that's the database file to your
application server for production use.
| | 01:48 | Of the three application servers I'll
be describing in this video series Active
| | 01:52 | Server Pages or Classic ASP and
ColdFusion both work very well with Access. The
| | 01:58 | pros of Access include its ease of use.
It's easy to set up and it has a very
| | 02:03 | simple visual administration interface.
Also there are no license fees for web
| | 02:08 | deployment. You imply copy the MDB
file up to your server and you start
| | 02:12 | building your web application.
| | 02:13 | Access's cons include its scalability
and ease of use on the web. It's not easy
| | 02:20 | to manage in a web application. That is,
once you have upload the MDB file to
| | 02:24 | your web server, there is no automatic
visual interface available to change the
| | 02:28 | structure of the data. Also it's not a
database server and so the database file
| | 02:33 | itself has to be downloaded from the
server back to your development system if
| | 02:37 | you want to make any changes to the
database structure and finally, it's not
| | 02:41 | scalable. It's not designed
for busy multiuser applications.
| | 02:46 | If you are working on a Windows
environment and you want a very powerful
| | 02:50 | database server, you can try SQL Server
also from Microsoft. SQL Server is one
| | 02:55 | of the class of service know a
Enterprise Systems. It's suitable for use in
| | 03:00 | very large scale organizations and can
handle massive amounts of data depending
| | 03:05 | on what edition of the server you use.
| | 03:08 | As with Access, SQL Server works
very easily with Active Server Pages and
| | 03:13 | ColdFusion. Its pros include that
there is a free version SQL Server 2005 or
| | 03:19 | 2008 Express that works very well with
small and medium scale websites. You can
| | 03:24 | also use SQL Server through hosted
services provided by ISPs and there is a
| | 03:29 | very easy and intuitive visual
administration tool provided by Microsoft for free.
| | 03:35 | The cons of SQL Server have to do with
resource requirements and license fees.
| | 03:40 | The server can be very resource
intensive depending on how much data is being
| | 03:44 | managed and in an ideal deployment it
should be hosted on its own separate
| | 03:48 | computer hardware separate from the
application server. This can of course,
| | 03:52 | increase the cost of deployment and if
you can't use the Express edition of SQL
| | 03:56 | Server there are significant license
fees involved if you want to deploy the
| | 04:00 | more powerful editions of
SQL Server on your website.
| | 04:05 | This brings us to MySQL, my
database of choice. MySQL is free for most
| | 04:10 | organizational uses. It's easy and
intuitive and unlike SQL Server it's
| | 04:15 | portable across operating systems.
MySQL provides a community edition that's
| | 04:21 | free to download and use. If you want
to bundle a MySQL database server with
| | 04:26 | your own commercial software there is
a license fee required for that. But if
| | 04:30 | you only need to use MySQL to host your
web-based application it's completely free.
| | 04:35 | MySQL works very well with PHP and
ColdFusion. It can be made to work with
| | 04:41 | Active Server pages but there are
drivers and additional code you would need to
| | 04:45 | implement that Dreamweaver doesn't
know how to generate. The pros of MySQL
| | 04:50 | include its scalability. It's a very
highly scalable database that can handle
| | 04:54 | massive amounts of data.
| | 04:56 | There are many easy visual
administration tools available both from MySQL and
| | 05:00 | from third parties and the memory usage
in MySQL can be scaled. So that you can
| | 05:05 | set up to use all available server
memory in an isolated dedicated environment
| | 05:10 | or you can scale down resource usage
when you want to use it on the same
| | 05:13 | hardware as your application server.
There aren't many cons to MySQL that I'm
| | 05:18 | aware of. In fact, for my money it's
the easiest, most portable database server
| | 05:23 | available and I'll be using it in both
the ColdFusion and the PHP sections of
| | 05:28 | this video series.
| | 05:30 | There are other databases available.
For example, in the enterprise database
| | 05:34 | class you could select ORACLE or IBM
DB2. Depending on the version of the
| | 05:39 | ColdFusion you have, you might be
able to hook up very easily to these
| | 05:42 | databases and Dreamweaver would be
able to generate dynamic web applications
| | 05:47 | for ColdFusion server
applications that use these databases.
| | 05:51 | If you want to use these other
enterprise databases with ASP or PHP though, you
| | 05:55 | will need to download additional
libraries and you probably won't be able to
| | 05:59 | generate code for those
applications on Dreamweaver. And then for the
| | 06:03 | ColdFusion crowd, there is also a Java-
based embedded database engine called
| | 06:07 | Apache Derby. ColdFusion 8 includes
the drivers for this database and all of
| | 06:12 | the sample applications included with
ColdFusion are now built in this database format.
| | 06:17 | Derby supports multiple operating
systems, so a database can move from Windows
| | 06:22 | to Mac without having to be re-
written and Apache Derby gives you great
| | 06:25 | performance. Just like the enterprise
databases there is no direct support for
| | 06:30 | a Apache Derby in ASP or PHP. But if
you are working with ColdFusion as your
| | 06:34 | application server it can
also make for a very good choice.
| | 06:38 | In this video series I'll be using
Microsoft Access for the sections on Active
| | 06:42 | Server Pages and MySQL for the
sections on ColdFusion and PHP.
| | Collapse this transcript |
|
|
2. Installing Required SoftwareIntroducing Apache, MySQL, and PHP| 00:00 | In the parts of this video series
where I demonstrate the use of Dreamweaver
| | 00:03 | CS4 with PHP, I'll be using a
software stack that includes the Apache HTTP
| | 00:09 | Server, the MySQL database server, and
PHP as the application server, and then
| | 00:14 | in the sections that use ColdFusion,
I'll also be using MySQL there. These
| | 00:19 | three software packages, Apache, MySQL, and
PHP, are commonly known as a software stack.
| | 00:26 | They have in common these
characteristics: they are all Open Source, they can
| | 00:30 | be used freely without paying a
license fee in most cases, and they are cross
| | 00:34 | operating system, meaning that they can
be installed in a variety of operating
| | 00:38 | systems such as Windows, Linux and Mac.
In this software stack, Apache is the
| | 00:43 | Htttp server, MySQL is the database
server and PHP is the application server.
| | 00:49 | Apache is a free HTTP server from the
Apache HTTP server project. As with the
| | 00:55 | other software packages, it's open
source and requires no license fees.
| | 00:59 | It's supported on many operating systems,
and worldwide it's the most popular HTTP
| | 01:04 | server. If you wanted to download and
install the Apache software isolated
| | 01:09 | from the other pieces of the
package, you would navigate to this url,
| | 01:13 | http://httpd.apache.org, and from
there you would be able to select and
| | 01:17 | download the appropriate version
of Apache for your operating system.
| | 01:20 | The MySQL database server is Open
Source and free once again, and it's
| | 01:27 | currently owned by Sun Microsystems,
which purchased MySQL a little while back.
| | 01:31 | For more info on MySQL, go to
www.mysql.com. There you will be able to locate
| | 01:38 | and download various versions of the
MySQL software, and install it separate
| | 01:42 | from the other packages. You can also
find some free utilities such as the
| | 01:46 | MySQL Administrator and Query Browser.
| | 01:50 | PHP, as I have mentioned previously,
is once again open source and free, and
| | 01:54 | it's important to note that the term
PHP is used to represent both a language
| | 01:59 | and the platform, the application
server itself. It's once again cross
| | 02:03 | operating system and for more
information on this package, go to www.php.net.
| | 02:10 | In this video series, I'll be using all
of these packages and the easiest way
| | 02:15 | to install them is to use one of the
available server bundles. Each of these
| | 02:19 | bundles includes Apache, MySQL and PHP,
pre-configured to work together and
| | 02:24 | setup for the specific operating
system. If you are working on Windows, you
| | 02:29 | want to get the software from
www.wampserver.com/en/. If you are working on
| | 02:36 | Mac, you will select Mamp, which
is available at www.mamp.info/en/.
| | 02:44 | Now in the next videos, I'll describe
exactly which edition of each software
| | 02:47 | package you need, and
how to do the installation.
| | Collapse this transcript |
| Installing WAMP on Windows| 00:00 | If you would like to work through the
exercise in this video series for either
| | 00:03 | PHP or ColdFusion, you'll need to
install the server stack that includes MySQL
| | 00:08 | and PHP. Even if you are working in
ColdFusion, I'll still be using the MySQL
| | 00:14 | version that's included with the server
stack. If you are working in ColdFusion
| | 00:18 | and you already have MySQL installed,
you can use that version of MySQL
| | 00:22 | instead. For Windows developers, I
recommend the WampServer product. This is a
| | 00:27 | free server bundle that you can
download without any registration or license
| | 00:31 | fee. Go to the url on the screen,
www.wampserver.com/en, and from there click
| | 00:39 | the Downloads link. Download the most
recent version of WampServer. Note the
| | 00:44 | warning on the screen. That if you have
an older version of WampServer already
| | 00:48 | installed, you should always
uninstall it and delete its directory before
| | 00:51 | installing this newer version.
| | 00:52 | Once you have downloaded the installer
executable to your system, you can start
| | 00:56 | it up. I have downloaded it to my
Desktop, so I'll double-click it. Then I'll
| | 01:01 | click Run to get started. Once again
you are warned about not trying to upgrade
| | 01:06 | from an older version of the product.
In the next screen, you simply click
| | 01:10 | through, take a look at the license
agreement and if you accept it, click the
| | 01:14 | appropriate radio button and Next.
Then indicate where you want to install
| | 01:17 | WampServer. The default location for
the WampServer is in a folder named wamp,
| | 01:22 | under the C drive root. I'll accept
that default location. If you decide to put
| | 01:28 | it somewhere else on your system, just make
any required adjustments in the later videos.
| | 01:33 | In the next screen, you are asked
whether you want certain icons, a Quick
| | 01:36 | Launch icon, and a Desktop icon. I'll
go ahead and add a Desktop icon, so that
| | 01:41 | I can easily start WampServer from my
Desktop, and click Next. Finally click
| | 01:46 | Install. The installation just takes a
few moments as files are copied over to
| | 01:51 | your system. The WampServer as
described previously, includes Apache, MySQL and
| | 01:57 | PHP. It also includes an easy
administrative interface that views in your
| | 02:03 | Windows system tray that allows you to
stop and start individual services, or
| | 02:07 | all of the services as a group. If your
system already has Firefox, you will be
| | 02:12 | asked whether you want to use that
as the default browser with wamp. I
| | 02:16 | typically use Firefox for all
of my testing, so I'll click Yes.
| | 02:22 | This screen asks for PHP mail
parameters. It requests an SMTP server that can
| | 02:27 | be used to send email, and an
email address that will be used as the
| | 02:31 | administrator email under Apache. If
you don't have this information, or you
| | 02:35 | simply don't want to use it, you can
leave this alone, or if you have this
| | 02:38 | information and understand how
it's used, fill in the information as
| | 02:42 | appropriate. Finally click Finish.
If you leave the option selected, the
| | 02:47 | WampServer will be started right away.
| | 02:49 | When you start the WampServer, it's
represented by an icon in your system tray.
| | 02:54 | The icon looks like a gauge, and if
it's all white that means everything
| | 02:58 | started up correctly. You can
click that icon, and you will see an
| | 03:02 | administrative menu pop up, and from
there you can click on Local Host. This
| | 03:07 | will take you to the Home Page of
your WampServer. You should see the
| | 03:10 | WampServer Home Page open, and down
towards the bottom some links to various
| | 03:15 | tools. For example, there is a tool
called phpMyAdmin, which we'll be using in
| | 03:20 | later exercises to manage your MySQL
server installation. If you click the
| | 03:25 | phpMyAdmin link, it will show you the
current state of the MySQL server. Other
| | 03:31 | options include many choices to stop
and start all services, or to stop and
| | 03:35 | start individual services
such as Apache and MySQL.
| | 03:40 | So that's a look to how to install
WampServer in your Windows environment.
| | 03:44 | Instead of installing Apache, PHP and
MySQL separately, you can install the
| | 03:48 | whole thing in a single process, and
then start and stop the servers all at the
| | 03:53 | same time. If you have any trouble with
this installation, or with starting up
| | 03:57 | the server, make sure that you don't
have any other Web servers running on your
| | 04:00 | system, such as Internet Information
Services. And if you do, all you have to
| | 04:05 | do is go into your services panel, shut
down Internet Information Services, and
| | 04:09 | then re-try starting the WampServer product.
| | 04:12 | Later on, to turn off the server, you
can go to the system tray, right-click on
| | 04:17 | the icon and select Exit and that
shuts down the entire server and all of its
| | 04:23 | components. To restart the server later on,
go to your Windows menu, locate the
| | 04:28 | Start WampServer menu icon and select
it and the server will start up again.
| | Collapse this transcript |
| Installing MAMP on Mac OS X| 00:00 | If you are working on Mac OS X, and
would like to go through the exercises
| | 00:04 | for either ColdFusion or PHP, you'll
need to install MySQL, and for the PHP
| | 00:09 | exercises, PHP. The easiest way to do
this is to install Mamp. Mamp is the full
| | 00:15 | server stack of Apache, MySQL and
PHP designed for Mac OS 10. Go to this
| | 00:20 | website, www.mamp.info/en. Go to the
bottom of the Home Page, and click the
| | 00:27 | Download now link. From the Downloads
page, click the link to download the most
| | 00:32 | recent version of Mamp. Notice that
both Mamp and Mamp Pro are delivered in a
| | 00:36 | single installer. I've already
downloaded the file to my website, and I'll
| | 00:41 | double-click it to start it. I'll
review the license agreement, and if you
| | 00:45 | agree with the license agreement, click Agree.
| | 00:48 | And then once the dmg file has been
expanded and mounted, you will be able to
| | 00:52 | execute the installation. To install
Mamp, simply click and drag the folder
| | 00:58 | labeled MAMP into the Applications
folder. It takes just a few moments to copy
| | 01:04 | everything over to the Applications
folder. Once the installation is complete,
| | 01:10 | go to your hard disk's Applications
folder, locate and open the Mamp folder,
| | 01:17 | and then locate and open the Mamp
application. The first time you run it, you
| | 01:22 | might see a warning that the
application was downloaded from the Internet.
| | 01:26 | Click Open to start the server. Once
the server has been successfully started,
| | 01:31 | you'll see that a browser navigates
to the Home Page. The Apache server
| | 01:36 | included with Mamp initially uses a
port number of 8888. There is also a custom
| | 01:41 | port associated with MySQL. Your
next step will be to modify these port
| | 01:46 | numbers, so that you are using the
standard port numbers that are expected with
| | 01:49 | these servers.
| | 01:50 | I'll close the browser and show you
that there is actually a Mamp application
| | 01:55 | running with a visible window. Your
servers only run as long as the Mamp
| | 02:00 | application is running. When you close
the application, you are closing down
| | 02:03 | your servers. To change the port
numbers for the servers, click Preferences,
| | 02:09 | then click the Ports tab, then click
Set to default Apache and MySQL ports, and
| | 02:16 | click OK. This causes the servers to
restart, and at this point you might be
| | 02:21 | prompted for your administrative
password. If so, enter the password, and then
| | 02:27 | watch the server indicators. The green
lights mean that the servers are ready
| | 02:31 | to use. Then click the Open Start Page
button, and the browser will re-open,
| | 02:37 | and you'll see that you are now using the
browser's default port, rather than the custom port.
| | 02:41 | Once you have started up Mamp
successfully, you will be able to navigate to
| | 02:45 | phpMyAdmin, which is the Web based
interface for managing MySQL. In later
| | 02:51 | videos, I'll talk about how to
install a database using the phpMyAdmin
| | 02:56 | interface, and I'll also talk about how
to connect to this copy of MySQL, both
| | 03:00 | from PHP and from ColdFusion.
| | Collapse this transcript |
| Installing the exercises database | 00:00 | Before working through the exercises
in this video series, you will need to
| | 00:04 | install an import and database into your
MySQL Installation. The exercise files
| | 00:09 | include an SQL file with commands to
set up the database structure and import
| | 00:14 | the data. The same database is used in
both the PHP and the ColdFusion segments
| | 00:19 | of the video series.
| | 00:21 | To import the database, go to the
Exercises folder and from there to a
| | 00:25 | sub-folder named Database. There you
will find the createdatabase.sql file.
| | 00:32 | I'll open the file in a text editor.
Notice that the file is designed to create
| | 00:37 | a database named dw_bookstore. It
contains five tables: Authors, Publishers,
| | 00:44 | States, Titles, and Users.
| | 00:48 | After creating the database structure,
a series of Insert commands is executed
| | 00:52 | to add data to the database. Here is
how you can use this SQL file to set up
| | 00:57 | your database using the phpMyAdmin
administrative application that's included
| | 01:02 | with WAMP and MAMP. To get to
phpMyAdmin from WAMP, go to the WAMP menu from
| | 01:08 | the system tray and select phpMyAdmin.
| | 01:12 | To get to the same application from
MAMP, go to the MAMP homepage and then
| | 01:17 | click the phpMyAdmin link. Click the
Import link at the bottom of the homepage.
| | 01:23 | In the Import screen, click the Browse
button. Now, navigate to the location of
| | 01:29 | the database SQL file. I'll go to my
Desktop, to the Exercises folder, to
| | 01:36 | database and I'll select createdatabase.sql.
Then I'll click the Go button in
| | 01:41 | the lower right corner of the Import
screen. It takes just a moment for the
| | 01:46 | import to succeed.
| | 01:48 | Notice in the top left corner, your new
database dw_bookstore has been created.
| | 01:53 | I'll click into the database and show
that there are five tables named Authors,
| | 01:58 | Publishers, and so on. These tables
are listed in the center screen in a grid
| | 02:03 | and I can click the Browse icon next to
any of the tables to see the data. I'll
| | 02:07 | click Browse next to Titles and that
opens the database table and shows the
| | 02:12 | contained data.
| | 02:13 | So if you have gotten this far and you
are able to see the data showing up in
| | 02:17 | phpMyAdmin, you are ready to go on
to the exercises for the particular
| | 02:21 | application servers, PHP or ColdFusion.
| | Collapse this transcript |
|
|
3. Defining a Site with PHP and MySQLSetting up the PHP exercise files| 00:00 | Before you setup a Dreamweaver site
associated with PHP, if you have access to
| | 00:05 | the Exercise Files that come with
this video series, you should copy the
| | 00:08 | Exercise Files into the web document
root for the Apache web server that's
| | 00:12 | included with either WAMP or MAMP.
| | 00:15 | Go to the Exercises Folder and you
will find a number of folders there
| | 00:18 | including this one, dwwithphp.
The dwwithphp folder contains two files,
| | 00:25 | index.php and styles.css, and an
Images folder containing a graphic.
| | 00:31 | Go back to the Exercises folder and
copy the dwwithphp folder to the clipboard.
| | 00:37 | In Windows Explorer on Windows or in
Finder on Mac, navigate to the document
| | 00:42 | root for your Apache server. If you
are using WAMP on Windows that will be
| | 00:46 | c:\wamp\www. And if you are working
with MAMP on Mac using the default
| | 00:54 | installation location, it's
/Applications/MAMP/htdocs. Paste that folder into
| | 01:03 | the document root of the server. You
now have a folder named dwwithphp under
| | 01:09 | your Apache web document root.
| | 01:11 | Now, I'm going to test the page in a
browser. Open your favorite browser.
| | 01:16 | I have opened Mozilla Firefox.
And navigate to the following URL,
| | 01:21 | http://localhost/dwwithphp. If the web
server, PHP and the exercise files have
| | 01:33 | been installed correctly, you will see
this web page displayed and as you will
| | 01:38 | see in later videos, this web page
combines literal HTML plus a couple of
| | 01:42 | dynamic PHP pages.
| | 01:45 | If the page looks like this, you know
that PHP is working correctly and you
| | 01:49 | are ready to move onto the next step,
defining a Dreamweaver site that's
| | 01:53 | associated with PHP.
| | Collapse this transcript |
| Defining a Dreamweaver site| 00:00 | If you have copied your files into
place under your PHP Apache server web root
| | 00:04 | folder, you are now ready to define a
Dreamweaver site that's associated with
| | 00:09 | PHP. Open Dreamweaver CS4, then go to
the menu and select Site > New Site.
| | 00:16 | The Site Definition dialog has
two tabs labeled Basic and Advanced.
| | 00:21 | The Basic tab walks you through step
by step in creating the site but the
| | 00:25 | Advanced tab gives you access to all
of the possible configurations for the
| | 00:29 | site and it's the one I prefer. Set the
site name to any string. The site name
| | 00:34 | can include spaces and special characters.
I'm going to name the site DW With PHP.
| | 00:40 | Now set the local root folder to the
dwwithphp folder under your web server
| | 00:45 | document root. Click the Browse
button and then navigate to your Apache web
| | 00:51 | server's document root folder. If you
are using WAMP with the default location
| | 00:56 | on Windows, go to c:/wamp/www. If you
are working with MAMP on Mac OS X with
| | 01:04 | the default location, go to
/Applications/mamp/htdocs.
| | 01:10 | From there double click into the
dwwithphp folder, and then click Select, and
| | 01:16 | that fills in the location of the
local root folder. You can also if you like
| | 01:21 | set up the default images folder. This
is the folder that will be browsed by
| | 01:25 | Dreamweaver when you try to insert an
image into a web page. Click the Browse
| | 01:29 | icon for the images folder, double
click into the images sub-folder under
| | 01:34 | dwwithphp, and click Select.
| | 01:37 | If you like you can add in the HTTP
address. This is an address that's used to
| | 01:42 | figure out site relative links and
it's used by the Link Checker to detect
| | 01:46 | broken links before you upload your
content to your production site. Set your
| | 01:50 | HTTP address as follows.
Starting with the http:// prefix, add
| | 01:55 | localhost/dwwithphp.
| | 02:01 | Now go to the category list and select
Testing Server. This is where you define
| | 02:05 | and configure your application server.
Pull down the list of available server
| | 02:10 | models and select PHP MySQL. Then pull
down the list next to Access and choose
| | 02:17 | Local/Network. Because your application
server is installed on the same system
| | 02:21 | that you are developing on, you will
access the testing server directly through
| | 02:25 | the file system.
| | 02:26 | The Testing Server folder should
automatically default to the same location as
| | 02:30 | your local root folder. Add some
information to the URL prefix. Its starts off
| | 02:35 | with http://localhost/ and once
again add in the name of the folder that
| | 02:41 | contains your site root, dwwithphp.
Then click OK to save your site definition.
| | 02:48 | You should see the Files panel up here.
Now I'm using the new Designer Compact
| | 02:52 | layout and so panels pop out from the
right side when they are relevant or when
| | 02:57 | I ask for them.
| | 02:59 | Notice that my site contains these
files: index.php, which is my website's
| | 03:04 | homepage, styles.css, which contains
its cascading style sheet definitions, and
| | 03:10 | images, which contains a banner graphic.
Double click to open index.php and you
| | 03:17 | should see that it's displayed with
the banner graphic at the top and a gray
| | 03:20 | area in the center.
| | 03:22 | Now test the page by going up to the
toolbar above the editing area, click the
| | 03:26 | button labeled Preview/Debug in
Browser, and select to preview for your
| | 03:31 | favorite web browser. I'm using
Mozilla Firefox. If everything is working
| | 03:36 | correctly, the page should show exactly
as it is on my screen and the web page
| | 03:40 | that's being displayed will be a
combination of literal HTML plus a little bit
| | 03:45 | of dynamic PHP code that was already
in the page and which I'll explain next.
| | Collapse this transcript |
| Understanding basic PHP code| 00:00 | In this video, I'm going to describe
basic PHP code using as an example of the
| | 00:05 | code that's already a part of index.php,
the home page of the example website.
| | 00:10 | If you are following along with
the exercises, open index.php now.
| | 00:15 | You can go to the Files panel if it
isn't already open, locate the file and
| | 00:19 | double click it. Once you have the
file opened, view it in Code View. You can
| | 00:26 | get to Code either through the button
in the toolbar above the design area or
| | 00:30 | you can go to the menu and select View
> Code. Then scroll to the top of the page.
| | 00:36 | At line 2 of the starting page,
there is a command in a code block.
| | 00:41 | A PHP code block always starts with
the characters less than, question mark,
| | 00:45 | PHP and ends with question mark,
greater than. In this code block,
| | 00:51 | there is a command to create a
variable named pagetitle. Variables in PHP
| | 00:55 | typically are prefixed with the dollar
sign and this variable is being declared
| | 00:59 | and its value set in a single command.
| | 01:01 | In PHP, as in most application
server environments, when you declare a
| | 01:06 | variable, that variable is available
from that point until the end of the page.
| | 01:11 | Further down on the page at about line
20, there is a command to output some
| | 01:15 | content to the browser. This code block,
once again wrapped in the code block
| | 01:20 | tokens, uses the command Echo.
| | 01:23 | The Echo command outputs a dynamic
expression to the browser. Notice that
| | 01:27 | before the code block there is a
literal string of 'Welcome to,' then the code
| | 01:31 | block that outputs the value of the
page title variable that was declared
| | 01:34 | previously and then the whole
thing is wrapped in h1 tags.
| | 01:39 | When you preview the page in the
browser, you will see that the content comes
| | 01:42 | to the browser as a single string and
you can see this most clearly by viewing
| | 01:47 | the source code that's returned to
the browser. Go to the browser menu and
| | 01:51 | select View and then Page Source for
Firefox or simply Source for Internet Explorer.
| | 01:58 | And you will see that the content
that's returned is a simple string and the
| | 02:02 | actual PHP commands have been stripped
out of the result. This is because the
| | 02:06 | browser doesn't know how to interpret
PHP; it only knows how to interpret HTML
| | 02:11 | and cascading style sheets. So that's
to look at how simple PHP commands work.
| | 02:16 | In the next video, I'll show you how
to add simple PHP commands using either
| | 02:21 | the menu or the Dreamweaver Insert panel.
| | Collapse this transcript |
| Inserting simple PHP commands| 00:00 | As I described previously, PHP is a
fairly simple programming language but when
| | 00:05 | you are first getting started with it,
it's nice to have a little help in
| | 00:08 | adding basic commands. Dreamweaver
provides this help through either menu
| | 00:12 | selections or through the Insert panel.
You can place the cursor in the code
| | 00:17 | where you want to put the command and
then you can go to the menu and select
| | 00:21 | Insert > PHP Objects and select an
item from there. Or you can use the Insert
| | 00:27 | panel, which is on the top of my
panels in the current layout, and select
| | 00:31 | Insert, then select the PHP category
and you can choose items from the Insert
| | 00:37 | panel as well.
| | 00:38 | Both the Insert panel and the menu
share the ability to add the most commonly
| | 00:43 | used PHP commands. Here is an example,
notice in the h1 tag, in the body of the
| | 00:50 | document that there is a command to
output or echo a variables value to the
| | 00:55 | browser. I'm going to make a change to
index.php so you can see how you would
| | 00:59 | add these commands yourself.
| | 01:01 | I will go back up to the top of the
document to the Title element. Notice that
| | 01:06 | the Title element contains a static
string of 'The Night Owl,' which is the
| | 01:10 | same value that's being stored in the
variable pagetitle. I'm going to delete
| | 01:15 | that string and make sure that the
cursor is placed between the Title tags. Now
| | 01:19 | I'll go to the Insert panel and I'll
make sure I have selected the PHP category
| | 01:24 | and then I'll choose Echo.
| | 01:27 | When I click Echo, that creates a Code
Block and includes the Echo command. Now
| | 01:32 | I'll manually type in the name of the
variable I want to output, starting with
| | 01:36 | the dollar sign and then pagetitle and
I'll save the change and I'll run the
| | 01:41 | page in the browser once again.
| | 01:44 | Notice that when I run the page in the
browser, in the Title Bar of the browser
| | 01:48 | above the menu, I see the value that's
been returned to the browser and if I
| | 01:53 | then go and look in the Source Code
that's returned to the browser and look at
| | 01:57 | the Title element, I'll see that
value has been placed there correctly.
| | 02:02 | Going back to Dreamweaver and the
Insert panel, here are the available values
| | 02:06 | that you can add in. You can add form
variables; that is, variables that are
| | 02:10 | passed in from a data entry form. URL
variables. That is, variables that are
| | 02:15 | passed from hyperlink. Session and
cookie variables, you can put in Include
| | 02:20 | commands, you can add PHP encoding,
code blocks, echos, comments and If and
| | 02:27 | Else statements.
| | 02:28 | If you go through the menu, you will
see most of the same options are available
| | 02:31 | there; the two lists are little
different from each other but again the most
| | 02:35 | fundamental PHP commands can be
added from these points in Dreamweaver.
| | Collapse this transcript |
| Using Live View and Live Code with PHP| 00:00 | One of Dreamweaver CS4's coolest new
feature is called Live View. Live View
| | 00:05 | allows you to see what a page is going
to look like when it's generated by the
| | 00:08 | server or when it incorporates
client site JavaScript commands from right
| | 00:12 | within the Dreamweaver interface.
| | 00:15 | If you have defined a website that's
associated with Dreamweaver, you can use
| | 00:18 | Live View to see what the page will
look like when it's generated. Here is how
| | 00:22 | it works. With the page open, click the
Live View button above the Design area,
| | 00:28 | when I click Live View that results in
passing the file through the PHP Server
| | 00:33 | and presenting the result in
the Dreamweaver Design area.
| | 00:37 | This is the string that's been put
together by Dreamweaver but there is a
| | 00:40 | little more to the story. You can also
see the underlying code that's generated
| | 00:44 | at the server as well. Here's how that
works. I'm going to go into Code View
| | 00:50 | and initially in Code View; you
will see the actual PHP Code presented.
| | 00:55 | Now I'll go to the toolbar above the
editing area and click Live Code. And then
| | 01:01 | scroll down a bit and you will see that
the value that's been generated at the
| | 01:05 | server and passed back to the browser
is being shown here in Dreamweaver. The
| | 01:09 | new background color indicates that I
can't edit this code, this is the code
| | 01:13 | that's been generated dynamically but I
can go out of Live Code by clicking the
| | 01:17 | Live Code button again and then I can go
out of Live View by clicking Live View again.
| | 01:22 | Here's one other feature that's worth
knowing about. Dreamweaver has long had
| | 01:27 | the Split View where you see the code
at the top and the design area at the
| | 01:31 | bottom. Dreamweaver CS4 adds the ability to
rearrange these views, here's how you do it.
| | 01:36 | I will go to the menu and select View
and choose the Design View on top and now
| | 01:43 | I have switched the Design View to
the top and the Code View to the bottom.
| | 01:46 | I'll switch back to the original
arrangement by selecting View and deselecting
| | 01:51 | Design View on top. You can also
split this screen vertically now.
| | 01:55 | I will go to the menu and select View >
Split Vertically and now my code is on
| | 02:01 | the left and Design View on the right
and you can rearrange that as well. I'll
| | 02:05 | click View and this time I'll select
Design View on Left. And now my Design
| | 02:11 | View is on the left and
my Code View on the right.
| | 02:13 | No matter how you arrange your screen,
you still have access to the Live View
| | 02:17 | and Live Code tools. I'll click Live
View and Live Code and then I'll select
| | 02:23 | the content that's been returned from
the server. Once again this value has
| | 02:27 | been dynamically generated at the
server level and returned to the Live View
| | 02:32 | and you will see that the PHP Server
is doing its job in the background.
| | 02:36 | So that's a look at how to use this
new feature of Dreamweaver CS4, Live View
| | 02:40 | and Live Code which allow you to see in
real time what's happening as the code
| | 02:44 | is generated at the server
and returned to the browser.
| | Collapse this transcript |
| Using server-side includes| 00:00 | Website developers who have worked
with Dreamweaver in the past might be
| | 00:03 | familiar with the feature known as
Templates. A template is a client-side page
| | 00:08 | design which can be copied or
propagated to multiple pages of a website. Then
| | 00:13 | when you want to make a change that's
common to all pages in the site, you can
| | 00:16 | come back to the template, make the
change, and Dreamweaver will copy those
| | 00:20 | changes out to all of the attached pages.
| | 00:23 | When you work with an application
server, you can use a different model for
| | 00:27 | your page templating. You can instead
carve the page up into pieces, and the
| | 00:31 | pieces are known as Includes or a file
that's included at runtime. You then put
| | 00:37 | the page back together upon request.
| | 00:39 | The process of carving up the pages
during the design process is really up to
| | 00:43 | you as a designer and developer, but
Dreamweaver CS4 now has the ability in its
| | 00:48 | Design View to put the pages back
together. So you can see approximately what
| | 00:53 | the finished pages will look like even
before you run the page through the browser.
| | 00:57 | For this example, I'm going to start
with the file index.php, the homepage of
| | 01:02 | my website. And I'm going to save it
under a new filename called template.php.
| | 01:07 | If you are following along in the
exercises, start by selecting File > Save As,
| | 01:13 | and then name the new file template.
php. If you simply type in the word
| | 01:18 | template, and click Save, Dreamweaver
will add the .PHP file extension for you.
| | 01:25 | Now, I'm going to take the HTML markup
before and after the main content area
| | 01:30 | of the page, and I'm going to place
those snippets of content into their own
| | 01:33 | separate files. Before I move the
content around, I'm going to create a new
| | 01:38 | folder in my site.
| | 01:39 | I will go to the Files panel, I'll
right-click on the Site folder or
| | 01:44 | Control-click on the Mac and select
New Folder and I'll name the new folder
| | 01:49 | includes. That's where the included
files are going to go. Now right-click on
| | 01:55 | the includes folder, and create two new
files. Name the first file, header.php,
| | 02:02 | and then right or Control-click on the
includes folder again, select New File
| | 02:07 | and name the second file footer.php.
| | 02:11 | Now return to template.php. When you
carve up the page into multiple files in
| | 02:16 | Dreamweaver, it's a good idea to
leave the body and HTML tags which are the
| | 02:21 | outer skeleton of the page in the main file.
| | 02:24 | Here is how we will do that. I'll start
below the beginning body tag, and I'll
| | 02:29 | click and drag to select from the
beginning div tag with an id of page to just
| | 02:34 | through the start div tag with an id of
content. Notice that I'm not taking the
| | 02:38 | h1 tags set. Then I'll cut that
content to the clipboard. I'll right or
| | 02:43 | control-click on the Mac on the
selected content and select Cut.
| | 02:49 | Now I'll return to the Files panel
and I'll double-click to open the file
| | 02:53 | header.php. In header.php, I'll select
all of that content and delete it and
| | 02:59 | then paste in the content from the
template file and I'll save it. So this
| | 03:04 | header file contains the beginning
div tag of the page, the image tag to
| | 03:08 | display the banner graphic, and the
beginning div tag for the content.
| | 03:12 | Now I'll return back to template.php.
I'll do the same thing for the footer.
| | 03:18 | I'll take everything after the h1 tag
that's still within the body. I'll select
| | 03:22 | it and cut it to the clipboard. I'll
go back to the Files panel and this time
| | 03:27 | I'll open footer.php. I'll select all
of the content in footer.php and delete
| | 03:34 | it, and then, I'll paste in the content
that I cut from the template file. And
| | 03:39 | so the footer file currently only has
the two ending div tags and some comments
| | 03:44 | and I'll save my changes there.
| | 03:47 | Now I'll go back to the template file.
So we have carved up the page and if you
| | 03:51 | look at the page in Design View now,
you will see that the graphic is gone,
| | 03:55 | even though the styles are still there.
So now, I'll come back to Code View,
| | 03:59 | and I'll add commands to
include the PHP headers and footers.
| | 04:03 | I will place the cursor above the
heading area but still within the body, then
| | 04:07 | I'll go to the Insert panel, I'll make
sure I'm on the PHP category, and I'll
| | 04:12 | select Include. The Include command is
a function in PHP. It starts with the
| | 04:18 | Code block and then the Include
function and your job is to type in the
| | 04:21 | relative address of the
file that you want to include.
| | 04:24 | I will start with the quote and notice
the Dreamweaver shows a Browse button.
| | 04:29 | I'll click the Browse button and
that opens a browsing dialog box. I'll
| | 04:34 | double-click into the includes folder
and I'll choose the file header.php and
| | 04:39 | click OK. And then make sure to add
the closing quote after the string.
| | 04:43 | Now I'll do the same thing for the
footer. I'll make a little bit of space
| | 04:47 | underneath the h1 tags, go back to
the Insert panel and click Include. Once
| | 04:53 | again, I'll start with a double quote
and that triggers the Browse button. I'll
| | 04:58 | click Browse and this time I'll
choose footer.php, and put in the closing
| | 05:02 | quote, and then, I'll save my changes.
| | 05:05 | And now, I'll go back to Dreamweaver's
Design View. When you go back to Design
| | 05:10 | View, you should see that Dreamweaver
puts it altogether again. It shows the
| | 05:14 | banner content from the footer and it
shows where the content area ends from
| | 05:19 | the footer file. And here is another
tool that's available is Dreamweaver CS4.
| | 05:23 | At the top of the page, you will see a
new interface called the Code Navigator.
| | 05:27 | The Code Navigator shows an icon for
Source Code, which is the underlying code
| | 05:31 | of the main document you are looking at
right now. But you will also see links
| | 05:35 | there for any documents that are
directly linked into this document. Here I see
| | 05:39 | links for styles.css, the cascading
style sheet file, header.php, the header
| | 05:45 | file, and footer.php, the footer file.
| | 05:48 | You can click on any of these icons,
make whatever changes you would like to
| | 05:52 | the code, and then, return back to the
Source Code so that you can see what the
| | 05:56 | page looks like again. And whenever you
want, you can go back and forth between
| | 06:00 | the Full Code View, Split View, and
Design View, and then, when you want to
| | 06:04 | test the page again to make sure it's
all working, click on Live View, and you
| | 06:09 | should see the page rendered as it will be,
after PHP has done generating the code.
| | 06:14 | And if you want to see the completed
code that's returned to the browser, once
| | 06:17 | again click Live Code and go into Code
View, and you will see that the page has
| | 06:22 | been successfully put back together by
PHP at runtime. So that's a look at how
| | 06:27 | to create and use
Includes in the PHP environment.
| | 06:30 | For all of the future exercises in
this course, I'll be starting from this
| | 06:34 | template.php file. So make sure that
you have created the template.php file,
| | 06:39 | created the header and footer files,
and then you will be ready to go on to
| | 06:42 | the rest of the exercises
for Dreamweaver and PHP.
| | Collapse this transcript |
| Defining a database connection | 00:00 | In previous videos, I installed MySQL and
imported a database definition and its data.
| | 00:06 | The name of the database in MySQL
was dw_bookstore. In this video,
| | 00:12 | I'll show you how to describe the
database location, defining a database
| | 00:16 | connection that can be used in all of
the PHP files in a particular website.
| | 00:21 | When you are using PHP, you define a
database connection once for each website.
| | 00:25 | This is different from some other
application servers, say ColdFusion, where
| | 00:29 | you define the database location in a
server configuration environment. I'll be
| | 00:34 | working with a PHP file opened on the
screen, although I won't actually be
| | 00:38 | doing anything with this file. The
reason I have the file opened is that the
| | 00:41 | tools I need to create the database
connection will only be available to me if
| | 00:46 | I have a PHP file opened. Here is
how you define a database connection.
| | 00:50 | Go to the Databases panel. If you
don't see the Databases panel over here on
| | 00:55 | the right side as I don't, go to the
menu, and select Window > Databases.
| | 01:01 | Notice that Dreamweaver shows you a
checklist of tasks that must have been
| | 01:04 | taken care of first before you could
set up the database connection. You must
| | 01:08 | have created the site, which we did.
You must have selected a document type,
| | 01:12 | which I've done, by opening a file with
the appropriate file extension, and you
| | 01:16 | must have configured the site's testing
server, which I also did when I defined the site.
| | 01:21 | Now to create the database connection,
I'll click the Plus button. Notice that
| | 01:25 | when you are using PHP, Dreamweaver
only allows you to create a connection for
| | 01:29 | a MySQL database. PHP can communicate
with other databases such as SQL Server,
| | 01:35 | but Dreamweaver only knows how to
generate the code for this particular
| | 01:38 | combination, PHP and MySQL. I'll click
the button to indicate I want to create
| | 01:44 | the connection. And now, I'll
provide all of the information.
| | 01:47 | First, I'll provide a connection name.
The connection name can be anything you
| | 01:51 | want. It doesn't have to match the
database name in the MySQL installation, but
| | 01:56 | it makes sense to keep them the same,
and that's what I'll do here. Next, you
| | 02:00 | indicate the name or IP address of
the MySQL Server, I'll use localhost.
| | 02:06 | Now you need to provide the
credentials for logging into MySQL. If you are
| | 02:11 | working with WAMP on Windows, the user
name defaults to root and the password
| | 02:15 | by default is left blank. If you are
working with MAMP on Mac OS X, once again,
| | 02:20 | the default user name is root, but
the password is also root. So if you are
| | 02:25 | working on Mac, put in root and root,
if you are working on Windows and WAMP,
| | 02:29 | you put in root and a blank password.
| | 02:31 | Now you should be able to click the
Select button and see a list of the
| | 02:35 | available databases in your MySQL
installation. I'll click and select
| | 02:40 | dw_bookstore, and I'll click OK, and
then I'll click the Test button. On
| | 02:45 | Windows, you will see this warning,
indicating that you haven't specified a
| | 02:49 | password. That's okay. Even though this
warning message is being displayed, you
| | 02:54 | should still be able to connect, and
in fact, you can click this checkbox,
| | 02:58 | Don't show me again, click OK, and then
you should see the message, Connection
| | 03:02 | was made successfully.
| | 03:04 | If you have connected your MySQL
database from here, you are ready to go to the
| | 03:07 | next steps. If you have had any trouble,
make sure that you have entered the
| | 03:11 | name of the database, the user name,
and the password correctly. Once the
| | 03:16 | database connection has been created,
click OK. Stay in the Databases panel for
| | 03:20 | the moment. There are a couple of other
tricks that Dreamweaver knows how to do
| | 03:23 | that allow you to inspect the structure of
your database tables and look at the actual data.
| | 03:29 | Go to the database connection, dw_
bookstore, and click the tree icon. You will
| | 03:34 | see three items listed there, Stored
procedures, Tables and Views. Then click
| | 03:39 | the tree icon next to Tables, and you
should see the database tables that are a
| | 03:43 | part of the current database.
| | 03:45 | Finally, go to the titles table, click
the tree icon there, and you should see
| | 03:50 | the names and data types of the
various columns displayed. If you don't have
| | 03:55 | enough width to see everything, move
your cursor to the left border of the
| | 03:58 | Databases panel and pull it out so you
can see all of the column information.
| | 04:04 | Notice that each column shows its
name, its data type and for variable
| | 04:08 | character values, the
maximum length, which is important.
| | 04:12 | Here is one other tool that you can use
from within the Databases panel. To see
| | 04:16 | the actual data in a database table, go
to the name of the database table, such
| | 04:21 | as, titles, right-click on the table
name or Ctrl+Click on the Mac, and select
| | 04:26 | View Data, and you should see all of the
data from the table shown on the screen.
| | 04:31 | If the database table contains more
than 25 rows, you will see the buttons at
| | 04:35 | the bottom of the View Data dialog are
enabled allowing you to page back and
| | 04:39 | forth through the data. Click OK to
close that dialog, and then you can click
| | 04:44 | the Close buttons to shrink the panel
back down, if you are on the Design or
| | 04:48 | Compact layout as I am.
| | 04:50 | So that's a look at how to generate a
database connection. Here is what happens
| | 04:54 | in the background when you create the
connection. I'll go to the Files panel
| | 04:59 | and show you that there is now a new
folder named Connections. The Connections
| | 05:04 | folder contains a file called
dw_bookstore.php. I'll open the file and show you
| | 05:10 | that the connection is defined here.
| | 05:13 | Later on, if you want to modify
anything about the connection, such as the user
| | 05:16 | name and password, you can do it
through this file rather than having to go
| | 05:20 | back to the Databases panel. Or
alternatively, you can go back to the Databases
| | 05:25 | panel and you can double-click on the
connection and make any required changes here instead.
| | Collapse this transcript |
|
|
4. Defining a Site with ColdFusion and MySQLInstalling ColdFusion on Windows| 00:00 | In this chapter of the video series,
I'm going to describe how to use
| | 00:04 | Dreamweaver CS4 and ColdFusion
together. Adobe ColdFusion is the rapid
| | 00:09 | application development, dynamic web
application platform originally developed
| | 00:13 | by a layer then owned by Macromedia,
and now owned and maintained by Adobe.
| | 00:18 | You can download a free copy of
ColdFusion for development and testing from
| | 00:21 | Adobe's website. Go to
the ColdFusion home page at
| | 00:25 | www.adobe.com/products/coldfusion.
You will need to sign in with an Adobe ID.
| | 00:33 | If you don't already have an Adobe ID,
you can register for one for free.
| | 00:37 | When you get to the Download
ColdFusion 8 Trials page, select ColdFusion 8
| | 00:41 | Developer Edition and then select
English l Windows or whichever
| | 00:46 | versions is appropriate for your
operating system. Once the downloader is
| | 00:50 | installed, start it. You'll see this
initial screen after a few moments. Click
| | 00:56 | OK and then step through the installation
preferences making the following choices.
| | 01:01 | At the Introduction screen, click Next.
Review the License Agreement and if you
| | 01:06 | agree with the terms, click I accept
the terms and click Next. Now at the
| | 01:11 | Install Type screen, select
Developer Edition. The Developer Edition of
| | 01:15 | ColdFusion requires no serial number or
license fee and can be used as long as
| | 01:20 | you like. The only limitation on the
Developer Edition is that only two or
| | 01:24 | three connections can be made at a time
to the server. So it can't be used for
| | 01:28 | production deployment. Click Next.
| | 01:31 | Now select the ColdFusion
configuration. There are three available
| | 01:35 | configurations. I'll be using the
server configuration which includes an
| | 01:40 | underlying Java server, JRun and
ColdFusion integrated with the Java server.
| | 01:45 | For advanced configurations you
can choose multi-server configuration,
| | 01:49 | which includes a full copy of JRun,
or J2EE configuration which packages
| | 01:53 | ColdFusion as an EAR or WAR file.
| | 01:56 | All of the exercises through out this
video series we will be using the Server
| | 02:00 | configuration and its options. So if
you are following along in the exercises
| | 02:04 | and you want to make sure you are
using the same paths and URLs, choose this
| | 02:08 | option and click Next. Now indicate
which subcomponents you want to use.
| | 02:13 | I'm going to leave them all selected but if
you know there are certain options that
| | 02:16 | you don't need, you can de-select them
here. The only subcomponent that I'll be
| | 02:21 | using in this video series is the
ColdFusion 8 Documentation. I won't be using
| | 02:25 | the ODBC Services, the Search Services,
.NET Integration, or LiveCycle Data
| | 02:30 | Services ES. I'll click Next and then
I'll accept the default location of the
| | 02:37 | ColdFusion Installation Directory,
C:/ColdFusion8. I'll click Next again.
| | 02:44 | If you have selected LiveCycle Data
Services Integration, once again review the
| | 02:48 | license agreement. If you accept it,
click the appropriate radio button and
| | 02:52 | click Next, and leave the serial number
for LiveCycle Data Services blank. This
| | 02:57 | is an important step. You need to
integrate ColdFusion with the web server.
| | 03:01 | If you already have Internet
information services installed, the ColdFusion
| | 03:05 | Installer will offer to integrate
ColdFusion with IIS. For this entire video
| | 03:11 | series, I'll be using a web server
that's built-in to ColdFusion. It's called
| | 03:15 | the Development or the Standalone
web server and it runs on Port 8500
| | 03:19 | so that it won't conflict with any web
servers you might already have installed.
| | 03:24 | Click Next and now you are prompted
for a ColdFusion Administrator password.
| | 03:29 | You need to enter a password here and
you'll need this password to use the
| | 03:32 | ColdFusion Administrator, a web based
application that's use to set up data
| | 03:37 | sources and other ColdFusion
configurations. Enter your selected password twice
| | 03:42 | and make sure it's a
password that you'll remember.
| | 03:45 | At this step you are asked to enable RDS.
RDS is called the Remote Development
| | 03:50 | Service and it's a protocol that allows
Dreamweaver and other development tools
| | 03:54 | to get information from the ColdFusion
server at development time about data
| | 03:58 | structures and other server side resources.
| | 04:01 | You must have RDS enabled in order to
successfully follow along with many of
| | 04:05 | the exercises in this video series.
Once again, enter a password twice, one
| | 04:11 | that you will remember and click Next.
Now review all the information before
| | 04:16 | continuing with the
installation, then click Install.
| | 04:21 | The primary installer will take a few
minutes to copy files over, configure
| | 04:25 | ColdFusion, and so on. Then a
browser window will open that prompt you to
| | 04:30 | continue and complete the installation.
I'll describe the steps in that browser
| | 04:35 | window in video number three in this chapter.
| | Collapse this transcript |
| Installing ColdFusion on Mac| 00:00 | In this chapter of the video series, I
describe how to create Dreamweaver CS4
| | 00:04 | sites that integrate with ColdFusion 8,
Adobe's rapid application development
| | 00:09 | platform for dynamic web applications.
| | 00:12 | You can download a free copy of
ColdFusion for development and testing from
| | 00:16 | Adobe's website at www.adobe.com/
product/coldfusion. From this page click
| | 00:25 | Download Free Trial. You'll need to
sign in with an Adobe ID, which is free.
| | 00:31 | And then go to this page, Download
ColdFusion 8 Trials. Select the version for
| | 00:36 | Mac OS X, or if you are working on a
64-bit Mac, choose that version instead,
| | 00:42 | and download the Installer to your desktop.
| | 00:45 | After you download the DMG file and
unpack it, you will end up with the file
| | 00:49 | called ColdFusion 8 Installer. Start
up this application and you'll see this
| | 00:54 | splash screen. Click OK and then
follow the remaining screens to set the
| | 01:00 | installation parameters. At the
Introduction screen, click Next. At the License
| | 01:05 | Agreement screen, if you accept the
terms of the license agreement click the
| | 01:09 | appropriate radio button and then
click Next. And then on the Install Type
| | 01:13 | screen, select Developer Edition.
| | 01:16 | This version of ColdFusion can be used
as long as you like for development and
| | 01:20 | testing but cannot be used for
deployment or production. Click Next. And then
| | 01:26 | at the Installer Configuration, you
are asked to select from one of three
| | 01:29 | configurations. For the exercises in
this video series, I'll be using the
| | 01:34 | default, Server configuration, which
installs ColdFusion and includes an
| | 01:39 | underlined J2EE server name JRun.
| | 01:42 | ColdFusion in JRUn are all bundled
together so that you don't have to know
| | 01:45 | anything about how to install that kind
of server. If you do have expertise in
| | 01:50 | Java Enterprise Edition servers,
you can install ColdFusion 8 using the
| | 01:53 | multi-server configuration, or the J2EE
configuration. But note that all of the
| | 01:59 | exercises in this video series use the
default path and port number that are
| | 02:03 | assigned with the Server configuration.
After making this selection, click Next.
| | 02:08 | At this prompt, confirm that you don't
already have a copy of ColdFusion 8,
| | 02:12 | the server configuration installed.
You can only have one copy of ColdFusion 8
| | 02:16 | installed on the computer at a time.
After confirming, click Next. Now select
| | 02:22 | the subcomponents that you want to install.
| | 02:25 | I typically deselect this option,
Start ColdFusion on system init. That will
| | 02:29 | create a situation while I have to
explicitly start ColdFusion when I want to
| | 02:33 | use it. Also, you may or may not want
to include LiveCycle Data Services ES.
| | 02:39 | LiveCycle Data Services is a powerful
server component that can be used for
| | 02:43 | Flex applications, but it won't
do much for you with Dreamweaver.
| | 02:46 | I'll go ahead and leave it selected,
even though we won't be using it. I will be
| | 02:51 | referring to certain elements of the
ColdFusion 8 Documentation during this
| | 02:54 | video series so leave that
option selected, and click Next.
| | 02:59 | Now, indicate the location of the
ColdFusion installation. The default
| | 03:03 | installation, which I'll use, is
/Applications/Coldfusion8. Click Next. Next, if
| | 03:12 | you see the License Agreement screen
for LiveCycle Data Services ES, review the
| | 03:16 | license agreement and then if you
agree to it, click the appropriate radio
| | 03:20 | button and click Next.
| | 03:22 | For LiveCycle Data Services as with
ColdFusion, you can use the product without
| | 03:27 | a serial number under certain
circumstances. Leave the Serial Number blank and
| | 03:31 | click Next.
| | 03:33 | Now, confirm whether you have an
earlier version of ColdFusion installed.
| | 03:37 | I don't have an earlier version of Adobe
ColdFusion installed on my system. So
| | 03:40 | I'll leave the default set to No, and
click Next. Now you are asked to select a
| | 03:45 | web server connector. ColdFusion needs
a front-end web server. It provides a
| | 03:51 | built-in web server that you can use
optionally, and that's what I'll be using
| | 03:54 | through out this video series. I'll be
referring to it as the development or
| | 03:59 | the Standalone web server. It operates
and listens on Port 8500 rather than
| | 04:04 | the default Port 80.
| | 04:06 | So it you already have a web server
installed, such as Apache, it won't
| | 04:10 | conflict. Select Built-in web
server and click Next. Now provide an
| | 04:15 | Administrator password. You must
provide a password at this point. Later, once
| | 04:20 | you open the ColdFusion Administrator,
you'll be able to disable it if you
| | 04:23 | like. But the Administrator password
will initially be required to open the
| | 04:27 | Administrator, a web-based
application that's used to configured your
| | 04:31 | ColdFusion server. Click Next. On
the next screen select Enable RDS.
| | 04:38 | RDS is the remote development service,
a protocol that allows Dreamweaver and
| | 04:43 | other development tools to
communicate with the ColdFusion server and get
| | 04:47 | information about data structure and
other server-side resources. You must have
| | 04:52 | RDS enabled to follow along with
the exercises in this video series.
| | 04:57 | Once again, enter a password. Make sure
you enter twice. Enter it the same way
| | 05:02 | both times, and make sure it's a
password you will remember later on, and click
| | 05:07 | Next. Now review all of the information
on the Pre-Installation Summary screen
| | 05:12 | and click Install. The installation
takes a few moments. At the end of the
| | 05:17 | primary installation, you'll be
prompted to open a web browser and go to an
| | 05:21 | interface called the Configuration
Wizard, which will allow you to complete the
| | 05:25 | installation of ColdFusion. And for
the first time open the ColdFusion Administrator.
| | 05:30 | I'll describe the process of using the
Configuration Wizard in the next video.
| | Collapse this transcript |
| Completing the ColdFusion installation| 00:00 | When the primary installation process
is completed, whether you are working on
| | 00:04 | Windows or the Mac, you are prompted to
launch the Configuration Wizard in the
| | 00:08 | default browser. Leave that option
selected and click Done. That will result in
| | 00:13 | opening a browser window.
| | 00:18 | When prompted, type in your
Administrator Password that you created during the
| | 00:22 | installation process, and click Login.
It takes just a few minutes to complete
| | 00:30 | the configuration of the server. If
you have any trouble getting to the
| | 00:34 | screens, you might need to stop and
then restart ColdFusion. If you are working
| | 00:38 | on Windows, you can do that through the
services area that's available from the
| | 00:42 | Control panel. Go to the Control panel,
click on Classic Control Panel, go to
| | 00:47 | Administrative Tools, and then
click on Services. Locate the ColdFusion
| | 00:52 | Application Server and stop and restart it.
| | 00:55 | If you are working on Mac, you'll need
to open the ColdFusion Launcher, which I
| | 00:59 | demonstrate in the previous video about
the Mac installation process. Once the
| | 01:04 | Server Configuration process is
complete, you are prompted to go to the
| | 01:07 | ColdFusion Administrator. Click OK
to open the ColdFusion Administrator.
| | 01:14 | If you can see the Administrator
interface at this point, you are ready to go
| | 01:18 | into the rest of the exercises in
this chapter of the video series.
| | Collapse this transcript |
| Using the ColdFusion Administrator| 00:00 | After installing ColdFusion, you can
use the ColdFusion Administrator, a web
| | 00:04 | based application that provides a
visual interface for creating data sources
| | 00:09 | and setting up other server side
resources. Before opening the ColdFusion
| | 00:13 | Administrator you should always make
sure that ColdFusion is running. If you
| | 00:16 | have installed ColdFusion using the
server configuration as I demonstrated in a
| | 00:21 | previous video, you can start and stop
ColdFusion from the Windows Services panel.
| | 00:26 | In Windows go to the Control panel.
Make sure that you have chosen the Classic
| | 00:32 | View. Then go to the Administrative
Tools, Services. ColdFusion appears as a
| | 00:41 | set of services. The primary service
is ColdFusion8 application server. There
| | 00:47 | are also separate services for the
.NET service and ODBC. You only need the
| | 00:52 | ODBC services if you are using ODBC drivers.
| | 00:55 | For example, when working with
Microsoft Access, If you are working with MySQL
| | 01:00 | you don't need the ODBC services and
they could be disabled. Also, I'm not
| | 01:05 | going to be covering anything about
the .NET service in this video series, so
| | 01:09 | if you wanted to disable that
services as well, you could.
| | 01:11 | For the application server itself, if
you want to stop and then restart the
| | 01:15 | server, click the application server
item then in the toolbar click the Stop
| | 01:20 | button and then the Start button. Or
you can simply click the restart service
| | 01:25 | button. If you have any trouble closing
ColdFusion down, you can go to the Task Manager.
| | 01:31 | And in the Task Manager ColdFusion
appears under an item named JRun. The JRun
| | 01:36 | server is the underlying Java
Enterprise Edition Server that hosts ColdFusion.
| | 01:40 | When you stop JRun.exe from the Task Manager.
You are completely shutting down the server.
| | 01:46 | If you are working on Mac OS X you
can start and stop ColdFusion from an
| | 01:50 | application called the ColdFusion
Launcher. You will find this application in
| | 01:54 | the ColdFusion installation folder,
which is wherever you installed it during
| | 01:58 | the previous installation process.
From the Mac hard disk go to the
| | 02:02 | Applications Folder and
from there to ColdFusion8.
| | 02:06 | Then start the application ColdFusion
Launcher. On my system ColdFusion is
| | 02:11 | already started. Notice that there
are buttons for starting and stopping
| | 02:14 | ColdFusion and there is also a button
to get you to the web server connector
| | 02:18 | utility. This allows you to connect
ColdFusion to a web server if you didn't
| | 02:22 | already set it up appropriately
during the installation process.
| | 02:25 | I will stop ColdFusion8 so we can
see what it looks like. It takes just a
| | 02:30 | moment for ColdFusion to stop and then
once it's completely stopped the buttons
| | 02:34 | become enabled again. Now to restart
ColdFusion I click start Coldfusion8 and
| | 02:39 | once again it takes a few moments to
start the server. Once the server is
| | 02:43 | started, and available the buttons
once again become enabled. So that is how
| | 02:47 | you start and start ColdFusion on Mac OS X.
| | 02:50 | Now that you have started
ColdFusion you can open up the ColdFusion
| | 02:53 | Administrator. Go to a browser
and then type in the following URL,
| | 02:58 | http://localhost:8500/cfide/
administrator. This is always the standard URL for
| | 03:12 | any ColdFusion Administrator. From the
root folder of the website you got to a
| | 03:16 | cfide sub-folder and from there to an
Administrator sub-folder. This is the URL
| | 03:22 | regardless of how ColdFusion is
installed. Then in the login screen enter the
| | 03:27 | password that you have created
during the installation process.
| | 03:34 | If you can get to the ColdFusion
Administrator at this point, ColdFusion is
| | 03:37 | running correctly. In the ColdFusion
Administrator there are many screens that
| | 03:42 | you can use to configure ColdFusion's
behavior and performance. This is the
| | 03:46 | Settings screen. It includes many parameters
for turning features of ColdFusion on and off.
| | 03:51 | For example, there is a feature named
Enable White Space Management. Because of
| | 03:56 | the nature of ColdFusion code it's
common for pages to be returned to the
| | 04:00 | browser with a lot of line feeds
and a lot of whitespace. By turning on
| | 04:03 | Whitespace Management you
automatically compress the returned HTML that goes
| | 04:08 | back to the browser.
| | 04:10 | In a later video, I'll talk about the
Data Sources Screen. How to use this
| | 04:15 | screen to set up data sources that
point your databases. Depending on which
| | 04:19 | addition of ColdFusion you are using,
you will have support for many databases
| | 04:23 | including SQL Server, MySQL and Access.
| | 04:28 | So that's a look at how to get into
the ColdFusion Administrator. I recommend
| | 04:31 | that you bookmark this page. I'm in
Firefox so I'll go to Bookmarks and then
| | 04:36 | bookmark this page and click Done and
that will allow me to easily get back to
| | 04:41 | the ColdFusion
Administrator later on when I need it.
| | Collapse this transcript |
| Setting up the ColdFusion exercise files| 00:00 | If you have access to the Exercise
Files that come with this video series,
| | 00:03 | then before you define a site for
Dreamweaver and ColdFusion, you will want to
| | 00:08 | copy the Exercise Files for
ColdFusion into the appropriate location.
| | 00:12 | Go into the Exercises folder and you
will find a folder there called dwwithcf.
| | 00:18 | This folder contains two files,
index.cfm and styles.css, and one images folder
| | 00:24 | that contains a single image file.
| | 00:27 | Go back to the Exercises folder and
copy dwwithcf to the clipboard. Now,
| | 00:33 | navigate to the document root folder
of the stand-alone web server that's
| | 00:37 | installed with ColdFusion.
| | 00:40 | Under Windows, this folder is located
under C:\ColdFusion8\wwwroot. If you
| | 00:47 | working on Mac OS X with ColdFusion8
and the built-in web server, the path is
| | 00:52 | /Applications/ColdFusion8/wwwroot.
| | 00:57 | Once you have navigated to the
document root folder, paste that folder into place.
| | 01:01 | Now to test the Exercise Files,
go to any web browser and navigate to
| | 01:10 | the following URL,
http://localhost:8500/dwwithcf.
| | 01:20 | When you navigate to this URL, the
server should automatically serve up the
| | 01:24 | default page, index.cfm, and you should
see the page that I'm showing on my screen.
| | 01:29 | If the page looks like this one in
your system, you know that ColdFusion is
| | 01:32 | installed correctly and that the
Exercise Files are installed in the correct
| | 01:36 | location, and you are ready to go
to the next step: defining a site in
| | 01:40 | Dreamweaver that's integrated with ColdFusion.
| | Collapse this transcript |
| Defining a Dreamweaver site| 00:00 | After installing ColdFusion and
putting the Exercise Files in the document
| | 00:04 | root folder of the web server, you are
ready to define a site in Dreamweaver
| | 00:08 | CS4. After opening Dreamweaver, go to
the menu and select Site > New Site.
| | 00:15 | The Dreamweaver Site Definition dialog
has two tabs labeled Basic and Advanced.
| | 00:20 | I'll use the Advanced tab since it
gives me the most options. The Category
| | 00:24 | defaults to Local Info. This is where
you define the name of the site and where
| | 00:28 | its files are stored on your local disk.
| | 00:32 | Set the site name as DW With ColdFusion.
The site name can be any string and it
| | 00:38 | can include spaces. Now browse for
the local root folder. On Windows using
| | 00:47 | ColdFusion server configuration, go to
C:\ColdFusion8\wwwroot. On Mac OS X you
| | 00:56 | would go to /Applications/ColdFusion8/wwwroot.
| | 01:01 | Then, within the wwwroot folder,
double-click on dwwithcf. Then click the
| | 01:08 | Select button. If you like you can
also set the images folder. This tells
| | 01:12 | Dreamweaver where to browse when you
try to insert an image into a web page.
| | 01:16 | Click the Browse icon, double-click
on the images folder and click Select.
| | 01:22 | The HTTP address value can be entered
here if you like. It helps Dreamweaver
| | 01:26 | figure out how to display contents
from site-relative links and also it gives
| | 01:31 | information to the Link Checker that
you use to check your content before you
| | 01:35 | upload it to your production server.
| | 01:37 | Set the HTTP address as http://localhost
:8500/dwwithcf/. Now go to the Testing
| | 01:48 | Server category. This is where you
configure ColdFusion. Open the list of
| | 01:53 | available Server models and select
ColdFusion. Then set the Access to
| | 01:58 | Local/Network.
| | 02:00 | The Testing server folder should
default to the same physical location as your
| | 02:03 | local site root. The URL prefix will
be close to correct. It will start off
| | 02:09 | with the correct prefix of http://
localhost and end with the correct folder
| | 02:14 | name dwwithcf, but you do need to add
the port number after localhost, :8500.
| | 02:22 | Those were all the changes you need to
make to your site definition. Click OK
| | 02:26 | to save the site definition. The
Files panel should open and show you the
| | 02:30 | contents of the site. Locate the file
index.cfm and double-click it to open.
| | 02:37 | You should see the page appear in
Design View looking pretty close to the same
| | 02:41 | way it did in the browser. The only
real difference is that instead of the
| | 02:45 | string 'Welcome to The Night Owl' that
you saw in the browser, the ColdFusion
| | 02:48 | page actually uses a variable in that string.
| | 02:52 | Now to test the site definition further,
try previewing the page in a browser.
| | 02:57 | Go to the toolbar above the Design area,
click the Preview/Debug in Browser
| | 03:01 | button and select your favorite
browser. I'll preview in Firefox. The page
| | 03:08 | should open and display exactly as it
did in the previous video after we copied
| | 03:12 | the files into place.
| | 03:14 | If you see this display on your
screen that means that ColdFusion is working
| | 03:18 | correctly and you are ready
to move to the next exercise.
| | Collapse this transcript |
| Understanding basic ColdFusion code| 00:00 | As I mentioned in a previous video,
ColdFusion is my favorite application
| | 00:04 | server, primarily because of the
simplicity of its programming language.
| | 00:08 | ColdFusion markup language or CFML is
a concise, tag-based markup language
| | 00:13 | that's very easy to learn and use.
| | 00:16 | In this video I'm going to show you a
couple of very simple ColdFusion commands
| | 00:19 | that are already a part of the
website's homepage, index.cfm. If you are
| | 00:24 | following along with the exercises, open the
file index.cfm from the ColdFusion site now.
| | 00:30 | Open the file in Code view and go to
the top of the page. At the top of the
| | 00:36 | page at line 2 after the document type
declaration, there is a command named
| | 00:41 | cfset. The cfset command is a
typical ColdFusion command. All ColdFusion
| | 00:46 | commands are tags that start with
the letters cf. In this case the cfset
| | 00:52 | command creates a variable and sets
it to initial value. This variable is
| | 00:57 | available from the time it's declared
until the end of the current page. A
| | 01:01 | little further down in the page at
line 15, you will see the use of another
| | 01:05 | very common ColdFusion command, cfoutput.
| | 01:07 | The cfoutput tag set is wrapped around
dynamic values that you want to output
| | 01:12 | to the browser. Then within the
cfoutput command, there are pound signs wrapped
| | 01:17 | around the expression variables.pagetitle.
The pound signs are a delimiter for
| | 01:22 | ColdFusion that says this is a dynamic
expression, in this case a variable. The
| | 01:27 | cfoutput tags are wrapped around the
dynamic expression to tell the ColdFusion
| | 01:32 | server to evaluate this
section of the page dynamically.
| | 01:35 | The pagetitle variable, notice, has a
prefix of variables. Here is the rule
| | 01:40 | that's in effect. Every variable in the
ColdFusion environment has a prefix and
| | 01:45 | when you declare a variable and you
don't designate a prefix, it goes into the
| | 01:49 | variable scope or prefix automatically.
The nature of the variable scope or
| | 01:54 | variables that are members of
variables is that those variables are available
| | 01:58 | from the time they are declared until
the end of the current page request and
| | 02:02 | they are unique to the
current user who requested the page.
| | 02:05 | So that means that if you have
multiple simultaneous calls to the ColdFusion
| | 02:09 | server, that each person has their
own copy of this variable, pagetitle. So
| | 02:14 | those are two of the most commonly
used ColdFusion commands. cfset up at the
| | 02:19 | top. That declares and sets a value of
a variable and cfoutput that's used to
| | 02:25 | output the value of variable to the browser.
| | 02:28 | So now having understood what those
commands do, let's look at the page in the
| | 02:31 | browser again. I'll go to the toolbar
and preview the page in the browser. When
| | 02:37 | the page is rendered in the browser, it
shows the string, 'Welcome to The Night
| | 02:41 | Owl,' and I'll view the source that's
returned to the browser and I'll show you
| | 02:46 | that this string, 'Welcome to The
Night Owl,' has been concatenated or pushed
| | 02:50 | together from the literal string of
'Welcome to' and the variable value of page title.
| | 02:55 | And also notice that all ColdFusion
commands have been stripped out of HTML
| | 02:59 | page and have not been returned to the
browser. That's because, as with PHP,
| | 03:04 | the browser doesn't know how to
interpret PHP or ColdFusion markup language
| | 03:08 | code. In both examples, this is code
that's executed at the server level and
| | 03:13 | not in the browser and its purpose is to
generate HTML to return to the browser.
| | 03:18 | Now in the next video, I'll show you a
couple of new tools that are a part of
| | 03:22 | Dreamweaver CS4 that let you more
easily evaluate what's going on at the server
| | 03:26 | level without having to go
out to an external browser.
| | Collapse this transcript |
| Using Live View and Live Code with ColdFusion| 00:00 | Among Dreamweaver CS4's new features
are the Live View and Live Code tools.
| | 00:05 | These tools allow you to see what's
happening on the server without having to
| | 00:09 | go out to an external browser.
Essentially, the Live View is an internal
| | 00:13 | browser that's nested within the
Dreamweaver interface and then Live Code
| | 00:17 | allows you to see the generated HTML code
that comes back from the server at runtime.
| | 00:22 | To show this feature, I'm going to be
working with the file index.cfm, which as
| | 00:27 | I showed in the previous video has some
very simple ColdFusion commands to set
| | 00:32 | and display the output of a variable.
You can use a couple of different
| | 00:36 | techniques to go into Live View. You
can go to the menu and select View > Live
| | 00:41 | View or you can press the appropriate
keyboard shortcut for your operating
| | 00:45 | system, which you will find on the menu.
When you click Live View Dreamweaver
| | 00:50 | displays a browser component and shows
you the content that's returned from the
| | 00:55 | application server at runtime. So
notice now that instead of seeing the icon
| | 00:59 | that indicated there was a variable in
the page, you are now seeing the result
| | 01:03 | of the application service dynamic processing.
| | 01:07 | If you want to see the actual code
that's been generated at the application
| | 01:10 | server level go to Code View first and
then click Live Code or once again, go
| | 01:16 | through the menu. Notice two things,
first of all the background color of the
| | 01:21 | Code View has changed to indicate that
you can't modify the code in this state
| | 01:26 | and also notice that the HTML that has
returned from the application server is
| | 01:30 | now showing the content as its
generated from the application server. This
| | 01:35 | feature also works with
clients like JavaScript code.
| | 01:38 | Essentially, Dreamweaver is showing you
what the web page code looks like after
| | 01:42 | both the server has generated the code
and after any Dreamweaver commands have
| | 01:46 | modified the page at runtime. So those
were two really valuable new features of
| | 01:50 | Dreamweaver CS4, Live View and Live
Code, which were especially useful for
| | 01:55 | application server developers who
want to see at runtime what's going on.
| | Collapse this transcript |
| Inserting simple ColdFusion commands| 00:00 | As I described in the previous video
ColdFusion markup language is among the
| | 00:04 | easiest of programming languages to
learn for the web, but it is still a
| | 00:08 | complete programming language and
to become expert in it takes time.
| | 00:12 | Dreamweaver CS4 provides tools though
to insert the most common ColdFusion
| | 00:16 | commands. You can get to these tools either
through the menu or through the Insert panel.
| | 00:22 | Using the menus, go to Insert >
ColdFusion Objects and you will see a list of
| | 00:28 | commands that insert a lot of the
most of common ColdFusion commands.
| | 00:32 | I described the Cfset and Cfoutput
commands. Those are on this list and you will
| | 00:36 | also see on the primary list some of
the most common commands. There are also
| | 00:41 | sub-menus here for more advanced
commands, conditional logic, truly advanced
| | 00:46 | commands for communicating with
external servers and form commands to create
| | 00:51 | data entry forms.
| | 00:53 | You can also get to many of these
tools through the Insert panel. In
| | 00:57 | Dreamweaver CS4, the Insert panel has
moved from the top of the editing area to
| | 01:01 | become a panel in its own right and in
the layout I'm using right now, that new
| | 01:05 | Designer Compact layout, the Insert
panel up here is at the top of the panel
| | 01:09 | stack. I'll click the Insert panel,
pull down the list of available categories
| | 01:15 | and notice that there are two
categories labeled CFML and CFForm. I'll choose
| | 01:20 | the CFML category and you will see
many of the same commands as appear on the
| | 01:24 | menu. Here is a simple example
of how you might use these tools.
| | 01:28 | Notice in the current page index.cfm
that there is a simple string 'The Night
| | 01:33 | Owl' between the title tags and that
same value is being stored in the variable
| | 01:37 | pagetitle. I would like to change this
page so that instead of outputting the
| | 01:42 | static string I'm outputting the
value of the variable. So I'll delete the
| | 01:46 | static string and then making sure
that the cursor is between the title tags,
| | 01:50 | I'll go to the Insert panel. I'll
make sure that I have chosen the CFML
| | 01:54 | category. Then I'll scroll up to the
top of the list and choose cfoutput. When
| | 02:01 | I click the cfoutput button I see a
dialog box called a Tag Editor. With
| | 02:06 | ColdFusion commands, Dreamweaver knows
the basic attributes that you can add to
| | 02:11 | various tags. The cfoutput tag is
used in a lot of conditions where you use
| | 02:15 | advanced attributes. In this example,
I'm not going to use any of those
| | 02:19 | attributes. So I'll just click OK
and Dreamweaver adds the required tags.
| | 02:24 | Now I would like to add a variable. As
I showed before, variables are wrapped
| | 02:28 | in pound signs in ColdFusion and once
again it's such a common bit of code that
| | 02:33 | it appears on the Insert panel.
| | 02:35 | So I'll scroll down toward the bottom
of the Insert panel and locate the item
| | 02:39 | labeled Surround With # or hash mark
and I'll click it. Now with the cursor
| | 02:44 | between the pound signs, I can type
in the name of the variable, which as I
| | 02:47 | described in an earlier video starts
with the prefix variables and ends with
| | 02:52 | dot, and the name of the variable
pagetitle. I'll save the change and then I'll
| | 02:57 | run the page in the external browser.
And you will see that when the page opens
| | 03:02 | in the browser if you look at the title
bar above the menu area that the value
| | 03:06 | of the variable is displayed at the top
of the title bar and that's the purpose
| | 03:10 | of the title tag in HTML. So there are
many other commands that you can insert
| | 03:14 | through the Insert panel or through the
Dreamweaver menu and the goal is always
| | 03:19 | to create well-formed ColdFusion
code without having to worry much about
| | 03:23 | getting it right the first time.
| | Collapse this transcript |
| Using server-side includes| 00:00 | Website developers who have worked
Dreamweaver in the past might be familiar
| | 00:04 | with a feature known as Dreamweaver
templates. A Dreamweaver template is a file
| | 00:08 | a that defines a look and feel or a
visual design for a page and that design
| | 00:13 | can then be propagated or copied to
other pages in a website. Then if you want
| | 00:17 | make a global change to the website you
can go back to the template, change the
| | 00:21 | template and when you save it,
Dreamweaver will copy the changes to all the
| | 00:25 | pages in the website. For static
websites that's a good tool, but for dynamic
| | 00:30 | application server websites such as
those built with the ColdFusion there is
| | 00:33 | another option. Instead of using
client-side templates you can carve up your
| | 00:38 | pages into multiple pieces. The main
page and then other parts of the page
| | 00:42 | known as includes.
| | 00:44 | The purpose of an include is to serve
as content that's repeated in many pages
| | 00:49 | and then when the user requests a page,
the page is put together at runtime by
| | 00:54 | the application server as a combination
of the primary page plus the files that
| | 00:59 | are included. In this video series I'm
going to describe how to break up a page
| | 01:03 | into includes, into multiple files,
and then how to put them back together at
| | 01:07 | runtime using a command in
ColdFusion called cfinculde.
| | 01:12 | If you are following along with the
exercises, start in the index.cfm file.
| | 01:16 | The web page's homepage. I'm going to
save this file under a new name and then I'm
| | 01:21 | going to breakup that file into
multiple parts. Go to the menu and select File
| | 01:26 | > Save As and name the file template.cfm.
Now before I break the file up into
| | 01:33 | multiple parts I'm going to create a
directory to put the new files in. I'll go
| | 01:37 | to the Files panel and then to the
Dreamweaver site root and I'll right click
| | 01:42 | on the root folder or Ctrl-click on
the Mac and select a New Folder and I'll
| | 01:47 | name the new folder Includes. That will
put the pieces of the page that we are
| | 01:52 | going carve out now.
| | 01:53 | Now I'll go back to template.cfm and
look at the page in Code View. It's
| | 01:58 | strongly recommended that when you
start taking pieces of the page out as
| | 02:02 | Includes that you leave the main body
and HTML tags in the main page. So here
| | 02:07 | is what I'll do. I'll start right
below the start tag of the body and I'll
| | 02:13 | select from there all the way through
the start tag of the div with an id of
| | 02:17 | content and then I'll cut
that content to the clipboard.
| | 02:22 | Now I'll return to the Files panel and
I'm going to create a new file in the
| | 02:26 | Includes folder and I'm going to name
it header.cfm. Now I'll double click and
| | 02:33 | open that new file. I'll select the
content, delete it and paste and I'll save
| | 02:40 | those changes.
| | 02:41 | Now I'll come back to the template.cfm
file. I'm now going to select the
| | 02:46 | content below the h1 tags. Make sure
that you don't take the end body or end
| | 02:51 | HTML tags with you. Those should
remain in the main page and I'll Cut that
| | 02:56 | content to the clipboard. I'll go back
to the Files panel, back to the Includes
| | 03:01 | folder, right-click or Ctrl-click on
the Mac and select a new file and name
| | 03:06 | this file footer.cfm. I'll double
click to open it. I'll select all of the
| | 03:13 | content and delete it and paste and in
the beginning file I notice that there
| | 03:17 | wasn't an extra end div tag. So I'll
delete that now and I'll save those
| | 03:21 | changes. I'll go to the header and make
sure I have two begin div tags and I'll
| | 03:27 | go to the footer and make sure that I
have two end div tags. Now I'll come back
| | 03:32 | to the template file.
| | 03:32 | I am going to use a command in
ColdFusion called cfinclude and as in a previous
| | 03:39 | video I'll use the Insert panel to add
the code and make sure that it is typed
| | 03:42 | in correctly. I'll place the cursor
above the content area, the h1 tags. I'll
| | 03:48 | make a little bit of space and then
click the Insert panel. Make sure I'm at
| | 03:52 | the CFML category and click cfinclude.
The cfinclude command brings up a Tag
| | 03:58 | Editor. I need to fill in the location
of the file I want to include at this
| | 04:02 | point. I'll click the Browse button
and starting at the site root, dwwithcf,
| | 04:09 | I'll double click into the includes
folder and select the file header.cfm and
| | 04:14 | click OK. And then click OK again.
Here is the resulting code.
| | 04:20 | cfinclude template="includes/header.cfm".
| | 04:25 | Now I'll place the cursor after h1 tags
and I'll follow the same process again.
| | 04:31 | I'll go to the Insert panel, click
cfinclude, click Browse and this time I'll
| | 04:38 | select footer.cfm. Clicking OK,
clicking OK. So now the page consists of the
| | 04:45 | content in the center, the cfincludes
around the content and then the skeleton
| | 04:50 | of the HTML page, the document type
declaration, the head section and so on
| | 04:55 | wrapped around the content and the includes.
| | 04:58 | Now I'm going to save the changes and
go back to Design View and show you that
| | 05:02 | Dreamweaver does a couple of things
that are really great. First of all, it
| | 05:06 | successfully puts the files back
together for you at design time so that you can
| | 05:10 | see what the page is going to look
like approximately when it's rendered from
| | 05:14 | the server to the browser. But here
is another tool, which is brand new in
| | 05:18 | Dreamweaver CS4. Above the toolbar area,
there are now a set of icons called
| | 05:23 | the Code Navigator. The Code
Navigator shows you the main file that you are
| | 05:27 | working in, in this case template.cfm,
and then provides links to all files
| | 05:32 | that are associated with this file.
The style sheet file, styles.css, and the
| | 05:37 | two includes that I just created and
included, header.cfm and footer.cfm. You
| | 05:42 | can click on any of these links to see
the code and modify it as you need to.
| | 05:46 | For example I'll go to header.cfm and
I'll see the code there and footer.cfm
| | 05:52 | and see the code there. And then to
return to the primary file, I click on
| | 05:56 | Source Code and within any of the files I
can go back to Code, Split View or Design View.
| | 06:03 | Now I put the file back together in
Code. It's time to test it on the server.
| | 06:09 | So as in the previous video, I'll
use Live View. I'll click the Live View
| | 06:14 | button and I'll see the page
rendered after it has been processed in
| | 06:17 | ColdFusion. I can then go to Live Code
and click on Code View and show you that
| | 06:23 | the page has been successfully put back
together at the ColdFusion server level
| | 06:28 | and return to the browser as
an intact, well-formed HTML page.
| | 06:33 | So that's the process for using
includes in the ColdFusion environment. Again,
| | 06:37 | best practices include that you
should leave the body and HTML tags in the
| | 06:42 | primary page. That helps Dreamweaver
part the page and understand where to
| | 06:46 | additional code and then other
elements of the page can be put in their own
| | 06:50 | separate files and then included into
multiple pages and then later on, if you
| | 06:55 | want to change the overall look and feel
of the website you can do so easily by
| | 06:59 | modifying the include files and your
web pages will be put back together at
| | 07:03 | runtime by the ColdFusion server as it
dynamically generates HTML to return to the browser.
| | Collapse this transcript |
| Defining a ColdFusion data source| 00:00 | In this video, I'm going to describe
how to define the location of a database
| | 00:04 | using ColdFusion. In the previous
chapter on PHP, I showed that to connect to a
| | 00:09 | database in the PHP environment and
Dreamweaver, you define the connection in
| | 00:13 | the website files themselves.
| | 00:16 | When you are using ColdFusion,
database locations and how you are going to
| | 00:19 | connect to the database are all
configured directly within the server through
| | 00:24 | the ColdFusion Administrator application.
You can get into the Administrator by
| | 00:27 | going to the browser, but there is a
simple way of getting to the Administrator
| | 00:31 | and specifically to the Data
Sources screen from within Dreamweaver.
| | 00:34 | First, make sure that you have a
ColdFusion page opened on the screen. If you
| | 00:38 | don't have a ColdFusion page opened,
you won't be able to do this next step.
| | 00:43 | Then go to the Databases panel. In the
Databases panel, there is a checklist
| | 00:48 | asking you to fill in
various bits of information.
| | 00:51 | You must have already created a site,
and as you can see, I have done that.
| | 00:54 | You must have selected a document type,
which I have done by opening the CFM page,
| | 00:59 | and you must have configured the
site's testing server, which I did when I
| | 01:02 | created the site definition.
| | 01:04 | Now, I'm going to provide the RDS
login. RDS stands for Remote Development
| | 01:10 | Service. It's a protocol that
Dreamweaver uses to communicate with ColdFusion,
| | 01:14 | and get information about database
structure, content of databases, that are
| | 01:18 | being addressed through the server and so on.
| | 01:20 | I'll click the link, and I'll be
prompted for a password. You want to type in
| | 01:26 | the same password that you put in
when you installed and configured
| | 01:29 | ColdFusion. If you successfully login,
you will see a listing of the data
| | 01:35 | sources that are already setup
in ColdFusion. Notice that my copy of
| | 01:39 | ColdFusion has four; these data sources
are a part of the ColdFusion documentation.
| | 01:44 | Now, here is how you get to the
ColdFusion Administrator and to its Data
| | 01:48 | Sources screen. In the Databases
panel, there is the button in the upper
| | 01:52 | right-hand corner. When you move
your cursor over it, it says Modify data
| | 01:56 | sources. I'll click that button and
that opens a browser. I'm going into the
| | 02:01 | ColdFusion Administrator and I must
provide my Administrator password. I'll login
| | 02:07 | and I'll land at the Data Sources screen.
| | 02:11 | Now, I'm going to define the new data
source. I'm going to name the data source
| | 02:15 | the same as the actual database name
in MySQL. dw_bookstore. Now I'll select a driver.
| | 02:23 | A driver is a bit of software
that knows how to communicate with the
| | 02:27 | particular database.
| | 02:29 | ColdFusion comes with two drivers for
MySQL. There is a driver for MySQL 3 and
| | 02:34 | a more recent one for MySQL 4 and 5.
You must be using ColdFusion 8 to see this
| | 02:40 | more recent version of the MySQL driver.
I'll select MySQL (4/5) and click Add.
| | 02:49 | Now, in this screen, I'm going to be
asked for other information that's needed
| | 02:52 | to connect to the database.
| | 02:54 | I'll set the name of the database as
dw_bookstore, and again that's the name of
| | 02:59 | the database as it's known in the MySQL
Installation. Now, I'll set the name or
| | 03:05 | IP address of the server. I'm running
MySQL on my own local machine, so I'll
| | 03:10 | type in localhost.
| | 03:13 | Next, I put in the Username and
Password. The username is root. That's the
| | 03:17 | default administrator username when
you first install MySQL and the password
| | 03:22 | will depend on whether you are working
on Windows with WAMP or on Mac with MAMP.
| | 03:27 | If you are working on Windows with
WAMP, the password is blank. If you are
| | 03:31 | working on Mac with MAMP, the
password is root just like the username.
| | 03:36 | I'm working on Windows so I'll
leave the password blank.
| | 03:39 | Now, I'll click Submit and if I'm
successful, I should come back to the
| | 03:44 | screen, and I should see the message,
Data source updated successfully. If you
| | 03:49 | have any problems connecting to the
database, you can go back into the database
| | 03:53 | definition by clicking on the link, make
any required changes, and then resubmit.
| | 03:58 | Also make sure that MySQL is running at
the moment. For example, if I'm working
| | 04:03 | on WAMP, I would check the icon in the
system tray and make sure that it's all
| | 04:07 | white, or if I'm working on MAMP, I would
simply make sure that the MAMP Server is running.
| | 04:12 | So now, I have setup the data source
in the ColdFusion Administrator. I'll
| | 04:17 | close the browser and return to
Dreamweaver. I'll go to the Databases panel and
| | 04:22 | you'll notice that the new data source
doesn't show up right away. Instead, you
| | 04:26 | must refresh the Databases panel
to see the changes on the server.
| | 04:31 | So I'll go to the upper right corner
of the Databases panel and click the
| | 04:35 | Refresh button. And you should
see your new data source appear.
| | 04:40 | I'll open the data source and you'll
see items labeled Stored procedures,
| | 04:44 | Tables and Views. Then I'll open
the Tables view and you'll see a list of
| | 04:50 | all the tables in the database. And
I'll open up the titles table and you'll
| | 04:55 | see all the columns of the titles table
and the column names, data types and lengths.
| | 05:01 | You can also see the data passed from
ColdFusion to Dreamweaver. Go to the name
| | 05:06 | of the table, titles in this case, and
right-click on it or control-click on
| | 05:10 | the Mac, and select View Data. You
should see the data from the database table
| | 05:15 | on the server returned to
and displayed in Dreamweaver.
| | 05:19 | If this table has more than 25 rows,
you would see that the buttons at the
| | 05:23 | bottom of the dialog box labeled
Previous and Next 25 would have been enabled.
| | 05:27 | This table only has 17 records and so
the buttons are disabled. I'll click OK,
| | 05:33 | and then, I'll close the
Databases panel and I'm back to the page.
| | 05:38 | Now, notice that nothing I did here
made any change in the files of the
| | 05:41 | website. When you work in ColdFusion,
data sources are defined entirely in the
| | 05:46 | server environment, not in the website
itself. And when you want to query the
| | 05:51 | database in a ColdFusion page, you
will be using that data source name as
| | 05:55 | defined in the ColdFusion server.
| | 05:57 | So in this chapter, you've learned how
to install ColdFusion, how to configure it
| | 06:01 | and get it ready for use in a
Dreamweaver/ColdFusion environment. You have
| | 06:05 | setup the exercise files and defined
the Dreamweaver site. We've done a little
| | 06:09 | bit of an overview of a simple
ColdFusion code, added some code using the
| | 06:13 | Insert panel and the menu. We've used server-
side includes and we've set up a data source.
| | 06:18 | Now in the next chapter, I'm going to
be describing features called bindings
| | 06:22 | and server behaviors, which behave
pretty much the same, regardless of whether
| | 06:26 | you are working in PHP or ColdFusion.
| | 06:28 | Most of the examples I'll be giving
will be PHP based, but you can follow along
| | 06:33 | in those same examples with the
ColdFusion content, and where the content is
| | 06:37 | different or the menu choices are
different, I'll point it out. But as I
| | 06:41 | mentioned, for the most part it's
all the same, regardless of which
| | 06:44 | application server you are using.
| | Collapse this transcript |
|
|
5. Using Bindings and Server BehaviorsWorking with data in PHP and ColdFusion| 00:00 | In this chapter of the video series,
I'm going to describe a set of tools
| | 00:04 | known as bindings and server behaviors.
The bindings and server behaviors tools
| | 00:08 | work pretty much the same, whether
you are working with ColdFusion or PHP.
| | 00:12 | There are some minor variations in available
options between the two application servers.
| | 00:16 | But since for the most part
Dreamweaver implements the same functionality for
| | 00:20 | both servers, I'm only going to
demonstrate each of the behaviors once. I'm
| | 00:24 | going to be mainly using PHP in these
demonstrations and wherever there is a
| | 00:28 | difference between PHP and
ColdFusion behavior, I'll point that out.
| | 00:32 | You should be able to follow through
the exercises in this chapter using either
| | 00:36 | application server. If you haven't
actually worked through the exercises in the
| | 00:40 | previous chapter, you can use the
solution files, which you'll find in the
| | 00:44 | Exercises folder under Solutions.
| | 00:47 | For example, if you want to start in
this chapter with the PHP content, use the
| | 00:52 | contents of the Solution folders
chapter03_php folder. Copy those files into
| | 00:57 | place, under the PHP server document
root. You'll also of course, need to make
| | 01:01 | sure that you have setup
MySQL and import at the database.
| | 01:05 | Similarly, if you are going to work
through the ColdFusion files, you can find
| | 01:09 | the solutions for Chapter 4 in the
Solutions chapter04_coldfusion folder. In
| | 01:15 | this case, you will again have to have
installed ColdFusion and also have set up
| | 01:19 | the database and the ColdFusion data source.
| | 01:22 | Regardless of which application server
you choose, these exercises show how you
| | 01:26 | can use the database hosted in MySQL
and your choice of application server to
| | 01:31 | generate dynamic code that presents
data interactively in your web pages.
| | Collapse this transcript |
| Using the Bindings and Server Behaviors panels| 00:00 | Dreamweaver CS4 provides a set of
panels through which you can generate
| | 00:04 | dynamic server code that uses data
from the server-side database. In previous
| | 00:09 | videos, I reviewed how to work with
the Databases panel, to set up a database
| | 00:13 | connection for PHP or to inspect existing
data sources when working with ColdFusion.
| | 00:18 | Once you've set up your database
either through Dreamweaver in PHP or through
| | 00:22 | the ColdFusion Administrator in
ColdFusion, you can then start querying the
| | 00:26 | databases and presenting the data
dynamically on your pages. Here are the other
| | 00:30 | two panels that you are typically use
for this purpose. The Bindings panel
| | 00:34 | allows you to define dynamic expressions
that you can then add to your web pages.
| | 00:40 | When you indicate that you want to add
a binding to your page or to your site,
| | 00:44 | you can choose from a record set, also
known as a query in ColdFusion, or you
| | 00:48 | can set up one of a variety of
variable types. The list of available variable
| | 00:52 | types differs from ColdFusion to PHP.
| | 00:55 | When you define a record set, you are
defining it in the current web page. When
| | 01:00 | you define a variable in the
Bindings panel, you are simply defining the
| | 01:03 | variable's name so that you can then
easily drag and drop it into your web page
| | 01:07 | wherever it's needed.
| | 01:08 | From the Bindings panel, you can also
set up a Spry dataset, a dataset based on
| | 01:13 | XML or comma-delimited files. I'll be
talking about Spry in a later chapter of
| | 01:18 | the video series. Essentially, the
purpose of the Bindings panel is to define
| | 01:22 | available data and in the case of the
record set or a query to define the data
| | 01:26 | as local to the current page.
| | 01:29 | The Server Behaviors panel is similar
that offers other options. When you click
| | 01:34 | the Plus icon under Server Behaviors,
you are once again allowed to set up a
| | 01:38 | record set. This is exactly the same
functionality as when you select record
| | 01:42 | set query from the Bindings panel. But
then, you can also select from a variety
| | 01:47 | of dynamic data presentation tools.
| | 01:49 | In videos in this chapter, I'll be
describing how to create repeating regions,
| | 01:53 | how to page through record sets,
how to show regions only in certain
| | 01:57 | conditions, and I'll describe many of
the other available server behaviors.
| | 02:02 | Once again for the most part, a server
behavior will do exactly the same thing
| | 02:06 | whether you set it up using either PHP
or ColdFusion. But there will be minor
| | 02:10 | variations between the servers and the
code that's generated for the servers,
| | 02:14 | of course, will be completely
different because it will be implemented in the
| | 02:17 | particular language for that application server.
| | 02:20 | You will also find in the Server
Behaviors area a tool for XSLT Transformation.
| | 02:25 | XSLT stands for Extensible Stylesheet
Language Transformations and it's a way
| | 02:30 | of taking XML files and turning it
into some other form of text, typically,
| | 02:35 | another XML format or HTML
using this special language.
| | 02:39 | So that's a look at the two panels,
Bindings and Server Behaviors. I'll start
| | 02:43 | off in the next video by showing you
how to create a record set using your
| | 02:47 | choice of application server and
database. Then we'll go through the many
| | 02:51 | server behaviors that are available.
| | Collapse this transcript |
| Building a simple recordset| 00:00 | When you query a server-side database
and return data to website, you do so by
| | 00:05 | executing Application Server Code,
PHP or ColdFusion Markup Language.
| | 00:10 | Dreamweaver can generate that code
for you using an interface called the
| | 00:13 | Recordset Builder.
| | 00:15 | There are two versions of the
Recordset Builder: the Simple Recordset Builder
| | 00:18 | and the Advanced. The Simple
Recordset Builder is limited to returning data
| | 00:22 | from a single database table,
filtering on a single column and sorting on a
| | 00:26 | single column. If you need to do
anything more complex than that, you will need
| | 00:30 | to use the Advanced Recordset Builder,
which requires a certain amount of
| | 00:33 | knowledge of SQL syntax.
| | 00:36 | In this video, I'll show you how to
build a simple record set and then test it.
| | 00:40 | I'm going to start in the Template file.
If you are working in PHP, open the
| | 00:44 | template.php file and if you are
working in ColdFusion, open template.cfm. Then
| | 00:50 | save this file under a new file name,
selecting File > Save As and name this
| | 00:55 | new file simplerecordset and use the
appropriate file extension for your
| | 01:00 | application server.
| | 01:03 | Now, with the simplerecordset page
opened, go to the Bindings panel. In the
| | 01:07 | Bindings panel, notice that there is a
checklist asking you to make sure that
| | 01:11 | you have taken care of all the
required steps. You have created the site, you
| | 01:15 | have chosen a document type by opening
the appropriate file and you have set up
| | 01:19 | the site's testing server.
| | 01:20 | Now click the Plus button to add a
new record set. The first time you go to
| | 01:27 | Recordset Builder, you typically open
the Simple Recordset Builder. The Simple
| | 01:31 | Recordset Builder allows you to select
a record set name, select the connection
| | 01:35 | or data source you want to use, select
a table, indicate which columns you want
| | 01:39 | to output, how you want to
filter and how you want to sort.
| | 01:43 | The Recordset Builder will also look
a little bit different depending on
| | 01:46 | whether you are working with PHP or
ColdFusion. I'm showing the PHP version.
| | 01:50 | The ColdFusion version also has
prompts for the user name and password for
| | 01:55 | logging into the database. Assuming
that you already set up that information in
| | 01:59 | the server configuration of the
record set, you don't need to add it here.
| | 02:03 | The record set name can be any string
and should not include any spaces or
| | 02:07 | special characters. I'll be using a
prefix of rs. For example, I'm going to
| | 02:12 | create a simple record set based on the Titles
table, so I'll name this record set rsTitles.
| | 02:18 | If you are working in ColdFusion,
you will see that a lot of ColdFusion
| | 02:21 | developers use a prefix of q for query.
So instead of rsTitles, it might be
| | 02:26 | qTitles. It doesn't matter what you
name the record set, again as long as you
| | 02:31 | follow the convention of a simple
string with no spaces. Now pull down the list
| | 02:36 | of available tables and select Titles,
the Columns list should now show the
| | 02:40 | list of columns for the Titles table.
| | 02:43 | By default, you are going to retrieve
all columns from the table, but typically
| | 02:47 | you want to limit the number of
columns to only the ones you need, and here's
| | 02:51 | how you do it. Click the selected
radio button and you will see that the list
| | 02:55 | of columns is enabled. Now hold down
the Ctrl key on Windows or the Command key
| | 03:00 | on Mac and click each of the columns
you want to select, select title, price,
| | 03:07 | scroll down a bit and also
select notes and pupdate.
| | 03:12 | Notice that I'm not including any of
the columns with a suffix of _id. I don't
| | 03:17 | need those if I'm simply going to
display data on the screen. You can also
| | 03:22 | filter by a single column. Notice that
there is a list of the columns here as
| | 03:26 | well, and if you select a column, you
can then indicate how you want to do the
| | 03:29 | filtering. I'll talk about how
to use that tool in a later video.
| | 03:33 | You can sort by a single column by
pulling down the list of Columns and
| | 03:37 | selecting one. I'll choose the title
column and notice that you then have a
| | 03:41 | choice of sorting in ascending or
descending order. I'll leave that to the
| | 03:45 | default value of ascending.
| | 03:47 | Now from within the Recordset Builder
click the Test button. You should see the
| | 03:51 | data returned in alphabetical order by
title. Click OK and then click OK again,
| | 03:58 | and that generates the code in the current web
page for executing the query to the database.
| | 04:04 | Now take a look back at the page and
look at Code view. Scroll to the top of
| | 04:09 | the code, the code will look different
depending on which application server
| | 04:12 | you are using. This is the PHP version.
It first doesn't include of a file
| | 04:17 | called dw_bookstore.php. That's the
file that contains information about how to
| | 04:22 | log in to the MySQL database.
| | 04:25 | Then there is extensive code to set
up the query and execute it against the
| | 04:29 | database server. When all of the PHP
code has been generated and executed, it
| | 04:34 | results in creating a variable that
has the name that I assigned in the
| | 04:37 | Recordset Builder. In this case,
rsTitles and in PHP with the dollar sign prefix.
| | 04:44 | If you are working in ColdFusion and
you look at the code, you will see that
| | 04:46 | it's significantly simpler. You will
see a pair of cfquery tags wrapped around
| | 04:51 | the SQL statement, once again
assigning the name of rsTitles. In both cases,
| | 04:56 | you will notice that the code to
execute at the server is placed above the HTML
| | 05:00 | content. And that's the standard that
Dreamweaver follows for generating any
| | 05:04 | record sets or other
dynamic content on the server.
| | 05:08 | So that's a look at how to generate a
simple record set. Now I'm going to be
| | 05:11 | using this simplerecordset page as the
base for a lot of other exercises later
| | 05:16 | in this chapter. So make sure that you
have generated this file at least and
| | 05:20 | then you will be able to jump to other
exercises in the chapter starting with
| | 05:23 | this file. Then you will be able to
copy and modify the file to try out the
| | 05:27 | various server behaviors.
| | Collapse this transcript |
| Building an advanced recordset| 00:00 | As I described in the previous video,
about building a simple record set,
| | 00:04 | Dreamweaver's Simple Recordset
Builder is limited to generating record sets
| | 00:08 | from a single database table and
filtering and sorting on one column each.
| | 00:12 | If you need to do anything more
advanced such as joining multiple tables or
| | 00:16 | filtering or sorting on multiple
columns, you will need to use the Advanced
| | 00:19 | Recordset Builder.
| | 00:21 | In this video, I'll show you how to use
the Advanced Recordset Builder and just
| | 00:25 | note that you will find that in order
to use the Advanced Recordset Builder
| | 00:28 | successfully, you do need to have a
little bit of knowledge of SQL, Structured
| | 00:32 | Query Language, which is the universal
language for talking to databases. For
| | 00:37 | this exercise, I'll start once again
with the file template.php and if you are
| | 00:41 | working in ColdFusion,
open the file template.cfm.
| | 00:45 | Now save the file under a new name.
Select File > Save As and name this new file
| | 00:52 | advancedrecordset and use the file
extension for your application server. Now
| | 00:59 | go to the Bindings panel and click the
plus icon and choose Recordset (Query).
| | 01:06 | When you open up the Recordset Builder,
it might open in the simple version.
| | 01:10 | That's the version I used in the previous video.
| | 01:12 | To go to the Advanced Recordset Builder,
just click the button Advanced. This
| | 01:16 | Recordset Builder looks pretty much
the same for PHP and ColdFusion. The only
| | 01:20 | difference just as with the Simple
Recordset Builder is that the ColdFusion
| | 01:24 | version of the Recordset Builder
includes data entry fields for the user name
| | 01:28 | and password. Assuming that you set up
the correct user name and password for
| | 01:32 | logging into the database when you
created your ColdFusion data source,
| | 01:36 | you don't need to enter those values here.
| | 01:38 | Now as before, name the recordset
rsTitles, set your connection to
| | 01:43 | dw_bookstore. Now we are going to
create a record set that joins content from
| | 01:48 | two tables. Go to the Database Items
pane at the bottom of the Recordset
| | 01:53 | Builder and open the tables list. And
then go to the titles table. Click the
| | 02:00 | title column and then click the
Select button under Add to SQL. You do this
| | 02:05 | once for each column that you want to
include in your SQL statement. Also go
| | 02:10 | down to the price column and click Select.
| | 02:13 | So now we have added two columns from
the titles table and I'm going to add two
| | 02:17 | columns from the Authors table as well.
I'll go back up to the Authors table
| | 02:23 | and open it up and I'll go first to
the au_fname column and click Select. And
| | 02:29 | then to the au_lname column and click
Select again. If you test the query right
| | 02:35 | now, you will find that you get back
much more data than you should. In fact,
| | 02:39 | you are getting back one row for
each combination of title and author.
| | 02:44 | This is known as a Cartesian join and
it's what happens when you don't properly
| | 02:49 | join tables together by common columns.
You get back records representing all
| | 02:54 | possible combinations of the columns you
designated. And that's not what you want.
| | 02:58 | So go back to the Recordset Builder and
add a little bit more code. Scroll back
| | 03:03 | down to the Titles table and select the
au_id column. In the Titles table, this
| | 03:09 | is known as a foreign key column. It
represents a way of joining to the authors
| | 03:13 | table. And click the Where button. That adds a
Where clause and references the au_id column.
| | 03:21 | Now once again, go back to the authors
table and choose au_id and click Where
| | 03:27 | again. The Where clause isn't quite
correct yet. There is an And operator that
| | 03:31 | doesn't make too much sense. I'm going
to go into the SQL code and I'm going to
| | 03:36 | delete the And operator and
replace it with an Equals operator.
| | 03:41 | This SQL code is now proper and correct.
It means retrieve these columns from
| | 03:46 | these two tables and match the au_id
values in the two tables. Test the query
| | 03:52 | again and you should now see that
you are getting back 17 rows, the right
| | 03:56 | number of rows for the Titles table and
the authors from the Authors table have
| | 04:00 | been properly joined.
| | 04:02 | Click OK to close the dialog and we
will add one more bit of SQL code. This
| | 04:07 | time I'm going to sort by the author's
last name and then first name. Click on
| | 04:12 | au_lname and click Order By and then
click on au_fname and click Order By
| | 04:17 | again. And the Order By clause in the
SQL statement should place the names in a
| | 04:23 | comma-delimited list in order of preference.
| | 04:26 | Test the query one more time and you
should see that it's now coming out in
| | 04:30 | alphabetical order by author. Click
OK and then click OK again to add the
| | 04:36 | record set to your page.
| | 04:39 | Now save the page and preview the page
using Live View. You will see that when
| | 04:44 | the page is executed in the server that
it doesn't actually present any of the
| | 04:48 | data yet. For that you will need a
server behavior. And in fact, if you go into
| | 04:52 | the Live Code version, you will see
that all of the PHP or ColdFusion code once
| | 04:57 | again has been stripped out.
| | 04:59 | So in the next set of videos, I'll
show you how to use these record sets and
| | 05:03 | how to present the data on the screen
using repeating regions and dynamic tables.
| | Collapse this transcript |
| Using repeating regions| 00:00 | After generating a record set using the
Recordset Builder, you can then present
| | 00:04 | the data in a web page using either
repeating regions or dynamic tables.
| | 00:09 | In this video, I'll describe how to
define a region that outputs dynamic
| | 00:13 | content, and then repeat it once
for each row in a record set. For this
| | 00:17 | exercise, I'll start from the file
simplerecordset.php or if you are working
| | 00:22 | with ColdFusion, simplerecordset.
cfm. If you didn't create this file
| | 00:26 | previously, you can find a copy of it
in the Solutions folder and copy it over
| | 00:31 | into your website.
| | 00:32 | Starting with the file simplerecordset,
I'll save it under a new file name,
| | 00:37 | selecting File > Save As, and I'll name
the new file repeatingregions. Be sure
| | 00:44 | to use the appropriate file extension
for your application server, .PHP or
| | 00:49 | .CFM. Now, I'm going to create a section
that displays content from the record set.
| | 00:54 | I will place the cursor at the end of
the existing content and press Enter to
| | 00:59 | create a new paragraph. Now, I'll go
to the Bindings panel, where I have
| | 01:04 | already created the record set and
I'll click the tree icon to show the
| | 01:08 | available columns in the record set.
| | 01:11 | Dreamweaver allows you to drag and
drop the columns from the record set in
| | 01:15 | Design mode and drop them into your
page where you want them. I'll start with
| | 01:19 | the title of the book. I'll drag it
and place it in the new paragraph. Then
| | 01:22 | I'll click into the Design area after
the title and press the Space Bar and
| | 01:27 | I'll add a pair of parenthesis and I'll
move the cursor inside the parenthesis,
| | 01:32 | and I'm going to put the
title's price in this location.
| | 01:36 | Now, I'll go back to the Bindings
panel and I'll drag and drop the price and
| | 01:41 | place it inside the parenthesis. So I
have the title a space and then the price
| | 01:47 | of the title inside the parenthesis.
Now, I'll save and test the page in Live
| | 01:52 | View. You should see the title of
the book and then the price of the book
| | 01:56 | wrapped in parenthesis, but notice
that you are only seeing the data from the
| | 01:59 | first row of the record set. So now,
I'm going to define the repeating region
| | 02:04 | to cause this content to repeat
once for each row in the record set.
| | 02:08 | I will get out of Live View and then
I'll click on the line that contains the
| | 02:13 | dynamic content. Then I'll go down to
the tag selector below the Design area
| | 02:17 | and I'll click the p tag (<p>) to make
sure that I have selected the entire row
| | 02:22 | of content. Now, here is how you
would define a repeating region.
| | 02:26 | Go to the Server Behaviors panel,
click the plus button and select Repeat
| | 02:32 | Region. The Repeat Region dialog box
allows you to choose a record set that you
| | 02:36 | want to repeat, and also indicate
whether you want to display all records in
| | 02:40 | the record set or only a certain
number of records at a time. I'm going to
| | 02:43 | choose all records and then click OK.
That takes the paragraph that I have
| | 02:48 | selected and wraps it in the Repeat Region.
| | 02:50 | Now, I'll save and test the page in
Live View again and you should now see that
| | 02:55 | the data repeats and displays all of
the content of the repeating region.
| | 03:00 | So that's the basic idea of repeating
regions. The repeating region iterates
| | 03:05 | over the record set, looping through
the data and displays it one row at a
| | 03:09 | time. Once you have defined the
repeating region, you can add additional
| | 03:13 | information. For example, this record
set contains a publication date and notes
| | 03:18 | and you could add that information as well.
| | 03:20 | But I'm going to show you how to add
additional information in the context of a
| | 03:23 | dynamic table, which allows you to
display the same data but in nice even rows
| | 03:28 | and columns and I'll show you
how to do that in the next video.
| | Collapse this transcript |
| Generating a dynamic table | 00:00 | As I showed in the previous video,
once you have generated a record set, you
| | 00:03 | can display the data using repeating
regions or if you prefer you can present
| | 00:08 | the data using an HTML table.
Dreamweaver is able to generate the HTML table
| | 00:13 | code for you using its Dynamic Table tool.
| | 00:16 | As before, I'm going to start
this demonstration using the file
| | 00:19 | simplerecordset.php or if you are
working in ColdFusion, simplerecordset.cfm.
| | 00:25 | This is a file that was created in a
previous video and if you didn't go
| | 00:29 | through that video, you can go get
this file from the Solutions folder. I'm
| | 00:33 | going to start by saving the file under
a new name. I'll select File > Save As
| | 00:39 | and I'll name the file dynamictable and
assign the appropriate file extension.
| | 00:44 | Now, I'll click after the content and
press Enter to create a new paragraph.
| | 00:49 | Although you don't necessarily need a
paragraph to wrap the table in, it's a
| | 00:53 | good idea to create one initially to
make sure that the table is placed in the
| | 00:56 | correct location in the page by Dreamweaver.
| | 00:59 | Now you can add the Dynamic Table from
two different locations in Dreamweaver,
| | 01:03 | either through the menu or through the
Insert panel. If you decide to use the
| | 01:07 | Insert panel, go to the Insert panel
and then choose the Data Category. Within
| | 01:12 | the Data Category, scroll down and
select Dynamic Data and then Dynamic Table.
| | 01:19 | Alternatively, you can use the menu.
Go to the menu and select Insert > Data
| | 01:24 | Objects > Dynamic Data and then once
again Dynamic Table; either way, you open
| | 01:32 | up the Dynamic Table dialog box. First
choose the record set. The current page
| | 01:37 | has only one record set, rsTitles. So
that's what I'll use and then just as
| | 01:42 | with repeating regions, you indicate
whether you want to show a certain number
| | 01:45 | of records at a time or all records.
I'll choose All Records for this
| | 01:49 | demonstration and then I'll click OK.
| | 01:53 | That results in creating the Dynamic
Table. The Dynamic Table Code consists of
| | 01:58 | a combination of HTML and the
Application Server Code, either PHP or CFML. The
| | 02:04 | paragraph that you created actually
lands above the table. So if you don't want
| | 02:08 | that extra space, you can remove it.
Just click into the blank area, make sure
| | 02:13 | you have chosen the paragraph using the
tag selector and then press Delete and
| | 02:17 | that will bring the page back together.
| | 02:19 | Now test the output by clicking the
Live View button. If you haven't saved your
| | 02:24 | changes, you will be prompted to do so
and after a moment you should see the
| | 02:31 | web page display all of the data from
the database table in a single HTML table.
| | 02:37 | Now click the Live View button again to
exit from Live View and we will make a
| | 02:41 | couple of small changes. First of all,
notice in the header column that the
| | 02:46 | actual database table's column names
are displayed. You may want to clean this
| | 02:50 | up, for example, you may not want to
show the actual names but something a
| | 02:54 | little bit friendlier.
| | 02:55 | I will just capitalize each of these
names and for the pubdate, I'm going to
| | 03:01 | change that completely to Publication
Date. Whenever you type in longer strings
| | 03:07 | in a header cell, it's a good idea to
make sure that the cell won't wrap. That
| | 03:11 | is, stack the words on top of each other.
To accomplish that, leave the cursor
| | 03:15 | in the cell that you don't want to wrap,
go down to the Properties panel and
| | 03:20 | click the No wrap option.
| | 03:22 | You won't see any changes in the
Design View right now but that will just
| | 03:25 | ensure that the text doesn't wrap when
you run the page in the browser. Here is
| | 03:29 | some other changes you might want to
make. The price, for example, should be
| | 03:33 | right aligned. So I'm going to click
into the cell that contains the price.
| | 03:38 | Notice I'm not actually clicking the
field, I'm clicking right next to it and
| | 03:42 | then I'll do down to the Properties panel
and I'll set the horizontal alignment to right.
| | 03:48 | Now I'll save my changes and once again,
look at the page in Live View and now
| | 03:54 | you should see that the prices are
right aligned. You can imply whatever
| | 03:58 | formatting you want to the HTML table
using either cascading style sheets or
| | 04:03 | the formatting tools that
are in the Properties panel.
| | 04:05 | So that's the basics of how to create
a Dynamic Table. Now in the next video,
| | 04:09 | I'm going to show you how to format
some of these data values such as numeric
| | 04:13 | values like the price, or date values
like the publication date using string
| | 04:17 | formatting tools that are available
through the Dreamweaver Bindings panel.
| | Collapse this transcript |
| Applying string formats| 00:00 | Dreamweaver CS4 has the ability to
format various types of values as strings in
| | 00:05 | your web pages. If you are working
with ColdFusion, the formats you need, for
| | 00:10 | example, for currency and numeric
formatting, are already available. If you are
| | 00:14 | working with PHP, you can download
the formats from the Adobe Exchange and
| | 00:18 | install them into Dreamweaver.
| | 00:20 | In this demonstration, I'm going
to start with the ColdFusion page
| | 00:23 | simplerecordset.cfm. If you are a PHP
developer, follow along up to a certain
| | 00:28 | point, but then I'll show you where
things fall apart in PHP and how to fix it.
| | 00:33 | Starting with the simplerecordset file,
I'm going to save this under a new file
| | 00:37 | name. I'll select File > Save As and
I'll name the new file stringformats.cfm.
| | 00:48 | Now, I'm going to go to the Bindings
panel and I'm going to drag in some
| | 00:51 | values. I'll drag in the title of the
book, put in a space, a hyphen, go back
| | 00:58 | to the Bindings panel and drag in the
Price. Then in a set of parenthesis, the
| | 01:07 | word Published, and then I'll drag in
the Publication Date. Now place it right
| | 01:12 | inside the parenthesis.
| | 01:14 | Now I'll select the paragraph that
wraps that content and I'm going to wrap
| | 01:19 | that inside a repeating region. I'll
go to the Server Behaviors panel, I'll
| | 01:24 | click Plus and I'll add a Repeat Region
for all records. This matches the same
| | 01:30 | behavior that I used in a previous video.
Then I'll save and test the page in Live View.
| | 01:37 | So notice that the numeric values and
the date values are being shown using the
| | 01:42 | RAW database format and I want to
format these values using friendly strings.
| | 01:48 | So I'll come back from Live View and
I'll go to the price first. Now again, I'm
| | 01:54 | working in ColdFusion, so if you are
working on PHP, you are not going to see
| | 01:57 | the same result quite yet.
| | 01:58 | I will go to the Bindings panel and
with the price selected in the Bindings
| | 02:04 | panel; I'll pull down the list of
available formats. I'll select Currency >
| | 02:10 | Dollar Format. The different
formats that are available for different
| | 02:13 | application servers will differ. After
I have selected that value, I'll then
| | 02:19 | select the pubdate.
| | 02:20 | I will go to Bindings. Once again I'll
pull down the list of available formats
| | 02:26 | and this time I'll select Date/Time
and I'll choose the date in long format.
| | 02:33 | Notice that nothing changes in the
actual Design view. You only see the
| | 02:37 | indication of what you've selected in
the Bindings panel. I'll come back to the
| | 02:41 | page, save and look at the page again
in Live View. You will see that now the
| | 02:46 | values are formatted appropriately
as currency values and as long dates.
| | 02:52 | Now, if you try to do the same thing
in PHP, you'll find that the formats
| | 02:55 | aren't available in the same way. In
fact, with PHP pages, you only get basic
| | 03:00 | string formatting, uppercasing,
lowercasing and so on, and you don't
| | 03:04 | automatically get date, numeric or
other more advanced formats. But you can
| | 03:09 | download extensions from the Adobe
website and install them into Dreamweaver to
| | 03:13 | get this functionality.
Here is the website you go to.
| | 03:18 | To get to the Adobe Exchange, use the
URL, www.adobe.com/go/exchange and you
| | 03:27 | will get to this screen. Then search
for the string, PHP formats, and you will
| | 03:33 | find links to a number of packages or
extensions that include a variety of
| | 03:38 | formats. Now I have already
downloaded this server formats file, this MXP
| | 03:43 | Dreamweaver extension file to my
desktop. To launch it, I'm simply going to
| | 03:48 | double-click it.
| | 03:50 | This launches an application called the
Adobe Extension Manager. It may be that
| | 03:54 | when you double-click on this file,
if you have an older version of
| | 03:57 | Dreamweaver, that you might open the
wrong version of the Extension Manager. If
| | 04:02 | that happens, just close the
application that opened and then you can open the
| | 04:06 | Extension Manager from the Windows
menu or from the Mac Applications folder.
| | 04:11 | After reading through the license, if
you agree with it, you can click the
| | 04:14 | Accept button and then the formats
extension is successfully installed. Then if
| | 04:20 | you go back and do exactly the same
exercise with PHP instead of ColdFusion,
| | 04:25 | you will find a number of formats
available for numeric formatting and other
| | 04:29 | formats that can be incredibly useful.
| | Collapse this transcript |
| Displaying the total number of records| 00:00 | In this video, I'm going to describe
how to use a very simple server behavior
| | 00:04 | that displays the total number of
records in a record set. For this exercise,
| | 00:08 | I'll start with the file dynamictable.php.
If you haven't created this file
| | 00:13 | yourself, you can find a copy of it in
the Solutions folder and copy it into
| | 00:17 | place in your website. And if
you're using ColdFusion, you can use
| | 00:21 | the file dynamictable.cfm.
| | 00:24 | Start by saving the file under a new
name. Select File > Save As and name this
| | 00:30 | new file totalrecords.php or .cfm.
Now, place the cursor at the end
| | 00:37 | of the content above the table and
press Enter to create a new paragraph. Then
| | 00:41 | type in the following string, 'There
are', then put in the letter X just as a
| | 00:46 | placeholder and then the word titles.
| | 00:50 | Now, go back to the middle of the
string and place the cursor right before the
| | 00:53 | letter X. Then go to the Server
Behaviors panel, click the Plus button to add a
| | 00:59 | new server behavior. Go to Display
Record Count and then Display Total Records.
| | 01:06 | In the Display Total Records dialog box,
the record set will be set to the only
| | 01:10 | record set in the page, rsTitles.
| | 01:13 | Click OK, then remove the letter X
after that value. The reason to put the
| | 01:18 | placeholder in there was to make
sure that the spaces on either side were
| | 01:22 | maintained. If you didn't do that, you
can easily correct by just placing the
| | 01:26 | cursor after the variable
rsTitles.TotalRecords and putting the space character
| | 01:31 | back in. Now save your changes and
preview the page in Live View. You should
| | 01:37 | see the string, 'There are
70 titles,' above the table.
| | 01:41 | So the purpose of the Total Records
server behavior is to simply report the
| | 01:45 | total number of records in the record
set and to allow you to output that value
| | 01:49 | anywhere on the web page you like.
| | Collapse this transcript |
| Limiting the number of records with paging controls| 00:00 | If you use repeating regions or a
dynamic table to display dynamic data on a
| | 00:04 | webpage, you can limit the number of
records you show at a time using record
| | 00:08 | set paging. You set record set paging
up when you first generate the repeat
| | 00:12 | region or the dynamic table. In
this demonstration I'm going to use the
| | 00:17 | simplerecordset file. If you are
following along with the exercises you can use
| | 00:21 | either the PHP or the ColdFusion version,
and if you haven't created this page,
| | 00:25 | you can get a copy from the Solutions
folder and copy it into place in your website.
| | 00:29 | Starting from the file simplerecordset.
php, I'll save the file with a new name
| | 00:35 | of recordpaging using the appropriate
file extension. Now I'll place the cursor
| | 00:42 | after the content area and press
Enter or Return to create a new paragraph.
| | 00:46 | Then I'll create a dynamic table. I'll
go to the Insert panel. I'll select the
| | 00:52 | Data Category. I'll scroll down to the
Dynamic Data Selection, open it up and
| | 00:58 | select Dynamic Table. This is where
you set up the number of records you want
| | 01:04 | to display at a time. My table only has
17 records in it, so I'm going to limit
| | 01:09 | the number of records shown at a time
to just five. That will allow me to page
| | 01:12 | forward and back a few times.
| | 01:14 | Then I'll click OK to create the
dynamic table. I'll save the table and then
| | 01:20 | preview it in Live View. And you
should see that the dynamic table displays
| | 01:28 | only five records. Now I'll click the
Live View button again to return from
| | 01:32 | Live View back to Design Mode. I'm
also going to remove the pubdate column; I
| | 01:39 | don't need it for this demonstration.
I'll click into the last column in the
| | 01:42 | header, drag straight down to select
the entire column and then press Delete to
| | 01:48 | delete the column. I'm also going
to clean up the remaining headers
| | 01:51 | capitalizing the strings in those
header areas. Now the next step is to add
| | 01:56 | some information about which records
are being viewed. I'll do that using some
| | 02:01 | more server behaviors.
| | 02:02 | I will click into the empty paragraph
below the headline and above the dynamic
| | 02:07 | table and I'm going to type in a
placeholder string to show what I want the
| | 02:11 | user to see, Displaying records x-y
of z. Then I'm going to replace these
| | 02:18 | values using the actual numeric values,
the beginning and ending range numbers
| | 02:23 | of the records being displayed
plus once again the total records.
| | 02:27 | I will select the letter X, then go to
the Server Behaviors panel and I'm going
| | 02:34 | to pull down the list of available
server behaviors and select Display Record
| | 02:38 | Count, Display Starting Record Number.
Select the rsTitles record set and click
| | 02:44 | OK. Then go back to Design Mode and
delete the letter X if it's still there.
| | 02:51 | Now I'll select the letter Y. I'll go
to Server Behaviors, click +, Display
| | 02:59 | Record Count and select Display Ending
Record Number. Once again, I'll choose
| | 03:05 | the rsTitles record set and click OK and
then remove the placeholder character applied.
| | 03:13 | Finally, I'll replace the letter Z
with the total records, I'll place the
| | 03:17 | cursor after the letter Z, go into
Server Behaviors, click +, select Display
| | 03:25 | Record Count and Display Total Records.
Then once again I'll choose the record
| | 03:30 | set and click OK. I'll remove the
letter Z, which was my placeholder character.
| | 03:36 | I'll save the changes and then
preview in Live View and you will see the
| | 03:41 | correct information
Displaying records 1-5 of 17.
| | 03:45 | Finally, I'm going to add controls
that allow the user to page forward and
| | 03:49 | back. I'll place this underneath the
dynamic table. I'll click at the end of
| | 03:54 | the table to the right and press Enter
to create a new paragraph. Then I'll go
| | 03:58 | back to the Insert panel and I'll
select the Data Category again and this time
| | 04:04 | I'll choose Recordset Paging.
| | 04:06 | You can add controls one at a time to
move to the first page, the previous
| | 04:10 | page, the next page or the last page or
you can choose an entire navigation bar
| | 04:15 | that includes links for all four
actions. That's what I'll do. I'll click
| | 04:20 | Recordsset Navigation Bar and here you
can select whether you want to use text
| | 04:24 | or images. I'm going to use simple text
for my links and I'll make sure that I
| | 04:29 | have selected the
rsTitles record set and click OK.
| | 04:34 | That creates the hyperlinks below the
table. I'll save the changes, run the
| | 04:39 | page in Live View again and then I'm
going to press the F4 function key to make
| | 04:44 | the panels go away and show as much of
the screen as I can. You should see the
| | 04:49 | hyperlinks appear at the bottom of the
table. Now I'm going to exit Live View
| | 04:53 | and to get as much screen space as
possible for this test, I'll open the page
| | 04:58 | in an external browser.
| | 04:59 | I will go to the toolbar. I'll click
the Preview button and preview in my
| | 05:04 | favorite browser. I'm using Firefox. I
can now see the hyperlinks at the bottom
| | 05:10 | of the page and I can click the
Next button, Next, Next and notice that
| | 05:17 | Dreamweaver has created code that only
displays the relevant hyperlinks. If you
| | 05:22 | are on the last set of data, you only
see links for first and previous and if
| | 05:26 | you are on the first set of data, you
only see links for next and last. But if
| | 05:31 | you are on a middle set of data or a
middle page, you will see all four links.
| | 05:36 | So that's a look at how to create a
record set paging system. You select the
| | 05:40 | number of records that you want to
display at a time when you generate the
| | 05:43 | dynamic table or the repeating region.
You can then display to the user the
| | 05:47 | number of records being shown and the
total number of records available and you
| | 05:51 | can add hyperlinks on the page that allow them
easily to page back and forth as they need to.
| | Collapse this transcript |
| Creating conditional regions| 00:00 | Dreamweaver CS4 includes server
behaviors that allow you to blocks certain
| | 00:05 | areas of the page from displaying when
you don't want them and to bring other
| | 00:09 | areas in. These are called conditional
regions. To demonstrate this, I'll start
| | 00:14 | with the file dynamictable, either PHP
or CFM depending on which application
| | 00:19 | server you are using. And as before, if
you don't have this file available you
| | 00:23 | can copy it into your
website from the Solutions folder.
| | 00:26 | Now, I'm going to save this file under
a new name, selecting File > Save As.
| | 00:32 | And I'll name the new file
conditionalregions using the appropriate file extension.
| | 00:37 | Now, I'm going to show you what happens
in the file if in fact there is no data
| | 00:41 | to display. I'm opening the Bindings
panel and I'm going to double-click on
| | 00:46 | the record set to edit it.
This opens the record set in the
| | 00:50 | Recordset Builder. I'll test the record
set to make sure I'm still getting data
| | 00:54 | back. And I am. And now, I'm going to
apply a filter that suppresses all of the
| | 00:58 | data. I'll set the filter on the
title_id column. This is the primary key
| | 01:04 | column of the database table. And a
primary key of column in mySQL typically
| | 01:09 | won't have a value of zero. And in fact I
know in this database table, it doesn't.
| | 01:14 | So now I'm going to filter the title_id,
comparing its value to an Entered
| | 01:19 | Value of zero. And now, I'll test my
data. And as expected I get back no data,
| | 01:26 | just what I want.
I'll click OK and click OK again.
| | 01:31 | Now watch what happens when I run the
current page with no data returned from
| | 01:36 | the server. I'll save the page and run
the page in Live View and you'll see a
| | 01:41 | very inconvenient display, an HTML table with
no data. It looks awkward and not quite right.
| | 01:49 | So now I'm going to use conditional
regions to fix the problem. First, I'm
| | 01:53 | going to wrap the HTML table in
conditional logic and I'm only going to display
| | 01:58 | the HTML table if in fact, there is
data to display. I'll click into the HTML
| | 02:03 | table, then I'll go down to the tag
selector and choose the <table> tag. Now
| | 02:08 | I'll go to the Server Behaviors panel
and I'll click the Plus button and I'll
| | 02:13 | select Show Region and Show If
Recordset Is Not Empty. Notice that there is
| | 02:19 | also conditional logic available for if
you are on the first page or not on the
| | 02:23 | first page, and similarly for if you are
on the last page or not on the last page.
| | 02:27 | I'll choose Show If Recordset Is Not
Empty. Then I'll indicate which record set
| | 02:32 | I'm examining, rs Titles, and click OK.
I'm also going to add text to display
| | 02:38 | if the record set is empty. I'll place
the cursor after the Headline and press
| | 02:43 | Enter to create a new paragraph. And
I'll type in the text, 'There are no
| | 02:47 | records to display.' With the cursor
inside the paragraph, I'll go to the tag
| | 02:52 | selector and click the <p> tag, and
I'll go to the Server Behaviors panel.
| | 02:58 | I'll click the plus button, and select
Show Region. And this time I'll only show
| | 03:04 | this region if the record set is empty.
| | 03:07 | Once again selecting the rsTitle
record set. I'll save the changes and Preview
| | 03:12 | the page in Live View. And this time I see
the string 'There are no records to display.'
| | 03:17 | So that's how you use conditional
regions in Dreamweaver using either
| | 03:20 | ColdFusion or PHP. The functional
behavior will look the same. The code being
| | 03:25 | used in the background as always is
very different, because there are major
| | 03:28 | differences between the way
conditional logic is expressed in PHP versus
| | 03:32 | ColdFusion. But the user sees the same thing
regardless of which application server you use.
| | Collapse this transcript |
| Creating a Master Detail page set| 00:00 | In this video I'm going to describe a
server behavior that Dreamweaver can use
| | 00:04 | that creates a Master and a Detail page.
A Master page is a page that displays
| | 00:09 | a list of available data displaying
either all of the data in a record set or
| | 00:13 | selected data. Then the Detail page
is a page that you navigate to from the
| | 00:18 | Master with a hyperlink. When you
arrive on the Detail page, it displays the
| | 00:22 | detailed fields or
values of the selected record.
| | 00:26 | For this demonstration I'll start with
two beginning pages. The simplerecordset
| | 00:30 | page already contains a simple record
set, and I'm going to copy that one as
| | 00:34 | the Master and then modify the record
set before using the Master Detail server
| | 00:38 | behavior. I'll use the Template file as
the basis for the Detail page creating
| | 00:44 | the file before I execute the behavior.
I'll start with the simplerecordset file.
| | 00:48 | If you are working in ColdFusion, you
can use the ColdFusion version of this
| | 00:52 | instead. And if you haven't done
these exercises previously to create these
| | 00:56 | files, you can get them
from the Solutions folder.
| | 00:58 | Now, with the simplerecordset file open,
I'll select File > Save As and I'll
| | 01:05 | name this file masterpage using
the appropriate file extension for my
| | 01:09 | application server. Then I'll go to the
template file, in my case template.php,
| | 01:15 | and select File > Save As. And this
file will be name detailpage.php or
| | 01:22 | detailpage.cfm if you're using ColdFusion.
Now, I'll return to the masterpage file.
| | 01:28 | Before I use the Master Detail page
behavior, I have to modify the record set
| | 01:33 | to make sure that it includes the
database table's primary key column. The
| | 01:37 | original record set did not include
that information. So I'll start at the
| | 01:41 | Bindings panel.
| | 01:42 | I'll open the Bindings panel, and then
I'll locate and double-click the record
| | 01:47 | set rsTitles to edit it. Notice that
currently the record set contains four
| | 01:53 | columns, title, price, notes, and
pubdate. I'll hold down the Ctrl key or the
| | 01:59 | Command key on the Mac, and I'll also
select the title_id, which is the primary
| | 02:04 | key column for the table. I'll test
the query, make sure I'm now getting all
| | 02:09 | the columns I want and click OK, and
then click OK. And I have now saved the
| | 02:14 | changes to the record set in the Master page.
| | 02:18 | Now the last step before I actually
generate the Master Detail page behavior is
| | 02:23 | to place the cursor in the masterpage
where I want the list of data to appear.
| | 02:27 | I'll click after the headline in the
content area and press Enter or Return to
| | 02:31 | create a blank area on the page. Now,
I'm ready for the behavior. The Master
| | 02:36 | Detail page behavior is available from
the menu. Select Insert > Data Objects >
| | 02:43 | Master Detail Page Set.
| | 02:46 | In the dialog that appears, make sure
that you've selected the rsTitles record
| | 02:50 | set. Then remove fields from the
masterpage. We don't want to display all this
| | 02:56 | data, only the title_id and the title.
So, I'll click on the price field or
| | 03:00 | column, and then click the
Minus button three times.
| | 03:04 | Now, I'll also indicate which column I
want to link from, and also I'll pass
| | 03:08 | the unique key title_id in both cases.
Next, I indicate how many records I want
| | 03:13 | to show in the masterpage and I'm going
to select All Records. This is the same
| | 03:17 | record paging behavior that's available
with the Repeat Regions and the Dynamic
| | 03:22 | Table behaviors.
| | 03:23 | Now I'm ready for the Detail page.
Because I already created my Detail page,
| | 03:28 | I'll click Browse, and I'll select
the file detailpage.php for PHP or
| | 03:33 | detailpage.cfm for ColdFusion. Then
I'll go down to the Detail Page fields, and
| | 03:38 | I'm going to leave all of the
columns displayed there and I'll click OK.
| | 03:44 | Now, I'm going to save and preview the
page in Live View. When you preview the
| | 03:49 | page in Live View, you can see the
visual result, and you can see the
| | 03:53 | hyperlinks have been created
correctly. If you move the cursor over the
| | 03:56 | hyperlinks, you'll see cascading
style sheet behaviors. That's causing the
| | 04:00 | underlining to appear and disappear.
| | 04:01 | You'll also see at the bottom of the
page a listing of the total number of
| | 04:05 | records, but Live View is a little
bit limited. If I click one of the
| | 04:11 | hyperlinks, nothing happens, and
that's because the Live View does not
| | 04:15 | represent a full web browser. So to
properly test this behavior, here are the steps.
| | 04:20 | I'll exit Live View. I'll go to the
Detail page and see how it was generated.
| | 04:26 | You will notice that the HTML table
that displays the detail data has been
| | 04:30 | placed below my content area. I need
to fix this before I do my test. So I'll
| | 04:36 | click into the table anywhere. Then
I'll go down to the Tag Selector below the
| | 04:41 | Design area and click the table tag.
| | 04:43 | Now, I'm going to cut the table tag to
the clipboard pressing Ctrl+X on Windows
| | 04:48 | or Command+X on Mac. Then I'll go to
the content area and click after the title
| | 04:54 | and press Enter, and then paste in
pressing Ctrl+V or Command+V on the Mac.
| | 05:00 | That places the Detail table where I wanted.
| | 05:02 | Now, I can do all sorts of cleanup
such as modifying the titles in the left
| | 05:06 | column. But that's all the functional
changes I need to make. I'll save my
| | 05:10 | changes. I'll go back to the Master
page. Now this time, I'm going to test in
| | 05:15 | an external browser that will
allow me to click the hyperlinks.
| | 05:20 | I'll go to the Preview button and
select my favorite browser. I'm previewing
| | 05:24 | the page in Firefox. Now, I can go to
any hyperlink and click it and I'll see
| | 05:29 | the detailed information for that
selected record. I'll click the Back button,
| | 05:34 | and you will see that I
return back to the Master page.
| | 05:37 | If you like you can also complete the
cycle by adding a hyperlink at the bottom
| | 05:41 | of the Detail page. I'll close the
browser and return to the detailpage. I'll
| | 05:47 | click below the HTML table that's
displaying the Detail data and type the
| | 05:51 | string, Return to master page.
| | 05:54 | I'll select that text, and then I'll go
down to the Properties panel, and I'll
| | 06:00 | click the Browse button to select the
page I want to link to. I'll choose the
| | 06:05 | masterpage that I just created.
I'll save the changes. I'll go back to
| | 06:11 | masterpage and preview that page in the
browser again. I'll click in to any of
| | 06:17 | the titles and see the details, and
then click the link to return to the
| | 06:21 | masterpage. So now you have a full cycle
going from Master to Detail and back again.
| | 06:27 | Before finishing up this exercise, I
would like you to show you the code that
| | 06:30 | was generated in the Master table.
I'm going to select the variable of the
| | 06:34 | title_id that's hyperlinked right now.
Then I'll go to Code view and show you
| | 06:39 | how that code is constructed.
| | 06:41 | In PHP, a hyperlink is generated using
a simple literal HTML a tag that stands
| | 06:47 | for anchor, and then a href attribute
that points to the page you want to link
| | 06:52 | to and then after a Question Mark, a
variable that is populated with a dynamic
| | 06:57 | value from the database table.
| | 06:59 | In PHP, this is done using an echo
command. The same code in ColdFusion will be
| | 07:04 | very similar, but instead of the echo
command, you'll see simply a reference to
| | 07:08 | the name of the column wrapped in
pound signs, prefixed by the name of the
| | 07:12 | query object that's being looped through.
| | 07:14 | So that's how the Master Detail page
system works. It turns into a really good
| | 07:18 | reference for understanding how to
build dynamic drill-down hyperlinks to
| | 07:22 | navigate from one page to another
passing unique IDs from one page to another,
| | 07:27 | so that you can get a detailed
information in a data drill-down sort of interface.
| | Collapse this transcript |
|
|
6. Building Data Entry SystemsUnderstanding data entry systems| 00:00 | In this chapter of the video series,
I'm going to describe various ways to
| | 00:04 | create data entry systems for a
dynamic website. A data entry system on the
| | 00:08 | web, typically, consists of multiple
pages: a List page which shows existing
| | 00:13 | data in a database table, an Update
page that updates the data in the table, an
| | 00:18 | Insert page that adds new data and a
Delete page that removes data from the table.
| | 00:24 | In this video, I'm going to start by
creating the List page using a record set
| | 00:28 | and a repeating region. I'll be
starting from the template page that was
| | 00:32 | created in an earlier chapter. If you
don't have this page available, you can copy
| | 00:37 | it over from the Solutions folder into
your website. I'll be working in PHP,
| | 00:41 | but the instructions will
be the same for ColdFusion.
| | 00:44 | With the template file opened, go to
the menu and select File > Save As and
| | 00:51 | name the file titlelist.php or
.cfm. Now add a record set, go to the
| | 00:59 | Bindings panel. If the panel isn't
currently opened, go to the Window menu and
| | 01:04 | select Bindings. In the Bindings panel,
click the Plus button and create a new
| | 01:08 | record set. Make sure you are in the
Simple Recordset Builder, not the Advanced.
| | 01:13 | Then set the name of the record set as
rsTitles, select the titles table, click
| | 01:18 | Selected and only choose the first two
columns. Holding down the Ctrl key on
| | 01:24 | Windows or Command on Mac, click
title_id and title and sort the data on the
| | 01:30 | title column. Click the Test button to
test your record set, click OK and click OK.
| | 01:38 | So now the page has a record set to
work from and the next step will be to
| | 01:42 | create a dynamic table. Click after
the existing content and press Enter or
| | 01:46 | Return. Now go to the menu and select
Insert > Data Objects > Dynamic Data >
| | 01:54 | Dynamic Table.
| | 01:56 | Make sure you have chosen the rsTitles
record set, select All records, set the
| | 02:01 | Border at 1, Cell padding and Cell
spacing both at 5 and click OK. Now delete
| | 02:09 | the extra paragraph that's between the
table and the headline. Click into the
| | 02:13 | paragraph, check the Tag Selector to
make sure the paragraph tag is selected and
| | 02:18 | press Backspace or Delete.
| | 02:20 | Now modify the headline as follows.
Select its existing content and delete it
| | 02:25 | and type in the value 'Available Book
Titles.' Change the header cells in the
| | 02:33 | table as follows. Change the value in
the first cell to Title ID and we are
| | 02:38 | just making this friendly text and then
capitalize the word title in the second cell.
| | 02:43 | Then select the entire row containing
the headers. Then click into the first
| | 02:48 | cell of the header row and drag to the
second cell to select the entire row.
| | 02:53 | Then release the mouse button, go to
the Properties panel and click the Header
| | 02:58 | option and that will center
and bold the text in those cells.
| | 03:03 | One last step for this page. Click to
the right of the table and press Enter or
| | 03:07 | Return to create a new paragraph and
then type in the text 'Insert New Title.'
| | 03:13 | We will be using that text as a
hyperlink in a later exercise to go to a data
| | 03:19 | entry form that allows the user to
insert records. Save your changes and then
| | 03:24 | preview the page using Live
View or an external browser.
| | 03:28 | Either way, you should see that the
table displays all of the data in the
| | 03:31 | table, alphabetized by title, and you
should see the text 'Insert New Title' at
| | 03:36 | the bottom of the page. If you have
this much done, you are now ready to go to
| | 03:41 | the next set of exercises to insert,
update and delete data in the database table.
| | Collapse this transcript |
| Preparing a record insert form with recordsets| 00:00 | Dreamweaver CS4 offers two different
approaches for creating a data entry form
| | 00:05 | that allows user to add new data
to a server-side database table.
| | 00:09 | In the first approach you create the
entire data entry form and all of the
| | 00:12 | server behaviors for adding the data
and handling navigation after the adding
| | 00:16 | operation, all in one step. In the
second approach, you create the data entry
| | 00:21 | form yourself and then apply the
server behaviors. The wizard approach, the
| | 00:26 | first one, does more of the work for
you but the resulting data entry form
| | 00:30 | always looks the same. In the second
approach you have more fine control over
| | 00:34 | the design of your page and you just
have to know a little bit more about how
| | 00:38 | to construct the form and be
willing to do some of the work yourself.
| | 00:42 | In this video, I'm going to prepare to
create an insert form and then in the
| | 00:45 | following videos I'll show you the two
different approaches. I'll be starting
| | 00:49 | from the file template.php or if you
are working in ColdFusion template.cfm,
| | 00:55 | the steps that I'm gong to follow
will be the same for both application
| | 00:58 | servers. I'll start off by saving this
file under a new name. I'll select File
| | 01:05 | > Save As and I'll name the file
titleinsert. Now the insert form is going to
| | 01:13 | require a couple of record sets I'm
going to take a look at the structure of
| | 01:17 | the database.
| | 01:18 | The insert form I'm going to be
creating is for the titles table. The Titles
| | 01:23 | table has three key columns, one
primary key that's the unique identifier for
| | 01:28 | the table and two foreign keys. A
foreign key is a column that links to another
| | 01:34 | table in the database structure. In
the Titles table there is a column named
| | 01:38 | au_id that links to the authors
table and it's au_id column and there is
| | 01:43 | another column called pub_id that links to
the publishers table and it's pub_id column.
| | 01:50 | Before I create the data entry form,
I'm going to populate this page with
| | 01:54 | record sets from both of these tables
so that I can then fill in lists of the
| | 01:59 | available values in the data entry form
from which the user can choose the data
| | 02:03 | they want. Here are the steps. I'll go
the Bindings panel and if your Bindings
| | 02:08 | panel isn't currently available you
can go to the Window menu and select
| | 02:12 | Bindings. Then I'll click the plus
button, choose Recordset query and the first
| | 02:18 | record set will be for rsPubs. Make
sure you have chosen your dw_bookstore
| | 02:24 | Connection, if it isn't already selected.
| | 02:26 | Open the list of Tables and choose
Publishers, click Selected, hold down the
| | 02:31 | Ctrl key on Windows or Command on Mac
and choose pub id and the pub name. Sort
| | 02:36 | on the pub name column, test your
record set to make sure you are seeing both
| | 02:40 | columns and that the data is
alphabetized, click OK and click OK. Now create
| | 02:47 | the second record set. Click the plus
button, choose Recordset query, name this
| | 02:53 | record set rsAuthors, and choose the
dw_bookstore Connection if it isn't
| | 02:59 | already selected. The Authors table
should be selected by default but if not
| | 03:04 | selected, choose Selected for the list
of columns. Hold down Ctrl or Command
| | 03:10 | and select the first three columns au_
id, au_lname, and au_fname and sort by
| | 03:17 | au_lname.
| | 03:19 | Once again, test your record set,
click OK and click OK. So now you have the
| | 03:25 | two record sets you will need to fill
in the controls in the data entry form
| | 03:30 | and in the next video, I'll show you
how to create the data entry form and all
| | 03:34 | of its server behaviors using
the record insertion form wizard.
| | Collapse this transcript |
| Using the Record Insertion Form wizard| 00:00 | In this video I'll show you how to
use the record insertion form wizard.
| | 00:04 | Starting from a page that has the
required record sets, the insertion form
| | 00:08 | wizard will create the data entry
form and generate the server side code to
| | 00:12 | insert data to the database and navigate back
to a list page when the insertion operation is done.
| | 00:18 | I will start from the file titleinsert.php
or if you are working in ColdFusion,
| | 00:24 | titleinsert.cfm, and I'll save this
file under a new name, selecting File >
| | 00:30 | Save As and I'll name it
titleinsertwithwizard. Now remember that this page
| | 00:38 | already has the following bindings,
rsPubs for publishers and rsAuthors for
| | 00:43 | authors. Go to the menu, and select
Insert > Data Objects > Insert Record >
| | 00:51 | Record Insertion Form Wizard. In the
Record Insertion Form Wizard, select the
| | 00:57 | database connection dw_bookstore and
the table Titles. This is the table into
| | 01:03 | which you will be inserting data, then
browse for the page you want to go back
| | 01:08 | to after the data insertion operation
is complete. Click the Browse button and
| | 01:14 | select the file titlelist.php or .cfm.
| | 01:19 | Now if you didn't do that previous
exercise where the title list page was
| | 01:22 | created, you can leave this value
blank and then fill it later on. Select the
| | 01:27 | File and now you are going to make some
changes to the form fields in the data
| | 01:31 | entry form that's going to be created.
Notice that by default all of the values
| | 01:36 | are displayed as text fields. For the
pub_id and the au_id fields you want to
| | 01:42 | use a pulldown list known in
Dreamweaver as a menu. Start at the pub_id field,
| | 01:48 | click on the row representing that
field and then go down to the bottom and
| | 01:52 | next to Display As, pull down the list of
available form controls and choose Menu.
| | 01:57 | Now click Menu Properties and in
the Menu Properties dialog box, choose
| | 02:02 | Populate Menu items from database.
Choose the rsPubs record set. The Labels are
| | 02:09 | the values that the user sees in the
menu in the form. Change the field for the
| | 02:13 | labels to pub name and leave the
values set to pub_id. That value will be
| | 02:18 | invisible to the user but will be
passed to the database when the form is
| | 02:22 | submitted and leave the last value blank,
select value equal to because we are
| | 02:27 | not setting default values in this form.
It's going to be a blank form when it
| | 02:31 | first opens, now click OK.
| | 02:35 | Follow the same set of steps for the au_
id column, click on the row for au_id,
| | 02:40 | change Display As to Menu, click Menu
Properties, select From Database. This
| | 02:49 | time choose rsAuthors, set the labels
from the last name of the author and the
| | 02:55 | values from au_id and click OK. There
are some other changes you could make.
| | 03:03 | For example, for each of the columns
you could take the time right now to
| | 03:05 | change the labels, I'll click into title
_id and change it there to title ID and
| | 03:10 | so on. But these are also changes that
you can make in design view quite easily
| | 03:15 | after the form has been generated. So
now click OK and that generates the data
| | 03:20 | entry form and all of its
functionality, but notice that depending on where
| | 03:24 | your cursor was located in the page,
the data entry form will not usually be
| | 03:29 | placed in the correct location.
| | 03:30 | So here is how you can fix it, click
anywhere into the generated data entry
| | 03:34 | form whether it appeared at the top or
the bottom of the page. Then go down to
| | 03:39 | the tag selector and choose the form
tag that wrap the entire table and all of
| | 03:44 | its controls and then cut that
content to the clipboard pressing Ctrl+X on
| | 03:49 | Windows or Command+X on Mac. Now click
into the content area after the headline
| | 03:55 | and press Enter and paste that content
into place pressing Ctrl+V or Command+V
| | 04:01 | on Mac. Save your changes and take a
look at the page in design view. I press
| | 04:07 | the function key, F4 to hide the panels.
| | 04:10 | Now test the page in an external
browser, click the Preview button and choose
| | 04:15 | your browser and when the page opens
you should see the data entry form appear
| | 04:21 | and you should see the values in the
list in pub_id and in au_id. Notice,
| | 04:27 | however, that we are only seeing
the last name of the author. Before we
| | 04:31 | continue testing, I'm going to show
you how to go into the code and add more
| | 04:35 | information within the list control.
Close the external browser, then click on
| | 04:40 | the menu item for au_id and then click
the Code button to look at the page in
| | 04:45 | Code View. By clicking the item in
design view then go into code view, you will
| | 04:50 | highlight the code that's
generating that content.
| | 04:53 | Now notice, regardless of whether you
are working with PHP or ColdFusion there
| | 04:57 | will be some code that's looping
through the record set for the authors and
| | 05:01 | outputting an Option tag for each author.
Locate the code that's outputting the
| | 05:07 | author's last name. In PHP, this will
be a PHP code block and in ColdFusion it
| | 05:12 | will be an expression wrapped in
pound signs. Select the entire code that's
| | 05:17 | representing the author last name
and copy that to the clipboard pressing
| | 05:20 | Ctrl+C or Command+C. Then place the
cursor after the code and in PHP that's
| | 05:26 | after the code lock, in ColdFusion
it's after the last pound sign. Manually
| | 05:30 | type in a comma and a space, paste in
that code and change the new version from
| | 05:36 | au_lname to au_fname. Save your
changes and run the page in the external
| | 05:42 | browser again.
| | 05:42 | So we are almost done, there is one
more change to make in the form before we
| | 05:48 | test it completely. Close the browser
again, go back to Design view and now
| | 05:54 | replace the existing headline with a
literal string of Insert New Book Title.
| | 06:02 | With the cursor in the headline make
sure that's it still a heading 1 format,
| | 06:07 | you can check that in the Properties
panel and now we are ready to test the
| | 06:11 | form by adding new data to the database.
| | 06:13 | I will once again preview the page in
the browser and I'm going to type in some
| | 06:19 | values. The Title ID is restricted to
six characters wide in the database so
| | 06:24 | I'll put in a value of AA1111 and in
the Title, I'll put in About Aardvarks.
| | 06:32 | I'll set the Pub_id to anything I like
and the Au_id to anything I like. The
| | 06:38 | Price must be numeric so I'll type in a
value of $14.95. I'll type in a string
| | 06:44 | of 'notes about aardvarks' for the Notes
and a Pubdate of 5/1/2008 and I'll click
| | 06:50 | the Insert Record button. It takes
just a moment to execute the operation and
| | 06:55 | after you have navigated back to the
title list page you should see that your
| | 06:59 | new record has been inserted into the database.
| | 07:03 | So that's a look at how to create the
insert form using the Insertion Form
| | 07:06 | Wizard. It creates the form for you and
all of the server-side code to add the
| | 07:10 | data to the database and return the
user to the list page so that they can see
| | 07:15 | the new data that they have added.
| | Collapse this transcript |
| Creating a custom data entry form| 00:00 | In this video, I'm going to describe
an alternative approach to creating an
| | 00:04 | insert form, creating a form from
scratch using Dreamweaver's design tools and
| | 00:09 | then applying a server behavior
called the insert form behavior.
| | 00:12 | I will start with the title insert page,
which already has the record sets for
| | 00:17 | the authors and the publishers tables.
As I showed in the previous video, these
| | 00:21 | record sets are required so that you
can present menus or lists of available
| | 00:25 | data from which the user can choose.
| | 00:27 | Here are the steps, starting with the
title Insert page. I'll save it under a
| | 00:31 | new name, selecting File > Save As and
I'll call it titleinsertform. Now I'll
| | 00:39 | place the cursor after the headline
and press Enter. And I'm going to create
| | 00:44 | the form in this area. I'll be using
the Insert panel for this exercise. I'll
| | 00:48 | go to the Insert panel and if you are
working in the Designer layout as I'm
| | 00:52 | here, just double click on the Insert
tab to open it up. Then select the Forms
| | 00:57 | category. The Forms category
includes tools for creating a form and then
| | 01:02 | populating it with a variety of form controls.
| | 01:04 | I will click the Form button and you
will see that the form is represented as a
| | 01:09 | checked box. Make sure that you put all
of your form controls within the form.
| | 01:14 | Now before I add more form controls,
I'm going to create an HTML table,
| | 01:19 | typically you line up your form using
an HTML table so that all of the labels
| | 01:23 | line up evenly on one side and
all of the controls on the other.
| | 01:27 | In the Insert panel, I'll select the
Common category and I'll choose Table. In
| | 01:34 | the Table wizard I'll put in 6 Rows
and 2 Columns and I'm going to leave the
| | 01:39 | Table width alone. I'm going to let it
size automatically. I'll leave the Cell
| | 01:43 | padding and Cell spacing alone; I'll
set the Border thickness to 0 because I
| | 01:47 | want to layout the form without seeing
the borders around the form this time.
| | 01:51 | I'll set the Header to None and the
Caption and Summary will be left alone and
| | 01:55 | I'll click OK.
| | 01:57 | Now I'm going to switch to
Dreamweaver's Expanded Tables view. I'll right-click
| | 02:02 | on the table and select Table,
Expanded Tables Mode. This allows me to click
| | 02:08 | into the cells easily in Design view,
but it doesn't change anything about the
| | 02:12 | way the table will be represented in
the browser and if the notification about
| | 02:16 | Expanded Tables Mode opens,
I'll click OK to close it.
| | 02:20 | Now I'm going to click into the left
column and type in some labels. First
| | 02:24 | Title ID, then I'll press Tab two times
to go to the next row. Then Publisher,
| | 02:31 | then Author, then Price, then
Publication Date. Remember that if you are not
| | 02:40 | sure which fields are available
that you need to insert, go back to the
| | 02:44 | Databases panel, look at the tables
list, open the table and you will see all
| | 02:50 | of the available values that are there.
| | 02:53 | Notice that I have missed one title
that's pretty important. So I'll select the
| | 02:57 | current row, right-click, select
Table and then Insert Row. Then I'll click
| | 03:04 | into the new row and type in Title and
the other one that I don't have yet is
| | 03:09 | notes, so I'll click into that last
empty row and type in Notes and I'm going
| | 03:14 | to need one more row at the bottom. To
create that I'll just press Tab twice.
| | 03:19 | So now I have one row for each column
in the table and one row for the buttons
| | 03:24 | at the bottom.
| | 03:25 | Now I'm going to add the form controls.
I'll close up all the other panels and
| | 03:31 | go back to the Insert panel and switch
back to the Forms category. Now for each
| | 03:36 | item that I want to add in, I'll click
into the cell and then I'll click the
| | 03:40 | form control I want. The first one
will be named Text Field, and I'm going to
| | 03:45 | name each of the controls the same
as their database column names in the
| | 03:49 | server-side database table. The title
ID is title_id. You can ignore all the
| | 03:56 | other settings. I'll do the same
thing for Title. Clicking into the cell,
| | 04:02 | clicking the Text Field option,
setting the ID as title and clicking OK.
| | 04:07 | I will skip over Publisher and author
for the moment and add Text Field for
| | 04:12 | both Price and for Publication Date.
Remembering the Publication Date in the
| | 04:19 | database table is called pubdate. Now
for the Publisher and for the Author, I'm
| | 04:24 | going to use what Dreamweaver
calls a menu. It works like this.
| | 04:28 | I will click into the row where I want
to create the menu and then I'll go to
| | 04:32 | the Insert panel and click List/Menu
and I'll assign the ID to match the
| | 04:37 | database column name, pub_id. Now here
is how I'm going to populate the control
| | 04:44 | with data from the record set. I'm
going to click off the control and then
| | 04:48 | click on it again and notice that
results in updating the Properties panel and
| | 04:53 | allowing me to add data to the control.
| | 04:55 | Within the Properties panel, I'll click
the Dynamic button and I'll fill in the
| | 04:59 | values. When you create a control in
this fashion, you can combine Static
| | 05:03 | options with Options from a record set.
I'm going to choose Options from the
| | 05:07 | record set, choosing the rsPubs record
set and then just as I did when I was
| | 05:13 | using the Record Insertion wizard. I'm
going to set the Values to pub_id and
| | 05:17 | the Labels to pub_name and because this
is a data entry form for inserting new
| | 05:22 | data, I'll leave the
default value alone and click OK.
| | 05:26 | Now I'll do the same thing for the
Author. I'll click into the row, I'll go to
| | 05:31 | the Insert panel and select List/Menu,
I'll put in the name of the column,
| | 05:35 | au_id and click OK. I'll click off the
control and click on it that brings up
| | 05:43 | the Properties panel for the control.
I'll click Dynamic. I'll choose Options
| | 05:50 | from record set and rsAuthors, setting
Values to au_id and Labels to au_lname,
| | 05:58 | click OK. And now exit Expanded Tables
Mode by clicking the exit link at the
| | 06:03 | top of the screen and click Live View
and take a look at your form. You should
| | 06:09 | see the items appear in the list as before.
| | 06:12 | As in the previous exercise, if you
wanted to update the author list to show
| | 06:16 | both the last name and the first name
you would do that in the code. I'll exit
| | 06:20 | from Live View and add two more controls;
I'll click into the row for the notes
| | 06:25 | column. I'll go back to the Insert
panel and this time insert a Textarea. A
| | 06:30 | Textarea is a long text field. It
allows user to type in longer values. I'll
| | 06:35 | give this a name of notes and finally
I'll add in a button. I'll click into the
| | 06:40 | last row into its second cell. Then
in the Insert panel, I'll click Button,
| | 06:46 | I'll give the Button an
ID of submit and click OK.
| | 06:50 | I will click off the control and then
on it to see the Properties panel and
| | 06:55 | make sure that the Action is set to
Submit form that means that the form will
| | 07:00 | be submitted when the user clicks the
Button and if I want to change the text
| | 07:04 | on the Button that's the Button's value.
I'll click the word Submit and I'll
| | 07:08 | change it to Insert New Title.
| | 07:12 | One last step, I'll go up to the
headline and I'll replace the Welcome to
| | 07:17 | message with the text Insert New Book
Title. And then with the cursor anywhere
| | 07:23 | in that text, I'll check the Properties
panel and make sure that the format is
| | 07:27 | still set to Heading 1. I'll save the
change and then I'll look at the page
| | 07:32 | once again in Live View
and there is my completed form.
| | 07:36 | Now in the next video, I'll show you
how to take this completed form and apply
| | 07:40 | the server behavior to insert data to the form.
| | Collapse this transcript |
| Using the Insert Record server behavior| 00:00 | After you have created your own custom
data entry form, you can then apply the
| | 00:05 | Insert Form behavior that will add
the server-side code to add the data to
| | 00:09 | database and navigate back to a list
page of your selection. In this exercise
| | 00:14 | I'm starting with the file
titleinsertform that I created in the previous
| | 00:18 | video. With that file open I'll
select File > Save As and I'll name the new
| | 00:24 | file titleinsertformbehavior.
| | 00:28 | Now I'll test the page in Live View to
make sure that it's correctly presenting
| | 00:32 | the data from the Publishers and from
the Authors tables and then I'll exit
| | 00:37 | Live View and I'll apply the server
behavior. Here are the steps you can add
| | 00:42 | the server behavior either from the
menu or from the Insert panel. From the
| | 00:47 | menu select Insert > Data Objects >
Insert Record > Insert Record or if you
| | 00:54 | prefer to use the Insert panel you can go there.
| | 00:58 | You can open the Data category,
choose Insert Record and once again Insert
| | 01:03 | Record. The Insert Record dialog box
asks for the following information. First
| | 01:08 | you need to select which form on the
page you are getting the values from. If
| | 01:13 | the page has more than the one data
entry form, you will select the form by its
| | 01:17 | id or name. Then set the database
Connection and the Table, this is a data
| | 01:22 | entry form for the title's
table. So I'll select that Table.
| | 01:26 | Notice that Dreamweaver matches up the
form controls to the database columns on
| | 01:30 | the server by their name. If you have
named the form controls the same as the
| | 01:34 | database column names the match is
automatic. If you didn't, you can match them
| | 01:39 | up manually by selecting a column
from the list and then selecting the
| | 01:42 | appropriate form control. You can also
designate what the data type of each of
| | 01:47 | column is. Once again Dreamweaver
usually gets this right and it has in this
| | 01:51 | case setting the price to a Double which is
a numeric value and the pubdate to a Date.
| | 01:57 | And then just as with the Form
Insertion Wizard, you can also indicate which
| | 02:01 | page you want to navigate to once the
insertion operation is complete. I'll
| | 02:06 | click the Browse button and then
select the title list either .PHP or .CFM
| | 02:12 | depending on which application server,
we are using and then I'll click OK to
| | 02:16 | apply the behavior. You won't see much
of a change in the Design View, but you
| | 02:21 | now go to the Server Behaviors panel
you will see that the New Insert Record
| | 02:25 | behavior is listed there and in fact
you could have added the behavior from
| | 02:29 | this environment as well.
| | 02:31 | Now I'm going to test the page. I'll
save the changes and I'll run the page in
| | 02:36 | the browser clicking the Preview button.
When the form opens, I'll once again
| | 02:43 | add new values this time entering
AA2222. Make sure that you only apply value
| | 02:49 | no longer than six characters in
that column and then a Title Aardvarks
| | 02:54 | continued. A Price, a Publication Date
and some Notes and then click the Insert
| | 03:07 | New Title button. After a moment, the
list page should open and you should see
| | 03:14 | a your new data listed in the table.
| | 03:16 | Now we are going to make one change
to the Title list page. I'll exit the
| | 03:20 | browser and I'll go to the Files panel
and open the file titlelist. Remember
| | 03:28 | when I created the titlelist page I
added the text Insert New Title at the
| | 03:32 | bottom of the page. I'm now going to
turn that into a hyperlink, so that I can
| | 03:37 | easily go from the list page to the insert page.
| | 03:41 | With the text selected I'll go down
to the Properties panel, I'll click the
| | 03:45 | Browse button to browse for a file and
I'll choose my new page that I have just
| | 03:50 | created titleinsertformbehavior.php
or .CFM and I'll click OK and then I'll
| | 03:58 | test the page in the external browser
and at the bottom of the page I see the
| | 04:06 | link and I can click the link to go to
my form and I can now add new data and
| | 04:11 | when I'm done, I'll come right back to
the list page and see the data displayed.
| | 04:15 | I now have a complete system for
adding new data to the database and in the
| | 04:20 | following videos I'll show you how
to add behaviors for updating data and
| | 04:24 | deleting data.
| | Collapse this transcript |
| Using the Record Update Form wizard| 00:00 | Just as when creating a data entry
form that allows users to insert data into
| | 00:05 | a database table, when you create a
form that will allow the user to update the
| | 00:08 | data, you can also choose between using
a wizard that creates the form and all
| | 00:13 | of the server behaviors in a single
step or you can create your own custom form
| | 00:17 | and then apply the server behaviors.
| | 00:19 | In this video, I'll show you how to
use the Record Update Wizard. This wizard
| | 00:23 | will take a page that already has the
data that needs to be updated, that is,
| | 00:27 | a record set containing a single row from
a database table, and it will generate
| | 00:31 | a complete data entry form and all
of the required server behaviors.
| | 00:35 | I am starting with the page Title Insert.
This page already has two record sets.
| | 00:42 | Just as with the insert form that I
built previously, I'm going to use these
| | 00:46 | record sets to populate lists of
available data that will be a part of the form.
| | 00:50 | Now, I'm going to save this page with
a new name. I'll select File > Save As,
| | 00:57 | and I'll give the page a new name of
titleupdatewithwizard. Now, I'm going to
| | 01:02 | add another record set. This record set
will contain the data for a single row
| | 01:07 | of the database table.
| | 01:08 | I will go to the Bindings panel and
click the Plus button and select Recordset
| | 01:13 | (Query). I'll name the record set
rsTitle. Notice that it's a singular name
| | 01:19 | rather than rs Titles because it's
going to contain a single row of data. I'll
| | 01:24 | set the Connection to dw_bookstore and
the Table to titles, and I'm going to
| | 01:29 | leave all of the columns selected
because I want the user to be able to modify
| | 01:33 | all of the data in the database table.
| | 01:36 | Now, I'm going to apply a Filter. The
Filter should always be applied here to
| | 01:40 | the primary key column of the database
table. The primary key column, that is,
| | 01:45 | the unique identifying column, is title
_id and I'm going to set the Filter to
| | 01:50 | match a URL Parameter that's a value
that's passed in as part of a hyperlink,
| | 01:55 | and the name of the URL Parameter will
match the database column name title_id.
| | 02:01 | Now, I'm going to click the Test
button, and notice that I'm prompted for a
| | 02:05 | value that I want to filter on. You
must pass in a value here of an existing
| | 02:10 | record if you want to see data
returned correctly. I'll set the test value as
| | 02:14 | BU1032, which I know is a valid title
ID in one of the records, and I'll click
| | 02:19 | OK and I'll confirm that I'm
getting back a single row of data from the
| | 02:23 | database table. Then I'll click OK and
click OK again to close the Recordset Builder.
| | 02:31 | Now, I'm ready to apply the wizard.
I'll go the menu and select Insert > Data
| | 02:37 | Objects > Update Record > Record Update
Form Wizard. Here is the Wizard dialog
| | 02:44 | box. As with most of these wizards that
have to do with dynamic data, you must
| | 02:49 | select a Connection, and a Table in
this case the one you want to update. The
| | 02:53 | Connection should be dw_bookstore
again and the Table should be Titles. The
| | 02:58 | Select Record From option asks you
which record set the data to update is
| | 03:03 | coming from, and I'll select rsTitle,
which contains the one and only item.
| | 03:08 | You also need to indicate which is
the primary key column, here called the
| | 03:12 | Unique Key. And Dreamweaver will
usually get this right, particularly with
| | 03:16 | MySQL. Set the Unique key column to
title_id and then click Browse to indicate
| | 03:22 | which page you want to go to after
the update is complete. I'll click the
| | 03:26 | Browse button, and I'll select the
titlelist page either .php or .cfm.
| | 03:32 | Now, I'm going to indicate what kind
of form controls I want to use for each
| | 03:36 | item. Notice that the title_id is
displayed as pure Text. You never update or
| | 03:42 | change the Primary Key or the Unique
Key column. So that value simply displayed
| | 03:47 | but left alone.
| | 03:49 | The title is a text field. That's fine.
Now, for the pub_id column, just as in
| | 03:54 | the insert form, I'm going to use what
Dreamweaver calls a menu. I'll select
| | 03:59 | the list of form controls and
choose Menu. Then I'll click the New Menu
| | 04:03 | Properties button, and as before I'll
set the Menu items From database and
| | 04:09 | indicate that I want to pull the data
for this column from rsPubs, getting the
| | 04:14 | labels from pub_name and the values from pub_id.
| | 04:17 | Notice that there is an item here
called Select value equal to, and I'll scroll
| | 04:22 | down to the end and I'll show you that
we are matching the pub_id value of the
| | 04:26 | current record set. If you wanted to
change this for any reason, you would
| | 04:29 | click the little Lightning Bolt button,
and then select the column that you
| | 04:33 | wanted to match.
| | 04:35 | So I'll cancel out of that and then
click OK to save the change, and then I'll
| | 04:39 | go through the same steps for the au_id
column. I'll set the Display As option
| | 04:43 | to Menu, click Menu Properties,
Populate the menu items from the database. This
| | 04:51 | time choosing the record set rsAuthors.
I'll set the labels from au_lname and
| | 04:58 | the values from au_id, check the code
that's populating the current value as
| | 05:03 | au_id and then I'll click OK.
| | 05:05 | I will make one more change. For the
Notes column, I'll change this value from
| | 05:12 | a Text field to a Text area because
this is a longer value, and I want the user
| | 05:16 | to be able to type in as
much text as they need to.
| | 05:19 | Those were all the changes. Now, I'll
click OK and generate my form page. As in
| | 05:25 | the previous example, when the form is
generated, it will drop into a place in
| | 05:29 | the page other than the content area.
So I'll click into the form anywhere I
| | 05:34 | like, then I'll go down to the Tag
Selector and make sure I click the
| | 05:38 | surrounding form tag and then cut to
clipboard. Then I'll place the cursor
| | 05:43 | inside the Content Area, press Enter to
create a new paragraph, and paste from
| | 05:48 | the clipboard, and that places the
content that is the data entry form in the
| | 05:52 | correct location in the page.
| | 05:55 | Now, I'll save and test the page. I'll
preview it in an external browser. Now,
| | 06:02 | in ColdFusion, you might see a
default record show up, but if you don't see
| | 06:06 | that happen in PHP, just go up to
the browser's address field and add the
| | 06:10 | following to the URL. Put in a question
mark at the end of the URL and then put
| | 06:15 | in the name of the field that's
expected to filter on, title_id in lower case,
| | 06:20 | and then an equals operator, and then
the value of the primary key column in
| | 06:24 | the row you want to test.
| | 06:25 | I will run the page again with those
values and you should now see that the
| | 06:30 | values from the database row show up
in the form. I'll make a very simple
| | 06:34 | change I'll go up to the Title, and
I'm just going to modify the title, so I
| | 06:38 | can see the value easily when I return
to the List page. I'll change the title
| | 06:42 | from the Busy Executive's Database
Guide to DB guide and then I'll click the
| | 06:47 | Update Record button, which will take
me back to the Book List page, and then
| | 06:52 | I'll locate the record that I just
updated and show that it's been changed in
| | 06:56 | the database and the new
change is reflected in the list.
| | 06:59 | So that's how you use the wizard to
generate the data entry form and all of the
| | 07:04 | required server behaviors in a single
pass. In the next set of videos, I'll
| | 07:08 | show you an alternative approach
creating the form yourself, and then applying
| | 07:13 | the server behaviors after the fact.
| | Collapse this transcript |
| Displaying existing data in form controls| 00:00 | In this video, I'll describe how to
take a custom data entry form and prepare
| | 00:04 | it for use as an update form. Here
are the steps you'll need to follow.
| | 00:08 | Starting with an existing data entry
form, you'll need to add a record set that
| | 00:12 | represents a single row from a
database table. You'll need to modify any form
| | 00:17 | controls that present the primary key,
and instead simply display the primary
| | 00:21 | key. You'll need to add a hidden form
control that provides the primary key
| | 00:26 | value when the form is posted to the
server. Then you'll need to go through
| | 00:30 | each of the controls in the form and
set them to display the existing data from
| | 00:34 | the selected database row.
| | 00:35 | I am going to start in this video with
the file titleinsertform.php, which I
| | 00:40 | created in a previous video. If you
don't have this file available and you do
| | 00:43 | have access to the exercise files,
you can copy this file over into your
| | 00:47 | website. With the file open, I'll
select File > Save As and I'll name the new
| | 00:52 | file titleupdateform.
| | 00:57 | Now, I'm going to make some cosmetic
changes. I'll go to the Headline above the
| | 01:01 | form and change it to Update Book
Title, and I'll go to the Submit button
| | 01:05 | that's a part of the form, and I'll
change its value from Insert New Title to
| | 01:09 | Update Title.
| | 01:11 | Now, I'm going to add the record set
that contains the single row that we want
| | 01:15 | to update. I'll go to the Bindings
panel and click Plus and select Recordset
| | 01:20 | (Query). I'll set the record set
name to rsTitle. Just as in the previous
| | 01:25 | video, this record set is going to
contain a single row from the database table.
| | 01:30 | I'll set the Connection to dw_bookstore
and the Table to titles. I'll leave
| | 01:35 | the Column selected to All, and I'll
Filter on the title_id column. That's the
| | 01:41 | primary key or uniquely identifying
column for this database table and I'll
| | 01:46 | match the title_id to a URL Parameter.
That's a value that's passed into this
| | 01:51 | page as part of a hyperlink. I'll set
it to match a parameter with the same
| | 01:55 | name as the database column name title_id.
| | 01:59 | Now, I'll test the record set. I'll
once again enter a value for a primary key
| | 02:03 | column that I know exists and I'll
click OK and I'll see that I get back to
| | 02:09 | single row. I'll click OK and click OK again.
Now, that record set is a part of the page.
| | 02:16 | Now, for the primary key column, you
don't want to provide a data entry form
| | 02:20 | control. The user shouldn't be able to
change that value. So I'm going to click
| | 02:24 | on the text field that represents the
Title ID and delete it. Then I'll go to
| | 02:30 | the Insert panel. I'll select Forms,
and I'll add a Hidden Field. A Hidden
| | 02:36 | Field is a field that contains a value
that the user can't see, and that they
| | 02:40 | can't change, but it will be passed to
the server when the form is submitted.
| | 02:45 | With the Hidden Field selected, I'll go
down to the Properties panel and I'll
| | 02:48 | change the name of the Hidden Field
to match the database column name. Then
| | 02:53 | I'll set its value by clicking the
button with the lightning bolt that lets me
| | 02:56 | bind to Dynamic Recordset. I'll go
to the (rsTitle)Recordset and choose
| | 03:02 | title_id and click OK and that value is
now being passed as a part of the form.
| | 03:08 | I'll also place the cursor before the
Hidden Field, and then go to the Bindings
| | 03:13 | panel. I want the user to see the
title_id in this case because in this
| | 03:18 | database table structure, the primary
key column is a known value. That is, the
| | 03:22 | user can see it and it's meaningful.
If you were working with the database
| | 03:26 | table structure where the primary key
was a simple, auto-incrementing numeric
| | 03:30 | value, you probably wouldn't show it
to the user. I'll click on that item
| | 03:34 | title_id, and then click the Insert
button at the bottom of the Bindings panel.
| | 03:39 | Now, I'm going to go through the text
fields in the form and for each text
| | 03:43 | field, I'll assign the current value
for that control. I'll go to the Title
| | 03:48 | control. I'll go down to the
Properties panel and click the Bind to Dynamic
| | 03:52 | Source button and I'll choose
the appropriate column, title.
| | 03:56 | I'll do the same thing for price
and then click OK. Now, I'll set the
| | 04:01 | Publication Date, clicking the control.
Go down to the Properties panel, click
| | 04:06 | the Bind button, choose the pubdate column
and then if you like, you can apply a format.
| | 04:12 | For example, I'm going to choose
a format that supplies the date in
| | 04:16 | month/day/year. Then I'll click OK.
I'll click the Notes control. This is a
| | 04:22 | text area control in the Properties
panel that looks a little bit different
| | 04:25 | for it. I'll click the Bind button
and I'll chose Notes and click OK.
| | 04:31 | There is one more important step to
follow in the form. The menu controls that
| | 04:35 | represent the Publisher and the
Author values should also be populated with
| | 04:40 | initial values. Go to the Publisher
control, click Dynamic. Now, click the Bind
| | 04:45 | button next to the prompt Select
Value Equal To and select the appropriate
| | 04:50 | key field that matches the current
table, pub_id, and click OK and click OK
| | 04:56 | again. Follow the same step for the
Author, click the Dynamic button, for
| | 05:02 | Select Value Equal To, click the Bind
button and choose au_id this time and
| | 05:08 | click OK. Click OK again.
| | 05:11 | Now, your data entry form is completely
ready for testing. Save the changes and
| | 05:16 | preview the page in an external
browser. As before, when the form opens,
| | 05:20 | it won't show any data. You need to
provide a primary key value. Go to the browser
| | 05:25 | address and place the cursor after the
URL, put in a question mark to start the
| | 05:30 | query string, and then append to
that the name of the parameter that's
| | 05:33 | expected for filtering, and then the
primary key value that you want to test.
| | 05:38 | Once again, I'll use BU1032, and
you'll see that the book is displayed in the
| | 05:43 | form with all of its detailed data.
| | 05:45 | Now, in this particular row of data,
the Publisher and the Author are the first
| | 05:50 | values in the list. So it's a little
bit misleading, but let's try another one.
| | 05:54 | I'll go to the primary key value of
BU2075. This time, you will see that the
| | 05:59 | Publisher and Author are selected
correctly based on the existing data in the
| | 06:03 | database table.
| | 06:05 | So that's a look at how to take an
existing form populated with data from an
| | 06:08 | existing record from the server-side
database, and then present it on the
| | 06:12 | screen. In the next video, I'll show
you how to apply a server behavior to add
| | 06:17 | the functionality for updating the data in
the database and returning back to a list page.
| | Collapse this transcript |
| Using the Update Form behavior| 00:01 | After creating an update form and
populating the form controls with existing
| | 00:05 | data, you can now apply a server
behavior in Dreamweaver CS4 that creates the
| | 00:09 | server code to update the database on
the server, and then navigates back to a
| | 00:13 | page that lists the existing data. For
this demonstration I'll start with the
| | 00:18 | file titleupdateform, which I created
in the previous video. If you didn't work
| | 00:22 | through that exercise and have access
to the Exercise Files, you can copy this
| | 00:27 | file over to your website.
| | 00:28 | From the menu, I'll select File >
Save As, and I'll name this new file
| | 00:33 | titleupdateformbehavior. Now, I'll go
to the Server Behaviors panel, and I'll
| | 00:41 | add a new server behavior. I'll click
the Plus button, go to Server Behaviors
| | 00:46 | and choose Update Record.
| | 00:49 | If your web page has more than one form,
you need to indicate which form you
| | 00:52 | are getting the data from. This page
only has one form and so it's already
| | 00:56 | selected. Set the Connection to dw_
bookstore, and the Table to titles. If as I
| | 01:03 | have, you've named your form controls
the same as the database Column names,
| | 01:07 | then Dreamweaver should automatically
match up the Form controls with their
| | 01:12 | equivalent database columns.
| | 01:13 | So for example, the title_id uses the
record from FORM.title. The title column
| | 01:18 | gets its value from the title control
and so on. For each item if you need to
| | 01:23 | change it, just click on the item. Then
go down to the Value option and select
| | 01:27 | the appropriate value.
| | 01:29 | After doing the update, you can
redirect the browser back to a page that lists
| | 01:33 | the existing data. I'll click the
Browse button and I'll select the page
| | 01:38 | titlelist.php. Take a look at the
Columns table and select the title_id column,
| | 01:43 | which is the primary key column, and make
sure that the Primary key option is selected.
| | 01:48 | If the Primary Key option isn't selected,
then the server behavior doesn't know
| | 01:52 | which column to match in the server-
side database when it tries to update the
| | 01:56 | values from the form. I'll click
OK to apply the server behavior.
| | 02:02 | It takes just a moment to apply the
server behavior. Now, I'll preview the page
| | 02:06 | in the external browser to test the
behavior. As before, I'll go to the address
| | 02:11 | in the browser and I'll add a
question mark to the URL, then the title_id
| | 02:15 | parameter, and set it to a value
matching the primary key column of the record
| | 02:20 | I want to update.
| | 02:22 | When the data appears in the form, I
can then go to any of the values and make
| | 02:26 | a change. For example, I'll go to the
Title of the book, and I'll change it
| | 02:30 | from The Busy Executive, to The Very
Busy Executive, and I'll click Update Title.
| | 02:37 | After the form has been executed
and the data has been updated in the
| | 02:40 | server-side database, the browser then
returns to the page that I designated.
| | 02:45 | I'll scroll down to the bottom of the
list and locate the title that I updated.
| | 02:49 | You'll see that the change
has been successfully made.
| | 02:52 | The advantage of using this approach
rather than the wizard is that you can
| | 02:55 | customize the form and make it look
exactly the way you want, and then apply
| | 02:59 | the server behavior as needed. Later on,
if you need to change the behavior in
| | 03:03 | any fashion, you can go back to the
Server Behaviors panel, locate the server
| | 03:08 | behavior, Update Record, double-click it
to open it, and you can make any changes you like.
| | Collapse this transcript |
| Creating list page links to edit and delete data| 00:00 | After you have created a page that has
an update form that presents existing
| | 00:05 | data and allows the user to modify the
data, the final step in creating your
| | 00:09 | editing system is to go to your List
page and create hyperlinks. When the user
| | 00:14 | clicks on a hyperlink, you will want
them to navigate to the update form and
| | 00:17 | pass the value of the selected record's
primary key column in a URL or a query
| | 00:22 | string parameter. In this
video I'll show you how to do that.
| | 00:25 | I am working with the titlelist page.
If you are working in ColdFusion, open
| | 00:30 | titlelist.cfm and in PHP open titlelist
.php. Now, I'll go to the place in the
| | 00:37 | code where I want to add the hyperlink.
I'm going to add the hyperlink on the
| | 00:41 | Title ID column. So I'll click on the
value within that column and then I'll go
| | 00:46 | down to the Properties panel.
| | 00:47 | The Properties panel in Dreamweaver
CS4 allows you to automatically set up a
| | 00:51 | hyperlink with two different tools. The
Point to File tool allows you to click
| | 00:56 | and then point at a file in the Files
panel. This tool however doesn't allow
| | 01:00 | you to set up URL or query string parameters
automatically. The Browse tool however does.
| | 01:07 | So I'm going to click the Browse button.
That's the picture of the folder next
| | 01:10 | to Link, and that will open up the
Select File dialog box. Now I'll select the
| | 01:16 | file that presents the update
form. I'm going to use the file
| | 01:20 | titleupdateformbehavior.php.
| | 01:24 | Now at the bottom of the dialog box,
I'm allowed to set up the URL. Notice that
| | 01:28 | it's set to the name of the page
already and that there is a button labeled
| | 01:32 | Parameters. I'll click the button and
I'll set the name of the parameter as an
| | 01:37 | explicit value, the name of the
database column that's the primary key.
| | 01:41 | Then I'll click in the Value column and
I'll click the Bind button to select a
| | 01:46 | dynamic value. I'll choose title_id
from the rsTitles record set and click OK.
| | 01:53 | Then I'll click OK again and review
the URL in the Select File dialog box.
| | 01:58 | In the URL after the page name, there
is the question mark that indicates that
| | 02:03 | some parameters are going to be passed
in, then the title_id parameter and then
| | 02:07 | at the very end the server-side code
that passes the dynamic value for the
| | 02:12 | current row of the record set. The
code for PHP is displayed here and if you
| | 02:17 | are working with ColdFusion it will
look a little bit different. Now I'll click
| | 02:21 | OK. I'll save my changes and I'll
test the page in an external browser.
| | 02:28 | Now each of the book titles should
have a hyperlinked ID and as you move the
| | 02:32 | cursor over the Ids, you will notice
that the bottom of the browser that you
| | 02:36 | can see the actual physical URL
that's been generated, and as you move over
| | 02:40 | each of the IDs you should see the URL change.
| | 02:44 | So now I'll click into a link for one
of the selected items and I'll get to a
| | 02:48 | book title and I'll change the book
title. Let's say, I'll go from 50 years to
| | 02:53 | 100 years. I'll click Update Title. I
return back to the titlelist page and
| | 03:01 | I'll scroll down and show that the
data has been successfully updated.
| | 03:05 | So that's how you can create
hyperlinks that have dynamic values that are
| | 03:09 | passed from the list page to an update
form page when the user clicks the link.
| | 03:14 | Then once the user is viewing the
update form page and sees the existing data,
| | 03:18 | they can make changes to the data,
click the button, the data will be updated
| | 03:22 | in the server and then the browser goes
back to the List page and shows the changes.
| | Collapse this transcript |
| Using the Delete Record server behavior| 00:00 | In this video I'm going to describe
how to use the Delete Record behavior to
| | 00:04 | delete a record of data from the
server-side database. The Delete Record
| | 00:08 | behavior should be placed on its own
dynamic webpage either PHP or ColdFusion
| | 00:13 | and then you link to that page passing
the primary key value of the record you
| | 00:18 | want to delete.
| | 00:19 | In this example, I'll be starting with
the template file and I'll use this as
| | 00:23 | the basis of my Delete Record page.
From the menu I'll select File > Save As
| | 00:30 | and I'll name the new file titledelete.
A Delete Record page does not need an
| | 00:35 | existing record set. Instead it's
designed to receive a URL parameter and then
| | 00:40 | use that URL parameter to execute a
delete operation on the server-side
| | 00:44 | database, filtering the operation,
only deleting the record where its primary
| | 00:48 | key value matches the URL parameter.
| | 00:51 | With the new page open, I'll go to the
Server Behaviors panel and I'll click
| | 00:55 | the plus button to add a new behavior
and select Delete Record. The first step
| | 01:02 | is to check to see whether a particular
variable or parameter is defined, check
| | 01:06 | for a URL parameter and set the name of
the URL parameter to match the name of
| | 01:12 | the primary key column of the database
table, in this case title_id. Set the
| | 01:17 | Connection and the Table to the table
you want to delete data from. I'm setting
| | 01:22 | the Connection to dw_
bookstore and the Table to titles.
| | 01:26 | Dreamweaver should automatically
detect the primary key column, but
| | 01:29 | double-check it to make sure. In this
case it should be set to title_id and
| | 01:33 | also make sure that it's not set to a
numeric column because in this particular
| | 01:38 | database structure, the primary key
column is a string. Also double check the
| | 01:42 | primary key value. Again Dreamweaver
should pick this up automatically and
| | 01:47 | match the URL parameter title_
id to the primary key value.
| | 01:52 | Finally, just as in many of the other
behaviors, you finish by browsing back to
| | 01:56 | another page, click the Browse icon
and select the titlelist page as the page
| | 02:02 | you want to go back to after the
delete operation is completed and click OK.
| | 02:08 | Now peek at the code that was
generated. Go to Code View and you will find
| | 02:12 | server-side code there that first
checks to see whether a particular value
| | 02:16 | exists and then if so, executes the
code to delete the data from the database.
| | 02:23 | At the end of the operation, PHP or
ColdFusion navigates back to the list page.
| | 02:28 | Now if the user didn't pass a value in,
what they are going to see is this page.
| | 02:32 | So go back to Design View and
delete the headline and replace it with a
| | 02:38 | literal string indicating that the user
didn't come from the right place. I'll
| | 02:42 | put in a string of 'There is no title
to delete' and then I'll put in some
| | 02:48 | text, 'Return to list.' I'll
select that text and turn it into a hyperlink
| | 02:52 | and allow the user to go back to the
list page. With the text selected, I'll
| | 02:57 | use the Point to File tool this time
and point at titlelist.php or .CFM if you
| | 03:04 | are working with ColdFusion. I'll save
the change and now I'm going to run this
| | 03:08 | page in the browser and I see the text
'There is no title to delete' because no
| | 03:13 | value was passed in on the URL. I'll
click the link and return back to the list.
| | 03:18 | Now from the list, I need to provide
a hyperlink that lets me say I want to
| | 03:22 | delete a particular row. So I'll close
the browser and return to Dreamweaver
| | 03:28 | and now I'm going to go to the page
titlelist. In the titlelist page, I'm going
| | 03:33 | to add a new column and in the column
I'll place a hyperlink that the user can
| | 03:38 | click to indicate that they want to
delete that row of data. I'll place the
| | 03:42 | cursor somewhere in the second column
and right-click or Ctrl-click on the Mac
| | 03:46 | and then select Table > Insert Rows or
Columns. Then I'll select the Columns
| | 03:53 | and indicate that I want to insert
one column after the current column and
| | 03:57 | click OK.
| | 04:00 | Now I'll click into the second row that
presents the dynamic data and I'll type
| | 04:03 | in the string of Delete wrapped in
brackets. And I'll select that text so I
| | 04:08 | can turn it into a hyperlink. Now I'll
go down to the Properties panel and I'll
| | 04:12 | click the folder icon next to Link
and I'll choose the new page that I have
| | 04:17 | just generated titledelete.php. And
then I'll pass a parameter and to pass the
| | 04:23 | primary key value of the record that
was selected. I'll click the Parameters
| | 04:28 | button. I'll set the Name of the
parameter to title_id. I'll click into the
| | 04:35 | Value column again just as I did in
the previous video. I'll click the Bind
| | 04:39 | button, select the primary key column
title_id and click OK. Click OK again and
| | 04:46 | click OK one last time.
| | 04:49 | So that's the hyperlink that the
user will click to delete data. Now I'll
| | 04:54 | preview the list page in the browser
and I'll see each of the rows in the
| | 05:00 | dynamic table now shows the Delete link
and I'll go to a row of data and click
| | 05:04 | the Delete link and after the page has
been loaded and then redirected back to
| | 05:09 | the list, it shows that the data
has been successfully deleted from the
| | 05:13 | server-side database.
| | 05:15 | There is more that you could do with
the delete interface such as this.
| | 05:17 | For example, on the delete page some
developers like to present a conformation
| | 05:22 | message to make sure that the user
meant to delete that data, but that goes
| | 05:27 | beyond the capabilities of Dreamweaver
to generate the code automatically and
| | 05:31 | require some programming.
| | 05:32 | So if you want to learn how to do
that you would need to learn a little bit
| | 05:35 | more about the PHP or ColdFusion markup
languages and be able to implement that
| | 05:40 | in pure code. But the videos in this
chapter have let you get started creating
| | 05:45 | a complete data management interface
that presents existing data, allows the
| | 05:50 | user to add new records to the database,
modify data and delete records to keep
| | 05:55 | the data up-to-date through a web interface.
| | Collapse this transcript |
|
|
7. Authenticating Users with ColdFusionEnabling J2EE sessions in ColdFusion| 00:00 | In this chapter of the video series,
I'm going to describe how to apply user
| | 00:04 | authentication to a ColdFusion based
website. I'll be showing you how to
| | 00:08 | configure ColdFusion with the right
kind of session management using both the
| | 00:12 | configuration option in the ColdFusion
Administrator and a special file called
| | 00:16 | Application.cfc.
| | 00:18 | I will then show you how to create a
data entry form that allows the user to
| | 00:21 | login and then how to protect
individual pages or the entire website from being
| | 00:27 | viewed without going through the
authentication process and then at the end of
| | 00:30 | the chapter, I'll show you how to
log the user out of the website using a
| | 00:34 | Dreamweaver server behavior.
| | 00:35 | I am going to start in this video,
showing you an option in the ColdFusion
| | 00:39 | Administrator. Go to the ColdFusion
Administrator now. If you have bookmarked
| | 00:44 | the Administrator URL in your browser,
you can use that now or you can type the
| | 00:48 | Administrator URL directly
into the browser address bar.
| | 00:51 | localhost:8500/CFIDE/administrator.
When prompted, enter your administrator
| | 01:00 | password that you created when you
installed ColdFusion and then ColdFusion
| | 01:03 | Administrator should open in the browser.
| | 01:06 | Now in the ColdFusion Administrator,
go to the Memory Variable section under
| | 01:10 | Server Settings. The Memory Variable
section of the ColdFusion Administrator
| | 01:15 | lets you manage how data is stored in
ColdFusion server memory at runtime. One
| | 01:19 | of the options right at the top is
labeled Use J2EE session variables. This
| | 01:24 | option is turned off by default when
you install ColdFusion and you typically
| | 01:28 | want to keep it turned on. Here is why.
| | 01:31 | By default session variables that is
variables that are connected with an
| | 01:35 | individual users browser session are
persistent between browser sessions. That
| | 01:40 | means that when the user closes
the browser and then reopens it, any
| | 01:44 | information that was stored in memory
for that individual user will stay there
| | 01:48 | and that's not the typical expected
behavior when you are building dynamic websites.
| | 01:53 | Users expect that if they close all of
their browser windows, that when they
| | 01:57 | navigate to the site again that they
will be challenged for a user name and
| | 02:00 | password, or other credentials that
are required. Session management in older
| | 02:05 | versions of ColdFusion was limited to
persistent session management. That is,
| | 02:10 | variables that stayed in server memory
for an individual user even when they
| | 02:13 | close the browser and then reopened
it. To use the more industry standard
| | 02:17 | approach of memory based session
variables that do not persist between browser
| | 02:21 | sessions, you want to turn this
option on. So you check the option and then
| | 02:26 | click Submit Changes in the upper right
corner of the Administrator screen and
| | 02:31 | then very important- you
have to restart ColdFusion.
| | 02:35 | In Windows, you would go to the
Control panel, to the Classic View, to the
| | 02:40 | Administrative Tools, to Services.
Locate the ColdFusion Application Server and
| | 02:47 | restart the service. If you are
working on Mac, you should do the same thing
| | 02:52 | but with the ColdFusion Launcher
application that's in the ColdFusion 8 bin
| | 02:56 | folder under the
installation folder for ColdFusion.
| | 02:59 | Once you have followed those steps then
any session variables, again these are
| | 03:03 | values they are connected with an
individual user's browser session, will expire
| | 03:07 | when the user closes all of their
browser windows and that means that
| | 03:11 | closing the browser is the same thing
as logging off. Your application will
| | 03:15 | now match what the user expects and you
will be able to test your application a lot
| | 03:19 | more effectively as you develop
your user authentication model.
| | Collapse this transcript |
| Creating an Application.cfc file| 00:00 | When you set up a user authentication
model for a website based on ColdFusion,
| | 00:04 | you must enable the use of session
variables. A session variable is a variable
| | 00:09 | or a piece of information that's
stored on the server in server memory but is
| | 00:13 | connected to a particular user's
browser session through the use of cookies.
| | 00:17 | With ColdFusion you don't have to
explicitly turn on or read cookie variables.
| | 00:22 | These are variables that are passed
back and forth between the client and the
| | 00:26 | server at runtime to help the server
remember the state of the user session but
| | 00:31 | you do have to explicitly turn them
on and you do this typically in a file
| | 00:35 | called Application.cfc.
| | 00:37 | A CFC is a ColdFusion component, a
special kind of file in the world of
| | 00:41 | ColdFusion and the Application.cfc file,
which is always named the same with an
| | 00:46 | upper case initial character, is
automatically used on every request to every
| | 00:50 | page in a website. In this video,
I'll show you how to create the
| | 00:54 | Application.cfc file and how to
configure it for the use of session variables.
| | 01:00 | The Application.cfc file is never seen
by the user. So you don't create it from
| | 01:05 | a visual template and you don't create
it from a standard HTML page. Instead in
| | 01:10 | Dreamweaver, you go to the menu, and
you select File > New, and then from the
| | 01:16 | Page Type list you select ColdFusion
component, and click Create. Then save the
| | 01:22 | file that's been created
selecting File > Save As and name the file
| | 01:28 | Application.cfc and place it in
the root folder of your website.
| | 01:34 | Make sure that you spell the
filename with an upper case A in the word
| | 01:37 | Application and the rest of the
filename lower case. On Windows that doesn't
| | 01:42 | matter. You can spell the filename any
way you like, but on Mac and on other
| | 01:46 | UNIX based systems which are case
sensitive, the name of the file must be
| | 01:51 | spelled exactly like this.
| | 01:54 | A ColdFusion component contains
multiple functions. It's kind of like a class
| | 01:59 | definition in object oriented software.
When you create a brand new CFC in
| | 02:03 | Dreamweaver, you will see that the
beginning CFC has a model function called
| | 02:07 | myFunction. That function isn't
necessary so I'm going to delete it leaving
| | 02:12 | just the beginning and ending cfcomponent tags.
| | 02:16 | Now the next rule to know about is
that any code that you place inside the
| | 02:20 | cfcomponent tags but outside of any
functions will be executed upon every page
| | 02:25 | request. Within the component you
want to declare two variables. The name
| | 02:31 | variable will be the name of your
application. Every page will reference this
| | 02:35 | component and because they will share a
single name. That means that the pages
| | 02:39 | will share data with each other. Then
you will also create a variable called
| | 02:43 | session management, a Boolean value
which you set to true. When you set up an
| | 02:48 | application name and you have turned
Session Management on, you can then create
| | 02:52 | session variables that persist between pages.
| | 02:55 | Here is how I'm going to add these
variables. I'll create a pair of cfscript
| | 02:59 | tags. The cfscript tags allow you to
write code in a JavaScript-like style.
| | 03:07 | Then between the cfscript tags I'll
create two variables prefixed with the word
| | 03:12 | this. The first one is this.name and
it will be a string which is the name of
| | 03:17 | my website application.
I'll call it "bookstore".
| | 03:21 | Then I'll create another variable
named sessionmanagement and I'll set its
| | 03:25 | value to true. Be sure to include the
semicolons at the end of both lines. Now
| | 03:31 | save your changes and go back to index.
cfm. When you run the index.cfm page in
| | 03:37 | the browser, you won't see any
difference. I'll test the page using Live View
| | 03:41 | and you won't see any difference in
the page. The only way to know for sure
| | 03:45 | that the Application.cfc page is
really being included is to go back and do
| | 03:49 | something you would
never really do in real life.
| | 03:52 | I will go back to Application.cfc and
I'll create a pair of cfoutput tags and
| | 03:57 | then I'll put an h1 tag set and say,
This is Application.cfc. I'll save the
| | 04:05 | change, go back to index.cfm, and look
at the page in Live View again, and this
| | 04:12 | time you will see the text 'This is
Application.cfc' above the main web page,
| | 04:17 | and that proves that the file is
being included in the current page
| | 04:21 | automatically.
| | 04:22 | Now again, you don't really do that
in a ColdFusion component. You don't
| | 04:26 | typically put output content in a page
like this. Instead, the purpose of the
| | 04:30 | CFC is to have a place to put code
that will be included at the top of every
| | 04:35 | other page in the website. Now that
you have created the file and you have
| | 04:39 | turned on Session Management, you can
now use the user authentication tools
| | 04:43 | that are available in Dreamweaver
that will ask the user to login, compares
| | 04:47 | your login credentials to content in
your database, and then you can start
| | 04:51 | locking down pages of your website based on
the authentication credentials that the user provides.
| | Collapse this transcript |
| Creating a login form page for ColdFusion| 00:00 | The next step after creating the
Application.cfc file is to create a login
| | 00:05 | form page. This is going to be a
basic login form that allows the user to
| | 00:09 | provide their user name and their
password. When you use the login form at
| | 00:12 | runtime, the values that the user types
in will be matched against values in a
| | 00:17 | database table. Let's start by
looking at the Databases panel.
| | 00:21 | I'll open the Databases panel going
to Window > Databases in the menu. Then
| | 00:26 | I'll open my database, dw_bookstore,
look at the Tables list, and then look at
| | 00:31 | the table, users. The users table has
three columns: the user_id, which is an
| | 00:36 | auto incrementing filed, user_name,
and user_password. The user_name and
| | 00:41 | user_password columns will be used for
authentication and the table currently
| | 00:46 | has two rows in it: a user_name and user
_password of admin and another row with
| | 00:51 | a user_name and user_password of user.
| | 00:54 | So I'll close the Databases panel. Now
I'm going to begin my page by opening
| | 00:58 | the index.cfm file. I'm not going to
use the template file because I don't want
| | 01:03 | to attach the look and feel of this
page to the look and feel of any other page
| | 01:07 | in the website. So I'll go back to
index.cfm and I'll save this file under a
| | 01:12 | new name of loginform.cfm.
| | 01:16 | Now I'll create a login form. I'll
place the cursor at the end of the existing
| | 01:20 | content and press Enter. Then I'll
open the Insert panel and go to the Forms
| | 01:24 | category. Within the Forms category,
I'll click Form to create a new form and
| | 01:30 | then within the form, I'll create a
table. Going back to the Insert panel, I'll
| | 01:35 | open the Common category and select Table.
| | 01:38 | In this table I'll need three rows
and two columns. The first two rows will
| | 01:43 | contain the form controls to collect
the user name and password and the third
| | 01:47 | row will contain a Submit button.
I'll set the Table Size to 3 Rows and 2
| | 01:51 | Columns and click OK. Now I'm going
to open up the table in Expanded Tables
| | 01:56 | View. I'll right-click on the table
or Ctrl+Click on Mac and select Table >
| | 02:02 | Expanded Tables Mode.
| | 02:05 | Now I'll add labels to the first
cells in the first two rows. The first one
| | 02:10 | will be User Name and the second one
will be Password. Now I'll add the form
| | 02:16 | controls. I'll place the cursor into
the second cell of the first row, go to
| | 02:21 | the Insert panel, select Forms, and
select Text Field. I'll set the ID of the
| | 02:29 | Text Field to user_name.
| | 02:32 | Now it isn't really required to set
the ID or name of the form control to the
| | 02:36 | database column name. As you'll see
later when I apply the server behavior to
| | 02:41 | implement user authentication, you'll
be able to match the form control to the
| | 02:45 | database column that contains the data
but naming as the same as the database
| | 02:49 | column name doesn't hurt.
| | 02:51 | So there is the User Name control. Now
I'll add the Password. I'll once again
| | 02:55 | go back to the Insert panel, to the
Forms category, I'll add a Text Field, and
| | 03:00 | the ID for this one will be user_
password. And because it's a password control,
| | 03:07 | I'll click off the control, then on
it again, and that will enable the
| | 03:10 | Properties panel for that control.
I'll set the Type to Password, which just
| | 03:15 | means that as the user types a value
into that control, they'll see asterisks
| | 03:19 | instead of the value they're actually typing.
| | 03:22 | Finally, I'll add a Submit button
that the user will click to indicate that
| | 03:26 | they've filled in the values and they
want to log in. I'll place the cursor in
| | 03:29 | the second cell of the third row,
return to the Insert panel, to the Forms
| | 03:33 | category, and add a Button, which
you'll find toward the end of the list.
| | 03:39 | I'll give the button an ID of Submit,
and then I'll click on the control, go to
| | 03:45 | the Properties panel, and I'll change
the Value to Log In. The Value of the
| | 03:49 | Button is the string that
appears on the button's face.
| | 03:52 | One last step before I'm finished with
the form page. I'll select the heading
| | 03:57 | text at the top of the form and I'll
replace it with a static string of Please
| | 04:02 | Log In. I'll save my changes and click
the exit link to exit Expanded Tables
| | 04:08 | Mode and then I'll test the page in
Live View. There is my completed Log In
| | 04:12 | data entry form.
| | 04:14 | Now in the next video, I'll show you
how to apply the user authentication
| | 04:17 | server behavior to add all the server
side code you need to compare what the
| | 04:22 | user types into the form to
the values in the database table.
| | Collapse this transcript |
| Logging in with a ColdFusion server behavior| 00:00 | Once you've created the data entry
form that allows the user to log in with
| | 00:04 | their security credentials, the next
step is to provide a server behavior to
| | 00:08 | the form. I'll be working in the file
loginform.cfm, which I created in the
| | 00:13 | previous video. Because this is a
single continuous exercise between the last
| | 00:17 | video and this one, I'll
continue working in this file.
| | 00:21 | With the page open in Dreamweaver,
I'll go to the Server Behaviors panel.
| | 00:25 | I'll click the Plus button and I'll
select User Authentication > Log In User.
| | 00:30 | Here are the values you need to provide
for this server behavior. If the page
| | 00:35 | includes more than one form, you need
to indicate which form contains the user
| | 00:38 | name and password, you need to
indicate which of the form fields matches the
| | 00:42 | user_name and which matches the user_
password. In this case, Dreamweaver has
| | 00:46 | matched them up correctly for me, so
I'll accept all three default values.
| | 00:51 | Now you're going to be validating
against a database table in your data source,
| | 00:55 | so make sure you've selected the dw_
bookstore data source and then pull down
| | 01:00 | the list of tables and select Users.
That's the table that contains our
| | 01:04 | authentication information. Set the
Username column to user_name and the
| | 01:09 | Password column to password.
| | 01:11 | Now, you implement some conditional
logic. If the login succeeds, you want to
| | 01:16 | navigate to the Home Page of the
website, index.cfm. Click the Browse button
| | 01:22 | and select index.cfm. If the login
fails, you want to go back to the current
| | 01:28 | login form. Click the Browse button
and select loginform.cfm. The rest of the
| | 01:34 | options can be left at their default
values. Click OK and that creates the
| | 01:40 | server behavior in the page.
| | 01:42 | Now save the page and test the page in
an external browser. Click the Preview
| | 01:47 | button and select your favorite browser,
and when the page opens up, you'll see
| | 01:52 | that the user name and password are
blank. Now depending on which browser
| | 01:56 | you're using, you might see default
value show up. If you see that happen, it
| | 02:01 | might be because the browser has
cached passwords for localhost 8500,
| | 02:06 | specifically for the ColdFusion
administrator. But they would not actually be
| | 02:10 | implemented by this page.
| | 02:13 | Now let's take a look at what happens
if you login with bad information. I'll
| | 02:17 | type in a value of baduser and
badpassword and click Log In, and you'll see
| | 02:24 | that I'm returned immediately back to
the Log In form. This time, I'll type in
| | 02:29 | values that are valid. I'll enter a
user name and a password of admin and log in,
| | 02:33 | and you'll see that I come back
to index.cfm and I'm now validated. Now
| | 02:39 | let's take a look at what's
happening a little bit in the background.
| | 02:42 | If you go back to Dreamweaver to the
Log In form page and then look at the page
| | 02:46 | in Code view and scroll to the top of
the page, you'll find that there is a lot
| | 02:51 | of conditional logic that's been made
a part of the page. There is a cfquery
| | 02:55 | tag set that's executing a query
against the database table on the server and
| | 03:00 | evaluating the values of the form
fields, user_name and user_password.
| | 03:05 | Then if data comes back from the table,
the code determines that that's an
| | 03:10 | authenticated user and it adds
variables called MM_Username and
| | 03:14 | MM_UserAuthorization to the Session
scope. These are Session variables and
| | 03:20 | these variables persist from one page
to another. To see this behavior really
| | 03:24 | happening, go to the Files panel and
open the file index.cfm and look at the
| | 03:29 | file in Code view.
| | 03:31 | Go down to the div tag set with an id
of content and place the cursor after the
| | 03:36 | h1 tags. Now we're going to put in a
little bit of a debugging code that lets
| | 03:40 | us see what Session Variables have
been set. Create a tag named cfdump.
| | 03:44 | The cfdump tag is a way of outputting
variable values to the browser screen.
| | 03:51 | Select an attribute named var and then
put in a pair of pound signs, and inside
| | 03:57 | the pound signs the word session.
Add one more label with a
| | 04:02 | value of Session Variables and make
sure to close the tag with a Greater Than
| | 04:06 | character at the end. Save your
changes and now test the page in the browser.
| | 04:13 | If you're using J2EE sessions and you
closed the browser between sessions, this
| | 04:17 | is what you should see:
a sessionid and a urltoken. Now, go back to
| | 04:23 | Dreamweaver, return to the Log In form
page and preview that page again. Log in
| | 04:30 | with legitimate credentials of admin
and admin. Log in and when you come back
| | 04:36 | to the index page, you'll see
that the variables MM_Username and
| | 04:40 | MM_UserAuthorization have been created.
So that's how you know that you're
| | 04:44 | setting variables in one page, the Log
In form, and you have access to them in
| | 04:48 | another page, the index page.
| | 04:50 | Now in the next video, I'll show you
how to apply another server behavior that
| | 04:54 | looks for these variables and
determines whether the user is currently
| | 04:57 | authenticated and whether they're
allowed to get into the current page.
| | Collapse this transcript |
| Protecting page access with ColdFusion server behaviors| 00:00 | Once you've created your Login form
and applied the server behavior that
| | 00:04 | allows the users to authenticate
themselves, you can then protect individual
| | 00:08 | pages in your website by applying a
server behavior. For this demonstration
| | 00:12 | I'll start from the file index.cfm and
I'll save it under a new name, selecting
| | 00:18 | File > Save As and I'll name the new
file protectedpage.cfm. Now I'll go to the
| | 00:25 | Server Behaviors panel and I'll select
Plus > User Authentication > Restrict
| | 00:31 | Access to Page.
| | 00:33 | This is a very simple server behavior.
You can apply a restriction based on
| | 00:37 | either the User Name and Password,
which I've already set up, or if your data
| | 00:42 | has this information, you can also
apply different access levels. I'll restrict
| | 00:46 | this demonstration to just the User
Name and Password. If the user tries to
| | 00:50 | access this page and they haven't
authenticated themselves, the server behavior
| | 00:55 | will redirect the browser
to a page of your selection.
| | 00:58 | I'll click the Browse button and
select the file loginform.cfm and then click
| | 01:04 | OK to implement the server behavior.
Now I'll save my changes and I'll try to
| | 01:09 | preview the page in the browser.
Notice that instead of seeing the page I
| | 01:13 | requested, I'm taken to the Log In
screen. I'll type in my log in. This time
| | 01:18 | I'll use user and user and click Log
In and you'll see that I successfully
| | 01:23 | re-navigate back to the index.cfm page.
| | 01:26 | But there is little bit more that you
can do with this kind of system. It would
| | 01:30 | be nice if once you tried to go to the
protected page and then logged in. If
| | 01:34 | you then automatically went back to the
protected page that you would initially
| | 01:38 | try to request. You can do that by
changing the loginform's behavior. And
| | 01:43 | that's what I'll show you how to do now.
| | 01:45 | I'll close the browser and I'll return
to the page loginform and look at the
| | 01:50 | Server Behaviors panel. The Log In
User server behavior has already been
| | 01:55 | applied to this page, but I'm going
to modify it. I'll double-click on the
| | 01:59 | server behavior and I'm going to make
one change, selecting the option, Go to
| | 02:05 | previous URL (if it exists).
| | 02:08 | When the user is diverted to the Log
In page, the previous URL is attached to
| | 02:13 | the URL as a parameter and this server
behavior will now examine that value and
| | 02:19 | after logging in redirect it to the
page that was requested. I'll click OK and
| | 02:25 | I'll save the changes to the
loginform page, return to the protected page.
| | 02:30 | Now before I preview, I'm going to
make sure that I've closed all browser
| | 02:33 | windows to make sure that the session
has been terminated. Then I'll preview
| | 02:37 | the page in the browser. Access is
denied because I haven't logged in. I'll log
| | 02:42 | in with the User Name and Password.
This time, notice that I returned to the
| | 02:49 | protected page rather than to the index.cfm.
| | 02:53 | So now I have a complete cycle, and as
I start navigating through my web page
| | 02:57 | as long as I keep the browser opened
and as long as the session variables
| | 03:01 | haven't timed out, which they will
after 20 minutes of inactivity by default,
| | 03:06 | I'll be able to continue
interacting with the application.
| | 03:09 | But if I stop using the application
for at least 20 minutes, causing the
| | 03:13 | session to time out, or if I close all
of my browser windows, which destroys
| | 03:17 | the in-memory cookies in the browser,
then the next time I come to this
| | 03:21 | protected page, I'll be forced to log
in again using the loginform, which again
| | 03:26 | will compare my User Name and
Password to the values in the database.
| | Collapse this transcript |
| Logging out with a ColdFusion server behavior| 00:00 | In this video, I'm going to describe
how to create a Log Out page, a page that
| | 00:05 | when it loads, removes the
session information that provides user
| | 00:08 | authentication and forces the user to
log in again if they want to continue to
| | 00:12 | work with the website. I'll start by
creating a brand new page. The user
| | 00:16 | doesn't typically see the Log Out page,
so it doesn't need any of the template,
| | 00:20 | cascading style sheets or graphics.
| | 00:23 | From the menu I'll select File > New.
I'll select ColdFusion from the Page Type
| | 00:29 | and click Create. Then I'll save the
file into the root folder of the website
| | 00:34 | as logout.cfm. Now I'll apply the
Log Out server behavior. I'll go to the
| | 00:40 | Server Behaviors panel, I'll
click the Plus button and select User
| | 00:45 | Authentication > Log Out User.
| | 00:48 | The Log Out server behavior can be
used in one of two ways. You can either
| | 00:52 | create a new link for logging out or
you can log out directly when the page
| | 00:56 | loads; I'll use the second one. Then
after the page has been loaded and the Log
| | 01:01 | Out server behavior has been executed,
I'll cause the page to navigate back to
| | 01:06 | the protected page that I created previously.
| | 01:09 | I'll click Browse and choose
protectedpage.cfm and then click OK to implement
| | 01:15 | the server behavior and I'll save those
changes. Again notice that there is no
| | 01:19 | visual design to this page. In fact,
if you wanted to clean up the code a
| | 01:23 | little bit, you could go to the Code
view and take a look at everything after
| | 01:27 | the CFML at the top of the page and
just delete all of the HTML, because the
| | 01:32 | user will never see it.
| | 01:33 | Save any changes you might have
made to the Log Out page. Then go to
| | 01:37 | protectedpage.cfm. This is the page
that I created previously that's protected
| | 01:42 | from being viewed if the user hasn't
been authenticated. Place the cursor at
| | 01:47 | the bottom of the content area and
press Enter or Return and type in the string
| | 01:52 | Log Out. Now select that string and
add a hyperlink to it, going to the
| | 01:57 | Properties panel and clicking the Browse
button and selecting the new file, logout.cfm.
| | 02:04 | I'll click OK and now my Log Out
functionality is complete. I'll save the
| | 02:09 | changes and run the page in the browser.
When the page loads, instead of seeing
| | 02:15 | the page I go to the loginform as
before. I'll click into the User Name and
| | 02:19 | Password and type in valid values and
click Log In and I successfully navigate
| | 02:25 | to the protected page that I requested.
| | 02:28 | Now, I'll click the Log Out link and
that calls the Log Out page which executes
| | 02:33 | its behavior to clear the
authentication information from server memory and
| | 02:37 | then navigate back to the protected
page again because of the Log Out server
| | 02:41 | behavior. And because I'm no longer
authenticated, I once again see the loginform.
| | 02:47 | So now to implement security across
the entire website, you would go to each
| | 02:51 | page that you wanted to protect, and
apply the server behavior that prevents
| | 02:55 | the user from viewing the page without
logging in first. Then in the loginform
| | 03:00 | itself, after they log in, they'll go
to the page they requested and they'll
| | 03:04 | have the option to log out
whenever you provide the link.
| | Collapse this transcript |
|
|
8. Authenticating Users with PHPCreating a login form page for PHP| 00:00 | In this chapter of the video series
I'm going to describe how to authenticate
| | 00:04 | users when building a dynamic website
with PHP. I showed how to do this in the
| | 00:09 | previous chapter with ColdFusion and
the steps are pretty much the same for
| | 00:12 | PHP, but there are just a couple
of things that you do differently.
| | 00:16 | Dreamweaver will create all the code
you need with server behaviors and it
| | 00:20 | assumes that you've stored your user
credentials. That is, the list of users
| | 00:24 | with their user names and passwords,
in a database table that's accessible
| | 00:28 | through a database connection.
| | 00:30 | The sample database that I've been
working with throughout this video series
| | 00:34 | has a table named users. I'll go
to the Databases panel and open the
| | 00:39 | dw_bookstore connection, go the
Tables list, go to the users table and it
| | 00:46 | show that it has columns named
user_id, user_name and user_password.
| | 00:52 | The user_name and user_password columns
are the actual credentials. The user_id
| | 00:57 | is just a meaningless primary key value.
I'll right-click on the users table
| | 01:01 | and select View Data to show you that
you have two users in the table with the user
| | 01:05 | name and password of admin and user. I'll
close the Databases panel and return to the page.
| | 01:12 | The first step in creating a user
authentication system is to create a login
| | 01:16 | form, a form that allows the user to
type in their user name and their password
| | 01:21 | to indicate that they want to be
authenticated and that they want access to the website.
| | 01:26 | For this demonstration, I'll start
with the file index.php and I'll save it
| | 01:31 | under a new name, selecting File >
Save As and I'll name the new file
| | 01:35 | loginform.php. Now I'll click after the
existing content area in the h1 tag and
| | 01:42 | press Enter to create a new paragraph.
| | 01:45 | Now, I'll create a data entry form.
I'll go to the Insert panel, to the Forms
| | 01:50 | category and create a new form. With
the cursor inside the form, I'll switch
| | 01:56 | the Insert panel category to Common
and create an HTML table that I'll use to
| | 02:01 | lay out the form.
| | 02:03 | This table will require three rows and
two columns. I'll set it to three rows,
| | 02:08 | two columns, set the Border thickness
to 0 so we won't actually see the HTML
| | 02:13 | table and then I'll click OK. Now I'm
going to open up the table into Expanded
| | 02:18 | Tables mode. I'll right-click on it
or Control-Click on the Mac and select
| | 02:23 | Table > Expanded Tables Mode.
| | 02:26 | This allows me to more easily type
values into the table. Now I'll add labels
| | 02:31 | into the first column. The first row
will accept the user name and the second
| | 02:36 | row will accept the password. Now I'm
ready to add the form controls. I'll
| | 02:41 | place the cursor in the second cell
of the first row. I'll go to the Insert
| | 02:46 | panel to the Forms category
and I'll add a Text Field.
| | 02:51 | I'm going to match up the form control's
name to the name of the database column
| | 02:55 | it will provide data to. That's user_
name. You don't actually have to match
| | 03:01 | these up, but it just makes it a little bit
easier to remember how they match up later on.
| | 03:06 | I'll click OK and that creates the form
control. Now, I'll follow the same steps
| | 03:11 | for the password. I'll click into the
second row, second column, go to the
| | 03:16 | Insert panel to the Forms category and
create a Text Field. The ID of this one
| | 03:22 | will be user_password. I'll
click OK to create the control.
| | 03:28 | Now I'm going to change the control to a
password behavior, which basically means
| | 03:33 | that when the user types a value in,
they'll see asterisks instead of the value
| | 03:37 | they're typing. I'll click off the
control, then click on it again. That
| | 03:41 | activates the Properties panel for the control.
| | 03:44 | Then I'll go down to the Properties
panel and change the Type from Single line
| | 03:49 | to Password. You won't see any visual
change in the Design view, but at runtime
| | 03:54 | when you type a value into that
control, it will now show the asterisks.
| | 03:58 | Now to finish the form, I'll add a
Submit button. I'll click into the third
| | 04:03 | row, second column, go to the Insert
panel to the Forms category and I'll
| | 04:08 | scroll down toward the bottom of the
list of controls and choose Button.
| | 04:13 | I'll give it an ID of Submit and then
I'll click off the control and on it
| | 04:18 | again to activate the Properties panel.
I'll change the value, which is the
| | 04:23 | string that appears on the face of the
button to log in and I'll also check to
| | 04:28 | make sure that the action is set to
Submit Form, which it should be by default.
| | 04:33 | Now I'm going to make one more
cosmetic change to the page before I test it.
| | 04:37 | I'll go up to the headline above the
table and above the form and I'll change
| | 04:41 | the headline to Please Log In.
Now I'm ready to preview the page.
| | 04:48 | I'll exit Expanded Tables Mode by
clicking the exit link at the top of screen.
| | 04:52 | Then I'll click Live View and that
shows me what the login form will look like
| | 04:57 | to the user when they browse
to the page from their browser.
| | 05:00 | So the form has been created, and in
the next video I'll show you how to use a
| | 05:04 | server behavior to apply all of the
code logic for the server that takes the
| | 05:08 | values the user types into the form,
compares them to the values in the
| | 05:12 | database table and evaluates
whether the user is authentic or not.
| | Collapse this transcript |
| Logging in with a PHP server behavior| 00:00 | After creating the login form, the
next step is to apply the server behavior
| | 00:04 | that will add the PHP server code that
compares the values that the user enters
| | 00:08 | through the form to the values in the
database table and determines whether the
| | 00:12 | user's credentials are authentic.
| | 00:14 | I'll be working with the file loginform.php.
That's the file I created in the
| | 00:19 | previous video. With the file opened,
I'll go to the Server Behaviors panel.
| | 00:25 | I'll click the Plus button and I'll
select User Authentication > Log In User.
| | 00:31 | This is the dialog box for the Log In
User server behavior. The first step is
| | 00:35 | to determine where the data is
coming from in the form. If your web page
| | 00:39 | contains more than one data entry form,
you need to select which form is going
| | 00:43 | to be used. In this case
there is only one form, form 1.
| | 00:46 | You also need to indicate which filed
of the form represents the user name and
| | 00:50 | which represents the password. Once
again this has been set up automatically by
| | 00:55 | Dreamweaver so I'll just
accept the default values.
| | 00:58 | Next, indicate where the data is on
the server. Set your connection to
| | 01:02 | dw_bookstore and set the table to
users. Now set the Username column to
| | 01:09 | user_name and the Password column to
user_password. When the server behavior
| | 01:15 | queries the database, you're indicating
where the user name and password are in
| | 01:19 | the database structure.
| | 01:21 | Now for the conditional logic, if
the values that the user types in match
| | 01:26 | what's in the database, you can
redirect the user to a particular page. I'll
| | 01:30 | click the Browse button and I'm
going to send the user to index.php, the
| | 01:36 | website home page.
| | 01:38 | On the other hand, if the login fails,
I'll send them back to this login form
| | 01:42 | for the moment. I'll click Browse and
I'll choose loginform.php. The options at
| | 01:48 | the bottom of the dialog box allow you
to determine access level. You can take
| | 01:53 | the access level and then determine
on a page-by-page basis which page is a
| | 01:58 | particular user is allowed to navigate to.
| | 02:00 | In this case, I'm just going to use
the user name and password and apply the
| | 02:04 | same level of authentication to any
protected pages. Now I'll click OK to
| | 02:09 | implement the server behavior. I'll
save the changes and then I'll preview the
| | 02:14 | page in an external browser.
| | 02:17 | If I type in a bad value, for example,
I'll type in bad user and bad password
| | 02:22 | and then I'll click Submit. You'll see
that after the attempt to authenticate I
| | 02:26 | come right back to the login form. But
now, I'll type in values that are in the
| | 02:31 | database. I'll type in a user name
and the password of admin and I'll click
| | 02:36 | Submit and the result is that I now
navigate to the website's homepage, index.php.
| | 02:42 | So that's how you apply the server
behavior to the form. Now in the next video,
| | 02:47 | I'll show you how to protect
individual pages and determine as the user tries
| | 02:52 | to browse to the page, whether the
user is currently logged in or not.
| | Collapse this transcript |
| Protecting page access with PHP server behaviors| 00:00 | Once you have provided a way for the
user to log in and you have authenticated
| | 00:04 | the user with a login form, you can
now protect individual pages of your
| | 00:08 | website using a server behavior. For
this example, I'll start with the file
| | 00:13 | index.php and I'll save it under a new
name, selecting File > Save As and I'll
| | 00:18 | name this new page protectedpage.php.
| | 00:23 | You can apply this server behavior to
any individual page. When the user logs
| | 00:28 | in through the login form that result
in setting a particular kind variable
| | 00:32 | called the Session Variable. The
nature of a session variable in the web is
| | 00:36 | that it's a variable that's stored in
server memory and is connected to the
| | 00:40 | users browser session through the use
of cookies. Variables that are sent back
| | 00:44 | and forth between the client and the server.
| | 00:47 | In PHP as in ColdFusion, you don't have
to worry too much about the mechanics.
| | 00:52 | And in fact, if you look at the code
in the login form after you have applied
| | 00:55 | the server behavior to authenticate
the user you will see that it results in
| | 00:59 | creating a set of session variables that
identify the user who is currently logged in.
| | 01:04 | For any page that you protect when you
apply the appropriate server behavior
| | 01:08 | you are adding code to the top of the
page to check and make sure the user has
| | 01:12 | authenticated before they have
actually tried to get to the page. With the
| | 01:16 | protectedpage file on screen, I'll go
to the Server Behaviors panel, I'll click
| | 01:21 | the Plus button, I'll go to User
Authentication and I'll select Restrict Access
| | 01:27 | To Page. This is a very simple server behavior.
| | 01:31 | First of all, you can select whether
you are restricting access based on just
| | 01:35 | the username and password or you can
also choose to look for a particular
| | 01:38 | access level. In my version of the
login form I didn't set an access level so I
| | 01:43 | won't use that feature. If the user has
not logged in, you have the opportunity
| | 01:48 | to redirect the browser to a
different page, which in our case might be the
| | 01:52 | login form page.
| | 01:54 | So I'll Browse and I'll select login
form, click OK and click OK. I'll save the
| | 02:01 | page and then I'll test. I'll preview
the page in the external browser and
| | 02:07 | notice that as I try to load the
protectedpage file, I'm instead redirected to
| | 02:12 | the login form.
| | 02:13 | Now I'll go ahead and log in. I'll
put in my login information of admin and
| | 02:18 | admin and click Submit and notice
that I'm redirected but this time to the
| | 02:23 | homepage index.php. It would be
really nice if instead of going to the
| | 02:28 | homepage, I could instead be
redirected to whichever page I had originally
| | 02:32 | requested, in this case the protectedpage.
| | 02:35 | So I'll close the browser and go back
to Dreamweaver and make one more change.
| | 02:39 | This change will be in the login form.
I'll go back to that file loginform.php.
| | 02:46 | I'll go to the Server Behaviors panel
where I see that the page have the Log In
| | 02:49 | User behavior.
| | 02:50 | I will double click on the behavior
to reopen the dialog box and then I'll
| | 02:55 | select this option, Go to previous URL
if it exists. This means that if I get
| | 03:01 | to the login form from a different
page as a result of rejection of my user
| | 03:05 | authentication then after a
successful log in, instead of going back to the
| | 03:10 | homepage I'll go the page that I
originally requested. I'll click OK to update
| | 03:15 | the server behavior and then
save my changes in the login form.
| | 03:18 | I will go back to the protectedpage
and once again preview it in the web
| | 03:22 | browser. I should go back to the
login form because I had closed on all the
| | 03:28 | browser resulting in disrupting the
session. I'll log in using the username and
| | 03:33 | password of admin again. I'll click
Submit and this time instead of going to
| | 03:38 | the homepage notice that I went to the
protectedpage, the one that I originally requested.
| | 03:44 | So the combination of the login user
behavior on the log in form page with the
| | 03:48 | option selected to go back to the
originally requested page plus the behavior
| | 03:52 | on the protected page that checks to
see whether I'm logged in or not, combines
| | 03:56 | to make for a secure site.
| | 03:58 | Once you have created the login form
you can then go to all the different pages
| | 04:02 | of your site and apply that same
behavior to protect the page and if you want
| | 04:07 | to implement various access levels
you can do that as well by capturing the
| | 04:11 | access level from the database when you
log in and then checking for an access
| | 04:15 | level when the page is loaded.
| | Collapse this transcript |
| Logging out with a PHP server behavior| 00:00 | The last step in creating a user
authentication interface is to provide a way
| | 00:04 | for the user to log out without
having to close the browser. You do this in
| | 00:08 | Dreamweaver and PHP by creating a
special page that we will call the logout
| | 00:12 | page and applying the Log Out
User server behavior to the page.
| | 00:17 | When the user navigates to the page,
you can then either prompt them to click a
| | 00:20 | link or when the page loads you can
simply log them out of the website. At the
| | 00:26 | end of the server behavior you can
then have the user navigate back to a page
| | 00:30 | of your selection.
| | 00:31 | In this demonstration I'm going to be
creating a page from scratch that will
| | 00:35 | serve as the log out page. If you
configure the log out server behavior so that
| | 00:40 | it executes as the page loads, the user
will never see the logout page. So I'm
| | 00:45 | going to create a PHP page from
scratch. It won't have any of the graphics,
| | 00:50 | cascading style sheets or other
visual design of the rest of the website.
| | 00:54 | From the menu, I'll select File > New.
In the New document dialog box I'll
| | 01:00 | select PHP from the Page Type list and
click Create. Then I'll save the page as
| | 01:07 | logout.php. Now I'm going to type
in a little bit of text just so I can
| | 01:12 | identify this page easily in Design View.
I'll type in the text, 'this is the logout page.'
| | 01:19 | Now I'll go to the Server Behaviors
panel. In the Server Behaviors panel I'll
| | 01:23 | click the Plus button and select User
Authentication, Logout User. You can have
| | 01:30 | the server behavior execute either upon
a click of a hyperlink or when the page
| | 01:34 | loads. I'll select the second option
and then you designate which page you want
| | 01:39 | to navigate to when the
server behavior is complete.
| | 01:42 | I will click the Browse button and
I'll select protectedpage.php and click OK
| | 01:48 | to apply the behavior. Now I'll save
the file, logout.php, and I'll return to
| | 01:54 | the protectedpage file. In this page,
I'll provide a hyperlink that when
| | 01:59 | clicked navigates to the logout page
and logs the user out of the website. I'll
| | 02:03 | place the cursor at the end of the
headline and press Enter or Return to create
| | 02:07 | a new paragraph. Then I'll type the
words Logout. I'll select that text and
| | 02:12 | then I'll create a hyperlink of the
text by going to the Properties panel,
| | 02:16 | clicking to Browse and selecting logout.php.
| | 02:21 | So now here is the pattern I have
established in this chapter. When the user
| | 02:25 | tries to visit protectedpage.php, the
server behavior on that page determines
| | 02:30 | that they aren't logged in and instead
loads the login form. After they have
| | 02:34 | successfully logged in they are sent
back to the same page they try to load in
| | 02:38 | the first place, the protected page
and as long as they stay active in the
| | 02:41 | website and keep clicking around and
they don't close the browser they will be
| | 02:45 | able to freely navigate around to
any of the protected pages in the site.
| | 02:50 | But now if they click the logout link
that I have just created that will take
| | 02:53 | them to the logout page which will
execute the server behavior which takes away
| | 02:57 | their user authentication and sends
them back to the page and then they should
| | 03:01 | see the login form load again.
| | 03:03 | So let's test it. I'm on protectedpage.
php. I'll load the page into the browser
| | 03:09 | and instead of the page I requested I
see the login form. So now I'll log in
| | 03:16 | using admin and admin as the user name
and password and I'll click Submit and
| | 03:22 | that logs me in and takes
me to the protectedpage.
| | 03:25 | Then I'll click the Logout link, which
takes me to the logout page. The server
| | 03:29 | behavior there does its thing and then
sends me back to the protectedpage again
| | 03:34 | which in turn loads the login form. So
that's a completed user authentication
| | 03:39 | workflow and interface, created
completely with Dreamweaver server
| | 03:42 | behaviors and without any
actual programming on my part.
| | Collapse this transcript |
|
|
9. Validating Forms with SpryUnderstanding client-side form validation| 00:00 | In this and the following chapters of
the video series, I'm going to describe
| | 00:04 | the use of the Spry framework. Spry is
a set of AJAX libraries. AJAX stands for
| | 00:10 | Asynchronous JavaScript and XML, and
it's one of the primary technologies
| | 00:14 | that's a part of what's known as Web 2.0.
| | 00:17 | AJAX enabled websites allow developers
to create dynamic presentations. They
| | 00:22 | can layer screens one on top of
another, allow the user to navigate through
| | 00:26 | data without having to make calls to
a server, and provide other dynamic
| | 00:31 | visually compelling effects in a website.
| | 00:35 | The Spry framework is free for
download from Adobe at the URL at the screen,
| | 00:39 | www.adobe.com/go/Spry. That URL will
redirect to a location on the Adobe Labs
| | 00:47 | site where you will find the most
recent version the Spry framework. When you
| | 00:51 | download Spry from Adobe in that way
though, what you are getting is just the
| | 00:55 | JavaScript libraries, and implementing
them in website is totally up to you.
| | 01:00 | You have to work completely in code.
| | 01:02 | Dreamweaver CS4 includes the Spry
framework and provides rapid application
| | 01:07 | development tools that allow you to
create Spry datasets from XML, implement
| | 01:13 | client-side form validation, and use
Spry effects without having to do any
| | 01:17 | actual coding. I'm going to be
focusing on how Dreamweaver CS4 make Spry easy
| | 01:22 | to use in these chapters.
| | 01:24 | Here is what's included in the Spry
framework. One aspect of the Spry framework
| | 01:29 | is data entry form validation. When the
user types in values into a data entry
| | 01:34 | form, you can choose to validate
those values, that is, test them against your
| | 01:38 | business rules, either on
the client or on the server.
| | 01:42 | Client-side validation generally
involves JavaScript executed in the browser
| | 01:46 | environment. When you use client-side
validation there are some major benefits.
| | 01:50 | The form controls are validated
before the form is submitted to the server.
| | 01:54 | That means that the client-side
performance is excellent. Users see immediate
| | 01:58 | response to the values that they type in,
and you reduce the amount of traffic
| | 02:03 | on your server and on the network.
As long as the browser supports the
| | 02:07 | JavaScript language, and all modern
browsers do, client-side validation is
| | 02:11 | typically the best approach to
giving the user immediate response.
| | 02:16 | Spry also includes tools that automate
the process of downloading and parsing
| | 02:20 | XML and comma separated values files
and turning them into usable data in
| | 02:26 | your websites. Once you have data
in memory in a web page that's been
| | 02:30 | downloaded with these tools, you can
use data-binding syntax to dynamically
| | 02:35 | change values, presentation of images,
and other parts of web pages without
| | 02:40 | having to do your own JavaScript coding.
| | 02:43 | Then the third major part of the Spry
framework is dynamic animation. Spry
| | 02:48 | includes predefined JavaScript based
animation schemes, which you apply to your
| | 02:53 | HTML based objects. As with all the
other tools in Spry, if you download the
| | 02:58 | free Spry framework from Adobe, it's
up to you to figure out the markup code
| | 03:03 | and the JavaScript code that's needed
to make use of these tools. But if you
| | 03:06 | are working with Dreamweaver CS4,
you'll be able to apply many of these effects
| | 03:11 | directly through the Dreamweaver
visual design interface, without having to
| | 03:15 | know how the code works or how
to put it all together yourself.
| | 03:19 | In the remaining videos in this chapter,
I'll describe how to use data entry
| | 03:22 | form validation with Spry. How to
apply Spry validation rules to the form
| | 03:27 | controls in your own forms. Because
this is client-side validation, the tricks
| | 03:32 | are the same, regardless of whether you're
working with ColdFusion of PHP on the server.
| | 03:36 | So I'm going to be working as usual in
the PHP version of the website, but the
| | 03:41 | process I've described and the steps
I follow will be exactly the same,
| | 03:45 | regardless of which application server you use.
| | Collapse this transcript |
| Validating form controls| 00:00 | In this video I'm going to describe
how to apply Spry based data entry form
| | 00:04 | validation to data entry form controls.
Before applying Spry based validation,
| | 00:10 | you must have already created a data
entry form, and you can apply validation
| | 00:14 | either to existing controls, or
you can add controls to your form and
| | 00:18 | validation in a single step.
| | 00:21 | I'll be starting with the file
loginform.php, or if you are working with
| | 00:24 | ColdFusion, you can start with
loginform.cfm, and I'll save the file under a
| | 00:29 | new name before applying the validation
rules. I'll go to the Dreamweaver menu
| | 00:34 | and select File > Save As and I'll
name the new file loginformwithvalidation.
| | 00:42 | In this form I already have form controls.
| | 00:45 | Two text fields to accept the user name
and password, and a submit button. I'll
| | 00:50 | start by selecting the control to
which I want to apply validation, the user
| | 00:55 | name field. You can apply validation
either through the menu or through the
| | 00:59 | Insert panel. From the menu select
Insert > Spry, and then select the
| | 01:06 | particular kind of control that
you want to apply validation to.
| | 01:09 | If you have already selected a text
field, and you select Spry Validation Text
| | 01:13 | Field from the menu, you'll simply be
wrapping the existing control with the
| | 01:17 | validation rules. If you place the
cursor in the form, but you don't select a
| | 01:21 | control, selecting this menu choice
will add both the controls and the
| | 01:25 | validation rules at the same time.
| | 01:27 | Instead of using the menu, you can
also use the Insert panel. I'll go to the
| | 01:32 | Insert panel and select Forms, and then
down at the bottom you'll find the same
| | 01:36 | set of choices. Spry Validation Text
Field and the others. The rules apply in
| | 01:41 | same way. I have already selected
the controls, and now I'll click Spry
| | 01:46 | Validation Text Field.
| | 01:47 | Notice that there is a slight blue
border above the control. That's actually a
| | 01:52 | header, which isn't visible right now
completely. To see it completely I'm
| | 01:56 | going to right-click anywhere in the
table or Command+Click on the Mac and
| | 02:01 | select Table, Expanded Tables mode. If
the confirmation screen pops up, just
| | 02:07 | click OK. Then I'll click on the
control again. Notice this time I can see the
| | 02:11 | blue header that indicates that the
form control is wrapped in Spry Validation.
| | 02:16 | Now to modify the validation rules,
I'll click blue header above the control.
| | 02:21 | The Properties panel at the bottom of
the screen updates to show me the options
| | 02:24 | for the current validation. Here are
the changes I'm going to make. I'm going
| | 02:29 | to customize the name of the Spry
TextField, naming it SpryUserName. The type
| | 02:35 | list allows you to select what data
type the user has to type into this
| | 02:39 | control. None means it can be any
simple string. There are Integer values,
| | 02:44 | Number values, Currency, Credit Card,
Date and Time values. Because the user
| | 02:49 | name is a simple string, I won't
select any of these right now, but when you
| | 02:53 | select these, you'll be
validating for that particular data type.
| | 02:57 | Also notice in the lower right corner
that there are options for Required and
| | 03:01 | Enforce Pattern. The Required option,
which is turned on by default, means that
| | 03:05 | these are must type a value in or
they'll fail a validation. The Enforce
| | 03:10 | pattern option allows you to apply
regular expressions. Now when the user types
| | 03:15 | in a value that doesn't match your
business rules, they will see an error pop up.
| | 03:20 | Here is how you customize the error
message. Go to the list of available
| | 03:24 | preview states and select Required.
You'll see the control and the error
| | 03:29 | message as it will appear if the user
has broken the validation rule. I'm going
| | 03:33 | to click into the error message, and
customize it as user name is required.
| | 03:39 | Now I'm also going to apply
validation rules to the password control. I'll
| | 03:43 | click on the Password control, I'll go
to the Insert panel, and this time I'll
| | 03:47 | select Spry Validation Password.
I'll click on the blue header above the
| | 03:52 | control, go down to the Properties
panel and customize the name of the control,
| | 03:58 | Spry Password. I'll look at the preview
state for Required, and I'll once again
| | 04:05 | customize the error message, this
time saying password is required.
| | 04:09 | Now I'm going to make one more change.
This one purely cosmetic, before I test
| | 04:14 | the form. I'm going to expand the size
of the table to as wide as I can. This
| | 04:19 | will ensure that there is plenty of
space on the right to display the error
| | 04:22 | messages when they pop up. I'm also
going to select the cells containing the
| | 04:26 | labels and check the No Wrap option in
the Properties panel, to make sure that
| | 04:31 | they don't wrap within the cells.
| | 04:33 | Now I'll save the file. When you save
your web page, Dreamweaver detects that
| | 04:38 | there are certain files that are
going to support the Spry Validation tools
| | 04:42 | that need to be added to your website.
I have used the Text Field and the
| | 04:46 | Password Validation tools. Each
validation rule requires a JavaScript file and
| | 04:52 | a CSS file for cascading style sheets.
| | 04:55 | These files are added to your website
automatically, and are placed by default
| | 05:00 | in a folder underneath your website
root named SpryAssets. This dialog box is
| | 05:05 | simply informing you that these files
have been created. You must upload these
| | 05:09 | files to your production server in
order for the behavior that you have just
| | 05:13 | created to function correctly.
| | 05:16 | I'll click OK, and now I'm going to
test the page in an external browser. I'll
| | 05:21 | exit the Expanded Tables mode, and
then preview the page in your selected
| | 05:26 | browser, and when the form appears it
should look exactly the same as it did
| | 05:30 | before, but if you now click the
Submit button, you will that automatic
| | 05:34 | JavaScript based validation has kicked in.
| | 05:37 | If the user breaks any of the rules of
the validation, the background color of
| | 05:40 | the controls change, and the error
message is displayed without the form having
| | 05:45 | been submitted to the server. Now I'll
type values in. I'll type in a value of
| | 05:50 | admin, for both the user name and the
password. I'll click Submit, and now the
| | 05:54 | request goes off to the
server, and is successful.
| | 05:58 | So that's a look at how to apply client
-side JavaScript based form validation
| | 06:02 | using the Spry framework. Now in the
next set of videos, I'll show what happens
| | 06:07 | when you add multiple validation rules
to a single control, and also give you
| | 06:11 | some tips about how to customize the
look and feel of the controls and the
| | 06:15 | error messages when validation happens.
| | Collapse this transcript |
| Laying out the validation user interface| 00:00 | Once you've added Spry based
validation to a form control you can extend the
| | 00:04 | control's behavior by adding
additional validation rules. In this video I'll
| | 00:09 | show you how to apply additional
validation rules once you've already applied
| | 00:13 | this validation functionality. I'll
be starting with the file I have worked
| | 00:16 | with in the previous video,
loginformwithvalidation and I'll save the file
| | 00:20 | under a new name and then add the new
functionality. With the file open, I'll
| | 00:25 | select File > Save As and I'll name
the new file loginformmultiplerules.
| | 00:34 | Now I'm going to select the text field
for the User Name control and then take
| | 00:38 | a look at the Properties. Notice that
there are various rules listed at the
| | 00:42 | bottom of the Properties panel. I'm
going to add the following two rules.
| | 00:47 | A Minimum number of characters and a
Maximum. For example a User Name might have
| | 00:51 | the maximum of 20 characters.
| | 00:53 | So I'll click in to the Max Chars text
field and type in a value of 20. Notice
| | 00:59 | that Dreamweaver automatically changes
to a preview state named Exceeded max
| | 01:03 | number of characters and shows a
default error message for that condition. I'll
| | 01:08 | click in to the error message and
customize it typing in User Name can't exceed
| | 01:13 | 20 characters.
| | 01:16 | Now I'll do the same thing on the
password. I'll click on the control and then
| | 01:20 | on the blue header for the password
validation then I'll go down to the
| | 01:24 | Properties panel. Now I'm going to
click into the Min Characters and set to a
| | 01:28 | value of 8. A Max Characters of 15 but
I'm also going to apply rules for the
| | 01:33 | strength of the password. I'll indicate
that you must have at least one number
| | 01:37 | and at least one upper case character.
| | 01:40 | So here are the different preview
states that are now available. Here is the
| | 01:44 | minimum number of characters not
met and the default error message. The
| | 01:48 | exceeded max number of characters and
then also the Invalid Strength rule which
| | 01:53 | can be applied for any of the rules
that I select down at the bottom of the
| | 01:56 | Properties panel.
| | 01:58 | I'll save the changes and I'll test
the page in the external browser. I'll
| | 02:04 | click the Submit button and you'll see
the required rules have kicked in. But
| | 02:08 | now I'll type a value into the User
Name field that's too long for the control.
| | 02:12 | This is a very, very long User
Name that's too long for the rule.
| | 02:19 | And I'll type in a password that's too
short. One, two, three, four, five and
| | 02:24 | click Submit and you'll see the
customized error message is displayed. Now for
| | 02:29 | the password I'll go ahead and type in
a value that is long enough but doesn't
| | 02:33 | match the required password strength.
And I'll see the message 'the password
| | 02:39 | doesn't meet the specified strength.'
So you can see that the Spry validation
| | 02:44 | rules are very flexible.
| | 02:46 | You can add multiple rules to a single
control and you can also have customized
| | 02:50 | error messages for each of the various
conditions that the User has to meet.
| | Collapse this transcript |
| Modifying validation display with CSS| 00:00 | When you implement Spry based
validation or other functionality in the Spry
| | 00:04 | framework, the look and feel of the Spry
presentation such as the error messages
| | 00:09 | is determined by cascading style sheet
files that are added automatically to
| | 00:13 | your website. In this presentation
I've used two validation tools: the text
| | 00:18 | field and the password. The text field
validation rules handle simple strings
| | 00:23 | and the password knows have to look
for more advanced patterns such as the
| | 00:26 | strength of a password.
| | 00:28 | The visual presentation of the error
messages for the validation are in these
| | 00:32 | two CSS files. SpryvalidationTextfield.css
and SpryvalidationPassword.css.
| | 00:40 | If you want to modify the look and feel
of how validation is displayed in your
| | 00:43 | website, you do so through
these cascading style sheet files.
| | 00:47 | Here is an example. I'm going to click
into the error message for the User Name
| | 00:52 | control. Then I'll go to the CSS Styles
panel and click the Current tab so that
| | 00:59 | I can see what the font looks like
when the error message is displayed. In the
| | 01:03 | CSS Styles panel I see that there is
a particular color for the font. I'll
| | 01:08 | click into the color, then I'm going
to modify it to appear red, #ff0000.
| | 01:15 | Now I'm also going to add another
property Font Weight and set it to a value of
| | 01:19 | Bold and I'll add one more Font Style
and set that to a value of Italic. Notice
| | 01:27 | that this only affects the error
message for the User Name control. I'll save
| | 01:31 | the changes to both the webpage and to
the cascading style sheet file and then
| | 01:36 | preview the page in the browser.
| | 01:39 | I'll click the Submit button and you
can see that the error message for the
| | 01:43 | text field looks different than the
error message for the password. So now I'll
| | 01:47 | come back to Dreamweaver and make the
same changes for the password. I'll click
| | 01:51 | into the User Name control, I'll go
to the CSS Styles panel to the current
| | 01:55 | settings and I'll add the property,
adding Font Weight and setting it to Bold
| | 02:04 | and adding Font Style and setting it to Italic.
| | 02:09 | I'll preview the page in the browser
again after having save changes to the
| | 02:13 | webpage and to the cascading style
sheet file. I'll click the Submit button
| | 02:17 | without entering any values and you'll
see that the CSS styles are now applied
| | 02:22 | to both controls. That's the general
pattern for the use of cascading style
| | 02:27 | sheet with Spry. Whenever you add a
new Spry behavior that you've never used
| | 02:31 | before Dreamweaver adds the required
JavaScript and cascading style sheet files
| | 02:36 | to your website. You can then
modify the cascading style sheet files to
| | 02:40 | customize the way error messages or
other aspects of the Spry presentation are
| | 02:44 | displayed in your web pages.
| | Collapse this transcript |
|
|
10. Using Spry XML Data SetsCreating a Spry XML data set| 00:00 | One of the most important elements of
the Spry framework is its ability to
| | 00:04 | download and parse XML formatted data
at runtime and present that data on a web
| | 00:08 | page using AJAX style programming
techniques. In this chapter I'm going to
| | 00:13 | describe how to create an XML Spry
data set from an XML file and I'll also
| | 00:18 | describe how to generate XML
dynamically using ColdFusion and PHP.
| | 00:23 | In this video I'm going to start using
a static XML file. If you have access to
| | 00:28 | the exercise files that came with the
video series, you can find this XML file
| | 00:32 | in the Exercises folder under the
assets folder. The name of the file is
| | 00:36 | titles.xml. I'll open the file in
Dreamweaver. This file has data that's
| | 00:43 | derived from the MySQL database I have
been using throughout the video series.
| | 00:47 | It has a root element named data,
repeating elements named row, and then child
| | 00:52 | elements of the row named title_id, title,
price, au_id, au_fname, and au_lname.
| | 00:58 | In this example, I'm going to create a
web page that downloads this XML file at
| | 01:03 | runtime and turns it into usable data
that you can then present dynamically on
| | 01:07 | the screen using AJAX programming.
I'll start in the template file. I'm not
| | 01:12 | going to be using any server-side
programming in this demonstration, so it
| | 01:16 | doesn't matter whether you are
working in PHP or ColdFusion. I have opened
| | 01:20 | template.php and I'll save this file
under a new name selecting File > Save As
| | 01:25 | and naming the file staticdataset.
| | 01:30 | You can define a Spry data set either
from the menu or from the Insert panel.
| | 01:35 | From the menu select Insert > Spry >
Spry Data Set, or from the Insert panel,
| | 01:43 | go to the Spry category and select
Spry Data Set. You can create a data set
| | 01:48 | either from HTML or from XML. I'll set
the Data Type to XML and then I'll set
| | 01:55 | the Data Set Name to dsTitles.
| | 01:58 | The XML files should be in your web
server site root. It's not right now, but
| | 02:02 | Dreamweaver will place the file for
me if I allow it to. So I'll go to the
| | 02:06 | Browse button next to Specify Data
File and then I'm going to browse to my
| | 02:11 | Desktop where I have placed my
Exercises folder. I'll go to the Exercises
| | 02:16 | folder, to the assets folder, to
titles.xml, and I'll select the file.
| | 02:22 | Dreamweaver notes that the file isn't
in my site's root folder and asks if I
| | 02:26 | would like to copy the file there now.
I'll click Yes and now I'm prompted for
| | 02:31 | the name and location of the file.
| | 02:33 | I am going to create a new folder
named xml and then I'll retain the name of
| | 02:40 | the file, titles.xml, and click Save.
Dreamweaver immediately parses the file
| | 02:46 | and presents the file's element
structure. The file has a root element named
| | 02:50 | data and notice that the row element is
indicated with a plus icon, which means
| | 02:55 | that there is more than one of
that element with the same name.
| | 02:58 | In order to parse the file, you must
indicate to Spry which is considered the
| | 03:03 | row element. That is, the element that
represents each record of the database.
| | 03:07 | I'll select the row element and
Dreamweaver reacts by immediately parsing the
| | 03:11 | file and showing me in the Preview
section at the bottom of the screen how
| | 03:15 | it's going to determine what
constitutes a column. Also notice that it shows me
| | 03:19 | an XPath expression.
| | 03:22 | XPath is an expression language that's
used to parse XML. Data/row means get
| | 03:27 | the row element that's a child of the
data element. Now I'll click Next. In the
| | 03:33 | Set Data Options screen, you can set
sorting, filtering, and other options. In
| | 03:38 | order to sort on a column, you go to
the Sort Column item and then you select
| | 03:42 | the column that you want to sort on,
and indicate either Ascending or
| | 03:45 | Descending order. So I have
sorted on the title column.
| | 03:49 | You can also set particular data
types. For example, the price column is
| | 03:54 | numeric. XML is returned and parsed
by Dreamweaver always as strings, but if
| | 03:59 | you know that the values in a particular
column are always of a particular data type,
| | 04:03 | you can select that column, then
go up to the selector at the top and
| | 04:08 | pull down the Type list and choose
the appropriate data type. I'm choosing
| | 04:12 | number. I'll click Next and on the
final screen you are asked how you want to
| | 04:17 | display the data.
| | 04:18 | I am not going to display the data yet
at all in this page. I'm simply getting
| | 04:22 | the data so I can use it in bindings
and in repeating regions, and so on. So
| | 04:27 | I'll leave the screen to its default
settings, Do not insert HTML, and then
| | 04:31 | I'll click Done. That generates the
data set. Now you don't actually see
| | 04:36 | anything in the page, but
let's take a look at the code.
| | 04:40 | In Code View, you'll find a new script
section that generates a new variable
| | 04:45 | called dsTitles, which is an instance
of a JavaScript class called XMLDataSet.
| | 04:51 | All of the information you need to
retrieve the file, parse it, sort it, and
| | 04:55 | set data types is in this section of
the JavaScript code. Now that JavaScript
| | 05:00 | XMLDataSet class is defined in a
separate file, a JavaScript library file, and
| | 05:06 | that library file is required as a
part of your website. So now in order to
| | 05:11 | populate that file into the website,
I'm simply going to save the file that I
| | 05:15 | have been working on.
| | 05:16 | Dreamweaver prompts me and tells me
that two files are required to support the
| | 05:20 | XMLDataSet functionality,
SpryData.js and xpath.js, and as in previous
| | 05:27 | examples, Dreamweaver automatically
copies these file in to the SpryAssets
| | 05:31 | folder under the site root. When you
upload your files to your production
| | 05:35 | website, you must be sure to include
these files so that the Spry functionality
| | 05:40 | works when the user requests your page.
| | 05:44 | I'll click OK and then I'll save
and Preview the page. Now you won't see
| | 05:49 | anything different in the page yet,
because we have retrieved data but haven't
| | 05:53 | displayed it yet. But I'll show
you how to do that in later videos.
| | Collapse this transcript |
| Generating XML output with ColdFusion| 00:00 | As I described in the previous video,
a Spry XMLDataSet consists of data from
| | 00:05 | an XML file that's downloaded at
runtime from a Web server. From the point of
| | 00:09 | view of the Spry framework in the client,
it doesn't matter whether the content
| | 00:13 | comes from a static XML file, or from a
dynamic page written in ColdFusion PHP,
| | 00:19 | or some other application server. In
this video, I'm going to describe how you
| | 00:23 | can use ColdFusion to create data from
a database, and then format that data in
| | 00:28 | XML to deliver to Spry on the client.
| | 00:31 | If you have access to the Exercises
folder, the file to do this has already
| | 00:35 | been created. Go to the Exercises folder,
to the assets folder, and from there
| | 00:40 | to ColdFusion, and from there to
xml. There is a file there called
| | 00:45 | gettitles.cfm. I'm going to copy
that file to the clipboard, and then in
| | 00:50 | Windows Explorer, or in Finder, if you
are working on Mac, navigate to the root
| | 00:54 | folder under the ColdFusion document root.
| | 00:57 | I will go to the c:/ColdFusion8/
wwwroot folder, from there I'll go down to
| | 01:05 | dwwithcf, from there to a folder named
xml, and if you don't have that folder,
| | 01:10 | because you didn't work through the
previous exercise on ColdFusion, just
| | 01:14 | create the folder now. Then I'll paste
the file into place. Again, if you are
| | 01:19 | working on Mac, the location will be
under /applications/ColdFusion8/wwwroot,
| | 01:26 | and from there the directory structure
is the same. Now return to Dreamweaver,
| | 01:31 | and go to your DW With ColdFusion site,
refresh the site file list, and then go
| | 01:37 | down to the xml folder, and open the file
gettitles.cfm, and look at the file in Code View.
| | 01:46 | Here are the steps that you follow to
take data from a database on the server,
| | 01:50 | and turn it in to XML that can be
consumed by Spry. First of all, all of the
| | 01:54 | code is wrapped in
cfprocessingdirective tag set with an attribute of
| | 01:58 | suppresswhitespace set to Yes. This
ensures that as you generate the XML
| | 02:03 | content that extra white space, spaces,
tabs, and line feed characters don't
| | 02:08 | interrupt or disrupt the XML structure.
| | 02:10 | Within the cfprocessingdirective tag set,
which ends at the bottom of the file
| | 02:14 | down here, first there is a cfquery
tag that retrieves the data from the
| | 02:19 | database. Then there is a tag set
named cfxml. The cfxml tag set takes an XML
| | 02:25 | structure that you declare in pure XML
Markup, and assigns it to a variable,
| | 02:30 | which you name in the Variable
Attribute. Here, I'm naming the XML object
| | 02:36 | xTitles.
| | 02:37 | The next step is to construct the XML
structure. I've done that with a root
| | 02:42 | element named data, and then cfoutput
tag set with a query of rsTitles, which
| | 02:48 | results in looping through the query
data, and outputting this content once for
| | 02:52 | each row. Then there is row element,
which repeats in the XML file, and then
| | 02:57 | one child element within the row for
each column of data that I want to output.
| | 03:02 | The title_id, the title, and so on.
| | 03:05 | The cfxml tag set results in
creating a Variable called an XML object in
| | 03:09 | ColdFusion. The next step is to output
this XML object as an XML string to the
| | 03:15 | browser. At this line there is a tag
called cfcontent. Its type is set to
| | 03:21 | text/xml and its character set to UTF-8.
Then within a pair of cfoutput tags,
| | 03:27 | there is a call to the ColdFusion
function toString, and I pass in the XML
| | 03:31 | object, xTitles, the entire expression
is wrapped in pound signs, wrapped into
| | 03:35 | cfoutput tags, and the result is
outputting the XML string to the browser.
| | 03:40 | I'll preview the page in an external
browser, so we can see the result. There
| | 03:45 | is the result, the XML is displayed in
the browser, and if I review the content
| | 03:52 | that's returned to the browser by
viewing the source in the browser, you'll see
| | 03:56 | that what's returned is well formed XML,
but the way the data is represented in
| | 04:00 | the XML file is
determined by the ColdFusion page.
| | 04:04 | So once you have created this sort of
file in ColdFusion, you can then retrieve
| | 04:08 | the file using a Spry XMLDataSet,
parse it, and present its data using Spry
| | 04:14 | AJAX programming techniques, which
I'll describe further in a later video.
| | Collapse this transcript |
| Generating XML output with PHP| 00:00 | Just as with ColdFusion, if you are
working with PHP, it's possible to query a
| | 00:04 | database and then transform the data
into well-formed XML, which is suitable
| | 00:09 | for consumption by Spry. In this video
I'll describe how to do this with PHP.
| | 00:15 | If you have access to the Exercise Files,
a PHP page is available that already
| | 00:19 | does the work. Go to the Exercises
folder, to the assets folder, to PHP, to
| | 00:27 | XML, and you will find a file there called
gettitles.php. Copy this file to the clipboard.
| | 00:34 | Then navigate to your Web root folder
under PHP. On Windows that's C:\wamp\www,
| | 00:44 | and on Mac it's \applications\mamp\htdocs.
| | 00:50 | Then go down to the dwwithphp folder,
from there to the XML folder, and if you
| | 00:56 | don't have that folder, just create it,
and then paste the file into place.
| | 01:00 | Now, return to Dreamweaver and
navigate to the site DW With PHP. Open the XML
| | 01:08 | folder, refresh the site if necessary,
and then open the file gettitles.php and
| | 01:15 | look at the file in Code view.
| | 01:19 | At the top of the file, there is
a PHP code block that includes the
| | 01:23 | dw_bookstore.php file. Notice that this
file has been customized to expect that
| | 01:28 | the Connections folder is one parent
folder up. That's what the '..' expression
| | 01:32 | is doing in the require_once call.
| | 01:36 | Next, there is a query to the database
table. This is the same query that is
| | 01:40 | used in the ColdFusion version. It
retrieves data from two tables, authors and
| | 01:44 | titles, and joins the two tables on
their key columns. Then executes the query,
| | 01:50 | and then navigates to the first row
of the return data using this command:
| | 01:55 | mysql_fetch_assoc.
| | 01:58 | The next step is to generate an XML
document string. I'm using a code library
| | 02:03 | that's included with PHP called
SimpleXML. This first bit of code declares the
| | 02:09 | root structure of the XML document,
including an XML declaration, and then a
| | 02:13 | root element named data.
| | 02:16 | Then that XML string is converted
to an XML object using a class called
| | 02:21 | SimpleXMLElement.
| | 02:23 | The next bit of code loops through
the record set, and generates one child
| | 02:27 | element named row for each record, and
then adds child objects to the rows for
| | 02:31 | the title_id, title, and other columns.
The loop continues as long as there is
| | 02:36 | data to retrieve from the record set.
| | 02:39 | Once the XML object has been completely
constructed, you then output it to the
| | 02:43 | browser. This command, the header
command, tells the browser to expect XML
| | 02:48 | formatted data. It's very similar to
the cfcontent command in ColdFusion.
| | 02:53 | Then finally there is an echo command
that outputs the XML object as an XML
| | 02:57 | string, using the
SimpleXMLElement classes as XML function.
| | 03:02 | So that's all of the required PHP code
to retrieve data from the server side
| | 03:06 | database, convert it to XML, and then
send it out to the browser upon request.
| | 03:11 | I'll test the result by previewing the
page in the external browser. Just as in
| | 03:17 | ColdFusion, the data is returned as well-
formed XML, which is suitable for use with Spry.
| | 03:23 | Now, there is one thing that's
different from ColdFusion. I'm going to select
| | 03:26 | View > Page Source or if you are
using Internet Explorer, simply View >
| | 03:31 | Source. You will see that when XML is
serialized or converted and sent out the
| | 03:36 | browser using the simple XML Code
library in PHP, that the XML is all
| | 03:41 | scrunched together. That you don't see
what's known as pretty XML, with tabs,
| | 03:45 | spaces, and so on. To the human eye,
this sort of an XML is a little bit harder
| | 03:50 | to read, but from the point of view of
the browser, this doesn't matter at all,
| | 03:53 | because the white space is only for
the human and not for the computer.
| | 03:57 | There are techniques available to turn
this into pretty XML, and if you want to
| | 04:01 | learn how to do that, go into Google
and type in 'simple XML, pretty XML' and
| | 04:07 | you will find some links to various
functions that PHP developers have created
| | 04:11 | to improve this output and make it a
little bit easier to look at. But again,
| | 04:15 | that's aesthetics only, but functionally,
this XML will work fine, and will be
| | 04:19 | completely suitable for use with Spry.
| | Collapse this transcript |
| Generating HTML output| 00:00 | Regardless of whether you are using
static XML, or well-formed XML that's
| | 00:04 | generated dynamically by PHP or
ColdFusion or some other application server,
| | 00:09 | you can use Spry to retrieve the XML
content and then present the data on the
| | 00:13 | screen in your web page. In this video,
I'll retrieve dynamically generated
| | 00:18 | XML, and then use one of Dreamweaver CS4's
new tools to generate automatic HTML output.
| | 00:24 | I will start with the dynamic gettitles
page. If you are working with PHP, it's
| | 00:28 | gettitles.php, or in ColdFusion,
gettitles.cfm. This is the file that I copied
| | 00:34 | into the website in the previous video.
| | 00:36 | I am going to browse the page and
verify that I'm retrieving well-formed XML in
| | 00:40 | the browser. Then I'll copy the URL for
the dynamic page to the clipboard, and
| | 00:46 | close the browser.
| | 00:47 | Now, I'll open my template file,
template.php or template.cfm, and save it
| | 00:53 | under a new name. Selecting File
> Save As and naming the new page
| | 00:58 | dynamicxmldataset.
| | 01:01 | Now, I'm going to follow the same set
of steps as I did in the first video of
| | 01:05 | the chapter to create a Spry dataset.
I'll use the menu this time. I'll select
| | 01:10 | Insert > Spry > Spry DataSet. I'll set
the Data Type to XML, and the DataSet
| | 01:19 | Name to dsTitles.
| | 01:25 | Now, instead of browsing for a data file,
I'm simply going to paste in the URL
| | 01:30 | that I copied from the browser,
pressing Ctrl+V or Cmd+V on the Mac. Then I'll
| | 01:35 | press the Tab key. Dreamweaver
retrieves the dynamically generated XML, and
| | 01:40 | just as before, presents the
Element structure of the XML content.
| | 01:44 | I will select the row element to
indicate how the XML files should be parsed,
| | 01:49 | and I'll click Next.
| | 01:51 | As before, I'll Sort on the title.
I'll select the price column and indicate
| | 01:57 | that it should be data typed as a
number, and I'll click Next again.
| | 02:02 | Dreamweaver CS4 allows you to generate
HTML content. There are four possible
| | 02:07 | options. Inserting a dynamic Spry
Table. Inserting a master/detail layout.
| | 02:12 | Inserting stacked containers, and
inserting stacked containers with a spotlight area.
| | 02:17 | I am going to demonstrate the use of a
master/detail layout. I'll click Setup,
| | 02:22 | and then in the Master Columns I'll
Add the title column. I'll click the Plus
| | 02:27 | button, select title, and click OK.
| | 02:30 | On the left side of the screen,
that's going to create a list of content
| | 02:34 | displaying the title_id and the title.
| | 02:36 | Now, I'll go down to the Detail
Columns list and I'll Remove the author id,
| | 02:41 | au_id, by selecting that column, and
then clicking Minus. So in the left column
| | 02:46 | I'll see the Master list, and when
the user clicks on an item, I'll see the
| | 02:50 | details in the Detail list. I'll click
OK to save the Set Up, and then click
| | 02:55 | Done to create the dataset and the layout.
| | 02:58 | Now, it's very common in this
circumstance depending on where the cursor was in
| | 03:02 | the page, to have the content
land somewhere other than you wanted.
| | 03:05 | So I'm going to click into the newly
generated content, which in my page landed
| | 03:10 | at the top of the page. Then I'll go
down to the Tag Selector. And I'll select
| | 03:14 | the div tag with a class of MasterDetail.
That's a div container that contains
| | 03:19 | all of the HTML and AJAX
markup that's been generated.
| | 03:23 | I will cut that content to the clipboard,
pressing Ctrl+X or Cmd+X on the Mac.
| | 03:29 | Now, I'll click into the content area
after the headline and press Enter, and
| | 03:33 | then Paste with Ctrl+V or Cmd+V on the
Mac. I'll Save the changes. Now, when I
| | 03:38 | save my changes by pressing Ctrl+S or
Cmd+S on the Mac, Dreamweaver notices
| | 03:43 | that a required file is not a part
of my website. This is a very similar
| | 03:47 | behavior to previous actions where I
added Spry based functionality that need
| | 03:51 | supporting files.
| | 03:52 | In the case of the MasterDetail output,
you need a cascading style sheet file
| | 03:56 | called SpryMasterDetail.css, and
Dreamweaver notices that it's needed and adds
| | 04:01 | it to the website automatically.
| | 04:03 | I will click OK to close the
Confirmation dialog, Save the changes, and then
| | 04:09 | Preview the page in the browser.
| | 04:13 | As the page loads, it makes a request
for the XML content, and then displays
| | 04:19 | the content, as you see on the left.
Notice as I move the cursor over the
| | 04:23 | content on the left, Dreamweaver has
created an automatic highlight bar, and
| | 04:28 | now when I click one of the items, you
will see the detail region over on the
| | 04:32 | right is updated and displayed.
| | 04:34 | Now, I'm going to make one more change.
I'll close the browser, and then I'm
| | 04:39 | just going to apply a little bit of formatting.
| | 04:41 | I will select the title in the detail
area, and then in the Properties panel
| | 04:46 | I'll click the Bold button, to
indicate that I want that value bolded. I'll
| | 04:50 | Save the changes, then once again
I'll Preview the page in the external
| | 04:54 | browser. I'll move the cursor over an
item, and you will see that once again as
| | 05:01 | the user interacts with the data that's
been dynamically created on the screen,
| | 05:05 | that the detail region updates automatically.
| | 05:08 | So that's a look at how to use
dynamically generated XML, how to use it as a
| | 05:12 | Spry XML dataset, and then how to
use one of the pre-designed HTML layout
| | 05:18 | options to generate HTML
presentation as you create the dataset.
| | Collapse this transcript |
| Creating a Spry table| 00:00 | In this video, I'm going to describe
how to generate another sort of display
| | 00:04 | of a Spry XML Data Set, a Spry table. A
Spry table is nothing more than an HTML
| | 00:09 | table that displays repeating data
in table rows. In Dreamweaver CS4, you
| | 00:15 | generate a Spry table using the same
steps as when you create the data set
| | 00:19 | itself that is through the
Spry XML data set wizard.
| | 00:22 | For this demonstration, I'm going
to start with the existing file,
| | 00:25 | dynamicxmldataset, which I created in
the previous video. I'll save it under
| | 00:30 | another name selecting File > Save As,
and I'll name the new file sprytable.
| | 00:37 | Once again, you can do this with either
ColdFusion or with PHP. Now, in the new
| | 00:41 | sprytable database, I'm going to
remove the existing presentation. I'll click
| | 00:46 | into anywhere in the presentation,
then go down to the Tag Selector and I'll
| | 00:51 | select the div tag with a class of
MasterDetail and then press Delete.
| | 00:56 | `Now I'll press Enter or Return to
create a paragraph and then, I'll go to the
| | 01:00 | Bindings tab where the data set
I've already created is displayed. I'll
| | 01:06 | double-click on the data set dstitles,
and that takes me back to the Spry Data
| | 01:11 | Set wizard. I'll click the Next button,
the Next button again, and this takes
| | 01:16 | me back to the Insert options.
| | 01:19 | Now, I'm going to insert a dynamic Spry
table. I'll click the Setup button for
| | 01:23 | insert table and I'll indicate which
columns I want to include in the table.
| | 01:28 | I'm only going to include three of
them, the Title ID, the Title, and the
| | 01:32 | Price. So I'll click on the AUID
column and click the Minus button and then
| | 01:36 | click minus two more times.
| | 01:38 | I also want to allow the user to sort
columns, but I only want them to sort on
| | 01:43 | Title or Price. So I'm going to click
on the Title ID, then I'll deselect the
| | 01:48 | option Sort Column when header is
clicked. Now, when the user clicks either
| | 01:51 | their Title or the Price header, the
data will sort appropriately. I'll click
| | 01:56 | OK, and then click Done to create the table.
| | 02:00 | There is the table. I'll save my
changes, and I'll preview the table in the
| | 02:04 | browser, and there is the result. I can
style the HTML table however I like and
| | 02:11 | in fact in the next video, I'll show
you some options for ways to apply certain
| | 02:14 | styles. But notice now that I can move
the cursor to either the title or the
| | 02:18 | price header, and I can
sort based on that column.
| | 02:22 | When you move the cursor over the
strings Title and Price, you won't see any
| | 02:26 | update or any visual feedback to
indicate that the user can click and sort.
| | 02:31 | So here is a little trick you can do to
add a hyperlink around the strings and
| | 02:35 | apply certain styles that gives the
user a little bit more of a clue. I'll
| | 02:39 | return to Dreamweaver, and I'll first
go to the header for title, and I'll
| | 02:44 | select the cell within the cell.
| | 02:47 | Then I'll move the cursor down to the
Properties panel, click into the text-box
| | 02:51 | for a link and put in just a pound
sign and press Enter, and that results in
| | 02:55 | wrapping the text in an anchor
tag that doesn't do anything.
| | 02:58 | I will do the same thing for the
Price column. I'll click into the cell and
| | 03:02 | select the text within the cell. Then
go down to the Properties panel and once
| | 03:06 | again put in the pound sign for the
link and now, I'll preview and test again.
| | 03:13 | Now, the text in the headers looks like
something you can click, and I'll move
| | 03:17 | the cursor over it and click, and you
will see that the sorting still works as
| | 03:21 | expected. Because I have just put a
simple pound sign in as the HREF or the
| | 03:26 | target of the hyperlink, you don't
actually navigate to another page. This
| | 03:30 | simply serves as a way of designating
to the user that they can actually click
| | 03:34 | the link and it also gives you a way of
applying styles that will give the user
| | 03:38 | a better visual queue.
| | 03:40 | I will make one more aesthetic change.
I'll return to Dreamweaver, and I'll
| | 03:45 | select the text in the header for
the Title ID, and I'll change that to
| | 03:49 | friendly text or text the user can read
easily. It doesn't matter what the text
| | 03:53 | is in those headers. It's not linked
for example to the names of the elements
| | 03:58 | in the XML file.
| | 03:59 | I will Save and Preview one more time
and there is my completed Spry table that
| | 04:07 | allows me to sort on the two different
columns without having to make another
| | 04:11 | round trip to the server.
| | Collapse this transcript |
| Formatting Spry tables| 00:00 | The Spry framework supports various
cascading style sheet settings that you
| | 00:04 | can apply in repeating regions. That is,
rows that are repeated for each of the
| | 00:09 | records in a data set. I'm going to
show you in this video how to apply styles
| | 00:14 | to achieve alternating row colors in an
HTML table. I'll be working in the file
| | 00:18 | sprytable.php, or if you are working
in ColdFusion, sprytable.cfm, that I
| | 00:24 | created in the previous video.
There are a couple of steps to follow.
| | 00:28 | First of all, you need to establish
cascading style sheet classes. One for all
| | 00:32 | odd rows, and then one for all even
rows, and apply whatever styles you want.
| | 00:37 | Then in code, you apply those styles
using Spry Attributes, as I'll show you in
| | 00:42 | a bit. Let's start with the Styles.
| | 00:44 | I am going to go to the CSS Styles
panel. Notice that this page currently has
| | 00:50 | two style sheets attached. Styles.css,
which is the primary website style
| | 00:54 | sheet, and sprymasterdetail.css,
which was supplied by Dreamweaver when I
| | 00:59 | created the MasterDetail output earlier.
| | 01:01 | I am going to create these styles in
the styles.css file. In the CSS Styles panel,
| | 01:07 | I'll make sure that the All
button is selected and then I'll select
| | 01:11 | styles.css and then click the plus
button at the bottom of the panel.
| | 01:16 | I'll apply the following style. I'll
select Class, meaning I can apply it to any
| | 01:21 | HTML element, and then I'll set the
name of the class to Odd Row and click OK.
| | 01:28 | In the CSS Rule Definition dialog, I'll
click the Background category and I'll
| | 01:33 | select a background color of a light
grey. Depending on how your copy of
| | 01:38 | Dreamweaver is configured, this
translates to a hexadecimal code of either #999
| | 01:43 | or six characters, all 9s. And I'll click OK.
| | 01:47 | Now, I'll create one more style for
even rows. Once again I'll click the plus
| | 01:51 | button. I'll select a selector type of
Class and I'll give this one a name of
| | 01:57 | Even Row and I'll click OK. I'll once
again select the Background category and
| | 02:05 | the Background color and this time
I'll choose white or FFFFFF, or if
| | 02:10 | Dreamweaver has configured for three
character colors, simply FFF, and I'll click OK.
| | 02:16 | So those were the changes to the style
sheet. I now have those to classes, Odd
| | 02:20 | Row and Even Row. Now, I'll go back
to the sprytable file and I'm going to
| | 02:24 | save this under another name. I'll
select File > Save As and I'll name this
| | 02:30 | new file sprytablealternatingcolors,
and I'll look at the file in Code view.
| | 02:40 | Here is what the Spry table looks like
in code. There is a div tag with a Spry
| | 02:45 | region attribute that refers to the
data set dstitles. Within the table, there
| | 02:51 | are TH tags that each have Spry sort
attributes. This is what's causing the
| | 02:55 | sorting to happen when the user clicks
on one of the headers. And then there is
| | 02:59 | a repeating row marked by the Spry
repeat attribute referring once again to the
| | 03:05 | data set dstitles.
| | 03:07 | This row is where I want to apply my
styles. I'll click into the TR tag with
| | 03:13 | the Spry Repeat attribute, press Enter,
and then start typing Spry: and I'll
| | 03:18 | choose Spry:even, which is how you
apply the styles for even numbered rows.
| | 03:24 | You should see the list of available style
classes including even row, and I'll select it.
| | 03:29 | Now, I'll go down to the next line,
and I'll once again type Spry: and this
| | 03:33 | time I'll choose Odd and for this
setting, I'll choose the style class Odd
| | 03:37 | Row. I'll save my changes and I'll
test the page in the browser again. When
| | 03:45 | the page first opens in the browser, it
may not show the alternating row colors
| | 03:49 | the first time. That's because of
browser caching. Just refresh the browser
| | 03:53 | though and you should now see the
alternating row colors show up successfully.
| | 03:58 | Notice that when you sort the table,
the row colors remain the same. That is,
| | 04:01 | the colors don't travel with the data
because with the AJAX style programming
| | 04:05 | of the Spry framework, the values are
simply being written to the screen each
| | 04:09 | time you re-sort and the CSS style
classes are being assigned dynamically as well.
| | 04:14 | Any time you want to make a change in
how your table shows up, you can simply go
| | 04:18 | back to the styles. For example, if I
wanted to reverse the colors, I would go
| | 04:23 | to the styles, here for example is the
Odd Row style and I'll change this one
| | 04:28 | to #FFF and here is the even row
style and I'll change that to #999.
| | 04:37 | I'll go to styles.css in the File Selector
and save it. Go back to the source code,
| | 04:42 | preview the page in the browser
again and now the colors are reversed.
| | 04:48 | So that's a look at how you can use
cascading style sheets and Spry attributes
| | 04:52 | to modify the appearance of the content
that's dynamically being written to the
| | 04:56 | screen by the Spry framework.
| | Collapse this transcript |
| Generating a repeating list| 00:00 | In this video, I'm going to describe how
to generate a repeating list. That is,
| | 00:04 | an unordered list which contains
one item for each row in a Spry
| | 00:09 | data set. I'll start from the file
staticdataset.php or if you are working
| | 00:14 | with ColdFusion, staticdataset.cfm,
that I created in a previous video.
| | 00:18 | I'll save this file under a new name,
selecting File > Save As and I'll name this
| | 00:23 | spryrepeatlist.
| | 00:27 | Now I'll go to the Bindings panel and
refresh if necessary and make sure that I
| | 00:33 | can see the dsTitles dataset. If you
have any trouble with this, you may have
| | 00:37 | to close Dreamweaver and reopen it
again to make sure that you can see the
| | 00:40 | dataset in the copied page. The first
step to creating a repeat list is to
| | 00:45 | create a Spry region.
| | 00:46 | A Spry region is connected to a
particular dataset. I'm going to click after
| | 00:51 | the headline and press Enter in the
content area and then I'll go to the Insert
| | 00:57 | panel and create the Spry region. I'm
going to setup the Spry region in a DIV
| | 01:02 | tag and I'll connect it to the
dsTitle dataset and click OK.
| | 01:07 | The Spry region is indicated by the
checked box that you see on the screen. Now
| | 01:11 | within the Spry region, I'm first going
to output the total number of available
| | 01:15 | items in the dataset. I'll type in the
following text 'There are.' Now I'll go to
| | 01:20 | the Bindings panel again and notice
that the dataset has an automatic value
| | 01:25 | called ds_RowCount. This is a dynamic
value that will report back the total
| | 01:30 | number of items in the dataset. I'll
drag and drop that value and place it in
| | 01:35 | the content where I want it to
display then I'll click after it and type in
| | 01:39 | a space and book titles.
| | 01:42 | Now I'm ready to add the repeat list.
I'll press Enter or Return to create a
| | 01:46 | new paragraph. Then I'll go back to
the Insert panel and I'll select Spry
| | 01:52 | Repeat List. A repeat list can be
setup with an Unordered list, an Ordered list,
| | 01:57 | a Definition list or a Select.
I'm going to use Unordered list for this
| | 02:02 | exercise and I'll also indicate that I
want to display the title. This wizard
| | 02:07 | only allows you to display a single
column but it's pretty easy to add
| | 02:10 | additional content after you have
let the wizard do the initial work.
| | 02:13 | I will click OK and that creates the
unordered list. Notice that the title is
| | 02:18 | displayed next to the bullet. I'll
save and then I'll preview the page in the
| | 02:23 | browser and there is the
dynamically generated list from the dataset.
| | 02:29 | Now I'll make a modification to show
you that you can display other data. I'll
| | 02:34 | click after the title and type in
comma and the word by. Now I'll go back to
| | 02:40 | the Bindings panel and I'll drag and
drop the author's first name and last name
| | 02:45 | separated by a space. I'll save and
test the page in the browser once again and
| | 02:54 | now you can see the values of both
the title and the author's name and
| | 02:58 | I'll make one more change just for formatting.
| | 03:01 | Returning to Dreamweaver, I'll select
the title and I'll click both the Bold
| | 03:05 | and the Italic buttons in the
Properties panel and this is the final test.
| | 03:09 | I'll preview the page and show you that
the formatting is automatically wrapped
| | 03:13 | around the title, but not
around the author's name.
| | 03:16 | So that's a repeat list, another way of easily
generating dynamic output from a Spry XML dataset.
| | Collapse this transcript |
| Creating a Spry repeating region| 00:00 | In this video, I'm going to
describe how to create your own customized
| | 00:03 | presentation using the data from the
Spry XML dataset. I'll once again be
| | 00:08 | starting from the staticdataset file
that already contains an XML dataset based
| | 00:13 | on a static XML file. If you don't
have this file or the XML file that it
| | 00:17 | depends on, copy them over from the
solutions folder in the Exercises areas
| | 00:22 | into your website.
| | 00:23 | I am going to save the file under a new
name selecting File > Save As and I'll
| | 00:28 | name the new file spryrepeatregion. Now
I'm working once again with the static
| | 00:34 | XML file here so this exercise will
work exactly the same regardless of whether
| | 00:39 | you are using ColdFusion or PHP.
| | 00:41 | Now I'm going to place the cursor in
the content area after the headline and
| | 00:45 | press Enter or Return to create a new
paragraph then I'll go to the Insert
| | 00:50 | panel and I'll create a Spry region.
As I showed you in the previous video
| | 00:55 | about using a repeat list, a Spry
region is attached to a particular dataset.
| | 01:00 | You wrap dynamic content within the
region so you can refer to data and other
| | 01:04 | elements of the dataset.
| | 01:05 | I will use the default settings; the
Container of DIV and a Type of Region and
| | 01:10 | click OK. Then I'll select the sample
content and I'll replace it with the text
| | 01:17 | 'There are' and then just as I did
in the previous video, I'll go to the
| | 01:22 | Bindings panel and drag and drop the ds_
RowCount variable. I'll click after the
| | 01:27 | RowCount variable and type in a
space character and then the words 'book
| | 01:31 | titles.' I'll save and test this page
in the external browser and you should
| | 01:38 | see the response that there are
the right number of book titles.
| | 01:41 | I will close the browser and now I'm
ready for the repeat region. I'll press
| | 01:47 | Enter or Return to create a new
paragraph then I'll go back to the Insert panel
| | 01:52 | and this time I'll select Spry Repeat.
I'll set the type to repeat and the data
| | 01:58 | set to dsTitles and then click OK. With
the existing content selected, I'll go
| | 02:03 | to the Bindings panel and I'll drag
and drop the title value, and with the
| | 02:10 | title selected, I'll set the value
to Bold and Italic by clicking the
| | 02:14 | appropriate formatting
buttons in the Properties panel.
| | 02:17 | I am going to click after the title
variable and press Enter to create a new
| | 02:21 | paragraph and I'll type in the word
'by' and then drag and drop the dynamic
| | 02:26 | values; first name, then a space and
then last name. Now I'll close up the
| | 02:34 | values like this. I'll place the
cursor right before the word 'by' and press
| | 02:37 | Backspace and then Shift+Enter and
that will close it up using a break tag
| | 02:42 | instead of a paragraph and I'll
wrap all that in a paragraph pressing
| | 02:46 | Ctrl+Shift+P or Command+Shift+P on Mac.
| | 02:50 | I will check the code to make sure
things have happened the way that I want.
| | 02:53 | Notice the DIV tag with a Spry
repeat attribute pointing to the dataset
| | 02:57 | dsTitles and also notice that that
content is wrapped inside the paragraph and
| | 03:02 | that will create the extra vertical
space above and below the titles. If you
| | 03:06 | have an extra paragraph as I do here,
within the DIV tag, just delete it. Save
| | 03:13 | your changes, go back to Design View
and then test the page in the browser and
| | 03:20 | you should see the content
layout exactly the way you wanted.
| | 03:23 | So that's how you use repeating
regions to place content on the screen
| | 03:27 | repeating through the dataset
displaying one record from the dataset at a time.
| | 03:31 | You can also apply style sheets in the
same way as with a Spry table because a
| | 03:35 | Spry table is nothing more than an
HTML table wrapped around a repeating
| | 03:40 | region, wrapped around in HTML row.
| | 03:42 | So for example, I'll come back to the
page one more time. I'll go to Code View,
| | 03:49 | I'll locate the DIV tag with an
attribute of Spry repeat and I'll add the
| | 03:54 | Spry:even and set it to evenrow and the
Spry:odd and set it to oddrow. And I'll
| | 04:03 | save my changes and I'll test the page
one more time in the browser and once
| | 04:10 | again you will see the alternating row show up.
| | 04:13 | So that's a look at how to create a
repeating region which allows you to
| | 04:16 | customize the presentation of your
content by applying your own styles and your
| | 04:21 | own formatting and placement of the data.
| | Collapse this transcript |
|
|
11. Creating a Dynamic User Interface with SpryUsing multiple record sets and displaying multiple dynamic tables| 00:00 | In this final chapter of the video
series, I'm going to describe the use of
| | 00:04 | various techniques with the Spry
framework that allow you to use Ajax style
| | 00:08 | programming without actually
doing any JavaScript programming.
| | 00:11 | I'll be demonstrating the use of
accordions, which allow you to layer
| | 00:15 | presentations one on top of another,
and then move from one to another with an
| | 00:18 | animation, and also some other
approaches that are enabled by Spry. To make
| | 00:23 | this a little bit more dramatic, I'm
going to starting this video by creating a
| | 00:26 | page that contains multiple record sets,
and displays multiple dynamic tables.
| | 00:31 | I'll start from the template file
working with template.php, and if you are
| | 00:35 | working with ColdFusion, you can start
with template.cfm. I'll save this file
| | 00:40 | under a new name, selecting File >
Save As, and I'll name it multirecordsets.
| | 00:48 | Now, I'll go to the Bindings panel
and I'll create a couple of record sets.
| | 00:52 | I'll click the plus button and select
Recordset. If I open in the Advanced
| | 00:57 | Recordset as I did, I'll click the
Simple button. I'll give the first record
| | 01:04 | set a name of rsTitles. I'll set the
Connection to dw_bookstore, the Table to
| | 01:11 | titles. I'll click the selected radio
button, and then holding down the Ctrl
| | 01:16 | key or the Cmd key on Mac, I'll select
Title_id, title and price. And I'll Sort
| | 01:23 | on title and click OK. So
there's my first record set.
| | 01:28 | Now, I'll create another one. I'll
click plus again and select Recordset and
| | 01:33 | this one will be named rsAuthors.
The Connection once again will be
| | 01:39 | dw_bookstore, the Table this time will
be authors, and I'll click Selected and
| | 01:45 | I'll choose au_id, au_lname, and au_
fname, and I'll sort on the last name,
| | 01:52 | au_lname, and click OK.
| | 01:55 | Now, I'm going to add two dynamic
tables. I'll click in to the content area
| | 02:00 | after the headline and press Enter.
Then I'll go to the menu and select Insert >
| | 02:05 | Data Objects > Dynamic Data >
Dynamic Table. I'll Show All records for the
| | 02:12 | rsTitles table, and click OK. I'm not
going to add any headlines above the
| | 02:16 | tables because the intent will be to
take these tables in the next videos, and
| | 02:20 | place them into an AJAX framework.
| | 02:23 | So all I'm going to do is create one
more dynamic table. I'll click after the
| | 02:27 | existing table and press Enter or
Return. I'll once again go to the menu and
| | 02:31 | select Insert > Data Objects > Dynamic
Data > Dynamic Table. This time I'll set
| | 02:39 | the Recordset to rsAuthors, and choose
All Records and click OK. I'll save the
| | 02:47 | changes and I'll preview the page in
the browser and you'll see that you have
| | 02:53 | the titles tables at the top, and
the authors table at the bottom.
| | 02:57 | Now, I'll make a couple of other
cosmetic changes so that the tables are ready
| | 03:00 | for use in the later videos. I'll go to
each of the tables, select the top row,
| | 03:06 | and set those as header rows by
clicking the Header option in the Properties
| | 03:09 | panel and I'll clean up the titles.
I'll set this one to Title ID and I'll
| | 03:16 | capitalize the titles in the other two columns.
| | 03:20 | Then I'll do similar things in the
second table. I'll select the entire first
| | 03:24 | row and turn that into headers, and
then I'll clean up the titles with friendly text.
| | 03:35 | I'll save and preview once more.
| | 03:41 | Now, I'll move on to the next videos,
where I'll show you how to layer these
| | 03:45 | tables one on top of
another with a Spry Accordion.
| | Collapse this transcript |
| Using a Spry accordion| 00:00 | The Spry framework offers the ability
to generate AJAX style code that can
| | 00:04 | layer different presentations, and
then offer the user in interface for
| | 00:08 | navigating from one presentation to
another, without having to reload entire pages.
| | 00:13 | One of the main presentations that's
available is called an Accordion. An
| | 00:17 | Accordion is a stack of presentations
where only one presentation is visible at
| | 00:21 | any given time, and free to
presentation there is a header link that the user
| | 00:25 | clicks on. When the user clicks to go
to a particular layer of the Accordion,
| | 00:30 | the Spry framework triggers an
animation where the header slide up or down to
| | 00:34 | hide or reveal the
different layers of presentation.
| | 00:37 | In this video I'll show you how to
very easily create an Accordion with
| | 00:41 | Dreamweaver CS4 and Spry framework. And
then how to move existing content into
| | 00:46 | the various content layers of the Accordion.
| | 00:48 | I'll start with the file
multirecordsets that I created in the previous video,
| | 00:52 | and once again you can be working in
either PHP or ColdFusion. I'll save the
| | 00:58 | file under a new name, selecting File
> Save As, and I'll name the new file
| | 01:02 | spryaccordion.
| | 01:06 | Now, I'll place the cursor in the
content area above the dynamic table that I
| | 01:09 | created. And I'll go to the Insert
panel, and I'll select Spry Accordion. The
| | 01:18 | Accordion is created by default with
two content areas. In the Properties panel
| | 01:23 | down at the bottom, you'll see that the
two content areas are labeled, Label 1
| | 01:27 | and Label 2. And you can click in the
Properties panel to navigate between the layers.
| | 01:32 | The Plus and Minus icons allow you
to add or remove additional panels or
| | 01:36 | content areas, and the up and down
arrows allow you to move the content areas
| | 01:41 | up and down in the Accordion.
| | 01:43 | So once you've created the Accordion,
now you can move existing content into
| | 01:47 | it. First I'll go down to the
dynamic table that I created for the titles
| | 01:53 | record set. I'll click anywhere in the
table, I'll then go to the tag selector,
| | 01:58 | and click the table tag to make sure
I've selected the entire table, and I'll
| | 02:02 | press Ctrl+X or Cmd+X on Mac to
cut the table to the clipboard.
| | 02:07 | Now, I'll scroll back up to where the
Accordion is and I'll click into the
| | 02:11 | Accordion anywhere just to make the
header show up, and then I'll click on the
| | 02:15 | blue Accordion header.
| | 02:17 | In the Properties panel, which is
updated, I'll select Label 1. I'll then click
| | 02:25 | into the Content 1 area, and I'll paste
in the table, pressing Ctrl+Z or Cmd+Z
| | 02:31 | on Mac. I'll then click into the Label
1 and I'll assign the value of the Label
| | 02:37 | to Book Titles.
| | 02:38 | Now, I'll follow the same process for
the Authors record set, I'll scroll down,
| | 02:44 | I'll click into the Authors table,
I'll go to the Tag selector and click the
| | 02:48 | table tag and cut the table to the
clipboard. I'll move the cursor over the
| | 02:53 | Accordion and then click its header.
I'll go down to the Properties panel and
| | 02:57 | choose Label 2, I'll click into the
Content 2 section, select all of its
| | 03:02 | content, and paste the table into place,
then I'll go to the Label, and I'll
| | 03:08 | update the label with the value
Authors. I'll save the changes.
| | 03:13 | Now, when I save the changes to the web
page Dreamweaver notices that required
| | 03:17 | cascading style sheet files and
JavaScript files are not available in the
| | 03:21 | website, and so it adds these files to
the website automatically, just as with
| | 03:25 | previous Spry behaviors
that I have demonstrated.
| | 03:27 | In this case the files are named
Accordion.css andAccordion.js. I'll click OK,
| | 03:34 | and then I'll preview the page in
the browser, and you will see that the
| | 03:42 | Accordion actually scrolls the data
very nicely. I'll then move to the Authors
| | 03:49 | header and click it, and you will see
that I'm moved to the Authors data. I'll
| | 03:54 | go back to Book Titles and back to Book Authors.
| | 03:58 | So that's a look at how you can create
the Accordion. The Accordion styles are
| | 04:01 | all saved in the file spryaccordion.css.
So if you want to make changes to the
| | 04:07 | way the Accordion is presented, such as
its height, its background colors, the
| | 04:12 | colors or the font of the headers and
so on and so forth, you would make those
| | 04:15 | changes through this CSS file. And
any changes that you make will apply not
| | 04:20 | just to this Accordion, but to all
Accordions throughout your website.
| | Collapse this transcript |
| Using Spry tabbed panels| 00:00 | In this video, I'm going to describe
another option for layering content so
| | 00:04 | that the user can navigate from one
screen to another without actually having
| | 00:08 | to load pages from the server. In the
previous video, I described the use of an
| | 00:12 | accordion. In this video, I'll show
you how to use Spry tabbed panels.
| | 00:17 | Tabbed panels do the same thing as an
accordion. That is, they layer content so
| | 00:20 | only one layer can be seen at a time
and they provide a user interface that
| | 00:24 | allows the user to navigate from screen
to screen or layer to layer with clicks
| | 00:28 | on links but instead of the
animation of the accordion, the tabbed panel
| | 00:32 | presents a tabbed interface. For
this demonstration, I'll start with the
| | 00:36 | multirecordsets file that I created
in the first video of this chapter.
| | 00:40 | I will save the file under a new name,
selecting File > Save As, and I'll name
| | 00:45 | the new file sprytabbedpanels. Now
I'll click into the content area above the
| | 00:52 | dynamic tables, and I'll go to menu
and select Insert > Spry > Spry Tabbed
| | 00:59 | Panels. Just as with the accordion,
Dreamweaver generates the code that's
| | 01:03 | needed and creates two layers to begin.
When the Tabbed Panels interface is
| | 01:08 | selected, the Properties panel allows
you to add and remove panels and also
| | 01:12 | allows you to reorder them
just as with the accordion.
| | 01:15 | I am going to take the existing
dynamic tables and move them into the Tabbed
| | 01:19 | Panels area. I'll click into the
dynamic table that displays the title
| | 01:23 | information. I'll go to the tag
selector and click the table tag and cut the
| | 01:28 | table to the clipboard pressing Ctrl+
X or on Mac Command+X. Then I'll click
| | 01:34 | into the content area for the first
tab, I'll select the existing content,
| | 01:38 | Content 1, and I'll paste pressing Ctrl
+V or Command+V on the Mac. I'll also
| | 01:44 | change the tab clicking right into the
tab and selecting its existing text and
| | 01:49 | I'll change it to a descriptive value
that tells the user what they will see
| | 01:52 | when they click on that tab, Book Titles.
| | 01:55 | Now I follow the same set of steps for
the second tab. I'll click on the header
| | 02:00 | for the Tabbed Panels, go down to the
Properties panel, and select Tab 2. Now
| | 02:06 | I'll click into the table that's
displaying the authors data. I'll select the
| | 02:10 | table tag in the tag selector and cut
the table to the clipboard. Then I'll
| | 02:15 | select the Content in Tab 2 and paste
the table into place. Then once again,
| | 02:23 | I'll customize the tab
text with the term Authors.
| | 02:26 | I will save the changes and just as
with previous Spry behaviors, Dreamweaver
| | 02:31 | adds files to support the Tabbed
Panels interface: SpryTabbedPanels.css and
| | 02:37 | SpryTabbedPanels.js. I'll click OK to
clear the message and then I'll preview
| | 02:43 | the page in the browser and you
will see that the Tabbed Panels work as
| | 02:49 | expected. The Book Titles are
displayed automatically when the screen first
| | 02:53 | appears and I'll click the
Authors tab and switch to that.
| | 02:57 | You can add as many tabs as you
like as long as they all fit in single
| | 03:00 | horizontal plane. That is, side by side.
If you add too many tabs, they will
| | 03:04 | start wrapping one on top of another
creating an appearance that can work but
| | 03:09 | isn't particularly attractive. If you
want to modify the appearance of your
| | 03:12 | tabs such as the font that's used in
the tabs themselves, background colors,
| | 03:17 | and so on, you can do that with
the cascading style sheets file that
| | 03:21 | Dreamweaver adds to your website. For
example, I'll click into a tab, I'll go
| | 03:26 | to the CSS Styles panel, and I'll click
Current, and it shows me that the font
| | 03:31 | that's being used is 0.7 em. So if I
want to make the tabs a little bit larger
| | 03:36 | than that, I can click into the font
and I can say, I'll change that from 0.7
| | 03:42 | to 0.9 and that will update the tabs.
| | 03:48 | So now I'll select File > Save All to
save all those changes, then preview the
| | 03:53 | page in the browser again, and you
will see that the tabs now have the larger
| | 03:58 | font. That doesn't affect the
presentation of the content within the content
| | 04:03 | areas. Those tables for example,
follow whatever styles you have assigned to
| | 04:07 | them but the CSS file for the Tabbed
Panels interface will effect all tab
| | 04:12 | panels throughout your website. Any
changes you make to the one CSS file will
| | 04:16 | be used by all the tabbed panels
on any page on which they appear.
| | Collapse this transcript |
| Using Spry collapsible panels| 00:00 | In addition to the accordion and the
tabbed panels interfaces, which show one
| | 00:04 | layer of content at a time, the Spry
framework also supports an interface
| | 00:08 | called collapsible panels. A
collapsible panel is a rectangular area that can
| | 00:13 | be viewed either in a collapsed or
an expanded view and unlike with the
| | 00:17 | accordion and the tabbed panel sets,
you can see more than one collapsible
| | 00:21 | panel at a time. You add
collapsible panels to your page one at a time.
| | 00:25 | In this video, I'll show you how to add
two collapsible panels each wrapping a
| | 00:29 | set of data and show you then how to
manipulate and control the appearance of
| | 00:33 | the collapsible panels upon page
load. I'll once again start from the
| | 00:37 | multirecordsets page, which contains
two dynamic tables, and I'll save a new
| | 00:43 | copy of the file, selecting File >
Save As and I'll name the new file
| | 00:47 | sprycollapsiblepanels.
| | 00:52 | Now I'll place the first collapsible
panel above the first dynamic table. I'll
| | 00:56 | click under the headline and above the
table and as with all Spry content you
| | 01:00 | can insert it from the menu or from the
Insert panel. This time I'll go to the
| | 01:06 | Insert panel and select the Spry
category and then click Spry Collapsible
| | 01:11 | Panel. Each collapsible panel
has a tab area and a content area.
| | 01:15 | By default, each collapsible panel is
open in Design View and is also open when
| | 01:20 | the page first loads. I'll change the
tab text first selecting the word Tab and
| | 01:27 | then typing in Book Titles. Then I'll
go down to the table that contains the
| | 01:31 | title data. I'll click into the table.
I'll go down to the tag selector and
| | 01:36 | click the table tag and cut the table
to the clipboard. Then I'll double click
| | 01:41 | the word Content in the collapsible
panel and paste the table pressing Ctrl+V
| | 01:45 | or Command+V on the Mac.
| | 01:47 | Now to control the behavior of the
panel when the page loads in the browser,
| | 01:51 | I'll click the header of the panel
and then I'll go down to the Properties
| | 01:55 | panel and change the Default state
setting to Closed. Now that doesn't actually
| | 01:59 | change how you see it in Design View.
You will see in Design View that you are
| | 02:02 | still seeing both the Tab and the Content.
| | 02:05 | If you want to close it up in Design
View, set the Display to Closed and that
| | 02:10 | will collapse the whole thing. Now
I'll save the changes and notice that as
| | 02:14 | before, Dreamweaver adds cascading
style sheet and Java script files to the
| | 02:18 | website to support this user interface
and I'll click OK to close the message.
| | 02:23 | Then I'll preview the page in the browser.
| | 02:28 | Notice that the collapsible panel
shows up as just a header with a slightly
| | 02:32 | different color than the background
page. I'll click the header and that
| | 02:36 | expands the collapsible panel downward
and you can see all of the data. Then
| | 02:41 | I'll click the header or the tab again
and that re-collapses the panel upward.
| | 02:46 | Now I'll go back to Dreamweaver and
add one more collapsible panel, this one
| | 02:49 | for the authors data. I'll click below
the existing panel and above the table.
| | 02:54 | Once again, I'll add a Spry Collapsible
Panel. I'll modify the tab first; I'll
| | 02:59 | click into the word Tab and change it
to Authors. I'll select the Authors table
| | 03:07 | and cut it to the clipboard. I'll
double click the word Content in the content
| | 03:11 | area of the Collapsible Tab
and paste the table into place.
| | 03:15 | Then I'll click the header for the
panel, change the Default state to Closed
| | 03:21 | and the Display to Closed, and that
gives me an approximation of how the page
| | 03:26 | will look as it loads in the browser
for the first time. I'll save the changes
| | 03:32 | and preview the page in the browser,
and now I have two collapsible panels and
| | 03:39 | I can click on the tab for either one of them
to expand the panel and see all of its data.
| | 03:45 | So in this chapter so far, we have
seen three ways of showing and hiding data
| | 03:50 | using AJAX style programming techniques,
the Accordion, the Tabbed Panels and
| | 03:55 | the Collapsible Panel interfaces.
The Accordion and the Tabbed Panels
| | 03:59 | interfaces show only one layer of
content at a time. While you can structure
| | 04:03 | collapsible panels because they are
individual objects so that they open and
| | 04:08 | close individually and
aren't depended on each other.
| | 04:11 | In the last video of this chapter, I'll
show you how to use one more AJAX style
| | 04:15 | presentation, a Spry Menu Bar that
let you easily create an interface for
| | 04:19 | navigating around from one page to another.
| | Collapse this transcript |
| Using a Spry menu bar| 00:00 | In this video, I'm going to describe
how to use the Spry Menu Bar behavior.
| | 00:04 | A Spry Menu Bar is a dynamic HTML
based menu that uses hidden Div tags and
| | 00:10 | JavaScript based timing to provide a
dynamic user interface for navigating in
| | 00:15 | your website. Unlike the other Spry
behaviors that I have shown in this
| | 00:18 | chapter, the Spry menu bar is not based on
XML or on data that's returned from the server.
| | 00:24 | Instead, it's just JavaScript and Div
tags presenting a nice user interface.
| | 00:29 | I'll demonstrate this starting with
the Template file. If you are working in
| | 00:34 | PHP you can open template.php or in
ColdFusion template.cfm and then I'll save
| | 00:40 | the file under a new name, selecting File >
Save As and naming the new file sprymenubar.
| | 00:47 | Now I'm going to place the menu bar
in my content area above the existing
| | 00:51 | headline. I'll place the cursor at
the beginning of the headline and press
| | 00:54 | Enter to create a new paragraph and
then move the cursor into the blank area.
| | 00:58 | Now as with all Spry behaviors you can
add the behavior either from the menu or
| | 01:03 | from the Insert panel.
| | 01:04 | I will go to the Insert panel to the
Spry category and I'll click Spry Menu
| | 01:10 | Bar. You can layout the Spry Menu Bar
either horizontally from left to right or
| | 01:15 | vertically from top to bottom. I'll
use the default Horizontal and click OK.
| | 01:20 | The default menu bar has four top-level
items. The menu bar structure is shown
| | 01:25 | in the Properties panel at
the bottom of the screen.
| | 01:27 | Notice that there are four items
labeled initially Item 1, Item 2, Item 3 and
| | 01:31 | Item 4 and then a couple of those items
have sub-items and those can also have
| | 01:38 | sub-menus as well. The first step in
using the menu bar after creating it in
| | 01:43 | your page is to customize the labels
and the hyperlinks for each menu item.
| | 01:48 | For example, I'm going to use this
first menu to provide links to different
| | 01:52 | pages in the website that shows Spry
behaviors. So I'll click on the Item 1 in
| | 01:56 | the Properties panel then go to the
Text entry and type in Spry Behaviors. For
| | 02:03 | any menu item that you want to be
clickable but that you don't want to actually
| | 02:07 | navigate somewhere, you put in the #
sign into the Link text box and you will
| | 02:12 | see that's the default
for all of the menu items.
| | 02:15 | Now I'll go to each of the three items
within the menu. Here is Item 1.1 and
| | 02:20 | I'll customize the text to Accordion.
Then I'll click the Browse button and
| | 02:27 | I'll select the file that I want the
user to navigate to when they select this
| | 02:30 | menu choice, spryaccordion. Now
repeat the steps for the other two items.
| | 02:36 | I will click on Item 1.2 and customize
that text to Tabs and I'll customize the
| | 02:42 | Link for that to sprytabbedpanels.
Then I'll go to Item 1.3, the third item
| | 02:47 | within the menu and I'll customize
that to expanding panels. And I'll Browse
| | 02:53 | and I'll select the file
sprycollapsiblepanels. I'll go to other items that I don't need.
| | 02:58 | For example, I'll go to Item 4 in the
top list and click the minus button to
| | 03:03 | remove it and also Item 3 and notice
that this menu item has child menu items
| | 03:08 | and so Dreamweaver prompts me to be
sure that I want to delete the whole thing.
| | 03:13 | I'll confirm by clicking OK and then
I'll remove Item 2 as well, leaving just a
| | 03:17 | single menu item with a sub-menu.
| | 03:21 | Now when I save my changes to my page,
Dreamweaver once again adds files to the
| | 03:25 | website to support this behavior and
user interface. The menu requires quite a
| | 03:30 | few files. In addition to the
JavaScript and the cascading style sheets file
| | 03:34 | there are also some graphic files
involved, all in GIF format. This dialog box
| | 03:40 | which you see only once for each Spry
behavior you add, indicates that all of
| | 03:44 | the files were added to the website
and you just need to make sure that you
| | 03:47 | upload them to your Production server
when you upload the rest of the site.
| | 03:50 | I will click OK to close the dialog
and then preview the page in the browser.
| | 04:01 | Here is the behavior. As I move the
cursor over the main menu item, the
| | 04:06 | dropdown menu appears and I can now
scroll up and down and select the item I
| | 04:10 | want. I'll go to Accordion and that
takes me to the page that I selected and I
| | 04:16 | can then look at the Accordion interface.
| | 04:19 | Let's go back a step. Notice that the
cell is word wrapping. The word Spry
| | 04:23 | behaviors are appearing on two lines.
You solve this and other visual design
| | 04:28 | issues in Spry by modifying the
cascading style sheets file that goes with the
| | 04:32 | Spry component. I'll close the
Browser and then I'll go up to the list of
| | 04:37 | associated files and select
SpryMenuBarHorizontal.css. And then click to go
| | 04:44 | into Code view.
| | 04:46 | There are two width settings
involved in this Spry menu bar. One for the
| | 04:49 | top-level menu items and one for the
sub-menu items. I'm going to do a search
| | 04:55 | for the string width with a colon and
I'll click Find Next, Find Next, and Find
| | 05:02 | Next again and you will notice that
there are a number of settings for the
| | 05:05 | width. The ones I'm looking for have a
width of 8.2 ems. An em is a standard
| | 05:11 | width of wide character in the current font.
| | 05:14 | I am going to expand these values from
8.2 all the way up to 15 ems. There is
| | 05:19 | the first one. Now I'll search for
the other one and there it is and I'll
| | 05:24 | change this one as well. And here is
the third one, which I'll save as well,
| | 05:30 | and now I'll go back to Design view
and show you that the width of the menu
| | 05:33 | choices has changed.
| | 05:35 | I will save all the changes and then
preview the page in the browser one more
| | 05:38 | time and show you that now the menu
items are not word wrapping because there
| | 05:44 | is enough width in the cells to
accommodate the text. I'll select another item,
| | 05:48 | Expanding Panels, and then I'll click on
the header for one of the panels to expand it.
| | 05:53 | So that's the look at how to use the
Spry Menu Bar to create a nice usable menu
| | 05:58 | that's dynamic HTML driven and the
appearance of which can be customized using
| | 06:02 | cascading style sheets.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Hi! David here again. Thanks for
sitting with me through this video series
| | 00:04 | Dreamweaver CS4 Dynamic Development.
In this series, you learned how to use
| | 00:08 | Dreamweaver CS4 to build dynamic web
pages that integrate with two of the most
| | 00:12 | popular application servers,
ColdFusion and PHP. You also learned how to use
| | 00:18 | XML-based data with the Spry framework
and how to use other Spry features with
| | 00:22 | Dreamweaver's code generation
capabilities. Used in combination with the
| | 00:26 | application servers, Spry allows your
websites to move into the world of Web
| | 00:30 | 2.0 becoming more
interactive and visually compelling.
| | 00:34 | Watch for other lynda.com titles on
Dreamweaver CS4 and other software packages
| | 00:39 | in the Adobe Creative Suite 4 family
and for other video series on building
| | 00:44 | desktop applications with Dreamweaver CS4,
Spry, and the Adobe Integrated Runtime or AIR.
| | 00:51 | Thanks again for watching and listening.
| | Collapse this transcript |
|
|
