Web UI: Dynamic Web Forms

Question

consider the following data structure:

subject (stdClass)
    topic (stdClass)
        units (int)
        title (varchar 50)
        description (varchar 255)
        start_time (time)
        end_time (time)
    teacher (stdClass)
        first_name (varchar 50)
        last_name (varchar 50)
    students (stdClass[])
        1 (stdClass)
            first_name (varchar 50)
            last_name (varchar 50)
        2 (stdClass)
            first_name (varchar 50)
            last_name (varchar 50)
        3 (stdClass)
            first_name (varchar 50)
            last_name (varchar 50)
    proctor (stdClass)
        first_name (varchar 50)
        last_name (varchar 50)

I'm having a problem on how to implement the above-mentioned data-structure into dynamic web forms. I'm not sure which type of implementation I will use to make it easier for the end-user to fill-up. At the same time preserving data integrity.

Scenario:

• A user should be able to provide the data needed to populate the "subject" object in one form. Meaning he will not be redirected to other pages (like a wizard) instead, the sub-forms per student are javascript generated.
• A user should be able to alter the data in the "subject" object on demand.
• There can be many students or none.
• Validation per sub-object is required.

So how should I present this using web-forms?

Answer 1

I'm facing a similar problem with one of my projects too, how to fill a vast amount of information in a non-obtrusive manner, preserving state on edits.

Technologies already exist to do this quite nicely, namely ajax and json. My project is built with PHP so my idea is to create a view which displays all data entry forms but it saves the data incrementally by sending the completed fields to a PHP script with ajax, which then saves/updates the object.

Theoretically with some javascript niceness it should be possible to make a very efficient interface (think completed sections have a save button and slide closed, which then can be opened for further editing)

Its possible to make this a very modular design, implementing for example write once fields, once saved cant be edited.

This is indeed a very interesting topic that many sites seem to struggle with. Please tell me if I grabbed the wrong end of the stick here and posted an answer which is not relevant/helpful

To reduce duplicate code and really make this sleek and manageable I would implement it with a MVC design pattern. Have your view send data whenever user stops typing in a field and its not empty. Then have the controller check if the field needs updating and send the correct acknowledgements back down to the view. Model will play its part too as you will be no doubt saving the data into your database.

The View will essentially be a modular ajax script, it has inputs and monitors them for changes, as soon as enough changes are made (to warrant a partial save) the ajax sends the data to the controller and collapses the relevant section to show that it has been completed. Likewise if you revisit the page and the controller sees that there is some data in the model for theese fields it sends it to the ajax view, which then fills in and collapses the prefilled sections =) Quite neat i think.

Edit: fixing typos, added MVC comment

Answer 2

based on the usability guidelines, fields should be grouped in fieldset element based on their subject / e.g. first/lastname together etc.

due to the large amount of data, some Javascript interface should be used to show page in steps (forms could be loaded at one page, but JS would serve to display and hide respective sections/fieldsets). submit would then send all data at once or alternatively AJAX could be sued after each section updated...

best things about fieldsets is they can be grouped as well and included into one another.