Member Avatar for iamthwee

Sup peeps,

I'm building an ultimate CMS and I am looking into building a drag and drop menu.

I alreadly have the jquery to create the drag and drop items but I was wondering what is the best way to save this to a database.

<ul>
    <li>stuff</li>
    <li>morestuff</li>
    <ul>
        <li>ssstuff</li>
    </ul>
</ul>

Would it be wrong to just store the entire html string in the database. Or would it be better to do a parent child relationship.

If you think the parent child relationship is better my next question is how, using jquery or php do you convert the above unordered list to a parent child relationship preserving order?

Ta.

Recommended Answers

All 24 Replies

Member Avatar for diafol

For your cms - I would suggest not storing any HTML - just data, as you may wish to provide themes (which are different to styles).

BTW
Your unordered menu I think is wrong.
The 'sub ul' should be in an li tag itself...

<ul>
    <li>menu1</li>
    <li>menu2
        <ul>
            <li>menu2.1</li>
            <li>menu2.2
                <ul>
                    <li>menu2.2.1</li>
                    <li>menu2.2.2</li>
                    <li>menu2.2.3</li>
                </ul>
            </li>
            <li>menu2.3</li>
        </ul>
    </li>
    <li>menu3</li>
</ul>

You can get the order to php either by traditional form - where js has modified 'position-value' values or do it via ajax.

Member Avatar for diafol

Is this ultimate CMS for public consumption or is it just for you?

Member Avatar for iamthwee

Just for me and my clients...Why?

Member Avatar for iamthwee

My head hurts I don't have a clue how to do this.

Member Avatar for iamthwee

It's not the second bit I'm struggling with, it is converting the unordered lister to a parent child relationship or a multi-dimensional array.

There are loads of examples doing the second but not the first?

Member Avatar for diafol

This is where you may need to use a dom parser - especially if you're using drag and drop. Some js implementations have some sort of data storage - but I haven't used one for some time.

The sortable jqueryUI list may shed light on this - but again I haven't used this for some time.

If you get the data into a json structure and fiddle to your heart's content :) Send the data to php in whichever format you need or let php format the data for you.

Member Avatar for iamthwee

I think I found my answer. I know it is bad but I'm going to store my menu as one json array rather than a parent child relationship.

I'm going to use the handy library fastfrag.

http://json.fastfrag.org/

Member Avatar for diafol

I don't think it's that bad, but if you're going to do that - how about using a NoSQL db like Mongo? Placing json data into one text field does somehow defeat the object of storing in a relational db.

However, if this is the only instance of json structure that you need to store, well perhaps NoSQL that's overkill.

An interesting article here: http://backchannel.org/blog/friendfeed-schemaless-mysql

Member Avatar for iamthwee

I just can't see any advantage of storing it as a relational database model, I won't need to sort the tables and it is just one top level menu which aren't linked to anything.

I was looking at another script that costs $9 which looks tempting to buy, so I'm in two minds about building this from scratch. Will see how I feel.

Member Avatar for iamthwee

OK I need a little help with jquery, I decided to write my own.

If my menu looks like this:

<ol class="dd-list">
            <li class="dd-item dd3-item" >
                <div class="dd-handle dd3-handle">Drag</div>
                <div class="dd3-content">Home</div>
                <div class="url" style="display:none;">homeurl</div>

            </li>
            <li class="dd-item dd3-item" >
                <div class="dd-handle dd3-handle">Drag</div>
                <div class="dd3-content">About Us</div>
                <div class="url" style="display:none;">ssss</div>
            </li>
            <li class="dd-item dd3-item" >
                <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Pricing</div>
                <div class="url" style="display:none;">ddd</div>
                <ol class="dd-list">
                    <li class="dd-item dd3-item" >
                        <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Contact</div>
                        <div class="url" style="display:none;">ddd</div>
                    </li>
                    <li class="dd-item dd3-item" >
                        <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Something</div>
                        <div class="url" style="display:none;">ddd</div>
                    </li>
                    <li class="dd-item dd3-item" >
                        <div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">test</div>
                        <div class="url" style="display:none;">ddd</div>
                    </li>
                </ol>
            </li>
          </ol>

What I want, is when you click on a div dd-item, it will get the content and url.

So if I click on the first one it will show 'home' and 'homeurl'

I will then need an option to delete the node selected and all div underneath it.

Member Avatar for iamthwee

I don't know if this helps but I can assign a unique id to each 'li' element.

Member Avatar for iamthwee

Ugh I'm so close

 $(".dd-list li").click(function(){
        alert($(this).find('.dd3-content').html());
        alert($(this).find('.url').html());
    });

I've got this but it is getting the content and url of the li and the one above it, if it more than one level deep. I just need the level clicked. Also how can I delete the node clicked?

http://jsfiddle.net/R89Xk/

Member Avatar for diafol

You realise that you've posted jquery to the PHP forum? I realise that many of us deal with jq, but this is not the place to put it.

Member Avatar for iamthwee

I do realise but I'd rather not separate the thread as it is related but I will post in the javascript forum as well.

Can you help?

Member Avatar for diafol

I do realise but I'd rather not separate the thread as it is related but I will post in the javascript forum as well.

Perhaps it would be best to 'solve' this one and post a link to the new thread. I'm no jQuery expert, but there should be some in the other forum. :)

Member Avatar for iamthwee

Ok I have finished building my own menu builder... I'm just waiting on another thread for an answer to convert the html to a multi-dimensional array.

Can someone please evaluate the functionality of my builder.

8b8c03301c108c031dd18c18907ef6ca

Member Avatar for iamthwee

No feedback?

Member Avatar for diafol

Without running it, how about having a trashcan icon that you can drag menu items onto in order to delete them?

ALso, it may be an idea to make the menu strips editable, so clicking on the name or url displays an in situ textbox which updates automatically when you exit (blur) the textbox. Just an idea. I'll try to download and have a proper look when I have time. But pretty busy at the mo.

Member Avatar for iamthwee

Thanks that would be great, it contains no PHP or db so it there is no risk to your system. I'm just trying to recurse through the html now and save it as a parent child relationship.

Member Avatar for iamthwee

For anyone who is interested in converting an unordered/ordered list to a parent child relationship whilst preserving the classes I used a php class called html2array... But I had to heavily modify it to strip out all the crap.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.