Vlad Mazek – Vladville Blog

So a little while back I wrote a thanksgiving post explaining how I would never have made it to where I am at today if there weren’t some incredible people along the way kicking my ass to do bigger and better things.

Around that same time I had decided that I would use this large vladville.com megaphone I have to give back and help better someone else… though there is a secret here, that other person has to be hungry, looking to better themselves too. So I figured if there was just one thing, one thing I could offer once a week, to pass some of my skills.. vladville would be a success.

So this first step, related to the AJAX post made the other day, gives you a 10,000 ft view of HTML, Javascript, SQL, WordPress templates and internals as well as some very basic PHP. It is a simple article, one that you can easilly cut and paste and achieve identical results. That is by all means a huge lie, because learning comes with experimentation and trying new things, coming up with new problems and solutions. But at the very least this will give you a starting point and it is step #1 in a five step program to AJAXify your WordPress installation and provide Facebook-style status updates.

I hope you enjoy it, click here to read article. 

When you do professional development for living the complexity of what you have created can get to you. On such days its best to get outside, away from computers.. but if you live in Florida and outside looks like a scene from Coming Global Superstorm: The Day After Tomorrow you look for the stupidest project you can possibly work on, that nobody can hold you accountable for.

For me, that project is Vladville. Lately I’ve been spending a lot of time on Facebook playing the game “Which of my high school friends aren’t dead”  and I’ve sort of fallen in love with the AJAX implementation of Facebook status update. It’s just very slick, very easy to use and effortless. So, in yet another effort involving sinking an enormous amount of talent and time into the toilet of productivity, I’ve implemented the same process for Vladville. And I’ve done one better, I’ve tracked the changes and I will be writing a post on how to do this yourself, in an effort to familiarize you with some WordPress internals.

Hey, if you’re going to lose, lose big. Right?

Step 1: Include jQuery

If you look at my blog, on the upper right hand side there is a box that says “Whats on Vlad’s Mind” and until today that was a hardcoded block of HTML in my Wordpress theme. There are a few steps here.

First step is to actually download, include and enable jQuery and jQuery inline edit plugins. These are simple Javascript libraries that enable pretty AJAX client side effects to work.

Second step is to actually alter the wp_users table that WordPress uses to store user data and add an extra database field for status. This will hold our current status. I’ve gone an extra step to create another database table to hold the archive of status changes so they can be syndicated through other services. Lose really big. If you’ve done this properly the little tooltip will show up over the container that contains your current status text.

Step 2: Enable Inline Edit

In order to make updates effortless, I’m relying on jQuery Inline Edit plugin as well as WordPress authentication. It checks if I am logged into this session, if I am, double clicking on the container described above will update the container with the div contents in an editable textarea that I can change on the fly.

Step 3: Change text, Update

More than meets the eye here, thats for sure, but simple enough – type in new text and hit update.

Step 4: AJAX Update

After clicking Update Status button the browser uses AJAX (well, AJAH) to make the call to the backend and update my status. This takes and validates the input, sanitizes it and updates my account in the wp_users table with the new status. It sends that sanitized text back and…  

Step 5: New Content Inline

The new content is passed back to the browser that updates the original container with the new update. Each further load of the page includes the status field from my account.

Additional Steps: No stop loss..

I’ve taken a few more extra steps that I intend to expand upon in the detailed writeup, one of the major ones being an explanation of why I’m tying in my status via users table and why I’ve made a separate tracking table.

In a nutshell, the status tracking table is used as a logging table that I can also use to syndicate my status. You can take a look at an XML feed here that shows you last five status updates. This is cool because you can export that data and reuse it elsewhere, such as Facebook. Instead of logging in and updating my status there I can just use the RSS syndication  to send my content from Vladville up the stream to Facebook. Or more importantly, SharePoint.

The wp_users part is pretty interesting. Right now I am only checking if $user_id == 1, meaning I just want to enable inline edits if I am the one logged in. Everyone else gets a plain text looking thing. However, lets say I wanted to create a little shoutboard. What if instead of comments I also gave my visitors the ability to update their own status or write something on my board? Same principle, tie the update to the user_id of the currently authenticated user and then update the status field on the backend in the database for everyone else to see, logged in or not.

That, in a nutshell, is the power of Web 2.0, syndicated content and AJAX. It’s also a heck of a way to learn how others write code (WordPress internals) and at the same time experiment a little for a fun Saturday evening.

And hey, chicks dig it.