IntroductionWelcome| 00:00 | (Music playing)
| | 00:03 | Hi! My name is David Gassner. Welcome
to ColdFusion 9 Essential Training.
| | 00:08 | ColdFusion 9 is a great new
release from Adobe Systems.
| | 00:11 | It includes many new features that
make it easier than ever before to rapidly
| | 00:15 | build and deploy dynamic web applications.
| | 00:18 | In this course, I'll show you how to
use Adobe's new integrated development
| | 00:22 | environment for ColdFusion
developer's, ColdFusion Builder.
| | 00:25 | It's an eclipse plug-in that includes
code generation, debugging, and server
| | 00:30 | integration features.
| | 00:32 | The actual release of
ColdFusion Builder will be down the road,
| | 00:34 | so this video series uses ColdFusion
Builder Public Beta 2, which you'll be
| | 00:39 | able to download from Adobe Labs.
| | 00:41 | You'll get a taste of what's to come.
| | 00:42 | I'll show you how to create a new
ColdFusion project in ColdFusion Builder, how
| | 00:47 | to create new ColdFusion pages and
components or CFCs, and how to generate data
| | 00:53 | access components from
ColdFusion Builder's RDS Dataview.
| | 00:57 | I'll show you how to use ColdFusion
ORM, or Object Relational Mapping, a great
| | 01:02 | new feature that lets you retrieve,
insert, update, and delete data without
| | 01:06 | having to write SQL code.
| | 01:09 | This video series is designed for
developers who are new to ColdFusion, but it
| | 01:13 | has some great information about
Version 9's new features as well that will be
| | 01:16 | interesting to the
experienced ColdFusion developer.
| | 01:20 | Now let's get started with
ColdFusion 9 Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Just a quick word about the
exercise files I'll be using.
| | 00:04 | If you're a premium member of the
lynda.com Online Training Library, or if
| | 00:08 | you're watching this tutorial on a disc,
you have access to the exercise files
| | 00:12 | used throughout this title.
| | 00:15 | In the Exercise Files folder, I've
collected some assets for you to use during
| | 00:19 | our tour of building dynamic
websites with ColdFusion 9.
| | 00:22 | They include graphic files, a set of
files to create the sample database,
| | 00:27 | and starting webpage files for use in
the sample websites and applications
| | 00:31 | that we'll be creating.
| | 00:33 | I've copied the Exercise Files folder to
my desktop, but you can put it wherever
| | 00:37 | you want on your hard disk.
| | 00:39 | To get started with the video series,
you'll need to follow the instructions in
| | 00:43 | Chapter 1 where I describe how to
install ColdFusion and ColdFusion Builder on
| | 00:48 | Windows and Mac OS X. You'll also need
to complete a few other critical steps
| | 00:53 | in ColdFusion Builder.
| | 00:55 | In Chapter 2, you'll define the
location of your ColdFusion Server, represented
| | 01:00 | in ColdFusion Builder's Servers view.
| | 01:03 | You'll also create a project named
'Essential Training' which points to a
| | 01:06 | directory on your disk that's
under the ColdFusion Document root.
| | 01:10 | In Chapter 4, you'll create a
database that supports a complete ColdFusion
| | 01:14 | project called the PhotoGallery
website, and you'll create a project in
| | 01:18 | ColdFusion Builder that points to those files.
| | 01:21 | You'll need to complete all of these steps
before jumping ahead to any other chapters.
| | 01:27 | From that point forward you can choose
to work through the entire video series
| | 01:31 | from start to finish, or if you'd like
to jump in at a particular chapter, you
| | 01:35 | can use the starter files for that chapter.
| | 01:37 | For example, to start with
Chapter 6, follow these steps.
| | 01:41 | In ColdFusion Builder, open the
PhotoGallery project, which you'll create in Chapter 4.
| | 01:46 | Select and delete all of the
files and directories in that project.
| | 01:50 | Then go to your Exercise Files folder,
using Windows Explorer, or Finder on Mac
| | 01:55 | OS X, open the folder and go to the
particular folder for your chapter.
| | 02:01 | Within that folder, you'll find
a folder called 'applicationBegin'.
| | 02:06 | Open that folder, select all of the files and
directories, and copy them to the clipboard.
| | 02:12 | Then go back to ColdFusion Builder,
right-click on the PhotoGallery project, or
| | 02:16 | Ctrl+Click on Mac, and paste.
| | 02:20 | The files and directories for
that project are now in place.
| | 02:24 | You should be able to open the files
and run the application in its current
| | 02:29 | state, and then you'll be able to go
through all of the steps to complete that
| | 02:33 | chapter's exercises.
| | 02:35 | If you are a monthly or an annual
subscriber to lynda.com, you don't have access
| | 02:40 | to the exercise files.
| | 02:42 | But you can follow along the
instructions and demonstrations on screen, and use
| | 02:46 | any files you want as you
create your own dynamic website.
| | Collapse this transcript |
| Overview| 00:00 | This video series is designed for
website and software developers who are new to
| | 00:04 | Adobe ColdFusion and want to learn
from scratch how to build dynamic web
| | 00:08 | applications with the ColdFusion Server
and Adobe's new integrated development
| | 00:13 | environment, ColdFusion Builder.
| | 00:16 | Developers who already have experience
with ColdFusion will also find useful
| | 00:20 | information in this video series,
including how to set up ColdFusion Builder and
| | 00:24 | ColdFusion projects and how to use
ColdFusion Builder to deploy their ColdFusion
| | 00:28 | applications to their production websites.
| | 00:31 | If you're new to ColdFusion, it's
important to know that there are certain
| | 00:35 | skills that ColdFusion developers
should have, including how to use HTML and
| | 00:40 | XHTML to design websites, how to use
Cascading Style Sheets and a little bit
| | 00:46 | about the JavaScript programming language.
| | 00:49 | None of these skills are critical
for you to be able to use this video
| | 00:51 | series, but the more you know about
these technologies, the better your
| | 00:55 | ColdFusion websites can be.
| | 00:57 | Here's some additional video training
from lynda.com that you might find useful,
| | 01:01 | particularly for developers who already
have experience with ColdFusion, check
| | 01:06 | out ColdFusion 9 New Features by Daniel Short.
| | 01:09 | For developers who are new to
building websites, check out XHTML and HTML
| | 01:14 | Essential Training by Bill Weinman.
| | 01:16 | For information on Cascading Style
Sheets, look at Dreamweaver CS4 or CS3, with
| | 01:21 | CSS Essential Training by James Williamson.
| | 01:24 | And finally, for more about the
JavaScript programming language, look at
| | 01:28 | JavaScript Essential Training by Dori Smith.
| | 01:31 | These, and many other video
training courses at lynda.com, can help you
| | 01:35 | gather all the different skills you
need to build great dynamic websites with
| | 01:39 | ColdFusion.
| | Collapse this transcript |
|
|
1. Getting StartedUnderstanding application servers| 00:00 | If this is your first experience
building dynamic web applications with
| | 00:04 | ColdFusion or any other application
server, it's useful to understand the basic
| | 00:08 | nature of the web and how it works.
| | 00:11 | What we call the World Wide Web is
really a whole bunch of computers that are
| | 00:15 | connected to each other over the
Internet that communicate with each other over
| | 00:19 | a protocol called HTTP.
| | 00:21 | HTTP stands for Hyper Text Transfer
Protocol, and it's a simple text-based
| | 00:26 | language that lets computers or
browsers make requests and allow servers to
| | 00:30 | send back responses.
| | 00:33 | In the HTTP architecture, a
request is formulated by a client.
| | 00:37 | A client can be a web browser, a
cell phone, or any other device that can
| | 00:42 | participate in web communications.
| | 00:44 | The request is sent in HTTP format for
a web resource, such as a webpage built
| | 00:49 | with HTML, or Hypertext Markup
Language, or image or other binary files, or
| | 00:54 | JavaScript, or Cascading Style Sheet files.
| | 00:58 | The server interprets that request,
locates a resource or generates some
| | 01:02 | content, and returns a response to the client.
| | 01:05 | Each of the clients has a browser of some sort.
| | 01:09 | The browsers we're almost familiar with
are those on personal computers such as
| | 01:12 | Internet Explorer, Firefox, Safari,
or Google Chrome, a newer entry.
| | 01:17 | But cell phones such as the iPhone, or
BlackBerrys, or other modern cell phones
| | 01:22 | typically have browsers as well.
| | 01:24 | There are many other devices
that can participate in the web.
| | 01:28 | The server runs some
software called an HTTP Server.
| | 01:32 | The most commonly used HTTP
servers are those listed here:
| | 01:35 | Internet Information Services or IIS,
which is a Microsoft product that's
| | 01:39 | included with Windows-based operating
systems, or Apache, which is available on
| | 01:44 | pretty much all operating systems,
and is built and delivered as a free
| | 01:48 | open-source product by the Apache
Foundation, a nonprofit organization.
| | 01:52 | Simple HTTP client-server
communications work like this.
| | 01:56 | The web client sends a request for a
page, an image, or some other content.
| | 02:01 | The server receives and interprets that
request and sends the response back to the client.
| | 02:07 | It's up to the client to read that
response, whether it's HTML or some other
| | 02:11 | content, and render it, or
interpret it, in some fashion.
| | 02:14 | When you add an application server
into the mix, the application server is
| | 02:18 | connected to the web server or HTTP server.
| | 02:22 | The HTTP request still goes from the web
client to the HTTP server, but then the
| | 02:27 | HTTP server is configured to dispatch
that request to a particular application
| | 02:32 | server, typically by recognizing a
file extension on the request, .cfm for
| | 02:37 | ColdFusion, .aspx for ASP.
NET, .php for PHP, or others.
| | 02:43 | The application server then has access to
server-side resources such as a database.
| | 02:48 | It does its work, talks to the database
if necessary, and generates a response
| | 02:52 | which it returns to the HTTP server.
| | 02:55 | Then the HTTP server, once again,
sends back the response to the client.
| | 02:59 | The web client doesn't know anything
about the application server. All it knows
| | 03:03 | is that it requested HTML and it got back HTML.
| | 03:07 | The application server is completely
confined to the server environment.
| | 03:11 | There are many available
application servers on the market.
| | 03:14 | In this video series, I'll be
teaching you how to use Adobe's ColdFusion 9.
| | 03:19 | Other developers and organizations
might use Microsoft's Classic Application
| | 03:22 | Server, Active Server Pages, or
its more modern version, ASP.NET.
| | 03:28 | There is also PHP, a free open-source
server, and Java-based servers, sometimes
| | 03:33 | known as J2EE, or Java
Enterprise Edition servers.
| | 03:37 | These services include IBM
WebSphere, WebLogic, and JBoss.
| | 03:42 | Adobe ColdFusion is a special product
because it lets you build these web
| | 03:46 | applications very quickly.
| | 03:48 | It incorporates an enormous amount of
pre-built functionality, covering a lot of
| | 03:52 | the tasks that dynamic application
developers have to do all of the time.
| | 03:56 | ColdFusion is a Java-based web
application, but you don't have to actually write
| | 04:01 | Java code to build your applications.
| | 04:03 | Instead, you'll be using a
special language on the server called
| | 04:06 | ColdFusion Markup Language.
| | 04:08 | Your ColdFusion pages will be
built in multiple languages:
| | 04:11 | HTML, Cascading Style Sheets, or CSS,
and JavaScript for the Browser, and
| | 04:16 | ColdFusion Markup
Language, or CFML, on the server.
| | 04:20 | Each ColdFusion page is created with
an extension of .cfm, and when it's
| | 04:24 | requested from the browser, it's
compiled in server memory as a Java class.
| | 04:29 | The class is then executed on request
and the ColdFusion code that's in the page
| | 04:33 | is executed on the server, including
any requests for database access, reading
| | 04:38 | and writing of XML files, or
any other server-side resources.
| | 04:41 | HTML is then generated and
returned to the browser for rendering.
| | 04:45 | Your ColdFusion pages will be a
combination of all of these languages.
| | 04:49 | The more you know about HTML, Cascading
Style Sheets, and JavaScript, the more
| | 04:53 | effective a ColdFusion developer you'll be.
| | 04:56 | There are two syntax styles
that are used in ColdFusion:
| | 04:59 | the traditional ColdFusion Markup
Language, a tag-based language that looks
| | 05:03 | a lot like HTML, and CFScript, a
scripting syntax that's more similar to
| | 05:08 | JavaScript or Java.
| | 05:09 | Here are two examples of ColdFusion Markup
Language or CFScript doing the same function.
| | 05:15 | If you want to output a variable
to a webpage, you can either
| | 05:18 | use traditional CFML.
| | 05:20 | You'd wrap a variable inside pound
signs to indicate that it's a variable, and
| | 05:25 | then wrap that inside a pair of
CFOutput tags, and that tells the server to
| | 05:29 | output the value of the variable to the page.
| | 05:31 | In ColdFusion 9, many of the commands
that we traditionally execute in tag-based
| | 05:36 | language can now also be
processed with scripting syntax.
| | 05:39 | At the bottom of the screen, I've shown
the scripting equivalent of the CFOutput
| | 05:43 | tags, a function called writeOutput.
| | 05:46 | Your CFScript code is wrapped inside
a pair of CFScript tags, and then you
| | 05:51 | follow scripting syntax as much as you can.
| | 05:54 | Many developers feel that the scripting
syntax is easier to both write and read
| | 05:59 | than the traditional tag-based syntax.
| | 06:01 | Not all ColdFusion tags have been
rewritten as scripting commands, but in
| | 06:05 | ColdFusion 9, many more are
available in scripting than ever before.
| | 06:09 | ColdFusion 9 includes many new
features that you'll find valuable.
| | 06:13 | One of the most valuable, and one that I
cover extensively in this video series,
| | 06:17 | is Object Relational Mapping or ORM,
an extraordinarily simple way of
| | 06:22 | communicating with the database.
| | 06:24 | There are also many new tools for
integration with Microsoft Office and
| | 06:27 | SharePoint, including the ability to
read and write Microsoft Word, Excel,
| | 06:32 | and PowerPoint files.
| | 06:33 | There are new integration tools for
Adobe Flex & AIR developers, enhancements to
| | 06:38 | the language, performance
enhancements and many other new features to make
| | 06:42 | ColdFusion 9 easier and
more powerful than before.
| | 06:45 | If you're new to ColdFusion, you'll
find that this video series will get you up
| | 06:49 | and started very quickly
building ColdFusion applications.
| | 06:52 | If you're an experienced ColdFusion
developer, you'll find some information on
| | 06:55 | the new features here and a lot
more in another lynda.com video series,
| | 07:00 | ColdFusion 9 New Features.
| | Collapse this transcript |
| Installing ColdFusion 9 on Windows| 00:00 | You can download the most recent
version of ColdFusion 9 from the Adobe website
| | 00:04 | at www.adobe.com/go/coldfusion.
| | 00:10 | From there, follow the prompts to
download the evaluation version of ColdFusion.
| | 00:15 | When you've downloaded the
software, start up the executable.
| | 00:18 | The ColdFusion installer is
fairly simple and easy to use.
| | 00:21 | You'll first see the security warning.
| | 00:24 | Click the Run button to continue.
| | 00:26 | It might take a few moments for the
installer to unpack all of the files
| | 00:29 | onto your hard disk.
| | 00:30 | While that's happening, you can go get
a cup of coffee, and then come back and
| | 00:33 | it'll be ready to go.
| | 00:37 | When the process of unpacking the
files onto your disk is done, you'll see
| | 00:41 | this welcome message:
| | 00:42 | 'Welcome to the Installation
Wizard for Adobe ColdFusion 9'.
| | 00:46 | Click the Next button.
| | 00:47 | Then review the license agreement
and if you agree with it, click the
| | 00:50 | appropriate radio button, and then click Next.
| | 00:53 | On this screen, you're
asked for a serial number.
| | 00:55 | If you have a ColdFusion serial number,
you can enter it now, but more likely,
| | 00:59 | you'll want to choose either the 30-day
trial or the Developer Edition.
| | 01:03 | If you choose the 30-day trial,
you'll have complete enterprise ColdFusion
| | 01:07 | capabilities for 30 days.
| | 01:08 | And after that it will turn into the
Developer Edition, which has all of the
| | 01:12 | features of the enterprise product, but
only allows up to three connections at
| | 01:16 | a time to your ColdFusion server, one from
your own computer, and two from other computers.
| | 01:21 | If you choose the Developer Edition
from the beginning, as I'm doing, then
| | 01:25 | you'll be working with this
limited version from the start.
| | 01:27 | But either way, it's free and you
don't have to register the software.
| | 01:32 | Click the Next button.
| | 01:34 | On this screen, you're
asked to choose a configuration.
| | 01:37 | There are three configurations available:
the server configuration, which is the
| | 01:40 | one I'll use, includes the ColdFusion
Server plus an embedded underlying Java
| | 01:45 | Enterprise Edition Server,
specifically it's Adobe's JRun server.
| | 01:49 | You can also install the
Enterprise Multiserver configuration.
| | 01:52 | In that case, you get a full copy of
JRrun 4, and ColdFusion 9 is installed on a
| | 01:57 | single default instance of the JRun 4 Server.
| | 02:01 | If you have a good understanding of Java
Enterprise Edition Application servers,
| | 02:05 | you might choose that architecture.
| | 02:07 | Finally, the J2EE configuration lets
you package ColdFusion as either an EAR
| | 02:11 | file or a WAR file, that is either an
Enterprise Application Archive or a Web
| | 02:16 | Application Archive.
| | 02:18 | Once again, if you're familiar with those
architectures, you can choose that option.
| | 02:22 | If on the other hand, you're new to
Java servers, you should choose the
| | 02:25 | Server configuration.
| | 02:26 | I'll choose that
configuration and then click Next.
| | 02:29 | On this screen, you're asked which
subcomponents you want to install.
| | 02:33 | You only need ODBC Services, if you're
going to use an ODBC compatible database,
| | 02:38 | such as Microsoft Access.
| | 02:40 | Throughout this video series, I'll be using
a Java-based database called Apache Derby.
| | 02:45 | So I won't need the ODBC Services, but
I'll install them anyway just in case I
| | 02:49 | need to use an ODBC
compatible database in the future.
| | 02:53 | There are two search
services included with ColdFusion 9.
| | 02:56 | The one labeled ColdFusion 9
Search Services is called Verity.
| | 03:00 | Verity has been a part of the
ColdFusion product for a long time.
| | 03:03 | It allows you to do full text indexing
and you can apply that indexing to either
| | 03:07 | documents or the contents of database queries.
| | 03:10 | The Solr Services are new to ColdFusion
9 and they offer similar functionality
| | 03:15 | to Verity, but Solr is available on all
platforms whereas Verity was limited to
| | 03:19 | certain operating systems.
| | 03:21 | Because you're installing on
Windows, you can install the .NET
| | 03:24 | Integration Service.
| | 03:25 | This is a feature that's been a
part of ColdFusion since Version 8.
| | 03:29 | And finally, ColdFusion 9 Documentation.
| | 03:31 | You'll definitely want to choose this
option for this video series because
| | 03:35 | by installing the documentation, you get
sample databases and a bunch of sample code.
| | 03:40 | If you're installing ColdFusion on a
production server though, I recommend that
| | 03:44 | you don't install the documentation
because it includes a lot of files that just
| | 03:48 | aren't needed in a production environment.
| | 03:50 | I'll select all of the options and click Next.
| | 03:53 | Now I select the directory where
I want to install ColdFusion 9.
| | 03:55 | I'll use the default, C, colon, backslash
ColdFusion9 and click Next.
| | 04:00 | On this screen, you indicate which web
server you want to bind ColdFusion to.
| | 04:05 | My system has Internet
Information Services, or IIS, installed.
| | 04:09 | That's Microsoft's web server that
comes with certain versions of Windows.
| | 04:13 | I'm not going to use it for this
video series though, because not everybody
| | 04:16 | will have it available.
| | 04:18 | Instead, I'll use the built-in web server.
| | 04:21 | This is a web server that's bundled
with ColdFusion, designed for development
| | 04:24 | use only, which listens,
by default, on port 8500.
| | 04:28 | I'll talk a lot more about that in later videos.
| | 04:31 | I'll click Next and go to the next screen.
| | 04:34 | Now I'm asked for a password.
| | 04:37 | Choose a password that you'll remember
and enter it twice. And then click Next.
| | 04:43 | On this screen, you're asked
whether you want to enable RDS.
| | 04:46 | RDS is the Remote Development Service.
| | 04:49 | It's a protocol that lets
ColdFusion and your development environment,
| | 04:52 | ColdFusion Builder, communicate with each other.
| | 04:55 | Many of the tutorials in this
video series will depend on using RDS.
| | 04:59 | So I'll enable it, and once
again, type in a password twice.
| | 05:02 | Then I'll click Next.
| | 05:05 | On this summary screen, I can check
out all of the options and then click
| | 05:09 | the Install button.
| | 05:10 | The install process will
take quite a few minutes.
| | 05:12 | But when the process is done, you'll see
a screen that asks you whether you want
| | 05:16 | to finalize your installation and then
go into the ColdFusion Administrator.
| | 05:20 | I'll end this video here, clicking
the Install button, and in a later video
| | 05:24 | you'll see what happens in the
last part of the installation.
| | Collapse this transcript |
| Installing ColdFusion 9 on Mac OS X| 00:00 | To get started with ColdFusion 9 on
Mac OS X, go to the Adobe website at
| | 00:04 | www.adobe.com/go/coldfusion and
follow the links to download the
| | 00:11 | evaluation software.
| | 00:13 | After you've downloaded the evaluation
software for Mac OS X, extract and run
| | 00:17 | the installer application.
| | 00:19 | The installer application takes just a
few moments to get started on Mac OS X.
| | 00:23 | Read the introduction screen and click Next.
| | 00:26 | Then read through the license agreement,
and if you agree with it, click the
| | 00:29 | appropriate radio button
and then click Next again.
| | 00:32 | On this screen, you're
asked for a serial number.
| | 00:35 | If you don't have a ColdFusion serial
number, you can choose either the 30-day
| | 00:38 | trial or the Developer Edition.
| | 00:40 | If you choose the 30-day trial,
which is a full copy of the Enterprise
| | 00:44 | Server, after 30 days, if you don't
set up your serial number, it will revert
| | 00:48 | to the Developer Edition.
| | 00:49 | The Developer Edition allows you to
make requests from the local machine and
| | 00:53 | from two other computers that are connected
over the Internet or your Local Area Network.
| | 00:58 | I'll select the Developer Edition
from the beginning, and click Next.
| | 01:02 | On this screen, you're asked
which configuration you want to use.
| | 01:05 | There are three available.
| | 01:07 | The Server configuration, which is
the simplest and the default, is a
| | 01:10 | self-contained server installation
that includes an embedded J2EE, or Java
| | 01:15 | Enterprise Edition server.
| | 01:17 | Specifically, it's a limited
version of Adobe's JRun Server.
| | 01:21 | If you're familiar with how to use
Java Enterprise Edition servers, you can
| | 01:24 | choose one of the other options.
| | 01:26 | The Enterprise Multiserver configuration
allows you to set up multiple instances
| | 01:31 | of JRun and ColdFusion that are kept
separate from each other on the system.
| | 01:35 | You can start and stop them
individually without affecting the others.
| | 01:39 | The J2EE configuration lets you wrap up
the ColdFusion server as either an EAR file.
| | 01:44 | That's an Enterprise Archive
or a WAR file, a Web Archive.
| | 01:48 | If those terms aren't familiar to
you, you probably don't want to use
| | 01:51 | those configurations.
| | 01:53 | In fact, I'm going to be using the default
Server configuration throughout this video series.
| | 01:58 | So if you want to see the same
mappings and URLs that I'm seeing, choose the
| | 02:02 | Server configuration and click Next.
| | 02:05 | This is the subcomponent installation screen.
| | 02:07 | It asks you which additional parts
of ColdFusion you want to install.
| | 02:11 | The first option refers to
the ColdFusion 9 Solr services.
| | 02:15 | I'll move my cursor over the item so I
can see the description, and you'll see
| | 02:18 | that Solr is a full text indexing engine.
| | 02:21 | ColdFusion has been delivered with
Verity for a long time, a full text indexing
| | 02:26 | engine, but Verity was
ideally suited for Windows.
| | 02:29 | The Solr full text indexing
engine is available on Mac.
| | 02:32 | You'll also want to select the
ColdFusion 9 documentation for this video series.
| | 02:37 | The documentation includes the
documentation, but also includes a set of sample
| | 02:41 | databases and a lot of great sample code.
| | 02:44 | When you install ColdFusion on your
production server, don't install the
| | 02:48 | documentation there.
| | 02:49 | The last option on Mac asks whether you want
to start ColdFusion as your system starts up.
| | 02:54 | I usually deselect this option on Mac
and then when I start up the machine and I
| | 02:59 | want to work with ColdFusion, I
start it up from the ColdFusion folder.
| | 03:03 | And I'll show you how to do that later.
| | 03:04 | After making your selections
on this screen, click Next.
| | 03:07 | Now you're asked where to
install the ColdFusion software.
| | 03:10 | I'll accept the default location:
/Applications/ColdFusion9, and click Next.
| | 03:17 | On this screen I'm asked whether
earlier versions of ColdFusion were
| | 03:20 | installed on this computer.
| | 03:21 | If you have earlier versions, such as
ColdFusion MX 7 or ColdFusion 8, and you
| | 03:26 | want to migrate data sources,
mappings and other configurations, click Yes.
| | 03:31 | Otherwise, leave the default
setting of No, and click Next again.
| | 03:35 | On this screen, you're asked whether you
want to configure a web server connector.
| | 03:38 | A web server connector allows you to
call ColdFusion functionality from any
| | 03:42 | industry-standard web server.
| | 03:44 | For example, if you wanted to
install ColdFusion to work with the Apache
| | 03:48 | Server that's included with Mac OS X,
you would leave this radio button
| | 03:52 | selected and click Add.
| | 03:53 | For this video series, I'm going
to be using the built-in web server.
| | 03:57 | The built-in web server is a small web
server, designed for development use only,
| | 04:01 | that listens on port 8500.
| | 04:04 | If you're following along with the
video series and you want to see exactly
| | 04:07 | the same web addresses I'm seeing,
choose the built-in web server like I did,
| | 04:11 | and click Next again.
| | 04:13 | On this screen, you're asked
whether you want to configure OpenOffice.
| | 04:16 | OpenOffice is an open-source, free,
set of productivity applications that can
| | 04:22 | open and work with files that are
compatible with Microsoft Office.
| | 04:25 | ColdFusion 9 has the ability to work
with Word documents and PowerPoint files,
| | 04:30 | using commands that are new to
the ColdFusion Markup Language.
| | 04:34 | On Mac, you need to install OpenOffice.
| | 04:36 | If you already have OpenOffice
installed on your system, you can click
| | 04:39 | the option here to configure it and then
indicate the directory where it's installed.
| | 04:44 | If you don't have OpenOffice installed, and I
don't right now, leave the option deselected.
| | 04:49 | You'll be able to configure
OpenOffice later through the ColdFusion
| | 04:52 | Administrator application.
| | 04:54 | I'll leave that option
deselected and click Next.
| | 04:56 | Now I'm asked for a password.
| | 04:59 | You must provide a
ColdFusion Administrator password.
| | 05:02 | If you don't want to protect your
ColdFusion Administrator application on your
| | 05:05 | local system with a password, you'll be
able to turn it off later, but you must
| | 05:09 | enter a password at this point.
| | 05:11 | Type in a password that you
will remember later on. Twice.
| | 05:14 | And click Next.
| | 05:16 | On this screen you're asked
whether you want to enable RDS.
| | 05:19 | RDS is the Remote Development Service, a
protocol that's been part of ColdFusion
| | 05:23 | for a long time that allows you to
communicate with ColdFusion from your
| | 05:27 | developer tool, whether you're
using ColdFusion Builder, the new IDE,
| | 05:32 | Dreamweaver or even the older home site.
| | 05:35 | When you're doing local development,
you typically want to turn RDS on, but
| | 05:39 | when you create a production server it's
recommended that you disable RDS for security reasons.
| | 05:45 | I'll enable RDS and, once again,
enter a password that I'll remember.
| | 05:49 | I'll enter it twice and then click Next.
| | 05:52 | This is the summary screen telling
you all of the choices that you've made.
| | 05:56 | When you click the Install button, the
first phase of the installation will proceed.
| | 06:00 | When the first phase of the
installation is complete, you'll see a screen
| | 06:03 | prompting you to go to the configuration wizard.
| | 06:06 | I'm going to end this video at this
point and then take a look at the video
| | 06:10 | describing the use of the
configuration wizard, which is exactly the same for
| | 06:14 | both Mac and Windows.
| | 06:16 | Click the Install button and
your installation will start.
| | Collapse this transcript |
| Completing the Configuration wizard| 00:00 | When the main installation process is
complete, you'll see this screen on either
| | 00:04 | Windows or Mac prompting you to
go into the configuration wizard.
| | 00:08 | Leave the option at the bottom of
the screen checked and click Done.
| | 00:12 | After a few moments, your default web
browser will open, and it will navigate to
| | 00:16 | a page on the ColdFusion Server.
| | 00:18 | Notice the web address or
URL: http://127.0.0.1:8500.
| | 00:26 | The first part 127.0.0.1 is the
IP address for the local host.
| | 00:31 | That is the web server running on your
own local system. And :8500 is called the
| | 00:37 | web server port, the number that
the server listens on for requests.
| | 00:41 | The rest of the address, CFIDE/
administrator/index.cfm, is the default location
| | 00:48 | of the ColdFusion Administrator application.
| | 00:50 | On this screen, you'll need to enter
your ColdFusion Administrator password.
| | 00:54 | This is the password that you created
during the main installation process.
| | 00:58 | Enter the password and click Login.
| | 01:00 | You'll see another screen appear,
telling you that it's configuring the server
| | 01:03 | and to wait for a few moments.
| | 01:05 | This should only take about
a minute or two at the most.
| | 01:08 | If you don't see any response after about
three or four minutes, click the Continue link.
| | 01:12 | But if all goes well and the
configuration succeeds, you'll see this screen
| | 01:16 | asking you if you want to go to the
ColdFusion Administrator application.
| | 01:20 | When you see the message that the
setup is complete, click OK to go to the
| | 01:24 | ColdFusion Administrator.
| | 01:26 | If ColdFusion Administrator opens
successfully in the web browser, then you know
| | 01:29 | that ColdFusion is installed and working.
| | 01:32 | Take a few moments before you go on to
the rest of the video series to explore
| | 01:36 | the ColdFusion Administrator menu.
| | 01:38 | There are sections for the Server
Settings, Data & Services, Debugging &
| | 01:42 | Logging, Server Monitoring and many more.
| | 01:45 | I'll be talking about many of these
features in other videos in this series.
| | Collapse this transcript |
| Starting and stopping ColdFusion on Windows| 00:00 | When you install ColdFusion 9 on Windows,
it's installed as a set of services.
| | 00:05 | You manage these services
through the Windows Services console.
| | 00:08 | Start off by going to the Control panel.
| | 00:11 | On any supported version of Windows,
including Windows XP, Windows Vista or
| | 00:15 | Windows 7, go to the Start menu
and from there, to the Control panel.
| | 00:19 | If the Control panel starts off with
Control panel Home, go to the Classic View.
| | 00:25 | From there go to Administrative tools,
and from there, launch the Services console.
| | 00:31 | If you're working on Windows XP or
Windows 7, there's a shortcut you can use.
| | 00:35 | Go to the Start menu and simply type 'services'.
| | 00:39 | You'll locate all applications that
have the word Services in them and you can
| | 00:42 | launch the Services console from there.
| | 00:45 | Once the Services console is open,
locate items starting with the
| | 00:49 | phrase 'ColdFusion 9'.
| | 00:51 | The number of services depends on how
many subcomponents you installed during
| | 00:55 | the installation process.
| | 00:56 | I've selected all subcomponents for Windows.
| | 00:59 | The primary application server is here:
the ColdFusion 9 Application Server.
| | 01:03 | If you installed the ODBC services, you'll
find two services: the Agent and the Server.
| | 01:09 | There is the Search Server, which is
Verity, and the Solr Service, which is the
| | 01:13 | new version of the full text indexing server.
| | 01:16 | If you want to shut down
ColdFusion, just refresh an application.
| | 01:19 | The only service you need to
restart is this one, the ColdFusion 9
| | 01:23 | Application Server.
| | 01:24 | In some circumstances, you can
eliminate the need for certain services.
| | 01:28 | For example, I won't be using any
databases that need the ODBC services.
| | 01:33 | So I'm going to prevent them from
starting automatically as the system starts up
| | 01:37 | and save a little bit of memory.
| | 01:39 | I'll right-click on the service I
want to modify and choose Properties.
| | 01:43 | Then in the Properties dialog, I'll
change the Startup type from Automatic
| | 01:47 | to Manual and I'll also click the
Stop button so that I'm stopping the
| | 01:51 | service immediately.
| | 01:52 | Then I'll click OK to save my changes.
| | 01:54 | I'll do that for both the ColdFusion 9
ODBC Agent and the ColdFusion 9 ODBC Server.
| | 02:01 | Once again, I'll right-click and choose
Properties, change the Startup type to
| | 02:05 | Manual, click Stop to stop
it right now and click OK.
| | 02:11 | If at any point you need to stop and
restart the ColdFusion server itself,
| | 02:15 | just click on that service and then go up to
the toolbar and click the Restart Service button.
| | 02:21 | On Windows, stopping and starting
ColdFusion 9 can take a few minutes.
| | 02:25 | There's a lot of memory and a lot
of tasks involved, so be patient.
| | 02:29 | When the dialog box closes, that
tells you that ColdFusion has restarted.
| | 02:34 | The easiest way to test whether
ColdFusion is running is to try to open the
| | 02:37 | ColdFusion Administrator application.
| | 02:40 | I'll open a browser, in this case
Firefox, and I'll navigate to the following
| | 02:45 | URL: http://127.0.0.1:8500/CFIDE/administrator.
| | 03:00 | Notice that the CFIDE portion of
the URL is uppercase and the word
| | 03:04 | administrator is lowercase.
| | 03:06 | This will launch the
ColdFusion Administrator application.
| | 03:09 | I'll be prompted for my administrator
password, which I created during the
| | 03:13 | installation process.
| | 03:15 | I'll type in the password and
press Enter, and that takes me to the
| | 03:18 | ColdFusion homepage.
| | 03:20 | Here's a little bit more
information about that URL.
| | 03:24 | The 127.0.0.1 IP address
represents the local computer.
| | 03:29 | If you're running ColdFusion on a
remote system, use the host name for that
| | 03:33 | computer or its IP address.
| | 03:35 | The :8500 is the port number that the
development web server is listening on.
| | 03:40 | The rest of the URL, CFIDE/
administrator and the optional homepage name,
| | 03:46 | index.cfm, are always the same, by
default, on every installation of ColdFusion.
| | 03:52 | There are ways of changing the
location of the ColdFusion Administrator
| | 03:55 | application, but most ColdFusion installations
will have the administrator at this location.
| | 04:01 | So that's how you start and stop the
ColdFusion Services, when you're working
| | 04:04 | on Microsoft Windows.
| | Collapse this transcript |
| Starting and stopping ColdFusion on Mac OS X| 00:00 | ColdFusion 9 is installed on Mac OS X so
that you can start and stop it as you need.
| | 00:05 | ColdFusion takes quite a bit of
memory to run in the background.
| | 00:08 | So if you aren't using it for
development at any given point, it's usually a
| | 00:12 | good idea to shut the server down.
| | 00:14 | I'll show you here how to
start and stop the server.
| | 00:16 | Go to your Mac hard disk, and from there
to the Applications folder, and then to
| | 00:22 | the ColdFusion 9 folder.
| | 00:23 | Locate and open the
ColdFusionLauncher application by double-clicking it.
| | 00:28 | The ColdFusionLauncher application
is a very simple visual application
| | 00:32 | with three buttons:
| | 00:33 | to start, and stop the server, and to
launch the Web Server Connector utility.
| | 00:38 | The web server connector utility can be
used to connect ColdFusion to your copy
| | 00:42 | of Apache that came with Mac OS X. If
ColdFusion is already running, and you
| | 00:46 | click the Start ColdFusion 9
button, you'll see this message:
| | 00:50 | 'ColdFusion 9 is already running'.
| | 00:52 | ColdFusion was started up
when I first installed it.
| | 00:55 | If you need to restart ColdFusion
for any reason, click the Stop button.
| | 00:59 | It takes a few moments to shut down the server.
| | 01:02 | As I mentioned, ColdFusion uses quite a
bit of memory and runs multiple services.
| | 01:06 | Once you get the message that
ColdFusion 9 has stopped, click the Start button.
| | 01:10 | Once again, you'll see a series of messages.
| | 01:13 | When you see that ColdFusion has started,
you can test the server by navigating
| | 01:17 | to the ColdFusion Administrator
application. Go to any browser.
| | 01:22 | I'll open Firefox and navigate to this URL:
| | 01:25 | http://127.0.0.1:8500.
| | 01:35 | As I've described previously, this is
the host IP address and the port number,
| | 01:40 | then /CFIDE, then /administrator.
| | 01:47 | Notice that CFIDE is uppercase
and administrator is lowercase.
| | 01:53 | I'll press Enter, and I go to the
ColdFusion 9 Administrator login screen.
| | 01:57 | I'll type in the password that I created
during the installation process and click Login.
| | 02:04 | Now I'm in the ColdFusion Administrator screen.
| | 02:07 | If you can run ColdFusion
Administrator, then you know that the ColdFusion
| | 02:10 | Server is working correctly.
| | 02:12 | Now I'll bookmark this location in my browser.
| | 02:16 | In Firefox, I choose
Bookmarks > Bookmark This Page, and click Done.
| | 02:22 | Later on, if I want to go to
ColdFusion Administrator, I can simply pull down
| | 02:25 | the list of Bookmarks and jump
to the Administrator application.
| | 02:29 | If I need to login again, I'll be
presented with the login screen and then I'll
| | 02:33 | be able to manage everything
about my ColdFusion installation.
| | Collapse this transcript |
| Installing ColdFusion Builder on Windows| 00:00 | In order to use ColdFusion Builder,
the new IDE from Adobe for ColdFusion
| | 00:04 | developers, go to the Adobe website
and download the evaluation software,
| | 00:10 | then run the Installer.
| | 00:12 | You can install ColdFusion Builder in
one of two modes on Windows, either as a
| | 00:16 | standalone application that
includes everything you need, including the
| | 00:19 | underlying Eclipse Workbench, or if you
already know how to use Eclipse and you
| | 00:24 | have other plug-ins you're using
such as perhaps Flex Builder or Flash
| | 00:27 | Builder, you can install ColdFusion
Builder as a plug-in on top of an existing
| | 00:32 | Eclipse installation.
| | 00:33 | There's a single installer for either
version: the standalone or the plug-in.
| | 00:38 | When you first launch the installer, it
takes a few moments to unpack on your hard disk.
| | 00:42 | If you see a security warning, verify the
publisher, Adobe Systems, and then click Run.
| | 00:48 | On Windows, the ColdFusion Builder
installation application is built
| | 00:52 | on InstallAnywhere.
| | 00:54 | After you've cleared the security
warning, you then have to wait for a few
| | 00:57 | moments for the installation
files to be extracted onto your disk.
| | 01:00 | Once the extraction process is
complete, you'll be able to go through the
| | 01:04 | installation process step by step.
| | 01:07 | When the introduction screen appears,
read through the text and then click Next.
| | 01:11 | Read the license, and if you accept
its terms, click the appropriate radio
| | 01:15 | button and click Next again.
| | 01:17 | This is the screen that allows you to
choose between the standard ColdFusion
| | 01:20 | Builder installation, which is the
standalone version, including Eclipse, or
| | 01:25 | ColdFusion Builder as a plug-in
within an existing Eclipse installation.
| | 01:29 | Throughout this video series, I'll be
working with the standalone version of ColdFusion.
| | 01:34 | So I'll accept the default
setting of standard ColdFusion Builder
| | 01:37 | installation, and click Next.
| | 01:40 | Now I'm asked where I want
to install ColdFusion Builder.
| | 01:43 | The default location on Windows is
under the Program Files folder, under Adobe,
| | 01:47 | and the name of the folder
is Adobe ColdFusion Builder.
| | 01:50 | I'll accept the default location and click Next.
| | 01:53 | Now I'm asked whether I want to associate
CFM and CFC files with this application.
| | 01:59 | If I accept the default setting,
then when I'm in Windows Explorer, if I
| | 02:03 | double-click on a CFM file that's a
ColdFusion page or custom tag, or a CFC
| | 02:08 | file, a ColdFusion Component, it will
result in launching ColdFusion Builder
| | 02:12 | and opening the file.
| | 02:14 | If you're not sure whether you're going
to use ColdFusion Builder, for example,
| | 02:17 | if you're debating whether you choose
Dreamweaver or ColdFusion Builder, you can
| | 02:21 | deselect this option for now.
| | 02:23 | It's pretty easy to go into the Windows
configuration system and associate these
| | 02:26 | file extensions with
ColdFusion Builder at a later time.
| | 02:30 | I'll accept the default option and click Next.
| | 02:32 | Then I'll read the Installation
Confirmation information, and click Install and
| | 02:37 | the installation process will proceed.
| | 02:40 | The installation process takes a few minutes.
| | 02:42 | When the installation is complete,
you'll see either a Confirmation screen,
| | 02:46 | telling you that the installation
was successful, or a report of problems
| | 02:49 | that were encountered.
| | 02:50 | If you see any problems, correct them as needed.
| | 02:53 | Check the ColdFusion support
site at Adobe if you need to at
| | 02:56 | www.adobe.com/support/coldfusion,
and then try the installation again.
| | 03:04 | This message informs me that
the installation was successful.
| | 03:07 | Notice that on Windows there is
an option to launch ColdFusion
| | 03:10 | Builder immediately.
| | 03:12 | I'll leave that option selected
and click Done, and that will start
| | 03:15 | ColdFusion Builder up.
| | 03:16 | You can also start up Adobe ColdFusion
Builder from the shortcut that appears on
| | 03:20 | the Desktop, or you can go to the
Start menu on Windows, go to All Programs,
| | 03:26 | from there to the Adobe folder, to the
Adobe ColdFusion Builder folder, to the
| | 03:31 | Adobe ColdFusion Builder shortcut.
| | 03:35 | I started up ColdFusion
Builder as part of the ending of the
| | 03:37 | installation process.
| | 03:39 | This is ColdFusion Builder's default
appearance when it's installed on Windows.
| | 03:43 | Your copy might look a little bit different.
| | 03:45 | For example, I've had ColdFusion
Builder installed on my system previously, so
| | 03:50 | some of my file history
appears here in the Welcome Screen.
| | 03:53 | If this is the first time you've used
ColdFusion Builder, your file history
| | 03:56 | list will be blank, but the rest of the
Welcome Screen should look pretty much the same.
| | 04:01 | Notice that there are links to some
resources down at the bottom, to the
| | 04:04 | help system for ColdFusion Builder, and to
a reference for ColdFusion Markup Language.
| | 04:08 | I'll talk about those and other
ColdFusion Builder features in other videos.
| | Collapse this transcript |
| Installing ColdFusion Builder on Mac OS X| 00:00 | ColdFusion Builder, the new integrated
development environment from Adobe for
| | 00:04 | ColdFusion developers, is
available on both Windows and Mac.
| | 00:08 | In this video, I'll show you how to
install ColdFusion Builder on Mac OS X.
| | 00:12 | Download the evaluation software from
Adobe and then unpack it and start the
| | 00:17 | Installer application.
| | 00:18 | There are actually two versions of
ColdFusion Builder for each operating system:
| | 00:22 | the standalone and the Eclipse plug-in.
| | 00:24 | The standalone installation includes
a full copy of the Eclipse workbench.
| | 00:29 | I'll describe more about
Eclipse in other videos.
| | 00:31 | In the installation application's
first screen shown here, I'll read the
| | 00:35 | introduction and then click Next.
| | 00:37 | Then I'll read the Software License
Agreement, and if I agree, I'll click the
| | 00:40 | appropriate radio button and click Next again.
| | 00:43 | This is where you make your choice.
| | 00:45 | If you already have a copy of Eclipse,
and you want to integrate ColdFusion
| | 00:48 | Builder as a plug-in into that copy
of Eclipse, choose the second icon.
| | 00:52 | If you want to install ColdFusion
Builder as a standalone application, including
| | 00:55 | a new copy of Eclipse,
click the first radio button.
| | 00:58 | I'll use a standalone
copy of ColdFusion Builder.
| | 01:01 | That has everything I need.
| | 01:02 | So I'll choose the first
radio button and click Next.
| | 01:05 | Now I'm asked where I want
to install ColdFusion Builder.
| | 01:08 | The default installation folder
on Mac OS X is a directory named
| | 01:11 | 'ColdFusionBuilder' under the Applications folder.
| | 01:14 | I'll accept that default
and, once again, click Next.
| | 01:17 | Then I'll read through the
confirmation and click Install.
| | 01:20 | The installation takes just a few minutes
on Mac, a little less time than on Windows.
| | 01:25 | When it's done, you'll be able to
start up ColdFusion Builder by going to the
| | 01:29 | Applications folder, locating the
ColdFusionBuilder folder, opening that folder,
| | 01:33 | and then starting the
ColdFusion Builder executable from there.
| | 01:37 | When the installation is complete, I'll
click Done, and then I'll go to my Mac
| | 01:40 | hard disk, to the Applications folder.
| | 01:44 | From there, I'll go to ColdFusionBuilder.
| | 01:47 | Notice that it's placed right under the
Applications folder and not within an Adobe folder.
| | 01:52 | I'll open that folder and then
start the CF Builder application.
| | 01:56 | So that's how you install ColdFusion
Builder and open it up on Mac OS X.
| | Collapse this transcript |
| Setting folder permissions on Mac OS X| 00:00 | Before creating ColdFusion projects in
ColdFusion Builder, if you're working
| | 00:04 | on a Mac, you should check your file
permissions on the newly created web document root.
| | 00:09 | When the installation application
sets up these folders, it sets up some
| | 00:13 | restrictions that can get in your way if
you try to log in as another user on your Mac.
| | 00:18 | To fix these problems ahead of time,
go to the Applications folder, to
| | 00:22 | the ColdFusion9 folder.
| | 00:25 | Then locate the wwwroot folder.
| | 00:28 | This is the default document root.
| | 00:30 | Press Command+I, or right-click, or Ctrl+
Click on the folder and choose Get Info.
| | 00:34 | That brings up the Info screen.
| | 00:36 | Notice under Sharing & Permissions, at
the bottom of the Info screen, that the
| | 00:40 | current user who did the installation
is given read and write permissions, but
| | 00:44 | the admin and everyone groups are
given only read only permissions.
| | 00:48 | This can cause a problem, again, if you
log in as another user on the same machine.
| | 00:52 | To correct this, click the Lock icon at the
lower right-hand corner of the Info dialog.
| | 00:57 | You'll need to type in your user
password and you must be logged in as an
| | 01:01 | administrator to do this.
| | 01:02 | Then go to each of the items here and
change them from Read Only to Read & Write.
| | 01:09 | So now everybody on the computer has
read and write access to that wwwroot
| | 01:14 | folder and you'll be able to set up
your servers and create new projects within
| | 01:18 | the document root, without
running into permissions issues.
| | 01:21 | I'll click the Lock icon again and that
will save the changes to the permissions.
| | 01:26 | You should now be able to use the
wwwroot folder as any logged in user, and
| | 01:31 | you'll be able to create new files
and folders as needed to work with your
| | 01:35 | ColdFusion applications.
| | Collapse this transcript |
|
|
2. Using ColdFusion BuilderUsing Eclipse perspectives and views| 00:00 | ColdFusion Builder is an Eclipse plug-in.
| | 00:03 | That means that it's a software
component that's designed for use within a
| | 00:07 | larger piece of software
known as the Eclipse Workbench.
| | 00:11 | Eclipse is a free software product
that was originally built by IBM as a Java
| | 00:17 | Development Environment but was donated
to the Eclipse Foundation, a non-profit
| | 00:21 | organization, and is now maintained as
the platform on which many development
| | 00:26 | products are delivered, including
ColdFusion Builder and also Flex Builder, now
| | 00:31 | renamed as Flash Builder.
| | 00:33 | It's important to know the vocabulary
of Eclipse, so you can easily navigate
| | 00:38 | around the ColdFusion Builder Interface.
| | 00:40 | The Eclipse visual
interface is made up of views.
| | 00:44 | In Adobe software, these views
are commonly known as panels.
| | 00:48 | They serve the same purpose.
| | 00:49 | Each view offers a
certain amount of functionality.
| | 00:53 | The views that are immediately
available in ColdFusion Builder are called the
| | 00:57 | Navigator view, which will show you a
list of your files and directories, the
| | 01:01 | File view, which is a file management
tool, the Outline view that lets you
| | 01:06 | navigate the object-oriented structure
of your pages, the RDS Dataview and RDS
| | 01:11 | Fileview, which allow you to navigate
your ColdFusion server, the Snippets view,
| | 01:17 | which lets you create and use reusable
bits of code, and at the bottom of the
| | 01:21 | interface: the Servers, Console, Problems,
Tail view and Services Browser views.
| | 01:27 | Each of these views offers a
specific bit of functionality.
| | 01:31 | You can move the views around the
screen by clicking-and-dragging on the tabs.
| | 01:35 | For example, if I wanted to move to
Navigator view, I could click-and-drag and
| | 01:40 | you'll see that it re-docks
itself to wherever I drag it.
| | 01:44 | I'll bring it back to its original
location and this time it ends up in a tabbed
| | 01:48 | interface with the File view.
| | 01:50 | If you don't need a particular view, you
can click the X icon to close it and if
| | 01:55 | you want to bring the view back, you
can go to the Window menu and select Show
| | 02:00 | View and choose the view you want to see.
| | 02:03 | The particular arrangement of views
on the screen is called a Perspective.
| | 02:08 | ColdFusion Builder is delivered
with two built-in perspectives:
| | 02:11 | the ColdFusion perspective, which shows
you the Navigator, File and other views,
| | 02:16 | and the ColdFusion Debugging perspective.
| | 02:19 | To change perspectives, go to the menu
and choose Window>Open Perspective>Other,
| | 02:25 | and from there you can
choose ColdFusion Debugging.
| | 02:28 | You'll also see a number of perspectives
provided for other types of development.
| | 02:32 | The default delivery of ColdFusion
includes another plug-in called the JDT or
| | 02:36 | Java Development tools.
| | 02:38 | This is a free open-source plug-in and
the perspectives you see here, Java, Java
| | 02:43 | Browsing and Java Type
Hierarchy are part of that plug-in.
| | 02:47 | I will choose ColdFusion Debugging and
click OK. And in the ColdFusion Debugging
| | 02:51 | perspective, I see the Debug view,
Variables, Debug Output Buffer, Breakpoints
| | 02:58 | and Expressions view.
| | 02:59 | I still see a number of the
other views that were included in the
| | 03:02 | ColdFusion perspective.
| | 03:04 | Once you have switched to the
ColdFusion Debugging perspective for the first
| | 03:07 | time, you'll see a Perspective Selector
Interface above the views and this makes
| | 03:13 | it even easier to switch back and forth.
| | 03:15 | You can now click on
ColdFusion or ColdFusion Debugging.
| | 03:19 | And in any particular perspective, if
you've moved your views around and you
| | 03:23 | want to reset the original perspective,
you can go to that perspective, then go
| | 03:28 | to the menu and choose Window>Reset
Perspective, and then click OK to confirm.
| | 03:34 | And you will return everything back
to the original screen arrangement.
| | 03:38 | Finally, if you want to detach a view
and un-dock it, say if you have a spammed
| | 03:43 | monitor and you want to drag views over
to another monitor, you can do it easily
| | 03:47 | by right-clicking on the tab for the
selected view and choosing Detached.
| | 03:52 | Once you've detached a view, you can
move it around the screen and move it to a
| | 03:56 | second screen if you have one.
| | 03:58 | If you want to re-dock the view,
right-click again on the tab and
| | 04:02 | choose Detached again.
| | 04:04 | The view will drop into place in
whatever the software determines to be the most
| | 04:08 | convenient arrangement. And then you
can locate it and drag and place it back
| | 04:13 | where you want it, or you can once
again reset the perspective by choosing the
| | 04:18 | menu selection Window>Reset Perspective.
| | 04:22 | The Eclipse menu offers access to many
of the commonly used features of both
| | 04:26 | Eclipse and the ColdFusion plug-in.
| | 04:29 | When you're in the ColdFusion or
ColdFusion Debugging perspective, you'll see
| | 04:33 | the ColdFusion menu.
| | 04:35 | As you explore the menu, notice
that many of the menu choices have
| | 04:38 | associated keyboard shortcuts.
| | 04:40 | While there are ways of modifying
these keyboard shortcuts, for the most part
| | 04:44 | you will use them as is.
| | 04:46 | The keyboard shortcuts are
different between Windows and Mac.
| | 04:49 | For example, the Run command, shown
here, can be accessed with the keyboard
| | 04:53 | shortcut Ctrl+F11 on Windows,
or Command+Shift+F11 on Mac.
| | 04:59 | Sometimes the differences have to do
with how certain keyboard shortcuts are
| | 05:03 | already taken by the Mac OS X
operating system, but are available on Windows.
| | 05:08 | Once again, explore the menus and
find the keyboard shortcuts that make the
| | 05:12 | most sense for you.
| | 05:14 | So that's a quick tour of the
Eclipse and ColdFusion Builder Interface.
| | 05:18 | Once again, ColdFusion Builder is
a plug-in built on top of Eclipse.
| | 05:22 | If you decide to use the ColdFusion
Builder plug-in, you'll have the most
| | 05:26 | success using Eclipse version 3.4.
| | 05:30 | If you use a different version of
the Eclipse Workbench, you might see
| | 05:34 | some differences in keyboard
shortcuts, menu sequences and other aspects
| | 05:39 | of the Eclipse Interface.
| | Collapse this transcript |
| Defining a ColdFusion server| 00:00 | ColdFusion Builder includes a feature
that allows you to define the location
| | 00:04 | of your ColdFusion server and manage the
server from within your development environment.
| | 00:10 | This feature is part of the Servers
view, which is, by default, placed at the
| | 00:14 | bottom-center of the
ColdFusion Builder Interface.
| | 00:18 | You can define as many
ColdFusion servers as you like.
| | 00:21 | So if you work with multiple
ColdFusion servers, for example, using the
| | 00:24 | multi-instance server
configuration, you can set up as many server
| | 00:28 | configurations as you need and then
you can attach each of your ColdFusion
| | 00:31 | projects to one of these server definitions.
| | 00:35 | In this demonstration, I'll show you
how to define a ColdFusion server, using
| | 00:39 | the local ColdFusion server I
have installed on my own system.
| | 00:43 | I will go to the Servers view and then
to this first button, labeled Add Server.
| | 00:48 | I will click the button to open the
dialog, and then I'll choose ColdFusion as
| | 00:53 | the desired server type and click OK.
| | 00:57 | In this New ColdFusion Server
Setup dialog, I will provide all of the
| | 01:00 | information needed to describe
where my ColdFusion server is installed.
| | 01:04 | I will set the Server Name to localhost.
| | 01:08 | You can use any Server Name you want.
| | 01:10 | It's just a descriptive string. But
I'm using the term localhost because it's
| | 01:14 | always taken to mean the local computer.
| | 01:18 | The Description is optional and it's any
string you want to type in. I will type
| | 01:23 | in 'My local ColdFusion server'.
| | 01:27 | Next you are asked which
Application Server you're using.
| | 01:30 | By this, ColdFusion Builder really
means the J2EE, or Java Enterprise Edition
| | 01:35 | Server, on which ColdFusion is hosted.
| | 01:38 | In the version of ColdFusion Builder
I am using, only JRun is specifically
| | 01:42 | supported, and if you're using the
server configuration or the multi-server
| | 01:47 | configuration of ColdFusion,
you'll be using JRun as well.
| | 01:50 | For the moment, in this beta version of
ColdFusion Builder, other J2EE servers
| | 01:56 | such as Websphere and JBoss are
supported, but you won't be able to explicitly
| | 02:01 | start and stop ColdFusion from
ColdFusion Builder using those other servers.
| | 02:05 | I will use the default setting of Jrun.
| | 02:09 | Next you have to provide the Host Name.
| | 02:11 | This is either an IP address or a host
name that determines how you are going to
| | 02:15 | reach ColdFusion through the browser.
| | 02:17 | I will use the name 'localhost'.
| | 02:20 | I could also use the local IP address:
| | 02:22 | 127.0.0.1 and it would work exactly the same.
| | 02:28 | The Is Local or Is Remote option is
used to determine whether ColdFusion is
| | 02:33 | installed on your own
computer or on a remote computer.
| | 02:36 | I'm using a local copy of
ColdFusion, so I'll accept the default.
| | 02:40 | The WebServer Port is determined by which
WebServer you're using and how it's configured.
| | 02:45 | If, like me, you are using the
Development or Standalone WebServer that's
| | 02:49 | included with ColdFusion, then the
port number is 8500 and it's the same on
| | 02:55 | either Windows or Mac OS X. If you're
using Internet Information Services on
| | 02:59 | Windows, or Apache, then the port
might be the default of port 80.
| | 03:04 | You'll need to determine which port you
should use based on which WebServer you are using.
| | 03:09 | If you're not using a full J2EE server,
such as the full Jrun, or Websphere, or
| | 03:14 | Weblogic, you can leave the Context
Root in Application Server Name blank.
| | 03:19 | If you are using those servers, then
you'll probably understand what those terms
| | 03:23 | mean and know how to fill them in.
| | 03:25 | If you're using remote development
services in the default configuration, then
| | 03:30 | you should set the RDS User Name as 'admin'.
| | 03:34 | That's a default User
Name that's created for you.
| | 03:37 | If you're using the multi-user feature
of ColdFusion 9, then you should put in a
| | 03:41 | name that you've configured, and
you must provide an RDS password.
| | 03:46 | I'll type in the password that I
created when I installed ColdFusion.
| | 03:50 | You're probably not using SSL, or Secure
Sockets Layer, on your development copy
| | 03:55 | of ColdFusion, but if you were,
you would check the next option.
| | 03:59 | And if you want to automatically start
or stop ColdFusion whenever you open or
| | 04:03 | close ColdFusion Builder, you could
use the other two options on the screen.
| | 04:06 | I'll leave all three of those
options unchecked and click Next.
| | 04:12 | On this screen, there are two tabs that
you must interact with, if you're going
| | 04:15 | to follow along with all of the
exercises in this video series.
| | 04:19 | First, you must indicate where your
ColdFusion server is installed locally.
| | 04:24 | Go to the Server Home directory and you
can either click the Browse button and
| | 04:28 | locate the appropriate directory,
| | 04:30 | or if you know it, you can just type it in.
| | 04:33 | On Windows, the default Server Home
directory is C:\ColdFusion9, and on Mac it's
| | 04:40 | \Applications\ColdFusion9.
| | 04:44 | It is case-sensitive on Mac, so make
sure you type it in exactly correctly.
| | 04:49 | After you enter the Server Home value,
press the Tab key and you'll see that the
| | 04:53 | Document Root folder is
filled in automatically for you.
| | 04:57 | If you're using ColdFusion in the
server configuration, the Document Root is a
| | 05:01 | folder named wwwroot under
the installation directory.
| | 05:07 | Next, choose the Version you're using.
| | 05:09 | And you'll be using ColdFusion 9.0.
| | 05:12 | ColdFusion Builder also
supports versions 7 and 8.
| | 05:16 | If you're working on Windows, you can
indicate that you want to use the Windows
| | 05:20 | service to start or stop the server.
| | 05:21 | I will select that option because, by
default, on Windows, when you use the
| | 05:26 | server configuration, ColdFusion is
installed as a Windows service and as
| | 05:31 | I've previously shown, you can start and
stop ColdFusion from the Windows Control panel.
| | 05:36 | If you're working on Mac,
you won't see this option.
| | 05:39 | Next, I'll go through these
other tabs and show you what they do.
| | 05:43 | You can use the URL prefix
to add additional mappings.
| | 05:47 | This means that you can indicate a
local path, or a path on your hard disk, and
| | 05:52 | assign an equivalent URL prefix. And
then when you want to test your ColdFusion
| | 05:56 | pages within ColdFusion Builder,
ColdFusion Builder will use these mappings to
| | 06:01 | determine which URL it should use.
| | 06:04 | Because all of my projects are
going to be within their own directory
| | 06:07 | structures, I won't need to use this feature.
| | 06:10 | There is also a setting called
Virtual Hosts that allows you to setup
| | 06:13 | additional Web Servers.
| | 06:15 | Again, I won't need this
feature for this video series.
| | 06:18 | The last step however is very important.
| | 06:22 | Click on the Extension Settings tab.
| | 06:23 | You will see this interface with an
option labeled Install Extensions.
| | 06:29 | An extension is a set of code
that works with ColdFusion Builder to
| | 06:32 | generate ColdFusion code.
| | 06:35 | There are some very important
default code generator extensions that are
| | 06:38 | included with ColdFusion Builder
that must be installed under your
| | 06:42 | ColdFusion document root.
| | 06:44 | If you don't visit this tab as you
set up your server definition, then the
| | 06:48 | extensions won't be installed.
| | 06:51 | You just need to click on the tab,
review the options including that the
| | 06:55 | Install option is checked and that the
Web Root and Install Location are set
| | 06:59 | for you automatically. Then click finish.
| | 07:03 | In the Servers panel, you
should see your server listed.
| | 07:07 | Now, if you go to your ColdFusion
installation directory, and mine is under
| | 07:11 | ColdFusion9, and from there to the
wwwroot folder, you should see these
| | 07:16 | folders created for you:
| | 07:18 | the ActionScript Class Generator, the
Adobe CFC Generator and a few others.
| | 07:24 | These are the extensions that were
installed into your ColdFusion server when
| | 07:28 | you set up your server
definition and visited the Extensions tab.
| | 07:32 | Here is one other very important thing
you're able to do once you've defined a server.
| | 07:36 | I will go to the server
that's listed in the Servers view.
| | 07:40 | I will right-click on it and
I'll choose Launch Admin Page.
| | 07:45 | This takes you automatically to the
ColdFusion Administrator application for
| | 07:49 | this server, viewed in a browser that's
hosted within a ColdFusion Builder view.
| | 07:56 | I can type in my admin password and
I'll be able to manage my ColdFusion server
| | 08:00 | from within the Administrator application,
completely within ColdFusion Builder,
| | 08:05 | without having to use an external browser.
| | 08:08 | The integration of ColdFusion
administrator into the development environment is
| | 08:12 | a great new feature of ColdFusion Builder.
| | 08:15 | When you're done with ColdFusion
Administrator, you can just close the tab and
| | 08:19 | you will return to the original
perspective, or layout of views, that you started from.
| | 08:25 | So that's how you define the
ColdFusion server in ColdFusion Builder and make
| | 08:30 | sure that the default extensions are
installed into your ColdFusion server.
| | 08:35 | In other videos of this series, I will
describe different ways of using those
| | 08:38 | extensions to generate
some really valuable code.
| | Collapse this transcript |
| Creating a ColdFusion project| 00:01 | Once you have defined the location of
your ColdFusion server, the next step is
| | 00:04 | to create a ColdFusion project.
| | 00:06 | You can create as many
ColdFusion projects as you like.
| | 00:09 | Each project points to a particular
folder that's typically placed within
| | 00:13 | the web root folder:
| | 00:14 | wwwroot, under your
ColdFusion server installation.
| | 00:18 | If you're working with Apache, your
document root might be named 'htdocs', but I
| | 00:23 | will assume for the purposes of this
video series that you followed all of the
| | 00:27 | same steps that I have and are
using the server configuration with the
| | 00:30 | development webserver.
| | 00:31 | So, you will want to create the
project within your workspace and point at a
| | 00:36 | location within that wwwroot document root.
| | 00:40 | To create a project, you can either
click the link within the Welcome Screen
| | 00:44 | labeled 'ColdFusion Project', you can
go to the Navigator and right-click, or
| | 00:48 | Ctrl+Click on Mac, and select New>
ColdFusion Project, or you can go to the menu
| | 00:54 | and select File>New>ColdFusion Project.
| | 00:57 | No matter how you do it, you will
end up at this dialog box labeled
| | 01:00 | New ColdFusion Project.
| | 01:03 | The Project Name can be any descriptive string.
| | 01:05 | I will call this project 'Essential Training'.
| | 01:10 | I'll de-select the option Use
Default Location because ColdFusion Builder
| | 01:14 | defaults to placing the project files
somewhere other than in the web root.
| | 01:19 | Then I will click the Browse button
and I will navigate to my ColdFusion
| | 01:22 | installation folder.
| | 01:24 | On Windows that's C:\ColdFusion9, and
on Mac it's \Applications\ColdFusion9.
| | 01:32 | From there I'll go to wwwroot folder
and then I will click the button to
| | 01:37 | create a new folder.
| | 01:38 | It's labeled Make New Folder on
Windows, or just New Folder on Mac.
| | 01:42 | I'll name the folder cf9esst.
| | 01:46 | Notice that I'm making the new folder all
lowercase, a good practice in web development.
| | 01:50 | I will set the new folder and then
click OK on Windows, or Choose on the Mac,
| | 01:56 | and that sets the project location
to the cf9esst folder under wwwroot.
| | 02:02 | Then I will click Next.
| | 02:04 | In this screen, you assign a ColdFusion server.
| | 02:07 | I've already set up my ColdFusion server,
so I just have to pull down the list
| | 02:11 | and choose localhost.
| | 02:13 | Then check your sample URL.
| | 02:15 | It should show the correct
URL: http://127.0.0.1:8500.
| | 02:23 | That's the root URL of your
ColdFusion server and then the name of your
| | 02:27 | project folder, cf9esst.
| | 02:30 | In the Preview Settings, you can
indicate which browsers you want to use.
| | 02:34 | On Windows, you automatically have access to
Internet Explorer and to Firefox if it's installed.
| | 02:40 | On Mac you'll see Safari.
| | 02:42 | When I recorded this video, I
was working with an older beta of
| | 02:46 | ColdFusion Builder.
| | 02:47 | Since you're using the actual public
beta, your screen might look a little
| | 02:51 | different than this.
| | 02:52 | However, you don't need to make
any changes to the default settings.
| | 02:56 | You can also choose to use an
external browser if you prefer.
| | 02:59 | In which case, you select the radio
button and then choose the location of the
| | 03:03 | executable that starts up your browser.
| | 03:05 | I will be using the internal
browser with its default settings.
| | 03:08 | And then I'll click Next.
| | 03:10 | In this screen, you can add
additional source code files and additional
| | 03:14 | Flex Builder Extensions.
| | 03:16 | If you know how to use the
ModelGlue development framework, which is a
| | 03:19 | fairly advanced framework for
building ColdFusion applications, you can use
| | 03:23 | an application called the
ModelGlue Assistant that's included with
| | 03:26 | ColdFusion Builder.
| | 03:27 | For brand new basic ColdFusion
applications though, you probably don't need to
| | 03:31 | do anything on this screen.
| | 03:33 | Just click Finish and that
creates your new project.
| | 03:37 | Your new project appears in the Navigator view.
| | 03:39 | If you click the tree icon, you'll
see it disappear because right now the
| | 03:43 | project doesn't have any contents,
but that project points to that physical
| | 03:47 | location on your hard disk.
| | 03:49 | If at any point you need to make any
changes to the Project Properties, click on
| | 03:53 | the project name in the Navigator view.
| | 03:55 | Then go to the menu and
select Project > Properties.
| | 03:59 | From there you can go to ColdFusion
project and change many of the options that
| | 04:03 | were available when you first set
up the project, including Linked File
| | 04:07 | Locations, Server Settings, such as the
location of the server and other very
| | 04:12 | important tools that can be used to
support your ColdFusion application.
| | 04:16 | You'll also find properties here that
aren't related directly to ColdFusion,
| | 04:20 | such as Cascading Style Sheet Preview
functionality, HTML Code Formatting and many others.
| | 04:26 | For now, just explore the properties,
acquaint yourself with what's available
| | 04:29 | there, and then click OK or
Cancel to get out of that screen.
| | 04:33 | So that's how you create your project.
| | 04:35 | Once you created the project, you're
ready to start creating ColdFusion pages.
| | Collapse this transcript |
| Creating and browsing a ColdFusion page| 00:01 | ColdFusion's basic task is to generate
HTML and other code that can be read and
| | 00:06 | interpreted by the web browser.
| | 00:08 | When you create a ColdFusion page,
you're basically creating an HTML page
| | 00:12 | that mixes HTML, Cascading Style Sheets,
JavaScript and ColdFusion Markup Language Code.
| | 00:19 | The page is processed on the server,
which results in generating HTML output
| | 00:23 | that can be read by the browser.
| | 00:25 | That content is sent back to the
browser, interpreted, and rendered.
| | 00:28 | I will show you how to create
the simplest of ColdFusion pages.
| | 00:32 | In the page, I will set a simple
variable, and I will put the value of that
| | 00:35 | variable and I'll show you how that
dynamically generated content is received
| | 00:39 | and rendered by the browser.
| | 00:41 | I'm working in Windows, but this
exercise will be pretty much the same on either
| | 00:45 | Windows or Mac OS X.
| | 00:47 | I'll first select the
project in the Navigator view.
| | 00:50 | To create a new page, you can either
go to the Welcome Screen and click the
| | 00:54 | ColdFusion Page link, or you can
right-click on the Project and select
| | 00:58 | New>ColdFusion Page, or you can choose
the project and then go to the menu and
| | 01:03 | choose File>New>ColdFusion Page.
| | 01:06 | This is the New ColdFusion Page dialog box.
| | 01:09 | When you first install ColdFusion Builder,
new files start with a name of Untitled_cfm.
| | 01:16 | You can assign any filename you want,
but I do have some recommendations.
| | 01:20 | With few exceptions, I name all of my
files with all lowercase characters.
| | 01:24 | You should never include any spaces or
special characters in your file names,
| | 01:28 | except sometimes hyphens, and that
follows the same pattern as with HTML pages.
| | 01:33 | When you create a new ColdFusion page
in a particular directory, if you want
| | 01:37 | that page to be the default page,
that is the page that's loaded by the
| | 01:41 | browser, if the user only requests the
directory itself, you should name the file 'index.cfm'.
| | 01:48 | This is a configuration of the web server.
| | 01:51 | When you install ColdFusion and
connect it to a web server, the web server
| | 01:54 | typically is configured to expect
that this will be the default page name.
| | 01:59 | If I don't type in the .cfm
extension here, it will be added for me
| | 02:03 | by ColdFusion Builder.
| | 02:05 | Now, I'll click Finish and that
creates the new file and opens it in
| | 02:09 | ColdFusion Builder.
| | 02:10 | I'm now looking at a special
kind of view called an Editor.
| | 02:14 | Eclipse editors are designed to
handle particular types of content.
| | 02:17 | For example, if I were working in Flex,
I would be using either an MXML or an
| | 02:22 | ActionScript Editor.
| | 02:23 | In ColdFusion Builder, I'm
working with the ColdFusion Editor.
| | 02:27 | The ColdFusion Editor has tabs at the
top for entering CFML, HTML, JavaScript
| | 02:33 | and Cascading Style Sheets.
| | 02:35 | I'm going to create the simplest of HTML pages.
| | 02:39 | I'll start by typing in an HTML tag,
and notice that when I type in the closing
| | 02:43 | greater than sign at the end of the
tag that ColdFusion Builder automatically
| | 02:47 | creates the end tag.
| | 02:49 | That's called auto-completion, and it's
one small part of ColdFusion Builder's
| | 02:53 | automatic editing capabilities.
| | 02:56 | Now, I will make a little
space between the HTML tags.
| | 02:59 | Notice that when I separate the tags,
ColdFusion Builder displays a Collapse
| | 03:03 | icon which allows me to expand
and collapse that bit of code.
| | 03:07 | Now, within the HTML tags, I will
create a head section, and within the head
| | 03:13 | section, I will create a title
section and in the title, I'll type in,
| | 03:18 | 'My First ColdFusion Page'.
| | 03:22 | Now, I will move the cursor below the
head section, I will create a body tag set
| | 03:28 | and within the body, I will create an h1 tag.
| | 03:32 | Now at this point, I'm getting a little
tired of all this manual typing, so I am
| | 03:36 | going to get a little bit of
help from ColdFusion Builder.
| | 03:38 | I'll go to the area right above the
editing region and click the HTML tab and
| | 03:43 | you'll notice that there are a
number of icons that you can use to add
| | 03:46 | particular HTML tags.
| | 03:49 | I'll click the H1 icon and
that creates a pair of h1 tags.
| | 03:53 | I'll place the cursor between the h1 tags
and type in 'My First ColdFusion Page' again.
| | 04:00 | Now, I'm going to test the page in the browser.
| | 04:02 | Take a look below the editing area.
| | 04:04 | If you're working in Windows and you
have Firefox installed, you should see
| | 04:08 | these two tabs, Firefox and IE.
| | 04:10 | If you're working on Mac, you will see Safari.
| | 04:12 | Click on the tab for the
browser you want to use.
| | 04:15 | If you didn't save your changes
and if this is the first time you've
| | 04:18 | followed this workflow, you will see
this message asking whether you'd like
| | 04:22 | to enable Auto-save.
| | 04:23 | When you preview the file like this,
the file must be saved to disk otherwise
| | 04:28 | the ColdFusion server and the
web server can't work with it.
| | 04:31 | I'm going to click Yes.
| | 04:33 | If you want to change this behavior
later on, you can go to the menu and follow
| | 04:36 | the path that's shown here:
| | 04:38 | Window>Preferences>Aptana>Editors>HTML>Preview.
| | 04:43 | I will click Yes and the page is
saved and then displayed in the browser.
| | 04:49 | Now, if I want to compare the two files
to each other, I can use either Firefox
| | 04:53 | or, because I'm working on Windows, I
can also choose IE and this will show me
| | 04:57 | how the page looks in Internet Explorer.
| | 04:59 | Using Internet Explorer, I can also
look at the source code that was returned
| | 05:03 | from the ColdFusion server.
| | 05:04 | I will right-click in the browser
area and then I'll select View Source.
| | 05:09 | That menu, by the way, is unique to
Internet Explorer and I will see that the code
| | 05:13 | that I entered in the page is passed
right back to the browser by ColdFusion.
| | 05:18 | I haven't so far included any
ColdFusion commands, so this is just very,
| | 05:22 | very basic HTML code.
| | 05:24 | So now I have created my first
ColdFusion Page and my next step will be to use
| | 05:29 | some very basic server-side ColdFusion
commands to set some variables and output
| | 05:34 | their values to the browser.
| | Collapse this transcript |
| Defining a default page template| 00:00 | By default, new ColdFusion pages that
you create in ColdFusion Builder are
| | 00:04 | empty, and you have to create
the HTML structure from scratch.
| | 00:08 | You can configure ColdFusion Builder
to have a new page template, one for
| | 00:12 | ColdFusion pages and
another for ColdFusion components.
| | 00:16 | For this demonstration, I will use a file
that's included with the exercise files.
| | 00:21 | If you have access to the exercise
files, open them up and go to the
| | 00:25 | folder ch02cfbuilder.
| | 00:28 | You will find a file there
called 'htmltemplate.cfm'.
| | 00:32 | Double-click the file and it
will open up in ColdFusion Builder.
| | 00:35 | Now, if you don't have access to the exercise
files, you can create this file quite easily.
| | 00:40 | I'll show its contents here on the screen
and show you that it's a basic HTML structure.
| | 00:45 | In fact, I created this page by
going into Dreamweaver and selecting
| | 00:49 | File>New>ColdFusion Page and
this was the beginning page that
| | 00:53 | Dreamweaver offered.
| | 00:54 | Now, I'm going to select all of the text
within this file and copy it to the clipboard.
| | 00:59 | I right-click, or Ctrl+Click on the
Mac, and select Copy, or press Ctrl+C on
| | 01:04 | Windows, or Command+C on Mac.
| | 01:07 | However you do it, copy the
contents of the file to the clipboard.
| | 01:10 | Next, go to the menu and
select Window>Preferences.
| | 01:15 | In the Preferences dialog box, go to
the ColdFusion section and expand it.
| | 01:19 | And from there go to Editor Profiles.
| | 01:21 | Expand that section.
| | 01:23 | When you click on the Editor item,
you'll see this section, New File Settings.
| | 01:28 | You can configure the New File
Settings for CFM and for CFC files, and
| | 01:33 | notice that they're both blank by
default, at least in this build of
| | 01:36 | ColdFusion Builder.
| | 01:37 | I'll click into the Initial CFM
Content and then press Ctrl+V on Windows, or
| | 01:42 | Command+V on Mac, to paste that content in.
| | 01:45 | So now, this is the content of any
brand new ColdFusion page that I create in
| | 01:50 | ColdFusion Builder for the current workspace.
| | 01:52 | I will click OK to save the change.
| | 01:55 | Then I will close the template
file without saving its changes.
| | 01:59 | And then I'll create a brand new page
by selecting File>New>ColdFusion Page.
| | 02:05 | If you don't see a location listed,
click the Browse button, choose the
| | 02:08 | Essential Training project and click OK.
| | 02:11 | Then click into the Page Name and
type in 'page2.cfm' and click Finish.
| | 02:16 | And you should see that the new page
contains the content of your page template,
| | 02:21 | as configured in the
ColdFusion Builder Settings.
| | 02:24 | This is the first configuration
that I'll change when I first install
| | 02:27 | ColdFusion Builder.
| | 02:28 | Now ColdFusion Builder and
Eclipse have a concept of a workspace.
| | 02:32 | Your workspace is where your general
configurations are stored, including what
| | 02:37 | fonts are used in the editors, and
other configurations and other preferences
| | 02:41 | such as this default content for new pages.
| | 02:44 | If you select a new workspace by
selecting File > Switch Workspace and you
| | 02:49 | choose a new directory to store your
configurations, all of this information
| | 02:53 | will be gone and you'll have to reproduce it.
| | 02:55 | There is a way, however, of copying
the settings from the current workspace
| | 02:59 | to the new workspace.
| | 03:00 | You'll expand the Copy Settings
option and click the options that you want.
| | 03:04 | The specific one you're
interested in is the Workbench Layout.
| | 03:07 | I'll change my workspace here from
workspace2, when I configured earlier, to
| | 03:11 | simply Adobe ColdFusion workspace and click OK.
| | 03:15 | When you switch workspaces, you will see
that ColdFusion Builder stops and then
| | 03:19 | restarts automatically.
| | 03:20 | And then I'll switch workspaces
again, selecting File>Switch Workspace.
| | 03:25 | And this time I'll choose my old workspace.
| | 03:28 | Once again, ColdFusion Builder will
close and reopen, and when it reopens it will
| | 03:32 | show me the project that I had already
created, and it will restore all of the
| | 03:36 | preferences that I might have already set up.
| | 03:38 | So in this video, I've described how to
configure ColdFusion Builder so that you
| | 03:42 | have default content for new pages.
| | 03:45 | I've also described how to switch workspaces.
| | 03:48 | A workspace, again, keeps track of your
projects and your preferences, and you
| | 03:53 | can have as many workspaces as you want,
each pointing to a particular folder
| | 03:57 | on your hard disk.
| | Collapse this transcript |
| Setting and outputting variables| 00:00 | ColdFusion pages are built with a
combination of HTML, or Hypertext Markup
| | 00:05 | Language, and CFML, ColdFusion Markup Language.
| | 00:09 | Within your pages, you combine
the client-side code, HTML, and the
| | 00:13 | server-side code, CFML, to produce an HTML
page that can be read and rendered by the browser.
| | 00:21 | In this demonstration, I'll create a
brand new ColdFusion page and show you how
| | 00:25 | to declare and set the value of a
variable, and then output the value of that
| | 00:30 | variable to the browser.
| | 00:32 | If you're following along in these
exercises, you should already have configured
| | 00:35 | ColdFusion Builder so that when you
create a brand new ColdFusion page it
| | 00:40 | already has a basic HTML structure.
| | 00:43 | I'll go to the Essential
Training project in ColdFusion Builder.
| | 00:46 | Right-click on it and
choose New>ColdFusion Page.
| | 00:51 | I'll name the new page 'variables.cfm'.
| | 00:55 | Once the page has been created,
I'll set the page's title to a value of
| | 01:00 | ColdFusion Variables.
| | 01:03 | Then in the body of the page, I'll add
an h1 tag set, and within the h1 tag set,
| | 01:10 | once again I'll output the
value 'ColdFusion Variables'.
| | 01:14 | I'll then test my page in the browser
by clicking on the Browser tab at the
| | 01:18 | bottom of the editing area.
| | 01:20 | And I'll see the output of the plain HTML page.
| | 01:24 | Then I'll return to Source View.
| | 01:27 | You can place ColdFusion
commands anywhere in the page.
| | 01:30 | The page is executed from the top
down so that as the ColdFusion server
| | 01:35 | encounters ColdFusion
commands it processes them.
| | 01:38 | It then incorporates the combination of
whatever the ColdFusion command produces
| | 01:43 | plus the HTML output, and the
result is sent back to the browser.
| | 01:48 | I'll place the cursor after the h1
tag set and make a little bit of space.
| | 01:53 | The first command I am
going to use is named 'cfset'.
| | 01:57 | All ColdFusion tag commands start with the letters 'cf'.
| | 02:01 | I'll start by typing in a less-than
character and then cf, and I'll see a
| | 02:06 | dropdown list appear of all
known ColdFusion commands.
| | 02:10 | I'll type in 'cfset' and
then press the Spacebar.
| | 02:15 | The cfset command takes a name
value pair, separated by an equal sign.
| | 02:20 | I am going to create a variable called
'firstname' and set it to my first name,
| | 02:25 | and then I'll close the tag by placing
the cursor at the end of the line and
| | 02:29 | typing in the greater-than character.
| | 02:32 | When I run the page in the
browser, I don't see any output.
| | 02:35 | That's because I've set the variable
value, I haven't output it yet.
| | 02:39 | So I'll go back to the source code and now
I'll place the cursor after the cfset command.
| | 02:46 | In order to output a dynamic
expression to the browser, you wrap whatever
| | 02:50 | dynamic values you have inside
a pair of tags called 'cfoutput'.
| | 02:55 | I'll type in the beginning cfoutput tag. First
the less-than character, then cf. I'll type out.
| | 03:04 | I'll get to the cfoutput
command and press Enter, or Return.
| | 03:08 | Notice that the cfoutput tag supports
a number of attributes including query,
| | 03:13 | startrow, maxrows and others.
| | 03:16 | I'll show you how to use some of
these attributes in a later video, but for
| | 03:20 | now, I don't need them.
| | 03:21 | I only want to create a simple cfoutput section.
| | 03:25 | Notice also that ColdFusion Builder
automatically auto-completed the cfoutput tag.
| | 03:31 | When you use cfoutput, you always
use it with a begin tag and an end tag.
| | 03:37 | Now I'll place the cursor
between the cfoutput tags.
| | 03:40 | To output the value of a variable, you
place the variable name inside a pair of
| | 03:45 | hashmarks or pound signs.
| | 03:47 | With the cursor between the
cfoutput tags, I'll type in a pound sign.
| | 03:52 | Notice that ColdFusion Builder
automatically adds the second pound sign.
| | 03:56 | Whenever the cursor is between the
cfoutput tags, ColdFusion Builder detects
| | 04:01 | that condition and make sure
that you have matching pound signs.
| | 04:05 | Now I'll type in the name
of the variable, 'firstname'.
| | 04:10 | When you create the variable inside the
cfset command, you don't need the pound
| | 04:14 | signs there, but you do need them
when you're outputting the value of the
| | 04:18 | variable to the browser.
| | 04:20 | I'll test the page in the
browser by clicking the Firefox tab.
| | 04:23 | If you're working on a Mac, you can click Safari.
| | 04:26 | And I'll see the value of the
variable displayed in the page.
| | 04:30 | Now I'll go back to Source View.
| | 04:32 | Within the cfoutput section
you can combine literal HTML plus
| | 04:37 | dynamic expressions.
| | 04:39 | So if I wanted to add a little bit
of literal text before the variable, I
| | 04:42 | would simply type it in.
| | 04:44 | I'll place the cursor before the
pound sign and type in the word 'Welcome'.
| | 04:48 | I'll place the cursor after the variable,
after the closing pound sign, and put it in
| | 04:53 | an exclamation mark.
| | 04:55 | I'll wrap the whole thing inside a heading.
| | 04:57 | I'll select all of the
text within the cfoutput tags.
| | 05:01 | I'll go up to the toolbar above the
editing area and click the HTML Tab and then
| | 05:06 | I'll click the h2 icon to wrap the
selected text inside a heading 2.
| | 05:11 | I'll then view the result in the browser
and I'll see that it's a combination of
| | 05:15 | the literal text, the HTML
Markup and the dynamic variable.
| | 05:20 | You can combine multiple
variables in various ways.
| | 05:23 | For example, I'll go back to the
source once again and I'll add another cfset
| | 05:29 | command, this time setting a variable called
'lastname', and I'll set its value to my last name.
| | 05:36 | Then I'll place the cursor
inside the cfoutput section.
| | 05:39 | I'll add a space, a pair of pound
signs and then the name of the second
| | 05:44 | variable, 'lastname'.
| | 05:47 | I'll test the page in the
browser and there is the result.
| | 05:51 | One more thing about setting these variables.
| | 05:53 | These are called simple variables in ColdFusion.
| | 05:57 | A simple variable is always set as a
string that can be evaluated as a number, a
| | 06:02 | date, a boolean and other simple data types.
| | 06:05 | These variables that you create using
the cfset command are members of a scope
| | 06:10 | or a group of variables,
simply called variables.
| | 06:14 | When you output their values to the
browser, you can either refer to them
| | 06:17 | by their simple variable names or you can
add a prefix that looks like this, variables.
| | 06:24 | Notice that the word
variables is followed by a period.
| | 06:27 | I'll make that change both for the
firstname and for the lastname variable.
| | 06:31 | I'll, once again, test the page in the
browser, and the result in the browser
| | 06:37 | is exactly the same.
| | 06:38 | But now I am being more specific in
how I refer to the variable in my code.
| | 06:44 | For one last demonstration, I'll show you
how this content is delivered to the browser.
| | 06:49 | I'll go to the toolbar above the
editing area and click the Run button.
| | 06:53 | This results in previewing
the page in an external browser.
| | 06:58 | On my system, the page opens in Firefox.
| | 07:01 | Your page might open in another browser.
| | 07:04 | In Firefox, I can see the content, or
source that's returned to the browser, by
| | 07:09 | right-clicking anywhere on the
page and selecting View Page Source.
| | 07:14 | I can see that the content returned to
the browser is just the values of the
| | 07:19 | variables, the HTML
Markup and other literal text.
| | 07:23 | The cfset and cfoutput tags are not
returned to the browser, because the browser
| | 07:28 | wouldn't know what to do with them.
| | 07:29 | These are server-side commands, handled,
interpreted and executed by ColdFusion
| | 07:35 | to generate and return content to the
browser that the browser understands.
| | 07:40 | When the browser receives the HTML
content, it reads and renders it, and as
| | 07:45 | a result you can create any sort of
ColdFusion page you want, as long as you
| | 07:49 | know how to write the HTML Cascading
Style Sheet and other browser code that's
| | 07:53 | required.
| | Collapse this transcript |
| Using the Snippets view| 00:00 | ColdFusion Builder has a nice tool
called the Snippets View, which allows you to
| | 00:04 | define and use snippets.
| | 00:06 | Each snippet can contain any sort of
text-based content, simple strings,
| | 00:11 | ColdFusion and HTML tags, or
even something very complex.
| | 00:16 | Once you've defined the snippet once, you
can then easily add the content of that
| | 00:20 | snippet to any ColdFusion page.
| | 00:22 | To demonstrate this, I'll
go to the Snippets View.
| | 00:25 | Notice that I've rearranged the
Snippets View so I can see a lot more of it and
| | 00:29 | if you're following along, you
might want to do the same thing.
| | 00:32 | In the Snippets view, there is a toolbar.
| | 00:34 | The first button lets you refresh the
snippet view and makes sure you're showing
| | 00:37 | everything that's available.
| | 00:39 | Then there are buttons for creating
a snippet, editing snippets, deleting
| | 00:42 | snippets and creating a new
snippet package or folder.
| | 00:46 | Snippet packages let you
keep your snippets organized.
| | 00:50 | I'll create a new snippet by
clicking the plus button, and I'll give it a
| | 00:54 | name of 'Welcome text'.
| | 00:55 | You can set the name of a
snippet to any string you want.
| | 00:59 | If you like, you can add a
Description, but you don't need to.
| | 01:02 | And for this first example,
I'll click into the Start Block.
| | 01:05 | I'll type in a beginning h1 tag, and
then the text 'Welcome to my website'.
| | 01:10 | And then I'll close the snippet with
an ending h1 tag. And I'll click OK.
| | 01:15 | So there is my first snippet.
| | 01:17 | Now to use the snippet,
I'll create a brand-new page.
| | 01:19 | I'll go to the menu and
select File>New>ColdFusion Page.
| | 01:24 | I'll browse and select the Essential
Training project, and I'll give the page
| | 01:28 | a name of 'usesnippets'.
| | 01:31 | And I'll click Finish.
| | 01:33 | Now to place the snippet, I'll put the
cursor where I want it to appear, between
| | 01:37 | the body tags, for example.
| | 01:38 | And then I'll go to the Snippets View.
| | 01:40 | I'll right-click and I'll choose
Insert, and that adds the content of the
| | 01:45 | snippet to my page at the cursor location.
| | 01:47 | There is more that you can do with snippets.
| | 01:49 | For example, you can assign a
snippet what's called Trigger Text.
| | 01:53 | I'll right-click on the
Snippet and choose Edit Snippet.
| | 01:58 | The Trigger Text is a string that you
can type into your editor and then press
| | 02:02 | a keyboard shortcut.
| | 02:03 | When you press the keyboard shortcut,
which is Ctrl+J on Windows, or Commands+J
| | 02:07 | on Mac, the Trigger Text is expanded
to the entire content of the snippet.
| | 02:13 | I'll give this snippet a trigger
text value of 'wel', for welcome.
| | 02:17 | Typically you make your trigger text nice and
short, so it's easy to type. I'll click OK.
| | 02:24 | I'll place the cursor in the page
where I want the snippet to appear.
| | 02:27 | I'll then type the trigger text 'wel'
and then I'll press the keyboard shortcut
| | 02:32 | Ctrl+J on Windows, or Command+J on Mac.
| | 02:36 | You can then use the snippet without
having to navigate to the Snippets view.
| | 02:40 | There is one more thing I would
like to show you about snippets.
| | 02:42 | When you create a snippet, the snippet
can contain starting and ending content.
| | 02:47 | The idea is that you can place the
cursor somewhere on your page and then
| | 02:51 | insert the snippet and the cursor will land
right between the starting and ending blocks.
| | 02:56 | I am going to create three snippets:
| | 02:58 | for HTML tables, rows and cells.
| | 03:02 | I'll give each snippet a name and a
trigger text value, matching the HTML tags
| | 03:07 | that they'll be inserting.
| | 03:08 | I'll give the first snippet a Name and
Trigger Text of table. And then in the
| | 03:13 | Starting Block I'll put
in the beginning table tag.
| | 03:16 | And then in the Ending Block, I'll put
in the ending table tag. And click OK.
| | 03:21 | So there is my table snippet.
| | 03:22 | Now I'll repeat the process
twice for table rows and table cells.
| | 03:27 | The next snippet has a
Name and Trigger Text of 'tr'.
| | 03:30 | And in the Start Block, I'll
put in the beginning tr tag.
| | 03:33 | And in the Ending Block an ending tr tag.
| | 03:36 | I'll click OK to save that
snippet and add one more.
| | 03:39 | This one will be for the td tag.
| | 03:42 | I'll give it a Name and a Trigger Text of 'td'.
| | 03:44 | I'll put in a Starting Block and an
Ending Block, containing the beginning
| | 03:49 | and ending td tags. And click OK.
| | 03:52 | Now I'll come back to my Page.
| | 03:55 | In order to use these snippets, I'll
type in the name of the tag I want and
| | 03:58 | then press the Snippet keyboard
shortcut, Ctrl+J or Command+J. That expands the
| | 04:03 | Trigger Text to the entire snippet content,
leaving the cursor between the blocks.
| | 04:08 | I'll press Enter a couple of times and tab in.
| | 04:11 | I'll type 'tr', press the keyboard
shortcut, and it's expanded to the tr tags.
| | 04:16 | And finally, I'll add a table cell
by typing 'td' and pressing Ctrl+J on
| | 04:20 | Windows, or Command+J on Mac again, and I get
that snippet expanded and filled in in my page.
| | 04:26 | You can create as many snippets as you want.
| | 04:29 | Your snippets are
associated with your workspace.
| | 04:32 | You can actually have multiple
workspaces pointing to the same snippet's
| | 04:35 | location and you should be able to
share snippets if you like, by defining your
| | 04:39 | snippets location as
somewhere on your local area network.
| | 04:43 | So this is a valuable new tool
that's a part of ColdFusion Builder in
| | 04:47 | its initial release.
| | Collapse this transcript |
| Using an external browser| 00:00 | As you get into working with complete
ColdFusion applications, you might find
| | 00:04 | that you want to test your
application in a complete external web browser
| | 00:07 | rather than within the internal browsers that
are provided in the ColdFusion Builder interface.
| | 00:12 | You can do this easily.
| | 00:14 | To test this, open any ColdFusion page.
| | 00:17 | I've opened the variables.cfm
page that I created earlier.
| | 00:20 | Then go to the menu and select Run> Run.
This results in opening the page in
| | 00:27 | an external browser.
| | 00:29 | The choice of the browser depends
on your system browser by default.
| | 00:33 | My computer is set up to use Firefox by
default, so that's the browser that opens.
| | 00:38 | But you can control this
through the Eclipse preferences.
| | 00:41 | I'll close the browser and
return to ColdFusion Builder.
| | 00:44 | Then I'll go to the Preferences
dialog, selecting Window>Preferences.
| | 00:49 | In the Preferences dialog, I'll
open the General category and go to the
| | 00:53 | Web Browser selection.
| | 00:54 | Here I can choose any of
my installed web browsers.
| | 00:58 | And if you have a web browser that's
not currently installed, you can add it by
| | 01:02 | clicking the New button.
| | 01:03 | I'll select Internet Explorer as
my preferred browser and click OK.
| | 01:08 | Then I'll, once again, run the
application, selecting Run, and once again, Run.
| | 01:14 | And now the page opens in Internet Explorer.
| | 01:16 | When you configure ColdFusion Builder
in this way, you're not affecting your
| | 01:20 | system setting for which
is your preferred browser.
| | 01:23 | You're only indicating which browser will
open when you select the Run menu choice.
| | 01:27 | You can also browse the current page
in an external browser, by going to the
| | 01:30 | toolbar and clicking the Run button.
| | 01:32 | This is the round button with
the right pointing white arrow.
| | 01:35 | I'll click, and once again, I see
the page in Internet Explorer.
| | 01:40 | Now my preference is to use Firefox.
| | 01:43 | So I'll go to the menu and
select Window>Preferences.
| | 01:45 | I'll choose Firefox. Click OK.
| | 01:48 | And then test one more time.
| | 01:50 | You can also use a
keyboard shortcut if you like.
| | 01:53 | Take a look at the menu to find
out what the keyboard shortcut is.
| | 01:56 | On Windows it's Ctrl+F11, and on Mac,
by default, it's Command+Shift+F11.
| | 02:02 | So that's how you can use an
external browser if you desire to test
| | 02:05 | your ColdFusion pages.
| | Collapse this transcript |
| Using online help| 00:00 | ColdFusion Builder includes a
complete set of online help, documentation for
| | 00:05 | ColdFusion Builder itself, and
for ColdFusion Markup Language.
| | 00:09 | It's useful to be able to jump to the
documentation without having to refer to hard copy.
| | 00:14 | There are number of ways to
get into the documentation.
| | 00:17 | You can go to the Help
menu and select Help Contents.
| | 00:20 | This opens up the
documentation in a separate window.
| | 00:23 | On Windows, you'll see it open in this
Online Help window, while on Mac, you'll
| | 00:27 | see it in a browser.
| | 00:29 | You can find the Adobe
ColdFusion 9 Documentation here and the
| | 00:32 | ColdFusion Builder Help here.
| | 00:34 | You can click into the Search box, type
a string and click Go, and you'll be able
| | 00:39 | to do a fully-indexed search.
| | 00:41 | The first time you use the search
capabilities, there will be a delay while your
| | 00:45 | Online Help is indexed.
| | 00:47 | Another way of using the
Online Help is to use Dynamic Help.
| | 00:51 | In Dynamic Help, you can place the
cursor on any known command and then go to
| | 00:56 | the menu and select Help>Dynamic Help.
| | 01:00 | To use the Dynamic Help feature
on Mac OS X, go to the menu and
| | 01:04 | select Help>Dynamic Help.
| | 01:06 | This results in opening a new view
called the Help view, over on the right.
| | 01:11 | After Dynamic Help is opened, you can
click on any command and you should see a
| | 01:15 | link to the documentation for that command.
| | 01:18 | For example, this is the
documentation for the cfset command.
| | 01:22 | I'll click the link and that
opens up the documentation.
| | 01:25 | I'll then double-click the Help tab and
that expands it to full screen, so I can
| | 01:30 | scroll through and read everything I need to.
| | 01:32 | Notice that the documentation includes
not just descriptions of what the tag
| | 01:35 | does and appropriate usage, but also
some good code samples that you can copy
| | 01:40 | and paste if you like.
| | 01:41 | To shrink the Help screen
back down, I'll double-click it.
| | 01:44 | That returns me back to the index.
| | 01:46 | I'll click on cfoutput this time,
and then click the cfoutput link
| | 01:51 | and double-click again.
| | 01:52 | So you can either use the fully indexed
complete documentation set, or if you're
| | 01:57 | looking for assistance for a
particular ColdFusion command, you can place the
| | 02:01 | cursor in the command and
use the Dynamic Help feature.
| | Collapse this transcript |
|
|
3. Understanding Data Types and Debugging ToolsAdding numbers and concatenating strings| 00:00 | As you work on your ColdFusion pages,
you'll frequently want to find out what's
| | 00:04 | going on in the background
as the page is generated.
| | 00:07 | ColdFusion has the ability
to generate debug output.
| | 00:11 | For this demonstration, I'll use a set
of pages that have already been created.
| | 00:15 | If you have access to the
Exercise Files, go to those files now.
| | 00:20 | I've placed them on my Desktop.
| | 00:23 | Go to the folder ch03debugging, and
then select and copy to the clipboard,
| | 00:29 | the debugging folder.
| | 00:31 | I'll right-click on it and copy it.
| | 00:33 | Then I'll go back to ColdFusion Builder.
| | 00:37 | I'll click on the Essential Training project.
| | 00:40 | Right-click on it and select Paste.
| | 00:44 | This is a feature of Eclipse that it's
integrated into both Windows Explorer on
| | 00:48 | Windows and Finder on Mac OS X, so that you
can freely copy and paste files back and
| | 00:54 | forth between the environments.
| | 00:57 | Now I'll go to the debugging folder,
and I'll double-click to open the
| | 01:01 | file: debugdemo.cfm.
| | 01:04 | Let's take a look at the code for this file.
| | 01:08 | I've double-clicked the tab to expand it
to full screen, so we can see all of the code.
| | 01:13 | There are a few different
kinds of variables located here.
| | 01:16 | As in the previous exercise, there are
variables called 'firstname' and 'lastname'.
| | 01:21 | This time there is also a variable
called 'fullname', which is created by
| | 01:25 | concatenating, or pushing
together, the two existing variables.
| | 01:30 | Notice that in ColdFusion Markup
Language, the concatenation operator is the
| | 01:34 | ampersand character, unlike some
languages that use the plus character for both
| | 01:39 | mathematical addition and string concatenation.
| | 01:42 | In ColdFusion Markup Language,
you will always use the ampersand.
| | 01:45 | So I am going to run the page and
let's see what the page looks like.
| | 01:49 | I'll click on my Firefox tab.
| | 01:52 | If you're working on Mac you might want
to click on the Safari Tab, and I'll see
| | 01:56 | the output of the firstname and lastname.
| | 01:59 | Now I'll go back to Source View.
| | 02:02 | And I am going to replace the
welcome message so that instead of using
| | 02:06 | the original firstname and lastname
variables, it will output the value
| | 02:09 | of variables.fullname.
| | 02:14 | I'll browse the page and this time
notice that the names are scrunched together.
| | 02:20 | Let's take a look at the code and see why.
| | 02:23 | Notice that the firstname and lastname
variables are pushed together without
| | 02:27 | any spaces in between.
| | 02:29 | So now to correct that, I'll
place the cursor after the ampersand.
| | 02:33 | I'll put in a literal space character
and then after the space, I'll put in
| | 02:38 | an another ampersand.
| | 02:40 | So now I am concatenating, or pushing
together, the firstname variable, a space,
| | 02:45 | and the lastname variable.
| | 02:47 | I'll run the page in Firefox, and show
you that the display is correct again.
| | 02:53 | Now let's take look at
the variables at the bottom.
| | 02:57 | These are numeric variables.
| | 03:00 | In ColdFusion Markup Language, the
data type of the variable isn't determined
| | 03:04 | until you try to do something with it.
| | 03:07 | So notice that the variable num1 and
num2 are set as numerics, but they're being
| | 03:13 | added together by the use of the plus operator.
| | 03:15 | I am going to add a cfoutput section.
| | 03:18 | I'll type in the begin tag cfoutput and
ColdFusion Builder will add the end tag for me.
| | 03:25 | And then, within the cfoutput tags, I'll
type in the text, 'The total is' and
| | 03:31 | then within pound signs 'variables.total'.
| | 03:36 | I'll browse the page and I'll see
that the return value is, the total is 300.
| | 03:42 | Now let's see what happens if I make a mistake.
| | 03:45 | In ColdFusion Markup Language, if you
try to use the plus operator with values
| | 03:50 | that can't be parsed as
numbers, you'll get a runtime error.
| | 03:53 | So I am going to change the value of
num2 from the value 200 as a number, to
| | 03:59 | the words two hundred.
| | 04:03 | The plus operator can only be used on
values that are parseable as numbers.
| | 04:08 | So if I run the page, I get the message the
value 200 cannot be converted to a number.
| | 04:14 | That error is useful, but it doesn't tell
me where in the code the error is occurring.
| | 04:20 | The problem that I am encountering is
that by default, ColdFusion won't report
| | 04:24 | the line numbers of particular
coding errors when you browse the page.
| | 04:29 | This is a security feature.
| | 04:31 | And on your production server you
typically want to keep this sort of
| | 04:34 | information from being seen by the user.
| | 04:38 | But here is how you can
turn that sort of debugging on.
| | 04:42 | I'll go to the Servers view, and
locate my server, designated as localhost.
| | 04:48 | I'll right-click on the Server, or Ctrl+
Click on the Mac, and select Launch Admin Page.
| | 04:54 | I'll log into the ColdFusion 9
Administrator Application and in the menu I'll
| | 05:00 | scroll down to the bottom and
click on Debugging & Logging.
| | 05:05 | And then I'll click on the
first item, Debug Output Settings.
| | 05:10 | And I'll select the option
Enable Robust Exception Information.
| | 05:14 | And click Submit Changes.
| | 05:18 | Now I'll double-click the ColdFusion
Administrator tab to shrink it back down.
| | 05:23 | I'll go back to my page and click Source
again and then click my Browser tab again.
| | 05:29 | And this time instead of just
getting the error message, I am getting the
| | 05:33 | line number where the error message
has occurred and a code sample showing me
| | 05:37 | where the error is.
| | 05:39 | So now I have much more specific
information that the error is on line 18.
| | 05:45 | I'll go back to Source view, and if you
don't see line numbers over here that
| | 05:50 | help you find the code,
you can turn them on easily.
| | 05:54 | Go to the menu and select
Window>Preferences. Go to General.
| | 06:01 | From there go to Editors. Open that tab.
| | 06:07 | Go to Text Editors and check this
option, Show line numbers. And then click OK.
| | 06:13 | Once you have turned that option on,
it should stick, that is line numbers
| | 06:17 | should always appear in ColdFusion
Builder for you as long as you're in
| | 06:20 | the current workspace.
| | 06:22 | I've already turned on that option on
my system, so I'll press Escape to close
| | 06:26 | the Preferences dialog.
| | 06:28 | The Robust Exception Handling told me
that the error was at line 18, so I'll
| | 06:33 | scroll down to that section, and sure
enough, this is where the error occurred.
| | 06:37 | But the true cause of the error was above.
| | 06:40 | I'll replace the words 'two hundred'. And
this time I am not going to take away the
| | 06:44 | quotes because I want to show you what
I was talking about, that as long as the
| | 06:48 | value is parseable as a number,
the mathematical operation will work.
| | 06:53 | I'll save the change and once
again browse the page, and this time the
| | 06:58 | mathematical operation is successful.
| | 07:00 | So you've learned a couple of
things in this demonstration.
| | 07:04 | First of all, you learned that variables
are weakly typed in ColdFusion, that is
| | 07:09 | you don't declare the specific data type,
you simply set their name and value,
| | 07:14 | and numbers that you declare with the
cfset tag are only numbers because they
| | 07:18 | are parseable as numbers.
| | 07:20 | You don't pre-declare data types in ColdFusion
Markup Language like you do in some languages.
| | 07:26 | You also learned that the plus
operator is always used as the mathematical
| | 07:30 | addition operator in ColdFusion.
| | 07:33 | The ampersand is always
used for text concatenation.
| | 07:37 | Unlike JavaScript, Java, C# and other
languages, you don't use the plus operator
| | 07:43 | for both operations.
| | 07:44 | You use ampersand for one, plus for the other.
| | 07:48 | And you learned that in order to get
good complete error information in the
| | 07:53 | browser, you should turn on the Robust
Exception Information tool, so that you
| | 07:58 | get feedback about the line number where
the error occurred and you get a hint
| | 08:02 | about the code that's being
executed when the error happens.
| | Collapse this transcript |
| Using Debug Output| 00:00 | ColdFusion provides a number of
debugging tools that you can use to inspect your
| | 00:05 | variables as you work on your ColdFusion pages.
| | 00:08 | One of the most venerable, that is the
one that's been around in the product the
| | 00:11 | longest, is called Debug Output.
| | 00:15 | This is a feature that you turn on in
the ColdFusion Administrator and then can
| | 00:19 | control on a page-by-page basis.
| | 00:22 | Let's go to the ColdFusion Administrator.
| | 00:25 | If you have the Administrator Application
already open, just double-click on the tab.
| | 00:29 | On my system it's down in the lower-right
corner, or if you don't already
| | 00:33 | have it running, right-click on the server in
the Servers view, and choose Launch Admin Page.
| | 00:38 | I'll just expand the current
application. Because it's been a while since I've
| | 00:43 | used it, I'll need to enter my password again.
| | 00:46 | In ColdFusion Administrator, you turn on
Debug Output in the Debugging & Logging
| | 00:51 | section, on the Debug Output Settings page.
| | 00:55 | This is the same page where I
have previously enabled Robust
| | 00:58 | Exception Information.
| | 00:59 | I'll go down to the third option, Enable
Request Debugging Output and I'll check that option.
| | 01:06 | Below the next section, there are a
number of options that you can choose.
| | 01:10 | For example, Report Exception Times
tells you how long it takes to execute any
| | 01:15 | particular ColdFusion page.
| | 01:17 | The General Debug Information gives
you information such as which version of
| | 01:21 | ColdFusion you're working on, the
current date and time, the user's IP address
| | 01:26 | and other technical information
about the request made to the server.
| | 01:30 | The Database Activity option
will report any SQL statements.
| | 01:36 | Go down toward the bottom
to the Variables section.
| | 01:39 | Each of these options represents a set
of variables known as a Variable Scope.
| | 01:44 | I have talked a little bit about
variable scopes when I created my first
| | 01:47 | variables in an earlier demonstration.
| | 01:50 | The variable's scope consists of those
variables that are declared on a page and
| | 01:55 | that expire when the
current page execution is done.
| | 01:58 | These options represent other
variable scopes that you might use.
| | 02:02 | For example, variables are created in
the form scope when the user submits
| | 02:07 | a data entry form, and URL variables are
passed from page to page as part of hyperlink.
| | 02:13 | I am going to de-select the Client
variables, Cookie variables and Session
| | 02:18 | variables for the moment, but I am
going to turn on Request variables and then
| | 02:23 | I'll submit the changes.
| | 02:25 | Then I'll shrink ColdFusion
Administrator back down and go back to the
| | 02:29 | file debugdemo.cfm.
| | 02:31 | I am going to run the file in an
external browser this time, so we can scroll
| | 02:35 | up and down easily.
| | 02:37 | This is what the debugging output looks like.
| | 02:40 | The Debugging Information at the top
gives you all sorts of information, such as
| | 02:44 | the current date and time.
| | 02:46 | The execution time tells you how long
the page took to execute, and the scope
| | 02:51 | variables give you the output of all of the
different variable scopes that were selected.
| | 02:56 | CGI variables, for example, are
read-only variables that tell you what's
| | 03:00 | going on the server.
| | 03:03 | The CF_TEMPLATE_PATH variable tells
you the physical location of the page you
| | 03:08 | are currently executing.
| | 03:10 | HTTP_USER_AGENT tells you
which browser the user is using.
| | 03:14 | A lot of this information in the CGI
scope can be used to determine the current
| | 03:20 | state of the user and the
current state of the page.
| | 03:24 | So that's a look at how to turn Debug
Output on, but once you've turned it on
| | 03:28 | it's sometimes useful to
suppress it for a particular page.
| | 03:32 | I'll close the browser and return to
the page. And I'll place the cursor at the
| | 03:36 | top of the page and make a little bit of space.
| | 03:40 | In order to suppress Debug Output for
the particular page, use the cfsetting tab.
| | 03:46 | I'll type in the name of the tag:
| | 03:47 | 'cfsetting' and then I'll press the Spacebar.
| | 03:51 | I'll select the showdebugoutput option
and press Enter, or Return, and then I'll
| | 03:57 | set the value of that option to false,
meaning that I don't want to see Debug
| | 04:02 | Output on this page.
| | 04:04 | I'll press Ctrl+S to save, or Command+S
on the Mac, and then I'll click the Run
| | 04:09 | button on the toolbar again. And this
time the page is displayed without the
| | 04:14 | Debug Output at the bottom.
| | 04:16 | You can choose whether to turn on Debug
Output one page at a time in this manner.
| | 04:21 | You turn it on globally at the server
level and then suppress it on the pages
| | 04:25 | where you don't want it.
| | 04:28 | Now to turn the Debug Output
back on, I'll change the value of
| | 04:31 | showdebugoutput from false to true.
| | 04:36 | Let's go back to the ColdFusion Administrator.
| | 04:41 | Open the administrator and enter
your password if it's requested.
| | 04:46 | You can also filter whether Debug
Output is seen by the user, based on the IP
| | 04:50 | address of the machine
making the request to the server.
| | 04:53 | Go to Debugging & Logging and
click on Debugging IP Addresses.
| | 04:59 | In this screen, you can click in and
type a specific IP address, or if you want
| | 05:04 | to filter with your own personal IP
address, click the Add Current button.
| | 05:09 | I am going to remove the
default IP addresses in the list.
| | 05:13 | I'll click once on 127.0.0.1 and then
I'll also remove this IP address, which is
| | 05:20 | an IPv6 address for the localhost.
| | 05:24 | If you don't have any IP addresses in
the list, that means the Debug Output
| | 05:29 | is turned on globally.
| | 05:30 | If you click Add Current though, your
individual IP address will be added.
| | 05:35 | So this means that requests from my
own local computer to my local copy of
| | 05:39 | ColdFusion will result in Debug
Output being displayed by default.
| | 05:44 | But if a request comes to my copy of
ColdFusion from somewhere else on my local
| | 05:49 | area network or the Internet, that
user's IP address will be reported as part of
| | 05:54 | the request, and they
won't see the Debug Output.
| | 05:58 | So you can filter Debug Output one
page at a time, using the cfsetting tag or
| | 06:03 | based on the user's IP address, by
making the appropriate change in the settings
| | 06:08 | in ColdFusion Administrator.
| | Collapse this transcript |
| Inspecting variables with ‹cfdump›| 00:00 | ColdFusion provides many tools
to support your debugging efforts.
| | 00:05 | One of the most valuable tools is a
part of the ColdFusion Markup Language
| | 00:08 | itself. It's called the <cfdump> tag.
| | 00:12 | You can use the <cfdump> tag to output
the value of a simple variable or of a
| | 00:16 | complex object such as an array,
a structure or a query object.
| | 00:22 | For this demonstration, I'll use the
file debugdemo.cfm, that's part of the
| | 00:28 | debugging starting files.
| | 00:30 | If you're following along in the
exercises, you can open the file now.
| | 00:33 | Or, if you're creating your own files,
just create a ColdFusion page that has
| | 00:38 | this content, creating a few
variables and outputting their values.
| | 00:43 | When I run the page in the browser, the
values of the simple variables such as
| | 00:48 | the first name and last name or of the
numeric value, 300 are output and this
| | 00:54 | is happening because the values are being
wrapped in <cfoutput> tags and pound signs.
| | 01:00 | The purpose of the <cfdump> tag is
to allow you to temporarily output the
| | 01:05 | value of a variable.
| | 01:06 | I'll demonstrate this by moving the
cursor down to the bottom of the page below
| | 01:11 | the last <cfoutput> section. And I'll
place the cursor on its own blank line.
| | 01:17 | Now I'll use the cfml tab of the toolbar,
above the editing area, to insert a <cfdump> tag.
| | 01:24 | You can do this by clicking the third
button from the left when the cfml tab is active.
| | 01:29 | I'll click the button.
| | 01:32 | Notice that the <cfdump> tag is
inserted with an attribute named var, which
| | 01:36 | stands for variable.
| | 01:38 | In order to output the value of the
variable, you pass the variable into the var
| | 01:42 | attribute wrapped in pound signs.
| | 01:44 | I'll initially demonstrate
this with a simple variable.
| | 01:48 | I'll type in variables.total.
| | 01:51 | Now I'll run the page again in the
browser and you'll see that when you use the
| | 01:56 | <cfdump> tag on a simple variable,
you're simply outputting the value.
| | 02:01 | It's no different than using the
<cfoutput> tag around the variable itself.
| | 02:06 | So, what's the use of the <cfdump> tag then?
| | 02:09 | Well the <cfdump> tag is at its most
valuable when you output a complex object,
| | 02:14 | such as a query object,
an array, or a structure.
| | 02:18 | In ColdFusion Markup Language, each
scope, such as the variable scope, is
| | 02:23 | actually something called a 'structure'.
| | 02:25 | I'll talk about the nature of
structures in another video, but stated simply at
| | 02:30 | this point, a structure is a collection
of unordered data where each value has
| | 02:35 | a string-based key.
| | 02:37 | It's like a hash map, a hash table or
an associative array in other languages.
| | 02:43 | In order to output the value of a
structure or any other complex object, you put
| | 02:48 | in a <cfdump> tag and then pass in the
name of the structure as a variable, once
| | 02:54 | again, wrapped in pound signs.
| | 02:56 | I am going to eliminate the
name of the variable and the dot.
| | 02:59 | So this time, I am outputting the
entire structure, or collection of
| | 03:04 | variables, named 'variables'.
| | 03:06 | I'll run the page in the browser and
here's the output created by the <cfdump> tag.
| | 03:13 | Each of the variables that I've created
such as FIRSTNAME, FULLNAME, LASTNAME,
| | 03:17 | NUM1, NUM2, and TOTAL are
members of the variables scope.
| | 03:23 | And because I passed the entire
variables scope into the <cfdump> tag, I see the
| | 03:27 | entire structure displayed on the screen.
| | 03:30 | Now the <cfdump> tag looks the way it looks.
| | 03:33 | You can't do anything to change its
colors or its visual presentation.
| | 03:37 | It's designed to be used as a debugging tool,
not as a part of your final application.
| | 03:43 | The <cfdump> tag has many useful attributes.
| | 03:46 | I'll show you one of them here.
| | 03:47 | I'll place the cursor in the <cfdump>
tag after the var attribute and I'll press
| | 03:52 | the Spacebar and I'll see a listing of
all of the known attributes of this tag.
| | 03:58 | I'll choose the label attribute by
moving the cursor down to that attribute and
| | 04:02 | pressing Enter or Return.
| | 04:04 | The label is a simple string that will be
displayed in the header of the cfdump output.
| | 04:09 | I'll type in a label of 'Variables' and
then I'll once again run the page, and
| | 04:17 | I'll see the same output, but the
label variables is displayed at the top.
| | 04:22 | Here's one more interesting thing to
know about the <cfdump> tag's output.
| | 04:26 | It's rendered using dynamic HTML, a
combination of HTML, Cascading Style Sheets
| | 04:32 | and JavaScript, that allows it
to react to certain mouse events.
| | 04:36 | If you click in the header of the <cfdump>
tag's output, you'll collapse that
| | 04:40 | HTML table down to a very small level
and when you click it again it expands it.
| | 04:46 | There are many other attributes
available in the <cfdump> tag and I encourage
| | 04:50 | you to look at the documentation
for the tag and try some of them out.
| | Collapse this transcript |
| Using arrays| 00:00 | So far in this video series,
I've only used simple variables.
| | 00:04 | A simple variable is a variable that
contains a single value. But I've also
| | 00:09 | mentioned that variables that you
declare in a page are placed automatically
| | 00:13 | into a structure called variables.
| | 00:15 | A structure is one kind of complex object
that's supported by ColdFusion Markup Language.
| | 00:21 | I'm going to describe a very commonly
used complex object that you can use in
| | 00:26 | ColdFusion called an array.
| | 00:28 | For this demonstration,
I'll use the file arrays.cfm.
| | 00:32 | This is basically a blank page, which
just has an HTML skeleton in it and a
| | 00:37 | title of using arrays.
| | 00:39 | If you have access to the exercise
files, you can open that file now.
| | 00:43 | An array is a collection of ordered
data, that is, as you add data to the array,
| | 00:49 | it's kept in the order in which you place it.
| | 00:51 | Different languages treat arrays differently.
| | 00:54 | One of the first questions you
always have to ask about an array in a new
| | 00:57 | programming language is, 'what is the
first index number that's assigned?'
| | 01:01 | In many languages, such as Java,
JavaScript, and C#, arrays are zero-based,
| | 01:07 | meaning that the first item has an index of 0.
| | 01:11 | In ColdFusion, arrays are one-based, so
the first item has an array index of 1.
| | 01:17 | Here's how you create an array.
| | 01:19 | I'll place the cursor within the <body>
tags and then I'll use a <cfset> command
| | 01:24 | and I'll create a new variable called
'myArray' and I'll set it to a value from a
| | 01:29 | function called 'arrayNew()'.
| | 01:32 | The arrayNew() function takes a single value.
| | 01:35 | The value is a number from 1 to 3, which
represents the number of dimensions in the array.
| | 01:40 | A simple array has one dimension.
| | 01:43 | So if you pass a value of 1 into the
arrayNew() function, you're saying that the
| | 01:47 | array contains individual values, and
each value can either be a simple value or
| | 01:53 | it can be another complex object.
| | 01:55 | If you pass in a value of 2 or 3,
you're creating a multidimensional array.
| | 02:00 | A two-dimensional array would be an
array of arrays and a three-dimensional
| | 02:05 | array would be an array of arrays of arrays.
| | 02:09 | I'm going to stick with simple
one-dimensional arrays in this demonstration.
| | 02:13 | I'm going to add items to the array.
| | 02:16 | You can add items to the array by
putting in a specific index number like
| | 02:19 | this: 'cfset myArray'.
| | 02:23 | Then I'll put in an open bracket, a
number 1, and a close bracket, and I'll set
| | 02:29 | its value to Larry.
| | 02:31 | Now I'm going to clone this line of code.
| | 02:34 | In Eclipse, you can hold down the
Ctrl and the Alt key and then press the
| | 02:38 | Down Arrow, and when you press that keyboard
shortcut, you'll make a copy of the current line.
| | 02:44 | Then I'll change the index numbers.
| | 02:46 | On the second line, I'll change it to 2
and then on the third, I'll change it to 3.
| | 02:52 | And then I'll change the values that I'm
assigning to the array items to Moe and Curley.
| | 02:57 | So now I've created my array by
explicitly assigning the index numbers.
| | 03:04 | I'll examine the contents of
the array using the <cfdump> tag.
| | 03:07 | I'll place the cursor on a new blank
line and then I'll go to the toolbar and
| | 03:11 | click the cfdump button.
| | 03:12 | That's the one that's third from the
left. And I'll output the value of myArray.
| | 03:19 | I'll browse the page in
Firefox and there's the result.
| | 03:23 | The array contains three
items numbered from 1 through 3.
| | 03:27 | This approach is fine, if you actually
want to assign the indexes explicitly.
| | 03:32 | A better approach, frequently, though is
to simply append new items to the array.
| | 03:36 | You can do this using a function
called arrayAppend, which works like this.
| | 03:42 | I'll place the cursor after the last
<cfset> command, and then I'll type in the
| | 03:46 | name of the function, 'arrayAppend'.
| | 03:51 | It takes two arguments.
| | 03:53 | The first argument is the name of the
array to which one you want to append the
| | 03:56 | value, and the second argument is the new value.
| | 04:00 | I'll type in a value of 'Shemp'.
| | 04:03 | And then I'll move the cursor to the
end of the line and I'll close the <cfset>
| | 04:07 | tag with the greater-than character.
| | 04:09 | I'll then run the page, and show you
the output of the <cfdump> tag and you can
| | 04:13 | see that you now have four items
in the array, indexed from 1 to 4.
| | 04:18 | So the arrayAppend function gives you
a very easy way to add a new item to
| | 04:22 | the end of the array.
| | 04:24 | There are many functions that
you can use to work with arrays.
| | 04:27 | Go to the Help contents. And from there
to the Adobe ColdFusion 9 Documentation,
| | 04:33 | to the CFML Reference, and from
there to ColdFusion Functions.
| | 04:38 | In this part of the documentation, there
is a listing called Functions by category.
| | 04:43 | I'll choose that item and from
there, go to Array functions.
| | 04:47 | This is a complete list of all of the
functions that you can use to work with
| | 04:51 | arrays in ColdFusion Markup Language.
| | 04:53 | I already used the ArrayNew function
to add an item to the end of the array.
| | 04:58 | There are also functions for deleting
items from the array, inserting items at
| | 05:02 | specific points in the array, and so on.
| | 05:05 | Explore the documentation so you
can see what you can do with arrays in
| | 05:09 | ColdFusion, and remember that in
ColdFusion, arrays are always one-based,
| | 05:14 | meaning that the first possible index
number is one and not zero as it is in some
| | 05:19 | other languages.
| | Collapse this transcript |
| Using structures| 00:00 | ColdFusion Markup Language, in addition
to supporting arrays, also uses a kind
| | 00:05 | of an object called a 'structure'.
| | 00:07 | A structure is an unordered collection of data.
| | 00:11 | Structures follow the same rules
as hash maps in other languages, or
| | 00:16 | associative arrays.
| | 00:17 | Each structure can contain as
many data items as you want.
| | 00:21 | Each data item has a name and a value,
and the value can either be a simple
| | 00:25 | value or another complex object.
| | 00:28 | For this demonstration, I'll use
the existing page, structures.cfm.
| | 00:32 | If you have access to the exercise
files, you can open that file now.
| | 00:36 | I'll place the cursor within the <body> tags.
| | 00:39 | There are a number of
ways of creating a structure.
| | 00:42 | The easiest though is to use
a function called 'structNew()'.
| | 00:46 | It looks like this.
| | 00:47 | I'll put it in a cfset command and I'll
name the variable myStruct and I'll set
| | 00:55 | its value from the structNew() function.
| | 00:58 | Notice that ColdFusion Builder gives
you a list of available functions.
| | 01:02 | You can type in the beginning of the
function name and then scroll to the one
| | 01:05 | you want, and press Enter to select it.
| | 01:09 | The structNew() function
doesn't take any arguments or values.
| | 01:13 | It always returns an empty collection.
| | 01:15 | Now to add items to the
collection, you can use two syntax styles.
| | 01:20 | The first I'll show you is called dot syntax.
| | 01:23 | It looks like this: cfset myStruct.
firstName equals David. And then I'll add
| | 01:32 | another item to the structure using cfset
myStruct.lastName equals and then my last name.
| | 01:42 | You can use your first and last
name if you're following along.
| | 01:46 | Now I'm going to use the <cfdump> tag to
show the contents of the structure.
| | 01:50 | I'll add a new <cfdump> tag and I'll pass
into the pound signs, 'myStruct'.
| | 01:57 | I'll browse the page in Firefox and
show the contents of the structure up at
| | 02:01 | the top of the screen.
| | 02:03 | Notice that when you assign values
using dot syntax that the names of the items
| | 02:07 | are stored in uppercase.
| | 02:09 | It doesn't matter, once again,
because ColdFusion Markup Language is case
| | 02:13 | insensitive, but it's interesting to
see how the data is stored in memory.
| | 02:17 | Now I'll go back to the code.
| | 02:18 | Here's another way of
adding an item to a structure.
| | 02:22 | You can use array style syntax using brackets
around a key as a string, looking like this.
| | 02:28 | I'll add the code, cfset myStruct.
| | 02:32 | And this time, instead of using a dot,
I'll put in a pair of brackets and then
| | 02:36 | within the brackets, I'll pass in
a literal string, the word 'city'.
| | 02:40 | I'll move the cursor past the brackets,
put in an equals sign and then assign a
| | 02:45 | value of 'Seattle', the city I live in.
| | 02:48 | I'll run the page in the browser, and
notice that the item has successfully been
| | 02:54 | added to the structure, but this time
the name of the key is stored in the case
| | 02:59 | in which I typed it.
| | 03:00 | This is an interesting difference
between dot syntax and array style syntax when
| | 03:06 | you're adding item to structures.
| | 03:08 | With dot syntax, the key is
always saved in uppercase.
| | 03:11 | With array style syntax, it's
saved in whatever case you pass it in.
| | 03:16 | This can be useful if you're using
keys that are dynamically generated from a
| | 03:20 | database or an XML file and you want
to match them and store them exactly.
| | 03:25 | So that's a look at how structures work.
| | 03:28 | Once again, a structure is an
unordered collection of data.
| | 03:31 | Each item in the structure
has a name, or a key, and a value.
| | 03:36 | The value can be a simple value, such
as these, or it can be a complex object,
| | 03:40 | such as another array or another structure.
| | 03:43 | I'll be using both arrays and
structures throughout the video series, so it's
| | 03:46 | good to know early on exactly what they
are and how you can create and use them.
| | Collapse this transcript |
| Configuring the line debugger| 00:00 | The ColdFusion Server and ColdFusion Builder
can be used together to do line by line debugging.
| | 00:06 | Debugging like this allows you to
step through code one line at a time and
| | 00:10 | inspect the current state of
variables and other objects within your
| | 00:13 | ColdFusion environment.
| | 00:16 | In order to use ColdFusion debugging,
you must turn on line debugging from
| | 00:20 | within ColdFusion Administrator and
then restart the ColdFusion Server.
| | 00:25 | In this video, I'll show
you how to make this change in
| | 00:27 | ColdFusion Administrator.
| | 00:30 | I'll go to the Servers view.
| | 00:31 | I'll right-click on my Server definition and
launch the Admin page and type in my password.
| | 00:38 | Then I'll go to the Debugging
and Logging section of the menu and
| | 00:41 | choose Debugger Settings.
| | 00:44 | I'll select the option, Allow Line
Debugging, and submit the changes.
| | 00:50 | Then I'll restart ColdFusion.
| | 00:52 | You might have some trouble
restarting ColdFusion for this purpose from
| | 00:56 | within ColdFusion Builder.
| | 00:57 | So typically, at this point, on
Windows, I'll go to the Services console.
| | 01:01 | I will open the Services console, go
to the ColdFusion 9 Application Server
| | 01:07 | service and then click the Restart button.
| | 01:11 | If you're working on a Mac, open the
ColdFusion launcher from the ColdFusion
| | 01:15 | installation directory and
restart ColdFusion from there.
| | 01:18 | Once ColdFusion has been restarted,
you'll be able to use the line debugger from
| | 01:22 | within ColdFusion Builder.
| | Collapse this transcript |
| Using the line debugger| 00:00 | Once line debugging has been enabled in
the ColdFusion Server, you can then step
| | 00:04 | through a code one line at a time,
inspect variables, and check the current state
| | 00:09 | of the content that's
being sent back to the browser.
| | 00:12 | For this demonstration, I'll
use the file linedebugger.cfm.
| | 00:17 | In this file, I'm currently setting
two variables called 'firstname' and
| | 00:20 | 'lastname' and then outputting their values.
| | 00:23 | I am going to add another
variable down at the bottom.
| | 00:26 | I'll place the cursor after the <h1>
tag set and make a new line and I'll use
| | 00:31 | the <cfset> command to create a variable
called myNumber and set it to a value of 1.
| | 00:37 | On the next line, I'll use <cfset>
again, and I'll increment the value of
| | 00:42 | myNumber by one, using a new feature
of the ColdFusion Markup Language that
| | 00:45 | allows me to put in plus plus, meaning
increment the value of my number by one.
| | 00:51 | Now I'll clone that line
of code a number of times.
| | 00:54 | I'll hold down Ctrl and Alt on Windows,
and press the Down Arrow button three times.
| | 00:59 | So I'm incrementing my number by
one each time I execute that command.
| | 01:04 | I'll place a breakpoint at line 15.
| | 01:07 | If you don't have your line
numbering turned on, do it now.
| | 01:10 | Go to the Window menu to Preferences and
follow the steps to turn line numbering on.
| | 01:15 | I'll add the breakpoint by simply
double-clicking next to the line number.
| | 01:19 | You can also set the line number by
right-clicking, or Ctrl-clicking on the Mac,
| | 01:23 | and choosing Toggle Breakpoint.
| | 01:26 | Now I'll browse the page in an external browser.
| | 01:29 | Before I do this, I will
make sure I've saved my changes.
| | 01:31 | I'll press Ctrl+S on Windows.
| | 01:34 | If you're on Mac, press Command+S.
Then go to the menu and select Run>Debug.
| | 01:40 | When the page opens in the browser,
ColdFusion gets to the line that has the
| | 01:44 | breakpoint and you'll see this
message, 'Confirm Perspective Switch'.
| | 01:48 | A perspective is a particular arrangement
of windows or views on the screen in Eclipse.
| | 01:54 | There is another perspective that
comes with ColdFusion Builder called the
| | 01:57 | ColdFusion Debugging Perspective, and
it shows all of the views and tools that
| | 02:02 | are specifically designed for line debugging.
| | 02:05 | Click Yes to open the perspective.
| | 02:07 | Notice in the editor region that code
execution has been suspended at the breakpoint.
| | 02:13 | Go up to the Variables view.
| | 02:15 | This is the first time
we've seen the Variables view.
| | 02:17 | It's designed to show the values
of variables in various scopes.
| | 02:22 | I'll click into the Variables view and
I'll expand the title a bit to so I can
| | 02:26 | see more information.
| | 02:27 | And I'll click the tree icon next to the
variable's scope and see the variables,
| | 02:31 | FIRSTNAME and LASTNAME and their values.
| | 02:35 | I'm going to step through
the code one line at a time.
| | 02:39 | Go to the Debug view, which
is in the top-left corner.
| | 02:42 | The Debug view has active buttons for
stepping into code and stepping over.
| | 02:47 | For the purpose of this page, the
two buttons would do the same thing.
| | 02:51 | I'll click Step Over and that
executes the line of code that declares my
| | 02:55 | number for the first time.
| | 02:57 | I'll go back to the Variables view
and show that that variable now exists.
| | 03:02 | Now I'll step again.
| | 03:04 | Once again, expand the Variables
view and I'll see that myNumber has been
| | 03:08 | incremented from 1 to 2.
| | 03:10 | And each time I stepped over another line,
the value of that variable will be incremented.
| | 03:15 | Here is some other tools that are
available in the debugging perspective.
| | 03:20 | The Debug Output Buffer will show
you the content of the HTML that's been
| | 03:24 | returned to the browser so far.
| | 03:27 | I'll go to the Server Output Buffer tab,
and show that when I scroll down, it
| | 03:33 | indicates that I've output the
content of the <h1> tag, but because I
| | 03:37 | haven't gotten to the end of the page, I
haven't output the end body or the end HTML task.
| | 03:42 | You can see the code that was output
and you can see a sample browser rendering
| | 03:47 | that content as well.
| | 03:49 | There's also the Breakpoints view,
which shows you your current breakpoints.
| | 03:52 | By checking or unchecking this option,
you can turn a breakpoint on or off.
| | 03:57 | And the Expressions view is a place
where you can add random expressions that
| | 04:02 | you want to output while you're debugging.
| | 04:04 | When you're done stepping through
code, go back to the Debug view, and
| | 04:08 | click the Resume button.
| | 04:10 | And that completes the page execution.
| | 04:13 | If I then go back to the browser, I'll
see that the complete contents of the
| | 04:17 | page has been returned to the
browser and rendered on the screen.
| | 04:20 | So that's a look at how to
use the ColdFusion Debugger.
| | 04:23 | Here is one very important tip.
| | 04:26 | When you're done debugging a page,
go back to the Debugging Perspective
| | 04:30 | in ColdFusion Builder.
| | 04:32 | Go to the Debug view and click the
red button. That results in terminating
| | 04:37 | the debugging session and the next time you
want to debug a page, you'll start cleanly.
| | 04:42 | You'll also want to switch back to the
ColdFusion Perspective, away from the
| | 04:46 | ColdFusion Debugging Perspective.
| | 04:48 | You can go to the menu and select
Window>Open Perspective>Other and choose
| | 04:54 | ColdFusion (default), or to do this
much more quickly, you can go to the
| | 04:59 | Perspective selector, which appears
under the toolbar and above the Debug view.
| | 05:05 | You can click the ColdFusion button and
it will take you back to the ColdFusion
| | 05:09 | Perspective, the arrangement of views
that's designed for quick code editing.
| | 05:14 | If you want to go back to debugging, click
that button, and you go back to that perspective.
| | 05:19 | So that's a look at using the
line debugger in ColdFusion Builder.
| | 05:23 | You must first enable ColdFusion line
debugging in ColdFusion Administrator and
| | 05:28 | restart the server and then you can
add break points to particular files at
| | 05:33 | particular lines, and then debug the page.
| | 05:36 | There is one other shortcut to know about here.
| | 05:39 | If you want to debug a page, you can
either go through the menu as I described
| | 05:43 | before, selecting Run>Debug, or
you can press a keyboard shortcut, or you
| | 05:49 | can click the Debug button on the toolbar.
| | 05:51 | No matter which way you do it, you'll
have complete debugging capability using
| | 05:56 | the server and the
development tool, ColdFusion Builder.
| | Collapse this transcript |
|
|
4. Working with DatabasesScripting an Apache Derby database| 00:00 | Applications that are built with
ColdFusion typically use a server site database.
| | 00:05 | ColdFusion is able to connect to many
databases, including Microsoft SQL Server,
| | 00:10 | MySQL, Oracle, and other
industry-standard databases.
| | 00:14 | When you go into the ColdFusion
Administrator and you look at the existing data
| | 00:18 | sources, you'll see that they're
built with a database called Apache Derby.
| | 00:22 | Apache Derby is a Java-based database that
can be embedded in the ColdFusion Server.
| | 00:26 | It works on Mac, Windows, and all other
operating systems that are supported by ColdFusion.
| | 00:32 | So it's a handy way of storing data for a
ColdFusion application without having to
| | 00:36 | use a larger database server product.
| | 00:39 | I'll be using a database that's
built and deployed with Apache Derby
| | 00:42 | throughout this video series.
| | 00:44 | In this video, I'll show you
how the database is scripted.
| | 00:47 | I will go to the Exercise Files
folder and go to the folder ch04databases.
| | 00:54 | From there I'll copy the databases folder.
| | 00:58 | Then I'll come back to ColdFusion
and I'll paste that folder into the
| | 01:02 | Essential Training project.
| | 01:06 | Then I'll open the folder.
| | 01:08 | There are two critical
files here that I'll be using.
| | 01:11 | The first is called CreateDatabase.cfm.
| | 01:14 | I'm jumping a little bit forward here
using some features of the ColdFusion
| | 01:17 | Markup Language that I haven't talked about.
| | 01:20 | But we're just going to create the
database with these files and I will step
| | 01:23 | back and talk about ColdFusion
components and functions later on.
| | 01:28 | In this file, I'm creating an
instance of a ColdFusion Component, or a CFC
| | 01:32 | called 'DatabaseCreator'.
| | 01:34 | Let's take a look at the code.
| | 01:37 | I'm using a function called
'createObject' and saying that I'm creating an
| | 01:40 | instance of a component named 'DatabaseCreator'.
| | 01:44 | That component is defined in this file,
DatabaseCreator.cfc, in the same folder.
| | 01:51 | In the component, I'm setting a
variable called 'this.datasource'.
| | 01:55 | The value of the data source
variable is photogallerydb.
| | 01:58 | That will be the name of a database
and a data source that I'll be defining.
| | 02:02 | Then there's a function called 'createPhoto'.
| | 02:05 | This photo calls another function called
'dropTable', which ensures that if that
| | 02:08 | table already exists, that
it's dropped from the database.
| | 02:11 | Then there's a query that creates
the table structure and sets its column
| | 02:15 | names and data types.
| | 02:18 | Then a little further below, there's
an Insert statement that adds data to
| | 02:21 | the database table.
| | 02:22 | I will show you what all the code looks
like, so that if you don't have access
| | 02:26 | to the Exercise Files, you
can create this file yourself.
| | 02:29 | At the end of the function, I return a string:
| | 02:31 | 'Photo table created'
| | 02:33 | Then there's another function called
'createPhotographer', which creates a table
| | 02:37 | called Photographer.
| | 02:38 | Once again, there's a cfquery tag set that
execute some code to create the table structure.
| | 02:43 | Then there's an insert statement that
adds four rows to the table and a cfreturn
| | 02:48 | tag that returns a string.
| | 02:49 | Finally, there's a function called
'dropTable' which receives one argument, the
| | 02:53 | name of the table we want to drop, and
then executes an SQL dropTable command
| | 02:58 | wrapped in a cftry, cfcatch section.
| | 03:01 | So that's all of the code
that's being executed in the CFC.
| | 03:04 | In the file I am going to
be running, createdatabase.cfm,
| | 03:07 | I'm calling the two functions
'createPhoto' and 'createPhotographer', and
| | 03:11 | outputting their return values to the screen.
| | 03:14 | If you have access to the Exercise
Files, you already have this code.
| | 03:17 | If you don't have access to the
Exercise Files, you can look at it on the
| | 03:21 | screen, freeze the video and type
out the code into new ColdFusion files.
| | 03:25 | In the next video, I'll use these files
to set up the database and connect to the
| | 03:30 | database from ColdFusion and ColdFusion Builder.
| | Collapse this transcript |
| Defining a data source in ColdFusion Administrator| 00:00 | You can use many industry standard
databases with your ColdFusion dynamic
| | 00:04 | website, including Microsoft SQL
Server, MySQL, Access, Oracle, and others.
| | 00:12 | Cold Fusion 9 is delivered with a
particularly useful database called Apache Derby.
| | 00:18 | Derby is a Java-based database engine
that allows you to define and embed a
| | 00:23 | database that's a part
of your ColdFusion Server.
| | 00:26 | And because it's a Cross Operating
System, that is Derby works on all of the
| | 00:30 | operating systems on which
ColdFusion works, it's particularly useful for
| | 00:34 | building small or medium sized websites
where the data isn't shared with other clients.
| | 00:40 | I'll be using a database that's built
for Apache Derby and is defined in the
| | 00:44 | databasecreator.cfc, ColdFusion component.
| | 00:48 | I'll start by creating a
ColdFusion data source through the
| | 00:51 | ColdFusion Administrator.
| | 00:53 | Then I'll come back to this file,
'create database.cfm' and run it to actually
| | 00:58 | create a database.
| | 01:01 | I'll go to the Servers view in
ColdFusion Builder and right-click on my server,
| | 01:06 | localhost, and then choose Launch Admin Page.
| | 01:10 | If you're asked for a password, enter
the password that you defined for the
| | 01:14 | administrator when you installed ColdFusion.
| | 01:17 | In the ColdFusion Administrator
application, go to the Data Sources link
| | 01:21 | under Data & Services.
| | 01:24 | You'll see a number of data sources
already created called cfartgallery,
| | 01:28 | cfbookclub and so on.
| | 01:30 | These were installed automatically with
ColdFusion if you indicate that you want
| | 01:34 | to include the documentation
during the installation process.
| | 01:38 | Notice that all of these databases are
based on Apache Derby and use a driver
| | 01:42 | called Apache Derby Embedded.
| | 01:45 | The physical databases are installed
under your ColdFusion root in this location.
| | 01:51 | I'll go to the ColdFusion 9 folder on Windows.
| | 01:54 | If you're working on Mac, you can go to
Applications/ColdFusion 9 and from there
| | 01:59 | to a sub-folder called db.
| | 02:01 | You'll see a number of folders listed there.
| | 02:04 | Each of these folders represents an
Apache Derby database, including this one,
| | 02:08 | the cfcodeexplorer.
| | 02:09 | We are going to create a new
Apache Derby database through the
| | 02:14 | ColdFusion Administrator.
| | 02:15 | I'll click into the Data Source
name, and I'll name my new data
| | 02:19 | source 'photogallerydb'.
| | 02:22 | Then, from the list of available drivers,
I'll choose Apache Derby Embedded and click Add.
| | 02:28 | The screen to create a data source
differs from one database to another.
| | 02:33 | For example, if you were creating a
data source for MySQL or SQL Server, you
| | 02:38 | would be asked for the server IP
address or name, the name of the database, the
| | 02:42 | username and the password.
| | 02:45 | For Apache Derby, it's much simpler.
| | 02:47 | You simply indicate the folder
in which the database is defined.
| | 02:50 | I am going to enter the folder
c:\ColdFusion9\db and then I'll name a folder
| | 03:00 | that doesn't yet exist, photogallerydb.
| | 03:04 | Then I'll select the option
Create Database, and I'll click Submit.
| | 03:10 | If you're working on Mac OS X,
use a similar path starting with
| | 03:14 | application\ColdFusion9\db.
| | 03:18 | But once again, name the
subfolder 'photogallerydb'.
| | 03:22 | When you return to the list of data
sources, you should see that the new
| | 03:25 | database has been created.
| | 03:27 | You should see a status of OK in this column.
| | 03:31 | If you don't see that response, you
might have some troubleshooting to do.
| | 03:34 | Now, as one additional note before I
return to building this database, I
| | 03:38 | mentioned that the process for
creating a data source differs from one
| | 03:42 | database to another.
| | 03:43 | I'll show you the screen for MySQL.
| | 03:46 | I'll create a new data source name
called 'MySQLDataSource' and I'll set the
| | 03:52 | driver to MySQL (4/5).
| | 03:57 | Then I will click Add.
| | 03:58 | So in this screen, I am asked for the
name of the database, the server, which
| | 04:03 | would be the IP address, or the host
name of the server in which MySQL is
| | 04:07 | installed, the user name, and the password.
| | 04:10 | You are also asked for a port
number and this value defaults to the
| | 04:14 | standard port for MySQL.
| | 04:17 | For all data sources, there are also
some advanced settings that you can use.
| | 04:21 | You can use these settings to manage
the data source and to limit which actions
| | 04:26 | a particular data source can be used for.
| | 04:28 | For example, if you're building a
data source and you didn't want it to be
| | 04:32 | used to create database structure and take
out the options for create, drop, and alter.
| | 04:38 | I'm not actually going to
create a MySQLDataSource here.
| | 04:42 | So, I'll cancel out of this process
and return to the Data Sources screen.
| | 04:46 | Now I'll close the ColdFusion
Administrator by clicking the X icon on the tab,
| | 04:51 | and I will return to my page, createdatabase.cfm.
| | 04:55 | In my ColdFusion component, I'm
already expecting the data source
| | 04:59 | name 'photogallerydb'.
| | 05:01 | So, now to run this page and
create the database, I'll go back to
| | 05:04 | createdatabase.cfm and I'll click one
of the browser tabs. I used Firefox.
| | 05:10 | You can use Safari or whichever other
browser tabs you have, and you should see
| | 05:14 | this output, Photo table
created, Photographer table created.
| | 05:18 | You may also see Debug options at the
bottom of the screen, if you've turned those on.
| | 05:24 | To fully test the database, I'll
take a look at the database structure
| | 05:27 | through the RDS Dataview, one of the
valuable tools that's included with
| | 05:32 | ColdFusion Builder.
| | 05:34 | The RDS Dataview screen is placed, by default,
in the upper-right corner as the second tab.
| | 05:39 | If you don't see it there, you can go
to the menu and choose Window > Show
| | 05:43 | View > RDS Dataview.
| | 05:47 | I'll go to that tab and double-click
it to expand it to full screen.
| | 05:50 | Then I'll open localhost, the name of
my server, and I should see my new data
| | 05:55 | source displayed there.
| | 05:57 | I'll open photogallerydb and then the
Tables list and I should see the two
| | 06:02 | tables that were created:
| | 06:03 | Photo and Photographer. I'll give you
more of a tour of RDS Dataview and show
| | 06:08 | you how to look at the table
structure and data through this view in a
| | 06:11 | separate video.
| | Collapse this transcript |
| Exploring data sources in RDS Dataview| 00:00 | The ColdFusion Server and ColdFusion
Builder communicate with each other over
| | 00:04 | RDS, the Remote Development Service Protocol.
| | 00:08 | This protocol was originally introduced
back in the days of HomeSite, an older
| | 00:12 | development environment built for
HTML and ColdFusion development.
| | 00:16 | RDS is also implemented in
Dreamweaver and now it's available as part
| | 00:20 | of ColdFusion Builder.
| | 00:21 | RDS allows you to explore the data
sources on your ColdFusion Server and it also
| | 00:25 | lets you see the files on your server.
| | 00:28 | RDS is typically protected by a password
but, as I've described in the tutorials
| | 00:32 | about installing ColdFusion, it's
recommended that you don't install RDS, or
| | 00:37 | activate it, when you install
ColdFusion on a production server.
| | 00:40 | When you're doing development work
however, it's incredibly valuable.
| | 00:43 | Locate the RDS Dataview.
| | 00:45 | By default, you'll find it in the
tabbed region in the upper right corner
| | 00:49 | of ColdFusion Builder.
| | 00:50 | I'll double-click the RDS
Dataview tab to expand it to full screen.
| | 00:54 | Notice that the localhost
server is already set up.
| | 00:57 | This was defined when I
defined my ColdFusion Server.
| | 01:01 | I'll expand the server and I'll see all of
the data sources that are registered there.
| | 01:05 | Here's my new database, photogallerydb.
| | 01:09 | I'll expand the database and see
that there are four items labeled:
| | 01:12 | Tables, Views, Synonyms and System Tables.
| | 01:16 | I'll expand the Tables list and here
are the two tables that I created using
| | 01:20 | my ColdFusion code:
| | 01:22 | PHOTO and PHOTOGRAPHER.
| | 01:23 | Notice that the names of
the tables are uppercase.
| | 01:26 | This is something that happens in
Apache Derby, but not in all databases.
| | 01:30 | Also notice that there's a
prefix before the table name of APP.
| | 01:34 | Once again, this is something
that's unique to Apache Derby.
| | 01:37 | In Derby, every database
table is a member of a schema.
| | 01:40 | A schema is used as a prefix.
| | 01:42 | When you'll only have a single schema
in a database, such as in this one, you
| | 01:46 | won't need to reference
the schema prefix at all.
| | 01:48 | You'll to be able to reference the
tables simply by their name for the most part.
| | 01:52 | Now, expand the structure of one of the
tables, the PHOTO table, and you'll see
| | 01:56 | that it has the five columns
that were defined in my code:
| | 01:59 | PHOTOID, FILENAME and so on.
| | 02:02 | I can also see the tables data from here.
| | 02:04 | I'll right click on the name of the table,
APP.PHOTO and choose Show Table Contents.
| | 02:10 | This takes me to another view
called the RDS Query Viewer.
| | 02:15 | The RDS Query Viewer includes an area
where you can type in your own arbitrary
| | 02:19 | SQL code and a pane at the bottom
where the resulting data is displayed.
| | 02:24 | For example, if I wanted to test out a
very simple SQL statement, I could type
| | 02:29 | in 'SELECT * FROM photo, WHERE price <= 15'.
| | 02:39 | This is a very simple SQL statement that
retrieves all data from the photo table
| | 02:43 | but only those rows where the price
column has a value that is less than or
| | 02:47 | equal to the numeric value 15.
| | 02:50 | I'll click Execute Query
and I'll see the result.
| | 02:54 | So, the RDS Query Viewer lets you test
out your SQL, try things with the SQL
| | 02:59 | and then when you feel confident that
SQL statement is correct and gives you
| | 03:03 | the results you were looking for, you can
copy the SQL command into your ColdFusion code.
| | 03:08 | Let's go back to the RDS Dataview.
| | 03:13 | Here is the other table
structure, the PHOTOGRAPHER table.
| | 03:16 | I have four columns: PHOTOGRAPHERID,
FIRSTNAME, LASTNAME, and FEATURED.
| | 03:21 | Once again, I'll right-click on the
Table and choose Show Table Contents, and it
| | 03:25 | shows me that there are four rows in
the table, each with a FIRSTNAME, a
| | 03:28 | LASTNAME, and the FEATURED column.
| | 03:31 | The FEATURED column has a
value of either zero or one.
| | 03:34 | It's used as a Boolean value so that
I can select items or not select them
| | 03:38 | depending on that value.
| | 03:39 | So let's look at the structure of
the database that we'll be working with
| | 03:43 | throughout this video series.
| | 03:44 | You can use RDS Dataview and the RDS
Query Viewer to explore your data and test
| | 03:50 | SQL code and you'll also see in
other videos that you work with the RDS
| | 03:54 | Dataviewer to generate ColdFusion code
that simplifies access to your data from
| | 04:00 | your ColdFusion pages.
| | Collapse this transcript |
| Using SQL and the ‹cfquery› tag| 00:00 | The ColdFusion Server has
traditionally provided data access through a
| | 00:04 | tag called <cfquery>.
| | 00:07 | The <cfquery> tag is wrapped around SQL
statements that are sent directly to a database server.
| | 00:12 | You can create these SQL statements as
literal strings, or as dynamically created
| | 00:17 | strings that incorporate
ColdFusion dynamic expressions.
| | 00:20 | In this demonstration, I'll use
the file retrievedata.cfm that was in
| | 00:25 | the databases folder.
| | 00:27 | As you can see on the screen, this is
just a beginning ColdFusion page without
| | 00:30 | any existing ColdFusion commands.
| | 00:33 | I'll change the title of the page
from Untitled Document to Using CFQuery.
| | 00:38 | Then I'll place the cursor up at the
top of the page and make a little bit of
| | 00:42 | space for a ColdFusion command.
| | 00:44 | When you use the <cfquery> tag, it's
common to place the query tag at the top of
| | 00:48 | the page and then the output code,
starting with the doc type declaration,
| | 00:53 | underneath the cfquery.
| | 00:55 | It doesn't technically matter where you
put the query tag as long as it's placed
| | 01:00 | before any code that references the results.
| | 01:03 | I'll create a <cfquery> tag.
| | 01:06 | The <cfquery> tag has a number of
attributes that you can use to indicate what you
| | 01:10 | want retrieve from the database.
| | 01:11 | There are two attributes
that you must use in some form.
| | 01:15 | The first is the datasource, which is
the name of the datasource as defined on
| | 01:19 | the ColdFusion Server
that points to your database.
| | 01:23 | Notice that in ColdFusion Builder when
I put in the data source attribute, it
| | 01:27 | offers a list of known data sources as
retrieved through RDS from the ColdFusion Server.
| | 01:32 | I'll choose photogallerydb.
| | 01:35 | You also need to put in a name attribute.
| | 01:37 | This is a required attribute that
represents the name of the variable that will
| | 01:41 | contain the returned data.
| | 01:43 | The data type of this
variable is a query object.
| | 01:47 | By convention, query objects are named
with a prefix of the letter Q. I'm going
| | 01:52 | to be retrieving data from the photo
table in the database, so I'll name my
| | 01:56 | return variable qPhotos.
| | 01:59 | I'll place the cursor at the end of the
line and put in the greater-than symbol
| | 02:02 | and press Enter and then if ColdFusion
Builder doesn't put it in for me, I'll
| | 02:06 | put in the end tag for cfquery.
| | 02:10 | ColdFusion Builder provides a tool that
allows you to easily build your SQL statements.
| | 02:15 | It will help you fill in the names of
the tables and the columns accurately.
| | 02:19 | It's called the SQL editor.
| | 02:22 | To use this tool, place the cursor
between the <cfquery> tags, then right click, or
| | 02:27 | Ctrl+Click on Mac, and choose SQL Editor.
| | 02:31 | In the SQL Editor screen, make sure
that you're connected to your server, in
| | 02:35 | this case the name of my ColdFusion
Server is localhost and the datasource
| | 02:39 | you want to work with.
| | 02:40 | Notice that you can select any datasource.
| | 02:43 | Then place the cursor in the Editor screen.
| | 02:47 | Type in the word 'SELECT'.
| | 02:49 | The SELECT keyword means that you
are retrieving data from the database.
| | 02:53 | Then in the word FROM, and then when
you press the Spacebar, you'll see a list
| | 02:58 | of known tables that are
available to ColdFusion.
| | 03:02 | You'll see the application tables
PHOTO and PHOTOGRAPHER at the top and then
| | 03:06 | System tables listed below. Choose PHOTO.
| | 03:10 | Now you're going to fill in
the names of certain columns.
| | 03:13 | Place the cursor before the
word FROM and press Enter.
| | 03:16 | Then place the cursor back on the
previous line after the word SELECT, but after
| | 03:20 | the space and press Ctrl+Space.
| | 03:23 | That will bring up a list containing
both the name of the table, PHOTO, and also
| | 03:28 | the names of all the columns of that table.
| | 03:31 | Choose the following values:
| | 03:32 | first the CAPTION, then put in a comma,
and a space, you'll see column list again,
| | 03:38 | then the FILEANAME, put another
comma and a space and then the PRICE.
| | 03:44 | I'm going to put in an ORDER BY clause, which
causes the data to be sorted in a certain order.
| | 03:48 | I'll place the cursor at the end of
the statement and type in 'ORDER BY' and
| | 03:52 | then a space and once again I see the
column list and I'll choose CAPTION.
| | 03:57 | Then I'll put in another space and then
manually type in the term 'DESC' for descending.
| | 04:05 | This is now a well-formed SQL
statement that retrieves three columns from the
| | 04:09 | photo table and sorts the
data by a particular column.
| | 04:13 | I'll click OK and that results in placing
the SQL statement inside the <cfquery> tag.
| | 04:20 | I'll place the cursor before the
Select statement, which landed on the same
| | 04:23 | line as the beginning <cfquery> tag and just
for readability, move it down to its own line.
| | 04:28 | The <cfquery> tag is now complete.
| | 04:31 | To test the <cfquery> tag, I
will use the debugging tag <cfdump>.
| | 04:37 | The <cfdump> tag is used to output the
contents of a complex object, such as a
| | 04:41 | query object onto the screen.
| | 04:44 | You typically place it in the
output section of your HTML page.
| | 04:48 | So, I'll place the cursor between the <body>
tags and then I'll put in the <cfdump> tag.
| | 04:53 | The <cfdump> tag contains many
attributes that you can use to output
| | 04:57 | debugging information.
| | 04:58 | I'll use the one required attribute, the
var attribute, for variable, and then in
| | 05:03 | order to indicate that I want to
output the value of the qPhotos object, I'll
| | 05:08 | put in a pair of pound signs and
the name of the variable, 'qPhotos'.
| | 05:13 | That's all of the code.
| | 05:14 | At the top of the page I have my
CFQuery with an SQL statement and at the
| | 05:18 | bottom a <cfdump> tag.
| | 05:20 | I'll run the page in the
browser and there's a result.
| | 05:24 | The output of the
retrieved data in an HTML table.
| | 05:29 | This HTML table is dynamic.
| | 05:31 | It's set up so you can click on the
header and collapse it if you want or
| | 05:35 | re-expand it and the <cfdump> tag has
many attributes that you can use to
| | 05:39 | control the output.
| | 05:41 | The <cfdump> tag is meant for debugging only.
| | 05:44 | It's not designed for use in a
production application, but it's only there to
| | 05:48 | help you inspect your complex data
within your pages as you do your development.
| | 05:54 | So that's we'll look at the
<cfquery> tag and the <cfdump> tag.
| | 05:58 | I'll show you one more
trick before I finish this demo.
| | 06:01 | In ColdFusion 9, there are many new
functions that you can use instead of
| | 06:05 | certain ColdFusion tags.
| | 06:07 | The <cfdump> tag has a new
function equivalent called writeDump.
| | 06:11 | You can use it like this.
| | 06:13 | I'll create a cfscript section and
within the cfscript section, I'll call
| | 06:20 | writeDump and pass in qPhotos.
| | 06:24 | Then I'll select the
<cfdump> tag and comment it out.
| | 06:28 | After selecting the code, I'll go to
the cfml tab of the toolbar. And I'll click
| | 06:33 | the Comment icon and then I'll test the
page in the browser again and you'll see
| | 06:39 | exactly the same result.
| | 06:40 | So, whether you're working in
traditional tag-based ColdFusion Markup Language
| | 06:45 | or you're working with the newer
Scripting Syntax, either way you can use the
| | 06:50 | dump functionality to output the
contents of a complex object to the screen, so
| | 06:54 | you can see the data while
you're doing your development.
| | Collapse this transcript |
| Outputting data from a query object| 00:00 | Once you've retrieved data from the
server-side database with the cfquery tag,
| | 00:04 | you can then use the cfoutput tag to
loop through the data set and output its
| | 00:08 | contents one row at a time.
| | 00:11 | For this demonstration, I will use
the file outputdata.cfm that's a part of
| | 00:15 | the Exercise Files.
| | 00:18 | In its beginning state, this page
has a cfquery tag set with a simple SQL
| | 00:23 | statement that retrieves data from
one database table, the PHOTO table.
| | 00:27 | In the body section, there's currently a cfdump
tag that outputs the raw data in an HTML table.
| | 00:34 | I'm going to delete the cfdump tag and
replace it with my own custom output code.
| | 00:40 | I'll start off with the cfoutput tag.
| | 00:42 | I'll type in the beginning of the
tag and then press the Spacebar.
| | 00:46 | Notice that the cfoutput
tag has a query attribute.
| | 00:50 | I'll select the query attribute and
then ColdFusion Builder scans your page and
| | 00:54 | looks for any queries that might be available.
| | 00:56 | It only finds one, so it adds that query
name to the cfoutput tag automatically.
| | 01:02 | If there were more than one query available,
you'd be able to choose the one you wanted.
| | 01:06 | Notice that when you add the query name
into the query attribute, you don't wrap
| | 01:10 | it in pound signs in the
context of the cfoutput tag.
| | 01:13 | Now, I'll close the starting tag with
a greater-than character and ColdFusion
| | 01:17 | Builder automatically completes the end tag.
| | 01:20 | Within the cfoutput tag I'm
going to create a pair of divs.
| | 01:24 | Using a div tag around the dynamic
output will allow me to create one HTML row
| | 01:29 | of data for each row of
data in the query object.
| | 01:32 | Within the div tag, I'll output the Caption
and the Price for the current photo, like this.
| | 01:37 | I will put in a pound sign and then the name
of the query, qPhotos, and then the name
| | 01:43 | of the column that I want to
output in this context, the caption.
| | 01:47 | After the name of the column, caption,
I'll put in the closing pound sign, then
| | 01:51 | a space and then a pair of parentheses.
| | 01:53 | I'm going to put the price for the
current photo within the parenthesis.
| | 01:57 | I'll a place the cursor within the
parentheses and put in a pound sign.
| | 02:00 | Then once again the name of the
query and the name of the column, Price.
| | 02:05 | I'll close up my code, so that it's
nice and clean, and then I'll preview the
| | 02:09 | page in the browser and show you
that I am successfully outputting the
| | 02:12 | information from the database.
| | 02:14 | Notice that the data is in the order
that I requested, in descending order
| | 02:18 | from top to bottom.
| | 02:20 | I'm going to add one more feature here.
| | 02:22 | The price is being
output as a raw numeric value.
| | 02:25 | There are a number of ways in
ColdFusion of formatting that numeric value so
| | 02:29 | that it's easier to read for the user.
| | 02:31 | In this example, I want to format
the numeric value as a money value.
| | 02:35 | There is a very simple
function in ColdFusion Markup Language
| | 02:38 | called 'dollarFormat'.
| | 02:39 | I'll wrap the value of the
price inside that function.
| | 02:42 | I'll place the cursor after the beginning
pound sign and type in the name of the
| | 02:47 | function, 'dollarFormat', and then
I'll move to the end of the price column
| | 02:52 | before the closing pound sign,
and put in the closing parenthesis.
| | 02:56 | Notice that the pound signs
wrap the entire dynamic expression.
| | 03:00 | The function dollarFormat and the value,
which is represented by qPhotos.price.
| | 03:06 | I'll preview the page in the browser
again, and now you'll see that the price is
| | 03:10 | represented in dollaFormat, which means
that there's a dollar sign before the
| | 03:14 | number and two digits after the decimal.
| | 03:17 | I'll do one more bit of
formatting to finish up this exercise.
| | 03:20 | I'll select the expression that
outputs the caption of the photo record.
| | 03:25 | Then I'll go to the html tab on the
toolbar and I'll click the Bold button and
| | 03:30 | that means that I'm
wrapping that code with B tags.
| | 03:33 | I'll, once again, preview the
results and you'll see the result that the
| | 03:37 | caption is formatted in the Bold font
and the price is formatted as a dollar
| | 03:42 | value in a normal font.
| | 03:44 | So that's a look at how to use the
cfoutput tag with the query attribute to loop
| | 03:49 | through the data and display one row at a time.
| | 03:51 | The cfoutput tag also supports other
attributes that allow you to limit the
| | 03:55 | number of rows you're outputting
and where to start in the results.
| | 03:59 | We'll explore those tools in other videos.
| | Collapse this transcript |
| Outputting a dynamic HTML table from a query| 00:00 | It's very common to present dynamic
data using an HTML table and there's a
| | 00:05 | particular technique that ColdFusion
developers frequently use to generate
| | 00:09 | dynamic tables and populate those
tables with data from a query object.
| | 00:14 | For this demonstration, I'll use the
file dynamictable.cfm from the databases
| | 00:19 | folder of the Essential Training project.
| | 00:22 | In the beginning version of this file, I
have a cfquery tag that retrieves three
| | 00:26 | columns from the PHOTO table.
| | 00:29 | The three columns are
FILEANAME, CAPTION and PRICE.
| | 00:32 | At the bottom of the page, there is a
cfoutput tagset that loops through the
| | 00:37 | query object, qPhotos, and
outputs the data one row at a time.
| | 00:42 | When I run the page in the browser, I
see the data displayed with the caption in
| | 00:46 | bold and the price formatted as a dollar value.
| | 00:50 | I'm going to change this output so
that it comes out as an HTML table.
| | 00:55 | To define the table, I'll be using
snippets that I defined in a previous
| | 00:59 | video of this series.
| | 01:00 | I created snippets for the table tag,
the tr and a td tag, and I'll use all of
| | 01:06 | those snippets to create the code.
| | 01:08 | I'll place the cursor inside the
body tag but above the existing cfoutput
| | 01:13 | block and I'll expand the Editor to
Full-Screen by pressing Ctrl+M on Windows
| | 01:19 | or Command+M on Mac.
| | 01:21 | Now, I'm going to create an HTML table.
| | 01:23 | I'll start off by typing in the
word 'table' and then I'll press the
| | 01:27 | Snippets keyboard shortcut.
| | 01:28 | Ctrl+J on Windows, or Command+J on Mac,
and that will expand the keyword table
| | 01:34 | to the full snippet, a pair of table tags.
| | 01:38 | Then I'll press Enter a couple times,
and now, I'll create a table row.
| | 01:42 | I'll type in 'tr', a snippet shortcut
and then press the snippets keyboard
| | 01:46 | shortcut, Ctrl+J or Command+J and that
will expand that code and then finally
| | 01:53 | I'll create a th tagset.
| | 01:55 | I don't have a snippet for that, so I'll
just type in a beginning and an end tag.
| | 01:59 | The th tag in HTML creates a header cell.
| | 02:03 | It's able to look the same as a data
cell, but because it has a different name,
| | 02:07 | it makes it possible to attach
different Cascading Style Sheet rules to it.
| | 02:12 | Within the th tags, I'll type in some
literal text that I want to appear at
| | 02:16 | the top of the column.
| | 02:18 | I'll type the word 'Caption'.
| | 02:20 | Next, I'll clone the current line of
code by pressing the keyboard shortcut for
| | 02:24 | cloning, Ctrl+Alt+Down Arrow on Windows,
or Command+Option+Down Arrow on Mac.
| | 02:32 | I'll clone that line of code twice.
| | 02:36 | Then I'll change the string for the
second column to File name and for the
| | 02:40 | third column to Price.
| | 02:43 | You can type any literal string
into the header that you want.
| | 02:48 | Now, I'm going to create another table row.
| | 02:50 | I'll move the cursor after the
existing table row, and make a blank row.
| | 02:54 | I'll type in 'tr' and then press the
snippets keyboard shortcut and press Enter
| | 02:59 | a couple times to make some
space and now, I'll create a td tag.
| | 03:03 | I'll type 'td' and press the snippets
keyboard shortcut and that expands the
| | 03:08 | shortcut string to the full snippet and
now I'm going to output the value of the
| | 03:13 | Caption column from the query object.
| | 03:16 | I'll type in a pair of pound signs
and within the pound signs, I'll type in
| | 03:20 | the name of the query object,
'qPhotos' and notice that after I type the
| | 03:24 | period and wait a moment, I see a
list of the available columns and other
| | 03:28 | properties of the query object.
| | 03:31 | I'll select CAPTION.
| | 03:32 | So that code represents a single column's value.
| | 03:36 | Now, I will clone that line of code twice.
| | 03:38 | I'll press Ctrl+Alt+Down on Windows,
or Command+Option+Down on Mac, twice.
| | 03:44 | Then I'll change the
columns that I'm outputting.
| | 03:46 | For the second column, I'll delete the
word CAPTION, then press Ctrl+Space to
| | 03:51 | bring up a list of available
columns and I'll choose FILENAME.
| | 03:55 | Then I'll do the same thing,
deleting the word 'CAPTION', pressing
| | 03:59 | Ctrl+Space and choosing PRICE.
| | 04:03 | Finally, just like I did when
outputting the data, one line at a time, I'll use
| | 04:07 | the dollarFormat function to format the price.
| | 04:10 | I'll place the cursor
after the beginning pound sign.
| | 04:14 | I'll type in the word 'dollar' and
then press Ctrl+Space, and that results in
| | 04:19 | expanding the code to the
full function dollarFormat.
| | 04:23 | Notice the ColdFusion Builder
puts in both a beginning and an
| | 04:26 | ending parenthesis.
| | 04:27 | I'll press the Delete key to delete the
ending parenthesis, then move the cursor
| | 04:31 | after the column name and put it back in.
| | 04:34 | The final step is to create a cfoutput loop.
| | 04:38 | That is a cfoutput tagset with a query
attribute that will loop over the data
| | 04:43 | and generate one table row for
each data item in the query object.
| | 04:48 | Just as I did when outputting the data
one line at a time, I'll place the cursor
| | 04:52 | before the content that I want to repeat.
| | 04:55 | I'll place the cursor after the first
tr tagset, but before the second and then
| | 05:00 | I'll add a cfoutput tag set with a
query attribute set to qPhotos.
| | 05:06 | I'll close the opening cfoutput
tag with a greater-than symbol.
| | 05:10 | Then move the cursor after the second tr
tagset and put in the ending tag for cfoutput.
| | 05:17 | So that's the complete code to
output data in an HTML table.
| | 05:22 | You loop over the second tr tagset to
generate one row of data for each item in the query.
| | 05:28 | Now, on this page I no longer need
the second cfoutput tagset, the one that
| | 05:33 | outputs the data one line at a time.
| | 05:35 | So, I'll Select and Delete it
and there is my complete page.
| | 05:40 | I'll test the page in the Browser by
clicking on the Browser tab at the bottom
| | 05:44 | and there is the data generated by ColdFusion.
| | 05:48 | Now, I would like to show you what the code
looks like that's returned to the browser.
| | 05:52 | So, this time I'll run the page in an
external browser by clicking the Run
| | 05:56 | button at the top of the Editor window and
then I'll use the browser to view the source.
| | 06:01 | For Firefox, you can right-click on the
page anywhere and select View Page Source.
| | 06:07 | And here's the result.
| | 06:09 | The tr tag with the ths is returned
exactly as it's written because it's not
| | 06:14 | inside a cfoutput tag block, but these
rows are generated dynamically by the
| | 06:19 | cfoutput tagset, looping over the query
object and outputting each column where
| | 06:25 | I indicate, using the ColdFusion expressions.
| | 06:28 | So that's a look at how to build the HTML table.
| | 06:31 | Notice that the formatting of the
table is controlled by these style tags.
| | 06:36 | These style tags were already in place
when I started with this page and if you
| | 06:40 | have access to the Exercise Files,
you won't have to type them yourself.
| | 06:44 | If you're creating this page from
scratch, you can easily add this style tagset
| | 06:48 | to the head section of your page and
then the table will look the same as mine
| | 06:53 | with one header row and then multiple
data rows that are generated from the
| | 06:57 | ColdFusion query object.
| | Collapse this transcript |
| Generating alternating row colors| 00:00 | One of the most common visual tasks
that developers want to accomplish in a
| | 00:04 | website is to present an HTML
table using alternating row colors.
| | 00:09 | There is a little bit of math
involved in doing this in ColdFusion.
| | 00:12 | It's fairly simple and I'll
demonstrate how to do it in this video.
| | 00:15 | I'll start with the file alternatingcolors.cfm
in the Databases folder of the project.
| | 00:21 | If you have access to the
Exercise Files, this file is available.
| | 00:25 | In the current version of the file,
there's a cfquery tag up at the top of the page.
| | 00:30 | Then there's a set of styles that
control the appearance of the table and then
| | 00:34 | down below, there's a dynamic table
with a cfoutput tag set around the second
| | 00:40 | table row that loops through the query data and
presents one HTML table row for each data row.
| | 00:47 | When I run the page in a
browser, it looks like this.
| | 00:49 | I'd like to change the presentation so
that only the even-numbered rows, that is
| | 00:54 | rows 2, 4, 6, and so on, are
presenting the background color.
| | 00:58 | And the odd-numbered rows, that is 1, 3, 5,
and so on, all still have the white background.
| | 01:04 | Here are the tools that you'll use for this.
| | 01:06 | I'll go back to the Source code and double-click
its tab to take it to full screen.
| | 01:11 | As you loop through a query, the
query object will have a property called
| | 01:15 | Current Row, which reports the
current row numbers starting with 1.
| | 01:19 | I will also use a mathematical
operator called mod, which stands for modulus.
| | 01:24 | If you remember back to your high
school algebra, the modulus operator lets you
| | 01:28 | do an integer division
and returns the remainder.
| | 01:31 | I am going to execute the mod operator
against the current row and the number 2.
| | 01:35 | For odd-numbered rows, that will
return a value of 1, which translates
| | 01:39 | in ColdFusion to true.
| | 01:41 | And for even numbered rows, that will
return a value of 0, which translates in
| | 01:45 | ColdFusion to a value a false.
| | 01:47 | I'll place the cursor inside the
cfoutput tag and I am going to use a new set of
| | 01:52 | tags that we haven't seen
before, called the cfif tags.
| | 01:56 | They look like this, cfif, and then
I'll pass in an expression that can be
| | 02:02 | evaluated is either true or false.
| | 02:05 | What's known in
programming as a Boolean expression.
| | 02:08 | Here's the expression I'll use:
| | 02:10 | qPhotos.currentRow mod 2.
| | 02:16 | Now again, the mod
keyword is the modulus operator.
| | 02:19 | I am executing an integer division
of the current row against the number 2.
| | 02:24 | Odd-numbered rows will return a remainder of 1,
even-numbered rows will Return a remainder of 0.
| | 02:30 | So if this expression is true,
it means I'm on an odd row.
| | 02:33 | Then I'll put in a cfelse tag.
| | 02:36 | The cfelse tag follows the cfif and
it gives you a place to put code if the
| | 02:42 | opposite condition is true.
| | 02:44 | And then I'll close that
clause with an end cfif tag.
| | 02:48 | Notice that when I place the cursor on a
new line and typed in the lessthan and
| | 02:52 | the slash, ColdFusion Builder auto-completed
the end tag for cfif for me.
| | 02:58 | Notice that cfelse does not have an end tag.
| | 03:01 | So now I have my conditional logic
set up, but what am I going to with it?
| | 03:07 | Well, I like using Cascading Style
Sheets wherever I can, to affect visual
| | 03:12 | appearance and presentation on my page.
| | 03:14 | So I will go back up to my Style
section, right around lines 14 to 28.
| | 03:20 | I'll place the cursor after the last
selector, the table tag selector, and press Enter.
| | 03:26 | ColdFusion Builder gives me a
list of known CSS selectors.
| | 03:30 | I am not going to use any of those
though, I'm going to create my own
| | 03:33 | CSS classes like this.
| | 03:35 | I'll type in a dot, and then I'll
create a CSS class name called '.oddRow', and
| | 03:42 | then right below that, I'll
create another one called '.evenRow'.
| | 03:50 | Now I have two places to put CSS rules
for the two kinds of rows, odd rows and
| | 03:55 | even rows, to allow myself to create
the alternating colors and presentation.
| | 04:00 | I'm only going to set one CSS style in each.
| | 04:03 | It'll be the background color style.
| | 04:06 | First, I'll type in the beginning of
the property name background-color, colon,
| | 04:10 | and then I'll select it from the list.
| | 04:12 | After the colon, ColdFusion Builder
will try to automatically fill it in.
| | 04:16 | That may or may not happen on your
system, but I'll backspace over the selected
| | 04:21 | color, leaving just the colon.
| | 04:24 | Then I'll go to ColdFusion Builder's
CSS tab and I'll click the first button on
| | 04:28 | the toolbar, which brings up a color selector.
| | 04:31 | I'll choose the color selector I want,
which in this case is white, and click OK
| | 04:36 | and that fills in the
hexadecimal color that I'm looking for.
| | 04:41 | I'll choose the background-color, put
in the colon, and this time ColdFusion
| | 04:45 | Builder offers me a list of colors.
| | 04:47 | So here's the pattern it's following.
| | 04:49 | If it only sees one existing color in the
style sheet, it fills it in automatically.
| | 04:54 | If it sees more than one,
it presents them in a list.
| | 04:57 | I'm going to select the first one.
| | 05:00 | This time it will be
EEEEEE, which is light grey.
| | 05:04 | So I've now defined the two
colors for the odd and even rows.
| | 05:08 | I'll go back to my table output code.
| | 05:11 | Within the conditional block that
I already declared, I'll create a
| | 05:14 | variable called rowstyle.
| | 05:15 | If the current row mod 2 comes out
true, that means I'm on an odd row.
| | 05:20 | So I'll say 'cfset rowstyle = "oddRow"'.
| | 05:27 | And in the cfelse section, I'll declare
the variable again, but this time I'll
| | 05:31 | set it to a value of evenRow.
| | 05:34 | So the variable will exist but
it'll have one of two values:
| | 05:37 | odd row or even row.
| | 05:39 | When you do this make sure that the
value that you assign here matches the name
| | 05:44 | of the style that you
declared in the Style section.
| | 05:47 | Now I'll come back down to my cfoutput tag.
| | 05:50 | I'll go to the tr tag and I'll add a
class declaration, which is filled in from
| | 05:55 | the ColdFusion variable, variables.rowstyle.
| | 06:01 | That will be translated to runtime as
the page is being generated to one of
| | 06:05 | these two values, odd row or even row.
| | 06:08 | I'll preview the page and there is
the result, alternating row colors.
| | 06:12 | In this exercise, I haven't done much
to make the table look really great.
| | 06:17 | My goal is to show you the
mechanics of creating this alternating
| | 06:20 | colors presentation.
| | 06:21 | But using these principles, and
perhaps a better graphic design then I have
| | 06:25 | here, you can use ColdFusion to create
any sort of visual presentation you like.
| | 06:30 | Here are the new things
you learned in this video.
| | 06:32 | You learned how to create a conditional
block using the cfif, cfelse and cfif end tags.
| | 06:38 | You learned how to use Cascading
Style Sheets in a dynamic fashion and you
| | 06:43 | learned a little bit more about
ColdFusion Builder's code editing capabilities,
| | 06:47 | that it knows how to handle CSS to
some extent and can help you fill in the
| | 06:51 | names of CSS properties and their values.
| | Collapse this transcript |
| Creating an application directory and home page| 00:00 | So far in this video series, I've
focused on small parts of ColdFusion, both how
| | 00:05 | to install and manage the ColdFusion
server, and the fundamental elements of the
| | 00:09 | ColdFusion Markup Language.
| | 00:11 | Now it's time to start applying
these tools to a full website.
| | 00:15 | If you have access to the Exercise Files,
you'll find a set of files there in a
| | 00:19 | folder called applicationBegin.
| | 00:22 | These files constitute a
template for a static website.
| | 00:26 | Let's take a look at the files one at a time.
| | 00:29 | First, there is a styles.css file, a
Cascading Style Sheets external file in the
| | 00:35 | root folder of the project.
| | 00:36 | Here's the content of that file.
| | 00:38 | You'll see a number of CSS tag selectors that
control the overall appearance of the website.
| | 00:45 | Then further down, a number of ID
selectors that control specific elements of
| | 00:50 | the web presentation.
| | 00:51 | There are ID selectors for a main div tag, a
header, a navbar, a content div, and a footer.
| | 01:00 | Then at the bottom of the file, there are a
few selectors to control the look of the table.
| | 01:04 | Notice that as in the previous exercise,
I've prepared style selectors for two
| | 01:09 | classes called oddrow and evenrow
that we'll be able to use for alternating
| | 01:13 | row color presentation.
| | 01:15 | So that's the styles.css file.
| | 01:17 | Now let's take a look at some other files.
| | 01:20 | In the imageSource folder,
there is a file called banner.png.
| | 01:24 | This is a Fireworks PNG file that
was used to create the look of a banner
| | 01:28 | graphic that will appear at
the top of the website page.
| | 01:31 | This graphic is not designed
for deployment on a website.
| | 01:34 | It's far too large for that.
| | 01:36 | There is a readme file in that
folder that explains that condition.
| | 01:40 | I'll go back up to the
application folder to the images folder.
| | 01:44 | In the images folder, you'll find two
graphics, a background.jpg and a banner.jpg.
| | 01:51 | The banner.jpg is the flattened graphic file
created from the Fireworks file I showed already.
| | 01:56 | The background.jpg is a gradient
color graphic that will be used as the
| | 02:01 | website background.
| | 02:03 | Then in the gallery folder,
there are a number of photos.
| | 02:07 | These photos will be presented dynamically
in the website based on the database contents.
| | 02:14 | Finally, in the home folder of
the application, there is a file
| | 02:17 | called default.htm.
| | 02:20 | This is the template for the website's homepage.
| | 02:22 | You'll see that it's made up
of nested div tags with IDs.
| | 02:26 | The presentation of this page is
determined by the external style sheet file
| | 02:30 | referenced in this link tag right up here.
| | 02:33 | So that's what this static website is made of.
| | 02:36 | Let's take a look at in a browser.
| | 02:39 | I'll double-click the default.htm file and
it will open in my preferred browser, Firefox.
| | 02:45 | This is what the page looks like.
| | 02:47 | Here is the banner graphic at the top,
the navbar div tag right below it, and
| | 02:53 | then the content area down at the bottom.
| | 02:55 | In this demonstration, I'm going to
take these files and turn them into
| | 02:58 | a ColdFusion project.
| | 03:00 | It takes just a few steps.
| | 03:03 | Go back up to the applicationBegin
folder and leave that folder selected in
| | 03:07 | Windows Explorer or on Finder on the Mac.
| | 03:10 | Then go back to ColdFusion Builder.
| | 03:12 | Next, I'll create a new ColdFusion project.
| | 03:15 | I'll select File>New>ColdFusion Project.
| | 03:20 | I'll name the project, 'Photo Gallery'.
| | 03:26 | I'll deselect the Use Default Location
option and browse and I'll navigate to my
| | 03:32 | ColdFusion installation folder.
| | 03:33 | That's C:\ColdFusion9 on Window,
or /applications/ColdFusion9 on Mac.
| | 03:41 | Then I'll go to the wwwroot folder,
and there I'll make a new folder
| | 03:45 | called 'photogallery'.
| | 03:49 | I'll select that folder and click Next.
| | 03:52 | Next, I'll associate the new project
with my ColdFusion9 server, which I've
| | 03:56 | named 'localhost', meaning that it's the
ColdFusion server on my local system.
| | 04:01 | Take a look at the sample URL that's
generated by ColdFusion Builder. That's it.
| | 04:05 | Now just click Finish and
that will create a new project.
| | 04:10 | Now I'm going to copy and paste the
files from the applicationBegin folder
| | 04:14 | into the project folder.
| | 04:16 | Go back to Windows Explorer on Windows
or Finder on Mac, and select all of the
| | 04:20 | files in that folder and
then copy them to the clipboard.
| | 04:25 | Then go back to ColdFusion Builder, right-click
on the project folder and select Paste.
| | 04:31 | Then expand the folder and
you should see the files there.
| | 04:34 | Now to change this from a static
website into a ColdFusion website, go to the
| | 04:40 | home directory and locate the file default.htm.
| | 04:44 | Don't open it quite yet, just
right-click on it, or Ctrl+Click on Mac, and select
| | 04:49 | Rename and name the file
'index.cfm', and click OK.
| | 04:56 | Now open the file, and then using the
toolbar, click the Run button to run the
| | 05:02 | document in your ColdFusion server.
| | 05:04 | It should look exactly the same as it
did when it opened as a static HTML file,
| | 05:08 | because right now all of its contents
are being passed directly through from
| | 05:12 | ColdFusion to the browser.
| | 05:14 | You now have a beginning ColdFusion
website and our job throughout the rest of
| | 05:19 | video series will be to add
functionality to make this a dynamic website with
| | 05:23 | lots of great compelling features.
| | Collapse this transcript |
| Displaying data on the home page| 00:00 | On the homepage of the sample
website, I'm going to present
| | 00:03 | one photographer's work.
| | 00:05 | I'll select the photographer
based on the database contents.
| | 00:08 | The basic layout of the site is already done.
| | 00:11 | So it's up to me to add ColdFusion code,
cfquery tags, and output code to make this happen.
| | 00:18 | I'll go to ColdFusion Builder and open
the index.cfm file from the home folder,
| | 00:24 | and then I'll go over to the RDS Dataview.
| | 00:27 | If you don't see RDS Dataview, go to the
menu and choose Window>Show View>RDS Dataview.
| | 00:35 | In the RDS Dataview,
locate the PHOTOGRAPHER table.
| | 00:39 | Right-click on it, or Ctrl+Click on
Mac, and choose Show Table Contents.
| | 00:45 | It has a column named 'Featured',
whose value is either a 0 or 1.
| | 00:49 | Only one of the rows has a value of 1.
| | 00:51 | That's the photographer whose
work we're going to feature.
| | 00:53 | We're going to write the code so that
if you want to change which photographer
| | 00:58 | is featured, you'll just need to
change the values in the Featured column of
| | 01:02 | the database table.
| | 01:03 | Go to the index.cfm file, and I'll open
it up to full screen so you can see as
| | 01:08 | much code as possible.
| | 01:09 | Place the cursor at the top of the code
and press Enter, or Return, a couple of times.
| | 01:14 | Next, create a cfquery tag set.
| | 01:17 | When you press the Spacebar after the
cfquery tag is entered, you'll see a list
| | 01:20 | of the attributes of the cfquery tag.
| | 01:23 | Scroll down and choose datasource.
| | 01:25 | Wait a moment and you'll see a list of
all of the data sources for the current
| | 01:28 | ColdFusion server displayed.
| | 01:30 | Choose photogallerydb.
| | 01:32 | Next, set the name attribute.
| | 01:34 | This query will be designed to
retrieve a single photographer's name.
| | 01:38 | Set the name as qPhotographer.
| | 01:43 | Complete the beginning tag and
ColdFusion Builder will add the end tag.
| | 01:47 | Then add the following SQL into
the cfquery tag set, "SELECT * FROM
| | 01:53 | Photographer WHERE featured = 1",
the asterisk means all columns from the
| | 02:00 | table, Photographer is the name of the
table, featured is the column name and 1
| | 02:06 | is the value we're looking for.
| | 02:08 | Now, I'll move the cursor down
below the h2 tag set that has the text,
| | 02:12 | 'Photographer name here'.
| | 02:14 | I'll create a cfdump tag with the
var attribute set to qPhotographer.
| | 02:24 | I'll preview the page in the
browser and there is the resulting data.
| | 02:28 | I've received a single row from the
PHOTOGRAPHER table where the Featured
| | 02:32 | column has a value of 1.
| | 02:34 | Here's how I'll use that value.
| | 02:35 | I'll go back to the source code and
I'll go to the h2 tag set, where I have the
| | 02:41 | text 'Photographer name here'.
| | 02:44 | I'll delete that text and replace it with
dynamic expressions drawing data from the query.
| | 02:50 | Now this time, I don't have to loop
through the query, because there's only one row.
| | 02:53 | So, I'll type in a pound sign, then,
qPhotographer.Firstname, then a space, and
| | 03:00 | then another pound sign, and
then qPhotographer.Lastname.
| | 03:05 | If I try to preview the page at this
point, I won't get the right results.
| | 03:09 | Take a look up here.
| | 03:11 | Notice that I haven't wrapped
that code with cfoutput tags.
| | 03:15 | So ColdFusion doesn't know that
it's supposed to interpret those as
| | 03:19 | dynamic expressions.
| | 03:21 | So I'll go back to the source.
| | 03:23 | I'll select the entire h2 tag set and
then I'll go up to the CFML toolbar in the
| | 03:29 | Editor region and I'll choose Wrap in cfoutput.
| | 03:34 | I'll preview the page again,
and there is the result.
| | 03:37 | The name of my featured photographer
has been placed on the page correctly.
| | 03:41 | Now, here's how I'm going to use information
from that query to execute a secondary query.
| | 03:47 | I'll go back up to the top of the page and
I'll place the cursor after the first cfquery tag.
| | 03:53 | The cfquery tag set lets you add
variables, dynamic expressions into the SQL.
| | 03:58 | So I'll create another cfquery,
set the data source once again to
| | 04:03 | photogallerydb, and this time
I'll set the name to qPhotos.
| | 04:12 | Within the cfquery tag set,
I'll put in a SELECT statement.
| | 04:16 | This time, I'll get the data from the
PHOTO table, but I'll filter based on the
| | 04:20 | Photo table's Photographer ID column,
like this, photographerid =, and then I'll
| | 04:27 | pass in the photographerid from the
first query, using a set of pound signs, and
| | 04:33 | then within the pound signs,
qPhotographer, and then the primary key value of
| | 04:41 | the photographer who was
selected in the first query.
| | 04:44 | I'll go back down to the code
that's being output to the screen.
| | 04:47 | In the cfdump tag, I'll change the
name of the query that I'm dumping to the
| | 04:52 | screen from qPhotographer to qPhotos.
| | 04:56 | So there's all the code.
| | 04:58 | I first query for the particular
photographer who I want to feature, and then I
| | 05:02 | execute a secondary query to go
get the associated photo records.
| | 05:07 | I'll preview the page in the
browser, and there is the result.
| | 05:10 | Your page might look a little different
than mine, depending on whether you have
| | 05:14 | Debug Output turned on.
| | 05:15 | When I ran the page, I did
not have Debug turned on.
| | 05:18 | If you've followed all of the steps throughout
this video series, you might have it turned on.
| | 05:22 | So you'll see a lot more
information at the bottom of the page.
| | 05:25 | From this point, to complete the page,
you want to replace the cfdump tag set
| | 05:30 | with a dynamic HTML table.
| | 05:32 | You can use the alternating row color
styles that have already been declared in
| | 05:36 | this website to create a
nice visual presentation.
| | 05:40 | I'll finish those steps in a later video.
| | Collapse this transcript |
| Redirecting requests with ‹cflocation›| 00:00 | All programming languages used in
dynamic web applications such as ColdFusion
| | 00:04 | Markup Language, PHP or the languages
used in asp.net have the ability to send
| | 00:10 | redirect commands from
the server to the browser.
| | 00:13 | A redirect command tells the browser
essentially, that it's on the wrong page and
| | 00:17 | it needs to load a different page.
| | 00:20 | In ColdFusion Markup Language, this
functionality is in a tag called cflocation.
| | 00:25 | You set the cflocation tag with the URL
and the URL is the location and name of
| | 00:30 | the page to which you
want to redirect the browser.
| | 00:33 | In my website, I've created the
homepage in a special directory called Home and
| | 00:38 | I'm going to be creating other pages in
the website in their own subdirectories
| | 00:42 | of the webpage root.
| | 00:43 | But I want to handle the scenario that
will occur, if the user tries to navigate
| | 00:48 | to the root folder of my website.
| | 00:51 | To demonstrate the problem, I'll go to
index.cfm in the homepage and I'll run
| | 00:57 | the page in an external browser.
| | 01:00 | Notice that because I started from the
page in ColdFusion Builder, the browser
| | 01:04 | gets the correct URL to get to that page,
and if the user navigates to the home
| | 01:09 | directory without adding index.cfm that
will work fine too because index.cfm is
| | 01:15 | the default page for all of
my ColdFusion directories.
| | 01:19 | But what happens if the user
navigates instead to the website root folder?
| | 01:23 | Well, let's try it.
| | 01:25 | I'll change the URL for the web browser
to simply the Photo Gallery folder and I
| | 01:30 | get a listing of the
files that are in the folder.
| | 01:33 | In a production site, it's more likely
that you'd get an error, because on a
| | 01:37 | production website you typically
don't allow users to browse your
| | 01:40 | directory contents.
| | 01:42 | Here's how I'm going to fix this.
| | 01:43 | I'll close the browser and
go back to ColdFusion Builder.
| | 01:48 | Then I'll go to the Photo Gallery folder and
create a new ColdFusion page named index.cfm.
| | 01:55 | I'll right-click on the folder name
and select New > ColdFusion Page and I'll
| | 02:01 | name the new page 'index'.
| | 02:03 | ColdFusion Builder will add the .cfm
extension for me and then I'll click Finish.
| | 02:09 | I'm going to remove all of the
contents of the page because the user is never
| | 02:14 | going to see that page and I'll replace
all that code with a single ColdFusion
| | 02:18 | tag, the cflocation tag.
| | 02:21 | I'll set the URL attribute of the
cflocation tag to home/index.cfm.
| | 02:28 | So now if the user tries to navigate
to the home directory of my website,
| | 02:33 | they'll be redirected to the true
homepage which is in the Home subfolder.
| | 02:38 | I'll load the index.cfm file into an
external browser and you'll see that
| | 02:42 | instead of trying to browse that empty
page, the browser is redirected to the
| | 02:46 | version in the home directory.
| | 02:48 | There are two good effects from this.
| | 02:49 | One is you're handling the
natural behavior of the user.
| | 02:53 | They are typically
inclined to go to the directory.
| | 02:56 | They don't know the page name and they
don't know what the subdirectories are.
| | 03:00 | So you're taking what they'll normally
do and putting them in the right place.
| | 03:04 | The other benefit is that you're
preventing errors from occurring.
| | 03:08 | By creating a file called index.cfm,
the default page name, in the home
| | 03:13 | directory you're preventing the user from
seeing a listing of the pages in that directory.
| | 03:18 | No matter how the web server is set up.
| | 03:20 | If I trim off the name of the page and
the name of the directory from the end of
| | 03:24 | the URL, leaving in just the Photo
Gallery directory - that's the home directory
| | 03:30 | - and I press Enter or Return, I
once again end up at the true homepage.
| | 03:34 | So that's a quick look at the cflocation tag.
| | 03:37 | I'll be using the cflocation tag quite
a bit in other parts of the website to
| | 03:41 | handle not just errors or behavior on
the part of the user, but also to control
| | 03:46 | the workflow as you'd start dealing
with more complex ColdFusion pages.
| | Collapse this transcript |
|
|
5. Using Includes and Custom TagsIncluding pages with ‹cfinclude›| 00:00 | One of the advantages of working in a
dynamic application environment, such as
| | 00:04 | ColdFusion, is that you can create a
consistent look and feel across all of the
| | 00:09 | pages of your dynamic website.
| | 00:10 | ColdFusion includes many tools for
this, such as the cfinclude tag.
| | 00:16 | The purpose of the cfinclude is
to serve as a server-side include.
| | 00:20 | When you execute a cfinclude tag, you
retrieve some content from another file
| | 00:25 | on the server's disc and include
it at that point in the parent page.
| | 00:29 | For the exercises in this chapter, I'll
start with a very simple file that I've
| | 00:34 | already created in the exercise files folder.
| | 00:36 | I will go to the exercise files
folder and I'll go from there to the
| | 00:40 | ch05includesandtags folder and I will
select and copy to the clipboard the
| | 00:46 | includesandtags folder.
| | 00:50 | Now I will go to ColdFusion Builder
and I will select the Essential Training
| | 00:54 | project, and I will right-click on
it, or Ctrl+ Click on Mac, and paste the
| | 00:59 | folder into the project.
| | 01:01 | This new folder contains just one
simple text file called loremipsum.txt.
| | 01:07 | Its contents include a div tag with
some cascading style sheets embedded and
| | 01:12 | some loremipsum text.
| | 01:14 | Lorem ipsum text is a Latin phrase
that you can put into a website or a
| | 01:19 | publication as placeholder text.
| | 01:22 | So this is the text file that I'm going
to include in another ColdFusion page.
| | 01:28 | Now I am going to create a new ColdFusion
page in the includesandtags directory.
| | 01:32 | I will right-click on the includesandtags
directory and select New > Cold Fusion page.
| | 01:38 | I will name this new page usingincludes.cfm.
| | 01:44 | I will set the title of the page to
Using Includes and then I will place the
| | 01:50 | cursor between the body tags. I'll go to
the HTML tab of the tool bar and click the
| | 01:56 | h1 tag set. And with the cursor
between the tags, I will once again output the
| | 02:02 | value using includes.
| | 02:03 | When I browse the page I see just the heading1.
| | 02:09 | Now, I will go back to the source.
| | 02:11 | A cfinclude tag should be placed at
the point in the page where you want to
| | 02:14 | include the other content.
| | 02:16 | Notice that the file that I'm including is
a txt file not a cfm file and that's okay.
| | 02:22 | As long as the file that you are
including is a text file it can be included
| | 02:26 | successfully from a ColdFusion page and
ColdFusion will even respect and execute
| | 02:31 | any ColdFusion commands that you have
in the file, even if it's not a cfm file.
| | 02:35 | I will place the cursor after the
h1 tags and type in 'cfinclude'.
| | 02:41 | The cfinclude tag has one
required attribute, the template.
| | 02:45 | You can set the template name to either
just the filename, if the included file
| | 02:49 | is in the current directory, or you can
use a relative address using dot dots, dots
| | 02:54 | and slashes to walk up and
down the directory tree as needed.
| | 02:58 | In this case, the file that I'm
going to include is in the same folder.
| | 03:01 | So I will just type in its name - loremipsum.txt.
| | 03:05 | Then I'll close the cfinclude tag
with the closing greater than symbol.
| | 03:09 | Now I'll run the page in the browser,
clicking the browser tab at the bottom and
| | 03:13 | there is the result.
| | 03:14 | When the page is delivered back to the
browser, it consists of the main page
| | 03:19 | plus any included content.
| | 03:21 | To see the full effect of this, I'll
run the page in an external browser and
| | 03:26 | then I'll view the source that's
returned to the browser and you'll see that
| | 03:30 | the content in the included file has
become a part of the page that's delivered
| | 03:34 | back to the browser.
| | 03:35 | cfincludes are a very simple way
of creating and using reusable code.
| | 03:41 | You can use includes whenever you
want to include common texts such as the
| | 03:44 | loremipsum text I'm using here.
| | 03:46 | Navigational bars, commonly
used graphics or any HTML text.
| | 03:52 | There are some limitations to
include model that you should know about.
| | 03:55 | For example, if you declare a
variable in the parent page, that variable is
| | 03:59 | visible in the included page and if
you reset or modify that variable in the
| | 04:04 | included page, you are really
modifying the version in the parent page.
| | 04:08 | So includes are not a highly structured
programming approach, instead they are a
| | 04:12 | way of including simple basic text,
HTML markup and any other content that you
| | 04:18 | want to reuse in your website
| | Collapse this transcript |
| Creating reusable header and footer files with ‹cfinclude›| 00:00 | One common use of includes is to
create header and footer files that you can
| | 00:04 | include at the top and bottom
of multiple webpages in a site.
| | 00:08 | In this demonstration, I will work
with the photo gallery application.
| | 00:11 | If you've been working through the
entire video training series so far, you will
| | 00:15 | have these files in their current
state as I'm showing them on my screen.
| | 00:18 | You will have an index.cfm file in the root
folder and another one in the home folder.
| | 00:24 | If you don't have those files, but you
have access to the exercise files that
| | 00:28 | come with the video series, you can
find the application in this current state
| | 00:32 | in the ch05includesandtags
folder, under applicationBegin.
| | 00:37 | Create the application and copy these
files and directories into place and
| | 00:41 | make sure that you have set up the
database and data source as described in
| | 00:45 | a previous chapter.
| | 00:46 | I'm going to create a header and
footer file and I'm going to place these
| | 00:50 | files in a separate folder of the
application called 'includes'. I'll start at
| | 00:55 | the Photo Gallery project.
| | 00:56 | I will right-click on the project, or
Ctrl+click on Mac, and choose New > Folder and
| | 01:03 | I will name the folder 'includes'.
| | 01:06 | Now I'll go to the index.cfm file in
the home directory and I'll double click
| | 01:11 | the tab to expand it to full screen.
| | 01:13 | I am going to select all of
the content beginning with the doc type
| | 01:18 | declaration at line 8 and extending
all the way down to the beginning div tag
| | 01:23 | with an ID of content.
| | 01:26 | So I will place my cursor before the
doc type declaration, then I will hold
| | 01:29 | down the Shift key and click after the start
tag and then I'll cut that code to the clipboard.
| | 01:36 | Now I'm going to create a new file.
| | 01:39 | I'll double click on index.cfm
to restore to its original size.
| | 01:44 | I'll go to the includes folder
in the Photo Gallery application.
| | 01:47 | Right-click on it or Ctrl+Click
cfincludeon Mac and select new file.
| | 01:51 | I will name the new file header.cfm.
| | 01:56 | Now I'm going to paste the code that I
cut from index.cfm into this new file.
| | 02:02 | I pressed Ctrl+V. On Mac you can press
Command+V. Now I'll save that file by
| | 02:07 | pressing Ctrl+S or Command S on Mac.
| | 02:10 | I will go back to index.cfm.
| | 02:13 | I'll place the cursor back in the
location where I originally cut the code
| | 02:16 | from and then I'll add a cfinclude
tag and I will set the template attribute
| | 02:22 | to the following value:
| | 02:23 | ../includes/header.cfm,
and I will close the tag.
| | 02:30 | So now instead of including that header
content in every page, I'm using a
| | 02:35 | cfinclude, a server-side include command.
| | 02:38 | To test this, I will preview this
page in a browser and you'll see that it
| | 02:42 | looks exactly the same as it did
before with the banner, the navigational bar
| | 02:47 | and the dynamic content.
| | 02:49 | The banner graphic and Nav bar
are a part of the header file.
| | 02:53 | The headline, the photographer name and
the photo's data are part of the main page.
| | 02:58 | Now I am going to do the
same thing with the footer.
| | 03:00 | I will go back to source, and I
will scroll down toward the bottom.
| | 03:05 | I'm going to select everything starting
with the ending div tag at line 15 down
| | 03:10 | to the bottom of the page.
| | 03:12 | The ending div tag matches the start
div tag for the content section and I'll
| | 03:16 | cut that to the clipboard.
| | 03:18 | I pressed Ctrl+X. You can press
Command+X, if you are working on Mac.
| | 03:23 | Now I'll create another new
file in the includes folder.
| | 03:26 | I will right-click on includes and
choose new ColdFusion page and I will name
| | 03:31 | this page 'footer.cfm'.
| | 03:34 | I'll select all of the code in the new
file, delete it and then press Ctrl+V,
| | 03:39 | or Command V on Mac.
| | 03:41 | So this is now the ending content for the page.
| | 03:43 | I'll save that change by pressing Ctrl+S, or
Command+S on Mac, I'll go back to index.cfm.
| | 03:50 | Now I'm going to select the first
| | 03:51 | cfinclude tag, copy it to the clipboard
and then go down to the bottom of the file
| | 03:58 | and paste it in, and I'll change the
name of the file that I am including at
| | 04:02 | this point from header.cfm to footer.cfm.
| | 04:07 | I'll save the changes and this time
I'll test the page in an external browser.
| | 04:12 | Once again the page looks exactly the
same as it did before, but now I'm pulling
| | 04:16 | the header and footer from separate files.
| | 04:18 | Later on if I need to change the menu,
or if I need to add content to the
| | 04:22 | footer, I can do that easily by
modifying the header and footer files.
| | 04:27 | I won't need to make any changes
to the main pages of the website.
| | 04:30 | So that's how you can use
| | 04:31 | cfincludes to create a properly
structured website with reusable code for the
| | 04:36 | header and footer sections.
| | Collapse this transcript |
| Creating and calling custom tags| 00:00 | After mastering the use of the
CFInclude tag, the next step in both complexity
| | 00:05 | and power is to move to the use of custom tags.
| | 00:08 | A custom tag is a file with a .cfm
extension just like a basic ColdFusion page,
| | 00:14 | but it's different in that you call
it using special custom tag syntax.
| | 00:19 | To demonstrate this, I'll
use the loremipsum.txt file.
| | 00:24 | I'll open the file and then I'll press
Ctrl+A ,or Command+A on Mac, and then copy
| | 00:29 | that text to the clipboard.
| | 00:31 | Then I'll create a brand new file, and
I'm going to give it a .cfm extension.
| | 00:37 | I'll right-click on the
includesandtags folder and I'll choose
| | 00:41 | New>ColdFusion Page.
| | 00:43 | Notice that there isn't any
special selection for custom tags.
| | 00:47 | In terms of their file content and
their file names, custom tags look exactly
| | 00:52 | the same as basic pages.
| | 00:54 | I'll name the file 'mycustomtag.cfm'.
| | 01:00 | Now, I'm going to strip out all of the
HTML code that was added automatically,
| | 01:04 | and then paste in the HTML and
text from the loremipsum file.
| | 01:09 | And I'll save the file.
| | 01:10 | Now, I'm going to create
another page to call this custom tag.
| | 01:14 | I'll once again go to
the includesandtags folder.
| | 01:17 | I'll right-click and I'll
select New>ColdFusion Page.
| | 01:21 | I'll name this file 'callcustomtag.cfm'.
| | 01:26 | I'll set the title of the
page to 'Calling a custom tag'.
| | 01:33 | Then I'll place the
cursor between the body tags.
| | 01:36 | I'll add an h1 tag set and between
the h1 tag sets, I'll once again type in
| | 01:43 | 'Calling a custom tag'.
| | 01:46 | In order to call the custom
tag, use the following syntax.
| | 01:50 | Just like a built-in ColdFusion tag,
you start off with a less-than character, then cf, and then to
| | 01:56 | indicate that you're calling a custom
tag you add an underscore character.
| | 02:00 | Then you follow that with the name
of the tag without the .cfm extension.
| | 02:05 | In this case, it's mycustomtag.
| | 02:07 | Then you close the tag with a
closing greater than character.
| | 02:11 | Make sure you don't add an extra slash,
as is the custom in some ColdFusion tags.
| | 02:16 | If you do that, you'll end
up calling the tag twice.
| | 02:19 | I'll eliminate that slash, and then I'll
test the page previewing it in a browser.
| | 02:24 | There's the result.
| | 02:26 | The content of the custom tag is
returned as part of the containing page.
| | 02:31 | If I look at the page in an external
browser, I can then view the source
| | 02:36 | and there is the result, just like what
happened when I used the cfinclude architecture.
| | 02:41 | When you call a custom tag, the
tag's contents are returned as a part of
| | 02:45 | the containing page.
| | 02:47 | The important thing here is the
placement of the custom tag call.
| | 02:51 | Remember that ColdFusion
pages execute from top to bottom.
| | 02:54 | So wherever you place the custom tag
call is where the content of the tag will
| | 02:58 | be returned to the
browser in the containing page.
| | 03:01 | There are other approaches to
calling the same custom tag.
| | 03:04 | I'll show you those other
strategies in separate videos.
| | Collapse this transcript |
| Passing data into custom tags| 00:00 | One of the advantages of the custom
tag architecture over simple includes is
| | 00:04 | that they're designed to allow you
to define and pass custom attributes.
| | 00:09 | Tags have attributes, that is
values that modify their behavior.
| | 00:14 | HTML and ColdFusion tags typically
support these attribute already, and you can
| | 00:18 | design your own custom tags
to receive these attributes.
| | 00:21 | In this demonstration, I'll use the custom
tag that I created in the previous video.
| | 00:26 | If you haven't gone through that
exercise, you might want to do that first.
| | 00:30 | I'll go to the custom tag and I'm
going to design it to expect a particular
| | 00:35 | attribute to be passed in.
| | 00:37 | The particular attribute
will be the width attribute.
| | 00:40 | Notice that in its current state, the
custom tag displays text in a div tag,
| | 00:44 | which is always 300 pixels wide.
| | 00:46 | I'm going to change this code, so that
instead of assuming that it's 300 pixels,
| | 00:51 | it uses a value that's passed in.
| | 00:53 | When you pass a value into a custom
tag as an attribute, it's a variable in
| | 00:57 | the attribute's scope.
| | 00:59 | This scope is unique to
the custom tag architecture.
| | 01:02 | I'll place the cursor right after
the number 300 and delete it, then I'll
| | 01:06 | replace that with '#attributes.width#'.
| | 01:11 | Then in order to output this dynamic
value, I'll select the entire div tag, and
| | 01:19 | then I'll go up to the cfml tab of
the toolbar and I'll click the little
| | 01:23 | Terminal icon to wrap that
code inside cfoutput tags.
| | 01:28 | There's the result.
| | 01:29 | Now the custom tags width style will
be set based on a value that's passed in
| | 01:34 | from the calling page.
| | 01:36 | I'll save that change and then go to
the calling page, callcustomtag.cfm.
| | 01:42 | In the custom tag attribute, I can now
pass in the name of the attribute that's
| | 01:46 | expected by the tag, typing in a
width, and then an appropriate value.
| | 01:52 | I'll change it from 300 to 500.
| | 01:55 | I'll save the change and I'll run the
page this time in an external browser.
| | 02:00 | Notice that the tag now is displayed in
500 pixels width instead of its original 300.
| | 02:07 | To show that this is working correctly,
I'll select the first call to the custom
| | 02:11 | tag, copy it to the clipboard, and
then paste it in a couple of times.
| | 02:17 | I'll display the custom tag's content
with different widths, 500 pixels, 300
| | 02:23 | pixels and 700 pixels.
| | 02:25 | I'll preview the page in a browser, and
there is the result, the same content,
| | 02:30 | but modified by how values are
passed in from the calling page.
| | Collapse this transcript |
| Setting default values for custom tag attributes| 00:00 | When you create a custom tag that's
expecting an attribute, you have to do a
| | 00:04 | little bit of extra work to make
sure that the attribute is passed in.
| | 00:07 | In the current version of the custom tag,
the code simply assumes that the width
| | 00:11 | attribute will be available, but if
you try to call this custom tag and you
| | 00:16 | don't pass in the width
attribute, something bad will happen.
| | 00:19 | I'll go back to the callcustomtag.cfm file
that I've been working on and look at its source.
| | 00:25 | In the last call to the custom tag,
I'll eliminate the width attribute.
| | 00:30 | Now watch what happens when I
preview the page in the browser.
| | 00:34 | I'll get a big, old error.
| | 00:35 | Element WIDTH is undefined in ATTRIBUTES.
| | 00:39 | And of course, this is because
I've simply added the code to expect
| | 00:43 | the attribute to exist.
| | 00:44 | Here's how you can fix this issue.
| | 00:47 | I'll go back to the custom tag code.
| | 00:49 | I'll place the cursor right at the
beginning of the code and make a little bit
| | 00:54 | of extra blank space.
| | 00:55 | Now I'm going to use a tag called <cfparam>.
| | 00:59 | It works like this.
| | 01:00 | I'll say <cfparam> and I'll give it a name.
| | 01:04 | The name is the full name of the
attribute that you're expecting, including the
| | 01:09 | prefix, attributes.width.
| | 01:12 | To establish a default value for the
attribute, set the default property to a
| | 01:18 | value that you want, and I'll put it in as 300.
| | 01:21 | Now, here's the logic.
| | 01:23 | If the page that's calling the custom
tag passes in this named attribute, that's
| | 01:27 | the value that will be received, but if
the calling page doesn't pass in a value
| | 01:31 | for this named attribute, the named
attribute will exist and it will have the
| | 01:35 | default value, in this case, 300.
| | 01:37 | I'll save those changes and go back to
the calling page and preview the page again.
| | 01:43 | Now, the last call to the custom tag
doesn't pass in the value and so the
| | 01:48 | default setting takes over.
| | 01:50 | Both the second and the third
instances of the custom tag are 300 pixels.
| | 01:56 | The second, because the width was
passed in with that value, and the third,
| | 02:00 | because the width attribute wasn't
passed in at all, but the custom tag has
| | 02:05 | the default setting.
| | 02:06 | There's one other very useful thing you
can do with the <cfparam> tag and that's
| | 02:10 | to set an expected data type.
| | 02:12 | I am going to expand this code to
full-screen so we can see all of it, and I'll
| | 02:16 | add a type attribute and
I'll set its value to numeric.
| | 02:21 | Because of how I'm using this value,
that is I'm placing it before the px unit
| | 02:26 | of measurement in the CSS declaration,
the value must be numeric in order for it
| | 02:31 | to make sense to the Cascading Style Sheet code.
| | 02:33 | By setting the type attribute, you are
enforcing data type parsing as the value
| | 02:38 | is passed into the code.
| | 02:40 | Now, I'll save that change and go back
to the calling page, and in the third
| | 02:45 | call to my custom tag, I'll set the
width property to a value that cannot be
| | 02:49 | parsed as a number, a simple string of xyz.
| | 02:53 | I'll save the change and I'll preview
it in a browser and you'll see the error
| | 02:58 | message appear, 'Invalid parameter type'.
| | 03:01 | The value cannot be converted to a
numeric because it is not a simple value.
| | 03:05 | It's really saying, "I tried to parse
it as a number and I wasn't able to."
| | 03:09 | So by adding the type attribute to
your custom tag code, you can ensure not
| | 03:14 | just that the value is passed in, but also
when it's passed in that the type is correct.
| | 03:20 | Now I'll go back to callcustomtag and
show you the third scenario, which is that
| | 03:25 | I'm requiring a particular type, but
I've set a default value and so that's the
| | 03:30 | value that will take over.
| | 03:32 | Once again, I'll run the
page and now it works again.
| | 03:35 | So those are the basics of creating custom tags.
| | 03:39 | To review, each value that you pass
into a custom tag is received as a variable
| | 03:44 | in the attribute's scope.
| | 03:46 | The attribute scope is unique
to the custom tag architecture in
| | 03:49 | ColdFusion Markup Language.
| | 03:51 | It's not used anywhere else.
| | 03:53 | When you refer to a member of the
attribute scope, you'll use the entire prefix
| | 03:57 | dot and the variable name.
| | 04:00 | If you want to output that value to the
browser as I'm doing here, you wrap it
| | 04:04 | in pound signs and you wrap the
entire section of code in cfoutput text.
| | 04:09 | You can use the <cfparam> tag to make
sure that the value is passed in or to set
| | 04:13 | a default value if you want to use that
approach, and you can use the <cfparam>
| | 04:18 | text type attribute to indicate that
you're expecting a value that can be parsed
| | 04:23 | as a particular data type.
| | 04:24 | Remember that data types are not built
into the language, in the sense that a
| | 04:29 | variable is a simple variable.
| | 04:31 | It's not intrinsically numeric, or
a string, or a Boolean, or a date.
| | 04:36 | What matters is whether it can be
parsed as that value at runtime and the
| | 04:40 | <cfparam> tag lets you dictate what
type you're expecting and it serves to
| | 04:45 | output a useful error to you, the
programmer, if you use your own custom
| | 04:49 | tag incorrectly.
| | Collapse this transcript |
| Calling custom tags with ‹cfmodule›| 00:00 | ColdFusion Markup Language provides
multiple approaches to calling custom tags,
| | 00:06 | the simplest approach, the use of the
cf_syntax that I've already demonstrated.
| | 00:12 | The cf_syntax, which is sometimes
called the simple custom tag syntax, assumes
| | 00:17 | that the tag file is one
of a number of locations.
| | 00:20 | ColdFusion first looks for the
custom tag file in the current directory.
| | 00:24 | If it doesn't find it there, it then
looks in a folder called CustomTags, which
| | 00:29 | is always inside the
ColdFusion installation folder.
| | 00:33 | If you navigate to the folder,
C:\ColdFusion9 on Windows, or
| | 00:38 | /applications/ColdFusion9 on Mac,
you'll see the CustomTags folder there, and
| | 00:43 | you can place your custom tags in that
folder or in any subdirectory of that
| | 00:47 | folder, and the simple syntax,
cf underscore and the name of the file will find it.
| | 00:53 | But sometimes you want to be much more
specific about the custom tag location.
| | 00:57 | When you need this functionality,
ColdFusion Markup Language provides
| | 01:01 | the <cfmodule> tag.
| | 01:02 | <cfmodule> is similar to <cfinclude>.
| | 01:05 | It has the same template attribute
that lets you specify which tag you are
| | 01:09 | calling, but unlike <cfinclude>, it lets
you pass in attributes to your custom tags.
| | 01:15 | To demonstrate this, I'll make a copy
of the existing custom tag, but place it
| | 01:20 | in a different location.
| | 01:21 | I'll go the includesandintags folder and
I'll right-click on it, and create a new
| | 01:28 | folder, and I'll name the folder customtags.
| | 01:32 | Now, I'll go to mycustomtag.cfm, the
custom tag I've already created, and I'll
| | 01:38 | copy it to the clipboard.
| | 01:40 | Then I'll go to my new folder and
paste it in, and I'll open the new version.
| | 01:46 | Now to distinguish these tags from
each other, I'll change the text.
| | 01:51 | This one, just like the original one, has
the Lorem ipsum text between the <div> tags.
| | 01:56 | I'll select that text and delete it,
and then I'll replace it with a simple
| | 02:01 | string of, 'From the customtags
folder', and then I'll save those changes.
| | 02:08 | So I have two versions of the tag:
| | 02:10 | one in the includesandtags
folder and one in its sub-folder.
| | 02:13 | Now I'll create a new page
in the includesandtags folder.
| | 02:17 | The key here is that the parent document is
in one folder, the custom tag is in another.
| | 02:24 | I'll create a new ColdFusion page
and I'll name it, 'usingcfmodule.cfm'.
| | 02:30 | I'll change the title to Using CFModule.
| | 02:34 | Then I'll copy that text and
paste it between a pair of <h1> tags.
| | 02:42 | Here's the syntax for calling that
custom tag from a different directory.
| | 02:47 | I'll add the <cfmodule> tag and
I'll assign a template attribute.
| | 02:51 | The template can be any relative address.
| | 02:54 | So for example, I can say,
'template="customtags/mycustomtag.cfm"'.
| | 03:03 | In this context, you do include the
.cfm file extension, just like you would
| | 03:08 | with the <cfinclude> tag.
| | 03:10 | I'll browse the page and show the
result and you'll see that you're calling the
| | 03:14 | custom tag from that folder.
| | 03:18 | And then, I'll also show you that
you can pass in your custom attributes.
| | 03:22 | I'll pass in the width and set it to
700, and that will be interpreted in the
| | 03:27 | custom tag as part of the CSS
declaration and here's the result.
| | 03:33 | Now my <div> tag is 700 pixels wide and
I'll run the page in an external browser
| | 03:38 | to see the full effect.
| | 03:40 | So that's a brief look at
how to use the <cfmodule> tag.
| | 03:43 | The template attribute lets you specify
a tag by its relative location and then
| | 03:47 | you can pass in custom attributes as
needed to modify the behavior of the
| | 03:52 | custom tag.
| | Collapse this transcript |
| Using a custom tag as a website header| 00:00 | In previous videos, I've showed you
how to use includes and custom tags to
| | 00:04 | define and reuse code.
| | 00:07 | Now, I'm going to go back to my
application, the Photo Gallery, and I'm going to
| | 00:11 | replace the <cfinclude> tag for
header.cfm, with a <cfmodule> tag.
| | 00:16 | The purpose is to start treating
header.cfm as a custom tag so that I can define
| | 00:21 | and pass in custom attributes.
| | 00:23 | I'll start at the index.cfm file in the
Home directory of the Photo Gallery project.
| | 00:29 | Changing from an <include> to a <custom> tag
is as simple as changing from a
| | 00:33 | <cfinclude> to a <cfmodule> tag.
| | 00:36 | I'll go to the header and change from
<cfinclude> to <cfmodule> and then I'll do
| | 00:41 | the same thing for the footer.
| | 00:44 | I'll save the changes and run the page
in the external browser and you'll see
| | 00:48 | that the page is still intact.
| | 00:50 | So far nothing has really changed,
but here's what I'd like to modify.
| | 00:55 | I want to be able to show which page
I'm currently on in the browser title bar.
| | 01:00 | Currently, every page is going to
have the text, 'Our Photo Gallery'.
| | 01:04 | That's because there's
literal text in the header file.
| | 01:07 | I'm going to modify the header file to
accept a custom attribute and then I'll
| | 01:11 | output the value of that attribute so
that it shows up in the browser title bar.
| | 01:17 | I'll close the browser and
return to ColdFusion Builder.
| | 01:21 | Now I'll go to header.cfm.
| | 01:23 | Here is where the text that's displayed
in the browser title bar is defined, in
| | 01:27 | the <title> tag inside the
head section of the webpage.
| | 01:32 | I'm going to delete the text from
between the <title> tags and replace that with
| | 01:35 | a pair of pound signs and then
within the pound signs, the text,
| | 01:39 | 'attributes.pagetitle'.
| | 01:42 | And then I'll select both <title> tags
and the dynamic expression between them
| | 01:47 | and I'll go up to the toolbar to the
cfml tab and I'll choose Wrap in cfoutput.
| | 01:53 | Now, I'll go up to the top of the
page and I'll define a default setting.
| | 01:58 | Up at the top, I'll make a couple of extra
lines of code, then I'll add a <cfparam> tag.
| | 02:03 | I'll set the name attribute of the
<cfparam> tag to the name of the attribute
| | 02:08 | that I'm expecting in the content
of the page, attributes.pagetitle.
| | 02:14 | Notice that you don't wrap
this value in pound signs.
| | 02:17 | You're simply referring to
the name of the variable.
| | 02:20 | And then I'll add a default setting.
| | 02:23 | I'll do this on the next line so we can
all of the code and I'll set the default
| | 02:27 | attribute as the original text that I
was displaying on all pages previously,
| | 02:32 | Our Photo Gallery, and then I'll close the tag.
| | 02:37 | I'll save the change.
| | 02:38 | Go back to index.cfm and run it in the
browser, and you'll see if you look up at
| | 02:43 | the title bar, that it still
has the text: Our Photo Gallery.
| | 02:47 | But now I've made the
header reusable and configurable.
| | 02:52 | I'll go back to index.cfm to the call
to the header file and I'll add 'pagetitle
| | 03:01 | = "Our Photo Gallery - Home Page"'.
| | 03:06 | I'll save the change and run the page
once again in the external browser and
| | 03:11 | I'll see that the custom page title
is now displayed in the browser header.
| | 03:15 | As you create additional pages for
your website, you can then modify the page
| | 03:20 | title that's displayed up at the top,
and you can go further with this idea.
| | 03:24 | For example, in the header file, you
might look to see which page you are on
| | 03:28 | in the header custom tag and to
configure the look and feel of these
| | 03:32 | hyperlinks so that they aren't always
white, but instead, when you were on the
| | 03:37 | current page, it was a dimmer or
simply a different color to show that the
| | 03:41 | hyperlink was disabled.
| | 03:43 | So that's a look at one approach to
using the <cfmodule> tag and the custom tag
| | 03:48 | architecture to make the
different parts of your reusable code more
| | 03:52 | configurable and more flexible.
| | Collapse this transcript |
| Creating an application template file| 00:00 | In the exercises in this chapter,
I've described how to break up a single
| | 00:04 | ColdFusion page into multiple parts,
the main content of the page and custom
| | 00:09 | tags that you can use as the header and footer.
| | 00:12 | The purpose of structuring your pages
in this manner is to create a consistent
| | 00:16 | appearance, or look and feel, among
the different webpages of your site.
| | 00:20 | In this demonstration, I'll take the
home page, index.cfm in the home folder and
| | 00:25 | I'll transform it into a template
that I can then easily copy and rename
| | 00:30 | whenever I need to create
a new page in the website.
| | 00:33 | I'll start by creating a new
folder in the Photo Gallery project.
| | 00:36 | I'll right-click on the project and
choose New>Folder and I'll name this
| | 00:41 | folder, 'templates'.
| | 00:43 | I'm going to be treating this
templates folder as a development folder.
| | 00:46 | That is a folder of files that won't
actually get deployed to the website but is
| | 00:51 | only used during development.
| | 00:53 | Now, I'll go to the index.cfm file in the
home folder and I'll copy it to the clipboard.
| | 00:58 | Then I'll go to my new templates
folder and I'll paste the file.
| | 01:03 | This file will become the starting
point for all new pages in my website.
| | 01:07 | I'll double-click to open the file.
| | 01:10 | Then to make sure I don't confuse
myself as to which file I am working on, I'll
| | 01:14 | right-click on the file's
tab and select Close Others.
| | 01:18 | That results in leaving the current
file open but closing all of the others.
| | 01:22 | So I make sure I am making
changes to the right page.
| | 01:25 | Now in the template, I'm going to strip
out the custom code that's unique to the
| | 01:29 | website's home page.
| | 01:30 | I'll get rid of the two cf queries
up at the top and I'll also remove the
| | 01:34 | <cfdump> tag in the middle of the page.
| | 01:38 | Then I'm going to locate anything
that's unique to the template, such as the
| | 01:42 | words 'Home Page' and transform those
into a little bit of placeholder text that
| | 01:47 | I'll replace whenever I use this template.
| | 01:49 | I'll go to the pagetitle attribute
of the <cfmodule> tag for the header,
| | 01:53 | I'll delete the text 'Home Page', and
replace it with a pair of brackets and
| | 01:57 | the words 'Page Title'.
| | 02:00 | I'll do the same thing for the heading
1, I'll delete the text, Our Featured
| | 02:04 | Photographer, I'll add in a pair of brackets
and between the brackets, I'll add in 'Headline'.
| | 02:10 | I'm going to delete the <h2> tag set in
the <cfoutput> section because not all
| | 02:15 | pages of my website will need that.
| | 02:17 | I can easily add that as custom content
when I create new pages. So that's it.
| | 02:22 | I now have a reusable template that I can
start from for any new page in the site.
| | 02:27 | I'll save those changes by pressing
Ctrl+S on Windows, or Command+S on Mac.
| | 02:32 | Now, I'll create another page in the website.
| | 02:35 | If you look at the header file in
the navbar section, you'll see that the
| | 02:39 | Hyperlinks in the navbar are expecting
folder names of home, photographers, and photos.
| | 02:46 | So I'm going to create the
photographers folder now.
| | 02:50 | I'll right-click on the Photo Gallery
folder and choose New>Folder and I'll name
| | 02:55 | this folder 'photographers' making sure
to match the name of the folder with the
| | 03:01 | value in the hyperlink in the navbar.
| | 03:05 | Then I'll go to my templates folder,
I'll locate index.cfm and copy it to the
| | 03:11 | clipboard, I'll go to the photographers
folder and paste it, and then I'll open
| | 03:17 | a new file, and then I'll close others,
right-clicking on the tab for the new
| | 03:22 | file and choosing Close Others.
| | 03:26 | I'll expand the page to full-screen,
you can press Ctrl+M on Windows, or
| | 03:31 | Command+M on Mac, and I'll change
the Page Title in this new page to
| | 03:36 | Photographers and I'll do
the same thing in the headline.
| | 03:42 | I'll save my changes and then I'll
browse the page in the external browser and
| | 03:47 | show you that the new page is ready to
use and also, because I was careful to
| | 03:52 | match the name of the new folder to
the value in the hyperlink labeled
| | 03:56 | Photographers in the webpage template,
I can now click back and forth between
| | 04:00 | the home page and the
photographers page as needed.
| | 04:03 | I'll follow the same
steps for the photos folder.
| | 04:07 | I'll shrink down the index.cfm file,
I'll create a new photos folder in the
| | 04:12 | Photo Gallery directory and then once
again, I'll copy and reuse the template.
| | 04:22 | I'll go to the templates folder,
choose index.cfm and copy it, go to my new
| | 04:28 | photos folder and paste it, and I'll go
to the new index.cfm file and make the
| | 04:34 | same sorts of changes, modifying
the page title and the headline.
| | 04:41 | I'll run the page in the external
browser and now all of the hyperlinks
| | 04:45 | are intact and they take me to the correct
home pages for the respective directories.
| | 04:50 | As you create new files, use
the template file as your base.
| | Collapse this transcript |
|
|
6. Using ColdFusion Components (CFCs)Creating a ColdFusion Component (CFC)| 00:00 | In previous chapters of this video
series, I've described reusable code
| | 00:04 | architectures such as includes and custom tags.
| | 00:09 | Both includes and custom tags are
commonly used to create reusable code that
| | 00:14 | generates outputs sent back to the browser.
| | 00:17 | In contrast, ColdFusion Components
typically are used to encapsulate business
| | 00:22 | rules and back-end logic, code that
doesn't directly result in sending data to
| | 00:27 | the browser but instead does
calculations, retrieves and manipulates data and
| | 00:31 | executes other functionality
that's invisible to the user.
| | 00:35 | A ColdFusion Component or
CFC is essentially a class.
| | 00:39 | Developers who've worked in programming
languages like Java or ActionScript will
| | 00:44 | be familiar with the concept of
defining and using software classes.
| | 00:48 | A software class is a bit of code that
implements properties to represent data
| | 00:53 | and functions or methods
to represent functionality.
| | 00:57 | ColdFusion Components support these
and other object-oriented concepts.
| | 01:02 | For this demonstration, I'll create a new
folder in the Essential Training project.
| | 01:08 | I'll go to that project and
select New and choose New>Folder.
| | 01:13 | I'll create a new folder by the name of
'components' and press Enter or click Finish.
| | 01:18 | Now to create a brand new CFC in
ColdFusion Builder, I'll right-click on the new
| | 01:23 | folder and select New>ColdFusion Component.
| | 01:27 | Notice that this is a different
menu selection than ColdFusion page.
| | 01:31 | When you create a ColdFusion Component,
it's created as a text file with the
| | 01:35 | file extension of .cfc.
| | 01:38 | This is different than ColdFusion
pages and custom tags, which have the
| | 01:42 | file extension, .cfm.
| | 01:44 | When you create the component name in
the screen, don't add the file extension.
| | 01:48 | That will be done for you.
| | 01:50 | I'm going to name my new
component, 'MyFirstComponent'.
| | 01:54 | Under the Attribute section, the
Hint and the Display Name are for
| | 01:58 | documentation only.
| | 02:00 | They don't affect the CFC's functionality.
| | 02:02 | If you add this information, you'll see
the information in certain documentation
| | 02:06 | that gets generated by ColdFusion and
I'll show you how to create that in this
| | 02:10 | video, but if you don't
add values here, it's okay.
| | 02:14 | The Extends attribute
has to do with inheritance.
| | 02:17 | As in many object-oriented languages,
CFCs can extend the functionality of other
| | 02:22 | CFCs and behave as subclasses or
derived classes of the parent or base CFCs.
| | 02:30 | The Implements attribute
lets you implement in interface.
| | 02:33 | This is more of an advanced concept
that I won't go into in depth here.
| | 02:37 | The Output setting affects whether any
content that's in the CFC will be sent
| | 02:42 | back to the browser.
| | 02:44 | As I describe, CFCs are commonly used to
encapsulate back-end logic that doesn't
| | 02:49 | affect what the user sees.
| | 02:50 | So in their final implementation,
you'll frequently see CFCs have their
| | 02:55 | output set to defaults.
| | 02:56 | For now, I'll leave that attribute blank.
| | 02:59 | The last option on this screen,
Generates Script Style Code, is a new feature of
| | 03:03 | ColdFusion 9, which allows you to
describe your ColdFusion component in pure
| | 03:08 | scripting code instead of in
the traditional tag-based syntax.
| | 03:12 | I'm going to use the more traditional
approach in this demonstration and I'll
| | 03:15 | show you a scripted component later.
| | 03:17 | These are all the steps I'm
going to follow in this demo.
| | 03:19 | I'll click Finish and that
creates the simplest possible component.
| | 03:25 | Now in order to see the documentation for
the component, preview the CFC in a browser.
| | 03:31 | I'm going to use the built-in
browser in ColdFusion Builder for this.
| | 03:35 | I'll click on my browser tab and if
you're following along, you might be
| | 03:39 | prompted for your RDS or admin password.
| | 03:42 | If you are, enter it.
| | 03:43 | This is basic component documentation.
| | 03:46 | It shows the name of the component,
MyFirstComponent, and it also shows the fully
| | 03:51 | qualified path to the component
starting under the web document root.
| | 03:55 | For example, my CFC is stored under
the wwwroot folder and then under its
| | 04:01 | subfolder structure, cf9esst\components.
| | 04:07 | You start under the web root and
you walk down the directory tree using
| | 04:10 | dots instead of slashes.
| | 04:12 | And then you end to the fully
qualified address of the component with
| | 04:16 | the component name.
| | 04:17 | So the fully qualified
address for this component would be
| | 04:20 | cf9esst.components.MyFirstComponent.
| | 04:24 | You'll need that information when you
want to call the component's functions.
| | 04:28 | There are a few different ways to
call the component, including using a tag
| | 04:32 | called <cfinvoke> and
also using scripting syntax.
| | 04:36 | I'll go back to the code and
show you one more CFC feature.
| | 04:40 | As I mentioned, the component has a
hint and a display name attribute.
| | 04:44 | I am going to implement one of these,
the Hint, and I'll set its value to A
| | 04:48 | First CFC, and then I'll browse the
page once again, and I'll show you that the
| | 04:54 | hint shows up in the CFC documentation.
| | 04:57 | So now you know how to create
the simplest possible component.
| | 05:00 | In the following videos, I'll show
you how to declare component functions
| | 05:05 | and properties.
| | Collapse this transcript |
| Declaring CFC functions| 00:00 | The purpose of a component is
to encapsulate functionality.
| | 00:04 | You build this
functionality by adding functions.
| | 00:07 | Functions in a component are also
known sometimes as methods and a single
| | 00:11 | component can contain as many
functions or methods as you want.
| | 00:14 | When you build a component using
ColdFusion's tag style syntax, you create each
| | 00:19 | function using a tag called <cffunction>.
| | 00:22 | I'm going to declare a very simple function.
| | 00:25 | I'll start with the <cffunction>
begin tag and then I'll set its name
| | 00:28 | attribute to getValue.
| | 00:30 | If you want to write a very minimally
restrictive function, that's all you need:
| | 00:34 | the begin tag, the end tag,
and the name attribute.
| | 00:37 | But you can also add certain rules.
| | 00:39 | For example, you can set
the returntype of a function.
| | 00:42 | When you set of function's returntype
to one of the displayed datatypes, when
| | 00:47 | the function is executed at runtime,
ColdFusion will detect if you return a
| | 00:51 | value that doesn't match the declared type.
| | 00:53 | This function will return a simple string.
| | 00:55 | So I'll set the returntype attribute to String.
| | 00:59 | You can also set an attribute called access.
| | 01:01 | Functions by default are marked as public,
which means that they can be used, by
| | 01:05 | any other part of the ColdFusion application.
| | 01:08 | You can also restrict
access by setting it to package.
| | 01:12 | That means that the function is
available to the current component and any other
| | 01:15 | components in the same folder or
package, or you can set it to private, which
| | 01:20 | means that it's a function that's
only available within the current CFC.
| | 01:24 | CFCs can be used to expose functionality
over the web either as a SOAP-based web
| | 01:29 | service or using AMF, for Action
Message Format, the format with which you
| | 01:34 | communicate from ColdFusion to Flex or Flash.
| | 01:38 | By setting access="remote", you'll open
up the function so that it can be used
| | 01:42 | from elsewhere on the web.
| | 01:44 | For this example, I'm going
to set my access to public.
| | 01:46 | There are other attributes that you can
set, such as roles, which allows you to
| | 01:51 | secure the function and only allow to
be used by users who have been logged in
| | 01:56 | with certain security roles.
| | 01:58 | Now within the function body, you can
execute a certain amount of functionality
| | 02:02 | and then return a value.
| | 02:04 | In this function, I said
that it would return a string.
| | 02:07 | In order to return a value, when
you're working in tag syntax, you use
| | 02:11 | the <cfreturn> tag.
| | 02:13 | The <cfreturn> tag takes a single value,
which is the value you are returning.
| | 02:17 | So I'll return 'Hello World' and
this is now a completely functional
| | 02:23 | ColdFusion Component or CFC.
| | 02:26 | It has a single function or method,
which has a returntype of string and is
| | 02:30 | available to the entire ColdFusion application.
| | 02:33 | The <cfreturn> tag returns a
literal string of Hello World.
| | 02:37 | If I look at the component
documentation now, I'll see the new function
| | 02:40 | described at the bottom of the
documentation and it indicates the function's
| | 02:44 | access and its return datatype.
| | 02:47 | As you build out your CFCs, you can once
again add as many functions as you like.
| | 02:52 | Make sure that each <cffunction>
tag set is nested within the single
| | 02:56 | <cfcomponent> tag set.
| | 02:58 | Each component gets one set of
<cfcomponent> tags and then as many <cffunction>
| | 03:03 | tag sets as you need.
| | 03:05 | Each function must have
a unique name within the component.
| | 03:08 | You can't reuse function names
within ColdFusion Components and each
| | 03:12 | <cffunction> can have a returntype
that dictates what datatype is going to be
| | 03:16 | returned and that will be enforced at
runtime by ColdFusion, so that if you
| | 03:21 | return something that can't be parsed
as the declared datatype, you'll get a
| | 03:25 | good runtime error that
tells you what went wrong.
| | Collapse this transcript |
| Calling CFC methods with ‹cfinvoke›| 00:00 | Just as with ColdFusion pages and
custom tags, you don't have to explicitly
| | 00:04 | compile a component to use it.
| | 00:07 | You create the component and
define it with the tags, <cfcomponent>,
| | 00:10 | <cffunction>, <cfreturn> and so on, and
then you simply copy the file to your website.
| | 00:16 | In order to call the component, you can
use a tag called <cfinvoke> or you can
| | 00:21 | use a variety of other
scripting approaches as well.
| | 00:24 | In this demonstration, I'll use the
<cfinvoke> tag to call a component function.
| | 00:29 | I'll go to the components folder, right
-click or Ctrl-click on Mac and select
| | 00:34 | New > ColdFusion Page and
I'll call the page, CallCFC.
| | 00:40 | Now at the top of the page, I'll make
a little bit of extra space and I'll add
| | 00:44 | a tag called <cfinvoke> and I'll set the
component attribute to the name of the component.
| | 00:50 | Because both the page and the
component are in the same directory in this
| | 00:54 | example, I can simply put in the
name of the component and notice that
| | 00:58 | ColdFusion Builder sees the component
already there and lets me fill it in automatically.
| | 01:03 | Next, I'll add the method attribute.
| | 01:06 | This is going to be the name of the
method or function that I want to call.
| | 01:09 | If I go back to the CFC, I'll see
that I named my function, getValue.
| | 01:16 | So I'll copy that to the clipboard and
I'll return to the page and paste it in.
| | 01:20 | And then I'll set an attribute
called returnvariable and I'll name the
| | 01:24 | returnvariable, retval, for return
value and I'll close the <cfinvoke> tag.
| | 01:29 | So I've declared which component I am
calling, which of its methods I am calling
| | 01:34 | and what will be the name of the
variable in which I'll store the return value.
| | 01:38 | I'll move the cursor down to within
the <body> tags and create a pair of
| | 01:42 | <cfoutput> tags and within the <cfoutput>,
I'll type in the value, 'The returned value is,'
| | 01:47 | and then within a pair
of pound signs, variables.retval.
| | 01:56 | So there's all of the code.
| | 01:58 | At the top of the page, I execute
the component function call, place the
| | 02:02 | return value into a variable, and
then that variable is available for the
| | 02:06 | duration of the page request.
| | 02:08 | I'll test the page in a
browser and there is the result.
| | 02:11 | I see the return value
concatenated with the string.
| | 02:15 | So that's one way of calling a CFC
function, using a <cfinvoke> tag.
| | 02:19 | I'll talk about other uses of the
<cfinvoke> tag in other videos as I get into
| | 02:24 | the use of CFC
properties and function arguments.
| | Collapse this transcript |
| Using CFC properties| 00:00 | When you declare a ColdFusion component,
as I have previously described, you are
| | 00:04 | essentially declaring an object-oriented class.
| | 00:08 | In object-oriented languages,
classes can contain properties and methods.
| | 00:13 | I have already shown you how to
declare a method or a function.
| | 00:16 | Now I'll show you how to declare a property.
| | 00:19 | Within the cfcomponent tag, to declare
each property, you add a cfproperty tag.
| | 00:24 | These get placed right
after the cfcomponent start tag.
| | 00:28 | Each cfproperty tag minimally gets a name.
| | 00:31 | You can name your properties whatever
you want, but you should follow ColdFusion
| | 00:35 | variable naming conventions:
| | 00:36 | letters, numbers, and underscores
and it must start with a letter.
| | 00:40 | I'll name my property simply myProp.
| | 00:44 | Optionally, you can set a Type attribute.
| | 00:46 | Just as with the cffunction tags return type,
| | 00:49 | this is a value that indicates
what datatype this property will hold.
| | 00:53 | This value won't be enforced within ColdFusion.
| | 00:56 | In fact, the cfproperty tag at this
point is really only for documentation.
| | 01:01 | It's only used functionally in certain cases.
| | 01:04 | But if you want to build out your
documentation, you can add the type attribute
| | 01:08 | and set a particular datatype such as string.
| | 01:11 | There are many other attributes here,
which you may or may not decide to use.
| | 01:14 | For example, the hint attribute is
documentation only and it can contain any
| | 01:20 | string such as My Property.
| | 01:22 | So that's how you declare properties.
| | 01:24 | You can declare as many properties as
you want, set their datatypes, give them
| | 01:28 | hints for documentation and
add other attributes as needed.
| | 01:32 | However, the cfproperty tag in and of
itself does not actually declare the
| | 01:37 | variable or give it a value.
| | 01:38 | That's something you have to do separately in
code that you place outside of any functions.
| | 01:43 | Code that's placed outside of the
function is executed as a component is first
| | 01:48 | addressed or instantiated in a
calling page or in another CFC.
| | 01:54 | You don't have to place this
code at the top of the CFC, but
| | 01:57 | it's recommended that you do so.
| | 01:59 | Typically, you'll see the cfproperty
tags first right after the cfcomponent
| | 02:03 | start tag, and then the
initialization code right after that.
| | 02:07 | Following object-oriented vocabulary,
this type of code is sometimes called
| | 02:11 | constructor code, because the code is
executed, as the object based on this CFC
| | 02:17 | is constructed in memory.
| | 02:19 | To set the value of myProp, I'll place
the cursor after the cfproperty tag and
| | 02:24 | I'll add a cfset command, and
I'll set the value of the variable.
| | 02:27 | Now, at this point I have a choice to make.
| | 02:29 | Properties stored within CFCs
can be either public or private.
| | 02:34 | Public properties can be read
and set by the calling page or CFC.
| | 02:39 | Private properties can only be
addressed within the current CFC.
| | 02:43 | In order to make a variable public,
you use the prefix this, using the
| | 02:48 | full syntax this.myProp.
| | 02:51 | In order to make the same variable
private to the component, you would use
| | 02:54 | the prefix variables.
| | 02:56 | This means public and variables means private.
| | 03:00 | I'll use the prefix this and then I'll
set the value of myProp to My prop value,
| | 03:06 | and then I'll close the tag.
| | 03:08 | Now, I'll go down to the function
getValue and I'll change the cfreturn tag so
| | 03:12 | that instead of returning a
literal string it returns this.myProp.
| | 03:17 | So now, I've declared a property,
I have set it's initial value and indicated
| | 03:21 | that it's going to be a public property,
by using the prefix 'this' and then in
| | 03:25 | the function I am returning
the value of the property.
| | 03:29 | I'll go back to the file CallCFC.cfm.
| | 03:32 | I'm still calling the same method,
getValue, and I am returning it's value to the
| | 03:36 | variable retval, and then I am
displaying that value in the page.
| | 03:41 | I'll preview the page in the browser,
and there is the result. I am getting the
| | 03:44 | value of the property back.
| | 03:46 | Now, if I wanted to make that property
private to the component all I would need
| | 03:50 | to do is change the prefix from this to
variables, or I could leave the prefix
| | 03:55 | out entirely and it would
default to the variable scope.
| | 03:59 | In the getValue function, I also need
to make sure that I update the prefix on
| | 04:03 | the variable to match the prefix
that I used when I set the variable.
| | 04:07 | I'll save the change to the CFC, by
pressing Ctrl+S. I'll go back to the Calling
| | 04:12 | page and preview it in the browser and
once again the functionality all works.
| | 04:17 | The difference will be that from the
Calling page, I can no longer address the
| | 04:21 | CFC property directly.
| | 04:24 | I must call the function.
| | 04:25 | This is called encapsulation in the
world of object-oriented programming.
| | 04:30 | When you create CFCs with private
variables, you're protecting or hiding the
| | 04:34 | data that the CFC uses.
| | 04:37 | It's typically considered a very good
practice to hide data within CFCs wherever
| | 04:41 | possible if they're not strictly
needed by the rest of the application and
| | 04:46 | providing access to those properties
only through functions that you define.
| | Collapse this transcript |
| Passing data into functions| 00:00 | When you declare functions in a
ColdFusion component, you can add as many
| | 00:04 | arguments or parameters as you like.
| | 00:07 | Arguments or parameters are values
that you pass onto a function, and you can
| | 00:11 | pass these arguments using
a variety of syntax styles.
| | 00:15 | I'm going to continue working with the
file MyFirstComponent.cfc and I'm going
| | 00:20 | to add a new function to it.
| | 00:22 | Place the cursor before the ending
cfcomponent tag and I'll add a new cffunction tag,
| | 00:27 | and I will give the function a name
of functionWithArgs, and I will set the
| | 00:33 | returntype to string and the access to public.
| | 00:36 | I will place the cursor between
the cffunction begin and end tags.
| | 00:43 | Here's how you declare arguments.
| | 00:45 | You use a cfargument tag for
each argument that you want to use.
| | 00:49 | I'll add a cfargument tag
with the name of first name.
| | 00:53 | I will set its type to string and I
will set a required attitude to true.
| | 00:59 | If you declare cfargument tag and you
set its required attribute to true,
| | 01:03 | in the calling page if you try to call the
function without passing the argument value,
| | 01:07 | you will see a runtime error result.
| | 01:09 | So this is a way of
enforcing the usage of the function.
| | 01:13 | Now, I'm going to clone that line of code.
| | 01:15 | I'll hold down Ctrl+Alt
and press the Down Arrow.
| | 01:19 | You can press Command+Alt+Down on Mac.
| | 01:21 | And for the second argument, I will
change its name from firstname to lastname.
| | 01:27 | Within the function, I will use a cfreturn
tag and I will return the following values.
| | 01:33 | Each of the arguments will appear as
a variable with a prefix of arguments.
| | 01:38 | Here's how you address it.
arguments.firstname, and then I'm going to
| | 01:43 | concatenate a space.
| | 01:45 | And then after the literal space
I'll concatenate arguments.lastname.
| | 01:51 | So I'm taking the firstname argument
and the lastname argument, squinching them
| | 01:55 | together with a space in the
middle and returning the result.
| | 01:59 | I'll save the change and then I'll
create a new page to call this new function.
| | 02:03 | I will go back to the Navigator
view, to the components folder.
| | 02:07 | I will right-click on it or Ctrl+Click
on Mac and choose New ColdFusion Page,
| | 02:13 | and I'll name the new page CallFunctionWithArgs.
| | 02:17 | At the top of the page
I will add a cfinvoke tag.
| | 02:20 | I will set the component name to
MyFirstComponent and I will set the method to
| | 02:26 | functionWithArgs and the
return variable to retval.
| | 02:30 | Now in order to pass the arguments with
the use of a cfinvoke tag, you use a tag
| | 02:35 | called cfinvokeargument.
| | 02:38 | It looks like this. cfinvokeargument.
| | 02:41 | You set the name and you set the value.
| | 02:45 | I'll pass in a literal value of Joe.
| | 02:48 | Now I'll clone that line of code, and
for the second argument, I'll set the name
| | 02:52 | to lastname and I'll set the value to Smith.
| | 02:57 | When you use cfinvokeargument tags,
you must add a closing cfinvoke tag.
| | 03:03 | So that's a complete call to a
component function that expects arguments.
| | 03:07 | I will place the cursor between the
body tags and add a pair of cfoutputs and
| | 03:12 | within the cfoutputs, I'll type in the
value 'The returned value is' and then in
| | 03:18 | pound signs variables.retval.
| | 03:22 | Preview the page in the browser and
there is the result, a successful call to a
| | 03:27 | function with arguments.
| | 03:29 | It's also possible to create arguments
that are optional and that have default
| | 03:32 | values, and there are other ways of
calling these functions as well that I will
| | 03:36 | show you in later videos.
| | Collapse this transcript |
| Creating and calling CFCs with script syntax| 00:00 | Beginning with ColdFusion 9, you can
now create certain components using
| | 00:04 | scripting syntax instead of
the traditional tag-based syntax.
| | 00:09 | The easiest way to get started with
this is to generate a component from
| | 00:13 | within ColdFusion Builder.
| | 00:14 | I will go to the components folder
of my Essential Training project.
| | 00:17 | I'll right-click on it and
choose New > ColdFusion Component.
| | 00:22 | And I will name my new component ScriptedComp.
| | 00:26 | Now I'm going to walk through more of
this wizard this time to get some coding help,
| | 00:30 | because the syntax for this component
will be significantly different than
| | 00:35 | the tag-based syntax that
ColdFusion developers might be used to.
| | 00:39 | On this first screen, I'll select
the option Generate Script Style Code,
| | 00:43 | and then I will click Next and I'll add
some properties and functions to the component.
| | 00:47 | I will click the Add button for a new
property and in the New Component Property
| | 00:52 | dialog I will set the
property name as myProperty.
| | 00:55 | I will set the Type as string.
| | 01:00 | And then optionally I can
add a getter and a setter.
| | 01:04 | For developers who are used to object-
oriented approaches, this is a very nice
| | 01:08 | new feature that allows you to create
functions that can be used to set and get
| | 01:13 | the values of a property.
| | 01:15 | I'm going to keep this fairly simple though.
| | 01:17 | I won't add the getter and setter but I want
you to know that those features are available.
| | 01:21 | I will click OK and I will see
that my property has been added.
| | 01:26 | Then I will add a function.
| | 01:27 | I will set the function name as getValue.
| | 01:29 | I will set the Access Type as public
and I will set the Return Type once again
| | 01:35 | as string and I will click OK.
| | 01:38 | Now I will click Finish and that
will result in generating the component.
| | 01:42 | This is the code for a very
simple scripted component.
| | 01:46 | It has the same sort of functionality
as the tag-based version I demonstrated
| | 01:50 | earlier, but the scripting style might
be more comfortable for some developers.
| | 01:54 | When you declare a property in a scripted
component, you use the property keyword.
| | 01:59 | Just as in a tag based component, in
order to set the initial value of the
| | 02:04 | property you add code below the property
declaration and you use the appropriate
| | 02:09 | prefix, this for public variables
and variables for private variables.
| | 02:14 | So I'll will put in this code,
this.myProperty= "Hello World".
| | 02:21 | In ColdFusion script, you must
end each line with a semicolon.
| | 02:25 | Now I will go down to the function
getValue and notice that it has what we call
| | 02:30 | an access modifier called public.
| | 02:33 | This means that the function
can be called from anywhere in a
| | 02:35 | ColdFusion application.
| | 02:37 | And the second keyword string
indicates that that's the returned data type.
| | 02:41 | Then you will see the keyword
function and the name of the function.
| | 02:46 | In the function I return
the value of this.myProperty.
| | 02:51 | I will use the keyword return and
then the value that I want to return.
| | 02:55 | So that's how you script a component.
| | 02:57 | Now let's take a look at how to call the
component using script within a ColdFusion page.
| | 03:02 | I'll create a brand-new ColdFusion
page and I'll name it CallScriptedCFC.
| | 03:10 | At the top of the page, I'm going to
create a pair of tags called cfscript.
| | 03:16 | The cfscript tag set allows you
to add ColdFusion scripting code.
| | 03:21 | ColdFusion 9 allows you to call
more features than ever before using
| | 03:25 | scripting instead of tags.
| | 03:27 | Again this is a coding preference.
| | 03:29 | Some developers prefer tag-based code.
| | 03:32 | Others prefer scripting-based code.
| | 03:34 | Among these features in ColdFusion 9 is
the ability to create an instance of a
| | 03:39 | component using the keyword New.
| | 03:42 | This matches the syntax that developers
might be used to if they work with Java,
| | 03:47 | ActionScript or other object-oriented languages.
| | 03:50 | I'm going to create a variable called
retval simply by declaring its name.
| | 03:55 | And then I'm going to create an instance
of the ScriptedComp component using the
| | 03:59 | new keyword and then the name
of the component ScriptedComp.
| | 04:03 | When you call the ScriptedComp name and
you add the parentheses after it,
| | 04:08 | you're constructing an instance of the
component in object-oriented terms.
| | 04:13 | I will place the cursor after the
opening and closing parentheses and put in a dot
| | 04:16 | and then I'll call the getValue method.
| | 04:20 | I've constructed an instance of the
ScriptedComp.cfc and I have called its
| | 04:24 | getValue method, and returned
that value to the retval variable.
| | 04:28 | Once again you always want to check
to make sure that you're calling the
| | 04:32 | function name exactly as it
was spelled in the component.
| | 04:35 | I will come back to the page and then
just as before I'll create a cfoutput tag pair
| | 04:40 | and within the cfoutput tag pair,
I will put in the code, The returned
| | 04:45 | value is, variables.retval.
| | 04:50 | And I will preview the page in a
browser and show that I have successfully
| | 04:53 | constructed an instance of the
component and called its function.
| | 04:57 | There is quite a bit of code
here that's new to ColdFusion 9.
| | 05:01 | Previous to ColdFusion 9, in order to
create an instance of the component,
| | 05:05 | the syntax was somewhat more
complex and more verbose.
| | 05:08 | You can now create an instance of the
component by putting in the keyword 'new'
| | 05:12 | and then calling what's known as a
constructor method, the name of the component
| | 05:17 | followed by a pair of parentheses.
| | 05:19 | And once you've created an instance of
that component, you can then call the
| | 05:22 | component's publicly available methods.
| | Collapse this transcript |
| Generating data access CFCs in ColdFusion Builder| 00:00 | ColdFusion Builder includes a great
tool that allows you to quickly and easily
| | 00:04 | generate CFCs or ColdFusion Components
that can be used to access your database.
| | 00:11 | You can generate two types of CFCs.
| | 00:14 | The first, the traditional sort of CFC,
wraps <cfquery> tags that are used to
| | 00:19 | retrieve, create, update, and
delete data in the database.
| | 00:24 | The other type of CFC uses the new Object
Relational Mapping or ORM feature of ColdFusion 9.
| | 00:31 | In this chapter, I will describe how to
create the traditional sort of CFC and
| | 00:36 | in another chapter dedicated to ORM
I'll show you how to create the other type.
| | 00:40 | Before you use the wizard to create
the CFCs, you must first create the
| | 00:45 | directories in which you want to store them.
| | 00:48 | In this beta version of ColdFusion
Builder, you won't be able to create the
| | 00:52 | folders during the wizard process.
| | 00:55 | You can place the CFCs
anywhere in your application.
| | 00:58 | I will be working with the PhotoGallery
application in this demonstration, and
| | 01:02 | I am going to create a couple of
subfolders under the PhotoGallery project.
| | 01:06 | I will right-click under
PhotoGallery and choose New > Folder.
| | 01:12 | I'd like to create a folder named
cfc and under that one named data.
| | 01:17 | ColdFusion Builder, or rather Eclipse,
lets you do this in a single step, by
| | 01:22 | typing in first the parent folder and
then a forward slash and then the name
| | 01:27 | of the child folder.
| | 01:28 | I will type in cfc/data and click
Finish and that creates both the parent and
| | 01:34 | the child folder in one step.
| | 01:36 | Now, I'm going to create a set of CFCs
to manage the PHOTOGRAPHER table in the
| | 01:42 | photogallerydb database.
| | 01:43 | I will go to the RDS Dataview.
| | 01:46 | If you're following along, make sure
that the photogallerydb database and
| | 01:49 | the Tables list are expanded, so
that you can see the PHOTO and the
| | 01:54 | PHOTOGRAPHER table.
| | 01:55 | I will right-click on the
PHOTOGRAPHER table or Ctrl-click on Mac and
| | 01:59 | I'll choose Adobe CFC Generator > Create CFC.
| | 02:04 | If you don't see these menu choices on
the context menu that appears when you
| | 02:08 | right-click, it will be because when
you defined your server in ColdFusion Builder,
| | 02:12 | you didn't install
the default extensions.
| | 02:15 | This is a step that I
described in a separate video.
| | 02:19 | So, if you don't see these menus,
you might want to reconfigure your server.
| | 02:23 | These too menu choices, Create CFC and
Create ORM CFC, represent the traditional
| | 02:29 | CF Query based CFCs, the ones I will
be creating now, and the newer ORM CFC
| | 02:34 | model that I will describe later.
| | 02:36 | I will select Create CFC.
| | 02:40 | Now, I'm asked where I
want to create the components.
| | 02:43 | I'll click Browse and I will navigate to
my PhotoGallery project and from there,
| | 02:48 | to my new folder, cfc/data.
| | 02:51 | I'll choose the data folder and click OK.
| | 02:54 | The Generate Service
option is checked by default.
| | 02:57 | It results in creating a special
CFC or component that can be used to
| | 03:02 | expose this database functionality
to web-based clients such as Flex or
| | 03:07 | Flash applications.
| | 03:09 | I'll leave that option selected so
we can see what the code looks like.
| | 03:13 | The second option, Script CFC, would
result in creating components using a
| | 03:18 | scripting model instead of a tag-based model.
| | 03:22 | If you're curious about this new
feature of ColdFusion 9, try checking the box
| | 03:26 | and looking at the difference
between the code that's generated with the
| | 03:29 | option and without.
| | 03:31 | I'll leave this option
unchecked and I'll click OK.
| | 03:36 | It takes just a moment to generate the CFCs.
| | 03:39 | I'll go to the data folder, I will right
-click and choose Refresh and that will
| | 03:44 | make sure that the Navigator view shows the
current contents of the directory on disk.
| | 03:48 | Then I will expand the directory and
show that there are four CFCs that have
| | 03:54 | been created for me.
| | 03:56 | The PHOTOGRAPHER.cfc, which is
known as a value object component,
| | 04:00 | PHOTOGRAPHER.dao or Data Access Object,
which contains methods to deal with one
| | 04:06 | record of a database table at a time,
and a gateway component that contains
| | 04:11 | functions to deal with the
entire table or sets of data.
| | 04:15 | The Service component as I mentioned
includes functions that can be called over
| | 04:19 | a Flash remoting by a Flex
or Flash-based application.
| | 04:24 | So that's a look at how to use the
new ColdFusion Component generation wizard,
| | 04:28 | accessed from the RDS Dataview,
to generate components for managing a
| | 04:33 | single database table.
| | Collapse this transcript |
| Calling generated data access methods| 00:00 | When you use ColdFusion Builder's
Code Generation tool for data access
| | 00:04 | ColdFusion Components, you get four CFCs.
| | 00:09 | The first CFC that's listed
is called the Value Object CFC.
| | 00:13 | This component is designed so that it can
be used on ColdFusion 8 or ColdFusion 9.
| | 00:19 | It declares one property for
each column of the database table.
| | 00:24 | Each is declared with a <cfproperty> tag.
| | 00:26 | The <cfproperty> tag has a name and a
type and the type is set to a datatype
| | 00:31 | matching as closely as possible, the
datatype of the database table column.
| | 00:36 | For example, here, we have two integer
values, Photographerid and Featured, that
| | 00:42 | are translated into ColdFusion numeric values.
| | 00:45 | The name of the property matches the
name of the column but has an initial
| | 00:49 | uppercase character instead of all
uppercase as it is in the database table.
| | 00:54 | Further down, you'll see a number of
functions called setters and getters.
| | 01:00 | A setter function receives an argument
and saves that argument's value as an
| | 01:05 | INSTANCE variable where the
variable name matches the column name.
| | 01:09 | And a getter function returns that value.
| | 01:13 | You'll be able to use these
functions in your ColdFusion code.
| | 01:16 | Because you're running under
ColdFusion 9, a lot of this code really isn't
| | 01:20 | necessary because in ColdFusion 9, you
can use implicit setters and getters.
| | 01:25 | Setter and getter functions that are
created automatically for you by simply
| | 01:30 | setting a property of the <cfcomponent>
tag called accessors to a value of true.
| | 01:34 | Now, we're not going to use
this component a lot in our code.
| | 01:38 | So I am going to leave the code as
is, but if you're interested in this
| | 01:42 | new feature, take a look at implicit setters
and getters in the ColdFusion 9 documentation.
| | 01:48 | So that's known as the Value Object component.
| | 01:52 | The next generated component is called
the DAO or Data Access Object component.
| | 01:58 | This component has methods or functions for
creating, reading, updating, and deleting data.
| | 02:04 | You should treat each of these functions
as beginning code and modify it as needed.
| | 02:09 | For example, this insert statement is
designed for a table that doesn't have
| | 02:13 | auto increment capability for the primary key.
| | 02:16 | Our database table has that capability.
| | 02:19 | So to fix the code, I would remove the
photographerid from the list of fields
| | 02:25 | and remove the first <cfqueryparam>
that stuffs that value into the column.
| | 02:30 | And then when the Insert statement is
executed, the database will assign the
| | 02:34 | next available identity value
or numeric value for that table.
| | 02:38 | You'll also see methods below for
reading, updating, and deleting.
| | 02:44 | Take a look at the code and
use it or modify it, as you like.
| | 02:48 | I will close and save that change.
| | 02:52 | The next CFC is called the Gateway.cfc.
| | 02:55 | This CFC is designed to be called
directly by your ColdFusion application.
| | 03:00 | There's a method called, getAll, that
we will use that returns an array of the
| | 03:05 | photographer object.
| | 03:06 | The returntype is set as the
name of the Value Object component,
| | 03:10 | Photographer, and the opening and
closing brackets mean that it's an array or
| | 03:15 | a set of those objects.
| | 03:17 | The query retrieves all
of the data from the table.
| | 03:21 | Once again, you can modify this query as you
like to return the data the way you want it.
| | 03:26 | After the query that gets the data
from the table, there is a loop that loops
| | 03:31 | through the data from the table,
creates one instance of the Photographer CFC
| | 03:35 | for each row of data in the query
object and then in this line of code, appends
| | 03:41 | that object to an array.
| | 03:43 | So when you call that method, you'll get back
an array of objects, instead of a query object.
| | 03:49 | There are other methods called getAll_
paged and count that you can use if you like.
| | 03:56 | And finally, there is a
component called PHOTOGRAPHERService.
| | 04:00 | This service is designed to
be called from Flash or Flex.
| | 04:04 | It has facade methods, methods that call
other methods from the Gateway and the DAO class.
| | 04:10 | For example, this
createPHOTOGRAPHER method calls the PHOTOGRAPHERDAO
| | 04:15 | component's create function and
simply passes all of the arguments.
| | 04:20 | Notice that all of the functions in
the service class have their access
| | 04:24 | attribute set to remote.
| | 04:26 | That means that this function can be
called from the CFC as either a SOAP-based
| | 04:31 | Web Service function or a Flash
Remoting function called from Flex's
| | 04:35 | remote-object component.
| | 04:38 | If you're not using Flash or Flex,
you may not use this PHOTOGRAPHERService
| | 04:41 | component but it's good to know that
it can be generated if you need it.
| | 04:47 | So that's a look at how
all the code is put together.
| | 04:50 | Now I'm going to add code to the index.
cfm file of my photographers folder of my
| | 04:56 | PhotoGallery application.
| | 04:59 | If you have access to the exercise files,
to locate and open this file, go to
| | 05:03 | the PhotoGallery project to the
photographers folder and open index.cfm.
| | 05:09 | So, now I'm going to add code to the
index.cfm file in the photographers folder
| | 05:14 | of the PhotoGallery application.
| | 05:16 | I will place the cursor at the top of
the page and make a little bit of space.
| | 05:21 | Then I'll create a pair of <cfscript> tags.
| | 05:26 | Within the <cfscript> tags, I am
going to create a new instance of the
| | 05:30 | PHOTOGRAPHERGateway component.
| | 05:32 | I will use a bit of syntax
that's new to ColdFusion 9.
| | 05:35 | I will use the new keyword, which
allows me to create an in-memory object which
| | 05:41 | is an instance of one of my components.
| | 05:44 | I will use this code, service = new.
| | 05:49 | Then I'll start typing in the name
of my folder under the web root, photogallery.
| | 05:55 | ColdFusion Builder shows me a
listing of all of the components that are
| | 05:58 | available under my ColdFusion application.
| | 06:00 | I will select photogallery.
cfc.data.PHOTOGRAPHERGateway.
| | 06:08 | Notice that ColdFusion Builder
automatically adds an opening and closing
| | 06:12 | parenthesis to the end of the component name.
| | 06:15 | That means that it's calling a
constructor method, a special method that's
| | 06:19 | created automatically for you that
returns an instance of that component.
| | 06:23 | I will move the cursor to the end of
the line and add a semi-colon to indicate
| | 06:28 | that it's the end of the statement.
| | 06:31 | Now on the next line, I will create a
variable called items and I'll get that
| | 06:37 | data by calling the
following method, service.getAll().
| | 06:43 | The getAll() method was generated as
part of the PHOTOGRAPHERGateway component.
| | 06:48 | To test that, I will place the cursor after
the <h1> tags and I'll add a <cfdump> tag.
| | 06:53 | I will use a var attribute and I will
output the value of items and I will use a
| | 07:01 | label attribute with a value of Photographers.
| | 07:05 | The label attribute just places a
descriptive label at the top of the
| | 07:10 | dumped output on the page.
| | 07:13 | I'll run the page in the
browser and there is the result.
| | 07:17 | I've executed the call to the database
and the data comes back as an array of
| | 07:22 | Photographer objects.
| | 07:24 | Each of these objects is an instance of
the value object component photographer.
| | 07:29 | The fully qualified name of the component is
| | 07:31 | photogallery.cfc.data.PHOTOGRAPHER
and I'll show you how to access the
| | 07:37 | properties of this component in the next video.
| | Collapse this transcript |
| Creating a dynamic HTML table from an array| 00:00 | When you retrieve data from a back-
end database using functions that are
| | 00:03 | generated in ColdFusion Components,
you receive an array of objects rather
| | 00:09 | than a query object.
| | 00:11 | In the current page, index.cfm, in the
photographers folder of the PhotoGallery
| | 00:15 | application, I've called the
Gateway components getAll method.
| | 00:20 | Now I've placed a <cfdump> tag in the
middle of the page, so I can see the
| | 00:24 | structure of the data
that's returned from the server.
| | 00:27 | I'll run the page in the browser
and I'll see that I get back an array
| | 00:31 | of complex objects.
| | 00:33 | Each of these objects is an instance
of the PHOTOGRAPHER component and this
| | 00:38 | PHOTOGRAPHER component stores its
data as private variables or private
| | 00:43 | properties within the component instance.
| | 00:46 | You access these properties through
getter and setter functions, also known
| | 00:49 | as accessor functions.
| | 00:52 | In the code generated by ColdFusion Builder,
there are explicit getters and setters.
| | 00:57 | You can also use implicit getters and
setters in ColdFusion9 if you desire.
| | 01:01 | I will go back to the page I'm working
on and to demonstrate how to use these
| | 01:07 | complex objects, I will replace the
<cfdump> tag with my own HTML table.
| | 01:13 | Now, once again, I'm working in the
index.cfm file in the photographers folder
| | 01:19 | of the PhotoGallery application.
| | 01:21 | If you're following along in the
exercises, you should first have generated
| | 01:25 | these components in the CFC data folder.
| | 01:28 | These components are exactly as they
were generated by ColdFusion Builder.
| | 01:33 | In the index.cfm file
comment out the <cfdump> tag.
| | 01:38 | I'll select the code and I'll go to
the cfml tab of the toolbar and click the
| | 01:43 | Comment icon and that prevents the
<cfdump> tag from executing on the server.
| | 01:49 | Now I will make some space between
the heading and the <cfdump> tag.
| | 01:52 | I will place the cursor at the
beginning of the line and then this time to
| | 01:57 | create an HTML table I will use a
wizard that's a part of ColdFusion Builder.
| | 02:02 | I will go to the html tab of the
toolbar and click the first button,
| | 02:07 | labeled Insert HTML Table.
| | 02:10 | I will set the number of rows to
2 and the number of columns to 2.
| | 02:15 | Initially, I will set the table width
to 400 pixels, although I'll be removing
| | 02:20 | that value later, and I will
set the border thickness to 0.
| | 02:23 | I will set the Header to Top.
| | 02:26 | That means that I'll be getting <th>
tags in the first row and <td> tags in the
| | 02:30 | second and I will click
OK to generate the table.
| | 02:34 | Then I will press the Tab key once
to indent the table code by one tab.
| | 02:39 | I would expand the code to full-screen,
so we can see all of it and you'll
| | 02:43 | see that I now have a nice HTML table
structure with a width and border setting.
| | 02:49 | I don't actually need the width and the border.
| | 02:51 | I only put those values in
because the wizard required them.
| | 02:55 | So I'll select and delete them now.
| | 02:58 | The next step is to fill in the headers.
| | 03:00 | The headers are literal strings that
the user sees at the top of each column.
| | 03:04 | I will place the cursor in the first <th>
tag set and type in a label of First Name.
| | 03:10 | And then I'll go to the second <th>
tag set and type in a label of Last Name.
| | 03:15 | I'm ready to loop through my data.
| | 03:17 | I've received an array of complex objects.
| | 03:20 | In order to loop through it, I'm
going to use a tag called <cfloop>.
| | 03:25 | There are a couple of ways of
building the code I'm going to use.
| | 03:28 | I'm going to use the <cfloop> tag
using a from, a to, and an index attribute.
| | 03:34 | This allows you to do a numeric loop,
starting from one value and going through
| | 03:39 | to another value and the result will be
to loop through each of the data objects
| | 03:44 | in the array and deal with them one at a time.
| | 03:46 | I'll place the cursor before the
second <tr> tag set and make a new line.
| | 03:52 | I will create a <cfloop> tag and I'll
start with the from attribute and set
| | 03:58 | it to a value of 1.
| | 04:00 | Arrays in ColdFusion are one based, not
zero based as they are in many other languages.
| | 04:05 | So, the index of the
first object is one, not zero.
| | 04:10 | Now I'll set a to attribute and
I'll use this dynamic expression.
| | 04:15 | Wrapped in pound signs, I'll
add in the function arrayLen().
| | 04:20 | The arrayLen() function takes a
single array as an argument and returns the
| | 04:25 | number of items in the array.
| | 04:27 | I will pass in the items array and this
will result in looping starting at one
| | 04:33 | and continuing to loop
through the last item in the array.
| | 04:37 | Finally, I'll add an index
attribute and set it to a value of i.
| | 04:42 | This establishes a variable named i that's
reset each time through the loop to the
| | 04:47 | current number, starting at one, then
two and so on, all the way up to the
| | 04:52 | top item in the array.
| | 04:54 | Then I'll move down to the end of the
table row and I will put in the matching
| | 04:58 | end tag for </cfloop>.
| | 05:00 | This means that I'm creating one
table row in my HTML table for each data
| | 05:05 | object in the array.
| | 05:08 | Next, I will add a <cfoutput> tag
set wrapped around the row as well.
| | 05:12 | The <cfloop> tag on its own isn't enough to
output dynamic expressions to the browser.
| | 05:18 | You still need <cfoutput>.
| | 05:20 | So, I will place the cursor after the
<cfloop> start tag and make a new line,
| | 05:24 | and add a <cfoutput> tag.
| | 05:27 | Then I will move to the end of the row
and before the ending <cfloop>, I'll now
| | 05:31 | add the matching end tag.
| | 05:34 | I can now output dynamic
expressions within the loop.
| | 05:38 | Now, I am going to output the
properties from the current data object.
| | 05:42 | I'll move to the first cell in the
second row and I will put in a pair of pound
| | 05:46 | signs and place the cursor between them.
| | 05:48 | Here is the expression I will use to
output the first name value from the
| | 05:53 | current data object.
| | 05:55 | I'll start with the
expression, items bracket i bracket.
| | 06:00 | That means that I'm referring to the
data object in the current index position.
| | 06:05 | Then I'll put in a dot and I'll call
the accessor function that will return the
| | 06:10 | first name property, getFirstName.
| | 06:14 | Remember that this getFirstName()
function is a part of the Photographer
| | 06:18 | component and it returns
the first name property.
| | 06:22 | I'll come back to my index.cfm
page and I'll copy and paste this
| | 06:27 | expression, items i .getFirstName,
and I will paste it into the second
| | 06:32 | column and I will change the name of
the function that I am calling from
| | 06:36 | getFirstName() to getLastName().
| | 06:37 | I will clean up the code a little bit,
removing extra spaces that I don't need,
| | 06:44 | and then I will test the page in the
browser by clicking my browser tab.
| | 06:48 | And here is the result.
| | 06:49 | As the page is loaded, I am calling the
getAll method of the Gateway component
| | 06:53 | and then I am rendering
the data using an HTML table.
| | 06:57 | Looping through the data using a <cfloop>
tag, with a from, a to, and an index
| | 07:02 | attribute, and outputting the data by
calling the getter accessor methods that
| | 07:08 | are part of the
generated Photographer component.
| | 07:11 | The specific code that you use
in your applications might differ.
| | 07:14 | For example, you might have a different
visual presentation or you might want to
| | 07:18 | implement alternating row colors,
as I have shown in another video.
| | 07:22 | But regardless of the details, this is
the basic coding pattern for outputting
| | 07:27 | data from an array of value objects
that you receive by calling the generated
| | 07:33 | functions of your components.
| | 07:35 | Later on in this video series, I will
show you how to use Object Relational Mapping
| | 07:40 | or ORM, a new feature of
ColdFusion 9, to retrieve data from the
| | 07:44 | ColdFusion server and the database.
| | 07:46 | You will see that in ORM, the data is
also returned in the same basic format, as
| | 07:52 | an array of objects.
| | 07:54 | So this sort of output code will be
used, regardless of whether you are using
| | 07:58 | the generated code from these more
traditional type CFCs or from the new
| | 08:03 | Object Relational Mapping functions
that are a part of ColdFusion 9.
| | Collapse this transcript |
| Creating an Application.cfc file| 00:00 | In this chapter on ColdFusion Components,
I have described how to create custom
| | 00:04 | components that wrapped
business logic and database access.
| | 00:08 | There's another kind of ColdFusion
Component that has a very specific use called
| | 00:13 | the Application.cfc.
| | 00:15 | This file is typically created and
placed in the root folder of your website.
| | 00:20 | The purpose of the Application.cfc
file is to bind together all of the
| | 00:24 | different pages and components in your
directory structure, so that they form a
| | 00:29 | coherent application.
| | 00:31 | It allows you to share data easily
between the different pages and CFCs even
| | 00:35 | when they're not being
loaded in the same request.
| | 00:38 | Here's how the Application.cfc file works.
| | 00:40 | You create it in the root
folder of your application.
| | 00:43 | I will go to my Project folder,
PhotoGallery, right-click on it or Ctrl-click on Mac
| | 00:48 | and I'll choose New > ColdFusion
Component and I'll name the component
| | 00:53 | Application and I'll click Finish.
| | 00:56 | Now, I will place the cursor
between the <cfcomponent> tags.
| | 01:00 | As each page or component within
your website is loaded by ColdFusion,
| | 01:04 | ColdFusion will look in the same
directory for an Application.cfc file and
| | 01:08 | if it finds it, it'll use it.
| | 01:10 | If it doesn't find it, it will walk up the
directory structure until it does find it.
| | 01:14 | This is how the Application.
cfc in the root folder works.
| | 01:18 | ColdFusion just keeps on walking up the
directory tree, until it finds the file.
| | 01:22 | Within the component, you assign an
application name using this syntax,
| | 01:27 | cfset this.name equals, and then
you assign an arbitrary string that
| | 01:33 | describes your application.
| | 01:34 | I will use a string of myphotogallery.
| | 01:38 | When you have multiple websites on the
same ColdFusion server, you should be
| | 01:42 | sure to assign each website or
application a different name, so that they don't
| | 01:46 | bleed data between each other.
| | 01:48 | Variables that are stored in what's
known as the application scope will
| | 01:52 | be available to all pages within this
directory structure as long as it has a unique name.
| | 01:58 | Now, I'm going to save this file and I am
going to go over to the home page of the website.
| | 02:03 | It's in the home directory
and its name is index.cfm.
| | 02:06 | I'll place the cursor after the
existing output, but before the footer and
| | 02:11 | I will add a new <cfdump> tag.
| | 02:13 | I will place the cursor where I want to
output the information, then I'll go to
| | 02:17 | the cfml toolbar and click the third
button, adding the <cfdump> tag, and
| | 02:21 | within the var attribute inside the
pound signs, I will output the value of a
| | 02:26 | scope called application.
| | 02:27 | I will save the changes and preview the
page in the browser and here's the result.
| | 02:32 | What I called this.name in
Application.cfc became a variable called
| | 02:38 | application.applicationname
that's available throughout the website.
| | 02:42 | You can add your own named variables
and those variables will be available to
| | 02:46 | all the pages of the website.
| | 02:48 | There are lots of uses
for this application scope.
| | 02:51 | The application variables persist in
server memory and every page that's
| | 02:55 | a participant in this application
will have access to the variables in
| | 02:59 | the application scope.
| | 03:01 | Now in the next video, I will show
you a special tool that's a part of the
| | 03:04 | application architecture, the global data
source variable, a new feature of ColdFusion9.
| | Collapse this transcript |
| Using an application data source variable| 00:00 | Among ColdFusion 9's many new
features is the ability to define a global
| | 00:05 | application level data source variable.
| | 00:08 | This data source variable, which you
define in your Application.cfc file, is
| | 00:12 | used both in the traditional CF
Query architecture and in the new Object
| | 00:16 | Relational Mapping or ORM
architecture to enforce a single data source name
| | 00:21 | for the entire application.
| | 00:22 | Here's how you use it.
| | 00:24 | In the Application.cfc file, which
is placed in the root folder of your
| | 00:27 | application, you set a
variable called datasource.
| | 00:31 | It looks like this.
| | 00:32 | I will say cfset this.datasource
equals and then I'll name the
| | 00:38 | photogallerydb data source.
| | 00:40 | This now becomes not just an
application variable but a globally available
| | 00:44 | variable that will be automatically
applied to all <cfquery> tags that don't
| | 00:49 | already have a data source and to all
calls to entities managed by the ORM
| | 00:54 | architecture or Object Relational Mapping.
| | 00:57 | So far this application only
uses traditional CF queries.
| | 01:00 | I will demonstrate how this works by
saving the changes to my Application.cfc
| | 01:05 | and then opening index.cfm and I'm
going to remove the data source attribute
| | 01:10 | from both <cfquery> tags.
| | 01:14 | I'll save the changes and then preview
the page in the browser and you'll see
| | 01:18 | that the page still displays exactly
correctly and that we are still getting
| | 01:22 | dynamic data from the first query.
| | 01:24 | I will go back to the source and I'll
change the <cfdump> tag so that it's once
| | 01:29 | again outputting the query named
qPhotos and then I will preview it again and
| | 01:34 | you'll see that the data
is being returned correctly.
| | 01:37 | Now in previous versions of ColdFusion,
I would have had to put in the data
| | 01:41 | source attribute in each <cfquery> tag
and output a variable in that location.
| | 01:46 | Essentially ColdFusion9 lets us manage
the application level data source without
| | 01:51 | that additional work.
| | 01:53 | All you have to do is name the data
source in the Application.cfc file and then
| | 01:57 | your CF queries will default
to using that named data source.
| | 02:02 | I can also go to the CFCs that
were generated from the RDS Dataview.
| | 02:07 | The PHOTOGRAPHERGateway.cfc file, for
example, names the photogallerydb data
| | 02:12 | source throughout but it's
really not needed anymore.
| | 02:15 | So, I'm going to select that data source
attribute and its value and I will copy
| | 02:19 | it to the clipboard.
| | 02:20 | Then I'll press Ctrl+F on Windows or
Command+F on Mac and this will take me to
| | 02:25 | the Find and Replace dialog.
| | 02:27 | I will press Ctrl+V to paste or Command+V
on Mac and paste in the data source setting.
| | 02:32 | I'll leave the Replace With
selector blank and then click Replace All.
| | 02:37 | I will see three matches replaced.
| | 02:39 | I will close and save that file and
close it down and then I'll go get the other
| | 02:45 | file that names that data
source repeatedly, PHOTOGRAPHERDAO.
| | 02:47 | I will press Ctrl+F or Command+F on Mac.
| | 02:52 | Once again I will paste in the data
source setting and click Replace All and
| | 02:56 | this time I see four matches were replaced.
| | 02:58 | I will close the dialog
and save and close the CFC.
| | 03:02 | Now to test that change, I will go back to
the photographers directory and open index.cfm.
| | 03:07 | At the top of this code, I have a little bit
of <cfscript> that's calling those functions.
| | 03:12 | I'll test the page in the browser and once
again, I'll see that the data output is intact.
| | 03:17 | So, once the application level data source is set,
you don't have to worry about it anymore.
| | 03:22 | And later on, if you need to change
the data source for your application,
| | 03:26 | you can go into this one file, Application.
cfc, change the value of the data source
| | 03:31 | variable once and it will affect
the entire ColdFusion application.
| | Collapse this transcript |
|
|
7. Using ColdFusion Object Relational Mapping (ORM)Generating an ORM map component| 00:00 | One of the most important new
features of ColdFusion 9 is ColdFusion Object
| | 00:05 | Relational Mapping or ORM.
| | 00:07 | This is a feature that's based on
an architecture named Hibernate.
| | 00:11 | Hibernate is a Java-based framework that
allows developers to work with back-end
| | 00:16 | databases without having to
write a lot of explicit SQL code.
| | 00:21 | ColdFusion 9 adds a new layer that
lets you address your databases without
| | 00:26 | having to write too much SQL and really
simplifies the methods of database access.
| | 00:32 | In this first demonstration of the
chapter, I'm going to describe how to use
| | 00:36 | ColdFusion Builder to generate an
Object Relational Mapping file for a
| | 00:41 | particular database table.
| | 00:43 | Each database table will be
represented by an ORM mapping CFC.
| | 00:48 | It'll be a ColdFusion
component but it will be very simple.
| | 00:51 | It will contain a set of <cfproperty>
tags, each representing a column of
| | 00:56 | your database table.
| | 00:57 | It'll have a couple of new properties
that we haven't seen before and it will
| | 01:02 | allow you to get data from the table
and manipulate the data without having to
| | 01:06 | write too much explicit SQL code.
| | 01:10 | For this chapter, I'll be creating all
of the exercise files from scratch and
| | 01:14 | then I'll be doing some sample
work in the PhotoGallery application.
| | 01:19 | If you're following along, go to the
Essential Training project and create a new
| | 01:23 | folder and name it orm or ORM.
| | 01:28 | Now we're going to use that folder to
create a number of ColdFusion components.
| | 01:33 | So, create another subfolder under
that named cfc and that's where our
| | 01:38 | mappings will be placed.
| | 01:40 | Now to simplify the generation of the
mapping files, I'll use the RDS Dataview.
| | 01:45 | I will go to the RDS Dataview and open
the current server, localhost, and
| | 01:51 | I'll go to my sample database,
photogallerydb, and from there, to the Tables list.
| | 01:58 | In this first demonstration, I'll create
the mapping for the PHOTOGRAPHER table.
| | 02:02 | I will right-click on the table name
or Ctrl-click on Mac and I will select
| | 02:07 | Adobe CFC Generator > Create ORM CFC.
| | 02:12 | The dialog box asks me where
I'd like to create my CFCs.
| | 02:16 | I will click the Browse button and I
will navigate to the ColdFusion web root.
| | 02:22 | On Windows, it's C:\ColdFusion9
\wwwroot and on Mac, it'll be
| | 02:29 | applications\ColdFusion9\wwwroot.
| | 02:35 | From there, I'll select the CF 9
Essential Training folder or cf9esst and from there,
| | 02:42 | I'll go down to orm > cfc.
| | 02:45 | On Windows, it'll look like this.
| | 02:48 | Notice that this dialog box will put in
forward-slashes instead of backslashes.
| | 02:52 | That's exactly what you want.
| | 02:54 | Regardless of whether you're working on
Windows or Mac, the directory structure
| | 02:58 | from the ColdFusion9 directory
will be wwwroot/cf9esst/orm/cfc.
| | 03:07 | On Mac, there's a checkbox labeled Script CFC.
| | 03:11 | If you select it, your ColdFusion
component will be generated using ColdFusion
| | 03:16 | scripting or CFScript.
| | 03:18 | Throughout this video series, I am
using the traditional tag-based ColdFusion
| | 03:22 | markup language instead.
| | 03:24 | So if you want your files to exactly match
mine, don't select that option. Click OK.
| | 03:31 | That takes you into the Adobe CFC
Generator for Object Relational Mapping.
| | 03:36 | This tool examines the structure of the
database table that you selected and
| | 03:40 | it diagnoses and reports the different
data types for the columns, the properties
| | 03:45 | for the CFC it will generate and
whether each column is a primary key or not.
| | 03:50 | The Object Relational Mapping
architecture will produce something called an entity.
| | 03:54 | An entity is kind of like a value object.
| | 03:58 | It's a declaration and encapsulation of
the data for one row from your record set.
| | 04:04 | I'm going to accept all of the default
settings for the four columns of this table,
| | 04:08 | PHOTOGRAPHER, and
then I'll click Generate Code.
| | 04:14 | I get back the message right away, 'Code
generated successfully,' in the selected
| | 04:18 | directory, and then I'll click Close.
| | 04:21 | Let's take a look at the
files that were generated.
| | 04:23 | I will go to the Navigator view and I
clicked on the folder and pressed F5,
| | 04:28 | which means Refresh on Windows.
| | 04:31 | If you are working on Mac, you can
right or Ctrl-click and choose Refresh.
| | 04:35 | And you should see that the cfc
folder now has three new files.
| | 04:39 | There is a new Application.cfc file, a
new PHOTOGRAPHER.cfc and a file called
| | 04:45 | PHOTOGRAPHERService.
| | 04:48 | Let's take a look at PHOTOGRAPHER.cfc.
| | 04:52 | This is your ORM mapping
file for the PHOTOGRAPHER table.
| | 04:56 | I will expand the code to full screen,
so you can see as much as possible.
| | 05:01 | Now, I'll put in some hard returns.
| | 05:03 | Each column of the database table
is represented by a <cfproperty> tag.
| | 05:08 | The table named and its schema are
represented in the <cfcomponent> tag up at the top.
| | 05:15 | The table's name is
PHOTOGRAPHER and the schema is APP.
| | 05:19 | Now, the schema setting will change
depending on which database you're working with.
| | 05:23 | I'm working with Apache Derby and so the
schema setting of APP will work for this.
| | 05:28 | My first property is the PHOTOGRAPHERID
and notice that the fieldtype is set as id,
| | 05:34 | which means it's the primary key,
and the ormtype is set as int for integer.
| | 05:40 | The FIRSTNAME and LASTNAME both have
an ormtype of string and the last column
| | 05:45 | FEATURED has an ormtype of int.
| | 05:48 | Now that's all I have to do for this
component. I don't need to make any changes to it.
| | 05:52 | It came up perfect from
the Code Generation tool.
| | 05:56 | Now let's take a look at PHOTOGRAPHERService.
| | 05:57 | PHOTOGRAPHERService is a component
that you may or may not decide to use.
| | 06:04 | It contains convenience methods that
make it a little bit easier to call the ORM
| | 06:09 | functionality, but not that much easier
because as you will see, for example,
| | 06:14 | in the createItem function, all it's
doing is calling a method called entitysave
| | 06:20 | and passing in an object that is to be saved.
| | 06:23 | Similarly, if I go to the
getAllItem method, I see that it's calling a
| | 06:27 | ColdFusion function called entityload,
which passes in the name of the entity or
| | 06:33 | database table whose data I want to retrieve.
| | 06:36 | So, there's really not that
much to this service component.
| | 06:40 | There's some good code in it, such as
the function that implements paging and
| | 06:45 | you can find a lot of hints about how
to work with Object Relational Mapping
| | 06:48 | entities from examining the generated code.
| | 06:52 | But most of what you need is
right here in the component.
| | 06:56 | There's one other file that was created,
a new Application.cfc, and this will
| | 07:02 | give you a hint about some things that
you must do if you're going to use Object
| | 07:05 | Relational Mapping in
your ColdFusion application.
| | 07:08 | As I described in the chapter on CFCs,
the Application.cfc file is used to bind
| | 07:15 | your entire application together.
| | 07:17 | In this generated version of Application.cfc,
you will see the name variable and
| | 07:22 | the datasource variable, two
variables I've used previously but you'll see
| | 07:27 | another variable called
ormenabled set to a value of true.
| | 07:31 | This application variable is required
and it must be set to a value of true in
| | 07:37 | order to be able to use your Object
Relational Mapping to retrieve and change
| | 07:41 | data in the server-side database.
| | 07:44 | So that's all you need to do to
create a very simple mapping file.
| | 07:48 | Now, in the following chapters, I'll
give you some tips about how to call this
| | 07:52 | functionality to retrieve and
filter data in the back-end database.
| | Collapse this transcript |
| Enabling an application to use ORM| 00:00 | In order to use the Object
Relational Mapping feature on ColdFusion,
| | 00:04 | an application must be enabled.
| | 00:07 | You enable the ORM feature by setting
a variable named this.ormenabled in an
| | 00:12 | application's application.cfc file.
| | 00:16 | An example of this application.cfc
pattern is created for you when you generate
| | 00:21 | ORM components using ColdFusion Builder.
| | 00:24 | As I've previously described though,
the application.cfc file should be placed
| | 00:29 | in the root folder of an application,
not necessarily in the folder where the
| | 00:33 | ORM components are created.
| | 00:36 | So to demonstrate this, I'm going to
take this application.cfc file that was
| | 00:40 | generated with the photographer
component and I'm just going to drag it up one
| | 00:45 | folder to the orm folder and then I'm
going to be creating the pages in this
| | 00:50 | directory that use the
photographer ORM component.
| | 00:53 | It won't matter where the component is
placed in the directory structure as long
| | 00:58 | as it's somewhere within
the Applications root folder.
| | 01:01 | This all works because in the
background when you create these Object
| | 01:05 | Relational Mapping components,
ColdFusion scans the directory structure of the
| | 01:09 | application and looks for them.
| | 01:12 | You can only have one ORM entity
of any given name anywhere in a
| | 01:16 | particular application.
| | 01:18 | For example, if you accidentally
create two CFCs named photographer,
| | 01:24 | in different directories of the same
application that would create a conflict for
| | 01:28 | the underlying hibernate functionality.
| | 01:31 | So, by using the ORM components, you
will no longer care where the components
| | 01:36 | are stored as long as you
know what their names are.
| | 01:39 | So I've created the components and I've
placed the application.cfc file in the
| | 01:44 | root folder of my current
application, which is the orm folder.
| | 01:49 | In the next step, I'll show you how
easy it is to retrieve data from the
| | 01:53 | database by referencing this new
Object Relational Mapping entity.
| | Collapse this transcript |
| Retrieving data with ORM| 00:00 | After defining a mapping component for
a database table and enabling the ORM
| | 00:05 | functionality in your application.cfc
file, you're ready to retrieve data.
| | 00:10 | For this demonstration, I'll
create a new page in the orm folder.
| | 00:15 | Make sure you are placing this
file in the same directory that
| | 00:18 | contains application.cfc.
| | 00:21 | I'll right-click on the folder and
choose New > ColdFusion Page and I'll name the
| | 00:27 | new page retrieveormdata.cfm.
| | 00:31 | Place the cursor at the top of the
page and make a little bit of space,
| | 00:35 | then create a cfscript section.
| | 00:41 | Place the cursor between the two cfscript tags.
| | 00:43 | When you make a call to data through the
Object Relational Mapping architecture,
| | 00:49 | it will be returned as an array of objects.
| | 00:52 | I'm going to name the returned
array items and I'll call a ColdFusion
| | 00:57 | function named entityLoad.
| | 01:00 | The entityLoad method takes a number of
arguments but only the first is required.
| | 01:05 | I'll pass in the name of
the entity PHOTOGRAPHER.
| | 01:08 | The name of the entity is case-
sensitive even though ColdFusion for the most
| | 01:12 | part is non-case-sensitive.
| | 01:14 | This is because the underlying
technology is Java based and Java is a
| | 01:18 | case-sensitive language. That's it.
| | 01:21 | You don't have to write any SQL code.
| | 01:24 | Everything is handled in the background for you.
| | 01:26 | The entityLoad function, when used in
this very simple manner, retrieves all
| | 01:31 | of the data from the back-end database table
and returns it as an array of complex objects.
| | 01:37 | Now to display the result, I'll go
down to the body tags and I'll place the
| | 01:42 | cursor between them and I'll add a cfdump tag.
| | 01:44 | I'll set the cfdump tag's var attribute
to items, and then I'll preview the page.
| | 01:57 | There is the result. The data is
queried from the back-end database table and
| | 02:01 | it's returned as an instance
of this ColdFusion component.
| | 02:05 | My PHOTOGRAPHER component
in the cf9esstorm.cfc folder.
| | 02:12 | There are many other possible
uses of the entityLoad function.
| | 02:15 | For example, I'll go back to the
source code and I'll add another argument.
| | 02:21 | When you pass in a second argument into
the entityLoad function, you're asking
| | 02:25 | for a specific instance of the
data based on its primary key.
| | 02:30 | I'll pass in a value of three and that
means I'm looking for the role of data
| | 02:34 | in the back-end database table whose
primary key value matches the number three.
| | 02:40 | I'll run the page in
Firefox and there is the result.
| | 02:43 | The one role of data
returned by its primary key.
| | 02:48 | There are other uses of the entityLoad
function too, but I'll show you those in
| | 02:52 | the context of the larger
application, the Photo Gallery.
| | Collapse this transcript |
| Generating mappings for multiple tables| 00:00 | ColdFusion Builder can generate mapping
files for more than one table at a time.
| | 00:05 | To use this feature, you go to the RDS
Dataview and you select as many tables as
| | 00:10 | you want from a particular data source
and then you right-click or Ctrl-click on Mac,
| | 00:15 | on one of the tables and
walk through the ORM Mapping feature.
| | 00:19 | I'm going to demonstrate this in the
Photo Gallery application and I'll place
| | 00:24 | the resulting ORM components into
a new folder under the cfc folder.
| | 00:28 | I will start in the RDS Dataview.
| | 00:31 | I'll click on the first table, the
PHOTO table, I will hold down the Shift key
| | 00:35 | and click on the second table, and
if I had more tables in that same data source,
| | 00:39 | I would be able to
select as many as I needed to.
| | 00:42 | Now, I will right-click on one
of the tables and choose Adobe CFC
| | 00:46 | Generator > Create ORM CFC.
| | 00:49 | Next, I'll indicate where I
want to create my ORM components.
| | 00:54 | I'll browse and I'll navigate
to C:\ColdFusion9 on Windows or
| | 01:00 | /Applications/ColdFusion 9 on Mac and
from there to the wwwroot folder, to the
| | 01:07 | application folder,
photogallery, and from there to cfc.
| | 01:12 | Now, I already have a folder under cfc
called data, but I don't want to mix the
| | 01:17 | ORM components that I'm about to
generate with the more traditional data
| | 01:21 | oriented components that use cfquery.
| | 01:24 | For one reason, they're going to in
many cases have the same name and they
| | 01:28 | would conflict with each other.
| | 01:30 | So, I'm going to create a new folder
under cfc and I'm going to call it orm for
| | 01:35 | Object Relational Mapping and
I'll select a new directory.
| | 01:39 | Then I'll click OK and I'll be
taken into the CFC Generator.
| | 01:44 | In this screen, I can review the data
structures and modify the property types
| | 01:49 | of the components I'm about to generate.
| | 01:51 | One of the changes I can make
is the name of the generated CFC.
| | 01:55 | For example, I really don't like
the all uppercase version of the table
| | 01:59 | name that I'm offered.
| | 02:01 | So, I will go to the PHOTOGRAPHER
component and change it to the same word
| | 02:06 | but with only an uppercase initial character,
and I'll do the same thing with the PHOTO table.
| | 02:11 | Changing from PHOTO all
uppercase, to Photo mixed case.
| | 02:16 | I'll accept all of the other settings
and I will click the Generate Code link.
| | 02:22 | I get back the message that the code has been
generated successfully in the orm directory.
| | 02:28 | I'll close the CFC Generator dialog, go
back to the photogallery website to the
| | 02:33 | cfc directory and I'll refresh it.
| | 02:36 | And I'll see that my new orm directory
has been created and the new CFCs are there.
| | 02:42 | For each table that I generated CFCs
for, I will have one CFC file named
| | 02:47 | the same as the table.
| | 02:49 | That's my Object Relational Mapping file.
| | 02:51 | It describes the different properties
and columns of the database table and
| | 02:56 | I'll have a service file, which contains
methods such as createItem, deleteItem,
| | 03:01 | getAllItem and so on and so forth.
| | 03:04 | Now there's one modification I need to
make to integrate these components into
| | 03:07 | the overall application.
| | 03:10 | When you generate the components,
ColdFusion Builder creates an
| | 03:13 | Application.cfc in the same folder.
| | 03:17 | This is a good example file but you
don't want to leave the CFC in this
| | 03:21 | location, because it will cause
these CFCs to be a part of a different
| | 03:25 | application than the rest of
the website directory structure.
| | 03:29 | I do however need this one line
of code in the application's CFC,
| | 03:34 | this.ormenabled = true.
| | 03:36 | So, I'll select that line of
code and copy it to the clipboard.
| | 03:40 | Then I'll close this file and
I'll delete it from the orm directory.
| | 03:45 | I don't need it anymore.
| | 03:47 | Then I will go back to the
Application.cfc file in the root folder of the
| | 03:51 | application and I'll paste that line
of code into this version of the CFC.
| | 03:56 | I'll clean up the code a
little bit and then I will save it.
| | 04:02 | And now I've generated all the
database access code that I need for the whole
| | 04:06 | application through just a few
little gestures in the RDS Dataview and
| | 04:11 | a little bit of code modification,
moving one line of code from the
| | 04:15 | Application.cfc file that was
generated into the version of the CFC that
| | 04:19 | manages my whole application.
| | Collapse this transcript |
| Filtering data with ORM| 00:00 | In my Photo Gallery application so far,
I've generated my CFCs for Object
| | 00:05 | Relational Mapping for both of
my tables PHOTO and PHOTOGRAPHER.
| | 00:09 | Now I'm going to go back to the home
page of the website and change how the
| | 00:14 | data is being retrieved, so that
instead of using SQL statements, I use much
| | 00:19 | more concise ORM syntax.
| | 00:21 | I will go to the top of the index.cfm
file and comment out the two cfquery tags.
| | 00:26 | I will select those tags and then on
the CFML toolbar, I will click the Comment
| | 00:33 | icon to comment out that code.
| | 00:35 | Now to replace that code, I will
create a pair of cfscript tags.
| | 00:42 | Within the cfscript tags, I'm going
to call the entityLoad function again
| | 00:47 | to retrieve the photographer data,
but I'm going to filter the data so that
| | 00:52 | I'm only retrieving the one photographer record,
where its featured column has a value of 1.
| | 00:58 | I will be introducing here the
filtering syntax for the entityLoad function.
| | 01:03 | Here's how it looks.
| | 01:06 | I'll create a variable called items
by calling the entityLoad function.
| | 01:09 | And I will pass in the name
of the entity, Photographer.
| | 01:12 | Remember that this name is case-sensitive.
| | 01:15 | Now, in the second argument, instead
of passing in a simple value which would
| | 01:20 | mean that I'm requesting a photographer
object by the primary key or ID, I will
| | 01:25 | instead pass in a complex object.
| | 01:28 | A complex object is represented in
ColdFusion markup language by a pair of
| | 01:34 | braces wrapped around one
or more name value pairs.
| | 01:38 | For each name value pair, the name
represents a database column and the value
| | 01:43 | matches the value that you're looking for.
| | 01:45 | In this case, I will pass in a value
of featured = 1 and then I will place a
| | 01:50 | semicolon at the end of the line.
| | 01:52 | Now, to debug this and make sure that
I'm getting the data that I want, I will
| | 01:56 | place the cursor above the h1 tag and
add a cfdump tag and I will set its var
| | 02:02 | attribute to dump the contents
of the items object to the screen.
| | 02:08 | And then to make sure I don't
continue processing the rest of the page,
| | 02:12 | I will add a cfabort tag.
| | 02:14 | This is a very quick and easy debugging
trick. First you output the information
| | 02:18 | that you want to the screen and
then by calling cfabort, you stop from
| | 02:23 | processing the rest of the page.
| | 02:24 | I will preview the page in the browser
and it confirms that I get back an array
| | 02:30 | of one object and notice that the one
object I get back is the one where the
| | 02:34 | featured column has a value of 1.
| | 02:37 | Now, to output the properties of
this object to the screen, instead of
| | 02:41 | using simple dot syntax such as I'm
using now, .Firstname, I'm going to use
| | 02:47 | getter methods that are automatically
generated in my Object Relational Mapping component.
| | 02:52 | So, in the cfoutput tag instead of
qPhotographer.Firstname, I will pass in items
| | 02:59 | open bracket, 1, closed bracket,
.getFirstName as a method call.
| | 03:05 | Then I will select that code and press
Ctrl+C or Command+C on Mac to copy it to
| | 03:11 | the clipboard and then I'll paste it
in replacing the LastName call and I'll
| | 03:16 | modify that code, so that I am
outputting the value of the Last Name column by
| | 03:21 | once again calling the getter method.
| | 03:23 | I'll take the cfabort tag and move it
down a few lines by holding down the Alt
| | 03:28 | key and pressing the Down Arrow key.
| | 03:30 | I will save my changes and preview the
page and I'll see that once again I'm
| | 03:35 | successfully outputting dynamic data.
| | 03:38 | Now, let's do another bit of filtering code.
| | 03:40 | I will place the cursor right in the
cfscript section, right after the call to
| | 03:45 | the entityLoad function to get
photographer data and I'll make another call that
| | 03:50 | looks like this, photos = entityLoad,
and I will pass in the name of the Photo
| | 03:56 | entity and then once again
I will use filtering syntax.
| | 03:59 | I will put in a pair of curly
braces and then I will filter on the
| | 04:03 | photographerid field, that's the foreign
key field in the PHOTOS table, and I will
| | 04:10 | request only those photos where that column = items,
open bracket, 1, closed bracket, .getPhotographerid.
| | 04:22 | And I will place a
semicolon at the end of the line.
| | 04:25 | So, I'm retrieving the one photographer
record and then I am using array syntax
| | 04:30 | to grab it out of the array, and I'm
calling the getPhotographerid method.
| | 04:36 | Remember that this is a method call,
so you need the beginning and ending
| | 04:39 | parentheses after the name of the method.
| | 04:42 | Even though you didn't write that getter
method, it was created for you, because
| | 04:47 | this is an ORM component.
| | 04:50 | Now, I will move down here to the
cfdump tag that's outputting qPhotos.
| | 04:53 | I will modify it so it's just outputting the
value of photos and I'll remove the cfabort tag.
| | 05:00 | I'll also remove the first cfdump
that's outputting the value of items because
| | 05:07 | I've already successfully output
the first name and the last name.
| | 05:10 | I'll run the page in the
browser and there's the result.
| | 05:13 | Here is the name of the photographer
that I selected and right below it is an
| | 05:18 | array of instances of the photo ORM component.
| | 05:22 | I can then dynamically output
information to the screen by looping through the
| | 05:26 | arrays I've shown before and
grabbing each column using the automatically
| | 05:31 | generated getter method
that's a part of that component.
| | Collapse this transcript |
| Displaying result data with a custom tag| 00:00 | We have now successfully created an
architecture in our website that allows us
| | 00:04 | to reuse code and easily get data from
the backend database without writing a
| | 00:09 | lot of SQL or Structured Query Language.
| | 00:12 | In this video, I'm going to put
together a number of the techniques that
| | 00:16 | you've learned so far.
| | 00:17 | I'm going to create a custom tag that
knows how to render an array of photo
| | 00:22 | objects and I'm going to use that tag
to display the data that was returned
| | 00:27 | from the ORM component.
| | 00:29 | I'll start by creating
the custom tag from scratch.
| | 00:31 | I will place the tag in a new
folder of the Photo Gallery application.
| | 00:35 | I will right-click on the Photo Gallery
project in the Navigator View and I'll
| | 00:40 | create a new folder and I'll name it tags.
| | 00:45 | Now, in the tags folder, I'll create
a new ColdFusion page and I'll name it
| | 00:51 | photodisplay.cfm.
| | 00:56 | This is going to be a custom tag
that's displayed as a part of a webpage.
| | 01:00 | It won't be the whole webpage itself.
| | 01:02 | So, I'm going to remove all of the
code that was generated in the ColdFusion page
| | 01:06 | and I'll replace it with a cfparam
tags that looks like this, cfparam name
| | 01:14 | = "attributes.photos", and I
will set the type as an array.
| | 01:19 | Now, if somebody tries to use this tag
and passes in anything but an array,
| | 01:24 | it will result in throwing an error.
| | 01:26 | I will close the cfparam tag and for the
moment, I will just put in a cfdump tag
| | 01:32 | and I will set its var attribute
using pound signs to attributes.photos.
| | 01:38 | I will save the change to that file
and return to the homepage index.cfm.
| | 01:46 | Down at the bottom, I already have a cfdump tag.
| | 01:48 | I am going to remove that and I will
use the cfmodule tag and I will set the
| | 01:54 | template attribute as follows,
to ../tags/photodisplay.cfm.
| | 02:05 | Then I will pass in the required photos
attribute and the value that I'll pass
| | 02:10 | in will be the existing array in photos
that I got from calling the entityLoad
| | 02:14 | function on the photo component.
| | 02:19 | Now, I'll test the page in the browser
and make sure that all the pieces are
| | 02:23 | still working together.
| | 02:25 | The cfdump output is now
coming from the custom tag.
| | 02:28 | I will go back to the custom
tag now and make some changes.
| | 02:32 | I will get rid of the cfdump tag.
| | 02:35 | I already know that I'm getting what I
need from the array and going to output
| | 02:40 | the following HTML code.
| | 02:41 | I will start with a div tag, with a
style setting of width set to 700 pixels.
| | 02:49 | Within the div tag, I'm going to
loop through attributes.photos.
| | 02:54 | So, I will create a cfloop tag set
using 'from' set to 1 and 'to' set to a dynamic
| | 03:00 | value of arrayLen wrapped
around attributes.photos.
| | 03:07 | And I will set the index attribute to
a value of i, meaning that each time
| | 03:11 | through the loop I'll create a new
variable named i, set to the new index value.
| | 03:15 | Within the loop I'll create a new variable
pointing to the current photo object like this.
| | 03:22 | I'll say cfsetphoto = attributes
.photo, bracket, i, bracket.
| | 03:29 | Now, I should have a single photo object
that represents the current photo in the list.
| | 03:35 | I am going to put in a cfdump tag
here now with a var attribute and I will
| | 03:41 | output just that one object.
| | 03:43 | I will save the change, return back to
the homepage and run it in the browser again
| | 03:50 | and once again, I see all of the
photos, but notice now that they're not
| | 03:55 | grouped into the array.
| | 03:57 | They're being dumped to the
screen one object at a time.
| | 04:01 | I'm in really great shape.
| | 04:02 | Now I want to write a combination of
some HTML code and ColdFusion output code
| | 04:08 | that renders an individual photo.
| | 04:10 | I will place the cursor after the
cfset command before the cfdump and
| | 04:16 | I'll create a pair of div tags.
| | 04:19 | Within the div tags I will create an
image tag and I'll set the source attribute
| | 04:24 | to the following address, ../images/
gallery/, and then I'll call the photo
| | 04:33 | object's getFileName method.
| | 04:36 | This is a dynamically generated getter
method that was added to the component
| | 04:41 | when it was generated by ORM.
| | 04:43 | The code will look like this,
#photo.getFileName, as a method call.
| | 04:53 | The rest of the code in the
image tag will simply size the image.
| | 04:56 | I will set the width to 100 pixels.
| | 04:59 | Now, I will create a set of div tags
right below that and within those div tags,
| | 05:04 | I will output the caption.
| | 05:06 | I'll use the following code, #photo.getCaption.
| | 05:12 | Again I know that this method exists
because there's a caption column in the table
| | 05:16 | and I used an ORM component to
address that column, and the ORM component
| | 05:22 | automatically creates
the required getter method.
| | 05:26 | Now, I'm going to wrap
another div tag around these.
| | 05:30 | This will group them together and I will be
able to apply some styles to the outer div.
| | 05:34 | I will go to the starting tag and I'll
add a style attribute and I will set the
| | 05:40 | following values, float set
to left and margin set to 5px.
| | 05:48 | I use the float attribute because it
will cause the images to line up one right
| | 05:53 | next to another instead of stacking
from top to bottom, and the margin of 5
| | 05:57 | pixels all around will create a little
bit of separation between the images.
| | 06:03 | Now, I'll select those two div
tags and indent a little bit, so I can
| | 06:07 | clearly see how this code is constructed and
I'll remove the cfdump tag down at the bottom.
| | 06:12 | I no longer need it.
| | 06:14 | This is the complete code for the custom tag.
| | 06:16 | Let me walk through the code one more time.
| | 06:19 | The cfparam tag at the top
ensures that an array is passed in as an
| | 06:23 | attribute named photos.
| | 06:26 | A div tag with the style of width set
to 700 pixels ensures that that's the
| | 06:31 | overall width of the photo display.
| | 06:33 | A cfloop tagset loops through the
photos array and then within the loop grabs
| | 06:39 | each photo one at a time and
saves it in a variable named photo.
| | 06:44 | Then there's a div tag that floats to the
left and has a margin of 5 pixels all around.
| | 06:50 | Within that div tag there are two other
div tags, one containing the image with
| | 06:55 | the width set to 100 pixels and one
containing the caption of the photo.
| | 07:00 | I'll save the changes to the custom
tag and I'll return to the homepage and
| | 07:05 | refresh it in the browser and
I'll see that my custom tag is closed.
| | 07:09 | Whenever you see the pound signs and the
code on the screen though, it's a trigger
| | 07:13 | to tell you that you've missed one
essential step, the cfoutput tags.
| | 07:16 | I will return back to the custom tag
code and I'll place the cursor right after
| | 07:22 | the cfset command and
create a pair of cfoutputs.
| | 07:25 | Then I will take the end tag for
cfoutput, I'll cut it to the clipboard and
| | 07:32 | place it below the div tag
that's displaying the image.
| | 07:35 | I will save my changes, I will once
again go back to the homepage and I will
| | 07:41 | refresh and there is the result.
| | 07:44 | I'm now seeing the images
displayed on the screen in a sort of grid.
| | 07:48 | I can make any other changes I want
to the display now by modifying the
| | 07:52 | Cascading Style Sheet rules and
seeing what the effect might be.
| | 07:56 | I'll go back to photodisplay.cfm for
example and say let's find out what happens
| | 08:02 | if instead of a width of 100 pixels
per image, I set it to a value of 150.
| | 08:06 | I will save the changes to the custom tag,
go back to the homepage and refresh.
| | 08:13 | And that looks a little bit better.
| | 08:15 | There's one more little style sheet
trick I will play to finish this page.
| | 08:20 | Notice that the copyright is
floating right next to the last image.
| | 08:23 | I will go back to the custom tag.
| | 08:27 | In the styles.css file that's
attached to this and all of the pages of my website,
| | 08:32 | there's a definition
of a class called clearfloat.
| | 08:36 | I will go to the bottom of the custom
tag and I'll add a div tag and set it to a
| | 08:41 | class of clearfloat, and I will
close the tag just with an end tag.
| | 08:50 | I am not putting any actual code in there.
| | 08:52 | I will save the change, go back to
the homepage and refresh and that moves
| | 08:58 | the copyright down.
| | 09:00 | Here is why this is working.
| | 09:01 | I will go to the styles.css
file that's linked into this page.
| | 09:06 | You will find it in the root folder of
the photogallery application and then
| | 09:11 | I'll search for clearfloat.
| | 09:16 | The clearfloat class, which was
already declared in the styles.css file, uses
| | 09:22 | this clear property to say don't float
either left or right. Clear any existing
| | 09:28 | objects, and that causes the next div
tag after the current one to take its own
| | 09:33 | horizontal band in the page.
| | 09:36 | This custom tag can now be used
anywhere in the application to display an array
| | 09:41 | of ORM photo objects.
| | 09:44 | I'll be using it at one other point of
the application, but because it's in a
| | 09:47 | custom tag, to use it again all we'll
have to do is once again use the cfmodule tag
| | 09:53 | and pass in the appropriate data.
| | 09:56 | As long as I pass in an array of the
right type of object, this custom tag
| | 10:00 | will work beautifully.
| | 10:02 | My homepage is now completely finished and I'm
ready to move on to other parts of the website.
| | Collapse this transcript |
|
|
8. Creating Drill-Down NavigationPassing URL variables in hyperlinks| 00:00 | When you build a website with a dynamic
application server such as ColdFusion,
| | 00:04 | you can provide the user with the
ability to select data by simple mouse-clicks.
| | 00:10 | This sort of interface is
commonly known as a drill-down interface.
| | 00:14 | You provide a list of data with each
item with a hyperlink and then you let the
| | 00:19 | user click to drill down and select
that category or segment of the data.
| | 00:24 | I'll start in this first
demonstration by showing you the basics of how
| | 00:27 | variables get passed from page to page.
| | 00:30 | These variables are variously known as
query string variables in some languages,
| | 00:35 | but in ColdFusion as URL variables.
| | 00:38 | They're basically the same thing.
| | 00:40 | They're variables that are defined
within the URL that tells the browser
| | 00:44 | where to navigate to.
| | 00:46 | You set both the name and the value
of the variable in the URL and in the
| | 00:51 | receiving page you can process that
variable and do something with it.
| | 00:55 | If you have access to the Exercise
Files, go to them now and go to the
| | 01:01 | ch08drilldown folder and from there
locate the drilldown folder, which contains
| | 01:06 | a number of starting pages.
| | 01:08 | Each of these is a very simple
beginning page, so if you don't have access to
| | 01:12 | the Exercise Files, you'll be
able to create them for yourself.
| | 01:15 | From the ch08drilldown folder, select and
copy the drilldown folder to the clipboard.
| | 01:22 | Then go back to ColdFusion Builder, go
to the Essential Training project, and
| | 01:27 | paste that folder into
place and then open it up.
| | 01:31 | You'll see that there are six starting pages.
| | 01:34 | Start with drilldownmaster.cfm.
| | 01:37 | Place the cursor within the body
tags and then go up to the toolbar and
| | 01:42 | choose the html toolbar and click the
h1 tag set and type in to the h1 tag set,
| | 01:49 | Drill down master.
| | 01:53 | Open drilldowndetail.cfm and follow
the same set of steps, creating in h1 tag set
| | 02:00 | and then type into the middle
of that tag set, Drill down detail.
| | 02:07 | Now go back to drilldownmaster.cfm.
Place the cursor after the h1 tags and type
| | 02:13 | in the text Click Me.
| | 02:15 | Then select that text.
| | 02:17 | With the text selected go back up to
the html toolbar and click the icon with
| | 02:22 | the little chain-link.
| | 02:23 | It's labeled Wrap with <a> tag.
That wraps the text with an anchor tag.
| | 02:29 | In HTML, an anchor tag tells the browser
when clicked to navigate to the target page.
| | 02:35 | And you define the target
page in the href attribute.
| | 02:38 | Go to the href attribute and delete the
text, Click Me, and type in the name of
| | 02:43 | the page you want to
navigate to, drilldowndetail.cfm.
| | 02:49 | Save your changes to all pages by going
to the menu and choosing File > Save All.
| | 02:54 | Then preview the page in your web
browser by clicking the tab at the bottom
| | 02:58 | of the editing area and go to the
link and click it and you should get to
| | 03:03 | the Drill down detail.
| | 03:05 | Okay, so far so good.
| | 03:07 | We have a working hyperlink
going from one page to another.
| | 03:10 | Now I will pass it a variable
from the master to the detail page.
| | 03:15 | Place the cursor after the name of the page
in the anchor tag but before the closing quote.
| | 03:22 | I'll expand my code to full screen so we
can see all of the code at the same time.
| | 03:26 | In order to pass a variable from one
page to another, you place a question mark
| | 03:30 | character right at the end of the page
name and then for each variable that you
| | 03:35 | want to pass from the master to the
detail page, you put in the name of the
| | 03:39 | variable, an equals operator
and the value of the variable.
| | 03:43 | I'll pass the variable with a name
of firstname and a value of Maya.
| | 03:50 | Notice something very important.
| | 03:52 | I am not wrapping value with quotes.
| | 03:55 | You can't include quotes, ampersands,
additional equals operators or question marks
| | 04:01 | or other spaces or special
characters in a URL value without processing it
| | 04:07 | in a special way.
| | 04:08 | But this'll be enough
information for the moment.
| | 04:12 | Now let's go to drilldowndetail.cfm.
| | 04:15 | When you passed a variable from a master
to a detail page as part of the URL,
| | 04:20 | it appears in the receiving
ColdFusion page in a scope called URL.
| | 04:24 | I will use the cfdump tag
to display the received data.
| | 04:29 | I will type in cfdump and a space.
| | 04:33 | I'll select the var attribute.
| | 04:36 | I'll put it in a pair of pound signs
and I will wrap the pound signs around the
| | 04:40 | scope name URL and then
I'll close the cfdump tag.
| | 04:44 | I'll go back to the master page.
| | 04:47 | I once again save all
changes and preview the page.
| | 04:52 | When I click on the link this time and
I go to the detail page, I'll see the
| | 04:56 | cfdump output showing the variable
firstname with the value of Maya.
| | 05:01 | So, now I'll go back to the detail page code.
| | 05:04 | I'll go back to code in the master and
then select the detail and I'll show you
| | 05:08 | how to explicitly output that particular value.
| | 05:12 | I'll create a pair of cfoutput tags and
within the cfoutput tags, I will type in
| | 05:16 | a literal string of Welcome and then
a space and then within a pair of pound signs
| | 05:21 | url.firstname and then I'll add
a little exclamation mark at the end of
| | 05:27 | the string to make it a little more dramatic.
| | 05:30 | I'll once again save all
changes, selecting File > Save All.
| | 05:35 | I'll go back to the master page and
preview it in the browser and click and
| | 05:40 | there is the result, the explicit
string Welcome Maya that outputs both the
| | 05:45 | literal string and the dynamic URL variable.
| | 05:48 | So here is what we've learned in this exercise.
| | 05:51 | You passed URL variables, also known
in some web languages as query string
| | 05:56 | variables, by adding a question mark
after the page name in the anchor tag and
| | 06:01 | then passing the variable
name and the variable value.
| | 06:04 | In the receiving or detail page, you
referenced the variable by prefixing it
| | 06:09 | with URL and then addressing the name itself.
| | Collapse this transcript |
| Passing multiple URL variables| 00:00 | When you're passing data from one page
to another by wrapping the data into URL variables,
| | 00:05 | you can pass as
many variables as you need to.
| | 00:09 | For this demonstration, I'll
use two pages, multivarmaster
| | 00:13 | and multivardetail.cfm.
| | 00:15 | In the master page, take
a look at the anchor tag.
| | 00:19 | You'll see that the href attribute
references the new detail page and as in the
| | 00:23 | previous exercise, passes one variable
called firstname with a value of Maya.
| | 00:29 | In order to pass multiple variables
in a URL, you separate them with an
| | 00:33 | ampersand character and then you pass
in another name value pair separated by
| | 00:38 | the equals operator.
| | 00:39 | So I'll set lastname=Angel.
| | 00:44 | Notice that there are no spaces around
the equals operators or the ampersands
| | 00:48 | and that once again you don't wrap
the values with any quotes and you can't
| | 00:52 | include any explicit quotes, ampersands,
equals operators, or other spaces or
| | 00:58 | special characters in the variable values.
| | 01:01 | Now I'll go to multivardetail.cfm.
| | 01:04 | In this page, I'll place the cursor
right after url.firstname, after its ending
| | 01:09 | pound sign, but before the exclamation mark.
| | 01:13 | I'll add a space and then I'll
output the value url.lastname.
| | 01:17 | I'll go back to the master
page and choose File > Save All.
| | 01:23 | Then I'll preview the page in the
browser and click the link and you'll see
| | 01:28 | first in the cfdump section that the
entire URL scope is dumped to the screen
| | 01:33 | including both variables, firstname
and lastname, and in the explicit output
| | 01:38 | section below, I am outputting both
the firstname and the lastname values.
| | 01:43 | Now I'll go back and do one more step
so we can simplify the output and see
| | 01:47 | easily what we're getting in the browser.
| | 01:50 | I'll go back to multivardetail.cfm and
I'll select the cfdump tag and comment it out.
| | 01:57 | I'll select File > Save All, go back to
the Master, and this time, I'll run the
| | 02:03 | page in an external browser, by
clicking the Run button on the toolbar.
| | 02:07 | I'll click the link, Click Me.
| | 02:10 | This time I only get the
dynamic output without the cfdump.
| | 02:13 | I'll right-click on the page and
select View Source or View Page Source,
| | 02:17 | depending on which browser you're in,
and you'll see that, as with all ColdFusion pages,
| | 02:22 | that what's returned to the
browser is only the result of the dynamic
| | 02:26 | expressions, firstname and lastname.
| | 02:29 | So that's a look at how to pass
multiple variables in the URL.
| | 02:33 | Once again, you separate the
variables with an ampersand character.
| | 02:38 | You don't include spaces in the
variable names or values and you don't include
| | 02:42 | any other special characters in the
variable values without special processing,
| | 02:47 | which I'll show you in a separate video.
| | Collapse this transcript |
| Encoding URLs with URLEncodedFormat()| 00:00 | When you pass data from one page to
another, you're restricted to passing a
| | 00:04 | certain set of characters:
| | 00:06 | alphanumeric characters, dashes
and a very small set of others.
| | 00:12 | If the value that you need to pass
is going to contain ampersands, spaces,
| | 00:16 | question marks or other special
characters, you must explicitly encode the URL
| | 00:21 | value in some fashion, so that it's
safe to pass from one page to another.
| | 00:27 | For this demonstration, I'll use
the pages encodedurlmaster.cfm and
| | 00:32 | encodedurldetail.cfm.
| | 00:35 | This master page currently passes
two separate variables, firstname and
| | 00:40 | lastname, to the detail page.
| | 00:41 | I am going to change this URL so
that I am passing a single variable that
| | 00:46 | include spaces and an ampersand and I'll
show you how the browser deals with that.
| | 00:51 | I'll change the name of the variable to
companyname and I'll pass a full string
| | 00:56 | of Maya Angel and then I'll include
an ampersand and a little bit of extra
| | 01:01 | literal text at the end.
| | 01:03 | I've broken the rules for how you pass
URL variable values by including the
| | 01:08 | spaces and ampersands.
| | 01:11 | Now I'll go to the detail page and
I'll change the page so that I am
| | 01:15 | outputting url.companyname.
| | 01:19 | I'll go back to the master page and
choose File > Save All and I'll preview the
| | 01:24 | page in the browser.
| | 01:27 | Then I'll click the link and you'll see
that the value passed to the detail page
| | 01:31 | is truncated at the ampersand.
| | 01:33 | This is because the
ampersand is a reserved character.
| | 01:38 | It's used to separate
multiple variables in the URL.
| | 01:42 | There are other characters that
will cause even bigger problems.
| | 01:45 | Here is the bottom line.
| | 01:46 | If you need to pass a value that might
include one of these special characters,
| | 01:49 | you must encode it for passing on the URL.
| | 01:53 | I'll place the cursor above the
anchor tag and I am going to create a cfset
| | 01:57 | command here and I'll create
a variable called URL value.
| | 02:00 | I'll set the URL value by
calling the method urlEncodedFormat.
| | 02:06 | Then I'll create a pair of quotes, then
I'll go down to the anchor tag, I'll cut
| | 02:11 | that string to the clipboard and paste
it into the quotes, and I'll close the
| | 02:16 | csfset command with the
closing greater than character.
| | 02:19 | Now to actually pass the value,
I'll move the cursor back to after the
| | 02:23 | equals operator and I'll put in a
pair of pound signs and I'll output the
| | 02:29 | value variables.urlvalue.
| | 02:32 | Then I'll be sure to wrap the entire
anchor tag with a pair of cfoutputs.
| | 02:37 | Remember that the cfoutput tags are
required whenever you want to output the
| | 02:41 | value of a dynamic variable to the browser.
| | 02:45 | When you're placing dynamic values within
an anchor tag, the rules are no different.
| | 02:49 | You must wrap the cfoutput tag
set around the dynamic value.
| | 02:53 | I'll save my change and I'll run
the page in an external browser.
| | 02:59 | I'll click the link and you'll see
that the entire string is now received and
| | 03:03 | displayed by the detail page.
| | 03:05 | So here is what you've
learned in this demonstration.
| | 03:08 | If you're going to pass values in a URL
where those values might include spaces
| | 03:13 | or other special characters,
you must wrap the value inside the
| | 03:17 | urlEncodedFormat function.
| | 03:18 | You don't have to do anything to
decode the format in the detail page.
| | 03:22 | That decoding is done for you.
| | 03:24 | But it's worth seeing how the encoding happens.
| | 03:27 | I'll run that master page in the
external browser again, and I'll move the
| | 03:31 | cursor over the link.
| | 03:34 | If you look down at the bottom of the
browser in the status bar, you'll see that
| | 03:38 | the link is shown very cleanly with
spaces and ampersands, but if I click into it
| | 03:43 | and then look at the link in the web
address, depending on which browser I am using,
| | 03:47 | I'll see something different.
| | 03:49 | In Firefox, the spaces are
interpreted literally, but the ampersand is
| | 03:54 | interpreted as an encoded value %26.
| | 03:58 | But the browser interprets that as an
ampersand as you can see in the display.
| | 04:03 | So again, you don't have to worry
about the decoding of a URL variable.
| | 04:07 | That's done for you, but you
must encode it before you send it.
| | Collapse this transcript |
| Checking for available variables with isDefined()| 00:00 | When you create a pair of pages that
serve as a master and a detail for a drill-
| | 00:05 | down architecture, on the detail or
target page, you should check to see whether
| | 00:09 | the expected variable has been received.
| | 00:12 | Here is what will happen if you don't
add this code that looks for the variable
| | 00:16 | and takes an appropriate action.
| | 00:18 | I'll go to one of the detail pages
I've been working with, encodedurldetail.
| | 00:23 | It's expecting a
variable called url.companyname.
| | 00:27 | I'll run the page in an external browser.
| | 00:29 | Here is the result.
| | 00:31 | Because the url.companyname variable
does not exist yet or has not been defined,
| | 00:36 | ColdFusion throws an error.
| | 00:38 | It says that Element COMPANYNAME is
undefined in URL, and that's correct.
| | 00:43 | So here is how you can solve the problem easily.
| | 00:45 | In the detail page, place the cursor
right up at the top and make some space
| | 00:50 | for some extra code.
| | 00:51 | ColdFusion markup language includes the
function isDefined, which checks for the
| | 00:56 | existence of any named variable.
| | 00:59 | Here is how you can use it in a cfif tag.
| | 01:02 | I'll create a cfif tag and then I'll
call the isDefined function and I'll pass
| | 01:08 | in the name of the variable
I am looking for as a string.
| | 01:13 | Between a pair of quotes
I'll type in url.companyname.
| | 01:19 | That's my Boolean expression.
| | 01:21 | Right now, if the variable exists,
this expression will return true and if it
| | 01:26 | doesn't exist, it will return false.
| | 01:28 | I am really interested in the false condition.
| | 01:32 | What I am going to do if I
did not receive the variable?
| | 01:35 | So to reverse the logic, I'll place
the cursor right before the function
| | 01:39 | isDefined and add the word 'not.' In
ColdFusion markup language, the word not
| | 01:46 | reverses the logic of any Boolean expression.
| | 01:49 | Within the cfif tags,
I'll take a corrective action.
| | 01:52 | In this case, if the variable doesn't
exist I don't want the user to see this page.
| | 01:57 | I'd rather they see the
encodedurlmaster.cfm page.
| | 02:01 | So I'll use the cflocation tag and set
the URL attribute to the name of the page
| | 02:07 | I want them to see, encodedurlmaster.cfm.
| | 02:12 | So this sort of conditional logic
can be used at the top of any page that
| | 02:16 | requires a particular kind of variable,
check to see whether the variable is
| | 02:20 | defined, and if it isn't, send the
user to the page they should be on.
| | 02:24 | I'll test this by saving the page and
running it in an external browser, and
| | 02:29 | you'll see that instead of going to
the detail page, I go to the master page.
| | 02:34 | The master page is displayed in the
rendering area and the name of the master
| | 02:38 | page is listed in the web address.
| | Collapse this transcript |
| Creating a data-driven hyperlink| 00:01 | Once you understand the principle of how
to create a dynamic URL in ColdFusion,
| | 00:06 | you can then apply that to data sets.
| | 00:09 | In this example, I'm going to work with
the index.cfm file in the photographer's
| | 00:14 | folder of the Photo Gallery application.
| | 00:17 | If you've been following along in these
exercises all along, you can just open the file.
| | 00:21 | If you've started with this
chapter in the middle, you can go to the
| | 00:25 | Exercise Files folder, if you have
access to it, to the ch08drilldown
| | 00:30 | folder, to applicationBegin and copy
the contents of this folder over to
| | 00:36 | your website folder.
| | 00:37 | You'll need to make sure that you've set
up your database and data source before
| | 00:40 | working with these files.
| | 00:44 | In the current version of this file, I'm
using the ColdFusion component that was
| | 00:49 | generated and contains traditional cfquery tags.
| | 00:53 | At the top of the page I
create an instance of the component,
| | 00:56 | PhotographerService, and then call its
getAllItem method to return an array of
| | 01:01 | photographer objects.
| | 01:03 | Then I loop through that data to
create an output in HTML table.
| | 01:09 | Here's what the page looks like at this point.
| | 01:12 | Now I'm going to add a hyperlink that
allows the user to click to see the photos
| | 01:17 | for a particular photographer.
| | 01:20 | I'm going to add a new column to the table.
| | 01:22 | I'll start off in the table header row,
placing the cursor after the Last Name
| | 01:27 | header cell and then I'll
create a new pair of th tags.
| | 01:32 | I'm not going to put any
text within those th tags.
| | 01:36 | The th tags are just there to define the column.
| | 01:38 | Then I'll go down to the dynamic row,
the one that's outputting the data, and
| | 01:43 | I'll create a pair of td tags.
| | 01:45 | Now I'm going to display a literal
string of Photos and I'll wrapped that string
| | 01:51 | inside an anchor tag.
| | 01:53 | I'll select the text, then I'll go up
to the HTML tab of the toolbar, and I'll
| | 01:59 | click the Hyperlink button,
the one with the chain-link.
| | 02:02 | That wraps the text inside a hyperlink.
| | 02:05 | Now I'll replace the href text with
the name of a page I want the user to
| | 02:10 | navigate to when they click this link.
| | 02:12 | The page doesn't exist yet but I'm
going to be naming it photolist.cfm.
| | 02:18 | I'll add a question mark
after the name of the page.
| | 02:21 | That means I'm about to pass URL variables.
| | 02:24 | Then I'll set a variable name of
photographerid and an = operator.
| | 02:30 | To fill in that value dynamically, I'll
use the same sort of syntax that I used
| | 02:34 | in the previous td cells.
| | 02:36 | In fact, it's so similar I'll just
copy and paste a bit of the code.
| | 02:41 | I'll select items i .getLastName, including the
pound signs and I'll copy it to the clipboard.
| | 02:47 | Then I'll place the cursor after the
equals operator inside the anchor tag and
| | 02:52 | I'll paste right in that location.
| | 02:57 | Then I'll change the call to method
from getLastName to getPhotographerID.
| | 03:05 | Remember that these are getter
methods that are available in the component.
| | 03:09 | In the case of the components I am
working with right now, the ones that were
| | 03:13 | generated out of the database that
don't use Object Relational Mapping, these
| | 03:17 | methods are generated as a
result of a property called getter.
| | 03:21 | In the case of ORM components,
getter and setter methods are
| | 03:25 | generated automatically.
| | 03:28 | I'll save my changes and then I'll
test the page in an external browser by
| | 03:33 | clicking the Run button on the toolbar.
| | 03:35 | Here are the hyperlinks.
| | 03:37 | Each photographer has a hyperlink
labeled Photos and you can see the result
| | 03:42 | of the dynamic output.
| | 03:43 | If you place the cursor over the
hyperlink and then looked down at the bottom of
| | 03:48 | the browser, at the status bar,
you'll see an output that shows you the URL
| | 03:52 | variable with the name of
photographerid and a value of 1.
| | 03:58 | Now I'll create the target page.
| | 03:59 | I'll go to my templates folder
where I created a starting file.
| | 04:05 | I'll open the file index.cfm, and I'll
save this new file in the photographers
| | 04:11 | folder as photolist.cfm.
| | 04:16 | I'll place the cursor after the h1
tags and I'll put in a cfdump so I can see
| | 04:22 | what's in the URL scope.
| | 04:24 | I'll set a var attribute and a
pair of pound signs and I'll pass in URL.
| | 04:29 | I'll save the changes to that file and
return to index.cfm and run the page in
| | 04:36 | the external browser and I'll click the link.
| | 04:40 | And I'll see that I'm receiving a
variable called photographerid with a value of 1.
| | 04:46 | So I've successfully linked the two
pages together and I am allowing the user to
| | 04:50 | choose which photographer's photos
they want to see by clicking the link.
| | 04:54 | Now in the following video, I'll show
you how to use that variable with another
| | 04:58 | approach to retrieving data from the
database using Object Relational Mapping.
| | Collapse this transcript |
| Displaying selected data in a detail page| 00:00 | In my Photo Gallery website, I've
created this homepage called index.cfm,
| | 00:06 | which dynamically generates hyperlinks
that allow the user to select which
| | 00:11 | photographer's photos they want to see.
| | 00:13 | I've also created the target page
photolist.cfm and for now simply dumped the
| | 00:17 | contents of the URL scope onto the screen.
| | 00:21 | So I'll go back to the master page
and show the hyperlinks and then click
| | 00:26 | into one of the links and show that
the photographerid variable is being
| | 00:30 | received correctly.
| | 00:31 | Now to use that variable, I'm going to
use the same sort of code as I did on
| | 00:36 | the website's homepage.
| | 00:38 | In fact it's going to be so similar
that I'm going to go to the homepage
| | 00:41 | index.cfm in the home directory, and
copy and paste that page's contents.
| | 00:48 | I'll open index.cfm from the websites
home directory and I'll select all of the
| | 00:53 | code after the commented out cfqueries.
| | 00:57 | I'll copy that to the clipboard.
| | 01:00 | I'll return to photolist.cfm, select all of
that code, and then paste in the copied code.
| | 01:07 | I have a couple of
cosmetic changes to make here.
| | 01:12 | First of all, I'm going to make it
a little bit easier to output the
| | 01:15 | photographer's full name.
| | 01:17 | Right now, I am outputting the full
name in the cfoutput section at line 10, by
| | 01:23 | making two separate method calls.
| | 01:24 | I am going to add a little bit of
code right after the existing lines.
| | 01:29 | I'll create a variable called fullname
and then I'm going to select and copy the
| | 01:34 | call to the getFirstName method and
paste it into the new line of code.
| | 01:41 | Then after that I'll put in an
ampersand, a literal space between a pair of
| | 01:45 | quotes and another ampersand.
| | 01:49 | Then I'll select the call to the
getLastName method from the photographer object,
| | 01:53 | copy that to the clipboard and
paste it into my new line of code and
| | 01:59 | I'll end the cfscript
statement with a semicolon.
| | 02:02 | Then I can come down to the
cfoutput block and simplify it enormously.
| | 02:07 | I'll remove everything except the
outer pound signs and I'll output
| | 02:12 | variables.fullname. Because I now have
that photographer's full name in its own
| | 02:17 | variable, I can reuse it again.
| | 02:19 | So I'll select that entire variable
including the pound signs, copy that to the
| | 02:24 | clipboard and then I'll go to the
cfmodule tag that's loading the header and
| | 02:29 | I'll replace the literal string
homepage with the same variable.
| | 02:34 | Then finally the last cosmetic change
will be in the h1 tag. Instead of the
| | 02:38 | string Our Featured Photographer,
I'll output the string Photos by.
| | 02:44 | Now the next part of the process is to
load photographers filtered on the URL
| | 02:49 | variable that's being
sent from the index.cfm file.
| | 02:52 | I'll be receiving a
variable called url.photographerid.
| | 02:57 | I'll place the cursor inside the
filtering syntax where I have two curly braces
| | 03:03 | wrapped around a property setting featured=1.
| | 03:08 | I'll remove the property setting
featured=1 and I'll replace it with
| | 03:12 | photographerid=url.photographerid.
| | 03:18 | There is one last step and that's to
protect the page from being loaded without
| | 03:22 | first going through its master page.
| | 03:24 | In a previous video, I've showed you
how to use the isDefined function to check
| | 03:29 | whether a particular
variable has been defined or not.
| | 03:32 | You can do the same thing in a
cfscript section and in fact, starting with
| | 03:36 | ColdFusion 9, you can now execute or
redirect to another page in script.
| | 03:41 | This is something that in prior
versions had to be done with the tag-based code
| | 03:46 | cflocation, but there is now a
new function simply called location.
| | 03:51 | So I'll place the cursor above the
code that's getting the data and I'll put
| | 03:56 | it in the if clause.
| | 03:58 | When you use an if clause in cfscript,
you wrap the Boolean condition inside a
| | 04:02 | pair of parenthesis.
| | 04:04 | So I'll create the outer parenthesis
and place the cursor between them.
| | 04:08 | Then I'll call the isDefined function and
pass in the name of the variable I'm looking
| | 04:12 | for wrapped in quotes, url.photographerid.
| | 04:17 | Now in the tag-based syntax, if you want
to negate a Boolean expression, that is
| | 04:22 | change it from true to false or
false to true, you use the keyword not.
| | 04:27 | In cfscript you use a single
character, the exclamation.
| | 04:31 | This is known as the negation
operator in cfscript and in other similar
| | 04:36 | scripting languages like JavaScript.
| | 04:39 | Then after the if clause, I'll create
a pair of braces and then within the
| | 04:45 | braces, I'll put in the code that I want to
execute if that variable has not been defined.
| | 04:50 | I'll use the new ColdFusion 9 function
location and I'll pass in index.cfm and
| | 04:58 | make sure to put a
semicolon at the end of the line.
| | 05:01 | So let's review all of the code on this page.
| | 05:04 | In the cfscript section at the top, I'm asking
whether url.photographerid is defined or not.
| | 05:11 | If it's not defined that means I
didn't come from the correct master page, so
| | 05:16 | I'll send the user back to
that master page, index.cfm.
| | 05:21 | If I do have that variable, I'd then
use the entityLoad method and I filter the
| | 05:26 | PHOTOGRAPHER table on the
photographerid column matching only the photographer
| | 05:31 | with the requested ID.
| | 05:33 | The next line of code is exactly
the same as it was on the homepage.
| | 05:36 | I am matching the filter for the
photographerid column to the photographerid in
| | 05:41 | the received photographer object, and
then creating the fullname variable and
| | 05:46 | using it a couple of times in the output.
| | 05:49 | I'll save all my changes by choosing
File > Save All and then I'll go back to
| | 05:53 | the index.cfm file in the photographers
folder and I'll run it in the browser.
| | 06:00 | I can then click on any of the links
and I'll see that photographer's name
| | 06:05 | listed on the page and the
photographers that are linked to him.
| | 06:09 | Now to fully test this, I'll go
back to source code, I'll go back to
| | 06:13 | photolist.cfm and this time, I'll
run the page in an external browser.
| | 06:18 | Notice I'm trying to start from the
detail page but because when I load the page,
| | 06:23 | url.photographerid is not defined,
I'm redirected back to the master page
| | 06:30 | and I can click into any of the links and
see the photos for that selected photographer.
| | 06:36 | So that's a look at how to implement
a drill-down interface in a complete
| | 06:40 | ColdFusion application.
| | 06:42 | Notice that I'm using cfscript code
wherever I can because it's more concise
| | 06:47 | and more readable than the tag-based
equivalent and I'm also starting to use
| | 06:51 | Object Relational Mapping wherever I possibly
can to retrieve my data from the back-end database.
| | Collapse this transcript |
|
|
9. Building Data Entry FormsUsing HTML data entry forms| 00:00 | When you build dynamic web applications
with ColdFusion, PHP, Asp.NET or other
| | 00:06 | application servers, you're
working in the world of HTML.
| | 00:10 | HTML provides two ways of
moving from page to page:
| | 00:14 | hyperlinks, which I've described in
other chapters, and data entry forms.
| | 00:19 | A data entry form system consists of
one or two pages but regardless of whether
| | 00:25 | you use a single page or a pair of pages,
there are two functions you need to be aware of.
| | 00:30 | The form, which presents controls that
the user can use to fill in data, and an
| | 00:36 | action page, which responds to a form request.
| | 00:39 | You design your form to
navigate to the action page.
| | 00:43 | A single physical page can serve as
both form and action and in ColdFusion
| | 00:47 | applications, the architecture
frequently uses this model but there are two
| | 00:52 | distinct parts of the process.
| | 00:55 | For this demonstration, I'll use two simple
ColdFusion pages that I've already prepared.
| | 01:00 | If you have access to the Exercise
Files, go to that folder now and go to
| | 01:05 | the folder ch09forms.
| | 01:08 | From there, locate the forms folder.
| | 01:11 | You'll see that it contains two files,
simpleform.cfm and simpleaction.cfm.
| | 01:18 | I'll go back to the top-level
directory, ch09forms, and copy the forms
| | 01:23 | directory to the clipboard.
| | 01:26 | Then I'll go to ColdFusion Builder,
I'll select the Essential Training project
| | 01:32 | and I'll paste that folder into place.
| | 01:35 | Then I'll open up the folder, and I'll
open the file simpleform.cfm and I'll
| | 01:41 | expand the code to full-screen.
| | 01:43 | The file in its current state has an HTML
table with a width of 200 pixels and a border of 0.
| | 01:51 | There are then three table rows, each
of which has a bit of text in its first
| | 01:56 | cell and everything else
about the file is empty.
| | 01:59 | If you don't have access to the Exercise
Files, you can easily create this page yourself.
| | 02:04 | In order to turn this into a form page,
I need to wrap a certain amount of code
| | 02:08 | inside a pair of HTML form tags.
| | 02:12 | Each HTML form control gets placed
within the form tags and then any data that
| | 02:17 | the user enters into the file
will be sent to the action page.
| | 02:22 | I'll place the cursor right above the
table tag and I'll type in a pair of form tags.
| | 02:28 | Then I'll select and cut the end tag to
the clipboard, I'll scroll down to below
| | 02:33 | the table and I'll paste it in.
| | 02:35 | So now anything inside the HTML
table will be a part of the form.
| | 02:40 | Next, I'm going to add a couple of
attributes to the beginning form tag.
| | 02:45 | If you're using a simple HTML form tag,
you'll need to add two attributes in.
| | 02:50 | The action, which designates which
page you're navigating to when the user
| | 02:54 | clicks a Submit button or
otherwise submits the form, and a method.
| | 02:59 | I'll set the action first.
| | 03:02 | I'll set action to the name of
my action page, simpleaction.cfm.
| | 03:08 | Then I'll set the method.
| | 03:10 | There are two methods that are used
in HTML forms, named get and post.
| | 03:15 | If you used a method of get, that
means that the values that are entered by
| | 03:18 | the user will be passed as part of
the URL in the browser and they will be
| | 03:23 | visible to the user.
| | 03:24 | If you used a method of post,
those values are hidden from the user.
| | 03:29 | In most form pages, you typically use a
method of post, so that's what I'll select here.
| | 03:35 | There are exceptions to this.
| | 03:37 | For example, if you want the user to be
able to add data into a data entry form
| | 03:42 | and then after submitting it, be able
to bookmark the results, setting a method
| | 03:47 | of get would be useful.
| | 03:49 | But if the user is going to be
entering any sensitive data, typically you'll
| | 03:53 | use a method of post.
| | 03:55 | So I've wrapped the table inside my form tags
and now I'm ready to add some form controls.
| | 04:01 | I'll go to the second td tag set in the
first row and I'll add my first input.
| | 04:08 | In HTML, you'll use the
input tag and you set a type.
| | 04:13 | There are a number of input tag types.
| | 04:16 | For example, if you want the user
to be able to submit a form, you can
| | 04:20 | use submit or image.
| | 04:22 | If you want the user to be able to
enter data into the form, you can use text
| | 04:27 | and that's what I'll use here.
| | 04:29 | You also set a name for each input control.
| | 04:31 | The name will be used as the name of a
ColdFusion variable in the action page.
| | 04:36 | So you want to make sure that you
use a name that follows ColdFusion
| | 04:39 | variable naming conventions:
| | 04:41 | letters, numbers, and
underscores, start with the letter.
| | 04:45 | I'll give this input control a name
of simply firstName and then for text
| | 04:50 | controls, you can also affect the size.
| | 04:53 | The size is the width of the control and,
if you're using simple HTML attributes
| | 04:58 | as I am here, is determined based on
the width of the characters in the font
| | 05:03 | used to display the control.
| | 05:05 | So a value of 30 would
make it 30 characters wide.
| | 05:10 | So I'll close the tag with the greater
than symbol and then I'll select that
| | 05:14 | input control and I will
copy it to the clipboard.
| | 05:17 | I'll press Ctrl+C to copy it.
| | 05:20 | You can press Command+C
if you're working on a Mac.
| | 05:22 | Then I'll move to the second row.
| | 05:24 | This is the last name control.
| | 05:26 | I'll paste in the input control and then
I'll change the name from firstName to lastName.
| | 05:33 | To allow the user to submit
the form, I'll add a button.
| | 05:36 | I'll place the button in the
third row in the second column.
| | 05:40 | I'll add in an input control and this
time I'll select the type of submit.
| | 05:47 | By default, the input control will appear as
a button with the label of the word Submit.
| | 05:53 | If you want to change the label on the
button, use an attribute called value.
| | 06:01 | So there is the entire data entry form.
| | 06:03 | I've placed it inside an HTML table to keep
the labels and the controls nicely aligned.
| | 06:09 | I'll take a look at the form as
it's displayed in the browser.
| | 06:13 | Notice that the labels are being wrapped here.
| | 06:16 | There are a number of ways to fix
that but the easiest way is simply to
| | 06:19 | remove the width attribute from the table to
allow the HTML table to set its width dynamically.
| | 06:27 | I'll take a look once again,
and now my form looks really nice.
| | 06:32 | To test the navigation, I'll click the
button labeled Click Me and I'll see that
| | 06:37 | I get to my action page, simpleaction.cfm.
| | 06:40 | So I've accomplished the first part
of building a form, creating the form's
| | 06:45 | visual presentation and setting its
navigation so that when the user clicks the
| | 06:50 | button, they go to the next page.
| | Collapse this transcript |
| Processing form variables| 00:00 | When you submit a form to an action
page and the form has a method of post,
| | 00:06 | the variables that are received from the form
controls appear in a ColdFusion scope called Form.
| | 00:12 | This is similar to the use of URL
variables that are created in a hyperlink, but
| | 00:16 | it's just a different scope.
| | 00:18 | In order to process the variables
in the action page, you refer to each
| | 00:22 | variable with a form prefix.
| | 00:24 | I'll start in the action page with a cfdump tag.
| | 00:26 | I'll type in cfdump as a tag
and I'll add a var attribute.
| | 00:31 | I'll put in a pair of pound signs and
the word form and then I'll close the tag.
| | 00:38 | I'll save the file, pressing
Ctrl+S or Command+S on Mac.
| | 00:41 | Then I'll go back to the form page and
I'll start it up in the browser again.
| | 00:48 | I'll type some values into the form, a
First Name and a Last Name, and then I'll
| | 00:53 | click the button and here is
the result in the Action Page.
| | 00:57 | I received the form scope and the form
scope shows the names of the controls and
| | 01:03 | the values that I typed in.
| | 01:05 | Notice right now that I am getting values
for the First Name and for the Last Name.
| | 01:10 | It's also possible to get a
value for the Submit button.
| | 01:13 | I'll go back to the code by clicking the
Source tab at the bottom of the editing
| | 01:17 | area, and then I'll go down to the
input tag that represents the Submit button.
| | 01:22 | And I'll assign a name of submitButton.
| | 01:25 | I'll save those changes and run the
page in the browser again, and I'll type in
| | 01:30 | values into the First Name and
Last Name, and I'll click the button.
| | 01:36 | And this time because the button control
has a name, it generates a variable as well.
| | 01:41 | Notice that there is also a
variable called FieldNames, which is a
| | 01:44 | comma-delimited list of the names
of the controls or variables that are
| | 01:49 | submitted to the Action Page.
| | 01:51 | Now I'll do a little bit more specific output.
| | 01:54 | I'll go back to the Action Page code and
I'll place the cursor above the cfdump tag.
| | 01:57 | I'll create a pair of cfoutputs and
within the cfoutputs I'll type in a literal
| | 02:03 | string of 'Welcome to the action
page' and then a comma and a space.
| | 02:10 | Then I'll output the values of
the individual form variables.
| | 02:13 | I'll put in a pair of pound signs and
then form.firstname, and then after that
| | 02:19 | variable, another pair of pound signs,
wrapped around form.lastname, and then
| | 02:25 | for a little bit of dramatic emphasis,
I'll add an exclamation mark at the end.
| | 02:29 | I'll select and comment out the cfdump tag.
| | 02:31 | I no longer need it.
| | 02:33 | I'll select it and then go to the
CFML tab of the editing area and click
| | 02:37 | the Comment button.
| | 02:38 | Then before I process the form, I'll make
sure I've saved the changes to my Action Page.
| | 02:43 | I'll select Files > Save.
| | 02:45 | I'll go back to the form, run it in
the browser, type in some text into the
| | 02:51 | First Name and Last Name controls and
this time I'll just press Enter and I see
| | 02:56 | the output of the dynamic form variables.
| | 03:00 | So when you send a data from a form
to an Action Page, if you have the form
| | 03:05 | tag's action set to post, then those variables
appear in the form scope in the receiving page.
| | 03:12 | If you don't put in the method at all
or if you set the method to get, which is
| | 03:16 | the default, then those same variables
will be received as part of the URL and
| | 03:21 | they'll appear in the URL scope.
| | Collapse this transcript |
| Creating self-posting forms with ‹cfform›| 00:00 | ColdFusion makes it very easy to
create a single file or a ColdFusion page,
| | 00:05 | which contains both form
and action functionality.
| | 00:09 | That is, that presents a data
entry form for data collection and also
| | 00:13 | processes its own data.
| | 00:15 | I'll show you how to create one of these
files using a ColdFusion tag named cfform.
| | 00:22 | I'll start with the file simpleform.cfm,
I'll open the file and then expand it
| | 00:28 | so I can see all of the code.
| | 00:31 | In this file currently, there is an
HTML table wrapped inside an HTML form.
| | 00:36 | The form has an action of
simpleaction.cfm and a method of post.
| | 00:42 | I'll save this file under a new name.
| | 00:44 | I'll select File > Save As and I'll
name the new file selfpostingform.cfm.
| | 00:52 | In order for a form to post to itself,
you can either set the action attribute
| | 00:57 | explicitly or you can set it
dynamically or in a much simpler approach,
| | 01:03 | you can use a pair of tags called cfform.
| | 01:05 | The cfform tag defaults the action
attribute to the current page and it sets the
| | 01:11 | value of the method
attribute by default to post.
| | 01:15 | In this version of the form page, I'll
change the form tags from form to cfform.
| | 01:20 | I'll do that for the starting tag
and I'll also do it for the ending tag.
| | 01:25 | Then I'll go back to the starting tag and
I'll remove both the action and the method.
| | 01:30 | Those values will be taken
care of for me by ColdFusion.
| | 01:33 | I'll save my changes, selecting File >
Save, and I'll preview the page in an
| | 01:39 | external browser by clicking
the Run button on the toolbar.
| | 01:43 | Then I'll take a look at the source code
that's returned from ColdFusion to the browser.
| | 01:48 | Start off at the form tag
wrapped around the table.
| | 01:52 | Notice that the form tag has an action
attribute that's set to the same file name,
| | 01:57 | selfpostingform.cfm, and also
notice that the method is set to the
| | 02:02 | default value of post.
| | 02:03 | There is also a little bit of JavaScript code
that's incorporated into the file automatically.
| | 02:09 | That JavaScript code will be used for
validation of the values the user types
| | 02:13 | into the form and I'll
describe how that's used later.
| | 02:17 | I'll go back to the page, I'll close
the Source view and I'll type some values
| | 02:21 | into the controls and click the button.
| | 02:24 | You won't really see anything happen
at this point because I am not doing
| | 02:27 | anything to output the form variables.
| | 02:31 | So I'll close the form and go back to
the source code in ColdFusion Builder.
| | 02:35 | In order to process the data on a self
-posting form, use the cfif tag or
| | 02:41 | if you're using cfscript code, the
keyword if, and check whether a variable is
| | 02:46 | defined that will only be
available if the form has been posted.
| | 02:50 | I'll typically use the name of the
form control that's used to submit the form,
| | 02:54 | because if the form is being delivered
to the Action Page, that variable will exist.
| | 03:00 | I named my submit control submitButton.
So I'll place the cursor above the
| | 03:05 | cfform section and I'll add in a
conditional block, starting with the cfif tag.
| | 03:11 | Then I'll use the isDefined function
and then inside a pair of quotes I'll put
| | 03:17 | in the name of the submit
button variable, form.submitButton.
| | 03:22 | Then I'll close the cfif tag with the
greater than character and within the cfif tag,
| | 03:27 | I'll output some values from the form.
| | 03:30 | I already have some code I
can use on simpleaction.cfm.
| | 03:35 | So I'll go to that page and I'll
select the cfoutput tag set, including the
| | 03:41 | output code nested within the tags,
and I'll copy that to the clipboard.
| | 03:46 | Then I'll go back to the cfif section
and I'll paste that code into place.
| | 03:51 | I'll select that code and press the Tab
key to indent it, to properly show that
| | 03:55 | that code is nested
within the conditional block.
| | 03:59 | Then I'll save my changes and once again
I'll run the page in an external browser.
| | 04:05 | When the page first loads, you'll see
that the dynamic output section doesn't happen,
| | 04:09 | but I'll type some values into
the First Name and Last Name controls and
| | 04:15 | I'll click the button labeled Click Me
and this time I see the dynamic output.
| | 04:20 | So this is now a self-posting form,
a form that can present the form and also
| | 04:26 | process its results.
| | 04:28 | In the next set of videos, I'll apply
what we've learned so far to a search
| | 04:32 | interface that allows users in a full
website to search for data using a data
| | 04:37 | entry form that's self-posting.
| | Collapse this transcript |
| Creating a search interface| 00:00 | Once you know how to use the cfform tag
to create a self-posting form, you can
| | 00:05 | use this feature to create a search interface.
| | 00:08 | A data entry form that allows the user
to enter criteria for a search operation.
| | 00:13 | You can then use either the cfquery
tag and conventional SQL or you can use
| | 00:19 | object relational mapping tools
provided by ColdFusion 9 to filter data from
| | 00:23 | the back-end database.
| | 00:25 | For this demonstration, I'll work
in the Photo Gallery application.
| | 00:30 | I'll start with the homepage
of the photos folder, index.cfm.
| | 00:36 | This is a very basic page right now
that incorporates the header and the footer
| | 00:40 | and has a headline for photos.
| | 00:42 | I'll start by creating a data entry form.
| | 00:46 | This data entry form will be designed
so that its controls lay out horizontally.
| | 00:51 | I'll create a pair of div tags and then
I'll wrap that pair of div tags inside a
| | 00:55 | pair of cfform tags.
| | 00:58 | And then I'll place my labels and form
controls within the div tags, so that
| | 01:02 | when the user fills in values and
clicks the button or presses Enter that will
| | 01:07 | cause the page to post its
form control values to itself.
| | 01:11 | Next, I'll create a label within the div tags.
| | 01:15 | I'll create a pair of b tags for bold
and then I'll add into that the word
| | 01:20 | Price with a colon.
| | 01:22 | Next, I am going to add two controls
that allow the user to enter price values.
| | 01:27 | A from price or a minimum
price and a to price or a maximum.
| | 01:32 | For the from price, I'll start with
the word from and then a cfinput tag.
| | 01:37 | The cfinput tag will have a type
of text and a name of fromPrice.
| | 01:46 | I'll set the size to 10.
| | 01:47 | I don't want it to be too wide because
the user will be typing in just numeric
| | 01:52 | values and then I'll put in the word to
after that, and I'll add another cfinput tag,
| | 01:58 | once again setting the type to
text and this time setting the name to
| | 02:03 | toPrice, and once again I'll set
the size to 10 and close the tag.
| | 02:09 | Finally, I'll add in a Submit button that
allows the user to click and submit the form.
| | 02:15 | I'll use a cfinput tag again.
| | 02:17 | This time the type will be submit,
the name will be submitButton and the value
| | 02:22 | attribute whose value appears on the
face of the button will be set to Search.
| | 02:28 | I'll close that tag and make sure that
all of my other code is cleaned up and
| | 02:33 | then I'll preview the page in the browser.
| | 02:37 | So the intention is that the user
should be able to type in numeric values into
| | 02:42 | these form controls and click the Search button.
| | 02:45 | If, for example, they want to search
from $10 to $15, they'd entered these values
| | 02:51 | and click Search or press Enter or Return.
| | 02:55 | So that's the visual presentation of the form.
| | 02:58 | In the next video, I'll work in the
same page and I'll show you how to process
| | 03:02 | this more complex form that incorporates
multiple values that a user may or may not enter.
| | Collapse this transcript |
| Processing complex queries with HQL| 00:00 | In order to process a data entry form
that includes optional values, you need a
| | 00:05 | flexible method for querying the database.
| | 00:08 | The approach to using Object Relational
Mapping that I have previously shown to
| | 00:12 | filter data won't work here for two reasons.
| | 00:16 | First of all, when you use the
entityLoad method or other related methods
| | 00:20 | to filter data, you can only match values
to columns when they have a direct equality.
| | 00:26 | That is when their values match directly.
| | 00:29 | You can't use operators such
as greater than or less than.
| | 00:33 | So that's one limitation
we will have to overcome.
| | 00:36 | Another limitation of the filtering
functionality of the entityLoad method is
| | 00:40 | that it receives an object.
| | 00:42 | Now you can certainly create that
object dynamically but it turns out that it's
| | 00:47 | a little bit simpler to use another
approach for querying data that's supported
| | 00:51 | by a method named ormExecuteQuery.
| | 00:55 | The ormExecuteQuery method uses
your Object Relational Mappings for your
| | 00:59 | tables but allows you to
build dynamic SQL statements.
| | 01:05 | Technically, this is called HQL or
Hibernate Query Language because it's
| | 01:10 | processed by the Hibernate engine
rather than directly by the database itself.
| | 01:15 | Hibernate takes your HQL code and
translates it into SQL that's appropriate
| | 01:21 | for the database and then executes
SQL and returns data in the form of an
| | 01:26 | array of ORM objects.
| | 01:29 | Here's how I'll use this
functionality in the Photos home page.
| | 01:32 | I'm working in the
index.cfm file in the photos folder.
| | 01:36 | I will place the cursor at the top of
the page and make a couple of lines of
| | 01:39 | empty space and then create a cfscript section.
| | 01:43 | As I've previously shown when you're
working with Object Relational Mapping,
| | 01:47 | you can process data very
easily using ColdFusion Script.
| | 01:51 | Within the cfscript section,
I will add a conditional block.
| | 01:54 | I will check whether the form has been
posted using the isDefined function and
| | 02:00 | passing in the name of the Submit
button variable form.submit button.
| | 02:07 | Then after the if clause,
I will add a pair of curly braces.
| | 02:10 | I will place all of the code that I
want to process when the form has been
| | 02:14 | submitted within this conditional block.
| | 02:17 | HQL is similar to a select statement in
SQL, but it starts with the keyword from.
| | 02:23 | It assumes that you're doing a select statement.
| | 02:25 | So I will create a variable named HQL
for Hibernate Query Language and I will
| | 02:30 | start it with this syntax, FROM Photo.
| | 02:34 | The word photo here is the
name of your ORM component.
| | 02:38 | It's not the name of the table necessarily
that's defined in the component itself,
| | 02:43 | although in this case it matches.
| | 02:45 | One important distinction here between
HQL and SQL is that HQL treats component
| | 02:51 | names as case-sensitive.
| | 02:54 | That's because of the underlying Java-
based Hibernate library that's being
| | 02:57 | used in the background.
| | 02:59 | Next I need to add a where clause.
| | 03:02 | A where clause will be used to filter the data.
| | 03:05 | There is a complication here that
ColdFusion developers have worked with for
| | 03:08 | many years which is that in SQL
and in HQL, in order to add filtering
| | 03:14 | clauses you need the keyword Where,
but when you don't know how many
| | 03:17 | filtering clauses you'll need, you
can't simply add the Where keyword and
| | 03:22 | then go directly to a filtering phrase.
| | 03:26 | So, in order to make sure you can put
the Where clause in whether or not you are
| | 03:30 | going to filter, you add the Where
clause here and then an expression which
| | 03:34 | always returns a value of truth.
| | 03:37 | In this case, I'm using the
expression zero equals zero.
| | 03:41 | This is now a complete HQL statement
and will work on its own, but because it
| | 03:46 | already includes a Where keyword and a
complete clause, I can also add filtering
| | 03:52 | statements conditionally, each starting
with the SQL keyword AND. Now I'll check
| | 03:58 | the From price and the To price variables.
| | 04:01 | I'm only going to try to filter on them if
the values are numeric that the user provided.
| | 04:06 | If the user doesn't provide anything
in those controls, I would ignore the
| | 04:10 | control or if they type in a non-numeric
value that I can't filter with because
| | 04:14 | I'm filtering on the price column,
which is numeric, I'll also ignore it.
| | 04:19 | Here is the syntax I will use.
| | 04:20 | I will start with another if
keyword and then a pair of parentheses.
| | 04:25 | Then I will use a function of
ColdFusion Markup Language called isNumeric.
| | 04:30 | I will type in the first few
characters of the function and then press
| | 04:33 | Ctrl+Space and then I'll choose the
IsNumeric function from the list and
| | 04:38 | I'll pass in form.fromPrice.
| | 04:42 | So I'm asking if the value of the
user typed in is numeric, then take
| | 04:46 | the following action.
| | 04:48 | If the condition returns true,
I'll append a filtering clause to the
| | 04:52 | existing HQL like this.
| | 04:55 | HQL ampersand equals. The ampersand
equals operator is a new operator in
| | 05:01 | ColdFusion 9 that lets you
concatenate a string to an existing string.
| | 05:06 | Then I'll pass in AND price<= and then
within a pair of pound signs form.fromPrice.
| | 05:16 | Then I will close the quotes for
the new phrase and I will end the
| | 05:21 | statement with a semicolon.
| | 05:22 | Let's review that bit of code.
| | 05:24 | The English equivalent of this pair of
lines is if the form variable from price
| | 05:30 | is numeric then append this
filtering string to the existing HQL string.
| | 05:37 | So, now the HQL starts with
FROM Photo WHERE 0 = 0, and if the
| | 05:42 | user typed a numeric value into the form
control for From price then we add the filter.
| | 05:47 | I will make sure that I add an extra
space at the end of that string because I
| | 05:51 | might be adding another one after it
and I need to make sure I'm separating the
| | 05:55 | strings from each other with spaces.
| | 05:58 | Now for the two price form control,
I will select those two lines of code and
| | 06:03 | then I'll clone that code, holding
down the Ctrl+Alt key on Windows or
| | 06:08 | Command+Alt on Mac and
pressing the down arrow key.
| | 06:12 | Then I'll change the name of the variable
I am looking for from fromPrice to toPrice.
| | 06:18 | I'll change the operator for the
variable from greater than or equals to
| | 06:23 | less than or equals, and I will change
the name of the ColdFusion variable from
| | 06:27 | fromprice to toprice.
| | 06:30 | So now I have actually
four possible HQL statements.
| | 06:34 | One that returns all of the data, one
that returns data only for a minimum price,
| | 06:39 | one that returns data only for
a maximum and one that filters for both
| | 06:44 | values, a minimum and a maximum.
| | 06:47 | Finally here's how I'll do the query.
| | 06:49 | I'll create a new variable called Photos,
and I'll get it by calling the method,
| | 06:54 | ormExecuteQuery, and I
will pass in my HQL statement.
| | 06:59 | So now, I'll have an array of objects
named Photos that I can output to the screen.
| | 07:05 | To output this data, I'll go down to
the bottom of the page above the footer
| | 07:09 | but after the form.
| | 07:10 | I will add a cfif clause, and I will
ask if isDefined, I will use the function
| | 07:16 | isDefined and I will
look for the variable photos.
| | 07:20 | This variable will only exist at
this point if I have executed the
| | 07:24 | ormExecuteQuery method.
| | 07:26 | For the moment to debug this, I will
use a cfdump tag with a var attribute set
| | 07:31 | to the photos variable.
| | 07:32 | I will test this by saving and
running the page in the browser.
| | 07:37 | Initially, I'll just click the Search
button and I'll see that I get back an
| | 07:41 | array containing all of the photo data.
| | 07:44 | I'll do some filtering.
| | 07:45 | I will click into the From price and
I'll type in a fairly high number of 20,
| | 07:50 | and I will click Search.
| | 07:51 | I will see that I get back a
much more limited set of data.
| | 07:55 | Only those photos that
have a price of 20 or higher.
| | 07:57 | Then I will click into the two and I
will type in a value of 12, and I will see
| | 08:02 | that I get back only those items that
are no more than $12, and then finally,
| | 08:08 | I'll type in to values, only those
photos that go from $14-$15, and I see that I
| | 08:14 | get back only that bit of data.
| | 08:17 | So that's a way of using HQL or
Hibernate Query Language to process data
| | 08:22 | entry forms where the user might or
might not provide the values you need to
| | 08:27 | process certain data.
| | 08:29 | You create a base string
starting with the keyword FROM.
| | 08:33 | You refer to the ORM component
representing your table, making sure that it
| | 08:37 | exactly matches the name of the component.
| | 08:41 | You use a dummy WHERE clause to start
the expression and then you can add as
| | 08:45 | many AND clauses nested in
conditional code as you need to, to properly
| | 08:50 | execute your query.
| | Collapse this transcript |
| Creating a dynamic pulldown list with ‹cfselect›| 00:00 | So far in my data entry forms,
I've only used text controls.
| | 00:04 | There are a number of other kinds
of form controls that you can use in
| | 00:07 | ColdFusion data entry forms, including
radio buttons, checkboxes and pull-down
| | 00:13 | list and list controls.
| | 00:15 | In this demonstration, I will show you
how to get data from the database and
| | 00:20 | dynamically populate a pull-down list
that you can incorporate into a form.
| | 00:24 | I'm going to create a pull-down list
that displays all of the photographer
| | 00:29 | information, but I have a complication.
| | 00:32 | In my Photographer table, the first name and
last name are designed as separate columns.
| | 00:38 | While it is possible to use Object
Relational Mapping to define a version of the
| | 00:43 | photographer entity that combines first
name and last name into a single string,
| | 00:48 | in some cases, it's just easier to go
back to the old cfquery architecture when
| | 00:53 | you can write your own custom
SQL and that's what I'll do here.
| | 00:57 | I will go back to the index.cfm file in
the Photos folder and I will place the
| | 01:03 | cursor after the existing cfscript section.
| | 01:06 | If you're following along in these
exercises, I am working on a file that I have
| | 01:10 | already done quite a bit of
work on in previous videos.
| | 01:14 | So, if your file doesn't yet look like
this you might want to go back to the
| | 01:17 | previous videos and work through that code.
| | 01:19 | After the cfscript section, I'll create
a pair of cfquery tags and I will set
| | 01:24 | the name to qPhotographers.
| | 01:28 | I will type in the greater than
character at the end of the cfquery tag and
| | 01:33 | then place the cursor between the tags.
| | 01:35 | Here is the SQL code that I
will use to retrieve data from the
| | 01:39 | Photographer table and concatenate
the first name and last name columns
| | 01:44 | together into a single string.
| | 01:47 | I'll start with Select.
| | 01:49 | Then I will type in the
names of the columns that I want.
| | 01:52 | I will type in the name of the
primary key column, photographer ID.
| | 01:57 | Then on the next line, I'll type in firstname.
| | 02:01 | And then in Apache Derby, in order to
concatenate values together, you use the
| | 02:06 | double pipe character, like that.
| | 02:09 | The pipe character is on your
keyboard, on the same key as the Backslash.
| | 02:14 | Just press Shift and press that key twice.
| | 02:17 | Then I will concatenate a simple
space character wrapped between two
| | 02:21 | single quote characters.
| | 02:23 | Then another concatenation operator
and finally, the lastname column.
| | 02:29 | And then I'll use the SQL As operator to
name the resulting calculated column fullname.
| | 02:37 | On the next line, I'll name the
table from which I'm retrieving the data,
| | 02:41 | Photographer.
| | 02:43 | My resulting query object will have
two columns, Photographer ID, the primary key,
| | 02:48 | and Full Name, a calculated column
that contains the values of the first
| | 02:54 | name and last name columns separated by a space.
| | 02:57 | If you're working in a database other
than Apache Derby, check that database's
| | 03:02 | documentation for how to do
concatenation in that version of SQL.
| | 03:07 | This is an area where SQL is
different from one database to another.
| | 03:12 | To see the results, I will place the
cursor right after the cfform tags
| | 03:17 | and I'll use a cfdump tag and I
will output the value of the new
| | 03:21 | qPhotographers variable.
| | 03:23 | I will run the page in the browser
and I'll see that I have the two columns,
| | 03:31 | Photographer ID and Full Name.
| | 03:33 | Now I'm going to use that query
object to generate a pull-down list.
| | 03:38 | Pull-down lists and list boxes in the
world of HTML are called Select Controls.
| | 03:44 | ColdFusion Markup Language provides a
tool called cfselect that allows you to
| | 03:49 | build these Select Controls dynamically
based on the contents of a query object.
| | 03:54 | I will go to the beginning of my cfform
and I will place the cursor right after
| | 04:00 | the begin cfform tag and I will
create a label for my Select Control.
| | 04:05 | I will put in a pair of <b> tags for
bold and then the word Photographer
| | 04:10 | followed by a colon.
| | 04:12 | On the next line of code,
I'll create the cfselect.
| | 04:15 | I'll start off with the word cfselect
as a tag name, and then I will set the
| | 04:19 | name attribute and I am going to match
the name of the primary key column of the
| | 04:25 | table I am representing, photographerid.
| | 04:30 | Next, I'll tell the cfselect tag
which query object to get its data from,
| | 04:35 | using the query attribute.
| | 04:38 | Just as with the cfoutput tag, I will
simply name the query qPhotographers.
| | 04:44 | Next, I'll tell the cfselect tag,
where to get a value to display and where to
| | 04:49 | get a value to send to the
action functionality of the form.
| | 04:54 | Display will be the name of the column
in the query object that contains the
| | 04:59 | value you want the user to see.
| | 05:01 | That will be fullname.
| | 05:03 | Value is the name of the column in the
query object that contains the value you
| | 05:07 | want to send to the action functionality.
| | 05:10 | That's going to be the name of the
primary key column, photographerid.
| | 05:14 | Then I will put in a greater than
symbol and that will cause the ColdFusion
| | 05:18 | Builder to automatically
complete the cfselect tag.
| | 05:22 | I'll go ahead and display the
form now and there is the result.
| | 05:27 | A pulldown list of all of the photographers.
| | 05:30 | I would also like though for the user to
be able to select all photographers and
| | 05:34 | only filter on price.
| | 05:36 | So, I will go back to the source code
and I'll place the cursor between the
| | 05:40 | cfselect tags and I'll add in another Option tag.
| | 05:45 | The Option tag is a tag that gets
nested between Select tags in HTML.
| | 05:51 | It represents a single item in the list.
| | 05:55 | For this option, I will set a value of just
a blank string and a display value of all.
| | 06:01 | So the user will see the word All but
when the user clicks on the Submit button,
| | 06:06 | the action functionality of the form
page will receive the value of the
| | 06:10 | Photographer ID column or
in this case a blank string.
| | 06:15 | Finally, to make sure that that value
appears at the top of the list, I'll set
| | 06:20 | an attribute of the cfselect tag
called queryposition to a value of below.
| | 06:26 | That means the contents of the query
will go below the explicit options.
| | 06:30 | I am going to make one more
formatting change here, which is to take the
| | 06:35 | beginning div tag, which I currently
have below the cfselect, and I will place
| | 06:39 | the cursor on that line.
| | 06:40 | I am going to hold down the Alt key
and press the up arrow key until the
| | 06:45 | beginning div tag is
above the Photographer label.
| | 06:49 | That will cause the Label, the
Select Control and all of the other input
| | 06:54 | controls to layout now horizontally.
| | 06:57 | So, the user can choose a photographer
or leave it selected to All and can type
| | 07:02 | in a From price and a To price.
| | 07:04 | Now in the final video of this chapter
I'll add code to my HQL to process this
| | 07:10 | new control and we will also complete
the display of the photos on the page.
| | Collapse this transcript |
| Displaying form results| 00:00 | In previous videos, I've been working
on the home page of the Photos folder of
| | 00:05 | my Photo Gallery application.
| | 00:07 | I've created a data entry form that
asks the user to provide a photographer
| | 00:11 | optionally, and a From price and a To price.
| | 00:15 | At the top of the file, I'm using a
conditional code to build an HQL statement
| | 00:21 | or Hibernate Query
Language statement dynamically.
| | 00:24 | I've now added a select control using
the cfselect tag that's populated from
| | 00:29 | data from a cfquery tag.
| | 00:31 | I'm going to add code to cfscript
section to the HQL code to process this
| | 00:37 | additional form control.
| | 00:38 | I will place the cursor after the existing If
clauses for the From price and the To price.
| | 00:45 | I will use similar code to detect
whether the user selected a particular
| | 00:50 | photographer or left the Select
control set to the default of All.
| | 00:56 | If the user chooses All, the form will
receive a variable that is not numeric.
| | 01:02 | So, I can ask the same question I did of
the From price and the To price like this.
| | 01:07 | If IsNumeric and then I'll pass in
the variable form.photographerid.
| | 01:16 | Then I'll copy one of the lines of code
that's appended to the existing HQL statement.
| | 01:21 | I will select it and press Ctrl+C or
Command+C on Mac and then I'll paste it
| | 01:27 | into the new conditional section, and
I'll change the And clause as follows,
| | 01:34 | AND Photographer ID = form.photographer ID.
| | 01:42 | So, now my HQL statements are complete.
| | 01:45 | I have one conditional clause for each
of the form controls and I can combine
| | 01:50 | them together as needed based on
the user selections and data entry.
| | 01:54 | I will run the page in the browser and
I'll choose one particular photographer
| | 02:00 | and click Search and I'll get only the
photographs for photographer id number 2.
| | 02:08 | Then I will make the same selection but
I will indicate that I only want photos
| | 02:12 | that have a minimum price of $20 and
I will click Search again and this time
| | 02:18 | I get a smaller set of data.
| | 02:19 | Now I have one more bit of code
to add to the data entry form.
| | 02:24 | You will notice that the form is
refreshing each time the page loads and
| | 02:27 | showing its default values.
| | 02:29 | I would like the form to refresh and
show the values that the user typed in so
| | 02:34 | they don't have to make their selections again.
| | 02:37 | To make this happen I will go back to the
source, and I will go to the cfform tag.
| | 02:42 | The cfform tag has an
attribute called Preserve Data.
| | 02:45 | I will set its value to True and then
I will run the form in the browser again.
| | 02:50 | I will select a photographer and I will
type in some values and click the Search button
| | 02:57 | and this time as the page reloads,
the forms values are restored.
| | 03:02 | So now the user does not have to
retype them if they simply want to make a
| | 03:06 | change and search again.
| | 03:07 | Now in the final step, I will use my
existing custom tag to display the results.
| | 03:12 | I will go down to the bottom of the
page and I will keep my cfdump tags and
| | 03:18 | I'll comment them both out.
| | 03:19 | I will select each one and then click the
Comment button on the CFML tab of the toolbar.
| | 03:27 | Then I'll place the cursor inside
the cfif clause for the photos.
| | 03:32 | I already have a bit of code that I
can use to call off the custom tag that
| | 03:36 | displays my photos in the photolist.cfm
file in the Photographers folder.
| | 03:41 | I will go to that file and I
will select line 17 and 18.
| | 03:46 | These are the lines that use the
cfmodule tag to output the values from the
| | 03:51 | photo display.cfm custom tag.
| | 03:53 | I will return back to the
page that I am working on.
| | 03:55 | I will place the cursor inside the
conditional block and I'll paste in the code.
| | 04:02 | Then I will reformat the code a
little bit just to make it little more
| | 04:04 | attractive and readable.
| | 04:06 | So just as in the other page,
I'm creating an object called photos,
| | 04:10 | this time with HQL instead of with the
Entity Load method but the structure of
| | 04:16 | the data will be exactly the same,
an array of photo objects, and so my
| | 04:20 | custom tag will still work.
| | 04:22 | I will preview the page in the browser.
| | 04:25 | I will select photos by a particular
photographer and a range of prices and
| | 04:31 | click Search and there is my results.
| | 04:33 | I am going to make one last change
and that's to the custom tag itself.
| | 04:38 | I will go to the photo gallery
project, to the tags folder and I will
| | 04:44 | open photodisplay.cfm.
| | 04:47 | I'm going to display the price of the
photograph, so that the user can see that
| | 04:52 | the photos are displayed match the
range of prices that they asked for.
| | 04:55 | I will place the cursor after the div
tag that's displaying the caption and
| | 05:00 | I'll create another pair of div tags.
| | 05:04 | Then inside a pair of pound signs,
I will output photo.get price.
| | 05:10 | Remembering that when you're using
object relational mapping objects, you access
| | 05:14 | the data through dynamically generated methods.
| | 05:17 | The name of the price column is
accessed using the get price method.
| | 05:21 | I will also wrap that value inside
the dollar format function, so that it's
| | 05:26 | presented with a prefix of the dollar
sign and the number will always have two
| | 05:32 | digits after the decimal.
| | 05:33 | I will save the changes for that file
and I will return back to the homepage of
| | 05:38 | the Photos folder index.cfm and
I will test that page in the browser.
| | 05:43 | I'll choose a particular photographer
and I will set a range of prices and
| | 05:49 | I will click the Search
button and there is the result.
| | 05:53 | If I want to change the prices and the
photographer, I can do that and I'll see
| | 05:59 | a different result displayed on the screen.
| | 06:02 | So these are all of the tools you
need to build a nice search interface.
| | 06:06 | A combination of the cfform tag,
HTML form controls and processing code in
| | 06:13 | the action section of the page that
uses HQL or hibernate query language to
| | 06:19 | process a complex form.
| | Collapse this transcript |
|
|
10. Maintaining Data with Forms and ORMBuilding a data entry form for managing data| 00:00 | In many ColdFusion applications,
developers like to include data maintenance
| | 00:05 | interfaces that allow the user to add,
modify and delete data in the back-end database.
| | 00:11 | I'll show you how to do this in this
chapter using HTML data entry forms,
| | 00:16 | created and managed with the cfform
tag and the Object Relational Mapping or
| | 00:21 | ORM technology that's new to ColdFusion 9.
| | 00:24 | All of the demonstrations in this chapter
will be in the Photo Gallery application.
| | 00:29 | If you're starting at this chapter,
you will want to go to the exercise files,
| | 00:33 | if you have access to them and go to
the Ch10 folder to the Application Begin
| | 00:40 | folder and copy the contents
of this folder to your website.
| | 00:45 | If you don't have access to the
exercise files, you'll be able to create
| | 00:49 | these files from scratch.
| | 00:50 | I will go back to ColdFusion
Builder to the Photo Gallery application.
| | 00:56 | I'm going to be creating a new file in
the Photographers Folder called edit.cfm.
| | 01:02 | This file will present a data entry
form to the user that allows them to add or
| | 01:07 | modify existing data.
| | 01:08 | I will create the file from my template.
| | 01:12 | I will go to the templates
folder and open index.cfm.
| | 01:17 | Then I'll choose File > Save as.
| | 01:19 | I will choose the Photographers
folder and I will name the file edit.cfm.
| | 01:26 | I'll double-click the tab to open the
code to full screen and I'll take care of
| | 01:30 | my cosmetic changes.
| | 01:32 | I'll change the page title to Edit
Photographer, and I'll change the headline
| | 01:38 | to show the same text.
| | 01:42 | Then I will place the cursor after
the h1 tags but above the footer.
| | 01:46 | I'll create a data entry form.
| | 01:48 | As I've described in other videos,
when you create a data entry form, it's a
| | 01:53 | good idea to wrap the form controls
inside an HTML table with two columns, so
| | 01:59 | that you can place the labels for the
controls on the left and the controls
| | 02:02 | themselves on the right and
have them stay nicely aligned.
| | 02:05 | I will create a pair of cfform tags and
make a little bit of extra space there.
| | 02:10 | Then I will place the cursor between
the cfform tags and I'll go to the HTML
| | 02:16 | tab of the toolbar and click the
first button, Insert HTML table.
| | 02:22 | I'll set the table to
contain four rows and two columns.
| | 02:27 | Initially, I will set the
table with that 400 pixels.
| | 02:30 | I will modify that later on.
| | 02:32 | I will set the border
thickness to zero and click OK.
| | 02:38 | So here's my table with four columns.
| | 02:40 | Next I'll add labels to the first
cell in each of the first three columns.
| | 02:45 | These labels will match the structure
of my Photographer table, which has three
| | 02:50 | data columns plus the primary key.
| | 02:53 | The first row will contain a control
that allows the user to set the first name.
| | 02:57 | So, I will type in a label of first name,
then I will add the last name, and
| | 03:02 | the third one will have a label of feature.
| | 03:06 | I won't put any labels in the fourth
row. That will contain my Submit button.
| | 03:11 | Now I'll add the form controls.
| | 03:13 | I will place the cursor in the second
column of the first row and create a CF
| | 03:18 | Input tag, and I will
give it a name of first name.
| | 03:22 | Notice that I'm matching the name of
the input control to the name of the
| | 03:27 | database column it represents.
| | 03:29 | I will set its size as 30.
| | 03:33 | Now, I will do the do the same thing
for the last name, I will place the cursor
| | 03:36 | in the second row, second column and
create another CF Input tag, this one with
| | 03:42 | the name of last name and
a size once again of 30.
| | 03:46 | Now I'm not putting in the Type
attribute yet because you will see, if you
| | 03:51 | preview the page in the browser, that
the cfinput tag defaults to a type of
| | 03:56 | text allowing you to type text in.
| | 04:00 | I'll go back to the code and for the
Photographer table's featured column
| | 04:04 | I'll use a checkbox.
| | 04:06 | This is represented in CFML,
ColdFusion Markup Language, with a type
| | 04:11 | attribute set to checkbox.
| | 04:13 | I will set its name to Feature, and I
will set its value to the value I want to
| | 04:20 | add to the database table if
the user selects the checkbox.
| | 04:24 | That's going to be a value of one.
| | 04:27 | Finally, I'll add the Submit button.
| | 04:29 | The Submit button will go in
the second column in the last row.
| | 04:33 | So, I place the cursor inside those td
tags and I create a cfinput tag and I
| | 04:41 | set the type to Submit and
the name to submitButton.
| | 04:47 | As I've done in previous exercises with
the Submit button, I will set the Value
| | 04:51 | attribute to a string that I want to
be displayed on the face of the button.
| | 04:56 | I will set that to a simple value of Submit.
| | 04:58 | I will preview the page and
there's my completed data entry form.
| | 05:04 | I'm going to be using the same form
interface for either inserting data or editing data.
| | 05:10 | I'll show you how to make some
dynamic changes to the form in other videos.
| | Collapse this transcript |
| Preparing an ORM mapping for inserting data| 00:00 | Once you've created a data entry form
that allows the user to submit values
| | 00:04 | for a database record, you can then
insert the data using a very simple bit of
| | 00:09 | code that depends on the Object Relational
Mapping features that are new to ColdFusion 9.
| | 00:14 | I am going to start in this
demonstration by examining the structure of my
| | 00:19 | photographer table into
which I am going to insert data.
| | 00:23 | It has four columns:
| | 00:25 | the FIRSTNAME and LASTNAME column, which
are both variable character columns,
| | 00:29 | the FEATURED column, an integer, which
I am going to put either a value of zero or
| | 00:33 | one into, and the PHOTOGRAPHERID, a primary key.
| | 00:37 | In Apache Derby and in a number of other
databases such as MySQL and SQL Server,
| | 00:44 | you can set up database table
structures that auto-increment their values.
| | 00:49 | That is to say, when you add a new
record into a database table, the database
| | 00:54 | assigns the next available value to the
primary key, so you don't have to worry about it.
| | 00:59 | You can leverage this functionality
using Object Relational Mapping but you have
| | 01:04 | to add a little bit of code to the
definition of the structure in your orm file.
| | 01:10 | I'll go to my photogallery project, to
the cfc/orm folder and I'll open the cfc
| | 01:16 | that represents the structure of the
Photographer table and I'll double-click
| | 01:21 | the tab to see all of the code.
| | 01:22 | Here is what the code looks like so far.
| | 01:27 | For the primary key column, the name
is PHOTOGRAPHERID and the column in the
| | 01:32 | database table is the same, PHOTOGRAPHERID.
| | 01:35 | The ormtype is set to int for
integer and the fieldtype is set to id.
| | 01:41 | If I leave this code as it is, I
would have to explicitly assign the
| | 01:45 | PHOTOGRAPHERID value before I
insert data, and that's not what I want.
| | 01:50 | Instead I want the underlying Hibernate
engine to allow the database to assign the value.
| | 01:56 | To define that, I'll add a new attribute
to the cfproperty tag called generator.
| | 02:02 | You'll see that there are a number of
values available and if you're curious you
| | 02:05 | can look at the documentation for
this attribute to see what's possible.
| | 02:09 | But for these databases that dynamically
generate their own identity values I am
| | 02:14 | going to set the value of generator to
identity, and then I'll save the change.
| | 02:20 | In order for ColdFusion to see this
change and respect it, I must restart the
| | 02:25 | ColdFusion application.
| | 02:27 | One is to restart the whole server.
| | 02:29 | That takes quite a while. In fact it
takes one or two minutes for the entire
| | 02:33 | server to shut down and then restart again.
| | 02:35 | So, I am going to create a file
that incorporates a new ColdFusion tag
| | 02:40 | called Application stop.
| | 02:43 | This will be a page that I only call
myself, so it's not going to be linked into
| | 02:47 | any of the other parts of the application.
| | 02:49 | I'll go to the photogallery project,
I'll right-click on it and select New
| | 02:55 | ColdFusion Page and I'll name the page
and appstop and click Finish or press Enter.
| | 03:02 | Within the body tag I'll create a
cfset command and I'll call this new
| | 03:07 | applicationStop method.
| | 03:09 | This will cause the current
application to stop on the server and then the
| | 03:14 | next time any page of the
application is loaded into a browser that will
| | 03:18 | restart the application and ColdFusion
will rescan my cfc folders for my ORM
| | 03:25 | or Object Relational Mapping files
and it will reread the mappings and
| | 03:29 | recreate them in memory.
| | 03:31 | I'll finish this page by just
outputting an h1 tagset and a bit of literal text
| | 03:37 | 'Application stopped.'
| | 03:39 | I'll run the page in the browser and
now the next time I want to use my
| | 03:43 | component, my new rules will take effect.
| | Collapse this transcript |
| Inserting data with ORM| 00:00 | Once you've correctly configured your
photographer object relational mapping to
| | 00:04 | allow inserting new rows and letting
the database handle the creation of the
| | 00:08 | primary key values, you're ready to
insert data from the data entry form.
| | 00:13 | I'll reopen the file edit.cfm.
| | 00:17 | This is the file that currently
displays a data entry form that lets the
| | 00:21 | user type in a first name and a last
name and to indicate whether it's a
| | 00:25 | featured photographer.
| | 00:26 | I'll go back to the source code and I'll
place the cursor at the very top of the page.
| | 00:32 | Because the data entry form is created
with the cfform tag, it's a self-posting form.
| | 00:37 | So, when the user first views the
page they will see the form, but when
| | 00:42 | they click the Submit button it will
repost and will be able to execute
| | 00:46 | action functionality.
| | 00:49 | At the top of the page I'll create a
new cfscript section and I'll create a
| | 00:55 | conditional block using the if keyword.
| | 00:58 | I'll ask whether the submit variable exists.
| | 01:02 | I named my Submit button submitButton down here.
| | 01:06 | So, in the conditional clause, I'll use
the isDefined function and I'll look for
| | 01:11 | the variable form.submitButton
and I'll add a pair of curly braces.
| | 01:18 | The code within the curly braces will only
be executed if the form has posted to itself.
| | 01:23 | In order to add the data to the
backend database, I am going to create an
| | 01:28 | instance of my orm component
representing the Photographer table.
| | 01:33 | I'll create a variable called
photographer and I will initialize it using
| | 01:38 | the complete address of the component
photogallery.cfc.orm.Photographer.
| | 01:47 | Next, I'll set the values of the
columns that I want to insert into the data.
| | 01:52 | I'll start with the
photographer object's FIRSTNAME.
| | 01:55 | To set each value I'll call the
appropriate generated setter method
| | 02:00 | that's a part of the ORM component
and I'll pass in the value that the user
| | 02:04 | typed in, form.firstName.
| | 02:06 | I'll do the same thing for the
LASTNAME, photographer.setLASTNAME and
| | 02:13 | I'll pass in form.lastName.
| | 02:16 | Make sure you add a semicolon
at the end of each line of code.
| | 02:20 | Now, the checkbox control takes
a little bit of extra handling.
| | 02:24 | In ColdFusion when the user checks a
check box, you'll receive a form variable
| | 02:28 | that contains the value that was
defined in the checkbox control.
| | 02:33 | In my case my cfinput tag has a value
of 1, but if the user doesn't check the
| | 02:39 | check box you won't receive any value.
| | 02:41 | To handle this condition use a cfparam tag.
| | 02:45 | I'll place the cfparam tag at the top of
the script section, so that it executes
| | 02:50 | each time the page loads before
you try to process the action.
| | 02:55 | cfparam name="form.featured" and default="0".
| | 03:00 | So now, if the variable exists because
it has a value of 1, it'll be left alone,
| | 03:05 | but if it doesn't exist,
it'll have a value of 0.
| | 03:09 | I'll go down to my script section and
add another call to one of the setter
| | 03:13 | methods, photographer.setFEATURED,
and I'll pass in form.featured.
| | 03:21 | I now have an object that contains
the three values coming from the form.
| | 03:25 | I am not setting the primary key value
because it's going to be generated by the database.
| | 03:32 | So, here's the last step in
adding the data to the database.
| | 03:35 | I'll call a method called entitySave
and I'll pass in the photographer object.
| | 03:41 | The ORM entitySave method
examines the photographer object.
| | 03:46 | If it sees a primary key value, it will
update the data in the database and
| | 03:50 | if it doesn't see it, it will insert it.
| | 03:54 | After calling entitiySave I am going
to send the user over to the list page,
| | 03:59 | index.cfm, using the location method.
| | 04:05 | So, the workflow will be once the
user types in the values and clicks the
| | 04:08 | button, the page will reload, it will
detect that the form was submitted,
| | 04:12 | it will create the photographer ORM object,
populate its values and then save that
| | 04:18 | data to the database, and then it will
return the user to the list page, showing
| | 04:23 | the user the list of photographers.
| | 04:25 | I'll save that change and go
to the list page, index.cfm.
| | 04:30 | This is the version of index.cfm
in the photographer's folder.
| | 04:35 | In this page, I'll place
the cursor below the table.
| | 04:39 | This is at about line 31, 32 and I'll
create an anchor tag, I'll give it an
| | 04:46 | href of edit.cfm and in between the anchor
tags, I'll add the text Insert Photographer.
| | 04:56 | I'll save the change and run the page
in the browser, I'll click the link and
| | 05:00 | that'll take me to my form.
| | 05:02 | I'll click into one of the form
controls and type in a value. I'll create a new
| | 05:06 | photographer named John Monet
and I'll click the Submit button.
| | 05:11 | And I come back to the list page and
there is my new data, added to the database
| | 05:15 | table by the entitySave method of the
Object Relational Mapping feature that's
| | 05:20 | new to ColdFusion 9.
| | Collapse this transcript |
| Retrieving data for an update form| 00:00 | ColdFusion makes it very easy to
create a single page that's used for both
| | 00:05 | inserting and updating data.
| | 00:07 | I am going to repurpose the edit.cfm
file and turn it from a form that only
| | 00:12 | inserts data right now to one that can
be used for both inserting and updating.
| | 00:17 | I'll start in the list page, index.cfm.
| | 00:21 | That's showing me a list of my
photographers, and I'll add another column with
| | 00:25 | hyperlinks that the user can click to
edit an existing photographer record.
| | 00:31 | In the source code I'll go first to the
Header row and I'll add a new pair of th's.
| | 00:36 | I am not going to put any text in
between these tags, because I don't need to
| | 00:41 | display anything at the top of the column.
| | 00:44 | Then I'll go to the line of code
that shows the link for the photo list.
| | 00:48 | I'll click into that line of code and
then clone it, pressing Ctrl+Alt+Down on
| | 00:53 | Windows or Command+Alt+Down on Mac,
and I'll make some changes to that code.
| | 00:59 | In the second link, I'll set the href
to point to edit.cfm and I'll change the
| | 01:06 | text from Photos to Edit.
| | 01:10 | Now, when I run the page in the browser,
I see a hyperlink for each photographer
| | 01:15 | and when I click that link, I'll go to
the form page and the next part of the
| | 01:19 | job is to fill in the form with the
existing data from the photographer record
| | 01:24 | that the user selected.
| | 01:26 | I'll go back to Source and
I'll go to the edit.cfm file.
| | 01:30 | I am going to add a little bit more
conditional logic to the page and detect
| | 01:35 | whether I received that
URL variable, photographerid.
| | 01:40 | After the existing if clause, I'll
add else if, and then in a pair of
| | 01:45 | parentheses isDefined and I'll look for
the variable photographerid and I'll add
| | 01:52 | a pair of curly braces
right after the else if clause.
| | 01:56 | So now, I have one section for when
the page is submitted from the form and a
| | 02:00 | second conditional section that will be
executed if the user gets to this page
| | 02:05 | by clicking on one of the
edit links in the list page.
| | 02:09 | So, I have my drill down system
to get from one page to another.
| | 02:12 | In this page, I'll retrieve the one and only
photographer data row that the user selected.
| | 02:19 | I'll do that with a
method called entityLoadByPK.
| | 02:23 | This is a different version of the
entityLoad method that we've used before.
| | 02:28 | The entityLoad method on its own
returns an array of photographer objects.
| | 02:32 | When you know you need only one
photographer object though, you can
| | 02:36 | use entityLoadByPK.
| | 02:38 | You'll pass in the primary key value
that identifies the object and instead of
| | 02:42 | an array you'll get back just that object.
| | 02:45 | The code will look like this.
| | 02:47 | Photographer = entityLoadByPK
and then I'll pass in two arguments.
| | 02:53 | The name of the orm entity I want,
photographer, and remember that that must
| | 02:58 | be case sensitive and exact, and then
the primary key value, which is provided
| | 03:03 | in url.photographerid.
| | 03:07 | So now, let's test the drill-down architecture.
| | 03:10 | I'll place the cursor after the
cfscript section and put in a little bit of
| | 03:14 | temporary code for debugging.
| | 03:16 | cfif isDefined photographer and I am
looking for the photographer variable here
| | 03:25 | and then I'll put in a cfdump tag
with a var attribute of photographer.
| | 03:30 | And then after the cfdump I'll put in a cfabort.
| | 03:33 | Again, this is a temporary debugging
code so I can see what happens when the
| | 03:38 | page is loaded from the list page.
| | 03:41 | I'll save the changes to the
form page and go to index.cfm.
| | 03:46 | I'll run that page in the browser and
click on the first link and I'll see
| | 03:50 | that I've successfully retrieved the
one and only photographer from the table
| | 03:54 | that was requested.
| | 03:56 | I'll go back to Source and run it in the
browser again, and click on another link.
| | 04:01 | And once again, I am confirming that I
am getting back the data that's requested.
| | 04:06 | So now, you've retrieved the data
based on the drill-down hyperlink and in
| | 04:10 | the next video, I'll show you how to fill
in the form controls from the existing data.
| | Collapse this transcript |
| Populating form controls with existing data | 00:00 | In my data entry form page, I now
have two conditional logic sections.
| | 00:05 | One for when the form is submitted, and
one for when the page is loaded with the
| | 00:09 | url.photographerid variable.
| | 00:12 | The next job is to fill in form
controls, so that they show either new values
| | 00:17 | for an insert form or
existing values for an update form.
| | 00:21 | To accomplish this, I'll go to the
second conditional block, the one where I've
| | 00:26 | retrieved the photographer object, and
I'll take each of those values and pass
| | 00:31 | them to the form scope, like this.
| | 00:33 | I'll start with the firstname variable.
| | 00:36 | I'll set a variable named form.
firstname and I'll get its value from the method
| | 00:41 | photographer.getFirstName.
| | 00:45 | I'll clone that line of code 3 times, 1, 2, 3.
| | 00:50 | And I'll set each of the form
variables to match the name of the column.
| | 00:54 | Here is the value for the
lastname and I'll match the method name.
| | 01:01 | I'll do the same thing for the
featured column, setting a variable called
| | 01:04 | form.featured and for the
photographerid value I'll set a variable called
| | 01:09 | form.photographerid.
| | 01:10 | That's the primary key and
I'll set the value of this one
| | 01:15 | from url.photographerid.
| | 01:18 | So now, the form scope contains all
of the values for the existing data.
| | 01:22 | I am also going to add three more
cfparam tags up at the top of the page.
| | 01:28 | These param tags will be used to set
default values if the page is loaded
| | 01:32 | without the URL variable.
| | 01:35 | I'll clone that line of code, holding
down Ctrl+Alt on Windows or Command+Alt on
| | 01:40 | Mac and pressing the Down Arrow and
once again, I'll clone it three times.
| | 01:45 | For all three variables, form.firstname,
form.lastname and form.photographerid,
| | 01:53 | I'll set the default values to blank strings.
| | 01:56 | So now the logic is if the page is
loaded from scratch, the default values of
| | 02:00 | the form variables will be zero for
featured and blank strings for the others,
| | 02:06 | but if it's loaded with the URL variable
as a result of a click on an edit link,
| | 02:10 | then these form variables will
contain the values from the orm object.
| | 02:15 | Finally, I'll fill in the values.
| | 02:18 | I'll go to each of the cfinput tags.
| | 02:21 | For the text controls, firstname and
lastname, I'll set a variable called value,
| | 02:27 | and I'll set the value from the form
variable form.firstname for the first one,
| | 02:33 | and form.lastname for the second one.
| | 02:39 | The checkbox control
will be handled differently.
| | 02:43 | The value is always set to 1. Instead
you use a checked attribute to indicate
| | 02:48 | whether you want the
control to be checked or not.
| | 02:52 | I'll put in checked= and
then a value of form.featured.
| | 02:57 | This variable will have a value of 0 or 1.
| | 03:00 | If the value is 0 that will equate to false,
meaning the input control will not be checked.
| | 03:06 | And if it's 1, it will equate to true.
| | 03:09 | Finally, I need to track the primary key
of the selected record, photographerid.
| | 03:15 | For this, I'll use a hidden control.
| | 03:18 | I'll add another cfinput tag,
this one with a type of hidden.
| | 03:24 | I'll give it a name matching the
primary key column name, photographerid, and
| | 03:31 | I'll give it a value of form.photographerid.
| | 03:35 | So now, all four of my columns
are being tracked in the form.
| | 03:39 | The three that are visible to the user
are the firstName and lastName as text
| | 03:43 | controls and the featured value as a check box.
| | 03:47 | The photographerid, which is the
primary key, is hidden from the user.
| | 03:52 | If I load the page without passing in a
photographerid URL variable, I see the
| | 03:57 | default values that I created with
cfparam tags at the top of the code.
| | 04:02 | One last step, I'll remove my temporary
debugging code that was outputting the
| | 04:07 | value of the current photographer.
| | 04:09 | I'll save the change to that file and
I'll reopen the index.cfm file from the
| | 04:18 | Photographers folder.
| | 04:20 | I'll run that and I'll click one of
the edit links and I'll see the data from
| | 04:24 | the selected photographer.
| | 04:26 | Now this time, I'll run the
page in an external browser.
| | 04:30 | I'll click a link for a
photographer and I see their data.
| | 04:34 | I'll go back a step, I'll click a link
for another photographer and I'll see
| | 04:38 | their data, and notice that the
firstName, lastName and featured controls are
| | 04:42 | being correctly filled in.
| | 04:45 | And finally, I'll click the Insert
Photographer link and that'll take me to the
| | 04:49 | exact same form but with
the default values displayed.
| | 04:53 | I am now ready for the last bit of code
in this form system, which is to provide
| | 04:58 | code to update an existing photographer record.
| | Collapse this transcript |
| Updating data with ORM| 00:00 | In my editing form so far, I've
created a workflow that allows the page to be
| | 00:04 | used for both inserting and updating data.
| | 00:08 | In this final step, I am going to add
just a couple of lines of code that detect
| | 00:12 | whether I am inserting or updating a record.
| | 00:15 | The orm method, entitySave, accepts a
single instance of an object and saves
| | 00:20 | that data to the database table.
| | 00:23 | It detects whether it's supposed to do
an insert or an update based on whether a
| | 00:27 | primary key value exists and if that
primary key does exist, whether that data
| | 00:32 | is already in the table.
| | 00:34 | Right now my Action code, which is
in the conditional section for the
| | 00:38 | form.submitButton variable, is setting
variables for the three columns that exist always.
| | 00:45 | But to make this code do an update,
I also need to set the photographer object's
| | 00:49 | primary key when it's appropriate.
| | 00:51 | I'll place the cursor after the last
call to an orm method, setFEATURED, and
| | 00:57 | I'll add a little bit of conditional code.
| | 01:00 | I'll type in if and a pair of
parenthesis and then I'll check to see whether
| | 01:04 | form.photographerid is a numeric value.
| | 01:08 | The logic will be, if it's numeric then it
came from the database table and it exists.
| | 01:13 | If it's non-numeric then it was
created by the cfparam tag on line 4 and
| | 01:18 | represents a new record.
| | 01:21 | So here's the call. If isNumeric,
and then I'll examine the variable
| | 01:26 | form.photographerid and if it is
numeric I'll set the orm photographer object's
| | 01:34 | primary key column using the code
photographer.setPHOTOGRAPHERID and I'll pass
| | 01:42 | in form.photographerid.
| | 01:47 | And I'll make sure to add the
semicolon at the end of the line.
| | 01:50 | So now that line of code controls the update.
| | 01:53 | If I have a numeric primary key, then I
set the value on the photographer object
| | 01:58 | and the entitySave method
will update the existing record.
| | 02:02 | If the value is not numeric then I
won't set the value and entitySave will
| | 02:07 | insert a new record and the database will
assign the next available primary key value.
| | 02:13 | I'll save those changes by
pressing Ctrl+S or Command+S on Mac.
| | 02:17 | Then I'll go back to the list
page and I'll run it in the browser.
| | 02:21 | I'll click into my new photographer
record, John Monet, and I'll change him from
| | 02:26 | John Monet to John Smith and I'll click Submit.
| | 02:30 | And when the list page is displayed
again, I can see that the data was
| | 02:33 | successfully updated in the database.
| | 02:36 | I'll click the Insert Photographer link
to retest the form for a new record and
| | 02:41 | I'll type in a first name of Joe and a
last name of Jones and once again, click
| | 02:46 | Submit and there is my new data.
| | 02:48 | So, the same form page can now be used
for both inserting and updating data in
| | 02:53 | the backend database.
| | Collapse this transcript |
| Confirming actions with an Ajax message box| 00:00 | In the last part of our data entry form
functionality, we need to provide a way
| | 00:04 | to delete existing data.
| | 00:07 | A delete data workflow typically asks
for confirmation from the user so that you
| | 00:12 | don't just delete data as
result of a simple click.
| | 00:15 | It's too easy for the user
to make a mistake otherwise.
| | 00:18 | ColdFusion 9 introduces a new set of Ajax
-based functionality that allows you to
| | 00:24 | create clean JavaScript-based
presentations to confirm or delete operations,
| | 00:30 | without having to use the browser-based
confirmation dialogs that don't always
| | 00:34 | look like the rest of your application.
| | 00:35 | I am going to show you in this video
how to use a new tag called cfmessagebox
| | 00:41 | and write a little bit of JavaScript
code to control a message box that's a part
| | 00:46 | of the webpage and is
controlled using Ajax style web layering.
| | 00:51 | I am going to work in the index.cfm file.
| | 00:56 | I'll start off by placing the cursor
after the Insert Photographer link and
| | 01:01 | I'll declare a new object using the tag cfmessagebox.
| | 01:04 | The cfmessagebox tag creates an Ajax
style confirmation screen, but it won't be
| | 01:11 | immediately visible to the user.
| | 01:13 | The only important thing is that it
would be placed somewhere within the visible
| | 01:17 | part of your application.
| | 01:19 | I'll set a type attribute
to one of these three types:
| | 01:23 | alert, confirm or prompt.
| | 01:26 | The purpose for my using a
messagebox is to confirm the delete operation.
| | 01:30 | So, I'll select confirm and
I'll give it a name of confirmBox.
| | 01:35 | I'll need to use that name in some JavaScript
code to cause the box to show up on the screen.
| | 01:42 | When a confirmBox shows up it'll have
two buttons, an OK and a Cancel button.
| | 01:47 | You can control the text on these
buttons with two other attributes of the
| | 01:51 | cfmessagebox tag,
called labelok and labelcancel.
| | 01:56 | I'll set their values as follows.
| | 01:58 | I'll set labelok to Yes and labelcancel to No.
| | 02:05 | And then I'll set the message attribute
to the question I want the user to answer,
| | 02:09 | Are you sure you want
to delete this photographer?
| | 02:16 | And then I'll put in a slash and a
greater than sign to close the tag.
| | 02:20 | Make sure that you use this sort of
empty tag syntax on the cfmessagebox tag.
| | 02:24 | So, I have defined what the
messagebox will look like.
| | 02:29 | Now, I need to write a little bit of
JavaScript code to make it show up.
| | 02:34 | I'll go up toward the top of the page,
and I'll place the next bit of code
| | 02:39 | inside the page's header but above h1 tag.
| | 02:43 | I'll create a pair of script tags.
| | 02:46 | Notice that this is a script tag not a
cfscript and it will be executed in the
| | 02:51 | browser, and in fact I am going
to be very specific about this.
| | 02:56 | I'll set the language as JavaScript,
and then I'll put into greater than symbol
| | 03:02 | and ColdFusion Builder
will add the end tag for me.
| | 03:05 | In the script tag, I'll create a new
function and I'll give it a name of
| | 03:09 | confirmDelete and I am going to accept a
single argument within this function named id.
| | 03:19 | And then I'll place a pair of curly
braces underneath the function name.
| | 03:23 | When this function is called, it's
going to receive the current photographerid
| | 03:27 | that the user selected.
| | 03:28 | I am going to need to save this
id for a little while in memory.
| | 03:33 | So, above the function declaration,
I'll declare a JavaScript variable named
| | 03:37 | photographerid and then within the
function, I'll set the value of that variable
| | 03:43 | using photographerid = id.
| | 03:48 | Then I'll cause the message box to show up.
| | 03:51 | Here is the code you use
to display the message box.
| | 03:55 | I already set the name of the message box,
so here is the code to make it display.
| | 04:00 | ColdFusion.MessageBox.show and then pass
in the name of the MessageBox object as
| | 04:08 | a string, confirmBox.
| | 04:11 | Now, you're working in JavaScript code
rather than ColdFusion Markup Language,
| | 04:17 | so it's very important to
remember that it's case sensitive.
| | 04:21 | The names of the objects and methods,
ColdFusion, MessageBox and show must be
| | 04:27 | spelled exactly as I am showing them here.
| | 04:30 | Unlike in ColdFusion Markup Language,
JavaScript doesn't give you any wiggle
| | 04:34 | room for case sensitivity.
| | 04:36 | Also, make sure that you've spelled the variable
name exactly the same in both cases, here and here.
| | 04:41 | Photographerid as declared before the
function must match photographerid as
| | 04:47 | declared within the function and the
same sort of match must be true for the id
| | 04:51 | argument that's passed into the function.
| | 04:55 | To execute this code, I'll go to my HTML
table and I'll create yet another column.
| | 05:01 | As before my new column won't have any
text at the top, so I'll create just a
| | 05:06 | pair of empty th tags.
| | 05:08 | Then within table row that represents
the dynamic data, I'll create a pair of td
| | 05:14 | tags and an anchor tag with an href
attribute and within the anchor tags,
| | 05:21 | I'll type in the text Delete.
| | 05:24 | To call the code, I'll use a
little bit of JavaScript functionality.
| | 05:28 | I'll type in the word JavaScript and
then the name of the function that I want
| | 05:33 | to call, confirmDelete.
| | 05:36 | Once again, this is a JavaScript
function not a ColdFusion function, so the name
| | 05:40 | of the function is case sensitive.
| | 05:43 | Then I am going to copy and paste
items i .getPhotographerID, including the
| | 05:49 | pound signs, from the previous bit
of code that's calling the Edit page.
| | 05:53 | I'll copy that to the clipboard, then
I'll paste it between the parentheses
| | 05:58 | for the confirmDelete call, and here is all
the code to execute the JavaScript function.
| | 06:05 | I start with the keyword JavaScript.
That tells the browser that instead of
| | 06:08 | navigating to a page it
will call JavaScript function.
| | 06:11 | Then I call the confirmDelete
function and then I pass in the current
| | 06:16 | PhotographerID for the current row of data.
| | 06:18 | I'll run the page and here are my
dynamic delete links and I'll click a link and
| | 06:26 | here is my dynamic Ajax-based Confirm dialog.
| | 06:29 | Notice that I can click-and-drag it around the
screen, but it's really a part of the webpage.
| | 06:35 | As an Ajax interface, it's simply a
layer on top of my ColdFusion page.
| | 06:41 | Once again, this is a bit of
functionality that's brand new to ColdFusion 9 and
| | 06:45 | it makes it very easy to create this
sort of deletion interface, without having
| | 06:50 | to resort to the browser's version of
the JavaScript dialog boxes, which are
| | 06:54 | very hard to make it look like
the rest of your application.
| | 06:58 | Also notice that the dialog box is
modal, meaning that the user must interact
| | 07:03 | with it before they can interact with
the rest of the background application.
| | 07:08 | So, now that we have the message box
showing up, in the final video of this chapter,
| | 07:12 | I'll show you how to react
when the user clicks on one of the buttons
| | 07:17 | and how to actually delete the
data from the backend database.
| | Collapse this transcript |
| Using JavaScript callback functions| 00:00 | The term Ajax stands for
Asynchronous JavaScript and XML.
| | 00:05 | Asynchronous means that instead of
responding synchronously, that is launching a
| | 00:10 | bit of code and waiting for a response,
you deal with user and data events
| | 00:15 | asynchronously, setting up listeners
that deal with events when they happen.
| | 00:21 | You can respond to clicks on the
Message Box produced by ColdFusion by creating
| | 00:26 | a function that will be
called when the clicks happen.
| | 00:29 | These kinds of functions are
known as callback functions.
| | 00:33 | You create the function and you set it
up to be called the way the Message Box
| | 00:38 | knows how to call it and then you add
a bit of code to link it all together.
| | 00:42 | I'm still working in the index.cfm file, in
the photographers directory of the application.
| | 00:48 | I'll start by creating a function
that will be called when the user clicks
| | 00:52 | either the Yes or the No box
on the MessageBox component.
| | 00:56 | I will name my new function doDelete.
| | 01:01 | Because this is going to be set up as
a callback function for the MessageBox
| | 01:05 | component, it will be called in a certain way.
| | 01:09 | It's going to be passed a parameter and
the parameter's value will be the name
| | 01:13 | of the button that was clicked in lowercase.
| | 01:15 | I will name this parameter btn.
| | 01:18 | Then I will create a pair of curly
braces and within the function I'm going to
| | 01:23 | use an alert method and just output
the value of that parameter or argument
| | 01:28 | that was passed in, btn.
| | 01:32 | So now, to test that function
I'll go down to the cfmessagebox tag.
| | 01:37 | In the cfmessagebox tag I'll add a
new attribute named callbackhandler.
| | 01:44 | The callbackhandler attribute gets
set to the name of the function that you
| | 01:48 | want to call, doDelete.
| | 01:51 | This is a JavaScript
function, so it is case-sensitive.
| | 01:54 | You must spell it here exactly the same
as how you spelled it when you defined
| | 01:59 | it in the scripting section.
| | 02:01 | Notice that you don't add any
parentheses or pass any values at this point.
| | 02:06 | When the function is called by the
MessageBox component, the button variable
| | 02:10 | will be passed correctly.
| | 02:12 | Now to test all this, I'll run
the page in an external browser.
| | 02:16 | I will click on one of the links
for a photographer and I will see the
| | 02:20 | confirmation message.
| | 02:21 | I will click the yes button and I will
see feedback that the value of btn is yes.
| | 02:28 | Notice that the word yes comes back in
lowercase, even though I spelled it in uppercase.
| | 02:33 | That will be important to know when
we want to evaluate what the user did.
| | 02:36 | I will click OK to clear the JavaScript
dialog and I will click another delete
| | 02:42 | link and this time click No
and I get back a value of No.
| | 02:46 | So that's how callback functions work
in the world of Ajax and in the world of
| | 02:51 | the new ColdFusion Ajax tools such as
the ColdFusion MessageBox component.
| | 02:56 | Represented here with the
cfmessagebox tag and activated by the call to
| | 03:01 | ColdFusion.MessageBox.show.
| | 03:04 | The doDelete function will now be
responsible for responding to when the user
| | 03:08 | clicks one of the two buttons and I'll finish this
entire workflow in the final video of this chapter.
| | Collapse this transcript |
| Deleting data with ORM| 00:00 | In the current state of my index.cfm
page in my Photographers folder of the
| | 00:04 | application, I'm letting the user
click a link to select a record to delete.
| | 00:11 | I'm then using the ColdFusion MessageBox tool
to let them confirm or cancel the operation.
| | 00:17 | To actually delete the data from the
backend database, I'm going to cause the
| | 00:21 | page to navigate to a separate page
that will execute an ORM function that
| | 00:26 | removes the data from
the backend database table.
| | 00:28 | I will start an index.cfm in
the doDelete callback function.
| | 00:34 | I currently have a call to the
JavaScript alert method there, which is just
| | 00:38 | reporting which button was clicked.
| | 00:40 | I will comment that code out, placing a
pair of slashes at the beginning of the
| | 00:44 | line and then I will place
the cursor on a new line.
| | 00:49 | I'll start with an if clause.
| | 00:51 | I'll check the value of the
btn variable for a value of Yes.
| | 00:56 | Remember the JavaScript returns this
value as all lowercase, so it will be
| | 01:01 | either yes or no lowercase.
| | 01:04 | And then, I'll create a pair of curly
braces and if that condition is true,
| | 01:10 | I will then navigate to a new page and
pass the value of the photographer ID that
| | 01:16 | was selected by the user.
| | 01:17 | I will use this JavaScript code,
document.location =, and then I will pass the
| | 01:24 | name of a ColdFusion page that
I need to create, delete.cfm.
| | 01:29 | This page will expect a variable
called photographerid in the URL scope.
| | 01:34 | So, I will add a question mark after the
page name and the name of the variable,
| | 01:39 | photographerid, and an equals operator.
| | 01:43 | Then I'll put a plus operator at
the end of the line after the quote.
| | 01:48 | In JavaScript you use the
plus operator for concatenation.
| | 01:52 | That's in contrast to ColdFusion,
which uses the ampersand and then I will pass in
| | 01:57 | the value of the JavaScript photographerid
variable that I created and populated earlier.
| | 02:03 | I will copy it to the clipboard and
I'll paste it in this code location.
| | 02:10 | If the user clicks the Yes button on the
confirmation dialog, I'll activate this
| | 02:14 | bit of code that goes to the delete page.
| | 02:18 | I'll test this code in an external browser.
| | 02:21 | I'll save my changes and then
click the Run button on the toolbar.
| | 02:24 | I will click the delete link and click
Yes and take a look at the URL in the
| | 02:32 | browser, delete.cfm?photographeri =, and
then the primary key of the selected record.
| | 02:41 | So, I'm on the right track.
| | 02:43 | I need to create the delete page, which
will delete the data from the backend database.
| | 02:48 | I will close the external browser
and return to ColdFusion Builder.
| | 02:52 | I will go to the Navigator view, to
the photographer's folder of the Photo
| | 02:57 | Gallery application.
| | 02:58 | I will right-click on it and choose
New > ColdFusion Page and I'll name my
| | 03:04 | new file delete.cfm.
| | 03:07 | The user will never see this page.
| | 03:10 | It will be purely a backend page that's
called, executes its functionality and
| | 03:15 | then returns the user back to the list page.
| | 03:18 | So, it doesn't need any HTML.
| | 03:21 | I'll select all of the default code by
pressing Ctrl+A on Windows or Command+A
| | 03:26 | on Mac and then pressing Delete or Backspace.
| | 03:30 | Then I will create a pair of cfscript tags.
| | 03:34 | Here are the tasks I need to accomplish.
| | 03:36 | First, I need to discover whether the
variable photographerid was passed to this page.
| | 03:41 | I will use an if command.
| | 03:43 | If and then, under pair of parentheses,
isDefined and then I will pass in the
| | 03:48 | name of the variable as a
string that I'm looking for.
| | 03:51 | url.photographerid.
| | 03:55 | Then within a pair of curly braces,
if I received that variable, I will
| | 04:00 | retrieve the matching data object from
the backend database, using this code,
| | 04:06 | photographer = entityLoadByPK, and
I'll pass in the name of the entity I am
| | 04:15 | looking for, Photographer, and the
primary key that I received in the URL
| | 04:20 | variable url.photographerid and I will make
sure to add a semicolon at the end of the line.
| | 04:27 | I have my photographer object in memory
and I can call another ORM method,
| | 04:33 | this one named entityDelete,
which expects an ORM object.
| | 04:38 | I will call entityDelete and
pass in the photographer variable.
| | 04:44 | And once again, terminate
the statement with a semicolon.
| | 04:47 | At the end of the if clause, below
the closing brace, I will use ColdFusion 9's
| | 04:51 | new location method and I'll pass
in the name of the page I want the user
| | 04:56 | to go to index.cfm.
| | 04:58 | When this page is loaded into the
browser, if the photographerid variable
| | 05:03 | is passed in the URL scope, the matching
data will be deleted from the database table.
| | 05:08 | If that variable is not passed in,
then these two lines of code will be
| | 05:12 | ignored and either way the location
function will send user back to the
| | 05:17 | beginning page index.cfm.
| | 05:19 | I will save my changes and I'll go back
to the list page, index.cfm, and now I'm
| | 05:25 | ready to test the whole workflow.
| | 05:27 | I'll save any changes I need to save and
then I'll load the page into the browser.
| | 05:32 | I will click the delete
link for one of my new records.
| | 05:35 | I will delete Joe Jones.
| | 05:37 | The first time I will click No and
confirm that nothing bad happens.
| | 05:42 | Because I clicked No, I canceled the operation.
| | 05:45 | I will click the delete link again
and this time I will click Yes and the
| | 05:50 | browser navigates to the delete page
invisibly, deletes the data and then
| | 05:55 | immediately navigates back to the
list page and I can see that the data was
| | 05:59 | successfully deleted.
| | 06:00 | I will click the delete link for John
Smith and click Yes again, and I can see
| | 06:06 | once again that the data is gone.
| | 06:09 | So, those are all of the
pieces of a good delete operation.
| | 06:13 | Make sure that you give the user an
opportunity to cancel the operation.
| | 06:16 | If you simply delete data as result of
a single click, it's too easy to make a
| | 06:21 | mistake for the user.
| | 06:22 | You allow them to confirm or cancel the
operation and then use a separate page
| | 06:27 | to actually do the delete operation.
| | Collapse this transcript |
|
|
11. Validating Data Entry FormsDefining client-side form validation rules| 00:00 | As your website visitors interact with
your data entry forms, the values they
| | 00:05 | enter might or might not
match your business rules.
| | 00:08 | To handle these issues, you can
implement validation rules on your forms.
| | 00:13 | There are two basic kinds of
validation, client-side and server-side.
| | 00:18 | In client-side validation you use
JavaScript code to handle form data entry
| | 00:24 | before the form is submitted to the server.
| | 00:26 | And with server-side validation, you
write your rules in ColdFusion code.
| | 00:31 | In this demonstration, I will
show you how to very easily implement
| | 00:34 | client-side validation and have all the
required JavaScript generated for you by ColdFusion 9.
| | 00:40 | I will be working in the
Photo Gallery application.
| | 00:43 | If you've been working on all the
chapters leading to this one, you can continue
| | 00:47 | working with your files.
| | 00:49 | If you're starting with this chapter
and you have access to the exercise files,
| | 00:53 | you can copy the starting point of
this application from this folder
| | 00:57 | ch11validation/applicationBegin. Just
select, copy and paste all of these files
| | 01:04 | into your website folder.
| | 01:06 | I will go back to ColdFusion Builder
and I'll start with the data entry form
| | 01:10 | that I created that allows users to
insert and modify photographer data.
| | 01:16 | The name of the file is edit.cfm
and it's in the Photographers folder.
| | 01:21 | I'll run the page in the browser and
I'll show you that as long as you type
| | 01:25 | in appropriate values and then click
the Submit button, the data will be
| | 01:29 | inserted correctly.
| | 01:31 | But what happens if the
user leaves these values blank?
| | 01:34 | Client-side validation rules can prevent the
user from entering values that you won't accept.
| | 01:40 | I will go to the source code for this
form and I'll move down to the cfforms
| | 01:44 | section, starting at about line 33.
| | 01:47 | In order to implement client-side
validation, for each control you want to
| | 01:52 | validate, you can add up to two rules.
| | 01:55 | The first rule is called the required rule.
| | 01:59 | When you set required to true that
means that the user must enter a value.
| | 02:03 | They can't just leave that value blank.
| | 02:05 | And you can also determine when the
validation is going to happen, either on the
| | 02:10 | client or on the server.
| | 02:12 | To determine where the validation will
happen, set the attribute validateat.
| | 02:16 | There are two values that you
can use for client-side validation.
| | 02:21 | If you choose onBlur, that means that
the validation rule will happen at the
| | 02:26 | moment the user clicks out of a
form control or tabs out of it.
| | 02:30 | That's usually a little too early for
my flavor, so I typically use onSubmit,
| | 02:36 | meaning that will only validate when
the user tries to submit the entire form.
| | 02:41 | You can also set a message attribute.
| | 02:43 | The message attribute is a string
value that you want to display if the user
| | 02:48 | doesn't follow your validation rule.
| | 02:49 | I will set my message attribute
as 'First Name must be filled in.'
| | 02:55 | I will copy all of these attributes,
the required, validate and message
| | 03:01 | attributes to the clipboard and I will
paste them into the last name control,
| | 03:06 | because I want to follow the
same set of rules for the last name.
| | 03:09 | But I'll change the message from
First Name to 'Last Name must be filled in.'
| | 03:13 | I will save the changes and
run the page in the browser.
| | 03:17 | And watch what happens when
I click this Submit button.
| | 03:20 | Instead of submitting the form to the
server, ColdFusion has added JavaScript
| | 03:25 | code to the page, which is
triggered when you try to click Submit.
| | 03:28 | I will click OK and fill values in and
click Submit again and you'll see that
| | 03:36 | the form was now successful and that
the data was added to the database.
| | 03:41 | In addition to the required attribute,
you can also set a validate attribute
| | 03:46 | that lets you look for
particular string formats.
| | 03:48 | For example, you can look for a date, a
floating number, an integer, a telephone
| | 03:53 | number and many other formats.
| | 03:56 | I don't need to use that attribute for
these input controls, because as long as
| | 04:01 | the user types in a string of any
length, the data will be acceptable.
| | 04:06 | But we don't want the user to leave the
values blank and so these three simple
| | 04:10 | attributes do the validation work for us.
| | Collapse this transcript |
| Validating on the server with custom CFML| 00:00 | In some data entry forms, you'll
find that it's preferable to execute
| | 00:04 | validation on the server.
| | 00:06 | And in certain circumstances, you have
to write your own custom code because
| | 00:10 | ColdFusion 9 doesn't support the
particular validation rule you want.
| | 00:15 | For this demonstration, I'll use the
file index.cfm in the Photos folder of the
| | 00:20 | Photo Gallery application.
| | 00:22 | In this page I have a search form. The
user can choose a photographer and then
| | 00:28 | enter values and their search will combine a
photographer choice and a low and a high value.
| | 00:34 | But what happens if the user gets it wrong?
| | 00:36 | For example, what if they enter a
value of 20 in the low price and a value of
| | 00:40 | 10 in the high price?
| | 00:42 | They will simply get no data back.
| | 00:44 | In this circumstance, it's good to
give the user some feedback about exactly
| | 00:48 | what they did wrong.
| | 00:50 | I'll show you how to implement this
sort of validation rule using custom
| | 00:54 | ColdFusion code on the server.
| | 00:55 | I will go to the source code for this
page, index.cfm in the Photos folder.
| | 01:00 | I'm going to place some conditional
code inside the cfscript section and inside
| | 01:06 | the first conditional block.
| | 01:08 | I only want to execute
validation if the form was posted.
| | 01:11 | And here's the question that I'll be asking.
| | 01:14 | If the user typed in a numeric low
price and a numeric high price and
| | 01:20 | if their low price is higher than the high price,
then I won't even try to execute the query.
| | 01:25 | Instead I'll report back to them
what was wrong with their entries.
| | 01:30 | Here's how it'll look in ColdFusion code.
| | 01:31 | I will create an if statement and
here's the question I'll will ask.
| | 01:36 | I'll start with the isNumeric expression.
| | 01:39 | I'll select the first one for the
fromPrice and copy it to the clipboard and
| | 01:44 | then I'll paste it between the
parentheses for my new if block.
| | 01:48 | Then I'll put in the keyword AND.
| | 01:51 | In ColdFusion, you can use the word
AND to combine two or more Boolean
| | 01:56 | expressions into a single expression.
| | 01:59 | Now, I will paste the isNumeric
functioning again and change it, so that it's
| | 02:03 | evaluating the variable toPrice.
| | 02:07 | And then finally, I'll add one more
AND expression and here's where I'll
| | 02:12 | evaluate the condition I'm looking for.
| | 02:15 | If form.toPrice is less than form.
fromPrice, then we have a problem.
| | 02:23 | Because the user has typed in a low
value that's higher than the high value and
| | 02:28 | here's how I'll handle that condition.
| | 02:31 | I'll create a pair of curly braces and
within the braces I'll create a variable
| | 02:35 | called errorMessage.
| | 02:36 | The errorMessage can be any string you want.
| | 02:38 | I'll set the errorMessage string to
'Low price can't be higher than high price.'
| | 02:44 | If my validation will trigger that code,
I don't want to also execute the query.
| | 02:52 | So, I'll create another pair of braces
and then I'll move the ending brace below
| | 02:56 | the existing query code.
| | 03:00 | And then I'll clean up the code
selecting all the HQL or Hibernate Query
| | 03:04 | Language code and tabbing in to show
that it's indented within the code block
| | 03:10 | and then I will separate those two
code blocks with the keyword else.
| | 03:15 | So, here's all of the syntax.
| | 03:17 | This is my custom validation rule.
| | 03:20 | If the user typed in a numeric price in
both values and if they typed in a low
| | 03:24 | price that's higher than the high
price, I create the error message.
| | 03:29 | If the user passed that validation,
I put the code that executes the query
| | 03:33 | in the else section.
| | 03:34 | Here is how I will handle
displaying the error message.
| | 03:39 | I'll move the cursor down below the
form into the section where I am
| | 03:43 | outputting the photos data.
| | 03:45 | This section of code only gets executed
if the photos object exists in memory.
| | 03:50 | I'm going to place the cursor right
before the end of cfif tag and I'll create a
| | 03:55 | cfelseif and I will evaluate the
expression isDefined variables.errormessage.
| | 04:02 | I will close the cfelseif tag with a closing
greater than symbol and within the cfelseif tag.
| | 04:11 | I'll create a pair of div
tags and within the div tags,
| | 04:16 | I'll output the message variables.errorMessage.
| | 04:23 | And I'll make sure to wrap that entire
segment of code inside a pair of cfoutput tags.
| | 04:29 | I'll select the entire line, I'll go
to the CFML tab of the toolbar and
| | 04:35 | I'll click the fourth
button, Wrap in cfoutput.
| | 04:38 | And that will output the error message.
| | 04:41 | Now, I'll test my page.
| | 04:42 | I will run the page in the browser and
I'll do the same selection I did before.
| | 04:47 | Choosing a particular photographer,
entering values and clicking Search.
| | 04:52 | And I'll see that the search succeeds.
| | 04:55 | But if I enter the values in the
opposite direction, a low price higher than
| | 04:59 | the high price and click Search, then I
get my error message displayed on the screen.
| | 05:05 | So, this is a model for implementing
custom form validation using your own
| | 05:10 | ColdFusion code on the server.
| | 05:12 | The advantage of this approach is
that you aren't dependent on JavaScript
| | 05:16 | executing in the browser and you can
implement any server-side logic for which
| | 05:21 | you can write the code.
| | Collapse this transcript |
|
|
12. Securing ColdFusion ApplicationsUsing the Application.cfc onRequest() method| 00:00 | For those applications that need to be
secured, so that only particular users
| | 00:05 | can log in and use them, you will
need to understand how the ColdFusion
| | 00:08 | security model works.
| | 00:10 | ColdFusion Application Authentication
is based on three important tags called
| | 00:15 | cflogin, cfloginuser and cflogout.
| | 00:20 | And you can implement these tags in
a number of ways, but one of the most
| | 00:23 | important tools you have available
is a specially named method of the
| | 00:27 | application.cfc file called onRequest.
| | 00:31 | As each page is loaded in your
ColdFusion server, ColdFusion looks for the
| | 00:36 | application.cfc file and if that file
has an onRequest function, it will call it
| | 00:42 | and it will execute that function
instead of loading your requested page.
| | 00:47 | Within the onRequest function, you can
load the page manually by including it
| | 00:53 | using a cfinclude tag, but that also
gives you an opportunity to replace that
| | 00:58 | requested page with your authentication logic.
| | 01:01 | For this demonstration, I'll be
working in the Photo Gallery application.
| | 01:05 | If you're just starting with the
application in this chapter, and if you have
| | 01:09 | access to the exercise files, you
can copy over the existing state of the
| | 01:13 | application from the folder
ch12security/applicationBegin within the
| | 01:18 | Exercise Files folder.
| | 01:21 | Copy those files to your website folder and
make sure that you have set up your database.
| | 01:25 | I will return to ColdFusion Builder
and open the file Application.cfc.
| | 01:32 | In its current state, this
component only sets three variables.
| | 01:35 | The application name, the application
data source and ORM enabled to true, to
| | 01:41 | allow me to use the ORM
feature that's new to ColdFusion 9.
| | 01:46 | I'm going to implement
the onRequest method here.
| | 01:49 | Within the cfcomponent tag,
I'll add a cffunction tag set.
| | 01:53 | I'll set the name of the function to onRequest.
| | 01:58 | You must name it exactly this,
although it's not case sensitive.
| | 02:02 | This function won't return any values
but when it's called by the ColdFusion server
| | 02:07 | ColdFusion will
pass in a single argument.
| | 02:11 | You can name this argument anything
you want, but the value that ColdFusion
| | 02:15 | passes in will be the location
and name of the requested page.
| | 02:21 | I'll create the cfargument tag here and
I will set a name attribute of template name.
| | 02:28 | Again you can name this
argument anything you like.
| | 02:31 | I'll save those changes and then I'll
go to my Home folder and I'll open the
| | 02:36 | application homepage index.cfm and
I'll try to run it in a browser and you'll
| | 02:42 | see that nothing happens.
| | 02:44 | The reason is because of the natural
logic of the onRequest function.
| | 02:48 | If it exists it's called,
instead of loading the requested page.
| | 02:53 | So, I'll go back to application.cfc
and within the function after the
| | 02:58 | declaration of the argument, I'll put
in a cfdump tag and I'll set the var
| | 03:03 | attribute to the
variable arguments.templatename.
| | 03:10 | I'll save those changes by pressing
Ctrl+S on Windows or Command+S on the Mac.
| | 03:15 | Then I will go back to the index.cfm
homepage and refresh it and this time I get
| | 03:21 | the output of the
variable arguments.templatename.
| | 03:24 | I'll return to source code
and go back to application.cfc.
| | 03:29 | Here's how I'll use that variable.
| | 03:32 | I'll add a cfinclude tag and I'll set
the template attribute as a variable with
| | 03:38 | pound signs to arguments.templatename.
| | 03:43 | And then I'll get rid of the cfdump tag.
| | 03:44 | I don't need it anymore.
| | 03:46 | I'll save those changes and return once
again to the homepage and run that page
| | 03:51 | in the browser and now the
page is once again intact.
| | 03:55 | By creating the onRequest method,
I have a place to intercept the request and
| | 04:00 | now I can add conditional logic to
decide whether I want to display the
| | 04:04 | requested page or display some other
content, such as an authentication form
| | 04:09 | that asks the user to login.
| | Collapse this transcript |
| Creating and using a login form | 00:00 | In the first step of creating an
architecture for authenticating users,
| | 00:04 | I modified my application.cfc
file to handle requests
| | 00:09 | so I had a place to put logic to
determine whether a user is authenticated and not.
| | 00:14 | In this next step, I'll create a login
form, a form that the user can use to
| | 00:19 | enter a username and password.
| | 00:20 | I will go to my Photo Gallery
Applications root folder, and create a new
| | 00:25 | folder named login.
| | 00:29 | Then I'll open the file index.cfm from
the Templates folder and I'll save it
| | 00:37 | into the new folder and I'll
name the new file login.cfm.
| | 00:42 | I'll change the headline within the h1
tags, so that its value is Please Log In
| | 00:47 | and I will also change the page title.
| | 00:49 | I will set the title to Log In and
then I'll test the page in the browser.
| | 00:56 | Notice that just like all of the other
pages of the website, this pages shows
| | 01:01 | the banner graphic and it also
shows the navigational toolbar.
| | 01:05 | For a log in form I would like to
suppress the navigational toolbar so that only
| | 01:10 | authenticated users can navigate to other pages.
| | 01:14 | To make this happen I'll go to my
header.cfm file in the Includes folder.
| | 01:20 | This is the file that displays the
header region with the graphic and the
| | 01:23 | navigational toolbar.
| | 01:25 | At the top of the file I'm
going to add another cfparam tag.
| | 01:29 | I'll set its name to attributes.includenavbar
and I will set its default value to true.
| | 01:42 | Then I will go to the navbar section and
I will wrap it in this conditional code.
| | 01:46 | cfif attributes.includenavbar and
then I will move the end tag for the cfif
| | 01:54 | clause below the navbar div.
| | 01:58 | So here is the new logic
for the header custom tag.
| | 02:01 | As the custom tag is loaded, we set a
variable called includenavbar and if that
| | 02:07 | value has not been passed in,
we default it to true.
| | 02:11 | Then we check the value and if the
value is true, we include the navbar.
| | 02:16 | This will result in
leaving existing pages alone.
| | 02:19 | So, I will save that change and go back
to my new file login.cfm and I will look
| | 02:25 | at the source code and in this call to
the header.cfm custom tag, I'll pass in
| | 02:31 | includenavbar with a value of false.
| | 02:35 | So, for this page and only this
page, I have now suppressed the
| | 02:38 | navigational toolbar.
| | 02:40 | But I have retained to look and
feel of the rest of the website.
| | 02:43 | I am going to create the login form itself.
| | 02:46 | This will be a fairly
conventional data entry form.
| | 02:48 | I will create a pair of cfform tags
and then within the cfform tags I will
| | 02:54 | create an HTML table.
| | 02:56 | I will go to the HTML tab of the
toolbar, click Insert HTML table, I will set
| | 03:03 | the rows to 3, the number of columns to 2 and
I will set the border thickness to 0 and click OK.
| | 03:13 | Once the table code is been generated, I will
remove the width attribute and set some labels.
| | 03:18 | In the first cell of the first row,
I will type in a label of User name.
| | 03:23 | In the first cell of second row, I
will type in a label of Password.
| | 03:28 | Now I'll add the form controls.
| | 03:30 | In the second cell of the first row, I
will create a cfinput tag and I will set
| | 03:35 | the type to text and the name to username.
| | 03:41 | For the password, I will create a cfinput tag.
| | 03:45 | This time I will set the type to password.
| | 03:48 | This appears exactly the same as a
text control, but as the user types in a
| | 03:52 | value they will see asterisks
instead of the value they type.
| | 03:55 | I will set the name attribute to password.
| | 04:00 | Finally in the second cell of the last
row I will create my Submit button with a
| | 04:06 | cfinput tag, with the type set to submit,
the name set to submitButton and the value,
| | 04:12 | which is the label on
the button, set to Log In.
| | 04:18 | Then I will close the tag
with a greater than character.
| | 04:20 | I will test the page in the browser and make
sure it has the appearance I am looking for,
| | 04:26 | accepting the username and the
password value. I will click into the User name
| | 04:30 | and type in a value.
| | 04:31 | I will type in a password and make
sure that I can't see the actual text
| | 04:37 | that's being typed in.
| | 04:38 | So, my login form is done and in the
next step, I will put these tools together,
| | 04:43 | the application.cfc file's onRequest
method and the login form that suppresses
| | 04:49 | the navigational toolbar but
accepts the user's credentials.
| | Collapse this transcript |
| Authenticating users with ‹cflogin›| 00:00 | In other videos I've created two of
the important parts of an authentication
| | 00:04 | model in ColdFusion.
| | 00:06 | The onRequest function in Application.
cfc, which intercepts the request and
| | 00:11 | gives me a place to put some login
authentication code, and a login form which I
| | 00:17 | have named login.cfm in the login folder.
| | 00:20 | I'm going to glue it
altogether with some application logic.
| | 00:24 | There's a little bit of code involved here.
| | 00:26 | So I have created a file that contains
the code, which always follows pretty
| | 00:30 | much the same model, and I am just
going to copy and paste it into place.
| | 00:35 | If you have access to the Exercise Files,
you can open this file with me.
| | 00:39 | Select File > Open File, navigate to the
location of your Exercise Files, go to
| | 00:47 | ch12security to the security folder,
and open the file onrequest.txt.
| | 00:55 | Select all of the code in that file,
copy it to the clipboard, then go to
| | 01:00 | Application.cfc, place the cursor
inside the onRequest function, above the
| | 01:07 | command to include the template
and then paste that code into place.
| | 01:12 | Now, I'm going to code review it
and describe exactly what it does.
| | 01:17 | The first part of this
code is a tag called cflogin.
| | 01:20 | The cflogin tag is used to wrap code
that you only want to execute if the
| | 01:25 | current user is not yet
authenticated within the cflogin tag set.
| | 01:30 | There's a conditional block.
| | 01:32 | Check in to see whether the
data entry form has been submitted.
| | 01:35 | In my login.cfm page, I named
my form button, submitButton.
| | 01:41 | So I need to match up the code
with that and look for the variable
| | 01:45 | form.submitButton, following a
pattern I have used in other demonstrations.
| | 01:50 | In the next conditional block, the
code checks the username and password.
| | 01:55 | In this case, I'm looking for a
fixed username and a fixed password.
| | 01:59 | In a complete application you would
compare those values to saved records in a
| | 02:03 | database, in an XML file, or any other
data repository that you wanted to use to
| | 02:08 | authenticate your users.
| | 02:10 | If this condition is true, then
you're going to allow the user to login and
| | 02:15 | you're going to
authenticate them by calling this code.
| | 02:19 | You use the cflogin user tag to assign
the username, the user password, and
| | 02:25 | their security roles.
| | 02:26 | The security roles can either be a
single string or a comma-delimited list and
| | 02:32 | you can name the roles whatever you want.
| | 02:34 | In the CFL section, if the user did
not login correctly, we are going to set
| | 02:39 | an error message and we are going to
place the error message string in a new
| | 02:43 | scope called request.
| | 02:45 | The nature of the request scope is
that its variables are available from the
| | 02:50 | point where they are created until
the time the entire request is done.
| | 02:54 | When you are working inside a CFC, any
variables you set in the request scope
| | 02:59 | will also be available in the calling page.
| | 03:02 | In this case the page that was
requested by the user, whereas simple variables
| | 03:06 | that you place in the variable scope will not.
| | 03:10 | So, I set an error message, then I use
cfinclude to include the login.cfm file.
| | 03:17 | The cfreturn tag is placed here to
return from the function and make sure that
| | 03:21 | we don't continue on and
include the requested template.
| | 03:24 | There is one more bit of logical code.
| | 03:27 | If the form was not submitted, then we
are simply going to include the login
| | 03:31 | form and once again return it from the
function, making sure we don't continue
| | 03:36 | an include template.
| | 03:37 | In the case where the user has already
been authenticated, we'll simply bypass
| | 03:42 | the cflogin tag set.
| | 03:44 | That's its nature and we
will include the requested page.
| | 03:47 | I will save my changes and I am
going to make sure that I am running the
| | 03:51 | application from scratch.
| | 03:52 | I will open my file appstop.cfm.
| | 03:56 | This is the utility file that I created
to let me stop the application for testing.
| | 04:00 | I will run it in the browser and I will see
successfully that the login page is included.
| | 04:07 | Now I will go to the
homepage of the application.
| | 04:10 | I will open index.cfm from the home
folder and I will run it in the browser.
| | 04:16 | Instead of seeing the homepage,
I successfully see the login page.
| | 04:21 | Now before I complete my testing,
I am going to add one more bit of code
| | 04:24 | into the login form.
| | 04:25 | I will go back to the
source code and to login.cfm.
| | 04:31 | In this page, after the
presentation of the form, I will check for the
| | 04:35 | existence of request.errormessage
using this conditional code,
| | 04:40 | cfif isDefined, "request.errormessage"
as a string, and then within the cfif clause,
| | 04:49 | I will create a paragraph tag set
and within the paragraph I will output
| | 04:54 | request.errorMessage and I will wrap all
of that code inside a pair of cfoutput tags.
| | 05:02 | Now I am ready for a complete test.
| | 05:04 | I will go to the homepage and I will
try to load it in an external browser.
| | 05:10 | As the page loads it displays the login
form. If I type in incorrect values and
| | 05:15 | click the Log In button,
| | 05:16 | I will see my error message,
'Incorrect login, please try again.'
| | 05:21 | If I type in the correct credentials,
the username of joe and a password of
| | 05:25 | smith and then I click Log In,
then I will successfully login.
| | 05:31 | As long as I keep on using the browser,
I will be able to navigate to every
| | 05:35 | page in the website.
| | 05:36 | If the user closes the browser or
allows the time out to lapse, which is 20
| | 05:41 | minutes, then they will automatically
be logged out and have to login again the
| | 05:45 | next time they request the page.
| | 05:47 | But the cflogin architecture, which you
place into the Application.cfc file in
| | 05:53 | the onRequest method, allows you to
exert the authentication logic you need to
| | 05:58 | secure your application.
| | Collapse this transcript |
| Logging out users | 00:00 | The last step to creating an
authentication system for a ColdFusion application
| | 00:05 | is to give the user a way of logging out.
| | 00:08 | Typically you do this by creating a
hyperlink that's available on all pages.
| | 00:13 | In ColdFusion, you log out from the
ColdFusion Authentication Architecture by
| | 00:17 | calling a tag called cflogout.
| | 00:19 | This is a very simple tag,
which takes no attributes.
| | 00:24 | To implement this, I'll create a brand new
page in the Login folder of my application.
| | 00:29 | I'll go to that folder in the
Navigator view, right-click and choose
| | 00:35 | New > ColdFusion Page.
| | 00:37 | I'll name the page logout.cfm.
| | 00:40 | This is another back-end page
that the user will never see.
| | 00:44 | I'm going to delete all of the default
code and replace it with the tag cflogout.
| | 00:50 | After logging the user out, I'm then
going to send them back to the Application
| | 00:54 | homepage with this code,
cflocation url="../home/index.cfm".
| | 01:05 | So after logging them out, I'll send
them back to the homepage, but because they
| | 01:10 | aren't logged in, they'll
once again see the login form.
| | 01:14 | I'll save that change.
I'm done with the page.
| | 01:17 | I'll go to my Includes folder
and open the header custom tag.
| | 01:21 | In the navbar section,
I'll add a new hyperlink.
| | 01:25 | I'll place the cursor after the link to
the Photos folder and put in a spacebar
| | 01:30 | and a separator or a pipe character.
| | 01:33 | Then on the next line, I'll create an
anchor tag and I'll set the href attribute
| | 01:38 | to point to ../login/logout.cfm.
| | 01:45 | That's the page I just created, which
executes the cflogout tag and then sends
| | 01:50 | the user to the homepage.
| | 01:53 | Between the anchor tags,
I'll display the text Log Out.
| | 01:58 | I'll save the change to that file
and now I'll test the entire system.
| | 02:03 | I'll go back to the Navigator view
and reopen my homepage, index.cfm,
| | 02:08 | in the home directory.
| | 02:10 | I'll run the page this
time in an external browser.
| | 02:12 | I'll log in, typing in the user
name of joe and the password of smith.
| | 02:19 | After logging in, I now have access to the
entire site for as long as I keep the browser open.
| | 02:26 | But when I click the logout link,
which is now displayed on every page,
| | 02:30 | I'm returned back to the login form where
I can type in my user name and password
| | 02:35 | again, or simply close the browser.
| | 02:37 | So those were the three tags that we use
to create the authentication architecture:
| | 02:41 | cflogin to execute code for non-
authenticated users, cfloginuser to actually log
| | 02:49 | the user in and register them with the
ColdFusion security system, and cflogout
| | 02:55 | to disrupt the connection between their
browser and the server, and force them
| | 02:59 | to login again the next
time they visit the site.
| | Collapse this transcript |
|
|
13. Deploying Applications with ColdFusion BuilderConfiguring an FTP site| 00:00 | ColdFusion Builder includes
everything you need to deploy and upload your
| | 00:04 | application to your production web server.
| | 00:07 | The first step in uploading web
server is to create an FTP connection.
| | 00:12 | FTP stands for File Transfer Protocol and
it represents the most common way that web
| | 00:17 | developers connect to their
production servers and upload assets.
| | 00:22 | In ColdFusion Builder, go to the File view.
| | 00:25 | If you don't see the File view in the
lower left corner of ColdFusion Builder,
| | 00:29 | go to the menu and choose
Window > Show View > File.
| | 00:35 | In this view, you can create a new
connection through FTP or FTPS or Secure FTP.
| | 00:43 | To create a new connection, first of
all I have double-clicked the tab of the
| | 00:46 | File view to open it to full screen,
then I will go to the FTP item, right-click
| | 00:52 | on it or Ctrl-click on
and choose Add New FTP site.
| | 00:57 | In this New Connection dialog box,
I will give my site a name.
| | 01:01 | I am going to be uploading content to
my own company's website, Bardo Technical
| | 01:06 | Services, so I will give
it a site name of bardotech.
| | 01:10 | I will set the connection type to
FTP and notice that there are two
| | 01:14 | other options available.
| | 01:16 | The server value should be
your server's domain name.
| | 01:19 | I will set mine to www.bardotech.com.
| | 01:24 | Then set your user name.
| | 01:26 | You will need to get your user name
and password from your Internet service
| | 01:29 | provider or your ColdFusion server
administrator, if you don't know it.
| | 01:33 | Then enter your password.
| | 01:38 | At this point you can click the Test
button to test your FTP connection.
| | 01:42 | If everything goes well, you will see
this message that the connection succeeded
| | 01:46 | and you can click OK.
| | 01:48 | If you have any issues connecting to the
FTP server, click Advanced Options.
| | 01:53 | One very common adjustment that
developers need to make is to use Passive FTP.
| | 01:59 | So if you don't connect immediately,
try checking that option and then try
| | 02:03 | your connection again.
| | 02:05 | If you have trouble connecting to your
FTP server, talk to your ISP or your web
| | 02:10 | server administrator and get some
assistance. If you connected successfully
| | 02:14 | from this screen, you can click OK and
from that point you'll be able to expand
| | 02:20 | your FTP connection and see your website's
complete directory structure and file contents.
| | Collapse this transcript |
| Setting a ColdFusion project's synchronization connection| 00:00 | Once you've defined an FTP site in
ColdFusion Builder, the next step is to set
| | 00:05 | your ColdFusion project's
synchronization connection.
| | 00:08 | To do this, go to the
Navigator view and locate your project.
| | 00:12 | I'll use the Essential Training
project that I've been working on
| | 00:15 | throughout this video series.
| | 00:17 | I'll right-click on the project
name or Command-click on Mac and choose
| | 00:22 | Synchronize and then Create
New Synchronize Connection.
| | 00:27 | In this screen, I set the connection
name, which can be the same as the project
| | 00:31 | if you like, and then indicate where
the project is that you want to upload or
| | 00:35 | synchronize with your server.
| | 00:37 | Then pull down the list of available
remote connections and choose your FTP site.
| | 00:42 | I'm choosing bardotech, then click OK.
| | 00:45 | Once you've set the synchronization
site, you can then upload, download or
| | 00:52 | synchronize with your production server.
| | 00:53 | For example, I'm going to just
upload one folder, the orm folder, to
| | 00:58 | my production site.
| | 01:00 | I'll go to the folder and right-
click and choose Synchronize > Upload.
| | 01:06 | When you do an upload in this fashion,
you're asked if you want to overwrite any
| | 01:11 | items with identical names
on the production server.
| | 01:13 | I'll click Yes and in the lower-right
corner I'll see my progress, updating
| | 01:19 | items and a percentage of upload.
| | 01:22 | It might take a few moments for the
upload to occur and you want to be patient.
| | 01:26 | But once the files have been placed
on the site, you should then be able to
| | 01:30 | navigate to your ColdFusion pages on the
site and they should work exactly as you expect.
| | 01:36 | For database-enabled sites, you'll also
need to upload and set up your database
| | 01:41 | and data source on your ColdFusion server.
| | 01:44 | The steps for this will be exactly
the same as with your local ColdFusion
| | 01:48 | server, if you have access to the
ColdFusion Administrator application on
| | 01:52 | your production server.
| | 01:54 | In some environments, your ISP won't
allow you to work directly with the
| | 01:58 | ColdFusion Administrator, but instead
will give you another way of setting
| | 02:01 | up your data source.
| | 02:03 | Check with your ISP or ColdFusion
Administrator for more information.
| | 02:08 | When you see this screen, you know
that your files have been successfully
| | 02:12 | uploaded to the ColdFusion server
and the application is ready to use.
| | Collapse this transcript |
| Uploading files to the production server| 00:00 | Once you've set up your FTP server
and your synchronization connection,
| | 00:04 | you can then synchronize an entire
website or just portions of the website with
| | 00:09 | the production server.
| | 00:11 | When you use the Synchronization feature,
ColdFusion Builder compares the date
| | 00:16 | timestamps on your local files with the
versions on the server and will tell you
| | 00:20 | which files need to be uploaded and
which need to be downloaded or deleted,
| | 00:25 | to keep the two sides in sync, that
is the local and the production side.
| | 00:30 | To show this feature, I'll make a
simple change to a file in the orm folder,
| | 00:35 | which I already uploaded
to the production server.
| | 00:37 | I'll open application.cfc
and I'll just add a comment.
| | 00:41 | I'll place the cursor after the
existing code within the cfcomponent tag and
| | 00:46 | I'll create a comment and I'll set
the comment to a simple string of
| | 00:51 | 'a change to the file.'
| | 00:52 | Then I'll save my change.
| | 00:55 | I'll go to the orm folder in the Navigator view.
| | 00:58 | I'll right-click on it and I'll
choose Synchronize > Synchronize.
| | 01:04 | ColdFusion Builder compares the
files on the server and on my local hard
| | 01:08 | disk with each other.
| | 01:10 | It detects changes to only this one file
and offers to synchronize with the server.
| | 01:16 | If there are files on the local system
that aren't on the production server,
| | 01:20 | I can delete those orphaned files or I
can go in the other direction by selecting
| | 01:24 | one of these two options, Delete
orphaned files on Essential Training, the local site,
| | 01:28 | or Delete orphaned files
on bardotech, the production site.
| | 01:33 | There are also some advanced options
that you can check out to tightly control
| | 01:38 | how files are read, written and
what permissions are available.
| | 01:43 | I'll close the Advanced Options
panel and click Start Sync and the
| | 01:49 | synchronization happens.
| | 01:51 | If you watch the lower-right corner of
the ColdFusion Builder interface,
| | 01:55 | you'll see the progress indicator
showing you how far along it is.
| | 01:59 | When the synchronization is complete, you'll
see a message in the screen telling you so.
| | 02:04 | If you have a large synchronization
project to do, you can click the Run
| | 02:08 | in Background button.
| | 02:10 | This dialog will go away and you'll be
able to continue with your other work.
| | 02:14 | So that's how ColdFusion Builder can
help you upload, deploy, and synchronize
| | 02:19 | your production website, using your
traditional FTP connection, but without
| | 02:24 | requiring any other additional software.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Hi! David Gassner here again.
| | 00:02 | Thanks for sitting with me through this
video series about Adobe's new version
| | 00:05 | of the ColdFusion web application
server and ColdFusion Builder, the integrated
| | 00:10 | development environment
for ColdFusion developers.
| | 00:14 | In this series, you learned how to use
ColdFusion 9 and ColdFusion Builder to
| | 00:18 | create and deploy dynamic
database-enabled web applications.
| | 00:22 | You used ColdFusion's new ORM, or
Object Relational Mapping feature to
| | 00:27 | communicate with your database.
| | 00:29 | You also learned a bit about the product's
new AJAX tools and enhanced scripting syntax.
| | 00:35 | If you're interested in learning about
other new features of ColdFusion 9,
| | 00:39 | check out lynda.com's video series on
the subject for experienced developers.
| | 00:44 | Thanks again for watching and listening.
| | Collapse this transcript |
|
|
