Use less html elements inside your php codes !

ukyo · December 20, 2015

I, bored to write HTML elements inside my PHP code and i wrote a function for use less HTML elements. I think this function also could be helpful for you and maybe we can extend this function for use with all field types. For the moment the function only supporting fields like text, textarea or like these fields.

What is this function making ?

- Simply this function helping you to write less HTML elements in your PHP code.

For the moment its only a function maybe i can make it a module.

If you interest, here is gist link : https://gist.github.com/trk/b365f47793927006b1fb

Module Usage (Available configs):

<?php
// Available configs
$AvbMarkupOutputConfigs = array(
    'tag' => 'div', // Usage for self closed tag : 'hr:/', 'i:/'
    'attributes' => array(
        'class' => 'element-class', // output : class='element-class'
        'id' => 'element-id' // output : id='element-id'
        // Attributes
    ),
    'data-attributes' => array(
        'lat' => 'a-data-attribute' // output: data-lat='a-data-attribute'
        // Data Attributes : enter like normal attributes output will be data-your-attribute
    ),
    'prepend' => array(
        // You can use here like main
    ),
    'prepends' => array(
        array(
            // You can use here like main
        ),
        array(
            // You can use here like main
        )
        // .....
    ),
    'field' => 'title', // a field name from your page
    'value' => 'a custom value',
    'loop' => array(
        'tag' => 'div', // Usage for self closed tag : 'hr:/', 'i:/'
        'attributes' => array(
            'class' => 'element-class', // output : class='element-class'
            'id' => 'element-id' // output : id='element-id'
            // Attributes
        ),
        'data-attributes' => array(
            'lat' => 'a-data-attribute' // output: data-lat='a-data-attribute'
            // Data Attributes : enter like normal attributes output will be data-your-attribute
        ),
        'prepend' => array(
            // You can use here like main
        ),
        'prepends' => array(
            array(
                // You can use here like main
            ),
            array(
                // You can use here like main
            )
            // .....
        ),
        'fields' => array(
            'title', 'body' // Field names from your page
        ),
        'values' => array(
            'Custom Value 1', 'Custom Value 2', 'Custom Value 3' // You can use custom values for here
        ),
        'append' => array(
            // You can use here like main
        ),
        'appends' => array(
            array(
                // You can use here like main
            ),
            array(
                // You can use here like main
            )
            // .....
        )
    ),
    'child' => array(
        // You can use here like main
    ),
    'children' => array(
        array(
            // You can use here like main
        ),
        array(
            // You can use here like main
        )
        // .....
    ),
    'append' => array(
        // You can use here like main
    ),
    'appends' => array(
        array(
            // You can use here like main
        ),
        array(
            // You can use here like main
        )
        // .....
    ),
);
AvbMarkupOutput($AvbMarkupOutputConfigs, $page)
?>

Here are some examples about usage, i will make a before this function and after this function :

Before :

<?php
    $additionals = "foo bar some custom data";
    echo "\n<article class='uk-article'>
            \n\t<h1 class='uk-article-title'>{$page->title}</h1>
            \n\t<hr class='uk-article-divider' />
            \n\t{$page->body}
            \n\t{$additionals}
            \n</article>";
?>

After :

<?php
    $additionals = "foo bar some custom data";
    echo AvbMarkupOutput(array(
        'tag' => 'article',
        'attributes' => array(
            'class' => 'uk-article'
        ),
        'children' => array(
            array(
                'tag' => 'h1',
                'attributes' => array(
                    'class' => 'uk-article-title'
                ),
                'field' => 'title',
                'append' => array(
                    'tag' => 'hr:/',
                    'attributes' => array(
                        'class' => 'uk-article-divider'
                    )
                )
            ),
            array(
                'field' => 'body'
            ),
            array(
                'value' => $additionals
            )
        )
    ));
?>

Dive deep :

<?php
echo AvbMarkupOutput(array(
    'tag' => 'div',
    'attributes' => array(
        'class' => 'uk-container uk-container-center'
    ),
    'child' => array(
        'tag' => 'section',
        'attributes' => array(
            'class' => 'page'
        ),
        'child' => array(
            'tag' => 'article',
            'attributes' => array(
                'class' => 'uk-article'
            ),            
            'children' => array(
                array(
                    'tag' => 'h1',
                    'attributes' => array(
                        'class' => 'uk-article-title'
                    ),
                    'field' => 'title',
                    'append' => array(
                        'tag' => 'hr:/',
                        'attributes' => array(
                            'class' => 'uk-article-divider'
                        )
                    )
                ),
                array(
                    'field' => 'body'
                )
            )
        )
    )
));
?>
<!-- Output -->
<div class='uk-container uk-container-center'>
    <section class='page'>
        <article class='uk-article'>
            <h1 class='uk-article-title'><?=$page->title;?></h1>
            <hr class='uk-article-divider'/>
            <?=$page->body?>
        </article>
    </section>
</div>
<?php
// Create a table same like this :: http://getuikit.com/docs/table.html#usage
echo AvbMarkupOutput(array(
    'tag' => 'table',
    'attributes' => array(
        'class' => 'uk-table'
    ),
    'children' => array(
        array(
            'tag' => 'caption',
            'value' => 'Table caption'
        ),
        array(
            'tag' => 'thead',
            'child' => array(
                'tag' => 'tr',
                'child' => array(
                    'loop' => array(
                        'tag' => 'th',
                        'values' => array(
                            'Table Heading', 'Table Heading', 'Table Heading', 'Table Heading'
                        )
                    )
                )
            )
        ),
        array(
            'tag' => 'tfoot',
            'child' => array(
                'tag' => 'tr',
                'child' => array(
                    'loop' => array(
                        'tag' => 'td',
                        'values' => array(
                            'Table Footer', 'Table Footer', 'Table Footer', 'Table Footer'
                        )
                    )
                )
            )
        ),
        array(
            'tag' => 'tbody',
            'child' => array(
                'children' => array(
                    array(
                        'tag' => 'tr',
                        'child' => array(
                            'loop' => array(
                                'tag' => 'td',
                                'values' => array(
                                    'Table Data', 'Table Data', 'Table Data', 'Table Data'
                                )
                            )
                        )
                    ),
                    array(
                        'tag' => 'tr',
                        'child' => array(
                            'loop' => array(
                                'tag' => 'td',
                                'values' => array(
                                    'Table Data', 'Table Data', 'Table Data', 'Table Data'
                                )
                            )
                        )
                    ),
                    array(
                        'tag' => 'tr',
                        'child' => array(
                            'loop' => array(
                                'tag' => 'td',
                                'values' => array(
                                    'Table Data', 'Table Data', 'Table Data', 'Table Data'
                                )
                            )
                        )
                    ),
                    array(
                        'tag' => 'tr',
                        'child' => array(
                            'loop' => array(
                                'tag' => 'td',
                                'values' => array(
                                    'Table Data', 'Table Data', 'Table Data', 'Table Data'
                                )
                            )
                        )
                    )
                )
            )
        )
    )
));
?>
<!-- Output -->
<table class='uk-table'>
    <caption>Table caption</caption>
    <thead>
        <tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
            <td>Table Footer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

You can make nested calls !

tpr · December 20, 2015

I understand the motivation but think about these: maintenance and readability. Will you, or the next developer know what's going on without pulling out his hair? (for example, six month later)

Perhaps you should try Jade:

http://jade-lang.com/

LostKobrakai · December 20, 2015

You may like the syntax, that mithril.js is using.

ukyo · December 20, 2015

I don't need a template engine or a js library. I write this function like i said, Use less html elements inside your php codes !

@LostKobrakai

For syntax maybe something like this could be helpful :

- $page->title('h1');

- $page->title->output(array('tag' => 'h1', 'attributes' => array('class' => 'my-page-title'));

- $pages->get(1)->children->output(array('tag' => 'li', 'attributes' => array('class' => 'my-child-item'), 'field' => 'title'));

LostKobrakai · December 20, 2015

I wasn't talking about mithril as framework, but just how it's handling markup generation, which is also based on abstract functions.

ukyo · December 22, 2015

I wasn't talking about mithril as framework, but just how it's handling markup generation, which is also based on abstract functions.

@LostKobrakai above answer not for you : I don't need a template engine or a js library. I write this function like i said, Use less html elements inside your php codes !

its for first comment.

I converted markup to a module and working on it. Can you check here and if you have time can you check usage ?

https://github.com/trk/AvbMarkupHtml i will update repo if have have new things

Beluga · December 22, 2015

Hmm.. he didn't mean you should use mithril, but to be inspired by it

See http://lhorie.github.io/mithril/getting-started.html

todo.view = function() {
    return m("html", [
        m("body", [
            m("input"),
            m("button", "Add"),
            m("table", [
                m("tr", [
                    m("td", [
                        m("input[type=checkbox]")
                    ]),
                    m("td", "task description"),
                ])
            ])
        ])
    ]);
};

ukyo · December 23, 2015

Hmm.. he didn't mean you should use mithril, but to be inspired by it

See http://lhorie.github.io/mithril/getting-started.html

todo.view = function() {
    return m("html", [
        m("body", [
            m("input"),
            m("button", "Add"),
            m("table", [
                m("tr", [
                    m("td", [
                        m("input[type=checkbox]")
                    ]),
                    m("td", "task description"),
                ])
            ])
        ])
    ]);
};

This is not clear like my array solution. I don't want syntax like this.

My syntax will like (Module Usage) :

<?php
// All Configs
$config = array(
    'htmlFormatter' => true,
    'indentWith' => '    ',
    'tagsWithoutIndentation' => 'html,link,img,meta',
    'page' => null,
    'tag' => null,
    'tagSelfClosed' => null,
    'prepend' => '',
    'prepends' => '',
    'attributes' => '',
    'dataAttributes' => '',
    'label' => '',
    'note' => '',
    'text' => '',
    'texts' => array(),
    'field' => '',
    'field_value' => '',
    'fields' => array(),
    'loop' => '',
    'child' => '',
    'children' => '',
    'append' => '',
    'appends' => ''
);

// All Methods
$page->html(array('key', 'value')) // $config
    ->tag('string', array('key', 'value')) // tag name, quick attributes
    ->attributes(array('key', 'value')) // attributes
    ->dataAttributes(array('key', 'value')) // data-attributes, this will add auto data- prefix to your attribute
    ->prepend('string') // a string value
    ->prepends(array('values')) // array for values
    ->text('string') // text for inner tag
    ->field('field_name', 'page_object') // Field name and page object
    ->loop() // !! will work on this !!
    ->texts(array()) // !! will work on this !!
    ->fields(array()) // !! Will work on this !!
    ->note() // !! will work on this !!
    ->label() // !! Will work on this !!
    ->append('string') // a string value
    ->appends(array('values')) // array for values
    ->render() // This will return result
    ->output(); // This will print result

$title = $page->html('title')->tag('h1', array('class'=>'h1-class'))->render();
echo $title;

// This will directly print
$page->html('title')->tag('h1', array('class'=>'h1-class'))->output();

// Self Closed Tag
$modules->AvbMarkupHtml->html()->tag('hr:/')->output();

// Example #1
$page->html('title')->tag('h1', array('class' => 'my-h1-title'))->output();

// Example #2
$page->html('title', $pages->get('/contact/'))->tag('h1', array('class' => 'my-h1-title'))->output();

// Example #3
$modules->AvbMarkupHtml->html()->tag('div', array('class' => 'container'))->children(array(
    $page->html('title')->tag('h1', array('class' => 'my-title'))->render(),
    $page->html('body')->tag('div', array('class' => 'my-body'))->render()
))->output();

// Example #4 | Multiple child, prepend, append
$html = $page->html()->tag('div', array('class' => 'uk-container uk-container-center'));

$html->prepend(
    $page->html()->tag('div')->text('Prepend #1 !')->render()
);
$html->prepend(
    $page->html()->tag('div')->text('Prepend #2 !')->render()
);
$html->child(
    $page->html()->tag('div')->text('Hey !')->render()
);
$html->child(
    $page->html()->tag('div')->text('Foo !')->render()
);
$html->child(
    $page->html()->tag('div')->text('Bar !')->render()
);
$html->append(
    $page->html()->tag('div')->text('Append #1 !')->render()
);
$html->append(
    $page->html()->tag('div')->text('Append #2 !')->render()
);
$html->output();

// Example #5 | Create A HTML page
// Create Html Tag
$html = $page->html()->tag('html', array(
    'lang' => 'en',
    'dir' => 'ltr'
));

// Create Head Tag
$head = $page->html()->tag('head');

// Add TITLE inside HEAD tag
$head->child(
    $page->html()->tag('title')->text('My Website')->render()
);
// Put HEAD inside HTML Tag
$html->child($head->render());

// Create BODY Tag
$body = $page->html()->tag('body', array('class' => $page->template));

// Create DIV Tag
$container = $page->html()->tag('div', array('class' => 'container'));
$container->children(array(
    $page->html()->tag('h1', array('class' => 'h1-title'))->text('H1 Title')->render(),
    $page->html()->tag('div', array('class' => 'body-content'))->text('Body Content')->render()
));

// Put DIV.container inside BODY Tag
$body->child($container->render());

// Put BODY inside HTML Tag
$html->child($body->render());
$html->output();

/* OUTPUT
<html lang='en' dir='ltr'>
<head>
    <title>
         My Website
    </title>
</head>
<body class='homepage'>
    <div class='container'>
        <h1 class='h1-title'>
             H1 Title
        </h1>
        <div class='body-content'>
             Body Content
        </div>
    </div>
</body>
</html>
*/
?>

ukyo · December 23, 2015

Now it is a module !

You can continue topic from : https://processwire.com/talk/topic/11761-avbmarkuphtml/

Sign In

Use less html elements inside your php codes !

Recommended Posts

ukyo

Link to comment

Share on other sites

tpr

Link to comment

Share on other sites

LostKobrakai

Link to comment

Share on other sites

ukyo

Link to comment

Share on other sites

LostKobrakai

Link to comment

Share on other sites

ukyo

Link to comment

Share on other sites

Beluga

Link to comment

Share on other sites

ukyo

Link to comment

Share on other sites

ukyo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Store

My Details

Support