Tutoriel PHP: Comment bâtir un constructeur de balises HTML ( code source gratuit)

Tutoriel PHP: Comment bâtir un constructeur de balises HTML ( code source gratuit)



Cherchez-vous un moyen de réduire le temps d’implémentation et d’entretien de vos interfaces utilisateurs web? Peut-être devriez-vous considérer la génération automatique de balises HTML.

Tout d’abord, la génération automatique de balises HTML permet de significativement réduire le nombre de ligne de code dans vos vues. Par exemple, une ligne de code en PHP comme celle-ci :

echo HTMLBuilder::createTag(HTMLTag::TEXT_COLOR, ‘GRADIENT’, ”);

Permet de gérer tout ceci de code HTML (encodé pour être valide sur youtube) :

<div class="input-group"><div class="input-group-prepend"><span class="input-group-text" title="Click here to access an online gradient generator."><a href="http://angrytools.com/gradient/&quot; target="_blank"><i class="fas fa-paint-brush"></i></a></span></div><input type="text" id="GRADIENT_TEXT" class="form-control" name="GRADIENT_TEXT" onblur="autoExpand(this, true); visualizeColorBox(this);" onfocus="autoExpand(this);" oninput="inputGradient(this);autoExpand(this);" maxlength="150" pattern="^(?:#(?:[a-fd]{3}|[a-fd]{6})|[a-z]{3,20}|rgba((?:(?:1d{2}|2(?:[0-4]d|5[0-5])|d{1,2})%?,?s?){1,3}(?:0.d|[01])?)|(?:repeating-)?(?:linear|radial)-gradient((?:-?d{2,3}deg,s?|[a-z]+-[a-z]+,?)?(?:#(?:[a-fd]{3}|[a-fd]{6})s?,?|[ ]|(?:d{1,2}|100)%,?|rgba((?:(?:1d{2}|2(?:[0-4]d|5[0-5])|d{1,2})%?,?s?){1,3}(?:0.d|[01])?)s?,?|[a-z]{2,20}s?,?)+));?$" title="Color hexdecimal code, color name, rgba color, or WC3 gradient. Max 150 character." defaultwidth="715"><div class="input-group-append"><span class="input-group-text"><input type="color" id="COLOR_TEXT" style="border-style: hidden;" onchange="var textbox = document.getElementById('GRADIENT_TEXT'); textbox.value = this.value; visualizeColorBox(textbox);"></span></div><div id="GRADIENT_TEXT_DIV" class=&

Non seulement, vous simplifiez la gestion de vos vues tout en augmentant votre vitesse d’écriture de celle-ci. De plus, la génération automatique garantie la constance entre vos différentes interfaces ce qui est essentiel pour assurer une bonne expérience utilisateur. En effet, votre logiciel doit toujours fonctionner de la même façon, sinon l’utilisateur ne saura pas comment l’utiliser correctement ce qui crée des frustrations.

Finalement, et cela est de loin le plus important, la création automatique des balises par une classe signifie que, si vous avez à faire des modifications, vous avez à faire les ajustements uniquement à un endroit pour les appliqués partout dans votre logiciel ou même tous vos logiciels simultanément.

Je ne saurai le répéter suffisamment, les coûts les plus importants d’un logiciel ne provient pas de la création initiale du logiciel, mais dans son entretien sur le long terme. Plus vous centraliser le fonctionnement de votre logiciel, plus vous réduisez les coûts autant monétaires qu’en terme de temps de développement pour maintenir les fonctionnalités existantes de votre logiciel.

Vous pouvez utiliser l’ensemble du code de ce projet gratuitement et sans droit d’auteur dans n’importe lequel de vos projets personnels ou professionnels. N’hésitez pas à aimer, commenter et partager avec vos amis.

Jonathan Parent-Lévesque de Montréal

Bryan Sassaman codepen (special thanks) : https://codepen.io/BrianSassaman/pen/iLrpC

Boostrap 4 : https://getbootstrap.com/docs/4.1/getting-started/introduction/

Boostrap toggle: http://www.bootstraptoggle.com/

Code source gratuit: https://drive.google.com/open?id=1IyMiOqclDhE0arR6bU8ThZaEr5wM7nn_

Notepad++: https://notepad-plus-plus.org/

Xampp: https://www.apachefriends.org/fr/index.html

source