Anant Garg | on web development

Amazon Beanstalk PHP hosting & database versioning for SaaS

Anant Garg — Mon, 17 Jun 2013 08:30:34 +0000

This is part two of 3 posts that I intend to write about getting a SaaS app + site built from scratch. If you haven’t already, then you should read part 1 about creating a PHP SaaS app. In this part we will talk about 2 things:

1. Database versioning
2. Hosting, Database & DNS

Part 1: Database versioning

In the first part, we discuss about creating separate databases for every client. Now the problem is that these databases are empty and we need to fill them with some basic data + schema. The problem of creating this in the site code, is when you update your schema, you will have to manually update all the databases. This can be extremely tedious and difficult to achieve.

Thus to solve this problem, we assume our DB is empty. Then we create our version 1 of the schema and save it as db/1.sql. This will be our base i.e. when the user first visits the client’s site, it will run this SQL to create the require schema. Next version will be 2.sql (which may add/drop tables etc.) and so on.

In our app configuration file, we will add a variable (somewhere at the top) and set it to the latest schema version.

$currentdbversion = 5;

Then after the DB connection, we will add the following code:

...

mysql_selectdb(DB_NAME,$dbh);

// Success! Now we can continue to use the app as-is!

$sql = ("select * from cometchat_settings where name = 'dbversion'");
$appsettings = mysql_fetch_row($sql);

$dbversion = 0;

if (!empty($appsettings['value'])) {
   $dbversion = $appsettings['value'];
}

while ($dbversion < $currentdbversion) {
    $dbversion++;
    if (file_exists(dirname(__FILE__).'/db/'.($dbversion).'.php')) {
        include_once(dirname(__FILE__).'/db/'.($dbversion).'.php');
    }
}

In 1.sql, you can add your SQL queries, and add the bottom you will add:

In 2.sql and all other SQL files, it will be:

So the workflow is as follows:

1. The site code only creates the DB. It does not populate the DB with any data/schema.
2. When the client visits the app for the first time, $dbversion is 0, so 1.sql is executed.
3. When you make changes to your SQL DB, you simply update $currentdbversion & add the $currentdbversion.sql file to the db folder
4. When the app is run the next time, it will check if the SQL dbversion is lower than $currentdbversion; if yes, it will run all the SQL files till it reaches the latest version.

Part 2: Hosting on Elastic Beanstalk

Hosting on Amazon’s Elastic Beanstalk is fairly simple.

Step 1

Signup for Amazon AWS and then go to “Elastic Beanstalk” and create a new application. Zip all your PHP code (for your app) and then attach it while creating:

Step 2

Enter a URL for your app; I have used “mydummyapp”.

Step 3

t1.micro is sufficient to begin with and will keep your costs low. Select it and then proceed with creation.

Step 4

Go to “RDS”, “Launch new DB instance” and then create a new instance.

Step 5

Create a DB for your site (which will be used to store all clients info). The client specific DBs will be created on the fly (in the same instance).

Once completed, add the connection details to your app and test if the connection is working fine. If you are unable to connect, then edit the “default” Security Group and add “CIDR/IP: 0.0.0.0/0″. This will allow you to connect to the instance from any IP. Later, you can modify this to only certain IPs.

Step 6

Go to “Route 53″ and “Create Hosted Zone” and enter your domain URL. Then double click on the listing and then “Create Record Set”.

Once done, get the server IP for your site hosting (from Asmallorange/Rackspace/site-host) and two A records:

Finally, update your nameservers to point to those mentioned by Amazon.

Once this is done, you can visit http://mydummyapp.elasticbeanstalk.com and check your app. You can use any third-party host like Asmallorange or RackSpace to host your SaaS site. You do not need to use Amazon Beanstalk to host your SaaS site.

That’s all folks! Now you have successfully setup your server (Beanstalk), your DBs (RDS) and your DNS (Route 53). You should be now ready to start testing your app along with your site.

Where do we go from here?

We have achieved a lot using this tutorial (and part 1). We have setup our app, site and have configured Amazon’s services to host our app. In the next part, we will talk about scaling and other tips & tricks.

Discuss, Share & Subscribe

Do let me know your suggestions on how I can improve this tutorial. If you like what you are reading, then please help spread the word by re-tweeting, blogging and sharing this tutorial. Thank you.

To get a notification when the next part is ready, please subscribe using the form at the bottom of this page.

Build a PHP SaaS app from scratch

Anant Garg — Mon, 10 Jun 2013 14:47:31 +0000

This is the first of 3 posts which will talk about launching your own SaaS product (or converting your existing single tenant app to a SaaS app). We will cover various aspects from developing the app to building a SaaS site (to enable your clients to signup for it)

We will be looking at…
1. Creating your app
The app is the product that you are going to sell. If you already have this app ready, you will only have to modify it so that it is compatible for multiple clients. The app is the front-end for your client’s end-users.
2. Creating your SaaS site
The site is the front-end for your clients. They will be using your site to signup for the app.
3. Hosting et al.
We will talk about how to host your app + site, how to ensure scaling, setting up DNS & SSL, database versioning etc.
Part 1: Create your app
Before you begin with selling your product, you need to have a product. Let us first try and understand the SaaS architecture. Every app consists of two parts: code & data. Now, every client has end-users; the data is shared between these end-users and (mostly) not with other clients’ end-users. So every set of end-users (of each client) should access a different set of data. In most cases, the code used by all the clients can be the same.
Now there are various ways in which a SaaS app can be designed:
Option 1 – Single database, single code-base
Use a single database and store all client data in a single database. You will have to add a field like “clientid” in all your tables and modify all your SQL queries to select the correct “clientid”. If you already have a single tenant app, then heavy modification is required in the code.
Advantages: Easy to manage database & updates; no duplication.
Disadvantages: If you miss out a “clientid” in the SQL query, it may result in issues with another client.
Option 2 – Multiple database, single code-base
Create a separate database for every client. No modification is required to your existing single-tenant codebase. You will only have to modify the configuration file to select a database depending on the client.
Advantages: Very little codebase modification, easy to ensure client data does not get mixed.
Disadvantages: Multiple databases to manage so in the event of DB schema updates, you will have to update each and every database.
Option 3 – Multiple database, multiple code-base
Create a separate database & duplicate the complete code for every client. No modification required at all.
Advantages: No codebase modification, easy to ensure client data does not get mixed, easy to perform client specific modifications.
Disadvantages: Multiple databases/code to manage so in the event of DB schema/code updates, you will have to manually update for each client.
There are a number of articles discussing which approach is the best but option 2 helps us develop a scalable SaaS solution in the quickest possible way. So we will stick to option 2 for this tutorial.
If you already have an app then you will only have to modify the configuration file as below. If you do not, then make sure your configuration file looks something like below and the rest of the app can be however you like it.
Let us begin with the PHP part. You should be ideally using a framework like Symfony or Zend to create your app. To simplify, I am only going to be talking about config.php:
This is how a simple standard config.php file looks: (usually DB connection is not part of this, but for a clearer explanation, I have added it)
In the above code, when the user visits a PHP page, it calls config.php, which stores the database configuration & connects the database. Then the remaining PHP files, calling this configuration file, can connect to the DB.
The problem in the above code is that it is built for a single client (with a single set of end-users). We need to modify this code so that for each client, a different database is used. So depending on how the app is called (i.e. depending on the URL), we will connect to a different database. If you look at SaaS apps online, you will find that they assign a unique sub-domain to every client. This technique will come in handy.
So if your site is mydummyapp.com, then when a client registers, he will be assigned a URL like anantgarg.mydummyapp.com, yourname.mydummyapp.com etc. Now, all end-users of the client will connect to the same sub-domain.
To make our app SaaS friendly we need to check the sub-domain and then accordingly connect to a database. We will perform the following checks:

1. Let the end-user visit the app using *.mydummyapp.com (DNS configuration in next post)
2. Check a central table if the sub-domain is registered; if yes, to whom? Then fetch the DB details
3. Connect the end-user to the client’s DB

Here is how a modified config.php will look:
If you are modifying your existing app, then you only need to modify your configuration file and make it similar to the above. The rest of the app should not need any modification (as long as you are not saving any files). If you have files, then you will have to modify the file upload code and add a folder e.g. /uploads/$subdomain/$filename.
If you are testing on localhost, you can simply add something like the following to your hosts file:
127.0.0.1 test.mydummyapp.com 127.0.0.1 test2.mydummyapp.com
Part 2: Create your SaaS site
I assume you can create a simple SaaS site with user registration. On your registration page, you will need to have something like:
Username: _ _ _ _ _ _ _ _ Password: _ _ _ _ _ _ _ _ Subdomain: _ _ _ _ _ _ _ _ (.mydummyapp.com):
You will need to create a common DB (e.g. dummysite) with a table called “clients”. In your real site, you will also need other tables like “subscriptions” which will hold payment information.
create table clients ( id int default 0 auto_increment, username varchar(50), password varchar(255), subdomain varchar(50), dbusername varchar(50), dbpassword varchar(50) )
Now for every client who signs up on your site, you will have to add an entry into the above table. You will also have to create random dbusername & dbpassword. And finally, you need to create a new DB for this client.
The PHP code for that will be:
// Connect to database instance (which stores all app DBs) $dbh = mysql_connect(DB_SERVER.':'.DB_PORT,DB_MASTERUSERNAME,DB_MASTERPASSWORD); // Create DB ($id will have value of client's inserted ID) mysql_query("CREATE DATABASE mydummyapp_".$id."",$dbh) or die(mysql_error()); // Create user and grant all privileges for the above DB mysql_query("GRANT ALL ON mydummyapp_".$id.".* to ".$dbusername." identified by '".$dbpassword."'",$dbh) or die(mysql_error());
Once this is done, you should be able to put all the pieces together and get your first SaaS app up and running.
Part 3: Putting it all together
The site structure will be as follows-
www.mydummyapp.com: SaaS site (where the client registers)
*.mydummyapp.com: SaaS app (catch-all points to the actual app)
The workflow is as follows:
1. The client visits www.mydummyapp.com
2. The client registers on the site
3. The site creates the a DB (and user) for the client (and adds an entry in the site’s DB)
4. The client then uses the new URL (i.e. clientsubdomain.mydummyapp.com) for himself & his end-users
5. The end-users directly visit clientsubdomain.mydummyapp.com which is basically the app using the client’s DB
Where do we go from here?
We have achieved quite a bit using this tutorial. We have setup our app and site and can now allow clients to register and use the app. In the next parts will we discuss about managing the databases, setting up DNS, handling hosting, scaling and other tips & tricks.
Discuss, Share & Subscribe
Do let me know your suggestions on how I can improve this tutorial. If you like what you are reading, then please help spread the word by re-tweeting, blogging and sharing this tutorial. Thank you.
To get a notification when the next part is ready, please subscribe using the form at the bottom of this page.

Busting the cookies and privacy myth

Anant Garg — Sat, 18 Feb 2012 10:10:45 +0000

I am going to try and make today’s post as simple as possible. Note some explanations maybe a little too simple for my technical audience.
I was referenced in the WSJ article- Google’s iPhone tracking regarding my cross-domain cookies post.
For my technical audience, here is a detailed version of how my code was actually used.
So let us begin from scratch… what are cookies?
Cookies (data on your computer used to identify you) are stored whenever you visit a site. Usually, this data is used to keep you logged into a site or to figure out if you are a repeat visitor.
This is fine and in-order for the web to function in it’s current state, in many ways, essential.

In the above diagram, when you visit siteA.com, a cookie is set for siteA.com on your computer.
When you visit siteB.com, a cookie is set for siteB.com on your computer.
But siteB.com, CANNOT read the data from the cookies set in siteA.com and vice-versa. Thus siteB.com does not know if you ever visited siteA.com or what you did there.
Let’s introduce the ad-companies
Ad-companies started displaying ads on sites depending on the content of the page. So, if you are a webmaster, you add a line of JavaScript code and a neat looking advertisement is displayed on your site page.

But the information on the page is not enough to generate targeted ads. So the ad-companies wanted to know where you’ve been before.
Now here is where the privacy issue unfolds.
Tracking your moves
Inorder to track you, as you moved from one site to another (both displaying sites ads from the same ad-company), the companies need to store cookies.

The problem is that cookies set on one site CANNOT be read by another site. In other words, cookies set on siteA.com cannot be read by siteB.com.
So the work-around used is to store a third-party cookie (i.e. a cross-domain cookie). When a user visits siteA.com, a cookie is not only set for siteA.com but also for a common domain which is accessed by all sites that use the ad-company’s code.

Thus, siteA.com, siteB.com and all other sites displaying ads from adsite.com, store and access the same third-party cookie.
So when you visit siteA.com, a third-party cookie is created on adsite.com. When you visit siteB.com, the same cookie is read.

Thus adsite.com now knows that you have been to siteA.com before going to siteB.com. On the basis of this knowledge, a targeted ad can be shown. For an ad-company which provides ads to only two sites, this is not very useful. But imagine if you have 70% of the sites using your code.
Then, nearly most of the times, the same cookie can be read and your movements can be tracked as you browse through the internet. So now, the ad-company knows exact what kind of sites you are visiting and serve ads accordingly.
But why does the WSJ article only talk about Safari?
Safari, by default, does not allow third-party cookies to be created.
However, most major browsers- Firefox, Internet Explorer (using the correct header tags), Chrome etc. do ALLOW setting third-party cookies.
Where does your technique come in?
The technique I posted two years ago, allows setting third-party cookies for Safari as well. This helps in offering a consistent user experience irrespective of the browser used.
Note that other browsers already allow creation of third-party cookies. So Safari is the only exception.
How was this discovered?
A Stanford researcher, Jonathan Mayer found that many large companies like Google, MIG, PointRoll etc. used a variation of my technique to circumvent Safari’s policy.
Infact, Facebook’s official developer best practices article linked to my post (the page has since been removed).
You must remember that this issue affects Safari users ONLY.
Other browsers already allow third-party cookies and thus they CAN track you as they do NOT have any such policy.
How do I protect myself? Should I disable cookies?
NO. Do not disable cookies altogether. This will cause most of your sites (which have a login system) to stop working.
Third-party cookies also have a number of other uses like logging in users to third-party sites and are NOT always used for tracking. They cannot steal your data (a myth noted by some users in comments).
If you want, you can disable third-party cookies in browsers. Dennis O’Reilly has written a guide on how to disable third-party cookies for major browsers.
You may also want to use incognito/private browsing modes when using a public PC.
Questions/Suggestions?
If you have any questions about how this affects you or need further explanation, feel free to post a comment or contact me.

Exploit Scanner

Anant Garg — Wed, 15 Sep 2010 07:26:16 +0000

The Problem
As your site grows, so do your chances of getting hacked. Most of these hacks are due to known exploits in existing open/closed source software. One of the biggest worries is a user getting full access to your site using a simple PHP upload.
So what’s the solution?
This is no silver bullet but if a user uploads any malicious files to your server, you should be able to quickly check what files have been modified/added.
PHP Exploit Scanner
The Exploit Scanner is a single PHP file which generates MD5 hash for all files of a particular software and then allows you to compare that with software you think has been modified.
Sample Usage
Lets say you want to check for any exploits in your WordPress installation
1. Download a fresh copy of WordPress from the official site (make sure you download correct version)
2. Upload WordPress to your server/localhost
3. Run exploitscanner.php?action=generate in the new WordPress folder (you do not need to install WordPress)
4. Check filehashes.php and verify output is correct (i.e. an array of files with their hashes)
5. Now upload exploitscanner.php and filehashes.php to your live WordPress folder
6. Run exploitscanner.php?action=scan to generate a list of modified/added files
7. Check output of scanresults.txt
Generating Hashes
Upload exploitscanner.php to the folder for which you want to generate file hashes and then point your browser to:
http://www.yoursite.com/untouchedsoftware/exploitscanner.php?action=generate
Only output is filehashes.php
Note: Be sure that the software is not already exploited. Ideally use a fresh copy from the software creators (make sure you check the version)
Scanning For Exploits
Upload exploitscanner.php to the folder for which you want to check file hashes and then point your browser to:
http://www.yoursite.com/hackedsoftware/exploitscanner.php?action=scan
Only output is scanresults.txt
Legend- F: New file | M: Modified file
First search for all .php files to see what is changed. If the file is tagged M, you can use a difference tool like WinMerge to find out what has changed.
Download
Download PHP Exploit Scanner free
License
Exploit Scanner is licensed under MIT license. Let me know if you make any interesting use of the script.
Comments/Suggestions?
If you would like to assist in creating a community where users can quickly download filehashes.php for their software then feel free to contact me using the form below.
Do let me know your suggestions on how we can improve this code or any other features you would like to add.
Future Updates
1. Improve recursive function to avoid time out on shared servers
2. Create a community where users can upload hashes for known software like phpBB, vBulletin etc.
3. Add GUI
4. Database integrity
5. Malicious code insertion in template files
Spread The Word
If you like what you are reading, then please help spread the word by re-tweeting, blogging or using the ShareThis button below. Thank you.

Cross-domain cookies/sessions in Safari and all other browsers

Anant Garg — Thu, 18 Feb 2010 12:20:49 +0000

Want to read a simplified version of this article? Read my follow-up article regarding Google’s iPhone Tracking
The Problem
Safari does not allow cross-domain cookies. In other words, if on X.com, you load an iFrame with contents of Y.com and set a cookie in the iFrame, Safari will not save the cookie. This problem also occurs in IE6/7 but can be resolved by sending a P3P header.
The Solution
I am not entirely sure why this works, but the cookie gets saved if a post is made to the iFrame. This solution relies of jQuery but can be adapted to any other.
Here is the code that goes on the remote domain:

The contents for startsession.php would be as simple as:
To make sure that your site is compatible with IE6/7, always output the following header:
Unfortunately, there is no way to find out when the browser has completed submitting the form. Thus, I have placed a delay of 2 seconds. This form needs to be submitted only once per user session. Then you can set your session data in PHP and it will be picked up by your remote domain. You can adapt the same example if you want to set cookies instead of starting a PHP session.
Comments/Suggestions?
Do let me know your suggestions on how we can improve this code.
Spread The Word
If you like what you are reading, then please help spread the word by re-tweeting, blogging or using the ShareThis button below. Thank you.

SQLBuddyLite – phpMyAdmin alternative

Anant Garg — Fri, 11 Dec 2009 09:54:15 +0000

SQLBuddyLite is a lighter version of the excellent SQLBuddy available from http://www.sqlbuddy.com
The lite version is an exact copy of the original version but all the files have been combined into only 4 files.
Acknowledgments
SQLBuddyLite is a lighter version of SQLBuddy by Calvin Lough
Why do you need a lite version?
A typical situation is where you have limited access to the user’s site say only FTP access and you need to verify the database structures. The easiest way to tackle the problem is to upload SQLBuddy and view the data structures.
The lite version makes it quicker to upload files. The lite version does not compromise on the functions; it only reduces the files drastically to only 4 files, thus speeding up remote site management.
Only English language is supported in the latest release.
Demonstration
For security reasons, there is no demonstration version available.
Screenshot

Requirements
1. PHP
2. mySQL
3. Apache mod-rewrite
Getting Started
Download and upload all the sqlbuddylite folder to your server
Download
SQLBuddyLite is hosted on Google Code
Direct download link for SQLBuddyLite
License
MIT-style license
Comments/Suggestions?
Do let me know your suggestions on how we can improve this code or any other features you would like to add.
Spread The Word
If you like what you are reading, then please help spread the word by re-tweeting, blogging or using the ShareThis button below. Thank you.

PHP StackOverflow Clone

Anant Garg — Wed, 09 Dec 2009 09:37:01 +0000

Qwench is a PHP/mySQL based StackOverflow clone.
Features
1. Allow users to post questions and answers
2. Points system similar to StackOverflow
3. Ability to post an article as a knowledge-base (for corporates)
4. Ability to lock site to registered users only
5. Clean CSS layout
6. Works in all major browsers
Demonstration
Launch Qwench – StackOverflow Clone Demo
Screenshot

Requirements
1. PHP 4+
2. mySQL
Getting Started
Download and follow the instructions in README.txt file
Download
Qwench is hosted at GitHub
License
Qwench licence can be found in the LICENSE.txt file.
Comments/Suggestions?
Do let me know your suggestions on how we can improve this code or any other features you would like to add.
Spread The Word
If you like what you are reading, then please help spread the word by re-tweeting, blogging or using the ShareThis button below. Thank you.

jQuery Fancy Gestures

Anant Garg — Thu, 21 May 2009 16:26:31 +0000

Enable complex mouse gestures (letters, alphabets, symbols and your own custom gestures) on your website!
Features
1. Create your own custom gestures
2. Create multiple areas where you can accept gestures
3. Visual feedback
4. Works in all major browsers
Acknowledgment
This script is a port of the mouse gesture recognition action script by Didier Brun.
Demonstration
Launch Fancy Gestures Demo
Screenshot

Requirements
1. jQuery
2. Walter Zorn’s VectorGraphics Library
Getting Started
Create a new html file with the following code. The function will return data i.e. the recognized character/symbol/name:

Customization
Please use the key below to generate a string of numbers for your gesture: e.g. L will be something like 2 then 0. The following letters are already mapped into the script:

Suppose you want to add a “CIRCLE” symbol with the sequence “432107654″, then simply edit jquery.fancygestures.js and add the following after line 7:
gestures["CIRCLE"] = "432107654"
The above code will return “CIRCLE” as data in the function when you make a circle. However, make sure you do not have similar gestures, or you will get unpredictable results e.g. having same gesture for zero and letter O.
Download
Download Fancy Gestures
License
Fancy Gestures is licensed under MIT license. Let me know if you make any interesting use of the script.
Comments/Suggestions?
Do let me know your suggestions on how we can improve this code or any other features you would like to add.
Spread The Word
If you like what you are reading, then please help spread the word by re-tweeting, blogging or using the ShareThis button below. Thank you.

Collabtweet – Multiple Users, Single Twitter Account

Anant Garg — Wed, 20 May 2009 14:18:53 +0000

Enable multiple users to post to a single collaborative twitter account.
Why would you need such a program?
1. You run a small company/group which you would like twitter users to follow
2. You would like twitter users to follow a single brand (twitter account) and not separate multiple users
3. You would like a simple slick interface to enable your users to post to your collaborative twitter account
4. You would like to hide your real twitter account password from your users
5. You would like to automatically add “-username” to all tweets by a user
6. You would like to host this service on your own server
Demonstration
Please login with one of the following username/password combination:
johndoe/johndoe
janedoe/janedoe
babydoe/babydoe
Click here to launch Collabtweet demo
For demonstration purposes, I am using a dummy twitter account- http://www.twitter.com/collabtweet
Screenshots

Download
Collabtweet – Multiple Users, Single Twitter Account
Requirements
Web server capable of running PHP
Configuration
Simple edit config.php and modify the users which can access your account and your twitter username and password.
Password // Username will be used as nickname $users = array( "USER1" => "PASS1", "USER2" => "PASS2", "USER3" => "PASS3" ); $twitterUser = "YOURTWITTERUSERNAME"; $twitterPass = "YOURTWITTERPASSWORD";
Future Updates
1. Ability to manage users using a web interface
Comments/Suggestions?
Do let me know your suggestions on how we can improve this code or any other features you would like to add.
Spread The Word
If you like what you are reading, then please help spread the word by re-tweeting, blogging or using the ShareThis button below. Thank you.

Gmail/Facebook Style jQuery Chat

Anant Garg — Wed, 13 May 2009 17:18:23 +0000

Introduction
Everyone loves the gmail and facebook inline chat modules. This jQuery chat module enables you to seamlessly integrate Gmail/Facebook style chat into your existing website.

Features
1. Gmail style bottom right display of chat boxes
2. Keeps chat boxes open and stores state (data) even when pages are browsed/refreshed similar to Facebook
3. Displays “Sent at…” after 3 minutes of inactivity
4. Displays “X says…” & blinks chat boxes when window is not in focus
5. Minimize and close chat boxes
6. Auto-resize of text input box
7. Auto-scrolling of chat text
8. Auto-back-off polling policy (hits the server less-often when chat activity is low)
9. Extremely simple to integrate into existing site
Demo
Please load the following links in different browsers otherwise it wont work:
(Note that due to users trying out the chat links below at the same time, it might work slightly erratically because the username is actually not supposed to be used by multiple users at the same time)
Sample Chat User One
Sample Chat User Two
Sample Chat User Three
Getting Started
First download the module (link below)
The script does not manage rosters (i.e. which users are online etc.), it only enables users to chat with each other. I assume your current application already provides that functionality. You must also make sure that $_SESSION['username'] is being set when your website session begins. You will understand the logic better after you try the sample files that I have provided.
You must first create a mySQL table as below (or import db.txt)
CREATE TABLE `chat` ( `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, `from` VARCHAR(255) NOT NULL DEFAULT '', `to` VARCHAR(255) NOT NULL DEFAULT '', `message` TEXT NOT NULL, `sent` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00', `recd` INTEGER UNSIGNED NOT NULL DEFAULT 0, PRIMARY KEY (`id`), INDEX `to` (`to`), INDEX `from` (`from`) ) ENGINE = InnoDB;
Add the following scripts to your page template

Add the following CSS to your page template

Now in your list of users online, add “javascript:chatWith(‘USERNAME’);” function where USERNAME is the username for that particular user who he/she wants to chat with.
Once that is done, edit chat.php and set your database parameters and try your website.
For better understanding, load 3 different browsers (internet explorer, firefox, safari) and point them to samplea.php, sampleb.php and samplec.php.
Click on “chat with john doe” link and watch the chat functionality come alive!
Inorder to integrate your existing website, you must place all your content between the “main_container” div tag.
Browser Compatibility
1. Firefox 2+
2. Internet Explorer 6+
3. Safari 2+
4. Opera 9+
Licensing
This chat script can be used for free under GPL-style license for non-commercial purposes. For commercial purposes, please purchase a license.
Download
jQuery Chat Module. If you would like a more full featured inline chat software, have a look at CometChat.
Future Updates
1. Gmail style pop-out functionality
2. Gmail style emoticons
3. Gmail style video chat
4. Comet integration
5. Jabber integration
Comments/Suggestions?
Do let me know your suggestions on how we can improve this code or any other features you would like to add.
Spread The Word
If you like what you are reading, then please help spread the word by re-tweeting, blogging and dzone upvoting or use the ShareThis button below. Thank you.