Jan 062008
 

Dynamic images (as I call them) are images that change depending on a condition.
A regular image URL is something like:
#1

<img src="http://www.papaface.com/blog/wp-content/themes/papaface/images/beer.png" />
 

However a Dynamic Image's URL could be something like:
#2

<img src="http://www.papaface.com/blog/somephpfile.php" />
 

Notice the difference?
Example 1's URL is actually an image file, however example 2's URL is actually a PHP file producing a dynamic image in this case.

These dynamic images are useful if you want to change the image produced at any point.

Lets say we are providing a link checking service and I want to offer the visitors the ability to put an image on their site once they've used the link checking service. The image will change to green when the link is valid, and red when it is not.

<img src="http://www.papaface.com/blog/resources/dynamicimage/example.php?id=22451" />
 

Now every time the image is loaded the script can actually look for link id "22451" in a database. It can then check the image for validity and produce a green or red image like so:

This is the code that would allow you to do this:

<?php  
       
        $linkid = $_GET['id']; //this is the link id that the script needs to look for in the database
       
        //you would open a mysql connection here
       
        $get = @mysql_query("SELECT `link` FROM `tbllinks` WHERE `linkid`='".mysql_real_escape_string($linkid)."'"); //@ suppresses the error message (this is usually a bad coding practice, but in this case we do not want anything other than an image displayed to the user.

        list($url) = mysql_fetch_array($get);
        /*The code below checks the link. If it is a valid and working link it will return a 200 code.*/
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_NOBODY, true);
        curl_setopt($ch, CURLOPT_HEADER, true);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true );
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_exec($ch);
        $info = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);
        if      ($info == "200")
                $colour = "green";   //link is valid
        else
                $colour = "red"; //link is NOT valid
        }

    //code above decided if it should be green or red and produced $colour
   
        header("Content-type: image/jpg");
        $im     = imagecreatefromjpeg($colour.".jpg"); //tells the script what image to source locally (green.jpg/red.jpg are actual images in the directory)
        $orange = imagecolorallocate($im, 220, 210, 60);
        $px     = (imagesx($im) - 7.5 * strlen($string)) / 2;
        imagestring($im, 3, $px, 9, $string, $orange);
        imagepng($im);
        imagedestroy($im);

?>
 

And that is a way of making a dynamic image. I have provided a relatively basic example of how to use dynamic images, I hope it was interesting :)

Feel free to ask me any questions!

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Jan 022008
 

I'm in the coding mood today :) .
I cannot count how many times I've been asked to code a UBER simple banner rotator script.
These things are so simple, but if you don't know PHP it can be difficult to understand.

The script below has two variables:

$links = array(
"http://www.google.com",
"http://www.msn.com",
"http://forums.digitalpoint.com"
);
//add a new link for the banner to a new line in the same format as above
 

and:

$images = array(
"http://www.google.co.uk/intl/en_uk/images/logo.gif",
"http://stc.msn.com/br/hp/en-us/css/35/decoration/msn_b.gif",
"http://forums.digitalpoint.com/images/misc/dps_logo.gif"
);
//add a new image link for the banner to a new line in the same format as above
 

As you can see they match up. The first line for the $links variable is for a google image, the second is for a msn image etc.
Here is the full code:

<?php
session_start();

$links = array(
"http://www.google.com",
"http://www.msn.com",
"http://forums.digitalpoint.com"
);
//add a new link for the banner to a new line in the same format as above

$images = array(
"http://www.google.co.uk/intl/en_uk/images/logo.gif",
"http://stc.msn.com/br/hp/en-us/css/35/decoration/msn_b.gif",
"http://forums.digitalpoint.com/images/misc/dps_logo.gif"
);
//add a new image link for the banner to a new line in the same format as above
//-------- DO NOT EDIT BELOW THIS LINE----------
$count = count($links) -1;

$randnum = mt_rand(0,$count);

if      ($randnum == $_SESSION['randnum'])
        {
        $randnum = mt_rand(0,$count);
        }
$_SESSION['randnum'] = $randnum;
echo '<a href="'.$links[$randnum].'"><img style="border:none" src="'.$images[$randnum].'" /></a>';

?>
 

The code has been constructed so that the likelihood of getting the same banner displayed twice is greatly reduced.

Comment here if you like the script, or have any questions :D

You can see an example of the script running here.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Nov 302007
 

Updated code: http://www.papaface.com/blog/2010/03/07/simple-php-page-protector/
Have you ever wanted to protect a PHP page to prevent people from viewing sensitive information?
Well I haven't but that doesn't stop me showing you how to do it if you ever need to :D .
The code below is extremely simple indeed. Anyone with a basic PHP understanding will see how simple it is.

All you have to do is paste the code below to the top of your PHP page and change these values:

$pass = "YOUR PASSWORD HERE";
$user = "YOUR USERNAME HERE";

Here is the code that I wrote, enjoy.

<?php
        session_start(); //initiates the sessions
        if      ($_POST['submit'])//checks to make sure the login form has been submitted
        {
        $pass = "YOUR PASSWORD HERE";
        $user = "YOUR USERNAME HERE";
        if      ($_POST['pass'] == $pass && $_POST['user'] == $user)//checks if the password submitted by the user matches the password stored in the $pass variable
        {
        $_SESSION['access']     = 1;//if login is successful create a session that can be authenticated
        header("Location: " . $_SERVER['PHP_SELF']);//reload the page. The page will now not load the login form (see the first if condition)
        }
        else// if password is incorrect reload the login form
        {
        header("Location: " . $_SERVER['PHP_SELF']);
        }
        }
        else if (!$_SESSION['access'])//if the "access" session is not accessible show the form (not logged in)
        {?>
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <table align="center" cellpadding="3" cellspacing="3">
        <tr>
        <td bgcolor="#F7F7F7">Username:</td>
        <td bgcolor="#F7F7F7"> <input name="user" type="text" /></td>
        </tr>
        <tr>
        <td bgcolor="#F7F7F7">Password</td>
        <td bgcolor="#F7F7F7"><input name="pass" type="text" /></td>
        </tr>
        <tr>
        <td colspan="2" bgcolor="#F7F7F7"><div align="center">
        <input name="submit" type="submit" value="Login">
        </div></td>
        </tr>
        </table>
        </form>
        <?php
        exit;
        }
        ?>
 

What is interesting about this code is that you don't need to keep logging in everytime you return to the PHP page. It stores your valid login session :) .

Feel free to post a comment about the simple script, or indeed ways to improve it.

You may test the script here
Username: username
Password: pass

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Nov 182007
 

XHTML/CSS

Here are my notes that I use when coding a valid XHTML/CSS page. If you see any mistakes let me know :)

Fundamentals

• Must have:

<?xml version="1.0" encoding="iso-8859-1" ?>

At the top followed by:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">

• All tags must be in lowercase.

• All tags (where applicable) must have ending tags
e.g
<p> must end with </p>

However tags like:
<br /> only have to use the short hand version as they do not have content to display in the tags.

• Loading the stylesheet:

<link rel="stylesheet" type="text/css" href="link.css">

Lists

UnOrdered Lists (bullets etc):
<ul> </ul>

To list data this use:
<li> </li>

To change the bullet type add:
Regular bullet: type="disc"
Circle bullet: type="circle"
Square bullet: type="square"

Ordered Lists (numbers etc):
<ol> </ol>

To list data this uses
<li> </li>

To change the type add:
Roman Numerals: type="i" or type="I"
Letters: type="a" or type="A"
Numbers Numerals: type="1"

Quotation lists:
<dl> </dl>

To list the data they use
<dt> </dt> for the term .

<dd> </dd> for the definition.

Anchors

Tag: <a> </a>

To use for lists include attribute:
href="link.com"

alt = use alt attribute to show alternate text

title = use title attribute to display tooltip

Fragments using <a> </a>

<a href="top"></a>

To go to the top anchor, a link would be used:

<a href="#top">top</a>

Image properties

Use the <img /> tag

To include an image use src="linktoimage.gif"

Always have the width, height and alt of the image included in the tag:

<img src="linktoimage.gif" width="20" height="22" alt="someimage" />

To align an image use the align attribute:

<img src="linktoimage.gif" width="20" height="22" alt="someimage" align="left" />

vspace – creates a margin around the image at the top and bottom e.g vspace="10"

hspace – creates a margin around the image on the left and right sides e.g hspace="10"

CSS

• Selector
A selector is the tag, class or ID you want to apply the style to

• Braces
{ and } encompass the style information

• Seperator
; is used after each style piece

• Colon
A colon is used instead of =
e.g

font-family: verdana;

Example in separate stylesheet:

 
body
  {
  font-family: verdana;
  color: #000000;
  }
  p
  {
  color: #cccfff;
  }

Example in xhtml file:

<style type="text/css">
body<
{
font-family: verdana;
color: #000000;
}
p
{
color: #cccfff;
}
</style>

To apply a class to a specific part use:
<span class="first">sample text</span>

The first class would be defined in the CSS like this:

<style type="text/css">
body
{
font-family: verdana;
color: #000000;
}
 
  p
  {
  color: #cccfff;
  }
  .first
  {
  margin: 10px;
  }
</style>

Tables

Tables should be used to present data, and not used to hold websites!

Tables are constructed using the basic code below:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>

<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
</table>

th – table header (used instead of td to bold the header automatically.

tr – table row

td – a cell (can be used in place of th)

colspan="2" – this is used to merge two cells together
e.g

<table>
<tr>
<th>Hello</th>
<th>Hello</th>
<th>Hello</th&gt
</tr>
<tr>
<td>Row 1</td>
<td colspan="2">Row 2 and 3</td>
</tr>
</table>


[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]