Bagesh Singh's Blog » javascript http://www.bageshsingh.com/bagesh-blog Shortest Distance to Web Solutions & Software Solutions Wed, 22 Feb 2012 18:42:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How to Create CAPTCHA Protection using PHP and AJAX http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-create-captcha-protection-using-php-and-ajax/ http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-create-captcha-protection-using-php-and-ajax/#comments Mon, 29 Aug 2011 17:18:44 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1435 Download Source

CAPTCHA is a simple test to determine if a user is a computer or a human. It is used to prevent spam abuse on the websites. So if you use CAPTCHA on your web site forms, this can help in stopping some bots and making life harder for other bots in accessing or using your forms.

In brief the CAPTCHA protection works by generating a random string, writing it to an image, then storing the string inside of a session or by some other method. This is then checked when the form is submitted.

The goal of this tutorial is to demonstrate how to make your own simple CAPTCHA protection using PHP and AJAX technologies.

This tutorial is very simple, but if you are unfamiliar with PHP and AJAX this is a great place to start. The tutorial consists of a HTML page for presenting a simple form that will send the data, a JavaScript file for handling the Ajax functionality, and a simple PHP page that makes the actual comparison of the what is in the text box compared to what phrase was stored in the image.

  • The AJAX HTML Page (the Front-end)
  • The JavaScript
  • The PHP Server Page (the Backend)
  • The Ways to Make It More Secure

The AJAX HTML Page (the Front-end)

The front-end of this tutorial is straight forward. We are going to create a simple HTML form with a textbox for entering the security code, dynamically generated image holding this code, a button for submitting, and a DIV that we will display the CAPTCHA test result. The following example shows how you can do that. Create a new file named captcha_test.htm, and add this code to it.

<form id=”frmCaptcha” name=”frmCaptcha”>
<table>
<tr>
<td align=”left”>
<label for=”captcha”>Captcha</label>
</td>
<td>
<input id=”txtCaptcha” type=”text” name=”txtCaptcha” value=”" maxlength=”10″ size=”32″ />
</td>
<td>
<img id=”imgCaptcha” src=”create_image.php” />
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input id=”btnCaptcha” type=”button” value=”Captcha Test” name=”btnCaptcha”
onclick=”getParam(document.frmCaptcha)” />
</td>
</tr>
</table>

<div id=”result”>&nbsp;</div>
</form>

After the textbox and the button we have added the result DIV. We have given it an ID so we can address it through the DOM in our JavaScript. It can easily be a SPAN or any other HTML element that can contain text. The button onclick event will start the AJAX request to the server to make the comparison.

Below is a php script that generates the CAPTCHA image and set a session that stores the security code. Create a new file named create_image.php, and add this code to it.

<?php
//Start the session so we can store what the security code actually is
session_start();

//Send a generated image to the browser
create_image();
exit();

function create_image()
{
//Let’s generate a totally random string using md5
$md5_hash = md5(rand(0,999));
//We don’t need a 32 character long string so we trim it down to 5
$security_code = substr($md5_hash, 15, 5);

//Set the session to store the security code
$_SESSION["security_code"] = $security_code;

//Set the image width and height
$width = 100;
$height = 20;

//Create the image resource
$image = ImageCreate($width, $height);

//We are making three colors, white, black and gray
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
$grey = ImageColorAllocate($image, 204, 204, 204);

//Make the background black
ImageFill($image, 0, 0, $black);

//Add randomly generated string in white to the image
ImageString($image, 3, 30, 3, $security_code, $white);

//Throw in some lines to make it a little bit harder for any bots to break
ImageRectangle($image,0,0,$width-1,$height-1,$grey);
imageline($image, 0, $height/2, $width, $height/2, $grey);
imageline($image, $width/2, 0, $width/2, $height, $grey);

//Tell the browser what kind of file is come in
header(“Content-Type: image/jpeg”);

//Output the newly created image in jpeg format
ImageJpeg($image);

//Free up resources
ImageDestroy($image);
}
?>

If you view create_image.php in a browser, you should see a new JPEG image every time you refresh the page. You should see the black box with some letters and numbers on it. For more details how to create images on the fly read our tutorial Dynamic Image Generation.

The last we have to do is to include the JavaScript file that we will create on the next step.

<script language=”JavaScript” type=”text/javascript” src=”ajax_captcha.js”></script>

Back to top

The JavaScript

The JavaScript will be placed in an external file called ajax_captcha.js. Let’s look into the JavaScript code.

The first function simply returns a browser specific XmlHttpRequest object. Unfortunately AJAX is supported slightly differently in IE than it is Safari, Opera and Mozilla-based browsers like Firefox. Microsoft Internet Explorer uses an Active X object while Mozilla and Safari use a native object.

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Mozilla, Safari …
} else if (window.ActiveXObject) {
return new ActiveXObject(“Microsoft.XMLHTTP”); //IE
} else {
//Display our error message
alert(“Your browser doesn’t support the XmlHttpRequest object.”);
}
}

The next step we will create our XmlHttpRequest object that we can use to make the requests.

//Our XmlHttpRequest object
var receiveReq = getXmlHttpRequestObject();

After that we create a function that will make the AJAX request. This function gets two parameters: the url to send to the server and a parameter to the url with the content of the input field.

//Initiate the AJAX request
function makeRequest(url, param) {
//If our readystate is either not started or finished, initiate a new request
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//Set up the connection to captcha_test.html. True sets the request to asyncronous(default)
receiveReq.open(“POST”, url, true);
//Set the function that will be called when the XmlHttpRequest objects state changes
receiveReq.onreadystatechange = updatePage;

//Add HTTP headers to the request
receiveReq.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
receiveReq.setRequestHeader(“Content-length”, param.length);
receiveReq.setRequestHeader(“Connection”, “close”);

//Make the request
receiveReq.send(param);
}
}

At first we check if our XmlHttpRequest object is ready to make a request. If our readystate is either not started or finished then we initiate a new request. Next we open the connection to our server PHP page with the appended querystring and mark it as a “POST” request. After that we add HTTP headers to the request so that the server processes the request correctly. The next line defines the updatePage() function that will be called when we recieve the AJAX response. Finally, we actually send the request to the server.

The updatePage() function executes every time the state of the XmlHttpRequest object changes.

//Called every time our XmlHttpRequest objects state changes
function updatePage() {
//Check if our response is ready
if (receiveReq.readyState == 4) {
//Set the content of the DIV element with the response text
document.getElementById(‘result’).innerHTML = receiveReq.responseText;
//Get a reference to CAPTCHA image
img = document.getElementById(‘imgCaptcha’);
//Change the image
img.src = ‘create_image.php?’ + Math.random();
}
}

At first we need to make sure our response is ready. If it is, then the content of the DIV element is filled with the response text and the CAPTCHA image is changed. One other thing you must remember you must have different names for each image. For that purpose we use the random() function.

The last function will be called every time the form is submitted. It gets the value from the text box, sets the url and passes them as a parameters to makeRequest() function.

//Called every time when form is perfomed
function getParam(theForm) {
//Set the URL
var url = ‘captcha.php’;
//Set up the parameters of our AJAX call
var postStr = theForm.txtCaptcha.name + “=” + encodeURIComponent( theForm.txtCaptcha.value );
//Call the function that initiate the AJAX request
makeRequest(url, postStr);
}

That’s all. If we open our page, type the security code into the text box and click the button, our DIV element will read the CAPTCHA test result without having to refresh the page.

Back to top

The PHP Server Page (the Backend)

The server-side PHP file will make the actual comparison and return the result. This is very simple PHP page that only prints the result of the CAPTCHA test. You can add needed functionality yourselves. For example, if your HTML form will contain some other fields, you can send their data using the POST method and then output the data on the screen or add it into the database for further use.

<?php
//Continue the session
session_start();

//Make sure that the input come from a posted form. Otherwise quit immediately
if ($_SERVER["REQUEST_METHOD"] <> “POST”)
die(“You can only reach this page by posting from the html form”);

//Check if the security code and the session value are not blank
//and if the input text matches the stored text
if ( ($_REQUEST["txtCaptcha"] == $_SESSION["security_code"]) &&
(!empty($_REQUEST["txtCaptcha"]) && !empty($_SESSION["security_code"])) ) {
echo “<h1>Test successful!</h1>”;
} else {
echo “<h1>Test failed! Try again!</h1>”;
}
?>

The session_start() simply continues the session. Then it’s just a simple text matching which is done by the if statement. If the input text matches the stored text then the success message displayed, otherwise error message. If someone is trying to outwit you, then you should probably use a more secure way besides storing the security code in a session or a cookie that always has the same name. As an example you can store this data in MySQL database.

Create a new file named captcha.php, and add the code from the preceding example to it. And that’s all for the server-side.

The Ways to Make It More Secure

You can see how it is easy to use PHP with Ajax technologies. This is very simple CAPTCHA test you can use but I’m sure you will think how to make it more powerful, robust and secure. In conclusion I just want to suggest some several things you can do to make it more secure:

  • Rotate the text randomly
  • Add random spaces in between characters
  • Use a TTF fonts and change the font randomly every time
  • Use a random text and image size every time
  • Use more advanced text distortion and colors
  • Move the lines randomly
  • Store the password in a random cookie
]]> http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-create-captcha-protection-using-php-and-ajax/feed/ 0 How to Pass JavaScript variables to PHP http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-pass-javascript-variables-to-php/ http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-pass-javascript-variables-to-php/#comments Mon, 29 Aug 2011 17:17:22 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=1433 JavaScript is mainly used as a client side scripting language, while PHP is a server side technology. Unlike Java or ASP.Net, PHP doesn’t have tools to make it work client side. That is why you need to combine JavaScript and PHP scripts to develop powerful web-applications.

One of the frequent problems is defining visitor’s screen resolution using JavaScript tools and passing this data to PHP-script. The following script provides solution for this problem:

<script type=”text/javascript”>

width = screen.width;
height = screen.height;

if (width > 0 && height >0) {
window.location.href = “http://localhost/main.php?width=” + width + “&height=” + height;
} else
exit();

</script>

Copy and paste this code snippet in the text editor, save it as index.htm and run it in your browser. After this code has been executed, a user is automatically redirected to the main.php page where screen resolution is displayed in the browser window.

The main.php looks as follows:

<?php
echo “<h1>Screen Resolution:</h1>”;
echo “Width  : “.$_GET['width'].”<br>”;
echo “Height : “.$_GET['height'].”<br>”;
?>

As you can see, passing JavaScript variables in PHP is similar to sending data using GET method.

]]> http://www.bageshsingh.com/bagesh-blog/2011/08/how-to-pass-javascript-variables-to-php/feed/ 0 Prevent Your CSS and JavaScript Files From Being Cached http://www.bageshsingh.com/bagesh-blog/2010/11/prevent-your-css-and-javascript-files-from-being-cached/ http://www.bageshsingh.com/bagesh-blog/2010/11/prevent-your-css-and-javascript-files-from-being-cached/#comments Tue, 30 Nov 2010 17:23:48 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=932 Some websites use highly volatile, oft-changing CSS and JavaScript files. In the case of these files, it’s important that the developer prevent browsers from caching them. How do we do that? By using a phantom querystring, of course. We’ll use PHP to tack the current time onto the file reference.

The PHP

<link href=”/stylesheet.css?<?php echo time(); ?>” rel=”stylesheet” type=”text/css” /&glt;
<– RENDERS –>
<link href=”/stylesheet.css?1234567890″ rel=”stylesheet” type=”text/css” /&glt;
<script type=”text/javascript” src=”/site-script.js?<?php echo time(); ?>”></script>
<– RENDERS –>
<script type=”text/javascript” src=”/site-script.js?1234567890″></script>
It’s a very simple technique and doesn’t affect your CSS or JavaScript code in any way.
]]> http://www.bageshsingh.com/bagesh-blog/2010/11/prevent-your-css-and-javascript-files-from-being-cached/feed/ 0 6 Reasons To Use JavaScript Libraries & Frameworks http://www.bageshsingh.com/bagesh-blog/2010/11/6-reasons-to-use-javascript-libraries-frameworks/ http://www.bageshsingh.com/bagesh-blog/2010/11/6-reasons-to-use-javascript-libraries-frameworks/#comments Tue, 30 Nov 2010 17:15:14 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/2010/11/6-reasons-to-use-javascript-libraries-frameworks/ I’ve seen many articles around the internet from JavaScript fundamentalists that advocate writing your own JavaScript code instead of using JavaScript frameworks like MooTools, Prototype / Scriptaculous,jQuery, MochiKit, YUI Library, and Dojo Toolkit, and I just cannot agree with their reasons for not using these spectacular frameworks.

Among other reasons, fundamentalists state:
  • You don’t learn the deep-down JavaScript code because you’re using shortcut functions within the framework
  • Javascript frameworks are bloated and contain a great amount of code you will never use
  • You shouldn’t make users download more than what’s needed
  • You shouldn’t trust the code of others for your purposes (if you want it done right, do it yourself mentality)

Ridiculous. Don’t listen to elitists! You SHOULD use JavaScript frameworks for the most important reasons.

Don’t Reinvent The Wheel

Why write code that’s already been written (better)? A good programmer is a lazy programmer, so be lazy. The tools are there — use them.

Do More With Less Code

Most JavaScript frameworks provide function “chaining.” Chaining allows you to do more with less code. Less code means less maintenance time, less download time, and less coding time. Check out MooTools chaining.

Save Time — You Don’t Code Your Own OS, Do You?

I love JavaScript as much as the next guy, but some programmers REALLY love developing JavaScript. Let the experts do the tough part, you take their work and make what you’d like of it.

Chances Are, You Aren’t The Expert

As big as any programmer’s ego is, there are people out there that are smarter, more inventive than you. Most Web Developers need to be a jack of all trades and it’s difficult to keep up with every language when you’re needed in every facet of a website’s construction and launch. The minds behind the frameworks have their eyes on JavaScript daily — trust in them.

Speed Thrills

The creators of these JavaScript frameworks have their own private pissing contest when it comes to JavaScript speed put a lot of effort into making sure their frameworks are fast. The first job of JavaScript for mass web visitor usage is to be fast — users expect accuracy, speed is the most important part. Who’s fastest today? Check out SlickSpeed.

Avoid Cryptic JavaScript Base Code

Why use JavaScript’s default functions when you can use a framework’s English-named functions? For example:
//standard JavaScript
document.getElementbyId(‘mydiv’).style.color = ‘#f00′; // camel-case the style!
//mootools JavaScript
$(‘mydiv’).setStyle(‘color’,'#foo’);
These are the reasons I use JavaScript frameworks. Need I say more?
Do you have more reasons? Please share them!
]]> http://www.bageshsingh.com/bagesh-blog/2010/11/6-reasons-to-use-javascript-libraries-frameworks/feed/ 0 jQuery plugin: word-counter for textarea http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-plugin-word-counter-textarea/ http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-plugin-word-counter-textarea/#comments Thu, 18 Nov 2010 10:43:03 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=861 Sorry friends on the way of move to new home I’ve been lost from the blog as I didn’t have internet connection for few last weeks. Now, I’m back and I try to be regular as much as I can. Inspired from the new feature of wordpress 2.6.x which displays word count of each post, I’ve developed jQuery plugin to display word-count of Textarea. Please note that it is word count plugin not character counter.


Jquery plugin: Word-count code

jQuery.fn.wordCount = function(params)
{
   var p =  {
   counterElement:"display_count"
   };
  &nbsp;var total_words;
  if(params) {
      jQuery.extend(p, params);
  &nbsp;}
  //for each keypress function on text areas
 &nbsp;this.keypress(function()
  {
    total_words=this.value.split(/[\s\.\?]+/).length;
   &nbsp;jQuery('#'+p.counterElement).html(total_words);
  &nbsp;});
};

As you can in the above code, I assume that each words of a paragraph are separated by the either spaces or dots(.) . Please have your suggestion if i can more characters to improve this plugin.

How to use this plugin?

Well, you can guess that a Textarea is needed of whose words are counted and another element like div or span needed to display the word count.

For example, the below HTML code contains Textarea (whose total word is counted) and span (for displaying counted word).

<textarea name="word_count" id="word_count" cols="30" rows="6"></textarea>
Total word Count : <span id="display_count">0</span>

Remember that the id of text area is “word_count” and “display_count“.

Now, let look at the jQuery code for displaying word count of text area , note that we are calling the function wordCount() which we’ve just developed in the plugin of jQuery.

$('#word_count').wordCount();

Note: display_count  is default id of element which is already defined in the plugin if you want to use the different id of elment then you’ve to override the value of variable counterElement which contains the id of element displaying word count.

$('#word_count').wordCount({counterElement:"word_counter"});

DOWNLOAD EXAMPLE CODE

]]> http://www.bageshsingh.com/bagesh-blog/2010/11/jquery-plugin-word-counter-textarea/feed/ 0 38 jQuery And CSS Drop Down Multi Level Menu Solutions http://www.bageshsingh.com/bagesh-blog/2010/07/38-jquery-and-css-drop-down-multi-level-menu-solutions/ http://www.bageshsingh.com/bagesh-blog/2010/07/38-jquery-and-css-drop-down-multi-level-menu-solutions/#comments Fri, 02 Jul 2010 15:54:42 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=611 Hello again, it

]]> http://www.bageshsingh.com/bagesh-blog/2010/07/38-jquery-and-css-drop-down-multi-level-menu-solutions/feed/ 0 Magento: Creating Ajax Updated Tabs In Frontend, Like Product Management Tabs of Backend http://www.bageshsingh.com/bagesh-blog/2010/06/magento-creating-ajax-updated-tabs-in-frontend-like-product-management-tabs-of-backend/ http://www.bageshsingh.com/bagesh-blog/2010/06/magento-creating-ajax-updated-tabs-in-frontend-like-product-management-tabs-of-backend/#comments Wed, 30 Jun 2010 11:39:44 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=603 Magento

]]> http://www.bageshsingh.com/bagesh-blog/2010/06/magento-creating-ajax-updated-tabs-in-frontend-like-product-management-tabs-of-backend/feed/ 0 Tabbed Infowindow in Google Maps http://www.bageshsingh.com/bagesh-blog/2010/04/tabbed-infowindow-in-google-maps/ http://www.bageshsingh.com/bagesh-blog/2010/04/tabbed-infowindow-in-google-maps/#comments Wed, 07 Apr 2010 13:50:57 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=460 I wanted to show different categories of information on one GMarker. That is I wanted to show different types of information on a Infowindow for a point on Google Maps. For that I used a tabbed info window, which helped me to show different data on each tabs. Here is the code of what I have done. I have shown the latitude and longitude of a placed clicked on the map on the tabbed info window. This is just the script part. The demo and download links are given below.

01 <script type="text/javascript">
02 var iconBlue = new GIcon();
05 iconBlue.iconSize = new GSize(12, 20);
06 iconBlue.shadowSize = new GSize(22, 20);
07 iconBlue.iconAnchor = new GPoint(6, 20);
08 iconBlue.infoWindowAnchor = new GPoint(5, 1);
09 var point = new GLatLng(26.88157422515243, 86.30859375);
10 function load() {
11 if (GBrowserIsCompatible()) {
12 var map = new GMap2(document.getElementById("map"));
13 map.setCenter(point,3);
14 GEvent.addListener(map, 'click', function(overlay, point) {
15 var lati=point.lat();
16 var long=point.lng();
17 var marker= new GMarker(new GLatLng(lati, long),{draggable: false});
18 map.addOverlay(marker);
19 var infoTabs = [ new GInfoWindowTab("Lat-Tab", "<h1> Latitude:</h1><br />"+lati), new GInfoWindowTab("Long-Tab", "<h1>Longitude</h1><br />"+long)];
20 marker.openInfoWindowTabsHtml(infoTabs);
21 });
22 }
23 }
24 </script>

Lets focus on the #17-#26 Lines of codes. Other Lines are already described on other posts. Please see the related post link below the post.
#17: Creates a GMarker on the point where clicked on the Map.
#18: Addes the GMarker over the Map.
#19: Initiates an array of tabsinfoTabs with GInfoWindowTab function with tabname and its innerHTML as parameters.
#20: Opens the infowindow calling openInfoWindowTabsHtml function and the array of tabs as parameters.

[Download]

]]> http://www.bageshsingh.com/bagesh-blog/2010/04/tabbed-infowindow-in-google-maps/feed/ 0 Animated content navigation effect using jquery http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery-2/ http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery-2/#comments Fri, 19 Mar 2010 12:00:33 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery-2/ I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link, let

]]> http://www.bageshsingh.com/bagesh-blog/2010/03/animated-content-navigation-effect-using-jquery-2/feed/ 0 Jquery : Benefits, Examples and Free Ebook http://www.bageshsingh.com/bagesh-blog/2010/03/jquery-benefits-examples-and-free-ebook-2/ http://www.bageshsingh.com/bagesh-blog/2010/03/jquery-benefits-examples-and-free-ebook-2/#comments Fri, 12 Mar 2010 07:10:05 +0000 Bagesh Singh http://www.bageshsingh.com/bagesh-blog/?p=164 What is jQuery?

Directly taken from the website of jQuery -

]]> http://www.bageshsingh.com/bagesh-blog/2010/03/jquery-benefits-examples-and-free-ebook-2/feed/ 0