Creating a User Administration Page

Contact Us or call 1-877-932-8228
Creating a User Administration Page

Creating a User Administration Page

In this section, you will learn how to create a user administration page that will display all of the users' information within a table structure. The page will consist of multiple forms that allow you to edit user information, delete users and add new users. The page will look like this:

Displaying Users

The page is divided into two parts:

  1. A section for adding a new user.
  2. A section for displaying, editing and deleting existing users.

This first demo shows how to perform the query and display the results as form fields. Note the use of the query attribute in the <cfoutput> tag. This instructs ColdFusion to treat the <cfoutput> like a <cfloop>, looping through each record returned by the query.

Code Sample:

ManagingData/Demos/Admin.cfm
               <cfquery name="getUsers" datasource="#APPLICATION.datasource#">
	SELECT userid, firstname, lastname, email, role
	FROM Users
</cfquery>

<html>
<head>
<title>Admin Page</title>
<style>
	.admin {color:#990000}
	.user {color:#000000}
</style>
</head>

<body>
<cfoutput>
<form method="post" action="#CGI.SCRIPT_NAME#">
</cfoutput>
<table cellpadding="3" cellspacing="0" id="maintable" width="700">
<tr>
	<th>First Name</th>
	<th>Last Name</th>
	<th>Email</th>
	<th>Role</th>
	<th colspan="2">Action</th>
</tr>
<tr>
	<td><input type="text" name="firstname" size="15"></td>
	<td><input type="text" name="lastname" size="15"></td>
	<td><input type="text" name="email" size="30"></td>
	<td>
		<select name="role">
			<option value="admin" class="admin">Admin</option>
			<option value="user" selected class="user">User</option>
		</select>
	</td>
	<td colspan="2" align="center" width="120">
		<input name="add" type="submit" value="Add User" style="font-size:xx-small">
	</td>
</tr>
<tr><td colspan="6"><hr></td></tr>
</table>
</form>
<cfoutput query="getUsers">
<form method="post" style="margin:0px" action="#CGI.SCRIPT_NAME#">
	<table width="700">
		<tr>
		<td>
		<input type="text" name="firstname" value="#firstname#" size="15" class="#role#">
		</td>
		<td>
		<input type="text" name="lastname" value="#lastname#" size="15" class="#role#">
		</td>
		<td>
		<input type="text" name="email" value="#email#" size="30" class="#role#">
		</td>
		<td>
			<cfif role EQ "admin">
				<cfset adminselected =  "selected">
				<cfset userselected = "">
			<cfelse>
				<cfset userselected = "selected">
				<cfset adminselected =  "">
			</cfif>
			<select name="role">
				<option value="admin" #adminselected# class="admin">Admin</option>
				<option value="user" #userselected# class="user">User</option>
			</select>
		</td>
		<td width="120">
		<input type="submit" value="EDIT" style="font-size:xx-small" class="#role#"> 
		<input type="submit" value="DELETE" style="font-size:xx-small" class="#role#">
		</td>
		</tr>
	</table>
</form>
</cfoutput>
<cfinclude template="Includes/Footer.cfm">
</body>
</html>

Adding Users

We will now add code to try to insert users when the Add User button is pressed. As we'll be processing edits and deletes with this same page, we must detect not only that a form has been submitted, but which form it was.

We will want to email the new user an auto-generated password, so we will include Includes/Functions.cfm, which contains generatePassword() and sendPassword() functions.

Code Sample:

ManagingData/Demos/Admin2.cfm
<cfinclude template="Includes/Functions.cfm">

<cfif isDefined("FORM.inserting")>
	<cfset password=GeneratePassword(10)>
	<cfset sendPassword(FORM.email,password)>
		
	<cfquery datasource="#APPLICATION.datasource#">
		INSERT INTO Users
		(email, password, firstname, lastname, role)
		VALUES ('#FORM.email#', '#password#','#FORM.firstname#','#FORM.lastname#','#FORM.role#')
	</cfquery>
</cfif>
---- C O D E   O M I T T E D ----

Editing and Deleting Users

Now we will add the code to edit and delete users. Note that we need to be able to determine which submit button was pushed. We do this by giving the submit buttons names. The name-value pair of the button that is pressed will be sent to the server.

Code Sample:

ManagingData/Demos/Admin3.cfm
<cfinclude template="Includes/Functions.cfm">

<cfif isDefined("FORM.inserting")>
	<cfset password=GeneratePassword(10)>
	<cfset sendPassword(FORM.email,password)>
	<cfquery datasource="#APPLICATION.datasource#">
		INSERT INTO Users
		(email, password, firstname, lastname, role)
		VALUES ('#FORM.email#', '#password#','#FORM.firstname#','#FORM.lastname#','#FORM.role#')
	</cfquery>
<cfelseif isDefined("FORM.editing")>
	<cfquery datasource="#APPLICATION.datasource#">
		UPDATE Users
		SET firstname='#FORM.firstname#',
			lastname='#FORM.lastname#',
			email='#FORM.email#',
			role='#FORM.role#'
		WHERE userid=#FORM.userid#
	</cfquery>
<cfelseif isDefined("FORM.deleting")>
	<cfquery datasource="#APPLICATION.datasource#">
		DELETE FROM Users
		WHERE userid=#FORM.userid#
	</cfquery>
</cfif>
---- C O D E   O M I T T E D ----

Controlling Access to the Page

As we only want users who are admins to be able to view this page, we need to check the user's role before displaying the page. We do this by checking SESSION.role.

Note that we also had to add code to Login.cfm to set the SESSION.role variable as shown in the files below.

Code Sample:

ManagingData/Demos/Login.cfm
<cfif isDefined("FORM.submitted")>
	<cfquery name="logincheck" datasource="#APPLICATION.datasource#">
		SELECT firstname, lastname, userid, role
		FROM Users
		WHERE email='#FORM.email#'
				AND password='#FORM.password#'
	</cfquery>
	<cfif logincheck.RecordCount EQ 1>
		<cfset SESSION.firstname = logincheck.firstname>
		<cfset SESSION.lastname = logincheck.lastname>
		<cfset SESSION.userid = logincheck.userid>
		<cfset SESSION.role = logincheck.role>
		<cfif isDefined("FORM.rememberme")>
			<cfcookie name="loggedin" value="#logincheck.userid#" expires="7">
		</cfif>
		<cflocation url="index.cfm" addtoken="no">
	<cfelse>
		<cfset badlogin=true>
	</cfif>
</cfif>
<cfparam name="FORM.email" default="">
<html>
<head>
<title>Login Page</title>
</head>
<body>
	<h2>Log in</h2>
	<cfif isDefined("badlogin")>
		<p class="errors"><b>That is not the
			correct email and password. Please
			<a href="Login.cfm">try again</a>.</p>
	</cfif>
	<cfoutput>
	<form method="post" action="#CGI.SCRIPT_NAME#">
	</cfoutput>
	<input type="hidden" name="submitted" value="true">
		<table>
		<tr>
			<td>Email:</td>
			<td><input type="text" name="email" value="<cfoutput>#FORM.email#</cfoutput>" size="40"></td>
		</tr>
		<tr>
			<td>Password:</td>
			<td>
			<input type="password" name="password" size="14">
			</td>
		</tr>
		<tr>
			<td colspan="2">
			<input type="checkbox" name="rememberme"> Remember Me
			</td>
		</tr>
		<tr>
			<td align="right" colspan="2">
			<input type="submit" value="Log in">
			</td>
		</tr>
		</table>
	</form>
<cfinclude template="Includes/Footer.cfm">

</body>
</html>

Aborting the Page for Unpermitted Visitors

We can abort the execution of a page when users who are not permitted try to access it with the <cfabort> tag.

Code Sample:

ManagingData/Demos/Admin4.cfm
               <cfif NOT isDefined("SESSION.role") or SESSION.role NEQ "admin">
	You do not have permissions to view this page.
	<cfabort>
</cfif>
---- C O D E   O M I T T E D ----

Providing Convenient Access to the Admin Page

To make it convenient to access the admin page, we added a link to the footer that only appears when an "admin" user is logged in.

Code Sample:

ManagingData/Demos/Includes/Footer.cfm
<br><hr width="350" align="right">
<div align="right" id="copyright">&copy; 2007 Runners Home.
All rights reserved.
<a href="index.cfm">Home</a> |
<a href="Races.cfm">Races</a> |
<a href="Resources.cfm">Resources</a> |
<cfif isDefined("SESSION.userid")>
	<a href="Logout.cfm">Log out</a>
<cfelse>
	<a href="Login.cfm">Log in</a>
</cfif>
<cfif isDefined("SESSION.role") AND SESSION.role EQ "admin">
	 | <a href="Admin4.cfm">Admin</a>
</cfif>
</div>

To see how the applicatoin now works:

  • Open ManagingData/Demos/index.cfm and log in as George Washington (gwashington@whitehouse.gov / password). You should have a link on the footer to the Admin page. Click the link. You should be allowed access.
  • Click the Logout link on the footer. You should be logged out and returned to the home page.
  • Log in again as John Quincy Adams (jqadams@whitehouse.gov / password). The Admin link should not be present.

Important Note

The admin page has a very serious problem. It allows an admin to delete himself or to change his status from admin to user. This could create a situation in which there were no admins left to administer the users. In production code, you would want to take measures to prevent this from happening.

Next