A friend of mine is working on his site and ran into an evil spamming situation! Viagra ads have been popping up (pun intended) in his comments – how lovely! So I have decided to write a blog post about how to write and implement a captcha using PHP for anyone out there that is having the same problem with saucy spammers.
There are lots of different kinds of captcha out there, I will be showing you the most common type with the numbers and letters that the user has to type in correctly in order to post their comments.
Our first step is to make a captcha.php file.
<?php
// Starts the session and replaces the current session
id with a new one.
session_start();
session_regenerate_id();
// Sets up the details for the captcha – I took
out letters like ‘l’ and ‘o’ because they can look like numbers. We
don’t want to be tricking our users, just making sure they aren’t robots!
I kept the length to 6.
$width=120;
$height=40;
$length=6;
$baselist="abcdefghijkmnpqrstuvwxyz123456789!@#$%^&";
$code="";
$counter="";
// Create the image.
$img=imagecreate($width,$height);
// Adds random lines in the image and colors.
for($i=0;$i<10;$i++)
{
imageline($img,rand(0,$width),rand(0,$height),rand(0,$width),rand(0,$height),
imagecolorallocate($img,rand(150,255),rand(150,255),rand(150,255)));
}
//creates the random list of characters, with a
random font, color, and x and y positions
for($i=0,$x=0;$i<$length; $i++)
{
$randchar=substr($baselist,rand(0,strlen($baselist)-1),1);
$x+=10+rand(0,10);
imagechar($img,rand(3,5),$x,rand(5,20),$randchar,imagecolorallocate($img,rand(0,149),
rand(0,149),rand(0,149)));
$code.=$randchar;
}
// Tells the browser that this is an image.
header('Content-type: image/png');
// Outputs the image
imagepng($img);
// Destroys the image resource to free up memory!
imagedestroy($img);
// Sets the captcha session variable to the random
letters we outputted to the image. We can use this to check to make sure
the user put in the right letters.
$_SESSION['captcha']=$code;
?>
Our second step is to implement this into our site file.
For my example I will put it into the login.php page - first we will look at the html part. We will need a form where people will enter their username & password with a capcha key. I also will have a variable called $status where I can let the user know if they didn’t enter their capcha, username or password correctly. Here is the form:
<h3><?=$status?></h3>
<form id="login" action="<?=basename($_SERVER['PHP_SELF'])?>" method="post">
<p><label for="username" id="username">Username:</label></p>
<p><input type="text" name="username" /></p>
<p><label for="password" id="password">Password:</label></p>
<p><input type="password" name="password" /></p>
//Here's the captcha part – the image src will be our captcha.php page we made.
<p><label for="captcha" id="captcha">Captcha:</label>
<img src="captcha.php" alt="Captcha Image" /></p>
<p><input type="text" name="captcha" /></p>
<p id="buttons"><input type="submit" name="submit" value="Submit" /></p>
</form>
Our third step will be to set up the PHP on this same document login.php page.
This will be at the very top of the html document above the doc type.
<?php
// Checks to see if the global variable $_POST is empty.
If it is, it means the user hasn’t filled out the form yet. Here you can set
your default $status variable. I have mine as an empty string but you can put
‘Enter your username and password’ or something like that.
if(empty($_POST)){
$status="";
}else{
// If the $_POST variable is not empty we will convert
the details from the form into variables that we make. Here we will also make
an MySQL statement that checks the database for the username and id. We also
run an if statement to check that the captcha matches the one we made. If
everything is ok the user will be redirected to the index.php page, if not,
the $status will be updated to let the user know what went wrong.
$username=$_POST['username'];
$password=md5($_POST['password']);
$captcha=($_POST['captcha']);
require('../../../../db.php');
$sql="SELECT id, priv FROM user WHERE username='$username' AND password='$password'";
$result=mysql_query($sql);
$row=mysql_fetch_assoc($result);
$priv=$row['priv'];
if(mysql_num_rows($result)>0){
session_start();
session_regenerate_id();
if($captcha==$_SESSION['captcha']){
$_SESSION['logged_in']=true;
$_SESSION['priv']=$priv;
header('Location: index.php');
}else{
$status="Captcha did not match";
}
}else {
$status="Username and Password did not match";
}
}
?>
So those are the 3 steps to making a captcha! Hopefully that helps anyone out there having a spamming situation on their blogs and sites. Email me if you see anything that doesn’t look right in my code or if you need any part explained more. Good luck!
Recently I did a site for William Martin LNG Executive Recruitment and needed to make sure it ranked high with SEO. I decided to write a blog about all the steps I took to get the site visible.
I've been working more on my Indeed Job Search Air application and was trying to figure out how to display HTML in the text area. The data I was getting from Indeed.com already had basic html tags in the job description and it wasn't being rendered when I put the content in the text area. I saw there was a property called htmlText which solved the problem!
Instead of setting it up like this:
text="{_jobs.jobDescription}"
I used:
htmlText="{_jobs.jobDescription}"
It worked like a charm! Hopefully this will come in handy for someone out there too!
Another new thing I figured out today was that I can add a logo and header graphic to the panel. I figured out that I could set the panel's header height and can use the titleicon property to add the header graphic. Check it out on my work page, it turned out pretty good!
I've been working on styling a Job Search AIR application for my old workplace, R&R Advertising. The two ways I have been styling the components have been with Flash and through the design view in Flex.
I personally like using Flash and importing the skin because it allows more styling options and versatility, but it can get quite intense if you aren't used to styling the different states. So if you need to quickly style elements to get rid of the Flex 'look' I would recommend using the design view, but if you have more time to really design each element I would use Flash and import the skin. This allows you to totally re-style all the elements to get rid of that default Flex look.
A good site to get some ideas and download some source code for Flex skins is Scale Nine they have some really interesting designs for Flex.
Today in class our teacher showed us some very popular websites that use JavaScript. What was TOTALLY shocking was that these sites have major flaws when you turn off your JavaScript! For example:
Nike: Pretty cool site wouldn't you say! Now turn off JavaScript, and BOOM, you can't see anything! Just a lovely blank screen - you can't even get into the site! Makes me want to get off the treadmill and back on my couch! You wont be selling me any tennis shoes today!
Nissan USA: Here's a very clean nice looking site with some stylish drop down menus for their navigation. Great call to action space with a big picture of one of their cars. But lets take a look without JavaScript...ahhh a beautiful blank page...absolutely nada there. Hmmm...i guess i'll buy a Toyota!
Toyota: Maybe not...without JavaScript all your featured content is gone and their nice global navigation is useless.
NBC: A decent site, but once you turn off your JavaScript you can't even use the global navigation!!! Also, the featured content on the homepage disappears! That's going to make some tv watchers pretty mad!
Walmart: Here's a site that has to appeal to ALL audiences from 14 year old boys to 80 year old grandmas. Since it has such a huge audience it also has to be extremely accessible to screen readers etc. BUT, turn off your JavaScript and take a look what happens. Good luck getting through this page screen readers!
It surprised me that these major sites don't check what their sites would look like without JavaScript. Especially since I'm sure these companies paid a lot of money for their web development team to get their sites up. I guess it can teach us web developers to always check our sites to ensure that users who have turned off their JavaScript or CSS can still access our information.
When I get a free couple of minutes I like to check out all the great websites online to get some inspiration. Here are two of my favs:
If you are ever in a bad mood, check it out. Great illustrations, and the color blue just makes me happy!
Holy smokes, I just like using the navigation so I can wiz around the sky!
Here are some sites I use often and find very useful, hopefully you will find some new ones to add to your bookmarks!
iConvert: Here you upload your graphics and they output different sizes for you to use for icons. I have used this site for making icons for different AIR applications. Also when I get a spare minute I like to make icons for my personal folders. Pretty fun and this site makes it super easy!
AJax Loaders: This site lets you quickly create customized Ajax loaders for you sites. It is a very simple site and with a few adjustments you can download your own personalized loader!
Smashing Magazine: I'm sure all webbies out there have this as their numero uno bookmark! But just incase you haven't checked it out, here it is. If you have any question about coding or design, or are just looking for some inspiration, this is the first place you should check!
Regular Expression Library: Like Regular Expressions? Me neither! But they can be very useful and necessary. Here is a site that helps a lot with getting the right expressions you need.
Icon Finder: Need some icons quickly? This is a great site that lets you search icons based on your search term and file size. They also have a great list of complete icon sets that look very very snazzy. Be sure to check if you can use the icons for commercial or personal use, each designer has different requirements. Be nice and link to their sites if you use their designs!
Scale Nine: I have mentioned this site before because it is a great site to get ideas for skinning Flex components. You can get ideas for your own projects or in some cases download the designers art to import into Flex. If you are really into designing for Flex you can also upload your own skins for others to see!
Net Renderer: Here's a great site that will burst all your bubbles on how well you have coded your site for browser compatibility in IE. You know how it goes - you get your site looking beautiful in Firefox and Safari and you tell yourself...ohhh THIS is going to be the time it looks just as good and perfect in IE6. Now paste your URL into the top bar and hit the render button. It takes a couple seconds and just when you are patting yourself on the back for another well-crafted design and flawless coding, you see the image of your site in IE6. Talk about a slap in the face! Thanks IE6+, I remember why I loathe you. Once you have regained your confidence, get back to coding and fix your site for IE6+. Silver lining - at least you are a web developer that checks your site for cross browser compatibility. You are a winner!