victoria lu

food. aesthetically pleasing. comforting.

Overview: I combined the thing I like to do the most (eat) and what I have the most photos of (food) to create an image gallery in the span of 3 weeks for one of my courses: Intermediate Design and Programming for the Web.

For this website, there were many requirements that we needed to satisfy, including the following:

• the gallery must be designed for one specific target audience
• it must be aesthetically pleasing and follow visual design principles
• utilize HTML, CSS, PHP, and SQL

The gallery that I designed consists of food images and descriptions, and has a target audience of individuals who are interested in food and/or are looking for places to eat.

Design Process

Some of the user needs that were outlined for this project:

• viewing tags and images
• removing, adding tags from/to images
• deleting images
• uploading images

For the website, I divided the content into 3 categories, for 3 separate pages on the website:

1. Gallery Page

Each image is displayed in an organized grid manner; when users click on the image, they can see all the additional details (including all the tags that correspond to the image). Under each image, the user has the option to: edit tags, delete the image, and add new tags.

2. Tags Page

There is a comprehensive list of tags on this page; when users click on a tag, all the corresponding images to that specific tag show up. Users can filter the images by tag via the “search by tag” form near the top of the page.

3. Uploads Page

This page includes a form that enables users to upload a specific picture, with instructions on the top regarding how to upload. The user can input information, such as name, location, and description of the food as well as the tags that the user finds appropriate (note: user can add existing tags or new tags).

I have included some of the sketches for my design below:

Design Patterns

I utilized some existing design patterns to improve the usability of the site, such as:

• clicking on the image to display additional information
• grouping together edit/delete icons
• search/filter form
• a separate uploads page
• cohesive color scheme throughout the site

Programming Behind the Design

Planning Requests

After designing the general flow for the site, I planned out some request forms that will support my site and design:

• GET request form(s): viewing image details, viewing image gallery, search by tag
• POST request form(s): adding/removing tags, deleting image, uploading an image

Database Schema Design (SQL)

Since this is an image gallery, a database that connects images and tags is essential. I planned out three database tables: foods table, tags table, and food tags table. The food tags table is a foreign key(s) table that documents both ids for the foods and the tags table(s) to better organize and display the content; left outer join and inner join clauses can be utilized to find information pertaining to specific image ids that correspond to specific tag ids (and vice versa).

Database Query Planning (SQL)

In order to display and modify the information for the image gallery, database queries are utilized. Some examples of instances where queries need to be used include:

1. viewing image details

• Retrieve name, location and description from the foods table
• Find the corresponding tags id for a specific image id via the food_tags table
• Retrieve the tags names that correspond to the tags id found

2. removing an image

• Delete the corresponding information from foods, food_tags, and tags tables (when necessary and appropriate)

PHP Partial Planning

In order to code more efficiently, I used PHP partials on my website, for elements such as:

• the header
• the navigation bar
• the footer

Final Website

Having put the designs and back-end programming together, I came up with a final website.