Welcome to part one of a three part tutorial series on how to build a dynamic, database-driven image gallery. You should be able to repurpose these instructions based on a different visual design since I’m not going to cover anything specific with regards to the visual aspects of the layout.
The tutorial has been broken down as three pieces for simplicity. Although we’ll only be dealing with two files and I could combine all of the back-end scripts as one file, for aesthetic reasons I’ll keep things separate. Let’s get started…
Setup
To complete the tutorial, you will need to have two pieces of software installed and running on your computer or a server somewhere. For the database component, you will need the community edition of MySQL installed. Version 4.0 or newer should all work. For the web server, I recommend using the Apache web server, included out of the box with Mac OS X. You will also need to ensure that the PHP module for Apache is enabled and configured appropriately. Follow any provided documentation for specifics on security-related issues.
Setting up the MySQL Database
Before doing anything else, the database source needs to be created for this tutorial. To keep things easy, I’ll also assume you set up phpMyAdmin to manage your databases.
- Login to phpMyAdmin in your web browser.
- Create a new database and name it
photo_gallery
. We’ll make reference to this later once we start developing the SQL queries that will bring things to life.
- Select the database you just created from the pop-up menu or listing on the left sidebar of phpMyAdmin. In the right frame, click on the SQL tab. This will open up the SQL editor view.
To add the necessary tables to the photo_gallery
database, copy the SQL queries below into the SQL editor window and press the Go button.
CREATE TABLE categories (
id int(11) unsigned NOT NULL auto_increment,
description varchar(100) NOT NULL default '',
preview varchar(64) NOT NULL default '',
PRIMARY KEY (id)
) TYPE=MyISAM COMMENT='Gallery Categories';
CREATE TABLE photos (
id int(11) unsigned NOT NULL auto_increment,
filename varchar(64) NOT NULL default '',
comment varchar(255) default NULL,
category_id int(11) unsigned NOT NULL default '0',
PRIMARY KEY (id)
) TYPE=MyISAM COMMENT='Gallery Images';
Assuming the SQL is executed successfully, you can close the SQL editor window.
Now that the database tables have been created, you’re ready to start adding data. Start by creating a series of categories. Enter a description for each. The required ID field will be automatically created since the table is set to auto-increment the category_id
field.
- Once you’ve created a few categories, you can start adding photos and assigning them to the previously created categories. The
photo_filename
field should contain the actual name of the image file including the file extension (eg. .jpg, .gif, .png). The photo_comment
field is used to add a short description of the photo and the category_id
field is a foreign key field and should contain the appropriate ID value from the categories table. This allows us to provide a simple category mechanism, though it currently only allows assignment of a single category.
Questions? Stuck?
If you get stuck, leave a comment and I will (within reason) try to provide adequate assistance.
Having had the benefit of using Mac OS X Panther since it’s introduction at WWDC back in June of 2003, I’ve had a bit longer than the average user to tinker, poke around and undoubtedly break things. One welcome addition in Panther has been the inclusion of X11 (XFree86), albeit one that is not installed by default (it’s included on Install Disc 3). X11 is not something terribly useful to most users, which is why it’s an optional install, but for those that do, having the software available saves us from using other third-party implementations.
The X11 environment brings a wide variety of X-Windows-based GUI applications running on other Macs, Linux or other *nix flavours to your desktop.
For myself, this is extremely useful since I need access to server tools which would otherwise be difficult to access remotely, leaving me stuck sitting in freezing cold server rooms. Not much fun for anything longer than 5 minutes. While I try to do as much admin work as possible through the commandline, sometimes it’s just faster and easier to use a GUI. The big difference, though one which likely only affects a small selection of apps is that Apple’s X11 implementation is integrated with the Quartz graphics engine in Mac OS X itself.
A good example of how I’m using X11 in a real-world situation is using rdesktop to access Windows Terminal Services, a replacement option for Microsoft’s own Remote Desktop application to manage an Exchange Server run out of Chicago, IL. One less piece of proprietary Microsoft software is always a good thing in my books.
I’m also using X11 to help manage a few IRIX-based SGI servers. Combining SSH and X-Windows on Mac OS X is a great set of tools to securely access GUI services running on the SGI servers. For example, once I SSH into the server, it’s just a matter of typing toolchest
to bring up the GUI tools on my Mac in the X11 environment.
Setting Up X11
First, make sure you’ve installed X11. You’ll find it in your Applications/Utilities folder if it has been installed otherwise get installing (Disc 3 in Panther). In order to continue you’ll also want to be comfortable working in the Terminal. The instructions will be reasonably verbose in case you’re not quite a Unix guru.
- Launch the Terminal application (found in your Utilities folder).
- Start by making a copy of the
/etc/sshd_config
file which is the configuration file for the SSH daemon.
sudo cp /etc/sshd_config sshd_config.orig
The sudo
command will allow you to execute the cp
(copy) command with root permissions giving you full read/write access to the filesystem. You will need an administrator password. Enter it when prompted.
- Edit the original file we just made a backup copy of using your preferred text editor. Be sure to use a plain text editor such as BBEdit, pico or vi in order to preserve the integrity of the file. In this case, using pico.
sudo pico /etc/sshd_config
- The contents of the
sshd_config
file should now be visible in your Terminal window. Locate that line that reads #X11Forwarding no
and change it to remove the octothorp character at the beginning of the line to activate it. We also need to change the line to replace no
with yes
.
The final line should look like: X11Forwarding yes
Save your changes by pressing Control-X which will display a save prompt. Press ‘y’ (or Return) to accept and then press Return a second time to select the previous filename. This will save the file and return you to a new Terminal prompt.
- Restart the SSH daemon. In the System Preferences under Sharing, toggle the Remote Login checkbox which will restart the SSH background process. You should now be ready to connect to your computer and run X11 applications remotely. So, now how exactly does one do this?
Connecting To Remote Servers
Now that we have X11 configured, if you have a second computer available you can test a remote connection.
- Open X11 in your Utilities folder. A window that looks deceptively like the Terminal will open.
- In the new xterm window, use the following command to remotely login to a second computer (Mac OS X, Linux or other *nix):
ssh -X [USERNAME]
[IP_ADDRESS]@@.
Replace @ and
[IP_ADDRESS]@ with the appropriate values and enter a password for the requested remote account. Assuming you are successful here, pass go and collect $200 and go to step 3.
- Once remotely logged onto the second computer you’re ready to run one of the simple X11 applications included with Mac OS X. Try these on for size:
/usr/X11R6/bin/xeyes
/usr/X11R6/bin/xclock
- Type
exit
in the xterm window when you are done. This will disconnect you from the remote server.
And that’s all there is to it. Happy managing.
« January 2004March 2004 »