How to handle user generated form with multiple levels of tabs and modules in PHP?

Question

So I have this interface for users to build their own display. It allows them to add jQuery Tabs 1st and 2nd level. And on the 2nd level, they can add in modules like text box and image box.

Here is a screenshot of the interface Interface Sample

So from the screenshot you can see that 1st level of tabs can have any number of tabs and so is 2nd level. And only 2nd level will have the modules.

I can't wrap my ahead around how I can handle this form in PHP. How can I successfully save this and spit it back out when needed? How would you guys handle this?

Thanks...

What about generating ID's [like this](http://codepad.org/L8h9HEna) in an array form and then JSON encode it and send it to PHP ? — HamZa, May 18 '13 at 16:24
To be honest, I am not sure because since these are dynamic, I have to generate the proper input name/value pairs with JS. So I am not sure how the input values will look...I don't have much experience with multiple dimensional arrays like this on a form. — , May 18 '13 at 17:44
Well the array idea, you can view it as a "tree". It goes from the top to the bottom. But still I think you have a tough problem, adding another problem: what if the user adds a drop down box with multiple options :p — HamZa, May 18 '13 at 17:51
Actually the boxes are set and doesn't change...So there will only be two possible modules...text and image..and their inputs don't change. So the only thing that is dynamic is how many tabs and what their names are as user can change that and for each tab, how many tabs under that. Then for the 2nd level tabs, which modules belong to it...My mind is just going crazy thinking about this....But surely I can't be the only one doing this type of interface right? I searched high and low on google and stackoverflow for someone with same situation and I couldn't find any....sigh.... — , May 18 '13 at 18:08
....Not much..I just have the JS that builds what you see in the screenshot...No PHP code yet as I need to figure out how to generate the input fields first...anyways I probably will give up on this as I am not competent enough to make it work...thanks again for trying! — , May 18 '13 at 18:17

score 0 · Accepted Answer · edited May 23 '17 at 10:30

Nice interface. What i should do:

The database structure:

Store tabs hierarchical in: {tabid}|{parentid}|{tabname} Store text and images in: {id}|{tabid}|{content}|{type}

The html structure:

Build one form and put your tab structure in it. Maybe take a look at: http://twitter.github.io/bootstrap/javascript.html#tabs

example:

       <form method="post" action="savetabbedinterface">
       <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#messages">Messages</a></li>
        <li><a href="#settings">Settings</a></li>
        </ul>

        <div class="tab-content">
        <div class="tab-pane active" id="home">...</div>
        <div class="tab-pane" id="profile">...</div>
        <div class="tab-pane" id="messages">...</div>
        <div class="tab-pane" id="settings">...</div>
        </div>
       </form>

When your form will be submit all the tabs content will be saved once.

Use form inputs with indices (array(s) of arrays) see: How to POST data as an indexed array of arrays (without specifying indexes)

Actions:

When the user adds a tab: -add a hidden field to the form with: name="tabs[0][{numberoftabs+1}]" value="{tabname}"

When the user adds a sub tab: -add a hidden field to the form with: name="tabs[parenttabid][{numberofsubtabsforthisparent+1}]" value="{tabname}" -create a content

When the user adds a image box: add a to the content with name="images[{tabid}][]"

When the user adds a text box: add a to the content with name="texts[{tabid}][]">

Use javascript or jQuery to add this elements dynamically.

When the form has been submit you can iterate the $_POST['tabs'], etc to store the information of the interface.

In stead of {numberoftabs+1} you can also use a empty array [] you have to save the order of your tabs in that case after submit.

Form field indices with only number can cause problems. Add a char before the numbers to prevent this: name="tabs[p0][t{numberoftabs+1}]"

Good luck

Update: I generate a prototype for adding and saving tabs, see: http://bootply.com/61771. The prototype uses Twitter Bootstrap and jQuery.

Adding tabs and sub tabs will generate the form like:

<input type="hidden" value="Tab 1" name="tabs[p0][t1]">
<input type="hidden" value="Tab 2" name="tabs[p0][t2]">
<input type="hidden" value="Tab 3" name="tabs[p0][t3]">
<input type="hidden" value="SubTab 1" name="tabs[p2][t1]">
<input type="hidden" value="SubTab 2" name="tabs[p2][t2]">
<input type="hidden" value="SubTab 3" name="tabs[p2][t3]">
<input type="hidden" value="SubTab 1" name="tabs[p1][t1]">
<input id="savebutton" class="btn" type="submit" value="save interface">

After submit the form you could use php to save the input, print_r[$_POST]:

Array ( [tabs] => Array ( [p0] => Array ( [t1] => Tab 1 [t2] => Tab 2 [t3] => Tab 3 ) [p2] => Array ( [t1] => SubTab 1 [t2] => SubTab 2 [t3] => SubTab 3 ) [p1] => Array ( [t1] => SubTab 1 ) ) )

Thank you for your input. Can you explain how the curly braces work in this case as I've never seen them used in this context before. — , May 19 '13 at 05:33
you don't have to use the curly braces. Replace the curly braces with your own code. The curly braces are example code, text between them describes what you need to enter. — Bass Jobsen, May 19 '13 at 08:20
Hey thanks again for the idea! It is very helpful. I just have one question, what if the modules being added can be sorted as well. As in users can drag and drop it to different positions. If that is the case, how would you account for that in your example? — , May 19 '13 at 14:33
Maybe you could add an extra field the content table (int) order. Field name for an image box will become name="images[{tabid}][{orderid}]". See here for an example: http://www.gregphoto.net/sortable/index.php — Bass Jobsen, May 19 '13 at 14:49

How to handle user generated form with multiple levels of tabs and modules in PHP?

1 Answers1