Fusebox 4.1 For Beginners Part 4

Displays and Queries

Before we get started into the nitty gritty of things let me explain something about how files are named in fusebox. When fusebox was invented the creators decided that to make their application as neat and as efficient for coders as possible they came up with a system of how their files were to be named. It makes allot of sense when you sit down and think about it. This is how it goes:

Pages that deal with displaying of information and what the end user sees are prefixed with dsp_Filename.

Pages that deal with Queries are prefixed with qry_filename.

Pages that deal with form action or other actions are prefixed with act_filename.

And so on. So you now understand how files are named and why they have been named that way in previous tutorials lets move on.

Displaying in fusebox may seem like a daunting task with everything passing through the index page and all, but in actuality it has made it incredibility simple to have complex items show up on the same page. It also improves the speed at which your pages load. We are going to build a complex page for our welcome page. Open up dsp_welcome.cfm and delete everything between the body tags. Once that is done move on.

Copy and Paste the following code in between the body tags:

<cfoutput>

<table width="775" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><h3>#Request.SiteName#</h3></td>
</tr>
<tr>
<td width="216"><form name="Login" method="post" action="#MM_loginAction#">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Username:
<input type="text" name="username"></td>
</tr>
<tr>
<td>Password:
<input type="password" name="password"></td>
</tr>
<tr>
<td align="center"><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form></td>
<td width="559">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>

</cfoutput>

So now your dsp_welcome page should look like this:

Ok now create a new file and call it act_login.cfm. Copy and paste the following text into it making sure you delete any html that might have been generated by your editor:

<cfif IsDefined("FORM.Username")>
<cfset MM_redirectLoginSuccess="#Request.myself#">
<cfset MM_redirectLoginFailed="#Request.myself#">
<cfquery name="MM_rsUser" datasource="#Request.dsn#">
SELECT username,password FROM users WHERE username='#FORM.Username#' AND password='#FORM.Password#'
</cfquery>
<cfif MM_rsUser.RecordCount NEQ 0>
<cftry>
<cflock scope="Session" timeout="30" type="Exclusive">
<cfset Session.MM_Username=FORM.Password>
<cfset Session.MM_UserAuthorization="">
</cflock>
<cfif IsDefined("URL.accessdenied") AND false>
<cfset MM_redirectLoginSuccess=URL.accessdenied>
</cfif>
<cflocation url="#MM_redirectLoginSuccess#" addtoken="no">
<cfcatch type="Lock">
<!--- code for handling timeout of cflock --->
</cfcatch>
</cftry>
</cfif>
<cflocation url="#MM_redirectLoginFailed#" addtoken="no">
<cfelse>
<cfset MM_LoginAction=CGI.SCRIPT_NAME>
<cfif CGI.QUERY_STRING NEQ "">
<cfset MM_LoginAction=MM_LoginAction & "?" & XMLFormat(CGI.QUERY_STRING)>
</cfif>
</cfif>

So your file should now look exactly like this:

Ok now that you have done that, go and add to your plugin for requests the variable "Request.SiteName". Ok now how do we get the script above to work with the form if we are calling the same page? Good question! Open up your circuit.xml.cfm doc. And go to the fuseaction Welcome. Type into it the following before the include for dsp_welcome.cfm:

<include template="act_login.cfm" />

Ok go ahead and open up your index.cfm page in your browser. And check out your welcome page. Now you won't see anything different just yet so open up your dsp_welcome.cfm page and edit a few things.

Copy and past the code below into your dsp_welcome.cfm file and delete the older version:

<cfoutput>
<table width="775" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><h3>#Request.SiteName#</h3></td>
</tr>
<tr>
<td width="216"><form name="form1" method="POST" action="#MM_loginAction#">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Username:
<input type="text" name="username"></td>
</tr>
<tr>
<td>Password:
<input type="password" name="password"></td>
</tr>
<tr>
<td align="center"><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form></td>
<td width="559">Welcome <cfif IsDefined("Session.MM_Username")>#Session.MM_Username#<cfelse>Guest</cfif>!<br>
<cfif isdefined("Session.MM_username")>Other users include:<br><Cfloop query="getusers">#Username#<br></Cfloop></cfif> </td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
</cfoutput>

Ok now create a new file called qry_users.cfm. And save it where you have saved all of your dsp files. Ok now copy and paste the following code: (NOTE: If your editor automatically places html on your new page delete it.)

<cfquery datasource="#Request.dsn#" name="GetUsers">
    SELECT Username FROM Users
</cfquery>

Ok now to call it so our dsp_welcome.cfm can use it we must go back and edit the circuit.xml.cfm file. So go ahead and use an include tag in the circuit.xml.cfm file and be sure it is under the fuseaction of Welcome. When you are done call the index.cfm page to your browser.

So now you can see your username and whatever other usernames you may have in your db. Pretty cool huh? All done with three pages of short scripts that can easily be fixed if needed. No more searching hundreds of lines for the problem. But what does this have to do with display? Good question. Create a new file called dsp_welcome2.cfm and type anything you want into it. Change the color of everything you typed to something other than black. Doesn't have to be long just something so it displays. Ok now create a file called dsp_welcome3.cfm and do the same. Ok once done open up your circuit.xml.cfm file and include the new file as follows:

<include template="dsp_welcome3.cfm" />
<include template="act_login.cfm" />
<include template="qry_users.cfm" />
<include template="dsp_welcome.cfm" />
<include template="dsp_welcome2.cfm" />

Notice that the dsp_welcome3.cfm file is on top and the the one numbered 2 is under the original dsp_welcome.cfm file. Go ahead an open your browser and call index.cfm. As you can see the files show in the exact order they are called. If you use and are fimilar with CSS the possibilities are endless for display and content can easily be changed like underwear! No more pulling a whole page down to add or edit content. Just open up the file with the content you want to change and leave the rest of the page alone! WOW!

Ok one more thing before I wrap up this series. Open up your index.cfm file and take a look at it. Notice anything odd? The cfapplication tag is called on inside the index.cfm. This is because you can call the cfapplication tag anywhere you want to run it. It is ran before any other tag is ran. So now that you know it is here you can edit it as you see fit. A word of warning though. Don't mess around with anything else on this page. A brief explanation of the fusebox4.runtime.cfmx.cfm file that is included into index.cfm is that is where all the pages you have been working on are called from and put into action. This file is the gray matter of the application the central nervous system if you will. It is beyond the scope of these tutorials, but if you take a peak at the file you will see notes for each part of the code explaining what each part does. Well that is it for now have fun exploring the fusebox concept and becoming a better programmer!