OVH Cloud OVH Cloud

Separation html/php

14 réponses
Avatar
xpatval
Bonjour à toutes/tous

Ce qui m'amène: un sujet qui doit être ô combien récurrent, mais qui
continue de me rendre le bulbe rachidien complètement mou, à savoir, cette
question de séparation entre le html et le php.
Oui, il faut éviter de mélanger ces deux choses, afin de rendre clair et la
prog, et la mise en page. Mais jusqu'où cela peut-il aller ?
Je pense (je n'essuie pas) que la limite doit être vite atteinte, et qu'il
n'est pas aisé de la dépasser .

J'ai ici un formulaire d'ajout de données, que je suis en train de bâtir. Il
n'est pas complet dans son déroulement, mais montre à quel point (à mon
sens, et je suis loin d'être une bête) cela peut devenir la capharnëum entre
le code et html.

Quelqu'un peut-il me montrer comment séparer ces deux choses ?

<body>

<?php
include "connect.inc";
include "initvar.php";

if ($retour == true)
{
$retour = "";
$confirm = 0;
}
switch ($confirm)
{
case 0:
?>
<div class="cent1">
<p class="p0" style="font-size: 18px;font-weight: 800;">Ajout de
données - site Valart</p>
<p class="p1" style="text-decoration: underline;">Choisir l'une
des options ci-dessous:</p>
<p class="p3">Ajout dans les tables:
<form action="<?php echo $_SERVER['PHP_SELF'] ;?>"
method=post>
<select class="form1" name="tab" size="2"
onFocus="this.blur()" onChange="submit()">
<?php $confirm = 1;
$table = mysql_list_tables("valart");
while (list($tab) = mysql_fetch_array($table))
{
?>
<option value="<?php print $tab;?>"><?php echo
$tab;?></option>
<?php
}
?>
</select>
<br><br>
<input type="hidden" name="confirm" value="<?php echo
$confirm ;?>">
</form>
</p>
<p class="p2"><a href="index.php">Sommaire</a></p>
</div>
<?php
break;
case 1:
?>
<div class="cent1">
<p class="p0" style="font-size: 18px;font-weight: 800;">Ajout de
données - site Valart</p>
<p class="p3">Ajout dans la table <?php print $tab ;$confirm = 2;
?></p>
<p class="p3">Remplir les différentes zones ci-dessous:<br><br>
<form style="text-align:left;margin:15px;" action="<?php echo
$PHP_SELF ;?>" method=post>
Nom:<br>
<input class="inp" type="text" name="nom" value=""
title="Entrez le nom du dessin." alt="Entrez le nom du dessin."><br><br>
Longueur:&nbsp;&nbsp;Largeur:
<input class="inp" style="margin-right:25px;"
type="text" name="lon" value="" maxlength="4" size="4">
<input class="inp" type="text" name="larg" value=""
maxlength="4" size="4"><br><br>
Année:<br>
<input class="inp" type="text" name="annee" value=""
maxlength="4" size="4"><br><br>
Ordre:<br>
<input class="inp" type="text" name="ordre"
value=""><br><br>
<input type="hidden" name="confirm" value="<?php echo
$confirm ;?>">
<input style="background-color: #FFCC00;" type="submit"
value="Validation">&nbsp;&nbsp;<input type='submit' name='retour'
value='retour'>
</form>
</p>
<p class="p2"><a href="index.php">Sommaire</a></p>
</div>
<?php
break;
}
?>
</body>
</html>


xpatval

--
xpatval@(oo)wanadoo.fr [Oter le (oo) dans l'adresse]
-----
http://24lemans.free.fr
-----

10 réponses

1 2
Avatar
Ronnie Garcia
xpatval wrote:
Ce qui m'amène: un sujet qui doit être ô combien récurrent, mais qui
continue de me rendre le bulbe rachidien complètement mou, à savoir, cette
question de séparation entre le html et le php.


Ce qui est important, ce n'est pas la séparation entre le html et le
PHP, ce qui n'a pas vraiment de sens, mais plutot la séparation entre la
présentation et le contenu.
On dit aussi séparation entre la présentation et le métier.

Oui, il faut éviter de mélanger ces deux choses, afin de rendre clair et la
prog, et la mise en page.


Cela permet effectivement d'avoir d'un coté ton métier, que tu pourras
modifier à volonté sans que cela n'impacte toute ton application, et
donc la présentation.

De la même manière cela permet de pouvoir modifier le design graphique
de ton application sans avoir a toucher au métier.

Mais jusqu'où cela peut-il aller ?


Il y a plusieurs niveaux. Le premier stade, AMHA, c'est de penser
"templates", ensuite de penser "MVC".

L'exemple le plus simple c'est l'affichage du résultat d'une requete
SQL, sous forme d'un tableau (html) d'enregistrements.

Dans le pire des cas, tu feras comme ca, dans un seul fichier (en pseudo
code) :

connexion bdd
requete_sql
query
affichage debut tableau : <table>
while fetch_row
affichage d'une ligne <tr><td>
/while
affichage fin tableau : </table>
deconnexion

La tu as tout mélangé. Du coup si tu veux voir ou modifier ta requete,
il faut chercher dans tout ton programme, y compris la partie
présentation (html).

Pour séparer présentation de contenu, il faudrait plutot imaginer de
placer la logique (le métier) dans un fichier, qui s'occupe de récuperer
les informations de la base et de les structurer (dans un array PHP par
exemple).
Ensuite de faire un template, qui s'occupe d'afficher les informations
que tu lui aura passées, sans savoir ce qu'elles contiennent (la seule
chose connue doit etre la structure, de ton array PHP donc).

Quand je dis template, je ne pense pas forcément a Smarty ou autre.. PHP
lui meme est un langage de template a la base, donc autant l'utiliser
comme tel =)

Donc ton template pourrait consister en un foreach() qui parcoure et
affiche ton contenu. Ici tu auras donc, forcément un mélange entre du
PHP et du HTML, mais c'est inévitable. En revanche tu as correctement
séparé ta logique de ta présentation.

J'ai ici un formulaire d'ajout de données, que je suis en train de bâtir.


Je n'ai pas regardé ton exemple en détail, mais si tu veux t'engager
dans la séparation contenu/présentation, je te conseille de regarder du
coté de QuickForm (dans PEAR), qui facilite cette partie pour les
formulaires.

Bon sinon on pourrait en parler des heures, mais la c'est un bon début =)

--
Ronnie Garcia <ronnie at mk2 dot net>

Avatar
zdid
xpatval wrote:
Faire du php Objet qui encapsulera efficacement les balises HTML
Bonjour à toutes/tous

Ce qui m'amène: un sujet qui doit être ô combien récurrent, mais qui
continue de me rendre le bulbe rachidien complètement mou, à savoir, cette
question de séparation entre le html et le php.
Oui, il faut éviter de mélanger ces deux choses, afin de rendre clair et
la prog, et la mise en page. Mais jusqu'où cela peut-il aller ?
Je pense (je n'essuie pas) que la limite doit être vite atteinte, et qu'il
n'est pas aisé de la dépasser .

J'ai ici un formulaire d'ajout de données, que je suis en train de bâtir.
Il n'est pas complet dans son déroulement, mais montre à quel point (à mon
sens, et je suis loin d'être une bête) cela peut devenir la capharnëum
entre le code et html.

Quelqu'un peut-il me montrer comment séparer ces deux choses ?

<body>

<?php
include "connect.inc";
include "initvar.php";

if ($retour == true)
{
$retour = "";
$confirm = 0;
}
switch ($confirm)
{
case 0:
?>
<div class="cent1">
<p class="p0" style="font-size: 18px;font-weight: 800;">Ajout de
données - site Valart</p>
<p class="p1" style="text-decoration: underline;">Choisir l'une
des options ci-dessous:</p>
<p class="p3">Ajout dans les tables:
<form action="<?php echo $_SERVER['PHP_SELF'] ;?>"
method=post>
<select class="form1" name="tab" size="2"
onFocus="this.blur()" onChange="submit()">
<?php $confirm = 1;
$table = mysql_list_tables("valart");
while (list($tab) = mysql_fetch_array($table))
{
?>
<option value="<?php print $tab;?>"><?php
echo
$tab;?></option>
<?php
}
?>
</select>
<br><br>
<input type="hidden" name="confirm" value="<?php echo
$confirm ;?>">
</form>
</p>
<p class="p2"><a href="index.php">Sommaire</a></p>
</div>
<?php
break;
case 1:
?>
<div class="cent1">
<p class="p0" style="font-size: 18px;font-weight: 800;">Ajout de
données - site Valart</p>
<p class="p3">Ajout dans la table <?php print $tab ;$confirm > 2;
?></p>
<p class="p3">Remplir les différentes zones ci-dessous:<br><br>
<form style="text-align:left;margin:15px;" action="<?php
echo
$PHP_SELF ;?>" method=post>
Nom:<br>
<input class="inp" type="text" name="nom" value=""
title="Entrez le nom du dessin." alt="Entrez le nom du dessin."><br><br>
Longueur:&nbsp;&nbsp;Largeur:
<input class="inp" style="margin-right:25px;"
type="text" name="lon" value="" maxlength="4" size="4">
<input class="inp" type="text" name="larg" value=""
maxlength="4" size="4"><br><br>
Année:<br>
<input class="inp" type="text" name="annee" value=""
maxlength="4" size="4"><br><br>
Ordre:<br>
<input class="inp" type="text" name="ordre"
value=""><br><br>
<input type="hidden" name="confirm" value="<?php echo
$confirm ;?>">
<input style="background-color: #FFCC00;"
type="submit"
value="Validation">&nbsp;&nbsp;<input type='submit' name='retour'
value='retour'>
</form>
</p>
<p class="p2"><a href="index.php">Sommaire</a></p>
</div>
<?php
break;
}
?>
</body>
</html>


xpatval



Avatar
Frederic BISSON
cela peut devenir la capharnëum entre le code et html.
Effectivement


Quelqu'un peut-il me montrer comment séparer ces deux choses ?
Ma méthode à moi :

Je n'alterne jamais code PHP et code HTML
Quand il faut de l'HTML, je le met dans des echo.
Mes fichiers PHP ont tous un seul et unique '<?php' d'ouverture et un seul
et unique '?>' de fermeture.

Ensuite, je mets tous les styles dans un fichier CSS (tu utilises une
propriété style dans tes balises alors que tu utilises la propriété
class, ce n'est pas très logique...)

Ensuite, si tu veux réduire encore plus le code HTML à l'intérieur de
ton code, tu peux passer par un framework de classes (classes page,
formulaire, champ, bouton, paragraphe, chapitre etc...) qui, elles,
généreront le code HTML nécessaire.

@+

Frédéric BISSON

Avatar
Marc
Ronnie Garcia wrote:
Donc ton template pourrait consister en un foreach() qui parcoure et
affiche ton contenu. Ici tu auras donc, forcément un mélange entre du
PHP et du HTML, mais c'est inévitable. En revanche tu as correctement
séparé ta logique de ta présentation.




j'ai commencé a utiliser http://pear.php.net/package/HTML_Template_Xipe
c'est assez bleuffant. C'est assez facile a manipuler pas de nouveau
langage de template : c'est directement du php. Il y a bien séparation
entre le code et la présentation.

voici ce que ca donne (de memoire):

include_once('Template/Xipe.php');
$options = array(...);
$template = new Xipe($options);

function is_admin(){
...
}



$sql = 'SELECT * FROM users WHERE ...';
$array = $db->get_all($sql);
$title = 'Liste des utilisateurs';

$template->compile('users.tmpl');
include_once($template->getCompiledFile());

# le fichier template :
<!-- file templates/users.tmpl -->
<h1>{$title}</h1>

<ul>
{foreach($array as $key=>$record)}

<!-- gere les indentations comme des accolades ouvrantes et fermantes
{if(is_admin()}
<li>vous etes administrateur
{else}
<li>vous etes invités
<li>Nom : {$record['nom']}
<li>Preom : {$record['prenom']}
<li>email : {$record['email']}
<br>

</ul>
<!-- end file templates/users.tmpl -->

dans le template, il est possible d'acceder aux meme variables que celle
declarée dans le script d'invocation et d'include. Si on est dans une
classe $this est accessible.

L'indentation du code html permet de s'affranchir des ouverture et
fermetures de blocks.

On voit que le travail réalisé par le template est minimalistique. Mais
suffisant pour ne pas mettre ensemble logique et présentation ou plus
précisement les séparer au maximum.

Avatar
News Subsystem
Mes fichiers PHP ont tous un seul et unique '<?php' d'ouverture et un seul
et unique '?>' de fermeture.



Ça me parait moins clair au contraire... :-?

Enfin, ça doit dépendre des éditeurs. Le mien colorie l'HTML, et en souligne les erreurs, mais pas à l'intérieur d'un echo. ;-)

--
DJiK

Avatar
Frederic BISSON
Mes fichiers PHP ont tous un seul et unique '<?php' d'ouverture et un seul
et unique '?>' de fermeture.
Ça me parait moins clair au contraire... :-?

Non, car cela permet d'avoir une indentation correcte et de ne pas

chercher les endroits où on alterne html et php

Enfin, ça doit dépendre des éditeurs. Le mien colorie l'HTML, et en
souligne les erreurs, mais pas à l'intérieur d'un echo. ;-)
Cela peut devenir problématique quand tu ne joues pas le jeu HTML/CSS et

que tu génères tout le code HTML dans un seul PHP.

Pour la conception des pages, tu peux utiliser un logiciel comme
Dreamweaver ou GoLive et faire du copier/coller du code HTML généré.
Ensuite, pour tester s'il n'y a pas d'erreur dans ton code HTML GENERE PAR
PHP, tu passes par le HTML Validator de www.w3c.org et tu auras une bonne
idée de la justesse de ton code.

@+

Frédéric BISSON


Avatar
DJiK
Non, car cela permet d'avoir une indentation correcte et de ne pas
chercher les endroits où on alterne html et php



J'ai une indentation correcte! Et les <? ?> sont en gros sur fond jaune. :-) J'utilise DevPHP 2.
Et franchement si tout était en echo j'y comprendrai rien!

Enfin, chacun ses gouts...




Pour la conception des pages, tu peux utiliser un logiciel comme
Dreamweaver ou GoLive



Non merci! :-D

--
DJiK

Avatar
Frederic BISSON
J'ai une indentation correcte! Et les <? ?> sont en gros sur fond jaune. :-) J'utilise DevPHP 2.
Et sans coloration syntaxique ? Sur un listing par exemple ?


Et franchement si tout était en echo j'y comprendrai rien!
Ben, franchement, étant donné que je crée des classes et que je fais

des héritages, des echos, dans mes sources, je n'en ai pas beaucoup,
voire aucun dans certains.

Enfin, chacun ses gouts...
Je comprends parfaitement qu'il est tentant d'utiliser la technique qui

consiste à alterner code HTML et code PHP. Elle permet même de
développer plus rapidement... au début. Si tu réfléchis à la
pérennité de ton code, je ne suis pas sûr que ce soit à préconiser.

Pour la conception des pages, tu peux utiliser un logiciel comme
Dreamweaver ou GoLive
Non merci! :-D

Je ne force personne ;-)


@+

Frédéric BISSON


Avatar
FAb
Regardez du côté des templates.
FastTemplate, smarty etc.

FAb
Avatar
Thierry SCHMIT
bonjour,

ma recette à moi donc:
PHP pour mouliner les informations et produire un fichier XML
La plupart du temps mon code php commence donc par
header("content-type: text/xml");

Le code php place dans le xml une référence à une feuille style xsl en
fonction
de critères que tu as à définir.
$stylesheet = "<?xml-stylesheet type="text/xsl" href="search.xsl"?>";

Bien sur écrire les feuilles de style et donc au minimum se pencher sur XSLT
et X-path.

L'avantage que je vois à cette méthode c'est qu'elle utilise des normes
alors qu'aucun
des moteurs de templates n'est normalisé.En terme de performance ne n'ai
jamais
trouvé de comparatif entre cette méthode et une méthode basée sur des
templates.

En variante, et pour compatibilité avec les navigateurs non compatibles avec
XSLT, tu
peux invoquer sur le serveur le parser XSLT de manière à ce que le script
renvoie
du HTML direct. Tu soulages donc le client de la transformation.
En php < 5 j'utilise sablotron avec beaucoup de bonheur.

thierry
1 2