Nice, Polymer, Material Design, Oh my!

For the past while, I've been working on a PHP microframework to fill the niche of rapid prototyping with the ability to extend and grow the application without creating a huge mess. Nice does this by providing a simple interface to the Symfony DependencyInjection component.

One great application for Nice is that of performing back-end lifting for apps built with Polymer.js or other javascript frameworks.

Today, we will take over where the Polymer tutorial leaves off and make the "favoriting" aspect of the mini-app functional. We will do this all while keeping in mind the considerations of Polymer and RESTful API design.

Getting Started

To start out, this guide assumes you already have the following set up:

• Composer and Bower are installed and ready to use
• MySQL or some other database is available
• Your webserver is configured and ready to use

First thing's first, install the nice-polymer sample application. Clone the repository.

git clone https://github.com/veonik/nice-polymer

Then install the dependencies with Composer and Bower.

composer update
bower install

Next, modify the database connection parameters in web/api/index.php

Finally, run the sample db.sql script against your database to create the necessary database table.

Ready! Now visiting the app in your browser will display a beautiful example of material design.

Making Favorites useful

Now that we have our app working, let's making favoriting and unfavoriting of posts actually work.

First, we need to implement a PATCH server side action in web/api/index.php. We will use PATCH because we will allow the updating of just partial objects, without requiring the full object that the PUT method implies. See this website for more information about defining RESTful endpoints for your applications.

Open up web/api/index.php and add the following in your RouteCollector callback, around line 37:

    $r->map('/post/{id}.json', null, function (Application $app, Request $request, $id) {
        $conn = $app->get('doctrine.dbal.database_connection');
        $favorite = $request->get('favorite', 'false');
        $conn->executeQuery('UPDATE polymer.messages SET favorite = :favorite WHERE uid = :id', array(
            'favorite' => $favorite === "true" ? 1 : 0,
            'id' => $id
        ));

        return new JsonResponse();
    }, [ 'PATCH' ]);

Next, we need to implement the changes to the Polymer post-service service. Open web/post-service/post-service.html and add:

    <core-ajax handleas="json" id="ajax_fav" method="PATCH">
    </core-ajax>

Then modify the javascripts in web/post-service/post-service.html, adding the following:

Polymer('post-service', {
    /** 
     * Update the service with the current favorite value.
     * (Two-way data binding updates the favorite value 
     * stored locally.)
     * 
     * ...
     */
    setFavorite: function(uid, isFavorite) {
      this.$.ajax_fav.params = { favorite: isFavorite };
      this.$.ajax_fav.url = "api/index.php/post/" + uid + ".json";
      this.$.ajax_fav.go();
    }
});

This last bit of code does most of the work. We use the ajax_fav core-ajax component, setting its URL and parameters, then firing it off to update the server side.

Refresh the site in your browser, and try favoriting a post. Reload the page and you'll see the "favorite" now sticks!

Ready for more? Can you implement post editing? Or post creation? Try it out!