Ultimate CMS page builder

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?

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.

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...

http://pastebin.com/6E48Cfpc

How to use that inside codeigniter?

Ok I am using the following straight from the wordpress core and it appears to work.

https://github.com/WordPress/WordPress/blob/master/wp-includes/shortcodes.php

So now I just gotta get working on the page builder.

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.

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?

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.

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.

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.

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 :)

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. :)

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.

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>

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.

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.