How to display and manipulate visual objects in a web app?

Question

Using only HTML, CSS, JavaScript, and a relational database with server-side scripting language (e.g. PHP and MySQL), how can you retrieve and display data objects AND manipulate them visually?

By manipulate I mean creating new objects, retrieving stored objects, visualising their properties (e.g. making a circle diamater larger or smaller), and calling methods and setting field values based on dragging and dropping (changing size, shape and position).

An example of use would be an online representation of a physical office whiteboard with magnetic counters, used for issue monitoring and tracking. A table has rows for named issue owner, and columns representing the business workflow e.g. a 4 stage "Assign", "Investigate", "Implement", "Agree closure" process (or whatever, just an example).

A user would click a button to create a new Issue object, with its own unique id number. Its shape would depend on its issue type, its colour its status (red, amber, green for e.g. no plan, behind but recovery on plan, on plan). Dragging it to the relevant table cell would allocate it to an owner based on its row index, and set the life-cycle state based on column index. Each time an object is dragged or dropped or otherwise changed, the visual changes are reflected in the object properties in the database.

I'm torn between using HTML5 canvas element, or SVG with some clever CSS. I can work out how to get stuff already in the database onto the screen, but not how to manipulate and store the changes through the screen. I'm also assuming this can be done in HTML/CSS/JavaScript/PHP/MySQL but what other technologies could be used?

Answer 1

This sounds like it would work best as a client-centrix ajax thing. This means:

• Write the entire UI in Javascript. Whether you use canvas, svg, or plain HTML5 + CSS3, depends on your personal preference, browser support, and feature requirements.
• The server has two jobs: serve the javascript application, and respond to ajax requests.

Drag & drop can then be done entirely in Javascript; you probably want to use a javascript library that implements the nitty-gritty for you (there are a few jQuery extensions you can use for this); you'll only have to subscribe to the right events, and fire ajax requests to update and query your data. So for example, if the user drags an item to a table cell, you'd get the item's ID, the table cell's ID, and fire an ajax request that tells the server "item X is now assigned to cell Y", to which the server responds with either "OK" (in which case you can make the change permanent in the UI) or an error message (in which case you probably want to pop up a notification or something like that).

Your best bet for the communication protocol is JSON; it's built into jQuery as well as most javascript implementations, it passes through firewalls and web browsers without too much trouble, and most programming ecosystems (including PHP) have JSON encoding and decoding built into them. Additionally, JSON has very low overhead compared to XML-based alternatives.

Either way, it's not going to be easy, there is no magic bullet to make it just work with a few clicks, and you have to ask whether it is worth the effort. Also, take into account that quite obviously, javascript-heavy interfaces won't work well (or at all) when scripts are being blocked, or on platforms without sufficient support for them - think mobile devices with weak CPU's and sub-standard web browsers, etc.