Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm working to create a "sandbox" of sorts, where numerous users will login and create draggable "nodes" on their own "sandbox." I'd love to be able to have the app auto-save after every modification, but first things first--I'm trying to get my Javascript objects stored in MySQL.

I'm new to Javascript, PHP and MySQL, but JSON seems to be my best friend for this task. Here's a rough example of a node:

node1.pos
node1.name
node1.content
node1.siblings

*Note: The actual node will house many more attributes, some with potentially sensitive information.

My goal is to have each node manipulated by the user (dragged, linked to siblings, name change, etc.) and then upon re-visiting the page, the "sandbox" re-populates with the nodes in the correct position, with all the correct data associated with it.

I think I can handle the function that will populate the canvas, but shifting the object between MySQL and Javascript is what confuses me. Will the object having methods cause any problems?

Does anyone have any help, advice or reference material that could help me out?

share|improve this question
1  
Not really an answer, but something interesting to consider: github.com/zefhemel/persistencejs – jnewman Jan 29 '11 at 3:55
"Will the object having methods cause any problems?" Yes. JSON cannot store functions as data, that's why I created a separate dataPacket. With the code I posted for the load.php service, if the server returns a string, jQuery will parse it as JSON automatically (only if it's valid JSON) and you'll end-up with a JavaScript object. – Trinidad Jan 29 '11 at 4:15

2 Answers

up vote 3 down vote accepted

  1. I would recommend you to create a web service which would store any data the user sends. Let's call it http://server.net/store.php.

  2. The client would then use JavaScript to serialize to JSON the meaningful data, alongside with some user credential...

    var dataPacket = {
    userCredentials: 77777777, /* whatever is sensible */
    nodes: [ {id: 1, posX: 10, posY: 345 }, {id: 2, posX: 5, posY: 136} ]
};

  3. The client would then send the data to the server with jQuery + AJAX...

    $.ajax({
   type: "POST",
   url: "http://server.net/store.php",
   dataType: "json",
   data: dataPacket
 });

  4. Then, on the server-side the data would be checked for valid user credentials and then it could proceed to save, in some kind of database, the JSON encoded data which was received, which is in fact just a plain string.

  5. Create a web service which would read from the database and return any previously stored data. Let's call it http://server.net/load.php.

  6. When the user needs to load what he was doing previously the client would use JavaScript to ask for the data...

    $.ajax({
   type: "POST",
   url: "http://server.net/load.php",
   dataType: "json",
   data: {
       userCredentials: 77777777, /* whatever is sensible */
   }
   success: function(dataPacket) {
      /* process the received dataPacket */
   }
 });

Note that the code depends on jQuery and is provided just as an example, and I haven't actually tested it.

See also:

Hope this helps.

God bless!

share|improve this answer
Thank you kindly. I'm using JQuery for the UI, so using it elsewhere is not a problem. Can you elaborate on the user credentials though? Is that an identifier for which user is sending the data? – Shango Jan 29 '11 at 3:59
1  
The credentials can be as simple as a username. If you want it more sophisticated, you could create a login service which would receive login + password and would return an internal id of sorts (like a encrypted version of the username and password concatenated, or whatever fits). This id which would be used as a credential to avoid sending username + password all the time. So you just send the login information the first time and after that the client would just use the id returned by the server. But there possibly could be much better ways to handle that. – Trinidad Jan 29 '11 at 4:04
up vote 1 down vote

A suggestion off the top of my head:

Save edits on the fly:

Create a PHP page that does nothing but accept POST requests from a user (you'll obviously want to have some form of authentication in place so that randoms can't just hit the page with random data, but that's another matter). This page will solely be responsible for accepting AJAX requests from a user.

Create your sandbox page using something like jQuery's UI library (especially if you're new, use something pre-written, don't try to write your own). This will be a PHP page that will simply load whatever values have been already stored in the database by your the AJAX handling page. Using jQuery's drag and drop methods, you can detect whenever an element has been moved. On move end, you'd use jQuery's .ajax functionality to send the element and coordinates to the ajax handling page.

Next time the user logs in, it would be trivial to add/position the elements as required.

share|improve this answer
labs.inversepenguin.com has the Jquery UI Draggable combined with Mapbox there--"node" and "sandbox." The node has no association to a javascript object yet however, but I like the idea of submitting to a PHP processing page with ajax... I'll just have to POST data in a few different places/ways. – Shango Jan 29 '11 at 3:39
We had almost the same idea ;) – Trinidad Jan 29 '11 at 3:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.