EasyHtmlElement
, (*1)
An easy way to create simple or complex html elements in PHP., (*2)
EasyHtmlElement is an open source software library which allows you to define a map of your html elements and use them simply in your html code. You can define simple elements like links, buttons, lists, images or use custom types. But the power of this library is to define complex html structures with elements which has attributes, parent, children or extends others elements attributes. And after your elements map made, you can do it with only one PHP method!, (*3)
Installation
Composer
Find all informations about Composer from https://getcomposer.org/, (*4)
Run the following command:, (*5)
$ composer require natepage/easy-html-element
Repository
You can directly clone the repository but you'll have to install the dependencies manually., (*6)
Usage
Did you already use an array in PHP? Yes? Nice! With EasyHtmlElement just have to create a simple PHP array and we manage the rest! We'll call this array map for all the next examples., (*7)
So map is a simple key/value array where you will define your html elements like:, (*8)
- key (string): The element name you'll use to generate it in your code
- value (array): All the element informations
Simple example
``` php
$map = array(
'myDiv' => array(
'type' => 'div',
'text' => 'Simple Div Example'
)
);, (*9)
$htmlElement = new NatePage\EasyHtmlElement\HtmlElement();
$div = $htmlElement->load('myDiv');, (*10)
echo $div;, (*11)
/**
*, (*12)
* Simple Div Example
*
*/, (*13)
In the example above we just display a simple div and yes I agree you don't really need a library to do that but it's to show the logic so if you want to see the real power of EasyHtmlElement keep reading!
You can see you don't need to call a specific method to render elements, we use the magic method ___toString()_ to make your life easier! :)
####More Complex Example (Bootstrap Panel)
``` php
$map = array(
//Base div
'div' => array(
'type' => 'div'
),
//Base panel structure
'panel' => array(
'extends' => array('div'),
'attr' => array('class' => 'panel'),
'children' => array(
'panelHeading',
'panelBody',
'panelFooter'
)
),
//Panel heading
'panelHeading' => array(
'extends' => array('div'),
'attr' => array('class' => 'panel-heading'),
'children' => array(
array(
'name' => 'panelHeadingTitle',
'type' => 'h3',
'attr' => array('class' => 'panel-title'),
'text' => '%panel_title%'
)
)
),
//Panel body
'panelBody' => array(
'extends' => array('div'),
'attr' => array('class' => 'panel-body'),
'text' => '%panel_body%'
),
//Panel footer
'panelFooter' => array(
'extends' => array('div'),
'attr' => array('class' => 'panel-footer'),
'text' => '%panel_footer%'
),
//Primary panel structure
'panelPrimary' => array(
'extends' => array('panel'),
'attr' => array('class' => 'panel-primary')
)
);
$htmlElement = new \NatePage\EasyHtmlElement\HtmlElement($map);
$panelPrimary = $htmlElement->load('panelPrimary', null, array(), array(
'panel_title' => 'My Panel Title',
'panel_body' => 'My Panel Body',
'panel_footer' => 'My Panel Footer'
));
echo $panelPrimary;
/**
*
*
*
My Panel Title
*
*
* My Panel Body
*
*
*
Here we have:
* All the panel components extend the Base div element to get the div type
* Base panel structure define children to make its content
* All elements define their own attributes with attr
* Panel heading defines a dynamic child directly in its children array
* Primary panel structure extends all the Base panel structure and add a css class
* Some parameters with the %parameter% syntax which allows you to define dynamic content, (*14)
A complex and dynamic html structure in just on method, that's what EasyHtmlElement promised you!, (*15)
Integrations
EasyHtmlElement provides integrations for:, (*16)
More informations from integrations., (*17)
Documentation
Does it make you want to learn more about the EasyHtmlElement power?, (*18)
Read the documentation., (*19)
Dependencies
We actively recommend you to use symfony/yaml to make your map building easier., (*20)
Customization
If you need to customize the code logic, EasyHtmlElement one more time makes it easier for you with somes interfaces. All informations in the documentation., (*21)
Contributing
Please don't hesitate to open an issues or a pull request if you find something wrong in the code, a typo in the documentation, if you have an evolution idea in mind or if you just want to say hello! :), (*22)
Versioning
EasyHtmlElement is maintained under the Semantic Versioning guidelines so releases will be numbered with the following format:, (*23)
MAJOR.MINOR.PATCH
For more informations on SemVer, please visit http://semver.org, (*24)
Wallogit.com
