User Recipe: Journal Publisher


The Journal Publisher is used to create new entries for a given journal. To help keep new entries on track, all the previously entered ones are also visible. Moreover, any of the older entries can be modified or annotated with the click of a button.

One innovative feature of the Journal Publisher is the capability to store a draft of the current entry prior to publishing it. Our recipe uses JavaScript cookies to store and retrieve the draft. In this recipe, you'll also work with code for outputting date and time functions in a more user-friendly format.

Step 1: Implement Journal Publisher Design

As with the Journal, two separate areas are used in the Journal Publisher layout. The top area is for inserting a new entry and uses standard form elements. The bottom area displays the previous entries, with the entry's date in one column and other information in another.

1.

Create a page for the Journal Publisher recipe, either from a template or from the File > New dialog.

In the Journal folder, locate the folder for your server model and open the journal_publisher page there.

2.

In the content area of your page, create a header for the page and an area to hold both the general journal information and the specific entries.

From the Snippets panel, drag the Recipes > Journal > Wireframes > Journal Publisher - Wireframe snippet into the Content editable region.

3.

Add labels and table cells to hold the journal information (name, owner, and description) and, below that, a two-row, two-column table for the journal entries.

Place your cursor in the first row below the words JOURNAL PUBLISHER and insert the Recipes > Journal > Forms > Journal Publisher - Message Post snippet.

Place your cursor in the bottom row of the wireframe and insert the Recipes > Journal > ContentTables > View Journal - Content Table snippet [r6-10].

r6-10.


4.

Save the page.

Step 2: Add Database Components

As in the Journal page, two recordsets are used: one for the journal and the other for the journal entries. They are constructed in exactly the same way the earlier page was built.

Note

Although you're welcome to construct both recordsets by following the subsequent steps, you can also copy and paste each of the recordsets used in the Journal page. To copy a recordset, select it in the Bindings panel and, from the panel Options menu, choose Copy. Then switch to the receiving page and, again from the Bindings panel's Options menu, choose Paste.


1.

From the Bindings panel, choose Add (+) and select Recordset.

2.

In the dialog's simple view, enter an appropriate name for the recordset.

Enter Journal in the Name field.

3.

Choose a connection (data source) to use.

Select Recipes from the Connection list.

4.

Choose the table in the data source to work with.

Select Journals (journals for PHP) from the Table list.

5.

Leave the Columns option set to All.

6.

In the Filter area of the Recordset dialog, set the four Filter list elements like this:

JournalID

= (Equals)

URL Parameter

ID


7.

Leave the Sort option set to None and click OK to close the dialog.

Although similar to the Journal recordset, the Entries recordset is filtered differently. Rather than look for a specific entry, this recordset gathers all the entries for the current journal, as represented by the ID parameter in the URL.

1.

From the Bindings panel, choose Add (+) and select Recordset.

2.

In the dialog's simple view, enter an appropriate name for the recordset.

Enter Entries in the Name field.

3.

Choose a connection (data source) to use.

Select Recipes from the Connection list.

4.

Choose the table in the data source to work with.

Select JournalEntries (journalentries for PHP) from the Table list.

5.

Leave the Columns option set to All.

6.

In the Filter area of the Recordset dialog, set the four Filter list elements like this:

EnTRyJournal

= (Equals)

URL Parameter

ID


7.

Leave the Sort option set to None and click OK to close the dialog.

Step 3: Data Binding Process

Only a few data source elements need to be bound to this page: the journal's title, the entry's date, and the entry itself. In addition, we need to set dynamic parameters to allow each entry to be edited.

1.

From the Bindings panel, expand the Journal recordset.

2.

Place the data source fields onto the page in their respective areas:

Drag JournalTitle in the cell next to the Journal Name label.

3.

In the Bindings panel, expand the Entries recordset.

4.

Place the data fields from Entries onto the page.

Drag EntryDate into the cell below the Date/Time label.

 

Select the term [EntryTitle] in the placeholder text at the top of the content area, and drag EntryTitle from the Bindings panel onto the selection.

 

Select the term [EntryBy] in the placeholder text at the top of the content area, and drag EntryBy from the Bindings panel onto the selection.

 

Select the term [EntryText] in the placeholder text at the top of the content area, and drag EntryText from the Bindings panel onto the selection.


5.

Save the page.

Let's create a link that will allow us to easily edit any visible journal entry.

1.

Select the text or image you want to serve as the link.

Choose the text [edit] below the Journal Description label.

2.

Click the folder icon next to the Link field in the Property inspector.

The Select File dialog opens.

3.

Choose Parameters at the bottom of the dialog.

4.

In the Name column of the Parameters dialog, enter the variable name.

Enter ID in the Name column.

5.

In the Value column, enter the dynamic value of the current journal's ID.

Click the lightning bolt icon next to the Value column and, from the Dynamic Data dialog, choose JournalID from the Journal recordset. When you're done, click OK to close the Dynamic Data dialog.

6.

Choose Add (+) to insert another parameter.

7.

Enter a name for the entry ID variable in the Name column.

Enter EditID in the Name column.

8.

Select the dynamic data for the value.

Click the lightning bolt icon next to the Value column and, from the Dynamic Data dialog, choose EntryID from the Entries recordset. When you're done, click OK once to close the Dynamic Data dialog, and again to close the Parameters dialog.

9.

In the Select File dialog, select the file that will be used to edit the survey information.

Choose journal_editor in the Journal folder for your server model.

10.

When you're done, click OK to insert the link [r6-11].

r6-11.


For PHP

To handle the proper setting of the current date and time, PHP users need to include a hidden field form element that uses the PHP function date().

1.

From the Forms tab of the Insert bar, drag a Hidden Field form element into the form next to the Current Date/Time label

2.

Enter curDate as the name for the hidden element on the Property inspector.

3.

In the Value field, enter the following code:

<?php echo date("Y-m-d h:i:s A"); ?>


4.

Save your page.

This code will output a date like March 31, 2006, 7:30 in the evening as 2006-03-31 07:30:00 PM.

Step 4: Adding Repeat Region

To display all the journal entries, a Repeat Region server behavior is attached to the appropriate table row.

1.

Select any of the dynamic data fields in the entries content area.

2.

From the Tag Selector, choose the table row tag.

Select the <tr> tag from the Tag Selector.

3.

From the Server Behaviors panel, choose Add (+) and select Repeat Region.

4.

In the Repeat Region dialog, choose the recordset.

Choose Entries from the Recordset list.

5.

Set the Show option to display the number of records you want.

Choose Show All Records.

6.

Click OK when you're done and save your page.

Step 5: Insert RecordNew Journal

After the information for the new journal entry has been entered, the Post button should submit the data to be stored. The standard Dreamweaver Insert Record server behavior is perfectly suited for such a task. However, we'll need to do a little setup first and make sure the current journal ID value is available for use. We do this by putting the ID value passed in the URL string into a hidden form element.

1.

Select the hidden form element.

Choose the hidden form element named ID.

2.

In the Property inspector, enter the following code in the Value field:

<%=Request("ID")%>


<%=Request("ID")%>


<cfoutput>#URL.ID#</cfoutput>


<?php echo $_GET['ID']; ?>


3.

Save your page.

Now that the page is properly set up to handle the Insert Record server behavior, we're ready to add it to the page.

For ASP

1.

From the Server Behaviors panel, choose Add (+) and select Insert Record from the list.

2.

In the Insert Record dialog, choose your data source.

Choose Recipes from the Connection list.

3.

Select the table you want to insert the record into.

From the Insert Into Table list, choose JournalEntries.

4.

Leave the After Inserting, Go To field blank.

By leaving this field blank, the user will stay on the same page and be able to add more entries.

5.

Select the form on the current page from which to gather the record values.

In the Get Values From list, make sure JournalPublisher is selected.

6.

In the Form Elements area, match the form elements on the page to the fields in the data source table.

Set PostTitle to insert into the EntryTitle column as Text type.

 

Set PostBy to insert into the EntryBy column as Text type.

 

Set MessagePost to insert into the EntryText column as Text type.

 

Set ID to insert into the EntryJournal column as Numeric type.


7.

When you're sure your choices are correct, click OK to close the dialog and add the behavior.

For ColdFusion and PHP

1.

From the Server Behaviors panel, choose Add (+) and select Insert Record.

2.

In the Insert Record dialog, choose the current form.

Select JournalPublisher from the Submit Values From list.

3.

Select your data source from the list.

Choose Recipes from the Data Source list.

4.

Enter your user name and password, if needed.

5.

From the list, select the table in the data source into which to insert.

Choose JournalEntries (journalentries for PHP) from the Insert Into Table list.

6.

Set the data source fields to their corresponding form elements.

Make sure the EntryID data column is set to be an unused Primary Key.

 

Set EntryJournal to the FORM.ID form element and submit as Numeric type for ColdFusion and Integer for PHP.

 

Set EntryBy to the FORM.PostBy form element and submit as Text type.

 

Set EntryTitle to the FORM.PostTitle form element and submit as Text type.

 

Set EntryText to the FORM.MessagePost form element and submit as Text type.


Make sure EntryDate is set not to get a value.

Set EntryDate to the FORM.curDate form element and submit as Text type.

7.

Leave the After Inserting, Go To field blank, and click OK to close the dialog.

Step 6: Add Date and Cookie Code

Journals by their very nature are date-oriented: Entries in journals typically are written in chronological order and dated. In the first step of the recipe, we'll add code that displays the current date and time when the new entry page opens. Another snippet of code, this one in JavaScript, attaches reset functionality to a text link, which will clear the journal form fields and allow the user to start fresh.

The cookies are used to temporarily store and retrieve a draft of the journal. This feature is handy in situations where the journal writer is unable to complete a post and does not want to publish an unfinished draft. The cookies are set to expire in 30 days and will persist from one session to the next. To implement the cookies, we'll need to add four JavaScript functions and the code necessary to call those functions.

Let's start by adding the date functionality. The standard Dreamweaver time formats control either the date or the time, but not both. The code used in our example formats the date and time like this:

Tuesday, March 31, 2004 10:12:42 AM

Without the specialized formatting, the date and time would be in a less user-friendly format.

1.

Place the cursor where you want the date and time to appear.

Place the cursor in the cell adjacent to the Current Date/Time label.

2.

Insert the following code:

From the Snippets panel, open the Recipes > Journal > Custom Code folder for your server model and insert the Current Date & Time - Dynamic Text snippet.

Note

You can test the date/time code by entering Live Data view. After you see the date and time string, select Refresh from the Live Data toolbar to verify that it updates properly. Again, for this to work properly you'll need to have an active journal ID available in Live Data Settings.

[View full width]

<%=FormatDateTime(Now(), 1) & " " & FormatDateTime (Now(), 3)%>


<%=new Date().toLocaleString()%>


[View full width]

<cfoutput>#LSDateFormat(Now(), "ddd, mmmm dd, yyyy")#</cfoutput>


<?php echo date("l, F j, Y h:i:s A"); ?>


3.

Save the page [r6-12].

r6-12.


The next bit of code applies a JavaScript reset behavior to a standard text link. Although you could use a Reset form button to the same effect, this method provides you with an alternative approach that keeps the number of form buttons to a minimum. After it's added, a click of the reset link clears all the text fields, letting the user start over.

1.

Select the text you want to apply the reset action to.

Select the text Refresh in the upper right of the content area.

2.

Add the following as a link in the Property inspector:

From the Snippets panel, insert the Recipes > Journal > ClientJavaScript > Journal Publisher - Refresh snippet. The snippet includes all the code necessary to create the link and can just be dropped on the selected text.

javascript:document.JournalPublisher.reset()

This bit of JavaScript tells the form (named JournalPublisher) on the current document to reset its values.

3.

Save your page.

Time to add the cookies into the mix. In all, four JavaScript functions are needed:

  • setDraft() Stores the current form entries as a draft in a cookie on the local system.

  • retrieveDraft() Reads the stored information from the cookie and repopulates the form.

  • getCookie() A helper function that opens a specified cookie.

  • getCV() A helper function that gets a specific value from an opened cookie.

In addition to adding the four functions to the code, we'll also need to add code to call the two main functions, setDraft() and retrieveDraft().

Let's add the four JavaScript functions to the page.

1.

Switch to Code view and, if necessary, enter a <script> tag pair in the <head> section of the document, just before the closing </head> tag in a standard page and within the head editable region in a template-derived page.

Place your cursor in the <script></script> tag pair located in the head editable region.

2.

Insert the following code:

From the Snippets panel, insert the Recipes > Journal > ClientJavaScript > Journal Publisher - Set Draft snippet.

[View full width]

function setDraft() { var ExpirationDate = new Date() ExpirationDate.setMonth(ExpirationDate.getMonth()+1); document.cookie = 'PostBy' + "=" + escape(document.JournalPublisher.PostBy.value) + "; expires=" + ExpirationDate.toGMTString(); document.cookie = 'PostTitle' + "=" + escape(document.JournalPublisher.PostTitle.value) + "; expires=" + ExpirationDate.toGMTString(); document.cookie = 'MessagePost' + "=" + escape(document.JournalPublisher.MessagePost .value) + "; expires=" + ExpirationDate.toGMTString(); }

Next we'll add the code to retrieve the draft information from the cookie.

3.

Place your cursor immediately after the setDraft() function just added.

4.

Insert the following code:

From the Snippets panel, insert the Recipes > Journal > ClientJavaScript > Journal Publisher - Retrieve Draft snippet.

function retrieveDraft() {  document.JournalPublisher.PostBy.value = getCookie('PostBy');  document.JournalPublisher.PostTitle.value = getCookie('PostTitle');  document.JournalPublisher.MessagePost.value = getCookie('MessagePost'); }

Now, let's add the two helper functions.

5.

Place your cursor below the retrieveDraft() function just added.

6.

Insert the following code:

From the Snippets panel, insert the Recipes > Journal > ClientJavaScript > Cookie snippet. This snippet includes both functions.

function getCookie(name) {  var arg = name + "=";  var alen = arg.length;  var clen = document.cookie.length;  var i = 0;  while (i < clen) {  var j = i + alen;  if (document.cookie.substring(i, j) == arg)  return getCV(j);  i = document.cookie.indexOf(" ", i) + 1;  if (i == 0) break;  }  return ""; } function getCV(offset) {  var endstr = document.cookie.indexOf(";", offset);  if (endstr == -1) endstr = document.cookie.length;  return unescape(document.cookie.substring(offset, endstr)); }

7.

Save the page.

For the finishing touches, we just need to add the JavaScript function calls. In this recipe, we'll use both a form button and a standard link to show you how it's done in either situation.

Let's start with the form button for saving the draft.

Note

Because client-side cookies can be disabled by individual browsers, one possible enhancement would be to display the Save As Draft and Load Draft user interface elements only if cookies are available. You can use server-side scripting to detect the user's cookie status.


1.

Select the form button you want to use to trigger the setDraft() function.

Choose the form button labeled Save As Draft.

2.

Switch to Code view and position your cursor within the tag at the very end.

3.

Insert the following code:

onClick="setDraft()"

From the Snippets panel, insert the Recipes > Journal > ClientJavaScript > Journal Publisher - Save Draft snippet.

Now let's add the code to trigger the retrieveDraft() function.

4.

From Design view, select the text you want to use to call the retrieveDraft() function.

Select the phrase Load Draft in the upper-right corner of the content area.

5.

Add the following as a link in the Property inspector:

From the Snippets panel, insert the Recipes > Journal > ClientJavaScript > Journal Publisher - Load Draft snippet. The snippet includes all the code necessary for creating the link and can just be dropped on the selected text.

javascript:retrieveDraft()

6.

Save your page.

As you test this page, be sure to notice that the just-added journal entries are listed at the bottom of the page after the record is inserted. Be sure to check the draft functionality as well by entering a message and first choosing Save As Draft. Then make a change or two and choose Load Draftyour previous version should be restored.




Macromedia Dreamweaver 8 Recipes
Macromedia Dreamweaver 8 Recipes
ISBN: 0321393910
EAN: 2147483647
Year: 2003
Pages: 121

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net