Tagger

One of the most flexible html view builder for php. It builds view in php file using same naming convention of html tag and attributes.

Installation

This is a composer package. So, require this package in the composer.json of your php/framework project or run the command bellow,

composer require amsrafid/tagger

Basic use

Very easy to use. Attribute and tag name is same as normal html. Most notable fact is that sudo or short name is also worked as normal HTML attributes.

\Html\Tag::{Tag name}([
	'i/id' => 'id-name',
	'c/cls/class' => 'class-name',
	'd-./_./*./data-.' => 'data-value',
	'b/body/txt/text' => string|array|number|bool|function(){} /* tag body*/
	...
]);

Array key refers attribute name and key value as attribute value.
Note: Data attribue is also handled with sudo as like [d-name/_name/*name].
In all cases above, attribute name will be data-name.

Attribute 'body':

Attribute body is the nested part of a tag. Body can be of five types. String or number is basic type. Special types are,

Array type:
- Here, only associative array is allowed to show. In that case, arry key denotes tag name and value is a sequential array where each value is the body of each tag named in main array key.
- Example:
```
 use Html\Tag;

 Tag::ul(['b' => ['li' => ['one', 'two', 'three']]]);
```
- Output:
```
 <ul>
 	<li>one</li>
 	<li>two</li>
 	<li>three</li>
 </ul>
```

Object type:

Returns string, number or associative array to be shown in body.
Mainly, object type denotes a function that contains nested elements of mother tag.
Example:

 Tag::div(function(){
 	Tag::h4("First set:");
 	Tag::hr();
 	Tag::div(['b' => 'Having fun, isn\'t it?']);
 	Tag::div(function(){
 		Tag::span(function(){ return "One"; });
 		Tag::span(2);

 		return [
 			'h3' => ['array', 'returned'],
 			'u' => ['test', 'underline'],
 		];
 	});
 });

Output:

 <div>
 	<h4>First set:</h4>
 	<hr>
 	<div>Having fun, isn't it?</div>
 	<div>
 		<span>One</span>
 		<span>2</span>
 		<h3>array</h3>
 		<h3>returned</h3>
 		<u>test</u>
 		<u>underline</u>
 	</div>
 </div>

Boolean type
- Boolean type works when there is nothing to show on body. But, The tag is not a single tag like, <img />. Then, body value should be given as true.
- Example:
```
 Tag::script(["s"=>"https://script.js", 'b' => true]);
```
- Output:
```
 <script src="https://script.js"></script>
```

Sudo attributes are available

List of sudo attribute is given bellow.

a 		=	alt,
ac		=	action,
c 		=	class,
cls		=	class,
cont		=	content,
cs 		=	colspan,
d 		=	disabled,
dt 		=	datetime,
f 		=	for,
fa 		=	formaction,
h 		=	href,
i  		=	id,
ln 		=	lang,
m 		=	method,
mx 		=	max,
mn 		=	min,
mxlen		=	maxlength,
mnlen		=	minlength,
mt 		=	muted,
n  		=	name,
p  		=	placeholder,
pt		=	pattern,
r 		=	required,
rs 		=	rowspan,
rw 		=	rows,
s  		=	src,
sc		=	selected,
st		=	style,
t  		=	type,
v 		=	value,
val		=	value

Preset functionality

Tagger allows preset of attributes and wrapper. It reduces using of same attribute and wrapping on same tag.

Preset attributes for identical tag

Preset functionality works on common attribute value using set method. Here, preseting can be stoped by using stopSet method that accepts string or array of tag name or empty for destroy all.

Tag::set([
	'input' => [
		'c/cls/class' => 'form-control mt-2',
		...
	],
	'textarea' => '@input',		/* Same as input tag */
	...
]);

Tag::input(['type' => 'text']);
Tag::input(['type' => 'number']);
Tag::textarea(['b' => 'Text area', 'c' => 'text-danger']);

Tag::stopSet();

Output:

<input type = "text" class = "form-control mt-2" />
<input type = "number" class = "form-control mt-2" />
<textarea class = "text-danger form-control mt-2">Text area</textarea>

Preset wrapper for identical tag

Similar with set wrapping functionality works on common wrapper value, using wrap method. Here also, tag wrapping can be stoped by using stopWrap method that accepts string or array of tag name or empty for destroy all.

Tag::wrap([
	'input' => ['div', ['c' => 'col-md-6', ...]],
	'textarea' => 'div',
	'select' => '@input'	/* Same as input tag */
	...
]);

Tag::input(['t' => 'text']);
Tag::textarea();
Tag::select(['b' => ['option' => ['one', 'two']]]);

Tag::stopWrap(['textarea']);	/* OR Tag::stopWrap('textarea'); */
Tag::textarea("Text area value");

Output:

<div class = "col-md-6"><input type = "text" /></div>
<div><textarea></textarea></div>
<div class = "col-md-6">
	<select>
		<option>one</option>
		<option>two</option>
	</select>
</div>
<textarea>Text area value</textarea>

Special use

Label

Automatic <label> tag can be added before any tag, using label attribute. If label containing tag has a wrapper preset, a label tag will be created into the wrapper before this.

Tag::wrap([
	'input' => ['div', ['c' => 'col-md-6 mb-2']]
]);

Tag::input(['t' => 'text', 'i' => 'name', 'label' => 'Name *', 'p' => "Name"]);
Tag::input(['t' => 'number', 'i' => 'age', 'label' => 'Age *', 'p' => "Age"]);

Output

<div class="col-md-6 mb-2">
	<label for="name">Name *</label>
	<input id="name" type="text" placeholder = "Name">
</div>
<div class="col-md-6 mb-2">
	<label for="age">Age *</label>
	<input id="age" type="number" placeholder = "Age">
</div>

Table

Here, html table is able to be generated dynamically. Where, body can be passed an array with key as tag name and key value as normal array for tag body.

$arrs = [
	['id' => 24, 'name' => 'HTML'],
	['id' => 33, 'name' => 'CSS'],
	['id' => 49, 'name' => 'JAVASCRIP']
];
	
Tag::table(['border' => '1', 'b' => function() use($arrs) {
	Tag::tr(['b' => ['th' => ['#', 'ID', 'Name']]]);
	Tag::tr(['foreach' => $arrs, 'offset' => 'i'
		'b' => ['td' => ['@i', '@id', '@name']]
	]);
}]);

Output

<table border = "1">
	<tr><th>#</th><th>ID</th><th>Name</th></tr>
	<tr><td>1</td><td>24</td><td>HTML</td></tr>
	<tr><td>2</td><td>33</td><td>CSS</td></tr>
	<tr><td>3</td><td>49</td><td>JAVASCRIP</td></tr>
</table>

Control statement

Control statement acts as like normal foreach/if/elseif/else here. Control statement uses as attribute.

foreach:

Act like normal foreach in php. Here, offset, start respectively used for loop array/object offset, and from which value offset count will be started.

Tag::ul(['if' => $arrs, 'b' => function() use($arrs) {
	Tag::li([
		'foreach' => $arrs, 'offset' => 'i',
		'if' => '@id > 24',
		'v' => '@id', 'b' => '@i. @name'
	]);
}]);

Output

<ul>
	<li value="33">1. CSS</li>
	<li value="49">2. JAVASCRIP</li>
</ul>

@id -> @{array key name}.
Able to capture in any attribute value.

Special Attributes: Attributes given bellow are useful only iff foreach attribute is present.

'if' => string
- Normal if condition. Ex: (@i > 2 && (@age == 50 || @name == 'HTML')).
- Here, @i is offset, @name is array key.
- Note: @name value is string type. So, comparing string value must be block quoted.
'then' => string|array
- This attribute works when 'if' condition is valid.
- String type value consideres as attribute value true. Multiple string can be considered as identical attribute that seperated with comma or semicolon or dot or space , OR ; OR . OR \s+.
- Ex:
  - 'then' => 'selected disabled'
  - 'then' => ['selected' => true, 'disabled' => true]
- Here, array contains attribute set which will be changed after a valid if condition.
'offset' => string
- Contains loop array offset variable name.
- In logical expression, considers to be started form 0 and in view depends on start attribute.
'start' => int
- Denotes from where body/view offset will be started from. Default start value is 1.

if:

Normal if statement like php.
Note: Attribute then is allowed as same way of if statement in foreach special attributes section. But, only array type value is working here.

$var = 10;
Tag::span(['if' => $var > 10, 'b' => 'Var is greater than 10']);

Normal use:

if($var > 10)
	echo "<span>Var is greater than 10</span>

elseif:

Normal elseif statement like php. Here, this condition will only work iff if statment is present before this.
Note: Attribute then is allowed as same way of if statement.

Tag::span(['elseif' => $var > 5, 'b' => 'Var is greater than 5']);

Normal use:

if ($var > 10)
	...
else if ($var > 5)
	echo "<span>Var is greater than 5</span>

else:

Normal else statement like php. Value should be given as true. Here, this condition will only work iff if or elseif statment is present before this.
Note: Attribute then is not allowed here.

Tag::span(['else' => true, 'b' => 'Var is less than 5']);

Normal use:

if ($var > 10)
	...
else
	echo "<span>Var is less than 5</span>

Authors

Initially development - Sadman Rafid

License

The tagger is open-source software licensed under the MIT license.