WEB DEVELOPMENT
Avoid automatically post form via CAPTCHA
by Hussain on Jul.26, 2009, under PHP
A good way to avoid automatic form submissions when creating a web form is to add some kind of verification. One of the best ways is to use an image verification, called also captcha. What it does is to dynamically create an image with a random string displayed on it. Then visitor is asked to type that string in a text field and once the form is submitted it checks if the string on the image matches the one inputted by the user. Because there is no easy way to read a text from an image (image recognition) this is a good way to protect your web forms from spammers.
For doing this CAPTCHA I would suggest using a session variable where you store the string generated and displayed on that dynamically generated image.
Create a page comment.php and create form for post comments:
Now we will create a Image Verification Page which will show Random Images, Save this page as randImages.php.
Leave a Comment
:CAPTCHA, Html, MySQL, PHP, WEB DESIGN, WEB DEVELOPMENT
more...
For doing this CAPTCHA I would suggest using a session variable where you store the string generated and displayed on that dynamically generated image.
| MySQL | | copy code | | ? |
| 1 | CREATE TABLE `comment` ( |
| 2 | `name` varchar(50) collate latin1_general_ci NOT NULL, |
| 3 | `mail` varchar(50) collate latin1_general_ci NOT NULL, |
| 4 | `url` varchar(50) collate latin1_general_ci NOT NULL, |
| 5 | `comment` longtext collate latin1_general_ci NOT NULL |
| 6 | ) |
| HTML | | copy code | | ? |
| 01 | <form name=”commentform” action=”comments-post.php” method=”post” id=”commentform”> |
| 02 | <table width=”468? border=”0? cellspacing=”3? cellpadding=”3?> |
| 03 | <tr> |
| 04 | <td width=”103?>Name</td> |
| 05 | <td width=”344?><input name=”name” type=”text” id=”name” tabindex=”1? value=”" size=”18? /></td> |
| 06 | </tr> |
| 07 | <tr> |
| 08 | <td>Mail</td> |
| 09 | <td><input type=”text” name=”email” id=”email” value=”" size=”18? tabindex=”2? /></td> |
| 10 | </tr> |
| 11 | <tr> |
| 12 | <td>URL</td> |
| 13 | <td><input type=”text” name=”url” id=”url” value=”" size=”18? tabindex=”3? /></td> |
| 14 | </tr> |
| 15 | <tr> |
| 16 | <td>Enter Number </td> |
| 17 | <td><input name=”txtNumber” type=”text” id=”txtNumber” value=”" tabindex=”4?/> |
| 18 | <img src=”randImages.php”/></td> |
| 19 | </tr> |
| 20 | <tr> |
| 21 | <td>Comment</td> |
| 22 | <td><textarea name=”comment” id=”comment” cols=”45? rows=”9? tabindex=”5?></textarea></td> |
| 23 | </tr> |
| 24 | <tr> |
| 25 | <td> </td> |
| 26 | <td><input name=”save” type=”submit” class=”submitbutton” id=”save” tabindex=”5? onClick=”MM_validateForm(’name’,”,’R',’email’,”,’RisEmail’,'comment’,”,’R');return document.MM_returnValue” value=”Submit Comment”/></td> |
| 27 | </tr> |
| 28 | </table> |
| 29 | </form> |
| PHP | | copy code | | ? |
| 01 | session_start(); |
| 02 | // $Rand Function generate 5 digit random number starting 10000, 99999. You can Edit it as your required. |
| 03 | $rand = rand(10000, 99999); |
| 04 | // create the hash for the random number and put it in the session |
| 05 | $_SESSION['image_random_value'] = md5($rand); |
| 06 | // create the image |
| 07 | $image = imagecreate(60, 30); |
| 08 | // use white as the background image |
| 09 | $bgColor = imagecolorallocate ($image, 255, 255, 255); |
| 10 | // the text color is black |
| 11 | $textColor = imagecolorallocate ($image, 0, 0, 0); |
| 12 | // write the random number |
| 13 | imagestring ($image, 5, 5, 8, $rand, $textColor); |
| 14 | // send several headers to make sure the image is not cached |
| 15 | // taken directly from the PHP Manual |
| 16 | // Date in the past |
| 17 | header(”Expires: Mon, 10 April 2008 05:00:00 GMT”); |
| 18 | // always modified |
| 19 | header(”Last-Modified: ” . gmdate(”D, d M Y H:i:s”) . ” GMT”); |
| 20 | // HTTP/1.1 |
| 21 | header(”Cache-Control: no-store, no-cache, must-revalidate”); |
| 22 | header(”Cache-Control: post-check=0, pre-check=0?, false); |
| 23 | // HTTP/1.0 |
| 24 | header(”Pragma: no-cache”); |
| 25 | // send the content type header so the image is displayed properly |
| 26 | header(’Content-type: image/jpeg’); |
| 27 | // send the image to the browser |
| 28 | imagejpeg($image); |
| 29 | // destroy the image to free up the memory |
| 30 | imagedestroy($image); |
| 31 | ?> |
| 32 | Now Create a page which insert the comment data. |
| 33 | session_start(); |
| 34 | //Enter here your php mysql connection details |
| 35 | if(isset($_POST['save'])){ |
| 36 | $name=$_POST['name']; |
| 37 | $email=$_POST['email']; |
| 38 | $url=$_POST['url']; |
| 39 | $comment=$_POST['comment']; |
| 40 | } |
| 41 | $number = $_POST['txtNumber']; |
| 42 | if (md5($number) == $_SESSION['image_random_value']) { |
| 43 | $sql=”INSERT into comment(name, mail, url, comment) values(’$name’, ‘$email’, ‘$url’, |
| 44 | ‘$comment’)”; |
| 45 | $result=mysql_query($sql) or die(’Can not Add Your Comment’); |
| 46 | echo “Your Comment have been added. Returning To Write Return page here. Please wait…”; |
| 47 | $_SESSION['image_random_value'] = ”; |
| 48 | } |
| 49 | } else { |
| 50 | echo ‘Sorry, wrong Image Varification Number. Please try again’; |
| 51 | } |
| 52 | ?> |
[jQuery] changing default thickbox behavior
by Hussain on Jul.05, 2009, under Developers, JQuery
To prevent closing by clicking on the overlay and remove the ‘close’ link
(better IMHO than just disabling it), remove line 38:
$("#TB_overlay").click(TB_remove);
remove the TB_closeWindow <div> from line 133:
$("#TB_window").append("<a href=” id=’TB_ImageOff’ title=’Close’><img
id=’TB_Image’ src=’"+url+"’ width=’"+imageWidth+"’ height=’"+imageHeight+"’
alt=’"+caption+"’/></a>" + "<div id=’TB_caption’>"+caption+"<div
id=’TB_secondLine’>" + imageCount + prev.html + next.html + "</div></div>");
remove line 135:
$("#TB_closeWindowButton").click(TB_remove);
remove the TB_closeAjaxWindow <div> from line 205:
$("#TB_window").append("<div id=’TB_title’><div
id=’TB_ajaxWindowTitle’>"+caption+"</div></div><iframe
frameborder=’0′
hspace=’0′ src=’"+urlNoQuery[0]+"’ id=’TB_iframeContent’
name=’TB_iframeContent’ style=’width:"+(ajaxContentW +
29)+"px;height:"+(ajaxContentH + 17)+"px;’ onload=’TB_showIframe()’>
</iframe>");
and 207:
$("#TB_window").append("<div id=’TB_title’><div
id=’TB_ajaxWindowTitle’>"+caption+"</div></div><div
id=’TB_ajaxContent’
style=’width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;’></div>");
remove line 210:
$("#TB_closeWindowButton").click(TB_remove);
and remove lines 258-259:
$("#TB_overlay").unbind("click");
$("#TB_closeWindowButton").unbind("click");
Thickbox also has a keydown handler so that if you push ‘escape’ it closes.
Remove lines 236-245 to prevent this:
document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
}
}
To add the ‘close’ functionality to something, do this:
$("#myTbCloseButton").click(TB_remove);
Source: (http://www.mail-archive.com/discuss@jquery.com/msg18856.html)
Leave a Comment
:Elements, Javascript, Jquery, Library, modal window, Software/applications, thickbox, WEB DESIGN, WEB DEVELOPMENT
more...
(better IMHO than just disabling it), remove line 38:
$("#TB_overlay").click(TB_remove);
remove the TB_closeWindow <div> from line 133:
$("#TB_window").append("<a href=” id=’TB_ImageOff’ title=’Close’><img
id=’TB_Image’ src=’"+url+"’ width=’"+imageWidth+"’ height=’"+imageHeight+"’
alt=’"+caption+"’/></a>" + "<div id=’TB_caption’>"+caption+"<div
id=’TB_secondLine’>" + imageCount + prev.html + next.html + "</div></div>");
remove line 135:
$("#TB_closeWindowButton").click(TB_remove);
remove the TB_closeAjaxWindow <div> from line 205:
$("#TB_window").append("<div id=’TB_title’><div
id=’TB_ajaxWindowTitle’>"+caption+"</div></div><iframe
frameborder=’0′
hspace=’0′ src=’"+urlNoQuery[0]+"’ id=’TB_iframeContent’
name=’TB_iframeContent’ style=’width:"+(ajaxContentW +
29)+"px;height:"+(ajaxContentH + 17)+"px;’ onload=’TB_showIframe()’>
</iframe>");
and 207:
$("#TB_window").append("<div id=’TB_title’><div
id=’TB_ajaxWindowTitle’>"+caption+"</div></div><div
id=’TB_ajaxContent’
style=’width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;’></div>");
remove line 210:
$("#TB_closeWindowButton").click(TB_remove);
and remove lines 258-259:
$("#TB_overlay").unbind("click");
$("#TB_closeWindowButton").unbind("click");
Thickbox also has a keydown handler so that if you push ‘escape’ it closes.
Remove lines 236-245 to prevent this:
document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
}
}
To add the ‘close’ functionality to something, do this:
$("#myTbCloseButton").click(TB_remove);
Source: (http://www.mail-archive.com/discuss@jquery.com/msg18856.html)
What Knowledge And Software/applications Would I Need To Make My Own Web Browser?
by Beniwal on Jul.05, 2009, under Web browser
A friend of mine and I are planning on creating a web browser that will be able to be downloaded by the masses and enjoyed just like other web browsers. I just want to feel how it is like to make a web browser. If anyone has any experience can you please tell me what knowledge/skills I would need and the software/applications I would need to create a web browser. I would appreciate if you could be descriptive and explain alot to me. Wish me luck =D
1 Comment
:Browser, Knowledge, Make, Need, Software/applications, What, Would
more...
Should One Learn Plain Javascript Before Learning The Jquery Library?
by Hussain on Jul.03, 2009, under JQuery
2 Comments :Before, Javascript, Jquery, Learn, Learning, Library, Plain, Should more...What Is The Fastest Web Browser Available For Free Download?
by Hussain on Jul.03, 2009, under Web browser
I have a Slow Dial – up internet connection and I need the fastest Web browser available. I already have Firefox 3 and I find this slow. I also have Microsoft Internet Explorer 8 which I find extremely slow.
26 Comments
:Available, Browser, Download, Fastest, Free, What
more...
How To Fetch The Absolute Position Of Html Elements Using Jquery?
by Hussain on Jul.03, 2009, under JQuery
I have come to know that “using JavaScript frameworks like JQuery, such information (and so much more!) can be retrieved in a browser-independant fashion.” Please tell me how?
1 Comment
:Absolute, Elements, Fetch, Html, Jquery, Position, Using
more...
What Is The Best Web Browser To Use Thats Fast And Secure?
by Hussain on Jul.03, 2009, under Web browser
I’ve been using Avant Browser for quite some time now, but now its just not getting it done. What do you think is the best web browser out there? What is your feeling on the opera browser? Does that get good reviews?
8 Comments
:Best, Browser, Fast, Secure, Thats, What
more...
What’s New in Firefox 3.5
by narendra on Jul.03, 2009, under Web browser
Firefox 3.5 is based on the Gecko 1.9.1 rendering platform, which has been under development for the past year. Firefox 3.5 offers many changes over the previous version, supporting new web technologies, improving performance and ease of use. Some of the notable features are:
- Available in more than 70 languages. (Get your local version!)
- Support for the HTML5 <video> and <audio> elements including native support for Ogg Theora encoded video and Vorbis encoded audio. (Try it here!)
- Improved tools for controlling your private data, including a Private Browsing Mode.
- Better web application performance using the new TraceMonkey JavaScript engine.
- The ability to share your location with websites using Location Aware Browsing. (Try it here!)
- Support for native JSON, and web worker threads.
- Improvements to the Gecko layout engine, including speculative parsing for faster content rendering.
- Support for new web technologies such as: downloadable fonts, CSS media queries, new transformations and properties, JavaScript query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG transforms.
Top 10 Firefox 3.5 Features
by Hussain on Jul.03, 2009, under Web browser
Firefox 3.5 is a pretty substantial update to the popular open-source browser, and it’s just around the corner. See what features, fixes, and clever new tools are worth getting excited about in the next big release.
UPDATE: A previous version of this list had Taskfox, an integrated version of Ubiquity, included as a Firefox 3.5 feature. It’s still in the experimental phase, in fact, as readers pointed out, and we regret the confusion (and false optimism!). This new list includes an additional item, and the rankings have been shifted slightly.

If you’re viewing a page coded in HTML 5 with video in an open-source format like Ogg Vorbis or Theora, Firefox 3.5 treats that video like it’s just part of the page, not a separate little island of Flash content. That means instant commenting on videos. It could also mean offering links from inside a tutorial video that offer more details on what’s being shown—soldering tips on an iPhone repair guide would be keen. In general, it’s just a promising step forward into a seamless melding of video and text on a future web.
If you type
Months ago, Mozilla said its still-in-development JavaScript engine, TraceMonkey, was “20 to 40 times” faster than the SpiderMonkey engine installed in Firefox 3. That hasn’t shown up in our speed tests, which themselves rely on a Mozilla-assembled testing suite, but JavaScript testing suites are often like drag races—they don’t really tell you what a browser runs like in a real daily sense, just pure timings. Even if TraceMonkey is ultimately outpaced by Chrome and/or Safari, its innovations push the whole browser market forward and give us all a bit less load time to complain about.
Different cameras, monitors, and capture devices grab and set colors in different ways. On the web, most colors look the same, though, because they’re filtered and optimized for quick viewing in every browser. Firefox 3.5 introduces dynamic color profiles for each picture, meaning that whatever the graphic designer or photographer saw when they were doing their work, you’ll see it on their web page.
The snarky types (i.e. my editor) can call it “Porn Mode,” but this feature, already in a number of competing browsers, has uses beyond the prurient. Beyond obvious situations, like gift buying and sensitive research, logging onto a friend’s browser for a quick email check or bill pay is made a lot more secure if you can get to the private mode. Likewise, anonymizing some of your searches and cookie collection on your own machine isn’t a bad idea, and a private mode can do that too. You don’t need it all the time, but you might be glad it’s available.
What good is it to bring back all the tabs you just lost to a crash if the tab that brought everything down comes back too? Firefox’s developers took a cue from the users and turned the session restore feature into more of a crash recovery tool, allowing users to select which tabs should come back. If you don’t know who’s the culprit, here’s a hint: It’s probably the one with Flash on it.
Firefox 3’s AwesomeBar/address bar offers a speedy list of suggestions to complete whatever you’re typing. That’s great, but that list comes from your page history, bookmarks, and tags, and can be matched by URL or name, leaving some results almost uselessly cluttered. This gets fixed with special character filters in the next Firefox. Restrict a search by typing “life *” for just your bookmarks with the words “life” in them, or just your tagged “lh” items with “lh +”. Anything that really makes getting back to importantly web destinations quickly is a welcome upgrade.

Google Chrome (Update: And Safari, as our readers note) somewhat stole the thunder out from under this feature, but it’s still a nice one: Grab a tab and drag it out a bit to create a new browser window from it. Drag windows into tabs again, and open any tab in a new window from the right-click menu, if clicking and dragging isn’t your style.
Tools like Private Browsing Modes and history wipers are good for what they do, but sometimes it would be great to have just one site wiped off your history—either because it’s hogging your quick address bar results, or because you’d rather your coworker be unaware of your workday LOLcat browsing. Firefox 3.5’s history browser offers a convenient “Forget this site” option, erasing your browser’s memory of particular domains. It doesn’t cover subdomains, and your network traffic and Flash memory would still hold some details, but it’s a handy tweak however you cut it.
If you accidentally close a tab you’d meant to keep open, Firefox 3, at least through extensions like Tab Mix Plus, can bring it back. Update: To clarify, Firefox can resurrect closed tabs without Tab Mix Plus (just hit Ctrl+Shift+T, for example); the extension simply adds more fine-grained control. If you accidentally kill a separate window full of tabs, though, you’ve been pretty much out of luck. Firefox 3.5 implements a restore feature for both tabs and windows from the History menu, which would (hopefully) also restore any text you’ve typed into them.
Leave a Comment
:Firefox, Web browser, WEB DESIGN, WEB DEVELOPMENT
more...
UPDATE: A previous version of this list had Taskfox, an integrated version of Ubiquity, included as a Firefox 3.5 feature. It’s still in the experimental phase, in fact, as readers pointed out, and we regret the confusion (and false optimism!). This new list includes an additional item, and the rankings have been shifted slightly.
1. Video superpowers with HTML 5

If you’re viewing a page coded in HTML 5 with video in an open-source format like Ogg Vorbis or Theora, Firefox 3.5 treats that video like it’s just part of the page, not a separate little island of Flash content. That means instant commenting on videos. It could also mean offering links from inside a tutorial video that offer more details on what’s being shown—soldering tips on an iPhone repair guide would be keen. In general, it’s just a promising step forward into a seamless melding of video and text on a future web.
2. Geo-location
If you type post officeinto a maps site, you probably don’t want the headquarters of the U.S. Post Office, or post office listings from two towns over. Integrated geo-location, powered by Google’s Wi-Fi triangulation and simple IP address information, looks to know roughly where you are and help you when you’re looking for something local. You can disable it if you’d like, but, realistically, signing on from any IP address reveals a bit about where you are anyways. If a good number of sites pick it up, geo-location could bring to the browser what a lot of people are already enjoying on their phone.
3. TraceMonkey JavaScript engine
Months ago, Mozilla said its still-in-development JavaScript engine, TraceMonkey, was “20 to 40 times” faster than the SpiderMonkey engine installed in Firefox 3. That hasn’t shown up in our speed tests, which themselves rely on a Mozilla-assembled testing suite, but JavaScript testing suites are often like drag races—they don’t really tell you what a browser runs like in a real daily sense, just pure timings. Even if TraceMonkey is ultimately outpaced by Chrome and/or Safari, its innovations push the whole browser market forward and give us all a bit less load time to complain about.4. Color profiles that pop
Different cameras, monitors, and capture devices grab and set colors in different ways. On the web, most colors look the same, though, because they’re filtered and optimized for quick viewing in every browser. Firefox 3.5 introduces dynamic color profiles for each picture, meaning that whatever the graphic designer or photographer saw when they were doing their work, you’ll see it on their web page.5. Private browsing mode
The snarky types (i.e. my editor) can call it “Porn Mode,” but this feature, already in a number of competing browsers, has uses beyond the prurient. Beyond obvious situations, like gift buying and sensitive research, logging onto a friend’s browser for a quick email check or bill pay is made a lot more secure if you can get to the private mode. Likewise, anonymizing some of your searches and cookie collection on your own machine isn’t a bad idea, and a private mode can do that too. You don’t need it all the time, but you might be glad it’s available.6. Smarter session restore
What good is it to bring back all the tabs you just lost to a crash if the tab that brought everything down comes back too? Firefox’s developers took a cue from the users and turned the session restore feature into more of a crash recovery tool, allowing users to select which tabs should come back. If you don’t know who’s the culprit, here’s a hint: It’s probably the one with Flash on it.7. Keyword AwesomeBar filters
Firefox 3’s AwesomeBar/address bar offers a speedy list of suggestions to complete whatever you’re typing. That’s great, but that list comes from your page history, bookmarks, and tags, and can be matched by URL or name, leaving some results almost uselessly cluttered. This gets fixed with special character filters in the next Firefox. Restrict a search by typing “life *” for just your bookmarks with the words “life” in them, or just your tagged “lh” items with “lh +”. Anything that really makes getting back to importantly web destinations quickly is a welcome upgrade.8. Tab tearing

Google Chrome (Update: And Safari, as our readers note) somewhat stole the thunder out from under this feature, but it’s still a nice one: Grab a tab and drag it out a bit to create a new browser window from it. Drag windows into tabs again, and open any tab in a new window from the right-click menu, if clicking and dragging isn’t your style.
9. Forget this site
Tools like Private Browsing Modes and history wipers are good for what they do, but sometimes it would be great to have just one site wiped off your history—either because it’s hogging your quick address bar results, or because you’d rather your coworker be unaware of your workday LOLcat browsing. Firefox 3.5’s history browser offers a convenient “Forget this site” option, erasing your browser’s memory of particular domains. It doesn’t cover subdomains, and your network traffic and Flash memory would still hold some details, but it’s a handy tweak however you cut it.10. Undo closed window
If you accidentally close a tab you’d meant to keep open, Firefox 3, at least through extensions like Tab Mix Plus, can bring it back. Update: To clarify, Firefox can resurrect closed tabs without Tab Mix Plus (just hit Ctrl+Shift+T, for example); the extension simply adds more fine-grained control. If you accidentally kill a separate window full of tabs, though, you’ve been pretty much out of luck. Firefox 3.5 implements a restore feature for both tabs and windows from the History menu, which would (hopefully) also restore any text you’ve typed into them.