Year: 2010

PHP

Text based Captcha with PHP

Post author By masnun
Post date May 18, 2010
1 Comment on Text based Captcha with PHP

I needed text based captcha for my mobile web application to stop automated registrations. The mobile application was developed targeting the WAP devices without any fancy JS or iFrame support. So, I was forced to put some text based captcha. I set one up earlier which didn’t require any database but it was just an eye wash. If anyone examined the HTML source, s/he would know how to break it through.

This time I have come up with something better, something more effective. It is quite simple. Have a look at the source code and you’ll understand yourself.

The SQL for the Table:

CREATE TABLE IF NOT EXISTS `masnun_text_captcha` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `captcha` varchar(255) NOT NULL,
  `time` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 ;

CREATE TABLE IF NOT EXISTS `masnun_text_captcha` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`captcha` varchar(255) NOT NULL,

`time` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 ;

The TextCaptcha Class :

<?php


class TextCaptcha {
    public function getCaptcha($id) {
        $res = mysql_fetch_assoc(mysql_query("select captcha from masnun_text_captcha where id='{$id}'"));
        return $res['captcha'];
    }

    public function verifyCaptcha($id,$captcha) {
        $captchaFromId = $this->getCaptcha($id);
        if ( !empty ( $captchaFromId ) && $captchaFromId == $captcha ) {
            mysql_query("delete from masnun_text_captcha where id='{$id}'");
            return true;
        } else {
            return false;
        }
    }

    public function createNew() {
        $time = time();
        $salt = "mZs45#";
        $rand = rand(0,100);
        $hash = md5($time.$salt.$rand);
        $string = substr($hash, 0, 5);
        mysql_query("insert into masnun_text_captcha (captcha,time) values('$string','$time')");
        $id = mysql_insert_id();
        $data['id'] = $id;
        $data['captcha'] = $string;
        return (object) $data;
    }
}

?>

<?php

class TextCaptcha {

public function getCaptcha($id) {

$res = mysql_fetch_assoc(mysql_query("select captcha from masnun_text_captcha where id='{$id}'"));

return $res['captcha'];

}

public function verifyCaptcha($id,$captcha) {

$captchaFromId = $this->getCaptcha($id);

if ( !empty ( $captchaFromId ) && $captchaFromId == $captcha ) {

mysql_query("delete from masnun_text_captcha where id='{$id}'");

return true;

} else {

return false;

}

public function createNew() {

$time = time();

$salt = "mZs45#";

$rand = rand(0,100);

$hash = md5($time.$salt.$rand);

$string = substr($hash, 0, 5);

mysql_query("insert into masnun_text_captcha (captcha,time) values('$string','$time')");

$id = mysql_insert_id();

$data['id'] = $id;

$data['captcha'] = $string;

return (object) $data;

}

You might notice that I haven’t used the “time” field. It will be used to delete unused captcha via cron or in some other way. Didn’t get the time to code that.

And how to use it:

<?php
include 'textCaptcha.class.php';

// We must have an already open mysql connection to the database
mysql_connect("localhost","masnun","masnun");
mysql_select_db("text_captcha");


$TextCaptcha = new TextCaptcha(); # Construct the object
$captcha = $TextCaptcha->createNew(); # Create a new Captcha Object

/*
 * The Captcha Object has two properties:
 * id --> The ID of the Captcha. You use it as an identifier.
 * captcha --> The Text that is matched with the id to verify
 *
 */

$bool = $TextCaptcha->verifyCaptcha($captcha->id, $captcha->captcha);
var_dump($bool); // Always true :) Alter the code to play yourself
?>

<?php

include 'textCaptcha.class.php';

// We must have an already open mysql connection to the database

mysql_connect("localhost","masnun","masnun");

mysql_select_db("text_captcha");

$TextCaptcha = new TextCaptcha(); # Construct the object

$captcha = $TextCaptcha->createNew(); # Create a new Captcha Object

* The Captcha Object has two properties:

* id --> The ID of the Captcha. You use it as an identifier.

* captcha --> The Text that is matched with the id to verify

$bool = $TextCaptcha->verifyCaptcha($captcha->id, $captcha->captcha);

var_dump($bool); // Always true :) Alter the code to play yourself

Have fun! If you don’t get anything, please place a question below.

Javascript

Working with the Google Chart (Visualization) JavaScript APIs

Post author By masnun
Post date May 1, 2010
6 Comments on Working with the Google Chart (Visualization) JavaScript APIs

For a current project at my workplace I need a good charting solution. I need a pie chart for now, on which people can actually click and interact. I found a few tools and went for the Google Visualization APIs. The APIs are a set of JS libraries which let you build quick charts and graphics out of data tables. I started trying the sample codes on the Google Ajax playground and quickly understood which way to go to get things right. First I must make it clear that, I’m no Javascript pro. I have coded with jQuery a few times before and I have no real experience with JS until today. It is just today I spent a good amount of time with the Facebook JS APIs. Who knows if it’s the brilliant documentation at the Google Code or my fast learning ability, it took me just one hour to learn the Visualization APIs and cook something up from scratch.

Here’s the source code:

google.load("visualization","1", {"packages":["piechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
	table = new google.visualization.DataTable();
	table.addColumn("string","Languages");
	table.addColumn("number","Hours worked");
	table.addRows(3);
	table.setValue(0,0,"PHP");
	table.setValue(1,0,"Python");
	table.setValue(2,0,"JS");
	table.setValue(0,1,5);
	table.setValue(1,1,1);
	table.setValue(2,1,3);

	targetDiv = document.getElementById('chart');
	chart = new google.visualization.PieChart(targetDiv);
	chart.draw(table, {width: 400, height: 240, is3D: true, title: 'Languges Worked With (in hours)'});

	new google.visualization.events.addListener(chart, 'select', selectionHandler);

	function selectionHandler(e) {
			selectedData = chart.getSelection();
			row = selectedData[0].row;
			item = table.getValue(row,0);
			time = table.getValue(row,1);
			resultDiv = document.getElementById('res');
			resultDiv.innerHTML = "Selected Language: " + item + " / Working Hours: " + time + "<br />";
		}


	}

google.load("visualization","1", {"packages":["piechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

table = new google.visualization.DataTable();

table.addColumn("string","Languages");

table.addColumn("number","Hours worked");

table.addRows(3);

table.setValue(0,0,"PHP");

table.setValue(1,0,"Python");

table.setValue(2,0,"JS");

table.setValue(0,1,5);

table.setValue(1,1,1);

table.setValue(2,1,3);

targetDiv = document.getElementById('chart');

chart = new google.visualization.PieChart(targetDiv);

chart.draw(table, {width: 400, height: 240, is3D: true, title: 'Languges Worked With (in hours)'});

new google.visualization.events.addListener(chart, 'select', selectionHandler);

function selectionHandler(e) {

selectedData = chart.getSelection();

row = selectedData[0].row;

item = table.getValue(row,0);

time = table.getValue(row,1);

resultDiv = document.getElementById('res');

resultDiv.innerHTML = "Selected Language: " + item + " / Working Hours: " + time + "<br />";

}

It’s very simple and easy. First we include the root javascript from: http://google.com/jsapi and then put the above codes in a script tag inside head.

We use the google loader to load the visualization package and then use it to build a PieChart. When the loading is done, the setOnLoadCallback() method invokes another function to proceed with further execution. We packed our main code inside a drawChart() function and set it as the callback.

To assemble the data, we first need a DataTable. A data table is an object with virtual columns and rows. First, we need to define the columns. We do that by calling the addColumn() method. The first parameter is the data type and the second one is the name. In our example, we added two columns.

Next, we call the addRows() passing an integer as the only parameter. This method creates “filler” or empty sets for putting data into.

Then, we use the setValue() call to insert/update data. The first parameter is the row number counted from 0. The second one is the index of column. Remember the sequence of the column definitions? Yes, follow that sequence. The first column is the index 0. The 3rd parameter is the actual value for that row and column.

table.setValue(2,1,"meaow")

1	table.setValue(2,1,"meaow")

The above call will insert the string “meaow” into the second column of the 3rd row. It’s easy! 🙂
PS: Please be aware of the data type of the column while inserting/updating data.

Now that we have a DataTable at our disposal, all we need to do is feed this data to a PieChart and draw it up. First, we created a new div with the id “chart”. This div will be holding the chart. Then we call the PieChart constructor with this div element. Then we call the draw() method of the chart object to paint it on the screen. The first parameter is the datatable and the second one is an object (dictionary/associative array like) defining the look and feel of the charts.

That draws the chart alright. But I need to let the users interact with the chart. So, I added a Listener to listen to any “select” events and call the handler function back. We get a event object but for select events, they don’t have any properties. That is they don’t tell you what the user clicked. You have to get the data by calling the getSelection() method of the chart. The returned object will have “row” and “column” values. For PieChart, alone the row value does the job. We get the row index. Then call the getValue() method of the data table to get the value of a certain column in a row. In this case, I just iterated over both columns. Built a text string out of the data and dynamically updated a div with that!

It’s pretty simple. It’s powerful and user friendly as well.

PS: I really liked the Google Ajax Playground. I am gonna play a lot in there from now on 🙂
I just realized I’m becoming a good coder as well. I wrote the above codes without any pretty printer or code formatter. It looks well indented to me 😀

Javascript

Using The Facebook Graph API with js-sdk : An explanatory Tutorial

Post author By masnun
Post date May 1, 2010
12 Comments on Using The Facebook Graph API with js-sdk : An explanatory Tutorial

The facebook Graph API has a nice Javascript SDK to build applications using JS. The most important benefit is that with JS you could tightly integrate the Facebook Graph API with your web application.

Integration is quite easy. First we add a fbAsyncInit object to the window object for asynchronous initiating. The following code snippet was borrowed from the official docs and then slightly modified:

            window.fbAsyncInit = function() {
                FB.init({appId: appId, status: true, cookie: true, xfbml: true});

                /* All the events registered */
                FB.Event.subscribe('auth.login', function(response) {
                    // do something with response
                    login();
                });
                FB.Event.subscribe('auth.logout', function(response) {
                    // do something with response
                    logout();
                });

                FB.getLoginStatus(function(response) {
                    if (response.session) {
                        // logged in and connected user, someone you know
                        login();
                    }
                });
            };
            (function() {
                var e = document.createElement('script');
                e.type = 'text/javascript';
                e.src = document.location.protocol +
                    '//connect.facebook.net/en_US/all.js';
                e.async = true;
                document.getElementById('fb-root').appendChild(e);
            }());

           function login() {
           alert('login');
           }

           function logout() {
           alert('logout');
           }

window.fbAsyncInit = function() {

FB.init({appId: appId, status: true, cookie: true, xfbml: true});

/* All the events registered */

FB.Event.subscribe('auth.login', function(response) {

// do something with response

});

FB.Event.subscribe('auth.logout', function(response) {

// do something with response

logout();

});

FB.getLoginStatus(function(response) {

if (response.session) {

// logged in and connected user, someone you know

}

});

};

(function() {

var e = document.createElement('script');

e.type = 'text/javascript';

e.src = document.location.protocol +

'//connect.facebook.net/en_US/all.js';

e.async = true;

document.getElementById('fb-root').appendChild(e);

}());

function login() {

alert('login');

}

function logout() {

alert('logout');

}

Thanks to the elegance of Javascript, we called the newly constructed object immediately after initiating, with a callback that loaded the JS sdk on our page. We registered the auth.login, auth.logout events and for initially looking for any logged in user, we made the getLoginStatus() call. In fact this code snippet initiates the facebook access on the page. Registering the events to our custom functions, we just made sure that, we know when something important happens. While iniating, if the user is already logged in, the login() function gets called because of the getLoginStatus() call. Later, after initiating, if the user logs in or logs out, the auth.login and auth.logout events get fired. Our registered handlers will be called in those cases.

To make things easy for the end user, you can use a fb:login-button tag from FBML. I believe Facebook app developers are already aware of that. Still, I was just reminding that you can still use those tags 😀 A login button is going to help you. Because, it’s mandatory that you call the FB.login() on an user event (like button click) because most browsers won’t allow opening a popup on a non-user event.

Now the user is logged in and authorized the apps, you can start customizing your contents for the user. You can always check for available users by calling the FB.getSession() function. It returns null if no user is available, otherwise, it returns a session object with access_token, app key and secret and most importantly the user uid.

session = FB.getSession()
if(session) {
    alert(session.uid);
        } else {
     alert('no user logged in');
}

session = FB.getSession()

if(session) {

alert(session.uid);

} else {

alert('no user logged in');

}

You can use the dir() function on the session object to explore it on the Firebug console.

Now, you can make calls to the Graph API using the normal path pattern:

FB.api("/me/photos", function(response) { alert(response.data[0].link) });

1	FB.api("/me/photos", function(response) { alert(response.data[0].link) });

The above code will alert() the user’s latest photo URI. Well, make sure that the applicaton has permissions to make the calls.

You can even mix up with the legacy API by passing an object with a “method” parameter pointing to the method name and related args. You can build the Facbook UIs using the FB.ui() call. Have a look how we use legacy API and UI to build a nifty sharing dialog box.

var share = {
   method: 'stream.share',
   u: 'https://masnun.com/'
 };

 FB.ui(share, function(response) { console.log(response); });

var share = {

method: 'stream.share',

u: 'https://masnun.com/'

};

FB.ui(share, function(response) { console.log(response); });

Here, instead of alert()ing the response, we logged it to the console 😀

In this way, you can interact with the user the way you want. It’s plain and simple. So, start digging now and have fun.

The Offcial js-sdk docs can be found here: http://developers.facebook.com/docs/reference/javascript/

Happy developing! Happy Facebooking! 😀 😀 😀

Recent Posts

Recent Comments

Archives

Categories