Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simphotonics/node
Create, edit, output XML nodes and documents.
https://github.com/simphotonics/node
dom html php xml
Last synced: about 1 month ago
JSON representation
Create, edit, output XML nodes and documents.
- Host: GitHub
- URL: https://github.com/simphotonics/node
- Owner: simphotonics
- License: mit
- Created: 2015-08-02T09:14:23.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2021-07-14T07:30:10.000Z (over 3 years ago)
- Last Synced: 2024-11-06T17:37:00.773Z (3 months ago)
- Topics: dom, html, php, xml
- Language: PHP
- Homepage:
- Size: 141 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Simphotonics Node
[](https://github.com/simphotonics/node/actions/workflows/php.yml)
Simphotonics 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).
Node 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.
Simphotonics Node also includes a rudimentary HTML parser, a DTD parser, and a Node Renderer.
For more information visit [https://github.com/simphotonics/node/tree/master/src/Parser](https://github.com/simphotonics/node/tree/master/src/Parser).
## Installation
From a terminal issue the command:
```json
composer require simphotonics/node
```
Alternatively, add simphotonics/node to the list of required libraries in your `composer.json` file:
```json
{
"require": {
"simphotonics/node": ">=1.0.0"
}
}
```
## Usage
To create nodes, an array with optional entries *kind, attr, content, and childNodes is passed to the constructor:
```php
'logo',
'src' => 'assets/images/logo.jpg',
'alt' => 'Logo'
]
);
// All input array entries are optional. If no element kind is specified it defaults to div.
$div = new HtmlNode();
// Attributes and content can be added later.
$div->setAttr(['id' => 'demo-div'])->setCont('Text within the div element.');
$p = new HtmlNode(
kind: 'p',
attributes: [
'class' => 'demo-paragraph'
],
// The (string) content of an element.
content: 'This is the paragraph text.',
// An array of child nodes.
childNodes: [$img,$div]
);
```
Note 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:
```php
This is the paragraph text.
Text within the div element.
The 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.
```php
use Simphotonics\Node\HtmlLeaf;
use Simphotonics\Node\HtmlNode;
use Simphotonics\Node\HtmlCssLink;
use Simphotonics\Node\HtmlTitle;
// DTD
$dtd = new HtmlLeaf(
kind: '!DOCTYPE',
content: 'html'
);
// HTML document
$doc = new HtmlNode(
kind: 'html',
attributes: [
'xml:lang' => "en-GB",
'lang' => "en-GB"
]
);
// Web page title
// The title is set dynamically depending on the current URI.
// Example: www.samplesite.com/about-us => Title: My Site - About Us
$title = new HtmlTitle('My Site');
$encoding = new HtmlLeaf(
kind: 'meta',
attributes: [
'http-equiv' => 'Content-Type',
'content' => 'text/html',
'charset'=>'utf-8'
]
);
$icon = new HtmlLeaf(
kind: 'link',
attributes: [
'rel' => 'shortcut icon',
'href' => asset('favicon.ico')
]
);
// The input path tells the class HtmlCssLink that style files are located in '/style'.
// If the current URI is www.samplesite.com/about-us,
// the style file is assumed to be /style/AboutUs.css.
$css = new HtmlCssLink('/style');
// Head
$head = new HtmlNode(
kind: 'head',
attributes: ['id' => 'head'],
childNodes: [$encoding, $title, $icon, $css]
);
$body = new HtmlNode(
kind: 'body',
attributes: ['id' => 'body']
);
// We are using a two column layout.
$col1 = new HtmlNode(
kind: 'div',
attributes: ['id' => 'col1']
);
// This demonstrates cloning of nodes.
$col2 = clone $col1;
$col2->setAttr(['id' => 'col2']);
$footer = new HtmlNode(
kind: 'div',
attributes: ['id' => 'footer']
);
// Compose emtpy template
$body->append([$col1,$col2,$footer]);
$doc->append([$head,$body]);
```
Let's assume that the PHP source code above was saved to the file `layouts/emptyDocument.php`.
We 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*.
```php
'img-about-us',
'src' => 'assets/images/aboutUs.jpg',
'alt' => 'About Us'
]
);
// Add content to the empty document
// Add the info paragraph to column 1.
$col1->appendChild($info);
// Note that HtmlNode implements the array access interface.
// $col1 can also be accessed using array notation.
// Example: $doc[0] === $head, $doc[1] === $body.
// $doc[1][0] === $col1, $doc[1][1] === $col2.
// The image is added to column 2.
$col2->appendChild($imgAboutUs);
// Render html document
print $dtd;
print $doc;
```
## Web Page Navigator - HtmlNavigator
The 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).
A 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.
```php
setAttr(['href' => '/'])->setCont('HOME');
// Services
$b_services = clone $b;
$b_services[0]->setAttr(['href' => '/services'])->setCont('SERVICES');
$menu = new HtmlNode(
kind: 'ul',
attributes: ['id' => 'mainMenu'],
'child'=> [$b_home, $b_services]
);
$nav = new HtmlNavigator(
kind: 'div',
attributes: ['id' => 'nav','class' => 'has-shadow'],
childNodes: [$menu]
);
```
Let's assume that the current relative uri is */services*, then rendering $nav from within PHP yields the string:
```html
```
For completeness I include a rudimentary CSS file showing the basic styling of the navigator components. Notice
the styling of the class `li.here` that will highlight the navigator button pointing to the current page.
```css
#nav {
position: relative;
margin: auto;
margin-bottom: 1em;
}
#mainMenu {
top: 0;
list-style: none;
width: 100%;
height: 100%;
}
#mainMenu li.here {
background-color: #133557;
border-left-color: #234567;
border-right-color: #002142;
}
```
## Html Tables Made Easy - HtmlTable
The class `HtmlTable` can be used to create and manipulate HTML tables. The usage is demonstrated below:
```php
Data1
Data2
Data3
Data4
Data5
Data6
Data7
Data8
Data9
Alternative rows can be styled using the CSS class *alt*.
Table input other than nodes are wrapped in an node of kind *span*.
The HTML source code is shown below:
```html
Data1
Data2
Data3
Data4
Data5
Data6
Data7
Data8
Data9
```
The class `HtmlTable` contains methods that allow changing the table layout:
```php
setNumberOfColumns(4);
// Append data to last row
$table->appendToLastRow(['Data10','Data11']);
// Append new row
$table->appendRow(['Data12','Data13']);
// Delete individual row (note count starts from 0).
$table->deleteRow(1);
// Delete column (count starts from 0).
$table->deleteColumn(2);
```