I’d like to show you a web site that I programmed with PHP and MySQL. I was also responsible for the all the JavaScript and the administrative HTML and CSS, which features a tabbed interface.

Site features include:

Silicon Valley Open Studios is a non-profit organization that provides venues each May for independent artists to display their work.

This video shows a quick tour of the site.

We can see who is signed up so far. All of these images are created on the fly; the originals are much larger that what is displayed on this page. I wrote a resize routine that squeezes them down to fit within a bounding box.

W can see a typical artist’s web page. You can see that this artist has submitted three images. When you click on one of the images in the right column it shows up bigger in the center of the page. Again, these images are all resized on the fly.

The addresses of the venues that the artist will exhibit at are pulled from a database. The map is generated on the fly, and users can drag it around.

The bottom of the page has the artist statement and contact information.

Administration

There are other publicly visible web pages, but right now let's dig into the administration section, which is password protected.

The Open Studios volunteer staff log into the admin section, where they can register new artists and edit existing artists by selecting from a pull-down menu.

The main administrative page features a tabbed interface. There are tabs for managing artist information and images of their work. The images are tagged with the year(s) that they are approved for display, description, media type and so on. This tab also allows the user to select the default image for the artist. This tab also allows more images to be uploaded. Again, these images are uploaded full-size, and then resized to suit when they are displayed.

The next tab is where the artist is assigned a venue for up to three showings.

The transaction tab shows a log of the transactions for each artist, and provides a simple facility for entering new transactions. This is how yearly membership dues and postcard sales are tracked.

The "Go Live" tab performs a sanity check of the database records for the artist. The user is notified if any adjustments are required prior to displaying the artist on the public pages. Because each piece of the artist data must be approved for the current year, there are many reasons why information might not display correctly. This tab troubleshoots problems, and provides a magic "Fix" button. Every software program should have one of those!

The last tab sends email to the artist. The default message welcomes them to Open Studios for the current year, and invites them to view their web page. The email is populated by information pulled from the database. For example, the artist id is retrieved from the database and is automatically incorporated into the email.

We can go and look at the artist's publicly viewable page by clicking on the "View page" button.

That was a quick tour of the administrative section. I'll log out now, and you can see that the administrator menu goes away.

One last administrative page is worth taking a look at - the exhibition site editor. Artists can exhibit their work at up to three sites every year. This site editor has sortable column headings. Clicking once on a column heading causes the rows to be sorted according to that column in ascending order; clicking a second time reverses the sort order. Open Studio volunteers can add a site by typing its information into the blue row at the top and clicking on the New button. A site's address can be tested by clicking on it's Map button. This is useful when crafting an address that Yahoo! Maps can work with - some streets are not present in the Yahoo! database, so an extended zip code is used instead for problem cases. An existing site can be modified by editing its row data and then updated by pressing the Update button. A site can also be deleted by clicking on the Delete button.

Database

I'd like to quickly show you the database schema for the site. Some of the tables are historical in nature, from a previous generation of the schema which was very flat. The current schema is in third normal form. Those tables will be deleted shortly. The tables represent artists, venues, showings, transactions and transaction codes.

You can see the kinds of fields in the tables. Every table has a numeric key called 'id', just as in a Ruby on Rails schema.

Configuration File

The configuration file controls the behavior of the web site. Because the non-profit organization is small and on a tight budget, the config file contains information that would otherwise go into a larger organization's database. The following information is specified in the config file:

About Mike Slinn

You can see some more of my work: