	Developers
	Developers Home
	EditLive! for Java
	EditLive! for Windows
		System Requirements
		Getting Started
		Integration Samples
		Articles
		API Reference
	EditLive! for XML
	Discussion Forums

Sample Database Application for ColdFusion

Ephox, July 2001

Introduction
Pre-requisites
Viewing the Sample Source Code
Files included in this example
The Database
Creating a Datasource
The Index Page (start.cfm)
Adding a New Article (add.cfm and xt_add.cfm)
Editing an Existing Article (edit.cfm and xt_edit.cfm)
Deleting an Existing Article (delete.cfm and xt_delete.cfm)
Viewing an Article (view.cfm)

Introduction

This article shows how to use EditLive! as the interface for a database driven press release center. This sample allows users to:

add new press articles;
edit existing press articles;
view the article in the web browser; and
delete existing press articles.

Pre-requisites

This example uses client-side JavaScript within HTML. ColdFusion is used for the server-side scripting. Please ensure that before working through this sample you have read Using EditLive! with an Online Database or in an Online Form.

Viewing the Sample Source Code

The source code for this sample will have been installed on your machine when you installed the Ephox EditLive! 4.0 Development Kit. To view the source code please click on Start->Programs->Ephox EditLive!->Samples->Open Sample Source Code Folder. If you have Allaire ColdFusion Server installed on your local machine, to run this sample through your web server please click on the shortcut in the Ephox EditLive! folder in the Programs menu.

Files included in this example

Below is a table outlining the ten files included in this example.

start.cfm	This file searches the database and creates a list of articles that are available for editing within EditLive!. It also supplies links to allow users to add a new article or delete any of the existing articles.
add.cfm	This file allows users to create new articles to store in the database using EditLive!.
xt_add.cfm	This file adds the new article created using EditLive! to the database.
edit.cfm	This file loads an existing article into EditLive! for modification.
xt_edit.cfm	This file updates the modified article contents in the database.
view.cfm	This file displays the chosen article in the web browser.
delete.cfm	This file confirms that you wish to delete a specified article.
xt_delete.cfm	This file deletes an existing article from the database.

The Database

The database used in this sample is a Microsoft Access database named content.mdb. Below is a table outlining the fields within the database table articles and a description of the information each field stores.

article_id	A unique number used to identify the article record.
article_title	The title or headline of the article.
article_body	The actual article content.
article_StyleElementText	The styles used to format the article if content was pasted in from Microsoft Word.

Creating a Datasource

Before using this sample you will need to create an ODBC connection to the sample database. This can be done in either of two ways. Please see the links below for instructions.

Setting up an ODBC Datasource with ColdFusion Administrator Interface
Setting up an ODBC Data Source with Windows ODBC Manager

The Index Page (start.cfm)

Purpose - The index page of the press release center lists all of the articles currently available in the database. Users are able to:

create a new article using EditLive!;
edit an existing article using EditLive!; or
delete an existing article from the press database.

Step 1 - Start with a standard HTML page and add the title "Sample Database Application for ColdFusion".

<H1>Sample Database Application for ColdFusion</H1>

Step 2 - Create a link in the page to the file add.asp to allow users to create a new article using EditLive!.

<P><A href="add.cfm">Create a new article</A></P>

Step 3- Connect to the database and retrieve all of the existing articles listed in the articles table.

<CFQUERY DATASOURCE="CFdatasource" NAME="article_list" dbtype="ODBC">
SELECT * FROM articles ORDER BY article_id DESC
</CFQUERY>

Step 4 - Check if there are records in the query. If not, tell the user to add an article.

<CFIF article_list.RecordCount IS "0">



<p>There are no records in the database. Click <STRONG>Add an Article</STRONG>
to add a record to the database.</p>

Step 5 - If records do exist, use the CFOUTPUT tag to loop through the recordset of articles to create a table which lists all of the existing articles by title. Then, for each article, create a link to the:

the View page to view the article,
the Edit page to edit the article using EditLive!, and
the Delete page to delete the article from the database.

Append the article_id needs to all of the links so that the relevant article is known.

<CFELSE>


<TABLE cellpadding="3" cellspacing="0" border="0">
<TR>
<TH>ID</TH>
<TH width="250">Title</TH>
<TH>Available Actions</TH>
</TR>

<CFOUTPUT query="article_list">
<TR>
<TD>#article_id#</TD>
<TD>#article_title#</TD>
<TD><Ahref="view.cfm?article_id=#article_id#">View</A> |
<Ahref="edit.cfm?article_id=#article_id#">Edit</A> |
<Ahref="delete.cfm?article_id=#article_id#">Delete</A></TD>
</TR>

</CFOUTPUT>
</TABLE>

</CFIF>

Adding A New Article (add.cfm and xt_add.cfm)

Purpose - The file add.cfm is used to create a new article using EditLive!. Once the article is complete, it is then added to the database using the processing page, xt_add.cfm.

Add.cfm

Step 1 - Start with a standard HTML page containing EditLive! running in HTMLString mode. To see the steps involved in creating this page please see Using EditLive! with an Online Database or in an Online Form.

<HTML>
<HEAD>
<TITLE>Create a New Article</TITLE>

<SCRIPT language="JavaScript1.2" src="../../editlive/editLive4.js"></SCRIPT>
<SCRIPT language="VBScript" src="../../editlive/editLive4.vbs"></SCRIPT>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">
//Important: set the directory where EditLive! download files can be found
EditLiveGlobal.setDownloadDirectory("../../editlive/");

//Create the EditLive! object
var editLive1 = new EditLive("Plugin1", "100%", 300);

//Assign an onload function to initialize the properties and methods
editLive1.onload = EditLive1_onload;

//This function specifies the initial EditLive! properties and methods
function EditLive1_onload()
{
// Set the user interface to database mode
editLive1.setEditLiveMode('HTMLString');

// Set the image mode to allow inserting images only from the server
editLive1.setImageMode('ServerOnly');

// Initialize the FTP server (for images)
editLive1.setFTPServer('ftp.ephox.com');
editLive1.setFTPServerPort(21);
editLive1.setFTPUsername('anon');
editLive1.setFTPPassword('anon');

// Set the base URL to render relative image addresses
editLive1.setWebRoot('http://www.ephox.com/ftp/');

// (Optional) Load the initial contents of the document's BODY element
editLive1.setSource(" ");

// (Optional) Load the initial contents of the document's STYLE element
//editLive1.setStyleElementText("H1 {font-size:16pt}");
}
</SCRIPT>

</BODY>
</HTML>

Step 2 - Add a heading to the page of "Create a New Article".

<BODY>
<H1>Create a New Article</H1>

Step 3 - Create a form in the page around the EditLive! object. Enter the processing file name, xt_add.asp, in the action attribute of the FORM tag.

<FORM action="xt_add.cfm" method="POST" name="articleForm">

<%
'This area contains the code that initiates EditLive!
%>

</FORM>

Step 4 - Add a text field at the beginning of the form for the article title.

<P>Title: <INPUT type="text" name="article_title" size="50"></P>

Step 5 -To the end of the form add two buttons; a submit button to save the article to the database and a cancel button to return the browser to the index page without saving.

Step 6 - Add two hidden form objects to the form to pass the contents of EditLive! and the style element within EditLive! to for processing.

<INPUT type="hidden" name="article_body">
<INPUT type="hidden" name="article_styleElementText">

Step 7 - Create a function to retrieve the contents of EditLive! and pass it to the hidden form object, and to get the style element for the content within EditLive! and pass it to the other hidden form object.

/* This function gets the contents out of EditLive! and
assigns it to a hidden form field when the Submit button is pressed. */
function articleForm_onSubmit()
{
document.articleForm.article_body.value = editLive1.getSource();
document.articleForm.article_styleElementText.value = editLive1.getStyleElementText();
}

Step 8 - Call this function in the onsubmit event of the FORM tag.

Xt_add.cfm

Step 1 - Create a connection to the database and use the CFQUERY tag to add the new article to the database.

<CFQUERY datasource="CFDatasource" name="add_article">
INSERT INTO articles (article_title, article_body, article_styleElementText)
VALUES('#FORM.article_title#', '#FORM.article_body#', '#FORM.article_styleElementText#')
</CFQUERY>

Step 2 - Redirect the web browser back to the index page.

<CFLOCATION URL="start.cfm">

Editing an Existing Article (edit.cfm and xt_edit.cfm)

Purpose - The file edit.cfm loads an existing article into EditLive! for modification. Once the article is complete, the relevant record in the database is updated using the processing page, xt_edit.cfm.

Edit.cfm

Step 1 - Again, start with a standard HTML page containing EditLive! running in HTMLString mode. To see the steps involved in creating this page please see Using EditLive! with an Online Database or in an Online Form.

<HTML>
<HEAD>
<TITLE>Create a New Article</TITLE>

<SCRIPT language="JavaScript1.2" src="../../editlive/editLive4.js"></SCRIPT>
<SCRIPT language="VBScript" src="../../editlive/editLive4.vbs"></SCRIPT>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">
//Important: set the directory where EditLive! download files can be found
EditLiveGlobal.setDownloadDirectory("../../editlive/");

//Create the EditLive! object
var editLive1 = new EditLive("Plugin1", "100%", 300);

//Assign an onload function to initialize the properties and methods
editLive1.onload = EditLive1_onload;

//This function specifies the initial EditLive! properties and methods
function EditLive1_onload()
{
// Set the user interface to database mode
editLive1.setEditLiveMode('HTMLString');

// Set the image mode to allow inserting images only from the server
editLive1.setImageMode('ServerOnly');

// Initialize the FTP server (for images)
editLive1.setFTPServer('ftp.ephox.com');
editLive1.setFTPServerPort(21);
editLive1.setFTPUsername('anon');
editLive1.setFTPPassword('anon');

// Set the base URL to render relative image addresses
editLive1.setWebRoot('http://www.ephox.com/ftp/');

// (Optional) Load the initial contents of the document's BODY element
editLive1.setSource(" ");

// (Optional) Load the initial contents of the document's STYLE element
//editLive1.setStyleElementText("H1 {font-size:16pt}");
}
</SCRIPT>

</BODY>
</HTML>

Step 2 - Add a heading to the page of "Edit Document".

<BODY>
<H1>Edit Document</H1>

Step 3 - Create a form in the page around the EditLive! object. Enter the processing file name, xt_edit.asp, in the action attribute of the FORM tag.

<FORM name="form1" method="post" action="xt_edit.cfm">



</FORM>

Step 4 - Add the Save and Cancel buttons to the form, the same as for the add.asp page.

Step 5 - Retrieve the existing article information from the database, based on the article's ID.

<CFQUERY DATASOURCE="CFDatasource" NAME="article_content">
SELECT *
FROM articles
WHERE article_id =#article_id#
</CFQUERY>

Step 6 - Create a text area for the article title and give it the initial value of the article title variable.

<CFOUTPUT>

<P>Title: <INPUT type="text" name="article_title" value="#article_content.article_title#" size="40"></P>
</CFOUTPUT>

Step 7 - Create hidden form objects for the other article information and give them all the initial values of the article variables.

Step 8 - Change the arguments of the EditLive! setSource and setStyleElementText properties to load the existing article information into EditLive!.

// Load the contents of the document's STYLE element
editLive1.setStyleElementText(document.forms.form1.article_styleElementText.value);

// Load the contents of the document's BODY element
editLive1.setSource(document.forms.form1.article_body.value);

Step 9 - Add a function to the form to retrieve the contents and style information from EditLive! and assign it back to the hidden form objects when the Save button is pressed.

// This function gets the contents out of EditLive! and
// assigns it to a hidden form field when the Submit button is pressed.
function form1_onsubmit()
{
document.forms.form1.article_body.value = editLive1.getSource();
document.forms.form1.article_styleElementText.value = editLive1.getStyleElementText();
return true;
}

Step 10 - Call this function in the onsubmit event of the FORM tag.

Xt_edit.cfm

Step 1 - Create a connection to the database and use the CFQUERY tag to update the article information in the database.

<CFQUERY DATASOURCE="CFDatasource">
UPDATE articles
SET article_title='#FORM.article_title#', article_body='#FORM.article_body#', article_styleElementText='#FORM.article_styleElementText#'
WHERE article_id=#FORM.article_id#
</CFQUERY>

Step 2 - Redirect the web browser back to the index page.

<CFLOCATION URL="start.cfm">

Deleting an Existing Article

Purpose - The file delete.cfm displays the chosen article information to allow the user to confirm that they wish to delete the specified article. Once confirmation is obtained, the relevant record in the database is deleted using the processing page, xt_delete.cfm.

Delete.asp

Step 1 - Start with a standard HTML page add give it the heading "Delete a Document" and a message asking the user if they wish to delete the article.

<BODY>
<H1>Delete a Document</H1>
<P>Are you sure you wish to delete this article?</P>
</BODY>
</HTML>

Step 2 - Create a connection to the database and use the CFQUERY tag to retrieve the article information from the database.

<CFQUERY DATASOURCE="CFDatasource" NAME="article_content">
SELECT *
FROM articles
WHERE article_id =#article_id#
</CFQUERY>

Step 3 - Create a table in the HTML page that displays the article id and title.

<TABLE>
<CFOUTPUT>

<TR>
<TD>Article ID:</TD>
<TD>#article_content.article_id#</TD>
</TR>


<TR>
<TD>Title:</TD>
<TD>#article_content.article_title#</TD>
</TR>
</TABLE>

Step 4 - Create a form in the page that includes buttons to Delete the article or cancel the deletion. Put the xt_delete.asp file name in the action attribute of the FORM tag.

<FORM action="xt_delete.cfm" method="POST">
<P><INPUT type="submit" value="Delete"> <INPUT type="button" value="Cancel" onclick="javascript:history.back();"></P>
</FORM>
</CFOUTPUT>

Step 8 - Add a hidden form object to the form to store the article id for processing.

Xt_delete.cfm

Step 1 - Create a connection to the database and use the CFQUERY tag to delete the article information from the database.

<CFQUERY DATASOURCE="CFDatasource" name="article_delete">
DELETE FROM articles
WHERE article_id=#FORM.article_id#
</CFQUERY>

Step 2 - Redirect the web browser back to the index page.

<CFLOCATION URL="start.cfm">

Viewing an Article (view.cfm)

Purpose - The file view.cfm displays the chosen article.

Step 1 -Start with a standard HTML page.

Step 2 - Create a connection to the database and retrieve the article information from the database based on the article ID.

<CFQUERY DATASOURCE="CFDatasource" NAME="article_content">
SELECT *
FROM articles
WHERE article_id =#article_id#
</CFQUERY>

Step 3 - Use the CFOUTPUT tag to set the STYLE tag of the page to the article style information retrieved from the database and to display the article title and content.

<CFOUTPUT>
<TITLE>#article_content.article_title#</TITLE>
<STYLE>
#article_content.article_styleElementText#
</STYLE>

</HEAD>
<BODY>

<H1>#article_content.article_title#</H1>

#article_content.article_body#
</CFOUTPUT>

Copyright © 1999-2005 Ephox Corporation. All Rights Reserved. 'Ephox' is a registered trademark of Ephox Corporation.
Java and the Java Powered logo are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries.