Better Baking - Recipe Sharing - Case Study

PHP, MySQL, Javscript, CSS3, HTML5
Notable Points
  • Custom image API
  • User authentication
  • Responsive design

Intro

I love food. Specifically, I love the experience of creating food and how it has the tendency of bringing people together. This is one of the ways how my grandmother and I can bond. So when deciding on a web app to build, it was an easy choice.

Image API

In order to provide an engaging customer experience, I wanted to provide the user an option to upload mouth-watering images the delicious foods that could be made by their recipes. In order to accomplish this, I needed to create an API that not only could allow for image upload and database storage, but also customizable retrievals.

This process was made easy using PHP's built in GD Graphics Library. When a new recipe was submitted, the image model would be directed to create a new image object based off of the uploaded image stream string. This would use GD's imagecreatefromstring() function, and new image would be promptly stored into the database.

static function createFromString($data_string, $id=null) {
    $resource = imagecreatefromstring($data_string);
    return new Image($resource, $id);
}

static function createFromUpload($file_info) {
    $result = null;

    if (isset($file_info["tmp_name"])) {
        $tmp_name = $file_info["tmp_name"];
        $image_stream_string = file_get_contents($tmp_name);
        $result = static::createFromString($image_stream_string);
    }

    return $result;
}

When retrieving a user uploaded image, I wanted to trust that the user would upload a sensibly sized image. Who wants to load 8K images on their mobile network? By simply adding flags to the end of the image's URL, the server would handle the heavy lifting of image manipulation, saving the user's data.

Using the GD library, image resizing ended up being easy and straightforward:

function getResource() {
    return $this->resource;
}

function getResizedResource($new_width, $new_height) {
    return imagescale($this->resource, $new_width, $new_height);
}

function getScaledResource($percentage) {
    $new_width = $this->width * (intval($percentage)/100);
    return imagescale($this->resource, $new_width);
}

All the user would need to do is navigate to an address that looks like this, and a scaled image would be instantly generated:

https://example.com/index.php?page=image&id=6&width=100&height=100

Takeaway