Looks like Google are at it again with another April Fools prank; do a search (any search) and take a look at the where it should say how long the search took to complete, in this case “2.00 shakes of a lambs tail”
Google April Fool 2010
Anyway, after a solid day coding and mashing up the HTML, here is the finished product - http://pyr.nu. Who knows, it might take off! Anyway, if I start to get traffic to the site and there is frequent use I’ll add a ‘Pro Members’ so they can track their links too
]]>Creating a Captcha in JavaScript is a relatively simple task; it needs to decide a random 5-digit code, display the code as a distorted image, and then prevent the form from being submitted until the correct code has been entered.
First, I’ll tell you how to implement into your forms just in case you’re here for a solution rather than to find out the code.
The JavaScript file will need to be called in the <head></head> section of your page as so…
<script src="scripts/jscaptcha.js" type="text/javascript"></script>
Once you have done that, write your form in HTML as you normally would, and then where you want jsCaptcha to appear on your form, add…
<script type="text/javascript">jscaptcha()</script>
This one line of code calls the images and then displays a text box for the user to enter the answer. Once you have done that, in the code for the Submit button, you will need to have an onClick event happen to test what the user has typed in, as so…
<input type="submit" onClick="return jscaptchaSubmit(this.form)" value="Submit">
Now open up jscaptcha.js in your editor and edit line 13 from http://www.shaungill.co.uk/scripts/jscaptcha/ to http://www.yoursite.co.uk/ - this bit isn’t important as it’s only used for calling the images, but if I ever change my site or just leave it to expire you’ll lose your images!
Job Done - you can download the script here in a zip package
The code…
/*
JavaScript Captcha Script
- 2009 Shaun Gill -
http://www.landingnet.co.uk
http://www.shaungill.co.uk
*/
// Set Variables
var site = 'http://www.shaungill.co.uk/scripts/jscaptcha/'; // this needs to be the 'root' of the site - although keeping that link will still work
var first = (Math.floor(Math.random()*10))+'';
var second = (Math.floor(Math.random()*10))+'';
var third = (Math.floor(Math.random()*10))+'';
var fourth = (Math.floor(Math.random()*10))+'';
var fith = (Math.floor(Math.random()*10))+'';
var captcha = (first + second + third + fourth + fith);
function jscaptcha()
{
// Display the Captcha Images
document.write("<label> </label>");
document.write("<div id=\"jscaptcha\" style=\"border: 1px solid #f90; width: 150px;\">");
document.write("<img src=\"" + site + "images/" + first + ".gif\" alt=\"\">");
document.write("<img src=\"" + site + "images/" + second + ".gif\" alt=\"\">");
document.write("<img src=\"" + site + "images/" + third + ".gif\" alt=\"\">");
document.write("<img src=\"" + site + "images/" + fourth + ".gif\" alt=\"\">");
document.write("<img src=\"" + site + "images/" + fith + ".gif\" alt=\"\">");
document.write("</div>");
// Display the Input Box
document.write("<label>Enter Numbers from the Image</label>");
document.write("<input type=\"text\" name=\"jscaptchaInput\">");
}
function jscaptchaSubmit(frm)
{
if(frm.jscaptchaInput.value != captcha)
{
alert("Please double check the numbers you entered; I\'m afraid they don\'t quite match");
valid = false;
}
else
{
valid = true;
}
return valid;
}
The variables:
- site - this is the root address of your site
- first - fith - these are the numbers that make up the 5-digit code
- captcha - this is the final 5-digit code that gets displayed on the form
function jscaptcha()
- this is the section that displays the images and puts a border around them all, and then displays the input text box
function jscaptchaSubmit(frm)
- if the what the user has entered doesn’t (!=) match the code, display an error message and halt the form submission (valid = false)
- otherwise all is good (valid = true)
- report the results back to the form (return valid) and halt submission if is false
<ul>
<?php
$sql = mysql_query("SELECT * FROM form_test");
while ($row = mysql_fetch_row($sql)) {
echo "<li>$row[0] $row[1]</li>";
}
?>
</ul>
This has now produced a list of all the entrys that are currently held within the database. I would now like to build that list into a menu that will take the user to an individual page to display the content on it’s own. In retrospect, had I planned to do this from the start, I would have added another column in the table called ‘title’ and used that for the menu. However, I didn’t so the row ID will have to do and just imagine it’s the title!!
<ul>
<?php
$sql = mysql_query("SELECT * FROM form_test");
while ($row = mysql_fetch_row($sql)) {
echo "<li><a href=\"results.php?id=$row[0]\">$row[0]</li>";
}
?>
</ul>
I now have a list on the screen with just the ID of the row going from 1 to 6, each as a hyperlink pointing at ‘results.php?id=’ and the id number. Fantastic! We’re getting somewhere! To build results.php, I’m going to use the $_GET[id] string, but before I do that I’m going to put it into it’s own variable of $id should I need to use it again on the page.
<?php
$id = $_GET[id];
$sql = mysql_query("SELECT * FROM form_test WHERE id=$id");
while ($row = mysql_fetch_row($sql)) {
echo "<h1>$id</h1><p>$row[1]</p>";
}
?>
Excellent! Now to work out what we’re going to do with this new knowledge…
]]>index.php
<body> <h1>Hello World!!</h1> <form action="post.php" method="post"> <input type="text" name="post_string"> <input type="submit" value="Post"> </form> </body> </html>
post.php
<body>
<?php
$sql="INSERT INTO form_test (text)
VALUES
('$_POST[post_string]')";
if (!mysql_query($sql,$conn))
{
die('Error: ' . mysql_error());
}
echo "1 record added";
mysql_close($conn)
?>
Your comment of "<?php echo $_POST["post_string"]; ?>" has been entered into the database!
</body>
</html>
The index.php file is basically the worlds simplest form with one text box with a name of ‘post_string’, and the form then posts to ‘post.php’.
Post.php is where all the action takes place.
- $sql=”INSERT INTO form_test (text) - this is building the query string which will put the data we enter from the form into the database
- (’$_POST[post_string]‘)”; - takes the data from the form field ‘post_string’ and builds it into the query
- if (!mysql_query($sql,$conn)) - now, I’ve been doing my homework and the exclamation mark ! is a php negation operator and basically flips a false value to a true value and vise versa. The mysql_query($sql,$conn) is trying to make a connection to the database, and if it fails will return a value of false, so with the exclamation mark it reads “If running the query fails, then…”
- die(’Error: ‘ . mysql_error()); - “… stop the script and give the error message, otherwise…”
- echo “1 record added”; - “… tell the nice people that 1 record has been added”
- mysql_close($conn) - closes the database connection
- Your comment of “<?php echo $_POST["post_string"]; ?>” has been entered into the database! - I added this line for my own peace of mind, I wanted visual confirmation that the text that I had written in the form was actually in the $_POST['post_string'] array.
Thats me done for the night now, next time I’ll have a go at pulling the data out of the database and display it on the page.
Since using this script (back in July 2008) none of my customers have complained about receiving spam from having their email address posted on their site…
- Copy and paste the code below between <script> tags in the head of your document, or download the mail2 script
- If you need it to parse an email address other than .co.uk you’ll need to edit line 12
- Where you want the email address to appear, dump in <script type=”text/javascript”>mail2(”joebloggs”,”hotmail”)</script> - this will produce joebloggs@hotmail.co.uk
- Let me know how you get on
/*
JavaScript Mail2 Script
- 2009 Shaun Gill -
http://www.shaungill.co.uk
*/
var d = "mailto:"
var e = "@"
var f = ".co.uk"
function mail2(a,b)
{
document.write('<a href="'+d+a+e+b+f+'">'+a+e+b+f+'</a>');
}
]]>The first thing I did was to create a database in phpmyadmin called test, with a table called form_test with two fields in that; id, and text. The id will auto increment with each new value and the text field is just that - a free text field. SQL to create this is:
CREATE TABLE form_test ( id int(11) NOT NULL auto_increment, `text` text collate latin1_general_ci NOT NULL, PRIMARY KEY (id) )
So now we have a database to play with, how do I connect to it using php?? Following the instructions at php mysql tutorial I created a file called db_config.php as follows:
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'test';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);
?>
Going through the above,
- $dbhost - this is where your database is stored. Some hosting companies will either give you the ip address of the database, or it could just simply be ‘localhost’ as it is with mine (I’m doing this on my local machine).
- $dbuser - the username of the database. When using on a live site, never use the username of ‘root’ as this has full privelages, create a new username.
- $dbpass - the password for your chosen username
- $dbname - the name of the database you created.
Now I have the database connection all set up and raring to go, I want to see if I can create a query to put some data into the table. I created a blank HTML page, included the above file in the first line, and then wrote an INSET query…
<?php
include 'db_config.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
PHP Form Test
</title>
<link rel="stylesheet" type="text/css" href="styles/screen.css">
</head>
<body>
<h1>Hello World!!</h1>
<?php
mysql_query ("INSERT INTO form_test (text) VALUES ('If this works this will be the first entry into the database!!')");
?>
</body>
</html>
I had no idea if this was going to work as I’ve never written a page that connects to a database before! So here goes…
It worked!! The image on the left is a screen grab of phpMyAdmin before I ran the above page, and the image on the left is after.
Fine, so thats great but it’s all well and good having the data being entered into the database from within the php code itself, but it’s not exactly the ideal solution to a CMS - we’re going to need a form to enter the data into the database. For now, I’ll leave that until the next post…
]]>It’ll need…
- An admin login area
- Ability to add/edit/remove pages
- Full WYSIWYG editor
- Ability to upload images
- Extensible - additional features to be installed at a later date?
- Ability to install new templates easily from the admin system
That’s something to start off with, but at a later date once all of the above has been ticked off, I would like to be able to create extensions for it (such as a blog, poll etc) which can be installed from the admin side (such as what you can do with Joomla). I have no idea if that’s going to be an easy thing to implement or not, but we’ll cross tha bridge when I come to it!!
Right, let’s start to learn some code!
]]>So here we go; following the tutorial from W3Schools - from not knowing the difference between $_GET and $_POST, as ambitious as it may be my goal is to create a fully working Content Management System…
]]>