2017 © Pedro Peláez
 

library fhtml

FHtml Fluent HTML writing

image

html5/fhtml

FHtml Fluent HTML writing

  • Tuesday, August 23, 2016
  • by dermatthes
  • Repository
  • 2 Watchers
  • 2 Stars
  • 636 Installations
  • PHP
  • 1 Dependents
  • 0 Suggesters
  • 0 Forks
  • 0 Open issues
  • 2 Versions
  • 18 % Grown

The README.md

, (*1)

FHtml - Fluent HTML

Fluent HTML Generator for PHP7 - Version 0.2 - 2016-08-23 - Written by Matthias Leuffen, (*2)

Generating correct and secure HTML Code within your PHP-Code causes headache. Using FHtml's fluent speaking Api will save you lots of money you'd otherwise spent on aspirin., (*3)

It comes with an @-attribute-parser for easy and painless writing; you don't need any quotes (' or ") within your quoted strings., (*4)

Example? See the Kickstart:, (*5)

Kickstart - See FHtml in action:

echo fhtml("input @type=text @name=firstName @value=?", $_POST["firstName"]);

yes - no double quotes needed to generate valid and proper escaped xhtml:, (*6)

<!-- Output: -->
<input type="text" name="firstName" value="Some Value"/>

Use the fluent-API to generate structures:, (*7)

echo fhtml("div @class=style1 @style=display:block;width:100%")
        ->h1()->text("Hi there!")->end()
        ->p()
            ->input("@type=text @value=?", $someUnescapedValue);

yeah: Your PHP-code is shorter than the raw html! And proper indention is done as well:, (*8)

<!-- Output: -->
<div class="style1" style="display:block;width:100%">
    <h1>Hi There!</h1>
    <p>
        <input type="text" value="<html encoded content of $someUnescapedValue>"/>
    </p>
</div>

Have you ever written a <select>-box with preselected value? This is the FHtml-way:, (*9)

echo fhtml("select @name=select1")->options($optionsArr, $_POST["select1"]);

Using an IDE (PhpStorm)? FHtml comes with full code-completion on all layers. Stop typing - just hit CTRL-SPACE and ENTER., (*10)

Features

  • Generates proper escaped XHTML-compliant HTML5 code
  • Quick writing without quoted quotes
  • Full IDE support (tested on Jetbrains PhpStorm)
  • Makes use of PHP7 return / parameter declaration
  • Autodetecing multiple APIs compatible to I18n Plugins
  • Unit-Tested and CI by TravisCI

Install

FHtml is available as composer-package at packagist.com:, (*11)

composer require html5\fhtml

or just add it to your composer.json:, (*12)

    require: {
        "html5/fhtml": "0.2"
    }

Hint: Use composer upgrade --prefer-dist to omit unit-tests and development files, (*13)

Error Reports

Please report errors, wishes and feedback:, (*14)

  • Github-Page: https://github.com/dermatthes/FHtml
  • Report Issues: https://github.com/dermatthes/FHtml/issues

Usage

@-attributes

FHtml parses a single string input on elem() Method (or any direct tag-method like div() or span()) and parses it., (*15)

To inject insecure or not properly escaped values from outside, use the ?-Placeholder construct:, (*16)

DON'T DO THAT:, (*17)

$t->input("@type=text @value=$userInput"); // <- Don't do that!

use the auto-escaping array construct with ? as placeholder and add the raw values as additional parameter(s):, (*18)

$t->input("@value=?", $userInput); // <-- Right way: Will escape the value

Inserting a text-node

To insert plain text to an element use the text($text) - method. The text in Parameter 1 will be html-escaped., (*19)

echo fhtml("span")->text("Some text here!");

Will generate:, (*20)

<span>Some text here!</span>

End an element

You can use the end() Method to jump back to the parent element., (*21)

Jump Marks

You can use the as(<jumpMark>) Method to define a element you can jump to from anywhere by using goto(<jumpMark>):, (*22)


fhtml()->body()->as("body-elem")
    ->div()
        ->div()
->goto("body-elem")
    ->p();

The example will append the <p> element to the <body> element., (*23)

Generating <select> Options from arrays

Use the options(array $options, string $preselect) - method to create select-options with preselected Value on the fly:, (*24)

Imagine you have some mapping of key-values array for your select-field:, (*25)

$options = [
    "foo" => "Foo Apples",
    "bar" => "Bar Bananas",
    "baz" => "Batzen for Cats"
];

Just set them as first parameter of options() and the submitted Value from Post into the second parameter:, (*26)

echo fhtml("select @name=sel1")->options($options, $_POST["sel1"]);

will generate:, (*27)

<select name="sel1">
    <option value="foo">Foo Apples</option>
    <option value="bar" selected="selected">Bar Bananas</option>
    <option value="baz">Batzen for Cats</option>
</select>

API Alternatives

These Samples are doing exact the same. Choose the api you like most:, (*28)

echo fhtml("input @type=text @name=name1 @value=?", $_POST["name1"]);
echo fhtml()->input("@type=text @name=name1 @value=?, $_POST["name1"]);
echo fhtml()->input(["@type=text @name=name1 @value=?, $_POST["name1"]]);

echo fhtml()->elem("input @type=text @name=name1 @value=?, $_POST["name1"]);
echo fhtml()->elem(["input @type=text @name=name1 @value=?, $_POST["name1"]]);

I prefer using the shortest:, (*29)

echo fthml()->input("@type=text @name=name1 @value=?", $_POST["name1"]);

If you like FHtml you might be interested in some of my other projects:, (*30)

  • html5/template: An angular-js / phptal implementation of inline-template components
  • html5/htmlreader: A fast and stupid HTML5 tokenizer not using libxml. (Stupid === Good; if you've ever tried to parse HTML without having libxml manipulating your elements)

Author

Written 2016 by Matthias Leuffen leuffen.de, (*31)

License

MIT-License, (*32)

The Versions

23/08 2016

dev-master

9999999-dev http://leuffen.de

FHtml Fluent HTML writing

  Sources   Download

MIT

The Requires

 

by Matthias Leuffen

template html5 fluent

22/08 2016

0.2

0.2.0.0 http://leuffen.de

FHtml Fluent HTML writing

  Sources   Download

MIT

The Requires

 

by Matthias Leuffen

template html5 fluent