Adult URL Shortener
Well, I have to admit I’ve not really been on form in updating this blog! On the plus side, the reason is because I’ve been locked in a cave learning to code in PHP. I’ve been playing around with bit.ly lately and noticed in their Terms of Service that you can’t use it for porn links. Had a quick look around on Google and can’t seem to find anyone else who does, so I thought ’sod it’ and gave it a go myself - can’t be that hard 
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
Javascript Captcha
Today I was tasked with creating a Captcha for a company as none of the off the shelf solutions out there really fitted the bill as they were pretty ugly and the colours couldn’t really be customised to the brand of the site.
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
Again, download the script here in a zip package
A working example can be found here
Selecting Data from the Database
Now I have some data in my database (I added a few more lines using the form), I want to display them on the page. Below the form code in index.php, I added the below…
<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…
Adding Data to the Database with PHP Form
Following on from my last post http://www.shaungill.co.uk/2009/03/first-things-first-connecting-to-the-database/ I’ve got round to writing the form to enter data into the MySql database using a really simple form. I’ll post the code first and then make a few comments about it (the code still uses the db_config.php file I wrote last time)…
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.
Spambots and Email Links
I got a sidetracked a couple of months ago and thought about how the usual email link <a href=”mailto: gets targeted so much by spam bots. To try and get around this, the fact that very few spam bots will be able to parse the javascript within a HTML document lead me to write a really simple script. I can’t imagine this will eliminate all spam from posting an email address on a site, but hopefully it should reduce it significantly.
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>');
}
First things First; Connecting to the Database
Ok, now we have written out the rough plan, I need to start learning PHP in order to carry it out. The first thing I intend to do to practice is to create a form with a text input to get data into the database and another page to display that data.
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…
Planning it out…
Ok, I know I’m probably running before I can walk, but I thought it best to outline what the project needs to have in order to function. A bit crazy maybe as I’m planning it all out before I can even write any PHP code, but at least this way I know what I need to learn in order to acheive it!
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!
echo “Hello world!”
Today I begin my journey into the realms of PHP programming. This blog is about me, a complete beginner in the language taking the first steps into conquering it. I would say that I’m pretty competent with HTML, CSS and Javascript, but now within work there is more of a need for another programmer to try and ease the stress of the workload we currently have.
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…