{"id":18521786,"url":"https://github.com/simphotonics/node","last_synced_at":"2025-05-14T18:09:18.387Z","repository":{"id":35793271,"uuid":"40074493","full_name":"simphotonics/node","owner":"simphotonics","description":"Create, edit, output XML nodes and documents.","archived":false,"fork":false,"pushed_at":"2021-07-14T07:30:10.000Z","size":144,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-17T05:25:17.222Z","etag":null,"topics":["dom","html","php","xml"],"latest_commit_sha":null,"homepage":"","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/simphotonics.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-08-02T09:14:23.000Z","updated_at":"2021-07-14T07:30:13.000Z","dependencies_parsed_at":"2022-09-17T12:22:50.701Z","dependency_job_id":null,"html_url":"https://github.com/simphotonics/node","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simphotonics%2Fnode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simphotonics%2Fnode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simphotonics%2Fnode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simphotonics%2Fnode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simphotonics","download_url":"https://codeload.github.com/simphotonics/node/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198510,"owners_count":22030966,"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":["dom","html","php","xml"],"created_at":"2024-11-06T17:27:37.178Z","updated_at":"2025-05-14T18:09:13.376Z","avatar_url":"https://github.com/simphotonics.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simphotonics Node\n[![PHP Composer](https://github.com/simphotonics/node/actions/workflows/php.yml/badge.svg)](https://github.com/simphotonics/node/actions/workflows/php.yml)\n\nSimphotonics nodes can be used to to create, edit, search, and output HTML nodes. The library contains classes that help with the creation of [navigators](#navigator), input elements, and HTML [tables](#table).\n\nNode make composing HTML documents easier by removing the need for structured text and enabling reuse of HTML nodes. Most web sites use a fixed page layout that is then filled with the page content: text, anchors, images, etc. The section [web page template](#web-page-template) shows how to use nodes to create a simple two column empty web page prototype.\n\nSimphotonics Node also includes a rudimentary HTML parser, a DTD parser, and a Node Renderer.\nFor more information visit [https://github.com/simphotonics/node/tree/master/src/Parser](https://github.com/simphotonics/node/tree/master/src/Parser).\n\n## Installation\n\nFrom a terminal issue the command:\n```json\ncomposer require simphotonics/node\n```\n\nAlternatively, add simphotonics/node to the list of required libraries in your `composer.json` file:\n\n```json\n{\n    \"require\": {\n        \"simphotonics/node\": \"\u003e=1.0.0\"\n    }\n}\n```\n\n## Usage\nTo create nodes, an array with optional entries *kind, attr, content, and childNodes is passed to the constructor:\n```php\n\u003c?php\nuse Simphotonics\\Node\\HtmlNode;\nuse Simphotonics\\Node\\HtmlLeaf;\n\n$img = new HtmlLeaf(\n    kind:  'img',\n    // Element attributes are specified in array format!\n    attributes:  [\n        'id' =\u003e 'logo',\n        'src' =\u003e 'assets/images/logo.jpg',\n        'alt' =\u003e 'Logo'\n    ]\n);\n\n// All input array entries are optional. If no element kind is specified it defaults to div.\n$div = new HtmlNode();\n\n// Attributes and content can be added later.\n$div-\u003esetAttr(['id' =\u003e 'demo-div'])-\u003esetCont('Text within the div element.');\n\n$p = new HtmlNode(\n    kind:  'p',\n    attributes:  [\n        'class' =\u003e 'demo-paragraph'\n    ],\n    // The (string) content of an element.\n    content:  'This is the paragraph text.',\n    // An array of child nodes.\n    childNodes:  [$img,$div]\n);\n```\nNote that the element **kind** refers to the HTML element *tag name*. The HTML paragraph in the example above is of kind *p*, whereas the HTML image is of kind *img*. To render the nodes in the example above, we use:\n```php\n\u003c?php\nprint $p;\n```\nThe statement above returns the following string (whitespace has been added to highlight the structure of the html source code):\n```html\n\u003cp class=\"demo-paragraph\"\u003eThis is the paragraph text.\n    \u003cimg id=\"logo\" src=\"assets/images/logo.jpg\" alt=\"Logo\"/\u003e\n    \u003cdiv id=\"demo-div\"\u003eText within the div element.\u003c/div\u003e\n\u003c/p\u003e\n```\n\u003ca name=\"web-page-template\"\u003e\u003c/a\u003e\n## Web Page Template\n\nThe following example shows how to quickly generate a simple web page layout using nodes. It can be used as a prototype empty HTML document that is later filled with actual web page content.\n\n```php\nuse Simphotonics\\Node\\HtmlLeaf;\nuse Simphotonics\\Node\\HtmlNode;\nuse Simphotonics\\Node\\HtmlCssLink;\nuse Simphotonics\\Node\\HtmlTitle;\n\n// DTD\n$dtd = new HtmlLeaf(\n    kind:  '!DOCTYPE',\n    content:  'html'\n);\n\n// HTML document\n$doc = new HtmlNode(\n    kind:  'html',\n    attributes:  [\n        'xml:lang' =\u003e \"en-GB\",\n        'lang' =\u003e \"en-GB\"\n    ]\n);\n\n// Web page title\n// The title is set dynamically depending on the current URI.\n// Example: www.samplesite.com/about-us =\u003e Title: My Site - About Us\n$title = new HtmlTitle('My Site');\n\n$encoding = new HtmlLeaf(\n    kind:  'meta',\n    attributes:  [\n        'http-equiv' =\u003e 'Content-Type',\n        'content' =\u003e 'text/html',\n        'charset'=\u003e'utf-8'\n    ]\n);\n\n$icon = new HtmlLeaf(\n    kind:  'link',\n    attributes:  [\n        'rel' =\u003e 'shortcut icon',\n        'href' =\u003e asset('favicon.ico')\n    ]\n);\n\n// The input path tells the class HtmlCssLink that style files are located in '/style'.\n// If the current URI is www.samplesite.com/about-us,\n//    the style file is assumed to be /style/AboutUs.css.\n$css = new HtmlCssLink('/style');\n\n// Head\n$head = new HtmlNode(\n  kind:  'head',\n  attributes:  ['id' =\u003e 'head'],\n  childNodes:  [$encoding, $title, $icon, $css]\n  );\n\n$body = new HtmlNode(\n    kind:  'body',\n    attributes:  ['id' =\u003e 'body']\n);\n\n// We are using a two column layout.\n$col1 = new HtmlNode(\n    kind:  'div',\n    attributes:  ['id' =\u003e 'col1']\n);\n\n// This demonstrates cloning of nodes.\n$col2 = clone $col1;\n$col2-\u003esetAttr(['id' =\u003e 'col2']);\n\n$footer = new HtmlNode(\n    kind:  'div',\n    attributes:  ['id' =\u003e 'footer']\n);\n\n// Compose emtpy template\n$body-\u003eappend([$col1,$col2,$footer]);\n$doc-\u003eappend([$head,$body]);\n\n```\n\nLet's assume that the PHP source code above was saved to the file `layouts/emptyDocument.php`.\nWe now use the empty document layout to create the page `AboutUs.php`. If you are using a framework this could be the *view* loaded when routing to */about-us*.\n```php\n\u003c?php\n// Load empty document\nrequire 'layouts/emptyDocument.php';\n\n// Compose content\n$info = new HtmlLeaf(\n    kind:  'p',\n    content:  'Information about www.samplesite.com.'\n);\n\n$imgAboutUs = new HtmlLeaf(\n    kind:  'img',\n    attributes:  [\n        'id' =\u003e 'img-about-us',\n        'src' =\u003e 'assets/images/aboutUs.jpg',\n        'alt' =\u003e 'About Us'\n    ]\n);\n\n// Add content to the empty document\n\n// Add the info paragraph to column 1.\n$col1-\u003eappendChild($info);\n\n// Note that HtmlNode implements the array access interface.\n// $col1 can also be accessed using array notation.\n// Example: $doc[0] === $head, $doc[1] === $body.\n//          $doc[1][0] === $col1, $doc[1][1] === $col2.\n\n// The image is added to column 2.\n$col2-\u003eappendChild($imgAboutUs);\n\n// Render html document\nprint $dtd;\nprint $doc;\n```\n\n\u003ca name=\"navigator\"\u003e\u003c/a\u003e\n## Web Page Navigator - HtmlNavigator\n\nThe class `HtmlNavigator` can be  used to create a PHP/CSS driven web page navigator. The class searches all descendant nodes for anchors pointing to the current uri.  The parent node of the anchor is then added to the CSS class 'here' (to enable styling).\n\nA web page navigator typically consists of an unordered list where the list items are the navigator buttons and contain the navigator anchors (links). The following example illustrates how to create a simple navigator with just two entries - Home and Services.\n```php\n\u003c?php\n// Anchor template\n$a = new HtmlLeaf(\nkind:  'a'\n);\n\n// Navigator button template\n$b = new HtmlNode(\nkind:  'li',\nchildNodes:  [$a]\n);\n\n// Create entry for home\n$b_home = clone $b;\n$b_home[0]-\u003esetAttr(['href' =\u003e '/'])-\u003esetCont('HOME');\n\n// Services\n$b_services = clone $b;\n$b_services[0]-\u003esetAttr(['href' =\u003e '/services'])-\u003esetCont('SERVICES');\n\n$menu = new HtmlNode(\nkind:  'ul',\nattributes:  ['id' =\u003e 'mainMenu'],\n'child'=\u003e [$b_home, $b_services]\n);\n\n$nav =  new HtmlNavigator(\nkind:  'div',\nattributes:  ['id' =\u003e 'nav','class' =\u003e 'has-shadow'],\nchildNodes:  [$menu]\n);\n```\nLet's assume that the current relative uri is */services*, then rendering $nav from within PHP yields the string:\n```html\n\u003cdiv id=\"nav\" class=\"has-shadow\"\u003e\n    \u003cul id=\"mainMenu\"\u003e\n        \u003cli\u003e\n            \u003ca href=\"/\"\u003eHOME\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"here\"\u003e\n            \u003ca href=\"/services\"\u003eSERVICES\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\nFor completeness I include a rudimentary CSS file showing the basic styling of the navigator components. Notice\nthe styling of the class `li.here` that will highlight the navigator button pointing to the current page.\n```css\n#nav {\n  position: relative;\n  margin: auto;\n  margin-bottom: 1em;\n}\n\n#mainMenu {\n  top: 0;\n  list-style: none;\n  width: 100%;\n  height: 100%;\n}\n\n#mainMenu li.here {\n  background-color: #133557;\n  border-left-color: #234567;\n  border-right-color: #002142;\n}\n```\n\n\u003ca name=\"table\"\u003e\u003c/a\u003e\n## Html Tables Made Easy - HtmlTable\n\nThe class `HtmlTable` can be used to create and manipulate HTML tables. The usage is demonstrated below:\n```php\n\u003c?php\nuse Simphotonics\\Node\\HtmlTable;\n\n\\\\ Table data\nfor ($i=1; $i \u003c 9; $i++) {\n            $data[] = 'Data'.$i;\n}\n\\\\ Construct table\n$table = new HtmlTable(\n    $data,   // Input data (could also be nodes)\n    3,       // Set table layout to 3 columns\n    HtmlTable::SET_TABLE_HEADERS, // Enable table headers\n    2,       // Each 2nd row will have the style attribute class=\"alt\"\n    1        // Omit styling of the first row.\n);\n\n$print $table;\n```\nThe code above will render the following html table:\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth class=\"col1\"\u003e\u003cspan\u003eData1\u003c/span\u003e\u003c/th\u003e\n        \u003cth class=\"col2\"\u003e\u003cspan\u003eData2\u003c/span\u003e\u003c/th\u003e\n        \u003cth class=\"col3\"\u003e\u003cspan\u003eData3\u003c/span\u003e\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"alt\"\u003e\n        \u003ctd class=\"col1\"\u003e\u003cspan\u003eData4\u003c/span\u003e\u003c/td\u003e\n        \u003ctd class=\"col2\"\u003e\u003cspan\u003eData5\u003c/span\u003e\u003c/td\u003e\n        \u003ctd class=\"col3\"\u003e\u003cspan\u003eData6\u003c/span\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd class=\"col1\"\u003e\u003cspan\u003eData7\u003c/span\u003e\u003c/td\u003e\n        \u003ctd class=\"col2\"\u003e\u003cspan\u003eData8\u003c/span\u003e\u003c/td\u003e\n        \u003ctd class=\"col3\"\u003e\u003cspan\u003eData9\u003c/span\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\nAlternative rows can be styled using the CSS class *alt*.\nTable input other than nodes are wrapped in an node of kind *span*.\nThe HTML source code is shown below:\n```html\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth class=\"col1\"\u003e\u003cspan\u003eData1\u003c/span\u003e\u003c/th\u003e\n        \u003cth class=\"col2\"\u003e\u003cspan\u003eData2\u003c/span\u003e\u003c/th\u003e\n        \u003cth class=\"col3\"\u003e\u003cspan\u003eData3\u003c/span\u003e\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"alt\"\u003e\n        \u003ctd class=\"col1\"\u003e\u003cspan\u003eData4\u003c/span\u003e\u003c/td\u003e\n        \u003ctd class=\"col2\"\u003e\u003cspan\u003eData5\u003c/span\u003e\u003c/td\u003e\n        \u003ctd class=\"col3\"\u003e\u003cspan\u003eData6\u003c/span\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd class=\"col1\"\u003e\u003cspan\u003eData7\u003c/span\u003e\u003c/td\u003e\n        \u003ctd class=\"col2\"\u003e\u003cspan\u003eData8\u003c/span\u003e\u003c/td\u003e\n        \u003ctd class=\"col3\"\u003e\u003cspan\u003eData9\u003c/span\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n```\nThe class `HtmlTable` contains methods that allow changing the table layout:\n```php\n\u003c?php\n// Set number of columns\n$table-\u003esetNumberOfColumns(4);\n\n// Append data to last row\n$table-\u003eappendToLastRow(['Data10','Data11']);\n\n// Append new row\n$table-\u003eappendRow(['Data12','Data13']);\n\n// Delete individual row (note count starts from 0).\n$table-\u003edeleteRow(1);\n\n// Delete column (count starts from 0).\n$table-\u003edeleteColumn(2);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimphotonics%2Fnode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimphotonics%2Fnode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimphotonics%2Fnode/lists"}