If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

In parts one and two of this tutorial we covered the user side of things, now we have to handle our administration area. This is going to be pretty simple, but the cool thing is that it will integrate totally with all our existing code.

In order to protect the PM page from guests, we set our MIN_AUTH_LEVEL constant to 1, so all we need to do in order to only let administrators in is to make that value 2. Sweet.

All the admin panel will do is let you edit users data (not password, you sneaky little. . .) and gives a simple splash page with some basic stats.

File: admin.php

 

<?php
session_start();
//Only administrators can get in here
define(‘MIN_AUTH_LEVEL’, ‘2′);
include(‘./config.php’);
//Only one option, eh.
$menubar = ‘<table><tr><td><a href=”?do=users”>Manage Users</a></td></tr></table>’;
$footer = “<p><a href=’”. SITE_URL .“‘>Home</a> - <a href=’”. SITE_URL .“login.php?do=logout’>Logout</a></p>”;
if($_GET[‘do’] == ”)
{
//Basic information, pretty much useless in our case, but may not be for others
$title = ‘Admin Home’;
$con = “<h2>Admin Home</h2>
Quick Stats:
<ul>
<li>Members: “. count_tbl(‘users’) .“</li>
<li>PM’s: “. count_tbl(‘messages’) .“</li>
</ul>”;
}

The above is just setting the auth level, than doing our simple, and rather pointless, splash page. Next up is the cool part, the user editing. No, there’s no reloading the page, you just click save or delete and it’s done, all with some pretty effects. We’re going to use our get_all_users() function to return a neat array of every user, then all we do is foreach() through each one.

File: admin.php (continued)

 

else if($_GET[‘do’] == ‘users’)
{
//Get an array of every user we have
$users = list_all_users();
$title = “Manage Users”;
$con = “<h2>Manage Users</h2>
<p>Click the save icon to update the user’s details, and the x to delete the user (not undoable!)</p>
<form>
<table border=’1′>
<tr><th>Username</th><th>Name</th><th>E-Mail</th><th>Auth Level</th><th>Options</th></tr>”;
//A mess of code, I know. It lists the details for every user, except password, and assigns each TD a unique ID so that the JS can get the value when saving. The icons let you save your work or delete the user.
foreach($users as $v)
{
$con .= “<tr id=’user_{$v[’id’]}’><td><input type=’text’ id=’username_{$v[’id’]}’ value=’{$v[’username’]}’ /></td><td><input type=’text’ id=’name_{$v[’id’]}’ value=’{$v[’name’]}’ /></td><td><input type=’text’ id=’email_{$v[’id’]}’ value=’{$v[’email’]}’ /></td><td><input type=’text’ id=’auth_{$v[’id’]}’ value=’{$v[’admin’]}’ /></td><td align=’center’><a href=’#’ onclick=\”edit_user(’{$v[’id’]}’);\”><img src=’./images/save.png’ alt=’save’ style=’border:none;’ /></a> - <a href=’#’ onclick=\”delete_user(’{$v[’id’]}’, ‘{$v[’username’]}’);\”><img src=’./images/delete.png’ style=’border:none;’ alt=’delete’ /></a></td></tr>”;
}
$con .= “</table></form>”;
}
?>

There’s not much going on there other than the mass of ugly looking code. The $v variable is the array of the current user’s details, which is assigned by the foreach loop. Now comes the hard part, well kind of, the JavaScript. After this we’ll be done! :)

File: admin.php (continued)

 

<html>
<head>
<title><?php echo $title; ?></title>
<script src=‘../../scriptaculous/prototype.js’></script>
<script src=‘../../scriptaculous/scriptaculous.js’></script>
<script type=‘text/javascript’>
//Get every new value, taken from our unique IDs assigned earlier.
function edit_user(uid)
{
var opt = {
method:‘post’,
postBody:‘m=edituser&id=’ + uid + ‘&username=’ + $F(‘username_’ + uid) + ‘&email=’ + $F(‘email_’ + uid) + ‘&name=’ + $F(‘name_’ + uid) + ‘&auth=’ + $F(‘auth_’ + uid) +‘&password=<?php echo $user[’password‘]; ?>’,
onSuccess: function(t) { handle_edit(t, uid); }
}
new Ajax.Request(‘./ajax.php’, opt);
}

function handle_edit(t, uid)
{
if(t.responseText == “1″)
{
//Give a pretty notice to say that it was saved
new Effect.Highlight(‘user_’ + uid);
}
else
{
alert(“The user’s data was not updated, please try again.”);
}
}

function delete_user(uid, username)
{
//Confirm the delete
if(confirm(“Are you sure you want to delete “ + username + “?”))
{
var opt = {
method:‘post’,
postBody:‘m=deluser&id=’ + uid + ‘&password=<?php echo $user[’password‘]; ?>’,
onSuccess: function(t) { handle_delete(t, uid); }
}
new Ajax.Request(‘./ajax.php’, opt);
}
}

function handle_delete(t, uid)
{
if(t.responseText == “1″)
{
//Remove the user from the table very nicely :)
new Effect.Fade(‘user_’ + uid);
}
else
{
//Agh!
alert(“The user was not deleted, please try again.”);
}
}
</script>
</head>
<body>
<?php echo $menubar, $con, $footer; ?>
</body>
</html>

You should be familar with making AJAX requests now, you may notice our use of Effect.FadeOut and Effect.Highlight, these are just built in script.aculo.us effects that make UI very pretty. This is it for the tutorial, it’s definitly been a long one. I’ll try to get a working version up soon with public admin access, but I’ll have to modify some code so you guys don’t go to overboard.

A full set of files used in this tutorial can be downloaded here

Filed Under: AJAX, Javascript, Javascript Tutorials, MySQL, PHP, PHP Tutorials, Quick Tips, Tutorials, Web Design, Web Resources 
Tags: