Building an Address Book with ColdBox: Part 1

Ok, let's get started with our address book application. First things first. Let's create the application framework that we can login and logout of.

So let's start by copying over the ColdBox application template and renaming it to "Address Book"

I made a few other modifications to start. -I deleted the files in the views folder -I deleted the methods in the handlers/general.cfc

So let's get cracking. First we need to modify our config/coldbox.xml.cfm file.

-Change the AppName setting to "Address Book" -Change the DefaultEvent setting to "general.viewDashboard" -Change the OwnerEmail setting to your email address

Next, since we've decided the default event is "general.viewDashboard", we should probably create it. So let's open handlers/general.cfc

-We'll want to create a function "viewDashboard" that appears like this:

<cffunction name="viewDashboard" access="public" returntype="void" output="false">
   <cfargument name="Event" type="coldbox.system.beans.requestContext">
      
   
   
</cffunction>

Let's add a line to set our view. Like this:

<cfset Event.setView("dspDashboard") />

So now our function should look like this:

<cffunction name="viewDashboard" access="public" returntype="void" output="false">
   <cfargument name="Event" type="coldbox.system.beans.requestContext">
   
   <cfset Event.setView("dspDashboard")/>
</cffunction>
Now let's actually create the view we've just referenced. Create a new file in the views directory called "dspDashboard.cfm" and open it.

For now let's just add a single line.

<h1>Address Book</h1>
If we go to our browser and open up our project we should see a blank page with Address Book as the title. http://localhost/labs/addressBook/

Now let's put some security around our page. The page we've just created will be our home or landing page once we're authenticated. We'll need to add some logic to check if we're authenticated. If our user isn't authenticated, we should direct them to a login page.

Let's add some logic to the onRequestStart function in handlers/main.cfc. I've pulled some of this logic from Luis's sample login application so if you poked around there you may recognize it. Names have been changed to protect the innocent as well as use naming conventions that I prefer.

Here is the snippet below.

<cfscript>
   var loggingIn = false;
   var oSession = getPlugin("sessionstorage");
         
         
   //Are we logging In    if ( event.getCurrentEvent() eq "general.login" )
            loggingIn = true;
         
   //Login Check    if ( (NOT oSession.exists("loggedIn") OR NOT oSession.getVar("loggedIn") ) and not loggingIn ){
      //Override the incoming event.       Event.overrideEvent("general.viewLogin");      
   }
</cfsript>
Let's take a look at the code. First we initialize 2 variables. loggingIn is a boolean that we'll set if the loginEvent is being called. oSession is a reference to the sessionScope. The method getPlugin("sessionStorage") is calling a ColdBox plugin called sessionStorage that is basically a Session Facade.

In our next block of code we check to see if the current event is set to our login event. Our login event will be called "general.login". If this is true we'll want to set loggingIn to true so that we don't re-locate to the login page when we're actually trying to login.

if ( event.getCurrentEvent() eq "general.login" )
            loggingIn = true;

Finally, we have an if statement that checks to see if there is a session variable named "loggedIn" and if it is true. This statement also makes sure we aren't actively trying to login. If we're not already logged in and not trying to login we want to re-locate to the login page we can do this by overriding the event which is show below:

Event.overrideEvent("general.viewLogin");
Ok. Now let's go create our login page. First let's create a function in handlers\general.cfc called "viewLogin".

The skeleton of the method should look something like this: / On our login page we'll want a form that will submit our login information. To specify that login Event we'll use the following:

<cfscript>
   var rc = Event.getCollection();
   //Set xeh's    rc.xeLogin = "general.login";

</cfscript>
The first line sets the variable rc and calls the Event.getCollection method. This basically is creating a reference to the request scope. on the next line we set a variable rc.xeLogin to "general.login" which is our login event. I like to use the prefix xe to name my "Exit Events". This is pretty common and is used in Model-Glue, Fusebox, etc.

Finally let's set our view. We'll do this by using the Event.setView method.

<cfset Event.setView("dspLogin")>
So our finished method should look like this.

<cffunction name="viewLogin" access="public" returntype="void" output="false">
   <cfargument name="Event" type="coldbox.system.beans.requestContext">
      
   <cfscript>
      var rc = Event.getCollection();
      //Set xeh's       rc.xeLogin = "general.login";

   </cfscript>

   <cfset Event.setView("dspLogin")>
</cffunction>
Next up, let's create our login view. We'll just need a simple form that submit's a username and password to our login event.

So create a file views\dsp_Login.cfm

Your page can be as simple as this:

<h1>Login</h1>

<cfoutput>
<form action="index.cfm?event=#Event.getValue("xeLogin")#" method="post">

<table cellpadding="5" cellspacing="0">
   <tr>
      <td><strong>Username:</strong></td>
      <td height="32"><input name="username" type="text" id="username" /></td>

</tr>
<tr>
<td><strong>Password:</strong></td>
      <td><input name="password" type="password" id="password" /></td>
</tr>
       <tr>
   <td align="right" colspan="2"><input type="submit" name="Submit" value="Login" /></td>
</tr>
</table>

</form>
</cfoutput>
This is all pretty standard stuff. The one line of note is probably:
<form action="index.cfm?event=#Event.getValue("xeLogin")#" method="post">
Here we simply getting the Exit Event that we set in our "viewLogin" function. We should probably abstract the "index.cfm" reference. Perhaps in a later lesson.

We have two final steps. We'll want to create a login event and a logout event. We'll do this in our handlers\general.cfc

We start by creating a "login" function.

<cffunction name="login" access="public" returntype="void" output="false">
   <cfargument name="Event" type="coldbox.system.beans.requestContext">
      
   
      
</cffunction>
For now we won't put in any real security. we'll just set a session variable that our user has logged in. we do this like so:

<cfset getPlugin("sessionstorage").setVar("loggedIn", true) />

We can add a message to our log using the logger plugin if we choose, like so:

<cfset getPlugin("logger").logEntry("information","The user Curt has now logged in.") />
Finally, we'll want to relocate to the home page. We do this using the setNextEvent method.

<cfset setNextEvent("general.viewDashboard") />

That should be good for the "login" method for now.

The "logout" method should be very similar, we'll just want to remove the session key "loggedIn". Here is what I've got below for my logout method.

<cffunction name="logout" access="public" returntype="void" output="false">
   <cfargument name="Event" type="coldbox.system.beans.requestContext">
      

   <cfset getPlugin("sessionstorage").deleteVar("loggedIn") />

      
   <cfset getPlugin("logger").logEntry("information","The user Curt logged out.") />
                        
   <!--- //relocate to login page. --->    <cfset setNextEvent("general.viewLogin") />
      
</cffunction>

Next time we'll add some more meat to the login method to use a database as well as begin our address book functions.

Comments
Chris's Gravatar Do you plan to finish this series?
# Posted By Chris | 4/25/08 11:19 AM