Insert Backbone.js model into MySQL database

Question

I have a backbone.js model with some defaults and an url:

var Box = Backbone.Model.extend({
    url: "./save.php",
    defaults: {
        x: 0,
        y: 0,
        w: 1,
        h: 1
    }
});

Then I have an instance of this model and I proceed to save it:

var box = new Box({ x:10, y:10, w:200, h:200 });
box.save();

Now I want to save this model into a MySQL database using a PHP script "save.php", it goes like this:

<?php 
    include('connection.php');

    $id = $_POST['cid'];
    $x = $_POST['x'];
    $y = $_POST['y'];
    $w = $_POST['w'];
    $h = $_POST['h'];

    mysql_query("INSERT INTO boxes (id, x, y, w, h)
                         VALUES('$id', '$x', '$y', '$w', '$h')
                       ") or die(mysql_error());
?>
echo "Data Inserted!";

I have tried reading many tutorials but I cannot get this simple model save to work. Why is my code not working? Any ideas on how can this be solved?

Thanks

EDIT: QUICK SOLUTION

In the php script, the correct way to obtain the information from the sent JSON object is as follows:

$box_data = json_decode(file_get_contents('php://input'));
$x = $box_data->{'x'};
$y = $box_data->{'y'};
$w = $box_data->{'w'};
$h = $box_data->{'h'};

And to store in in the database:

mysql_query("INSERT INTO boxes(id, x, y, w, h)
            VALUES('', '$x', '$y', '$w', '$h') ") 
or die(mysql_error());

In this way one row will be inserted in the table "boxes" with the information of each one of the attributes of the backbone model Box. The server request method in this case is POST and the id in the table "boxes" is set to auto-increment.

why don't you save it a JSON into one field? Would be extensible. Or a way better approach would be to use a document based database like CouchDB or MongoDB, where data is already saved as JSONs. — Johannes Klauß
Do you see the Data Inserted message? Ca n you see that the request to the php file is being made? do you get any response at all? — danwellman

nikoshr nikoshr · Accepted Answer · 2012-06-07T11:41:14

Backbone is based on a REST API: when saving/updating a model to the server, Backbone will send it serialized as JSON in the request body with a POST our PUT request. From Backbone.sync documentation

With the default implementation, when Backbone.sync sends up a request to save a model, its attributes will be passed, serialized as JSON, and sent in the HTTP body with content-type application/json.

This means that server-side you have to

determine the type of request
decode the serialized JSON

Something like this should get you started

$request_method = strtolower($_SERVER['REQUEST_METHOD']);
$data = null;

switch ($request_method) {
    case 'post':
    case 'put':
        $data = json_decode(file_get_contents('php://input'));
    break;
}

// print_r($data);

// note that mysql_* functions are deprecated
// http://php.net/manual/en/function.mysql-query.php
// inserting with a PDO object, assuming an auto incremented id
$sql = "INSERT INTO boxes (x, y, w, h) VALUES(?, ?, ?, ?)";
$sth = $dbh->prepare($sql);
$sth->execute(array(
    $data->x,
    $data->y,
    $data->w,
    $data->h
));
$id = $dbh->lastInsertId();

Check this page for a more thorough implementation of a REST API in PHP http://www.gen-x-design.com/archives/create-a-rest-api-with-php/

Insert Backbone.js model into MySQL database

2 Answers