Indenter du code Html

03 juin 2007, 09:49

Bonjour à tous

Voilà, je pense que cette question a dû être posé déjà, mais, malgré mes recherches, je n'ai rien trouvé qui puisse m'aider concrètement.

Alors, je génère du code Html avec du Php, sur un des scripts c'est une page Html entière qui est générée, or, malheureusement, je n'arrive pas à produire un code Html correctement indenté, et selon les données à générer, c'est assez moche faut avouer, même si le navigateur affiche tout ça très bien.

Donc, ma petite question est : est-ce qu'il existe une méthode, pas trop compliquée, pour indenter du code Html généré dynamiquement par du Php ?

J'ai déjà vu que la technologie Tidy serait une des solutions les plus indiquées, sauf que ce n'est pas installé par défaut sur tous les serveurs, et que je souhaite rester le plus compatible possible...

Merci à tous de vos lumières

03 juin 2007, 10:44

Personnellement je mets des espaces et pas des tabulations. Voilà ce que ça donne:
http://lycee.prod.free.fr/index.php
Regarde le code source.
Mais bon, je ne pense pas que ça ait une grosse importance, sauf en lisibilité du code source.

PS le site est en développement, je suis un amateur et je fais ça sur mon temps libre, donc ne faites pas trop attention aux erreurs.

03 juin 2007, 10:53

Bonjour

Personnellement je mets des espaces et pas des tabulations. Voilà ce que ça donne:
http://lycee.prod.free.fr/index.php
Regarde le code source.

En effet, ça a l'air pas mal !

Seulement, est-ce que tu fais ça de manière automatique ?

Si c'est le cas, quelle méthode utilises-tu ?

Après, l'utilisation des espaces ou des tabulations est une affaire de goût je pense...

Merci pour ta réponse

03 juin 2007, 13:55

Non je fais tout à la main.

04 juin 2007, 10:15

L'outil Tidy peut indenter ton code source

04 juin 2007, 13:21

Ben oui, il le sait déjà...

J'ai déjà vu que la technologie Tidy serait une des solutions les plus indiquées,
sauf que ce n'est pas installé par défaut sur tous les serveurs,
et que je souhaite rester le plus compatible possible...

04 juin 2007, 13:32

Bonjour à tous

Non je fais tout à la main.

Ha d'accord... le but est justement d'éviter de le faire à la mano... surtout lorsque le code se complique un peu...

L'outil Tidy peut indenter ton code source

Oui je sais, mais comme je le disais dans mon premier post, la technologie Tidy, bien que très séduisante et visiblement très puissante, elle pose néanmoins un problème de compatibilité, puisqu'elle n'est pas installée par défaut sur tous les serveurs...

Sinon, après quelques recherches infructueuses, j'ai finalement trouvé une solution semi-auto d'identation, qui évite de mettre les espace ou tabulations à la main, mais qui oblige de construire toute la page Html avant de l'afficher, ce qui peut être gênant dans certaines conditions...

Enfin, pour ceux que ça intéresse, voici la solution que j'ai trouvé :

Le principe est simple, lors de la construction du code Html, on met un commentaire à chaque début de ligne qui devra être indentée, commentaire contenant un nombre qui sera ensuite traité par une fonction qui remplacera tous ces commentaires par des tabulations.

Voici un code d'exemple pour mieux visualiser la chose :

<?php
// Variable statique permettant de calculer le nombre de tabulations a inserer
static $tabsNbr;
$tabsNbr = 0;

// Construction du document Html
$doc = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">'."\n";
$doc .= '<html>'."\n";
$doc .= com(1).'<head>'."\n";
$doc .= com(1).'<title>Test Html2Php</title>'."\n";
$doc .= com(0).'<link rel="stylesheet" type="text/css" href="h2p_styles.css">'."\n";
$doc .= com(-1).'</head>'."\n";
$doc .= com(0).'<body>'."\n";
$doc .= com(1).'<div>'."\n";
$doc .= com(1).'<p>Bonjour monde :-)</p>'."\n";
$doc .= com(0).'<p>Petit test de fonction d\'identation semi-auto...</p>'."\n";
$doc .= com(-1).'</div>'."\n";
$doc .= com(-1).'</body>'."\n";
$doc .= com(-1).'</html>';

// Des le document construit, on indente le code suivant les commentaires inseres
$doc = indent($doc);
echo $doc;

// Fonction pour inserer des commentaires servant a l'identation
function com($nro) {
	return '<!--|'.$nro.'|-->';
}
// Fonction rechercher/remplacer des commentaires d'identation par des tabulations
function indent($data) {
	return preg_replace('#(<!--\|-?\d\|-->)#e', 'tabs(\'$1\')', $data);
}
// Fonction retournant des tabulations selon un calcul sur la variable statique
function tabs($data) {
	global $tabsNbr;
	$tabsNbr += str_replace(array('<!--|','|-->'), array('',''), $data);
	return str_repeat("\t", $tabsNbr);
}
?>

Donc, grosso modo, sur chaque nouvelle ligne de code, on place un commentaire, avec la fonction "com(1)", contenant un chiffre "1" sur les balises ouvrantes qui doivent être indentés.

Pour les balises ouvrantes situées au même niveau que la balise précédente, on place un commentaire avec un chiffre "0" (zéro), car ils ne doivent pas être indentés d'avantage.

Enfin, sur les balises fermantes présentes sur une nouvelle ligne, on place un commentaire avec un chiffre négatif "-1", l'indentation devant être inférieure à celle de la balise précédente.

Alors, sans le traitement de la fonction d'identation "indent($doc)", le code Html du document (c'est à dire le contenu de la variable "$doc") donnerait ceci :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<!--|1|--><head>
<!--|1|--><title>Test Html2Php</title>
<!--|0|--><link rel="stylesheet" type="text/css" href="h2p_styles.css">
<!--|-1|--></head>
<!--|0|--><body>
<!--|1|--><div>
<!--|1|--><p>Bonjour monde :-)</p>
<!--|0|--><p>Petit test de fonction d'identation semi-auto...</p>
<!--|-1|--></div>
<!--|-1|--></body>
<!--|-1|--></html>

En revanche, avec le traitement de la fonction d'identation "indent($doc)", le code Html du document donne ceci :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
	<head>
		<title>Test Html2Php</title>
		<link rel="stylesheet" type="text/css" href="h2p_styles.css">
	</head>
	<body>
		<div>
			<p>Bonjour monde :-)</p>
			<p>Petit test de fonction d'identation semi-auto...</p>
		</div>
	</body>
</html>

Voilà... je ne sais pas si cette solution (bidouille devrais-je dire plutôt

) pourra servir à d'autres personnes, en tout cas, pour mon projet, ça me permet d'afficher des pages Html relativement bien indentés, même si ça demande de construire l'ensemble du code Html pour pouvoir l'indenter...

Bref, sans être parfaite, cette astuce me rend quand-même bien service...

Merci à tous... à+

04 juin 2007, 15:02

Euh.... question bête sans doute mais... pourquoi ne pas mettre directement ton indentation dans tes chaines ??? Quitte à te prendre la tête à gérer des alignement à coup de +1/-1, ca rendrait ton code php bien plus lisible et ca te ferait moins de traitement pour un même résultat
au lieu de :

$doc = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">'."\n"; 
$doc .= '<html>'."\n"; 
$doc .= com(1).'<head>'."\n"; 
$doc .= com(1).'<title>Test Html2Php</title>'."\n"; 
$doc .= com(0).'<link rel="stylesheet" type="text/css" href="h2p_styles.css">'."\n"; 
$doc .= com(-1).'</head>'."\n"; 
$doc .= com(0).'<body>'."\n"; 
$doc .= com(1).'<div>'."\n"; 
$doc .= com(1).'<p>Bonjour monde :-)</p>'."\n"; 
$doc .= com(0).'<p>Petit test de fonction d\'identation semi-auto...</p>'."\n"; 
$doc .= com(-1).'</div>'."\n"; 
$doc .= com(-1).'</body>'."\n"; 
$doc .= com(-1).'</html>';

Si tu faisais :

$doc = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">'."\n"; 
$doc.= '<html>'."\n"; 
$doc.= '  <head>'."\n"; 
$doc.= '    <title>Test Html2Php</title>'."\n"; 
$doc.= '    <link rel="stylesheet" type="text/css" href="h2p_styles.css">'."\n"; 
$doc.= '  </head>'."\n"; 
$doc.= '  <body>'."\n"; 
$doc.= '    <div>'."\n"; 
$doc.= '      <p>Bonjour monde :-)</p>'."\n"; 
$doc.= '      <p>Petit test de fonction d\'identation semi-auto...</p>'."\n"; 
$doc.= '    </div>'."\n"; 
$doc.= '  </body>'."\n"; 
$doc.= '</html>';

Tu obtiendrais la même chose... Et à la limite, vu l'exemple si tu n'as pas d'utilisation particulière de php, tu aurais tout intérêt à fermer les balises php pour afficher directement le code html...

04 juin 2007, 15:38

hello,

pour compléter la réponse :

les caractères d'indentation et des retours ligne sont interpretés dans les chaines, que ce soit entre apostrophes, guillemets ou heredoc.

echo 'toto
	pouet
tutu';

regarde le résultat HTML, l'indentation est conservée, les sauts de ligne aussi.

une astuce consiste à écrire son HTML proprement, puis ensuite le découper selon les besoins pour l'intégrer au PHP. Heredoc est une solution idéale pour faire cela sans se prendre la tête avec les guillemets et apostrophes divers.

04 juin 2007, 19:17

Re...

Euh.... question bête sans doute mais... pourquoi ne pas mettre directement ton indentation dans tes chaines ???

pour compléter la réponse :

les caractères d'indentation et des retours ligne sont interpretés dans les chaines, que ce soit entre apostrophes, guillemets ou heredoc.....

Ok, ta question n'est pas bête Ryle, et ton intervention est tout-à-fait justifiée aussi Jules, seulement, l'exemple que j'ai présenté avait pour seul but de montrer la méthode utilisée, mais il n'illustre pas, en effet, les conditions dans lesquelles cette solution pourrait être utile.

En fait, on peut constater, sur pas mal de scripts de gestion de sites dynamiques, comme des forums par exemple (PunBb, PhpBb, etc.) et d'autres produits de ce type, que les pages Html son construites par des fichiers Php dédiés.

Seulement, dans ces fichiers, le code Html n'est pas construit de manière aussi simple et linéaire que mon exemple, au contraire, le plus souvent la construciton du code Html est fait par étapes succèssives, entrecoupées par des tests, analyses et autre traitements, afin que le code Html suivant corresponde à un contexte défini ou réponde à certaines variables.

Bref, pour schématiser la chose, ça ressemblerait à quelque chose comme :

Code : Tout sélectionner

-> Début du code Html
    -> Analyse du contexte
        -> Si tel contexte, un bout de code Html
        -> Si un autre contexte, un autre bout de code Html
-> Suite du code Html
    -> Test sur un variable
        -> Si la variable est égale à une valeur précise, un bout de code Html
        -> Sinon, un bout de code Html différent
-> etc.

Or, dans ces conditions de développement, où les étatpes d'analyse et traitement intermédiaires peuvent parfois être assez limportantes et longues, on y perd vite le nombre de "\t" à mettre devant certains codes pour assurer une identation correcte de la page Html produite.

Donc, les pistes que vous évoquez, bien que tout-à-fait fonctionnelles, s'appliquent assez mal ou, du moins, de manière assez laborieuse dans ce type de conditions de développement.

Lors de mes recherches, j'ai commencé par utiliser une solution facultative, qui constait à mettre des "str_repeat("\t", 3);" devant chaque nouvelle ligne de code.

Seulement, dans la pratique, je retrouvais les mêmes difficultés qu'en mettant les tabulations directement dans le code Html, car je devais remonter sans cesse dans mon fichier Php pour bien m'assurer du nombre de "\t" que j'avais mis plus tôt, et ça devenait rapidement fastidieux.

Donc, dans le but de faciliter le développement tout en assurant un code Html relativement bien indenté, j'ai imaginé une solution qui fonctionnerait par addition ou soustraction d'une valeur statique, afin d'y placer le bon nombre de tabulations dans un traitement final, juste avant l'affichage de la page Html.

Le but n'étant évidemment pas de me compliquer inutilement la vie ou de ralentir bêtement la construction des pages avec des solutions accrobatiques, mais plutôt de rendre le développement plus pratique tout en assurant un code Html pas trop moche.

Voilà... je ne sais pas si mes explications sont assez claires, et je ne sais pas non plus si cette solution sera pertinante à long terme, en tout cas, pour l'instant, elle fonctionne plutôt bien, et rend le travail sur des longs fichier Php beaucoup plus aisé...

Merci à tous... à+

05 juin 2007, 02:25

À part avoir la conscience tranquille ou faciliter ton debug, indenter ton code en sortie ne servira à strictement rien. (à l'exception d'utiliser du temps processeur pour rien)

phpBB utilise un système de templates pour l'affichage du HTML. L'indentation est donc directement dans ces fichiers.

Exemple bidon utilisant la syntaxe de phpBB:

Code : Tout sélectionner

<h1><a href="forums.php">Les forums</a></h1>

<dl class="forums-list">
    <!-- BEGIN forums -->
    <dt>{forums.NAME}</dt>
    <dd>{forums.DESCRIPTION}</dd>
    <!-- END forums -->
</dl>

05 juin 2007, 08:20

À part avoir la conscience tranquille ou faciliter ton debug, indenter ton code en sortie ne servira à strictement rien. (à l'exception d'utiliser du temps processeur pour rien)

Depuis le début du thread, j'hésite à le dire.

Merci Xenon_54

05 juin 2007, 09:40

Bonjour à tous

À part avoir la conscience tranquille ou faciliter ton debug, indenter ton code en sortie ne servira à strictement rien. (à l'exception d'utiliser du temps processeur pour rien)

Depuis le début du thread, j'hésite à le dire.

Pourriez-vous développer un peu Svp ?

Le projet sur lequel je travail est destiné, à priori, à des personnes ayant très peu d'expérience avec les langages tels que le Html, je souhaite donc produire un code relativement "propre" ou, à défaut, le plus lisible possible, et l'indentation participe fortement à la lisibilité du code, surtout pour ceux qui ne sont pas familiers avec ce langage.

Quant à "utiliser du temps processeur pour rien", je ne pense pas que prendre un peu de soin à produire un code lisible soit une utilisation stérile du temps processeur... ceci-dit, je n'ai pas encore testé ma solution sur des pages très longues et/ou complexes, il se peut donc que cette méthode d'indentation soit pénalisante sur des données importantes, je ne sais pas, pour l'heure, ça fonctionne plutôt bien et je n'ai pas constaté de ralentissement sensible...

phpBB utilise un système de templates pour l'affichage du HTML. L'indentation est donc directement dans ces fichiers.

J'ai aussi exploré un peu l'utilisation des modèles dans mon projet, d'ailleurs, dans une certaine mesure je m'en sert aussi, mais ceux-ci posent certains problèmes d'indentation lorsqu'on se trouve avec des imbrications successives... bon, rien de bien grave en réalité, mais avec ma méthode j'ai réussi à corriger un peu cette limitation...

Enfin, j'avoue que je ne suis qu'au tout début de mon projet, j'ai encore beaucoup de développement à faire, et il se peut que, à terme, je finisse par abandonner mon idée d'indentation systhèmatique du code, surtout si ça devient trop pénalisant côté performances, et préférer alors un système de modèles mieux conçu et certainement moins gourmand en ressources processeur.

Merci pour vos contributions... à+

05 juin 2007, 10:42

Disons que le code HTML généré doit, selon moi, uniquement être destiné à être envoyé sur le navigateur.

Tout les développeurs peuvent voir le code HTML depuis les sources PHP. C'est donc ici qu'elles doivent être bien formatées.

Sinon, ce que j'utilise moi pour avoir un code HTML correctement indenté, c'est soit les templates, soit l'imbrication PHP/HTML.
exemple :

<html>
  <head>
    <title>ma page indentée</title>
  </head>
  <body>
<?php
  for ($i = 0 ; $i < 10 ; $i++)
  {
?>
    <p>Le numéro courant est le <?= $i ?></p>
<?php
  }
?>
  </body>
</html>

Dans le cas de code HTML simple, c'est assez pratique. Dès qu'il commence à y avoir plus de complexité, le système des templates devient plus simple à utiliser

05 juin 2007, 11:03

Sinon, si tu veux indenter le code automatiquement sans te faire chier, tu peux utiliser ob_start() avec une fonction de callback qui détecte les balises et qui indente le code html juste avant l'affichage...

Indenter du code Html

Qui est en ligne