How to display and process visual objects in a web application?

Question

Using only HTML, CSS, JavaScript and a relational database with a server-side scripting language (for example, PHP and MySQL), how can you extract and display data objects and visually manage them?

By manipulation, I mean creating new objects, retrieving stored objects, visualizing their properties (for example, increasing the diameter of a circle more or less), as well as calling methods and setting field values ​​based on drag and drop (resizing, shape and position).

An example of a use would be an online presentation of a physical office board with magnetic counters, used to monitor and track problems. The table has rows for the name of the owner of the problem and columns representing the business process, for example. 4 stages “Assign”, “Investigate”, “Implement”, “Coordinate the closing process” (or something else, example).

The user will click the button to create a new Issue object with its own unique id number. Its form will depend on the type of its problem, its color of its status (red, amber, green, for example, without a plan, except for restoration according to plan, according to plan). Dragging it to the appropriate cell in the table would allocate it to the owner based on its row index and set the life cycle state based on the column index. Each time an object is dragged or dropped or otherwise changed, visual changes are reflected in the properties of the object in the database.

I am torn between using an HTML5 or SVG canvas element with some smart CSS. I can decide how to get the material already in the database on the screen, but not how to manipulate and save the changes through the screen. I also assume that this can be done in HTML / CSS / JavaScript / PHP / MySQL, but what other technologies can be used?

Answer 1

It looks like this works best as a client-centric ajax thing. It means:

• Write the whole user interface in Javascript. Whether you use canvas, svg, or plain HTML5 + CSS3 depends on your personal preferences, browser support, and feature requirements.
• The server has two tasks: it serves the javascript application and responds to ajax requests.

Drag and drop can be done entirely in Javascript; you probably want to use a javascript library that implements nitty-gritty for you (there are several jQuery extensions that you can use to do this); you only need to subscribe to the correct events and run ajax requests to update and request your data. For example, if a user drags an element into a table cell, you will get the element identifier, table cell identifier and run an ajax request that tells the server that “element X is now assigned to cell Y”, to which the server answers either “OK” (in this case, you you can make the change permanent in the user interface), or an error message (in this case, you probably want to open a notification or something like that).

The best choice for communication protocol is JSON; it is built into jQuery, as well as to most javascript implementations, it goes through firewalls and web browsers without any problems, and most software ecosystems (including PHP) have JSON encoding and decoding built into them. In addition, JSON has very low overhead compared to XML based alternatives.

In any case, it will not be easy, there is no magic bullet to make it work with a few clicks of the mouse, and you should ask if it is worth the effort. Also note that it is obvious that javascript-heavy interfaces will not work (or at all) when blocking scripts or on platforms without enough support for them - think about mobile devices with a weak processor and non-standard web browsers, etc.

Answer 2

I don't have a specific answer, but I have this bookmarked link a long time ago might help. http://www.webreference.com/programming/javascript/mk/column2/index.html - How to drag and drop in JavaScript and this: http://script.aculo.us/