simple PHP code sample to serve backbone.js

Question

Experience level: newbie.

The backbone.js Todos demo uses localStorage. This question is about how to use PHP to serve the page instead, assuming that a MySQL DB has bee

Answer 1

The most basic and simple approach (I know of) that should help you to get started, would be:

1. Given you have a model / collection, define it with an url like:

   resourceCollection: Backbone.Collection.extend({ url: '/page.php' })

2. Create your page.php file (in the document root), just take care of RewriteRules etc. you may use!

3. Now we have to make sure that we can react properly on get, put, post and delete; so we have to check for the request method, e.g. with a switch statement. Cases would be GET, DELETE, PUT, POST:

   switch($_SERVER['REQUEST_METHOD']){ ... }

Answer 2

The example: https://github.com/ccoenraets/wine-cellar-php

... from this article:

http://coenraets.org/blog/2011/12/restful-services-with-jquery-php-and-the-slim-framework/

... is good because it encapsulates a configured PHP RESTful server (Slim). From the perspective of working with backbone.js, this seems to essentially be the entirety of what you need on the server side - simply a RESTful service!

For my basic web config (am not good with rewrite rules), I had to modify the file ../final/js/models/winemodel.js (where I add index.php) as follows:

url:"../api/index.php/wines"

Answer 3

The following should give you an idea (php controllers are implemented using Silex framework + Paris library for the data access):

// GET  /{resource}/{id}    Show
$app->get('/api/todos/{id}', function ($id) use ($app) {
    $todo =  $app['paris']->getModel('Todo')->find_one($id);

    return new Response(json_encode($todo->as_array()), 200, array('Content-Type' => 'application/json'));
});

// POST     /{resource}     Create
$app->post('/api/todos', function (Request $request) use ($app) {
    $data = json_decode($request->getContent());

    $todo =  $app['paris']->getModel('Todo')->create();
    $todo->title = $data->title;
    $todo->save();

    return new Response(json_encode($todo->as_array()), 200, array('Content-Type' => 'application/json'));
});

// PUT  /{resource}/{id}    Update
$app->put('/api/todos/{id}', function ($id, Request $request) use ($app) {
    $data = json_decode($request->getContent());

    $todo =  $app['paris']->getModel('Todo')->find_one($id);
    $todo->title = $data->title;
    $todo->save();

    return new Response('Todo updated', 200);
});

// DELETE   /{resource}/{id}    Destroy
$app->delete('/api/todos/{id}', function ($id) use ($app) {
    $todo =  $app['paris']->getModel('Todo')->find_one($id);
    $todo->delete(); 

    return new Response('Todo deleted', 200);
});

To get your backbone collection working with the above interface, all you have to do is to set the url property like:

window.TodoList = Backbone.Collection.extend({
    model: Todo,

    url: "api/todos",

    ...
});

Recently, I have written a tutorial on how to do GET/POST/PUT/DELETE with Backbone.js and PHP http://cambridgesoftware.co.uk/blog/item/59-backbonejs-%20-php-with-silex-microframework-%20-mysql, might be helpful.