{"id":17130315,"url":"https://github.com/natepage/easy-html-element","last_synced_at":"2025-04-13T07:26:28.945Z","repository":{"id":57023939,"uuid":"79116218","full_name":"natepage/easy-html-element","owner":"natepage","description":"An easy way to create simple or complex html elements in PHP.","archived":false,"fork":false,"pushed_at":"2017-01-30T10:17:21.000Z","size":65,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-05T14:11:43.561Z","etag":null,"topics":["composer","html-element","php"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/natepage.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-16T12:28:50.000Z","updated_at":"2023-09-05T01:09:50.000Z","dependencies_parsed_at":"2022-08-23T14:20:45.353Z","dependency_job_id":null,"html_url":"https://github.com/natepage/easy-html-element","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natepage%2Feasy-html-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natepage%2Feasy-html-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natepage%2Feasy-html-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/natepage%2Feasy-html-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/natepage","download_url":"https://codeload.github.com/natepage/easy-html-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240045015,"owners_count":19739185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composer","html-element","php"],"created_at":"2024-10-14T19:12:06.132Z","updated_at":"2025-02-23T01:31:12.168Z","avatar_url":"https://github.com/natepage.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eEasyHtmlElement\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://travis-ci.org/natepage/easy-html-element\"\u003e\u003cimg src=\"https://travis-ci.org/natepage/easy-html-element.svg?branch=master\" alt=\"Build Status\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://insight.sensiolabs.com/projects/1ca37d08-6889-4280-aa4c-5739bf2be48a\"\u003e\u003cimg src=\"https://img.shields.io/sensiolabs/i/1ca37d08-6889-4280-aa4c-5739bf2be48a.svg\" alt=\"SensioLabs Insight\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://scrutinizer-ci.com/g/natepage/easy-html-element\"\u003e\u003cimg src=\"https://img.shields.io/scrutinizer/g/natepage/easy-html-element.svg\" alt=\"Quality Score\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eAn easy way to create simple or complex html elements in PHP.\u003c/p\u003e\n\n---\n\n**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!\n\n##Installation\n####Composer\nFind all informations about Composer from `https://getcomposer.org/`\n\nRun the following command:\n```\n$ composer require natepage/easy-html-element\n```\n\n####Repository\nYou can directly clone the repository but you'll have to install the dependencies manually.\n\n##Usage\nDid 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.\n\nSo _map_ is a simple key/value array where you will define your html elements like:\n\n* key (string): The element name you'll use to generate it in your code\n* value (array): All the element informations\n\n####Simple example\n``` php\n$map = array(\n    'myDiv' =\u003e array(\n        'type' =\u003e 'div',\n        'text' =\u003e 'Simple Div Example'\n    )\n);\n\n$htmlElement = new NatePage\\EasyHtmlElement\\HtmlElement();\n$div = $htmlElement-\u003eload('myDiv');\n\necho $div; \n\n/**\n * \u003cdiv\u003e\n *      Simple Div Example\n * \u003c/div\u003e\n */\n```\nIn 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!\n\nYou 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! :)\n\n####More Complex Example (Bootstrap Panel)\n``` php\n$map = array(\n    //Base div\n    'div' =\u003e array(\n        'type' =\u003e 'div'\n    ),\n    //Base panel structure\n    'panel' =\u003e array(\n        'extends' =\u003e array('div'),\n        'attr' =\u003e array('class' =\u003e 'panel'),\n        'children' =\u003e array(\n            'panelHeading',\n            'panelBody',\n            'panelFooter'\n        )\n    ),\n    //Panel heading\n    'panelHeading' =\u003e array(\n        'extends' =\u003e array('div'),\n        'attr' =\u003e array('class' =\u003e 'panel-heading'),\n        'children' =\u003e array(\n            array(\n                'name' =\u003e 'panelHeadingTitle',\n                'type' =\u003e 'h3',\n                'attr' =\u003e array('class' =\u003e 'panel-title'),\n                'text' =\u003e '%panel_title%'\n            )\n        )\n    ),\n    //Panel body\n    'panelBody' =\u003e array(\n        'extends' =\u003e array('div'),\n        'attr' =\u003e array('class' =\u003e 'panel-body'),\n        'text' =\u003e '%panel_body%'\n    ),\n    //Panel footer\n    'panelFooter' =\u003e array(\n        'extends' =\u003e array('div'),\n        'attr' =\u003e array('class' =\u003e 'panel-footer'),\n        'text' =\u003e '%panel_footer%'\n    ),\n    //Primary panel structure\n    'panelPrimary' =\u003e array(\n        'extends' =\u003e array('panel'),\n        'attr' =\u003e array('class' =\u003e 'panel-primary')\n    )\n);\n\n$htmlElement = new \\NatePage\\EasyHtmlElement\\HtmlElement($map);\n$panelPrimary = $htmlElement-\u003eload('panelPrimary', null, array(), array(\n    'panel_title' =\u003e 'My Panel Title',\n    'panel_body' =\u003e 'My Panel Body',\n    'panel_footer' =\u003e 'My Panel Footer'\n));\n\necho $panelPrimary;\n\n/**\n * \u003cdiv class=\"panel-primary panel\"\u003e\n *      \u003cdiv class=\"panel-heading\"\u003e\n *          \u003ch3 class=\"panel-title\"\u003eMy Panel Title\u003c/h3\u003e\n *      \u003c/div\u003e\n *      \u003cdiv class=\"panel-body\"\u003e\n *          My Panel Body\n *      \u003c/div\u003e\n *      \u003cdiv class=\"panel-footer\"\u003e\n *          My Panel Footer\n *      \u003c/div\u003e\n * \u003c/div\u003e\n */\n```\nHere we have:\n* All the panel components extend the _Base div_ element to get the _div_ type\n* Base panel structure define _children_ to make its content\n* All elements define their own attributes with _attr_\n* Panel heading defines a dynamic child directly in its children array\n* Primary panel structure extends all the Base panel structure and add a css class\n* Some parameters with the _%parameter%_ syntax which allows you to define dynamic content\n\nA complex and dynamic html structure in just on method, that's what EasyHtmlElement promised you!\n\n##Integrations\nEasyHtmlElement provides integrations for:\n\n* Symfony\n* Twig\n* Laravel\n\nMore informations from [integrations](doc/integrations.md).\n\n##Documentation\nDoes it make you want to learn more about the EasyHtmlElement power?\n\nRead the [documentation](doc/index.md).\n\n##Dependencies\n* [airmanbzh/php-html-generator](https://github.com/Airmanbzh/php-html-generator) to render html elements\n* [zendframework/zend-escaper](https://github.com/zendframework/zend-escaper) to secure the generated html code with escaping strategies\n\nWe actively recommend you to use [symfony/yaml](http://symfony.com/doc/current/components/yaml.html) to make your map building easier.\n\n##Customization\nIf you need to customize the code logic, EasyHtmlElement one more time makes it easier for you with somes interfaces. All informations in the [documentation](doc/customization.md).\n\n##Contributing\nPlease 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! :)\n\n##Versioning\nEasyHtmlElement is maintained under the Semantic Versioning guidelines so releases will be numbered with the following format:\n```\nMAJOR.MINOR.PATCH\n```\nFor more informations on SemVer, please visit `http://semver.org`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnatepage%2Feasy-html-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnatepage%2Feasy-html-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnatepage%2Feasy-html-element/lists"}