Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. PHP

Twitter Emulation Using MooTools 1.2 and PHP

Read Time:9 minsLanguages:

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.


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

  1. We assume that the only user we're keep track of is the person logged in and that the user's ID is 1.
  2. We also assume that user has javascript enabled. The great thing about this solution is that it works with javascript turned on or off.
  3. We assume that the user's image is stored in the following directory structure: /graphics/users/{user_id}.png
  4. 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.

We're not done with the XHTML part yet. The next step is to add the
"wrapper" DIV for all of the previous statuses.

Lastly, we include the MooTools library in the header of the page.

Step 3: The PHP/MySQL - Part 1

This first snippet of PHP will be placed inside our "statuses" DIV. We've chosen
to display the most recent 20 statuses.

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...

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

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.

When form submission is triggered...

Prevent the page from refreshing due to the form submission.

If the "status" textarea has a value...

We execute the request, passing along the new status.

Here's the complete MooTools script:

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!

That's It?

Yes! Here's the entire PHP / MooTools / XHTML / CSS file:

Updates & Enhancements

While the above code provides a slick, functional interface, by no means
would you consider this a completed system. Here are a few ideas for enhancements
you can implement:

  • Updated time displays upon new status submission
  • Friend status integration
  • Javascript-based status length limiter
  • Anything else you can think of!

What are you thoughts? Have any suggestions? Please share them below!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.