Using Cloud Storage with PHP

This part of the PHP Bookshelf app tutorial shows how to store images in Cloud Storage.

This page is part of a multipage tutorial. To start from the beginning and read the setup instructions, go to PHP Bookshelf app.

Creating a Cloud Storage bucket

The following instructions detail how to create a Cloud Storage bucket. Buckets are the basic containers that hold your data in Cloud Storage.

  1. In your terminal window, create a Cloud Storage bucket, where [YOUR_BUCKET_NAME] represents the name of your bucket:

    gsutil mb gs://[YOUR_BUCKET_NAME]
  2. To view uploaded images in the Bookshelf app, set the bucket's default access control list (ACL) to public-read:

    gsutil defacl set public-read gs://[YOUR_BUCKET_NAME]

Configuring settings

Copy your settings.yml file from the Structured data part of this tutorial to the getting-started-php/3-cloud-storage directory.

Installing dependencies

In the 3-cloud-storage directory, enter this command:

composer install

Running the app on your local machine

  1. Start a local web server:

    php -S localhost:8000 -t web
    
  2. In your browser, enter this address:

    http://localhost:8000

Now you can browse the app's web pages, add books with cover images, edit books, and delete books.

Deploying the app to the App Engine flexible environment

  1. In your terminal window, deploy the sample app:

    gcloud app deploy
    
  2. In your browser, enter this address. Replace [YOUR_PROJECT_ID] with your Google Cloud Platform (GCP) project ID:

    https://[YOUR_PROJECT_ID].appspot.com
    

If you update your app, you can deploy the updated version by entering the same command you used when you first deployed the app. The new deployment creates a version of your app and promotes it to the default version.

The older versions of your app remain, as do their associated virtual machine (VM) instances. Be aware that all of these app versions and VM instances are billable resources.

You can reduce costs by deleting the non-default versions of your app.

When you finish this tutorial, you can avoid continued billing by deleting the resources you created. See Cleaning up for more detail.

App structure

Binary data sample structure

The app uses Cloud Storage to store binary data (pictures in this case), while continuing to use a structured database for the book information (either Cloud Datastore, Cloud SQL, or MongoDB).

Understanding the code

The template for listing the books in your database receives a books array variable. For each book in the array, the template displays the cover image specified by the book.imageUrl. If the book doesn't have an imageUrl member, the template displays a default image:

<div class="media-left">
  {% if book.image_url %}
    <img src="{{book.image_url}}">
  {% else %}
    <img src="http://placekitten.com/g/128/192">
  {% endif %}
</div>

The template for displaying an individual book does the same thing:

<div class="media-left">
  <img class="book-image"
       src="{{ book.image_url ?: 'http://placekitten.com/g/128/192' }}">
</div>

The form for entering or editing a book includes a field where the user can enter a URL for the cover image:

<div class="form-group">
  <label for="image">Cover Image</label>
  <input type="file" name="image" id="image" class="form-control"/>
</div>

<div class="form-group hidden">
  <label for="image_url">Cover Image URL</label>
  <input type="text" name="image_url" id="image_url" value="{{book.image_url}}" class="form-control"/>
</div>

When the user deletes a book, the handler for the POST '/books/{id}/delete' route deletes the book's cover image from Cloud Storage. The $storage variable is an instance of the CloudStorage class, which is defined in src/FileSystem/CloudStorage.php:

if (!empty($book['image_url'])) {
    /** @var CloudStorage $storage */
    $storage = $app['bookshelf.storage'];
    $storage->deleteFile($book['image_url']);
}
Was this page helpful? Let us know how we did:

Send feedback about...