Before you start

About this tutorial

A picture is worth a thousand words, especially when it is used to illustrate business, financial, or scientific data. It is worth even more if it can be generated on demand, so it can serve the latest information in the visual format. If your job requires writing such applications in PHP, then this tutorial will teach you how to generate bitmap images using PHP and the gd library.

Objectives

By the end of this tutorial, you will be able to start writing your own scripts to generate bitmap images using PHP and the gd library. You will be able to more easily illustrate business, financial, and scientific data. Specifically, you learn:

• Basics on setting up your PHP/gd system
• Operating system-specific tips to facilitate setting up your own system
• How-tos for testing your PHP/gd installation
• Steps to prepare your canvas, color palette, and background fill/image
• A primer on gd drawing primitives
• Exercises to help render data-visualization results
• Tips for choosing a file format
• Instructions to embed your script into HTML documents

Prerequisites

None.

System requirements

You need:

• Access to a good operating system. I consider the following good operating systems:
  • Linux
  • Free/Net/OpenBSD
  • Microsoft Windows NT/2000
  • Mac OS X

  Other UNIX-like operating systems are also acceptable as long as they can run Apache (http://httpd.apache.org/docs/install.html), PHP (http://www.php.net/manual/en/installation.php), and gd 1.8.x (http://www.boutell.com/gd/manual1.8.4.html) or gd2.x (http://www.boutell.com/gd/manual2.0.1.html).

• A machine with a CPU clocked at 100 MHz or more
• A machine with 32 MB of RAM or more
• A 500-MB hard disk

Also, you can use a different HTTP server as long as it is supported by PHP (http://www.php.net/manual/en/installation.php). On top of that, the gd library will need the following additional support libraries: freetype2, zlib, libpng, and libjpeg6.

Back to top

Tips for assembling a working PHP system

The easiest way to put together a working PHP setup for the purposes of this tutorial (and in many cases, for production use) is to use pre-compiled Apache, PHP, gd, and any additional libraries that gd may require.

Following is a list of such tips for some of the most popular operating systems:

• FreeBSD. Use the ports system (http://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/ports.html) to install the latest software, but make sure that you install Apache 1.3.x not Apache 2.x, unless PHP is ported to Apache 2.x by the time you read this tutorial. Then, install gd and other required libraries.
• Linux. This varies from distribution to distribution. Users of Red Hat and other RPM-based distributions should install apache-1.3.26, php4, php4-gd, and any additional RPMs that will be required. Users of Debian-based distributions should follow the same route, but use DEBs. Similarly, users of Slackware and other TGZ-based distributions should use appropriate TGZ archives.
• Apple Mac OS X. Apache is a part of the default installation, so you only need to start it and add PHP and the rest of the software. Apple offers a nice page with instructions (http://developer.apple.com/internet/macosx/php.html).
• NetBSD. Use the packages system ()http://www.mclink.it/personal/MG2508/nbsdeng/chap-pack.html to install required software. (See notes for FreeBSD.)
• OpenBSD. Apache is a part of the default installation, so you only have to download PHP and the rest of the software, which you can do with pkg_add php4-version-gd.tgz. If you are new to OpenBSD packages, read "The Ports and Packages collection" (http://www.openbsd.org/ports.html). Then, start Apache with apachectl start (must be done by the superuser) and you're set.
• Microsoft Windows. You only need to install Apache binaries (http://www.apache.org/dist/httpd/binaries/win32/) if you do not have IIS installed. PHP, gd and the rest of the necessary libraries are also available as a binary distribution with a GUI installer (http://www.php.net/downloads.php).
• Other operating systems. Either use pre-compiled packages or build software from sources.

Back to top

Building required tools from sources

If you cannot find ready-made binaries for your system, you will have to build them from sources using an ANSI C/C++ compiler like GCC.

As for the sources of particular packages, you can find them here:

• Apache: http://www.apache.org/dist/httpd/
• PHP: http://www.php.net/downloads.php
• gd: http://www.boutell.com/gd/
• libpng: http://www.libpng.org/pub/png/libpng.html
• zlib: http://www.gzip.org/zlib/
• libjpeg: http://www.ijg.org/
• freetype2 (optional, required for rendering TrueType fonts): http://www.freetype.org/
• t1lib (optional, required for rendering Type 1 fonts): http://freshmeat.net/projects/t1lib/

For details on building every package, see README or INSTALL files found in each package. You should build in the following order:

1. zlib
2. libpng
3. libjpeg
4. freetype2
5. t1lib
6. gd
7. Apache
8. PHP

Most of these tools can be built by following the standard UNIX routine:

$ ./configure
$ ./make
$ sudo ./make install

Back to top

Additional tools

Additional software required to test your scripts includes a graphical Web browser. Ideally, it ought to be running on a machine other than the one generating graphics, so you can check whether your scripts are accessible to the outside world. All major browsers (Mozilla, Internet Explorer, Opera, and others) are able to handle such tasks. You will also need a plain text editor. In this case vi, emacs, TextPad, or BBEdit work equally well.

Back to top

Testing your PHP/gd installation

When you have all required components installed, you can check if the support for gd is working. This is done with two simple scripts.

First, you create a general PHP test script:

<?php phpinfo(); ?>

Save the script as test.php (remember to save it in the document directory), change file access modes to read-only for all users with chmod 0444 test.php and request the script using the browser (for example, http://localhost/test.php). You should see a long table listing various PHP options. Do a search for gd and check for the --with-gd option and the gd section (support for gd ought to be enabled). If the browser reports errors, check the configuration of your HTTP server, PHP, and gd and try again.

Next, create a gd test script:

<?php header("Content-Type: image/jpeg");

    # Set the dimensions of the canvas
    $cw = 500;
    $ch = 300;

    # Create canvas
    $c = ImageCreate($cw, $ch);

    # Generate color palette
    for ($n = 0; $n <= 255; $n++) {
      $cols[$n] = ImageColorAllocate($c, $n, $n, $n);
    }

    # Create background
    ImageFilledRectangle($c, 0, 0, 600, 400, $cols[255]);

    # Display all characters in a font
    $font = 4;
    $dx = ImageFontWidth($font);
    $dy = ImageFontHeight($font);
    $x = ($cw / 2) - (16 * $dx);
    $y = ($ch / 2) - (4 * $dy);
    $m = 0;
    $z = 0;

    for ($n = 0; $n <= 7; $n++) {
      for ($m = 0; $m <= 31; $m++) {
        ImageChar($c, $font, $x + $dx * $m, $y, chr($z), $cols[0]);
        $z++;
      }
      $y = $y + $dy;
    }

    # Draw a nice thin border around the edges of the image
    ImageRectangle($c, 0, 0, $cw-1, $ch-1, $cols[0]);

    # Generate image
    ImageJPEG($c);
?>

Again, you need to make this script readable by all users, and request it using your browser. The result should be identical to the following:

1 of 8 | Next

Comments

Back to top

Table of contents

• Before you start
• Rolling your own: First steps
• gd drawing primitives
• Basic data visualization
• Before you send your masterpiece to the visitor
• Embedding in HTML documents
• Resources
• About the author

---

1 of 8 | Next

Next steps from IBM

With the no-charge DB2 Express-C, Zend Core PHP, and Java you can develop advanced Web 2.0 applications quickly that matter.

---

• Try: Download a free trial version of DB2 Express-C, which includes Zend Core PHP and pureXML technology that is ideally suited for managing both XML and relational data and powering a new breed of SOA and Web 2.0 solutions.
• Article: This IBM Redbook shows how to port PHP apps from MySQL to DB2, and includes code samples for creating Zend Core PHP applications.
• Tutorial: In this Mastering Facebook app development tutorial series, you will use Java and PHP in parallel to build a Facebook interface for an online stock trading J2EE application using the Spring framework.
• Buy: DB2 9 for Linux, UNIX and Windows

Dig deeper into Web development on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.