Home | About | Archive | Blog | Subscribe | Feed  | Contact | Links

3.03.2008

Making It Work

I thought I'd talk about some of the technology behind LeftyRodriguez.Com today, since I've had a couple of people ask me about how I upload pictures and display them.
First off, this web site and its technology is still very much a work in progress.  I keep finding things here and there to tweak.  If you notice something that doesn't work right or think there is a feature that needs to be added, please let me know via email at rifleman@gmail.com

Secondly, this post might be pretty boring to non-technical people, so please forgive me.
The core of the LeftyRodriguez Photoblog application (LRPA) is a Microsoft Access DB (maybe one day I'll spring for some SQL Server-based hosting, but Access works fine for now) with two tables.  One holds image information (filename, date/time posted, caption, description, and basic EXIF data.  The second table is for the comments related to images and holds the poster's name, the comment's date/time and the comment itself.  These two tables are linked by a 1:N relationship (yay Boyce-Codd Normal Form) using imageID as the primary/foreign key (as you can see, that BBA in Information & Operations Management is really paying off).  Without this database, there would be no way of storing image information and dynamically generating pages to display them.

Speaking of dynamically generating pages, you'll notice that the index page (the main one that displays the posted images) and the archive pages end in the .asp file extension, meaning they are written in Classic ASP (perhaps one day I'll get around to upgrading them to ASP.Net).  ASP stands for Active Server Page and is Microsoft's (old) technology for dynamically creating HTML pages on the server before sending them to the end-user's web browser (which, of course, should be Firefox).  Basically, ASP allows me to write the pages as a script that does things like query the database for image information then use this information to generate the page presented to the end-user on the fly.  If we didn't have technology like ASP or PHP (ASP's open-source cousin), every time I added a new picture, I'd have to manually update the archive page and the index page, as well as having a different html page for each image, which wouldn't be fun enough for me to actually do everyday, so this would be one sorry photoblog that would probably hold my attention for about a week.

The basic operation of the index page happens like this:  When you navigate to LeftyRodriguez.Com, index.asp is automatically loaded.  When my web server (hosted by Brinkster) gets the request for the main page, it finds index.asp and interprets the code contained in it.  First, it opens a connection to the database and queries for the newest image and its relevant data (Caption/Image Name, description, EXIF data for the mouseover).  Then it uses this data to build the actual html page sent to your web browser.  Page decoration/style is an ugly mixture of both inline styles and CSS (I promise I'll fix this at some point).

The archive page works the same way, except it queries the database for all posted images and then uses a loop to generate the table holding each individual thumbnail. 
The other pages are static html and must be changed by hand (luckily, this doesn't have to happen too often, except when I add links or new features, like this blog, and have to update the header (should've used #include files)).

Okay, great, you say, you just threw a bunch of technical mumbo-jumbo my way, but how do you get the images onto your web server.  Well, don't worry, there's more mumbo-jumbo to come!  For the first couple of months of operation, I had a page I could navigate to with my browser to upload images.  This was another .asp page that would let me choose an image on my local PC, fill in the caption and description and click an "Upload" button.  The page would then upload the images to the server, resize them (one for the thumbnail and one for the high-resolution main page) and update the database with the image's information.  The problem with this approach was two-fold:  first, the image-resizing program didn't always do a satisfying job, leaving the images with ugly artifacts; second, sometimes my web server would return an "Out-Of-Memory" error while attempting the resize and I'd either have to wait for my hosting provider to fix the memory issue or manually resize the images, upload them to the web site via FTP and then manually enter the image's data into the database, which was time-consuming and "un-fun". 
After growing increasingly frustrated with these problems, I suddenly realized that, hey, I'm a programmer, I can do this differently.  So, I set about writing a C# application to manage the resizing and uploading for me.  After a couple of hours of messing around, I came up with this:

image

Simple, eh?  Yeah, but it does the job.  I can choose my image, then enter a caption and a description and then click the "Process" button.  The application resizes the image into the high-res and thumbnail versions, saves them to a temporary folder on my hard drive, opens an FTP connection to my server, uploads the images then passes the image's information to a web page that lets me confirm the details of the image before committing it to the database:

image

Once I click "Upload", the data is written to the database and the image is ready to be viewed.

This was great and all for a few days, but I started thinking about another issue: what if I wanted to go out of town for a few days or weeks and didn't have access to a my PC or laptop to upload images?  I had to have a way to queue up images so that they could be posted in advanced, but not actually viewable until I desired.  Aha, I thought, I can queue up pictures by assigning a date/time for them to post then having the code that queries the database look for only images that have a date/time that's already passed.  For instance, right now there are about four images in my photoblog queue that have dates in the future, so they won't show up until after 6:30 EST on the day they are assigned (I arbitrarily chose 6:30 EST because I'd gotten into the habit of manually posting my images the old way every night after I'd come home from work, which was usually around 5:30 Central Time).

The site feed and subscription services are the final piece of the puzzle.  The feed and the email subscription services are provided by Feedburner, which is a great way to take some of the headache away from providing these services myself.  However, for Feedburner to work, it does need to be able to access a valid RSS feed on my site that tells it what the content of posts is and when new posts have been made.  This is accomplished using another ASP page that once again uses a database query and a loop to generate a valid RSS XML file describing my posts that Feedburner can access.  Assuming that my feed is valid (and there have been a few times when it's failed because special characters like "!" or "%" or even "&" haven't been specially-encoded) then every morning at 5:30 an email is sent to all my email subscribers informing them that a new image has been posted.
So far, this has worked pretty good.  But, like I said, there are probably places where I can improve this web site.  Once again, if you notice something that seems to be missing or something that's broken, then please let me know at rifleman@gmail.com.

posted by Lefty Rodriguez at  

0 Comments:

Post a Comment

<< Home