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 part 1 of this tutorial, we laid the ground work for the entire system. That included the core functions, and the AJAX handler, which receives + handles the AJAX requests (deja vu?). We also made the login page, which also handles registration and logging out.

In part 2, we’re going to create the user’s main page, the private messaging system, and the settings manager, where uses can change there name, E-mail, and password.

When a user sucessfully logs in, they are redirected to index.php, which will simply greet them and give them a few links. If a guest vists that page, a message telling them to register or login will appear. The index page also manages your settings.

File: index.php

 

<?php
session_start();
//Load up userdata, database connection, functions
include(‘./config.php’);
//Display a guest message
if(!check_login($username, $password))
{
$title = “Guest Page”;
$con = “<h2>Welcome Guest</h2>
<p>Hi there. I see that you’re a guest to this site, in order to get the best experience out of “. SITE_NAME .“, you must be registered. Registering is totally free and requires only a few minutes of your time, we promise! If you’re interested, you can register <a href=’login.php?do=reg’>here</a>.</p><p>If you’re not a guest, and simply haven’t logged in, you may log in <a href=’login.php’>here</a>.”;
}
else
{
//Footer links
$footer = “<p><a href=’index.php’>Home</a> - <a href=’login.php?do=logout’>Logout</a></p>”;
//Welcome message with options
if($_GET[‘do’] == ” || !$_GET[‘do’])
{
$title = $user[‘name’] .“’s Control Panel”;
$con = “Welcome {$user[’name’]} to your very own control panel. Here you can <a href=’pm.php’>view</a> and <a href=’pm.php?do=send’>send</a> messages to other members, and control your <a href=’?do=settings’>settings</a>.<br /><br />”;
//This counts the number of unread PM’s the user has
$unread = count_unread($user[‘username’]);
//Give a message if it’s greater than 0
if($unread > 0)
{
$con .= “<span style=’color:red; font-weight:bold;’>You have $unread unread private message(s)</span>”;
}
}

Don’t save that file yet, we’re not done! Our last part will display the settings page. script.aculo.us makes in place editing easy, but it still could be improved. However, it’s definitly functional, and is very easy to implement. In order to make a field editable, we just put this JavaScript snippet in:

 

new Ajax.InPlaceEditor(element_id, url);

That snippet must be after the element is declared, but that’s no trouble. The password changer also uses AJAX, but no in place editing.

File: index.php

 

else if($_GET[‘do’] == ’settings’)
{
$title = ‘Manage Your Settings’;
$con = “<h2>Personal Settings</h2>
Name: <span id=’name’>{$user[’name’]}</span><br />
E-Mail: <span id=’email’>{$user[’email’]}</span>
<script type=’text/javascript’>
new Ajax.InPlaceEditor(’name’, ‘ajax.php?m=optsave&type=name&id={$user[’id’]}’);
new Ajax.InPlaceEditor(’email’, ‘ajax.php?m=optsave&type=email&id={$user[’id’]}’);
</script>
<h2>Password Control</h2>
<p>In order to edit your password, you must first verify your current one, then enter your new one:</p>
<form name=’password_reset’>
Current Password: <input type=’password’ id=’current_password’ /><br />
New Password: <input type=’password’ id=’new_password’ /><br />
Confirm New Password: <input type=’password’ id=’new_password_confirm’ /><br />
<input type=’button’ value=’change password’ onclick=’password()’ id=’change_password’ /></form>
<div id=’password_status’></div>”;
}
}
?>

You should be able to understand all of this, we’re just sticking a few variables here and there, nothing major. Next we’re going to make our JavaScript and HTML.

File: index.php

 

<html>
<head>
<title><?php echo $title; ?></title>
<!– Include the scriptaculous library –>
<script src=‘../scriptaculous/prototype.js’></script>
<script src=‘../scriptaculous/scriptaculous.js’></script>
<script type=‘text/javascript’>
function password()
{
//Typing skils. . .
if($F(‘new_password_confirm’) !== $F(‘new_password’))
{
alert(“Please make sure both your new passwords match!”);
$(‘new_password’).focus();
return;
}
else if($F(‘new_password_confirm’) == ” || $F(‘new_password’) == ” || $F(‘current_password’) == ”)
{
alert(“Please fill in all fields.”);
$(‘current_password’).focus();
}
else
{
//construct the ajax request
//$F() gets the field with the given id’s value
var opt = {
method:‘post’,
postBody:‘m=pwd&current=’ + $F(‘current_password’) + ‘&new=’ + $F(‘new_password’) + ‘&id=<?php echo $user[’username‘]; ?>’,
onSuccess: function(t) { $(‘password_status’).innerHTML = t.responseText; $(‘change_password’).disabled = false; },
onLoading: function() { $(‘login_button’).value = ‘Working’; $(‘change_password’).disabled = true; }
}
//send request to the ajax.php
new Ajax.Request(‘ajax.php’, opt);
}
}
</script>
</head>
<body>
<?php echo $con, $footer; ?>
</body>
</html>

Hoorah, the settings manager is totally complete. Now we just need to do the private messaging system. Our only use of AJAX there will be to delete messages, becuase it’s totally worthless to have to reload your inbox to delete one lousy message. The top of the script will use the MIN_AUTH_LEVEL constant, becuase we don’t want guests trying to access inboxes! We set the auth level to 1, meaning only users + admins.

File: pm.php

 

<?php
session_start();
define(‘MIN_AUTH_LEVEL’, ‘1′);
include(‘./config.php’);
$footer = “<a href=’index.php’>Home</a> - <a href=’?do=’>Inbox</a> - <a href=’?do=send’>Send New PM</a> - <a href=’login.php?do=logout’>Logout</a>”;

Note how the min auth level is declared before we include the config file, if it’s not, it won’t work. Let’s work on the inbox.

File: pm.php

 

if($_GET[‘do’] == ”)
{
$title = “PM Inbox”;
//Fetch an associative array of the user’s PMs
$pms = listpms($user[‘username’]);
//Notice from send new PM page
if($notice)
{
$con .= “<strong>$notice</strong>”;
}
//Begin the PM inbox
$con .= “<h2>PM Inbox</h2>
<p>Clicking the delete icon permanetly deletes the message! Click on the title to view the full message.</p>
<table border=’1′>
<tr><th>Title</th><th>From</th><th>Delete</th></tr>”;
//For the unpopular, a no PM message so the table looks decent
if(count($pms) == 0)
{
$con .= “<tr><td colspan=\”3\”><strong>Sorry, you have no PM’s.</strong></td></tr>”;
}
else
{
//Cycle through every PM, $v will store an associative array of every PM’s details
foreach($pms as $v)
{
//Delete_pm starts an AJAX request to delete the PM
$con .= “<tr id=\”pm_{$v[’id’]}\”><td><a href=’?do=view&id={$v[’id’]}’>{$v[’title’]}</a></td><td>{$v[’from’]}</td><td align=’center’><a href=’#’ onclick=\”delete_pm(’{$v[’id’]}’, ‘{$v[’title’]}’, false);\”><img src=\”./images/delete.png\” style=\”border:none;\” /></a></tr>”;
}
}
$con .= “</table>”;
}

Nothing earth shattering there either, our handy function gets every PM for us in a nice array that we can easily cycle through. Next we have to handle viewing PM’s. . . oh no!

File: pm.php

 

else if($_GET[‘do’] == ‘view’)
{
$footer = “<a href=’index.php’>Home</a> - <a href=’pm.php’>Inbox</a>”;
//Single array of a PM
$pm = get_pm($_GET[‘id’]);
//get_pm checked ownership of the PM, it’s not the current users
if(!$pm)
{
$con = “You are not authorized to view this PM!”;
}
else
{
//Mark this PM as read
mark_read($pm[‘id’]);
//Display the message from the pm array
//The reply form will toggle up and down using a scriptaculous effect (a pretty one!)
$con = “<h2>{$pm[’title’]}</h2>
<p>From: {$pm[’from’]}<br />
{$pm[’message’]}<br /><a href=’#’ onclick=’reply();’>Reply</a> - <a href=’#’ onclick=\”delete_pm(’{$pm[’id’]}’, ‘{$pm[’title’]}’, true);\”>Delete</a></p>
<div id=’reply’ style=’display:none;’>
<h3>Reply:</h3>
<form method=’post’ action=’?do=send’>
To: <input type=’text’ name=’to’ value=’{$pm[’from’]}’ /><br /><br />
Title: <input type=’text’ name=’title’ value=’Re: {$pm[’title’]}’ /><br /><br />
Message: <br />
<textarea rows=’10′ cols=’50′ name=’message’></textarea><br /><br />
<input type=’submit’ value=’Send!’ name=’send’ /></form>
</div>”;
}
$title = “View PM”;
}

Lastly, we’ve got to be able to send messages, otherwise it’s useless! In this section, we make use of our notice variable.

File: pm.php

 

else if($_GET[‘do’] == ’send’)
{
//We’re sending
if($_POST[’send’])
{
//attempt to send the PM
if(sendpm($user[‘username’], $_POST[‘to’], $_POST[‘title’], $_POST[‘message’]))
{
//Display notice at inbox
$notice = “PM Sent”;
}
else
{
//same as above
$notice = “PM Couldn’t Be Sent!”;
}
//Back to the inbox to see the notice
header(“Location: pm.php”);
}
//Display the form
else
{
$title = “Send PM”;
$con = “<h2>Send New PM</h2>
<form method=’post’ action=’?do=send’>
To: <input type=’text’ name=’to’ /><br /><br />
Title: <input type=’text’ name=’title’ /><br /><br />
Message: <br />
<textarea rows=’10′ cols=’50′ name=’message’></textarea><br /><br />
<input type=’submit’ value=’Send!’ name=’send’ /></form>”;
}
}
?>

Let’s get our last HTML + JavaScript for this part out of the way.

File: pm.php

 

<html>
<head>
<title><?php echo $title; ?></title>
<script src=‘../scriptaculous/prototype.js’></script>
<script src=‘../scriptaculous/scriptaculous.js’></script>
<script type=‘text/javascript’>
//Delete via AJAX
function delete_pm(pmid, pmtitle, redir)
{
if(confirm(“Are you sure you want to delete the message titled “ + pmtitle))
{
var opt = {
method:‘post’,
postBody:‘m=delpm&password=<?php echo $user[’password‘]; ?>&id=’ + pmid + ‘&uid=<?php echo $user[’username‘]; ?>’,
onSuccess: function(t) { handle_delete(t, pmid, redir); }
}
new Ajax.Request(‘ajax.php’, opt);
}
}

//Toggle reply form with a fancy effect
function reply()
{
if(!Element.visible(‘reply’))
{
Effect.SlideDown(‘reply’);
}
else
{
Effect.SlideUp(‘reply’);
}
}

//Either redirect to the inbox, or remove the table row of that PM
function handle_delete(t, pmid, redir)
{
if(t.responseText == “0″)
{
alert(“The PM could not be deleted! This may be a systems error, so please try again.”);
}
else
{
if(redir)
{
window.location = ‘pm.php’;
}
else
{
new Effect.Fade(‘pm_’ + pmid);
}
}
}
</script>
</head>
<body>
<?php echo $con, $footer; ?>
</body>
</html>

That’s the end of part 2. As you can see, most of the code was just determining what needed to be done and sending messages to the user. Becuase of our backend, we really only have to call one or two functions to get what we need, or to protect a page from guests. There’s no more stuff user-end in this tutorial, part 3 will cover only one thing, a simply admin panel to modify user’s data. At the end of part 3, an example will be put up.

Download all the script files in an unique .zip archive here

Filed Under: AJAX, Javascript, Javascript Tutorials, PHP, PHP Tutorials 
Tags: