PHP Dynamic Signatures using the GD Module

    [/tab]After much scowering on the internet to find a suitable tutorial on this subject, I came up empty-handed. So I was forced to learn it on my own through trial & error. And since I had discovered a lack of tutorials on this subject, I dediced to write one!


Working Example:




Abstract:
[tab]Using the GD Module of PHP allows a developer to build custom Images with Dynamic Content. Such content could be the Requesting Users IP Address, Web-Browser Type, Operating System, even the number of times the user has seen the Image!

    [/tab]Luckily, Trap17 Supports the GD Module with PHP, so those who are hosted here on Trap17 can take full advantage of this tutorial! (Hint: Get Hosted With Trap17!)





Intended Audience:
Intermediate to Advanced PHP Web-Application Designers/Developers.

Assumed knowledge:
-- PHP Basics/Arrays
-- OOP Concepts such as Classes
-- MySQL Databases with PHP
-- MIME-Type Headers


Theory:
[tab]First, we will start with a simple Image Background that has some appeal (It is recommended that you create a simple Image Template in your favorite Image Editing software, like Photoshop) and remember to leave some space for the dynamic content to be added.

    [/tab]After that, we simply access the image using PHPs GD Module, and write some dynamic content to it. We then output the image as a GIF file format and set the MIME-Type Content Headers to reflect a GIF image.

[tab]To add to the images dynamic content, we will track the number of times an individual user requests the image, and store that into a MySQL Database. For this we will also require a database connection to MySQL.

    [/tab]On to the fun stuff!


NOTE: You can Download a complete ZIP file containing all files used in this tutorial as well as the suggested directory structure, at the end of this tutorial!


Implementation:

For this tutorial, I will use the following file structure (all files will be covered in this tutorial):


-- .htaccess
-- install.php
-- sig_syswiz.php (NOTE: Will be renamed to sig_syswiz.gif later in tutorial)
-- images
[tab]|--- systemwisdom.gif
-- fonts
    [/tab]|--- arial.ttf
-- dynasig
[tab]|--- dynasig.inc.php


The Bold entries are Folders, and the Italic entries are Files.
Now, imagine those are the real file and folder names, as I will use those names in examples for the rest of this tutorial.



    [/tab]We will start off by making (or selecting) an image to use as our Image Template, for this tutorial I will use the image below:

Image File: images/systemwisdom.gif


[tab]You should copy your image to your web-server using the same directory structure as listed above (you could place it anywhere you want really, just be sure your PHP code can access it). Now that you know what the Image Template looks like, you can look at my Example Signature to compare it to the finished result.


    [/tab]Next we will use a True-Type Font for writing our Dynamic Content to the image. This gives us more flexibility with our fonts than what PHP provides for us. For this tutorial I am using a simple Arial Type font, and you can find this font in your Windows\Fonts directory (or on the Internet) or you could use any other True-Type Font that you want to use.

[tab]The font file should be added to your web-server using the same directory structure as listed above (fonts/arial.ttf).


    [/tab]Next we will get into the Bulk of the PHP code to achieve our Dynamic Signature. This code will be a Class called 'DynaSig' in the dynasig/dynasig.inc.php file and could be re-used for other signatures as well.
Note: Although the DynaSig Class file would require minor modifications to work with other signatures (mainly text locations), it could easily be enhanced to be more dynamic requiring no changes at all to the DynaSig Class file. That is an exercise I will leave up to you!

[tab]Now, I will begin by showing you the completed class file, and I will then explain each part of it as we go along in this tutorial.
Note: Although this class will work, it only provides basic functionality and much could be added to it, but we will keep it simple for this tutorial.

The DynaSig Class file would look like the following:

DynaSig Class file: dynasig/dynasig.inc.php


    [/tab]First of all, you will see a Class Declaration named 'DynaSig' and within it, are a bunch of Member Variables. They are all self-explanitory (though I will explain them eventually anyway), as is the Constructor which sets their respective default values. Now assuming you understand Object-Oriented Programming, I trust you understand thus far.
[tab]Moving on, you will notice 4 Set Functions which are used to setup the Format of the Dynamic Signature Image. These are used directly after Creating a DynaSig Object to set the Image Template file, the True-Type Font file, the Font Color and the Font Size respectively. You will notice that the SetImageFile() and SetFontFile() functions automatically add the directory and the extension to the parameter passed in. This is a personal preferrence which simply enforces the file location and type. You may also notice that we are using JPEG type images as our Image Template. This is important due to the nature of JPEG and GIF Images, as we will discuss later in this tutorial.

    [/tab]Next is the AddQuote() function, which is the same as the Set functions from above, the only difference is that this function accepts 2 parameters (namely the Quote and Author) and adds their values to arrays. These arrays will be used to draw out a random quote later in this tutorial and write it to the Dynamic Signature Image.

[tab]Now since those were all very basic functions, I will not explain them as thuroughly as I will the next 2:

    [/tab]The Create() function, which is the last of our 'Public Functions' and the last one we will call when using our DynaSig Object, will output a Dynamic GIF Image to the requesting users browser.
[tab]From here, the Create() function will call all of the other 'Private Functions' used in the class. But the first thing our Create() function must do, is open an Image Handle to the Image Template file we will be using. This handle is a Copy of the Image Template and we can then alter it without altering the original Image Template File. We open this image handle using the imagecreatefromjpeg() function from the GD Module in PHP.
    [/tab]Now the reason why we open the Image Template as a JPEG is because GIF Images store their color indexes internally. If you open a GIF image of solid black, for example, you would not be able to add additional colors, since the GIF file only has a color index of Solid Black. Basically, the more colors in the GIF file then the more colors you can use with the GD module. Alternatively, JPEG files do not have this limitation, therefore it is more flexible to open your Image as a JPEG to get access to more colors. In the end however, we will still be outputting a GIF (generated dynamically) as they tend to be smaller in size.

[tab]Once we have the Image Handle opened, we can then determine the Images Size using the imagesx() and imagesx() functions. This will give us the Width and Height of our image (this could be used for dynamically positioning text).

    [/tab]After that, we determine the users IP Address using the built-in PHP Global Server Variable $_SERVER['REMOTE_ADDR'] which gives us a string containing the requesting users IP address! Brilliant!
[tab]Then we can query the requesting users HTTP Agent string contained in yet another PHP Global Server Variable called $_SERVER['HTTP_USER_AGENT'] which contains both the Operating System and Browser details. We simply match the patterns using Regular Expressions against some known types, and if a specified pattern exists, we know the users HTTP Agent! This can be seen in the GetOperatingSystem() and GetBrowser() functions at the bottom of the Class File. Since both of these functions are relatively simplistic I will not explain them in great detail, though feel free to ask questions if any of it confuses you.


    [/tab]Next we Query our Database to find the requesting users View Count, or in other words, how many times the user has accessed out signature image! This is done in the CountViews() function and I will describe it in greater detail later. For now, know that it returns an integer containing the requesting users View Count.


[tab]After all of that is done, all of our Information Gathering is complete, so now we will need to write that information to the image. This is accomplished by the WriteTTF() function which first allocates the correct Color (as set by the SetFontColor() function) for use in the Image, and then writes the Information to the Image according to the Font Styles defined by the Set functions. The most important part of this function are the first 2 parameters which specify the X and Y locations of where to write the text to the Image.

    [/tab]Next we will write our random quote to the Image. By adding quotes to our class using the AddQuote() function, we essentially build an array of Quotes. To choose one of them, we simply generate a random number between the Upper and Lower Bounds of the Array. This is accomplished with the PHP rand() and count() functions. With our random number we use it to index our array of quotes to write one of them to the Image. This process is pretty straight-forward.

[tab]Finally, the last part of the Create() function is to output the image to the requesting users browser and then release the Image Handle from memory. This is accomplished by calling imagegif() and imagedestroy() respectively.
One thing to note though, is that PHP will now output an Image instead of a Web-Page. Since our browser sent a request for a PHP page, it is expecting a Web-Page in return, not just an Image. We will have to modify the MIME-Type Headers to reflect the new content-type later on, before we use this class and call its associated Create() function. That will be done in our next file.


    [/tab]After the Create() function we have the CountViews() function, which is the last function we will need to discuss in our DynaSig Class file. As mentioned earlier, this function is used to Query the Database for the requesting user to count the number of times they have viewed our Dynamic Signature Image.
[tab]The first thing you'll notice, is that it connects to a Database. Your Access Credentials for Your DB MUST be supplied here (unless you change the code a bit). Next it searches the database for a user who matches the requesting users IP, OS and Browser. All 3 are used in the search to lessen the likely-hood of 2 users joining with the exact same data, and thus preventing user A to view user B's view count.
If the user IS found in the database, then we simply store the users view count in an interger variable, add 1 to it, and then update the database with the new view count.
Otherwise, if the user IS NOT found, then we set the users view count to 1 and insert a new record in the database for the current user.
That pretty much sums up the CountViews() function, and gives us the current users view count.


    [/tab]Now with that file done, and out of the way, you can place it on your web-server in the suggested directory mentioned at the beginning of this tutorial, and we will link to that file in the next file we discuss; the sig_syswiz.php file, which creates an object of our DynaSig Class, supplies the Image Template File and the Font Styles, and finally creates the image for output. You could have several of these files all pointing to different Image Templates, setting differnet Font Styles and still use the same DynaSig Class file.

[tab]Again, I will first show you the completed file and then we will walk through it together:

Main file: sig_syswiz.php


    [/tab]The first thing I hope you notice, is the size of this file -- it is much smaller than the DynaSig Class File! Yay!
[tab]Next, you will notice that the Content-Type is set to GIF. Remember, when accessing this file, you are accessing a PHP file which by default outputs HTML as the content type. Since we are actually outputting a GIF Image through this PHP code, we need to change the content-type before-hand. Also, the image is set to expire immediately forcing it to not be cached, and instead re-processed with each request.
    [/tab]After that, we can begin creating our Dynamic Image! We first include our DynaSig Class file for use within this script, and instatiate an object of our DynaSig Class. Next we tell it the filename of our Image Template file, followed by the True-Type Font file and the respective Font Styles (Color/Size). Next we can add as many Custom Quotes as we want using the AddQuote() function created earlier, and finally, we Create and Output the Dynamic Signature Image by calling the Create() function!

[tab]That's almost all there is to it! Our Dynamic Signature Image is nearly ready to be used! But we just have one more thing to do to make it work! We have to create the database, which is dont with the following PHP script:

Install file: install.php


    [/tab]The install file requires little explanation, as it merely creates the Required Database table for tracking the user View Counts. Again, you MUST point this file to Your Database using Your Database Access Credentials. This file should only be run once before testing the Signature Image, and after it has been run and your database is installed, you can safely delete this file off of your web-server.


[tab]Now we are done! (Or are we?)
    [/tab]You could now access your Dynamic Signature by typing the address into you URL bar of your browser, and you will see the Dynamic Image (Ex: www.mydomain.com/sig_syswiz.php), but that will not work in a Forum for an Image Tag ([img]), because most forums do not allow you to post images with an extension of .PHP (or any extension other than those used for online images, like gif, jpg, png or bmp). So in order to make this work for online forums, we will have to trick the forums by Renaming our sig_syswiz.php file to sig_syswiz.gif and then telling PHP to parse GIF files as PHP files in our DynaSig directory. This last step is as easy as renaming the above mentioned file, and adding the following .htaccess file to the same directory as the sig_syswiz.gif file:

HT Access file: .htaccess



[tab]Now you will be able to use your new Dynamic Signature in Online Forums! Yay!


Putting it all together:
    [/tab]If you now take all of the code samples from above and organize them according to the Suggested File Structure mentioned at the beginning of this tutorial, you will have a working Dynamic Signature for use in Forums and the like!
Remember: You will still have to point to Your Database using Your Database Credentials in the DynaSig Class file as well as in the Install File which builds the appropriate Database Table!


Working Example:



Conclusion:

[tab]Well, I hope that you have learned something useful from this tutorial, and maybe even use such a Signature in online forums!

    [/tab]Please feel free to comment on this tutorial, if you noticed anything wrong or out of place in this tutorial, please don't hesitate to mention it!

[tab]I am interested in all feedback really, I'm curious about what you think of my writing, tutorial, methods used, code, effectiveness, layout, etc.. Thanks!


Download Complete ZIP Package of Tutorial

Edit: Added a download link

 

 

 

Reply

Excellent tutorial as always.

I'll be sure to try this one since I have a server that supports PHP on hand - trap17.

Reply

I had a go at making a dynamic sig before and couldn't find a secent, complete tutorial. Thanks very much. I will certainly try this when I have time!

Reply

Cool tutorial.
I didn't know php could "see" which operating system a visitor uses.

One other thing: do you have any idea on how to see the local IP of pc's behind a router or firewall?

Reply

excellent tutorial.... 10/10 rate it!

Reply

Cool ! But it's rather long for a small result for me. I think I will work on this tutor when I have a long holiday. Just kiddin'.

Btw, maybe it will look nice on my sig.

//I hope\\

Reply

Exellent lots of details (what is always great)

I was starting to learn php but i had to stop as soon as i get a piece of space that support php and mysql ill start again and try this.

Reply

That's a really handy tutorial there, Rob!

btw,
I originally got a "cannot open file or stream" error,
so changed the image source file format from GIF to JPG in order to get it to work.

Reply

Though I can't see your Working Examples it's an excellent tutorial. I alawys tought about implementing such dynamic images in my sites or the pictures linking to it, but I never had the time or tutorials to do it.
Now that I've got a tutorial, I just need some time

Reply

sorry yo say that i cannot see your working example and i cannot dowload your complete tutoral, seems as though your site is down or you have moved the files else where, would love to download and see the working example and give this one a little wizz to see if its any good!! great postother wise extremely informative and very detailed, if i get porblems i will post here and i look foward to seeing some more brilliant tutorials in the future from you hopefully, thanks so much for sharing and a great addition to the trap17 family and trap 17 community, thanks

Reply