BladeOneHtml
2.4
C'est une bibliothèque PHP qui permet de créer des formulaires (vues) facilement, proprement et sans tuer les performances. Il utilise la bibliothèque BladeOne pour restituer la vue. Cette bibliothèque n'utilise qu'une seule dépendance, un fichier et rien de plus.
Cette bibliothèque fonctionne de deux manières :
le compositeur nécessite eftec/ BladeOneHtml
include " vendor/autoload.php " ;
use eftec bladeone BladeOne ;
use eftec BladeOneHtml BladeOneHtml ;
class myBlade extends BladeOne {
use BladeOneHtml ;
}
$ blade = new myBlade ();
// for our example:
$ myvalue =@ $ _REQUEST [ ' myform ' ];
echo $ blade -> run ( " exampleview " , [ ' myvalue ' => $ myvalue ]); < body >
@form()
@input(type="text" name="myform" value=$myvalue)
@button(type="submit" value="Send")
@endform()
</ body >$blade=nouveau maBlade();
Cette bibliothèque ajoute un nouvel ensemble de balises pour le modèle. Les balises utilisent des arguments nommés, elles sont donc facilement configurables.
@<tag>(argument1="valeur" argument2='valeur' argument3=valeur argument4=$variable argument5=fonction(), argument6="aaa $aaa")
Cette bibliothèque utilise les arguments natifs du HTML mais certains arguments sont spéciaux
| Argument | Description | exemple |
|---|---|---|
| texte | Il ajoute un contenu entre les balises. La valeur intérieure n'est toujours pas citée. | @tag(text="bonjour") -> <tag>bonjour</tag> |
| pré | Il ajoute un contenu avant la balise | @tag(pre="bonjour") -> bonjour<tag></tag> |
| poste | Il ajoute un contenu après la balise | @tag(post="bonjour") -> <tag></tag>bonjour |
| entre | Il ajoute un contenu entre les balises (cela fonctionne de la même manière que le texte) | @tag(between="bonjour") -> <tag>bonjour</tag> |
| valeur | Habituellement, cela fonctionne comme la " valeur " normale du HTML, mais cela peut également fonctionner différemment (dans @textarea, cela fonctionne comme text ) | @tag(value="bonjour") -> < tag value="bonjour"></tag> |
| valeurs | Certains composants nécessitent une liste d’objets/tableaux. Cet argument est utilisé pour définir la liste des valeurs | @tag(values=$pays) |
| alias | Certains composants nécessitent ou utilisent une liste d'objets/tableaux. Cet argument sert à référencer n’importe quelle ligne de la liste. Si les valeurs sont définies et que l'alias est manquant, il crée un nouvel alias appelé valeurs+"Row". | @tag($values=$countries alias=$country) @tag($values=$countries ) cela suppose alias=$countriesRow |
| groupe opt | La balise @select pourrait lister des éléments groupés. Cet argument est utilisé pour définir le regroupement | @tag($values=$countries alias=$country @optgroup=$country->continent) |
Disons l'exemple suivant
@input(value="hello world" type="text" )
Il est rendu comme
<input value="hello world" type="text" />
Si la balise utilise une variable de fonction, alors cette vue
@input(value=$hello type="text" )
Est converti en
<input value="<?php echo $this->e($hello);?>" type="text" />
La méthode $this->e est utilisée pour échapper à la méthode.
Remarque : Cette bibliothèque autorise n'importe quelle balise, même les balises personnalisées (mais seulement si elles n'entrent pas en conflit avec les balises spéciales, voir tableau)
@input(value="hello world" type="text" mycustomtag="salut" )
Est converti en
< input value =" hello world " type =" text " mycustomtag =" hi " /> Il affiche un code HTML d'entrée.
Exemple de base :
@input(id="id1" value="hello world$somevar" type="text" )
Il génère un champ caché
Exemple de base :
@hidden(name="id1" value="hello world$somevar" )
Il montre une étiquette HTML
@label(for="id1" text="hello world:")
Il montre une image
@image(src="https://via.placeholder.com/350x150")
Il affiche un objet HTML de sélection (liste déroulante)
Exemple:
@select(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items( id="chkx" value=$country->id text=$country->name)
@endselect
Note 1 : @items nécessite les valeurs des arguments dans le parent (@select) et la valeur des arguments (la valeur sélectionnable) et le texte (la valeur visible) Note 2 : @items nécessite un identifiant , attribué dans la même balise ou dans le parent tag (dans ce cas, le parent est @select) Remarque 3 : Par standard, l' identifiant de l'argument doit être unique.
@item est une balise utilitaire utilisée dans d'autres balises. Cela se comporte en fonction de leur balise parent. Il ajoute une simple ligne/ligne à l’objet parent.
Exemple:
@select()
@item(value='aaa' text='hello world')
@endselect
Il rend
<select>
<option value="aaa">hello world</option>
</select>
@items est une balise utilitaire utilisée dans certaines balises. Cela se comporte en fonction de leur balise parent. Il ajoute plusieurs lignes/lignes à l'objet parent en utilisant les valeurs de balise
Remarque : Cette balise nécessite quelques arguments :
- le parent (ou cette balise) nécessite les valeurs de la balise
- le parent requiert la valeur de la balise. Il indique la sélection actuelle (le cas échéant)
- le parent (ou cette balise) nécessite l' alias de la balise. Si l'alias est manquant alors il utilise le nom des valeurs + "Row", c'est-à-dire valeurs = produit -> alias = productRow
- le parent (ou cette balise) nécessite l' identifiant de la balise
- L'"id" rendu sera généré en utilisant cet id+"_"+"id de la ligne". c'est-à-dire id="idproduct" => idproduct_0, idproduct_1
- Pourquoi? C'est parce que l'identifiant doit être unique (spécifications HTML)
Exemple, si $countries est une liste d'objets alors :
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country->id text=$country->name)
@endselect
Si $countries est une liste de tableaux alors :
@select(id="aaa" value=$selection values=$countries alias=$country)
@items( id="chkx" value=$country['id'] text=$country['name'])
@endselect
À l'intérieur des éléments de balise, vous pouvez utiliser les variables suivantes
| variable (où valeurs est la variable utilisée) | Spécification |
|---|---|
| $values OptGroup | Il stocke le groupe opt actuel (le cas échéant). Exemple : $productOptGroup |
| Clé de valeurs $ | Il indique la clé actuelle de la ligne actuelle. Exemple : $productKey |
| $alias (si aucun alias n'est défini, il utilise la ligne $values ) | La ligne actuelle de la variable. Exemple : $productRow |
Il démarre un groupe facultatif (sélectionner)
Exemple:
@select(id="aaa" value=$selection values=$countries alias=$country)
@optgroup(label="group1")
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@endoptgroup
@endselect
Remarque : cette balise doit être terminée par la balise @endoptgroup
Il ajoute une seule case à cocher
Exemple:
@checkbox(id="idsimple" value="1" checked="1" post="it is a selection")
Il ajoute un seul bouton radio
Exemple:
@radio(id="idsimple" value="1" checked="1" post="it is a selection")
Il dessine une zone de texte.
Exemple:
@textarea(id="aaa" value="3333 3333 aaa3333 ")
Il dessine un bouton
Exemple:
@button(value="click me" type="submit" class="test" onclick='alert("ok")')
Il ajoute un lien hypertexte
Exemple:
@link(href="https://www.google.cl" text="context")
Il affiche une liste de cases à cocher
@checkboxes(id="checkbox1" value=$selection alias=$country)
@item(id="aa1" value='aaa' text='hello world' post="<br>")
@item(id="aa2" value='aaa' text='hello world2' post="<br>")
@items(values=$countries value='id' text='name' post="<br>")
@endcheckboxes
Il affiche une liste de boutons radio
@radios(id="radios1" name="aaa" value=$selection alias=$country)
@item(value='aaa' text='hello world' post="<br>")
@item(value='aaa' text='hello world2' post="<br>")
@items(values=$countries value='id' text='name' post="<br>")
@endradios
Il génère une valeur d'entrée de fichier
@file(name="file" value="123.jpg" post="hello world")
Remarque : il affiche également un fichier caché portant le nom "name"+"_file" avec la valeur d'origine
Il génère une liste non triée
@ul(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items(value=$country->id text=$country->name)
@endul
Il génère une liste triée
@ol(id="aaa" value=$selection values=$countries alias=$country)
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@item(value='aaa' text='hello world')
@items(value=$country->id text=$country->name)
@endol
Il génère une pagination. Il nécessite bootstrap3, bootstrap4 ou bootstrap5.
Vous pouvez trouver un exemple sur examples/examplepagination.php
Code PHP
$ current = isset ( $ _GET [ ' _page ' ]) ? $ _GET [ ' _page ' ] : 1 ;
echo $ blade -> run ( " examplepagination " ,
[ ' totalpages ' => count ( $ products )
, ' current ' => $ current
, ' pagesize ' => 10
, ' products ' => $ items
]);Modèle
@pagination(numpages=$totalpages current=$current pagesize=$pagesize urlparam='_page')Remarque : La page est en base 1. Remarque : l'argument urlparam est utilisé pour construire le lien (domain.dom/web.php?_page=999)
Vous pouvez modifier le nom des boutons prev et next comme suit :
$ this -> setTranslation ([ ' pagination ' =>[ ' prev ' => ' <<> ' , ' next ' => ' > ' ]]);
Il rend un tableau
@table(class="table" values=$countries alias=$country border="1")
@tablehead
@cell(text="id")
@cell(text="cod")
@cell(text="name")
@endtablehead
@tablebody(id='hello world' )
@tablerows(style="background-color:azure")
@cell(text=$country->id style="background-color:orange")
@cell(text=$country->cod )
@cell(text=$country->name)
@endtablerows
@endtablebody
@tablefooter
@cell(text="id" colspan="3")
@endtablefooter
@endtable
Il restitue l'en-tête du tableau (facultatif). Chaque cellule ajoutée à l'intérieur est rendue sous la forme d'une balise HTML "th".
Il restitue le corps du tableau (facultatif). Chaque cellule ajoutée à l'intérieur du tableau est rendue sous forme de balise HTML "td"
Il restitue le pied de page du tableau (facultatif). Chaque cellule ajoutée à l'intérieur est rendue sous la forme d'une balise HTML "th".
Il génère une rangée à l'intérieur du corps
Il restitue une cellule à l'intérieur de l'en-tête, du corps de la table (tablerows) ou du pied de page
Il rend et CSS ajouté dans la boîte
< head >
@cssbox
</ head > En utilisant la méthode addCss($css,$name)
$ this -> addCss ( ' <link rel="stylesheet" href="mystyle.css"> ' , ' mystyle ' );
$ this -> addCss ( ' css/stylename.css ' ); $css pourrait être un lien ou une balise de lien
$name est facultatif mais évite d'ajouter des doublons. Si nous ajoutons un nouveau CSS portant le même nom que le précédent, alors il est ignoré.
Il restitue tous les liens JavaScript ajoutés à la boîte
< body >
<!-- our page -->
@jsbox
</ body > En utilisant la méthode addJs($script,$name)
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); < body >
<!-- our page -->
@jsbox <!-- we could load jquery here -->
@jscodebox(ready)
</ body >Ce code ajoute automatiquement les balises <script>.
L'argument prêt indique si l'on souhaite exécuter la fonction lorsque le document est prêt.
Comment ajouter un nouveau code JavaScript dans la jscodebox ?
$ blade -> addJsCode ( ' alert("hello"); ' );BladeOneHtml permet de modifier les balises utilisées et de définir une classe par défaut pour chaque classe.
Vous pouvez définir une classe et des balises par défaut pour Bootstrap 3/4/5 en utilisant la méthode suivante (choisissez-en une seule).
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap5 ( true );
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap4 ( true );
// if true then it loads the css and js from a cdn into the css and jsbox so it requires @cssbox and @jsbox
$ blade -> useBootstrap3 ( true ); Ou vous pouvez créer vos propres balises et classes
$ blade -> defaultClass [ $ tagname ]= ' default class ' ; $ blade -> pattern [ ' nametag ' ]= ' pattern ' ;Où le badge pourrait être le suivant
| Nom | Description | Exemple | Code |
|---|---|---|---|
| étiquette de nom | Il utilise le modèle à utiliser lorsque la balise est utilisée | saisir | {{pre}}<input{{inner}} >{{between}}< /input>{{post}} |
| nametag_empty | Le système utilise ce modèle si le contenu (entre/texte) est vide ou non défini (une balise à fermeture automatique). S'il n'est pas défini, le système utilise le badge même si le contenu est vide | entrée_vide | {{pre}}< entrée{{inner}} />{{post}} |
| nametag_item | Le système utilise ce modèle pour les balises @item et @items | sélectionner_article | < option{{intérieur}} >{{entre}}< /option> |
| nametag_end | Il utilise ce modèle lorsque la balise doit être fermée | formulaire_end | < /form> |
| variable | explication | Échappé (*) |
|---|---|---|
| {{pré}} | Le code avant la balise : pre <tag ></tag> | Non |
| {{poster}} | Le code après la balise : < tag ></tag> post | Non |
| {{intérieur}} | Les attributs à l'intérieur de la balise : < tag inside > </tag> | Oui |
| {{entre}} | Le contenu entre la balise : < tag > between </tag> | Par défaut, cette valeur est échappée mais on pourrait y échapper |
| {{identifiant}} | L'attribut id (il est également inclus dans {{inner}}) : < tag id > </tag> | Oui |
| {{nom}} | L'attribut name (il est également inclus dans {{inner}}) : < tag name > </tag> | Oui |
Exemple de balise normale :
$ blade -> pattern [ ' input ' ]= ' {{pre}}<input{{inner}} >{{between}}</input>{{post}} ' ;Remarque :(*) Qu'est-ce qui est échappé ?. Par exemple, le texte "", s'il s'est échappé, il est affiché sous la forme "<hello>"
Il est possible d'ajouter un attribut personnalisé qui pourra être utilisé dans un modèle.
Par exemple, ajoutons la balise personnalisée appelée customtag
$ blade -> customAttr [ ' customtag ' ]= ' This attr is missing! ' ;
$ blade -> pattern [ ' alert ' ]= ' {{pre}}<div {{inner}}><h1>{{customtag}}</h1>{{between}}</div>{{post}} ' ;Et à la vue
@alert(text="hi there" class="alert-danger" customtag="it is a custom tag") < br >
@alert(text="hi there" class="alert-danger" ) < br > La bibliothèque dispose d'une multitude de méthodes qui peuvent être utilisées pour initialiser et configurer la bibliothèque. Ce sont des options.
Il définit les modèles et les classes pour qu'ils soient compatibles avec bootstrap 4.
si l'argument est vrai, alors il ajoute le CSS à la boîte CSS du CDN
Notre code
$ blade -> useBootstrap5 ( true ); < header >
@cssbox
</ header >Il définit les modèles et les classes pour qu'ils soient compatibles avec bootstrap 4.
si l'argument est vrai, alors il ajoute le CSS à la boîte CSS du CDN
Notre code
$ blade -> useBootstrap4 ( true ); < header >
@cssbox
</ header >Il définit les modèles et les classes pour qu'ils soient compatibles avec bootstrap 3.
si l'argument est vrai, alors il ajoute le CSS à la boîte CSS du CDN
$ blade -> useBootstrap3 ( true ); Il ajoute un CSS à la boîte CSS
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' ); Il ajoute un lien javascript vers la boîte js
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' );Il ajoute un code javascript à la boîte js
$ blade -> addJsCode ( ' alert("hello"); ' );C'est la liste des champs publics de la classe. Les champs sont publics car à des fins de performances (plutôt que d'utiliser des setter et des getters)
Il stocke la liste des modèles utilisés par le code
$ this -> pattern [ ' sometag ' ]= ' {{pre}}<tag {{inner}}>{{between}}</tag>{{post}} ' ;Remarque : voir "Modèle-Variable à l'intérieur du code" pour voir la liste des variables de modèle
La classe CSS par défaut ajoutée à une balise spécifique.
$ this -> defaultClass [ ' sometag ' ]= ' classred classbackgroundblue ' ;Il ajoute un ajout personnalisé pouvant être utilisé avec $this->pattern
$ this -> customAttr [ ' customtag ' ]= ' XXXXX ' ; // So we could use the tag {{customtag}}. 'XXXXX' is the default valueL'attribut personnalisé supprime toujours les guillemets et les guillemets doubles, donc si notre valeur est "bonjour" -> bonjour
Il est possible d'ajouter un nouveau modèle en étendant la classe PHP.
$this->pattern['mynewtag']='<mycustomtag {{inner}}>{{between}}</mycustomtag>';
Vous pouvez créer une nouvelle classe ou un nouveau trait PHP et étendre notre classe. A l'intérieur de cette nouvelle structure, vous devez ajouter une nouvelle méthode avec la structure suivante
Utiliser une nouvelle classe
use eftec bladeone BladeOne ;
use eftec BladeOneHtml BladeOneHtml ;
class MyBlade extends BladeOne {
use BladeOneHtml ;
}
class MyClass extends MyBlade {
protected function compileMyNewTag ( $ expression ) { // the method must be called "compile" + your name of tag.
$ args = $ this -> getArgs ( $ expression ); // it separates the values of the tags
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
// your custom code here
return $ this -> render ( $ args , ' mynewtag ' , $ result ); // we should indicate to use our pattern.
}
}Utiliser un trait (recommandé, pourquoi ? C'est parce que les traits sont plus flexibles)
trait MyTrait {
protected function compileMyNewTag ( $ expression ) { // the method must be called "compile" + your name of tag.
$ args = $ this -> getArgs ( $ expression ); // it separates the values of the tags
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
// your custom code here
return $ this -> render ( $ args , ' mynewtag ' , $ result ); // we should indicate to use our pattern.
}
}
class MyClass extends BladeOne {
use BladeOneHtml ;
use MyTrait; // <-- our trait
}Pour créer une méthode parent, vous devez insérer une nouvelle valeur dans $this->htmlItem. Vous pouvez stocker ce que vous voulez.
$ this -> pattern [ ' mynewtag ' ]= ' <mycustomtag {{inner}}>{{between}} ' ; protected function compileMyNewTag ( $ expression ) {
$ args = $ this -> getArgs ( $ expression ); // it loads and separates the arguments.
$ this -> htmlItem [] = [ ' type ' => ' mynewtag ' , ' value ' => @ $ args [ ' value ' ]
];
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
//unset($args['value']); // we could unset values that we don't want to be rendered.
return $ this -> render ( $ args , ' select ' , $ result );
}Notre objectif est de restituer du code PHP, pas d'évaluer un code. Par exemple, si $args['somearg']=$variable, alors notre valeur est $variable (sous forme de texte), quelle que soit la valeur réelle de la variable.
Vous devez également créer une méthode pour terminer le conteneur, et nous devons également ajouter un nouveau modèle.
$ this -> pattern [ ' mynewtag_end ' ]= ' </mycustomtag> ' ; protected function compileEndNewTag () {
$ parent = @ array_pop ( $ this -> htmlItem ); // remove the element from the stack
if ( is_null ( $ parent ) || $ parent [ ' type ' ]!== ' newtag ' ) { // if no element in the stack or it's a wrong one then error
$ this -> showError ( " @endnewtag " , " Missing @initial tag " , true );
}
// our code
return $ this -> pattern [ $ parent [ ' type ' ] . ' _end ' ]; // renders the element of the stack
}Nos articles pourraient savoir s'ils sont à l'intérieur d'une étiquette lors de la prochaine opération
$ parent = end ( $ this -> htmlItem );Nous pourrions créer un composant nécessitant CSS et JavaScript.
Par exemple un sélecteur de date.
protected function compileDatePicker ( $ expression ) {
$ args = $ this -> getArgs ( $ expression ); // it loads and separates the arguments.
array_push ( $ this -> htmlItem , [ ' type ' => ' mynewtag ' , ' value ' => @ $ args [ ' value ' ]]);
$ result = [ '' , '' , '' , '' ]; // inner, between, pre, post
if (! isset ( $ args [ ' id ' ])) {
$ this -> showError ( " @datepicker " , " Missing @id tag " , true );
}
$ this -> addJs ( ' <script src="js/jquery.js"></script> ' , ' jquery ' ); // our script needs jquery (if it is not loaded)
$ this -> addCss ( ' css/datepicker.css ' , ' datepicker ' );
$ this -> addjscode ( ' $(. ' . $ args [ ' id ' ]. ' ).datepicker(); ' );
//unset($args['value']); // we could unset values that we don't want to be rendered.
return $ this -> render ( $ args , ' select ' , $ result );
}Remarque : Il est préférable d'ajouter la bibliothèque de jQuery et le sélecteur de date une fois dans notre code
