CASE STUDY

Overview

Databases are a way to swap out a great number of information. It elimates the need to hard code the same elements over and over just to change a picture or a title. Sometimes you are presented with a ton of information that you must display on a site, the best way to do so is through a database.

My project "Chopped Kitchen" demonstrates the implimentation of using a database in my self hosted site.

Context & Challenge

BACKGROUND

In my major, Interactive Digital Media at Drexel University, I was taught the fundemenatls of different coding and scripting languages before this class. This course builds upon the topics covered in Scripting for Interactive Digital Media I and introduces students to modern server-side technologies for internet based delivery of dynamic content that connect to and manipulate database content. This course explores modern server-side scripting languages that allows user to interact with relational database content through browser web pages.

The problem

The amount of information initially provided was a lot and in different documents. They were not in one single place that I could refer back to.

goals & Objectives

My ultimate goal was to create a self hosted site that held web pages that pulled information form a database. In this project, I wanted to design and develop a visually pleasing recipe site that also generated recipes flawlessly.

Process & Insight

Wireframes

My first step was to figure out how I wanted to display information on my webpages. I created a style tile with fonts, font weights, colors, buttons, and titles that I wanted to display on my webpage. I used the style tile to create wireframes of what my site would look like at a mobile breakpoint, a tablet breakpoint, and a desktop breakpoint.

Click here to see all of my wireframes.

Prototype

With a style tile and wireframes the guide me, I created a responsive wireframe. I would use this responsive wireframe to be the base of how my site would look. With the repsonsive wireframe built, I was ready to pull data from the database created by my peers for this class

Click here to see my basic responsive wireframe.

Code / Dev

The code that I had for my basic wireframe came in handy while I was implimenting php code. This was my first time ever using php, so I had to learn as I was creating my site. It was difficlut for me to learn a new langauge while figuring out how to include it in my site. I spent hours learning as much as I could as well constantly pestering my professor with questions and degging sessions.

Click here to see all of my code for this project.

Generating mulitple recipes on the home page was one part of the project. The next part was to generate each recipe page. This was the hardest part for me. The initial data we recieved in the beginning of the class was in the form of PDFs that didnt have the same amount of images and steps. I had to manually made sure that each step of the recipe lined up with the image for that step.

After generating info for each recipe page, I coded the search function and the filter function. These two functions help users who already have an idea of what kind of recipe they want, to find them faster.

Solution

Click here to see my final design for Chopped Kitchen.

As a final website, I believe that all elements came together nicely. The style tile and wireframes that i brainstormed at the begging of the process helped shape my project as a whole. Although I have succesfully gotten all interactive features to work through my web pages, I still believe I can continue to improve this website with more practice and even add more features.

Results

This project was a success. All of my features work and the design that I have worked on compliment each other. This website could be a simplistic recipe website that is easy to navigate and easy to understand. It could be the go to site for users that are new to cooking or just love cooking in general.