Member Avatar for iamthwee

Hey guys, I'm creating an ultimate CMS with codeigniter, at the moment I've got the following

-login system with email
-installer
-menu builder with drag and drop
-forums with search and create categories
-Blog and and edit posts

I'm looking for a page builder now. Specifically to drag and drop and build pages with content. Some of the questions I have are how best to save this in the database, what would be a good table structure. Page builders, specifically adding rows, and columns, adding text content, adding images.

Any advice would be grand.

Go for Joomla or APS.Net it would be easier I hope.

You mean something like TinyMCE or are you aiming for more of an advanced Wordpress style drag and drop page builder?

Member Avatar for iamthwee

More advanced drag and drop and no I don't want to use wordpress or joomola. I am specifically looking for ways to store the drag and drop bits in my database.

I'm not sure what a Wordpress style drag 'n' drop builder is.

However, I would create a single table called rows. The structure would be something like this:

user_id    order    block_title     block_content

1          10       Foo             Bar
1          20       Baz             Bat
2          10       A               B

As users rearranged blocks, the order column would change.

Member Avatar for iamthwee

No that is not the best way... I've looked into the db entries in a wp drag and drop page builder and they store ALL the page content in one field in the database. Looks like they just use shortcodes...

So they might store [col span="12"] the content [/col] as a shortcode which renders as <div class="col-12">the content</div>

Yii seems to have an inbuilt shortcode generator and parser. Perhaps I can steal the source code from wordpress.

To be continued...

Member Avatar for iamthwee

OK things are coming on quite nicely

I have another quick question...

Any ideas how to convert a html div back to a shortcode?

So let's say I have <div class="col12"> hello </div>back to [col span="12"]hello[/col]

I was thinking of saving the shortcode inside the div inside another hidden div.

Any other ideas are welcome.

Member Avatar for diafol

Using preg functions for html is messy and prone to error. DomDocument can be used to itemise attributes and properties and to reformat the tag. There must be ready-made classes out there.

Why would you want to save a shortcode inside a hidden div?

Member Avatar for iamthwee

Well the page builder style will be different from the actual rendered output that's why I'm saving the shortcode as a hidden div...

so I was thinking in the database save the page with two fields, one the page builder html content and two the shortcodes content. I will post something up tomorrow.

Member Avatar for diafol

OK. If you're looking to do a live render from a drag/drop/form with shortcodes, then storing both would make some sense. I'd look for a js solution to this possibly - ajaxified php may be a bit cumbersome. Just send the shortcode version and parsed version to the db on 'save'.

You could have a 3-view panel: shortcode, htmlentitied parsed code and live view. That would be cool :)

The only concern with shortcodes is the learning phase, there may be a lot to learn, depending on your implementation and some codes may be counter-intuitive or difficult to remember. But you're developing a page builder to be as error-free as possible, so I suppose forcing users (noobs) to use shortcodes is not too bad a thing. You then have control over styling hooks and a certain amount of templating.

Tenuous Link

I've been using zen coding recently: https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn and http://secretgeek.net/zen/coding.htm and although it's not quite what you're aiming for, it certainly makes the building of html a lot simpler, but again it has a certain learning curve and relies on a working knowledge of html.

Member Avatar for iamthwee

Yes I am hoping to do a page preview, but the end user won't need to learn shortcodes. I will create a jquery button which automatically pastes the shortcode and content inside.

I'm considering releasing my code to the general public but I am yet to make a decision depending on the license.

____
I'm using snippets in sublime so I have all my zen coding to hand already :)

Member Avatar for diafol

I'm using snippets in sublime so I have all my zen coding to hand already :)

Ah, good man! ;)

If the user is not going to see the shortcodes - why do you need them? How does modifying the shortcodes work? Do you need to use preg functions? As I mentioned previously, I think DomDocument (and possible the xpath object) could do what you need, without resorting to shortcodes. But hey, you know your project better than me. :)

Member Avatar for iamthwee

Basically the shortcodes make the code stored in the db less verbose and more easy to change the styling in the future if needed. It is a wonderful tool.

At the moment I am using blocks to specify what elements go where and the column width. The function do_shortcode() simply takes a shortcode string and renders it in html. In my draggable columns I am going to store a hidden div with the shortcode for that column.

Then I will isolate that and put the content of that inside and store it in a database. It is really elegant now I think about it. I may post some code if I feel like releasing this to further explain my point.

Member Avatar for diafol

cool :)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
    font-family:Verdana, Geneva, sans-serif;
}

#shortcodeView, #htmlView, #liveView{
    border: 1px black solid;
    padding: 4px;
    font-family: "Courier New", Courier, monospace;     
}

</style>
</head>

<body>
<div id="stage">
<label>Modify '...' and tab away:</label>
<textarea>[col span="12"]...[/col]</textarea>
</div>
<h3>Shortcode</h3>
<div id="shortcodeView">
</div>
<h3>HTML</h3>
<div id="htmlView">
</div>
<h3>Live View</h3>
<div id="liveView">
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

    $('#stage').on("change",function(){
        var shortcode = $('#stage textarea').val();
        var html = htmlify(shortcode);
        var htmlEnt = htmlentities(html);

        $('#shortcodeView').html(shortcode);
        $('#htmlView').html(htmlEnt);
        $('#liveView').html(html);

    });

    function htmlify(val)
    {
        //quick'n'dirty test function
        var html = val.replace(/(\[col span="(\d+)"\])([^\[]+)(\[\/col])/, "<div class='col$2'>$3</div>");
        return html;
    }

    // Taken from http://css-tricks.com/snippets/javascript/htmlentities-for-javascript/
    function htmlentities(val)
    {
        return String(val).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
</script>
</body>
</html>
Member Avatar for iamthwee

Thanks for the contribution diafol but I don't want to go down the road of writing my own regular expressions. Plus, a shortcode could be nested.

Wordpress's shortcode core does what it says on the tin and has been tried and tested.

Member Avatar for diafol

It wasn't meant as a suggestion - that was my quick and dirty code to get it up and running. It was just a view shortcode, view html and live preview demo. I agree the creation of a bbcode clone would be a major undertaking and pointless besides as it's already available.

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.