0

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.

5
Contributors
17
Replies
88
Views
3 Years
Discussion Span
Last Post by diafol
0

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

0

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.

Edited by iamthwee

0

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.

0

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

0

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.

Edited by iamthwee

0

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?

0

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.

0

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.

0

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

0

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

0

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.

0

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>

Edited by diafol

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.