Twitter Emulation Using MooTools 1.2 and PHP

People all over the world love Twitter because of how easy it is to use. All you need to do is type in your current status, click "Update", and you're done. What most people probably don't know is how simple it is to emulate Twitter's functionality. Using PHP, MySQL, and MooTools javascript, you can implement a Twitter-like status system in no time.

Assumptions

Before we create this system, lets keep in mind a few assumptions we're making:

We assume that the only user we're keep track of is the person logged in and that the user's ID is 1.

We also assume that user has javascript enabled. The great thing about this solution is that it works with javascript turned on or off.

We assume that the user's image is stored in the following directory structure: /graphics/users/{user_id}.png

We assume that we're using the full MooTools 1.2 core with the Fx.Slide plugin.

The Show

Here's the sequence of events that will take place in our concoction:

The page loads and shows previous statuses (or "tweets").

The user types in their new status and clicks submit.

A message slides in from behind the submit button saying "Status Updated!"

The new status and user photo slides in right after the "Recent Updates" heading.

As you can see, it's very simple functionality that will be presented in an elegant manner.

Step One: The MySQL

We need a place to store these updates, right? Here's what our "statuses"
table will look like:

It's important that status ID is the primary key and that the field auto-increments.

Step Two: The XHTML

Before any of our MooTools magic can be used, we need to create the "update" form
and place our message DIV next to the submit button so that MooTools can effectively
slide in the message from behind the button. Note that we set the form's action to
this same page. Also note that we place an initial $message variable inside the
message DIV for users who do not have javascript enabled.

Step 4: The CSS

As you know, CSS is our presentation layer so style up your page however you'd
like. We create the "failure" and "success" classes for the result message
-- note that the success message uses green and failure message is colored red.
Also note that the status-box class contains the user's avatar, set by PHP.

Step 5: The MooTools Javascript

Now for the fun part -- using MooTools 1.2 goodness to create our subtle
animations and Ajax request.

Once the DOM is ready...

window.addEvent('domready', function() {

We create a horizontal slider for the success/failure message. We hide it for now...

var fx = new Fx.Slide('message', { mode: 'horizontal' }).hide();

We now create our (Ajax) Request. We do this outside of the click event
(which will follow in a moment) so that we don't waste memory.

When the user clicks the submit button, we want to disabled
it to prevent double-submission. Upon completion, we enable
the submit button and direct the status message notifier message to hide
in 2 seconds.

If the request fails, the message reflects that by sliding in the
"Status could not be updated. Try again." message. If the request is
successful, quite a bit more happens.

We start by sliding in a "Status Updated" message. Next we clear the
status textarea. Then we inject the new element box into the statuses
container and slide it in. Here is the MooTools code in its entirety.

Step 5: The PHP/MySQL - Part 2

This "header" portion of PHP code goes at the top of the same PHP file the rest of our
code is in. This code will also be run by both Ajax requests and users who have javascript
disabled. Upon form submission (and assuming the user is logged in), we insert the new
status into the database. If the Ajax flag is set (by the MooTools code above), we know that
the user does have javascript enabled and we kill the script. If the user did not
use javascript, we simply set the $message variable's initial value to "Status Updated!"
and display the page. Simple!

David Walsh is an eccentric programmer that finds a way to make things work. His expertise is in CSS, PHP, and MooTools javascript. You can read his ramblings at the David Walsh Blog (http://davidwalsh.name)