Discussion :

[CinePhil]

Bonjour,

J'utilise depuis relativement peu de temps Ajax et, lorsque le programme Ajax génère du HTML, je procède, classiquement je pense, via une variable qui contient le texte du html à retourner à la fonction Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$texte = "<div>Du texte et autres joyeusetés HTML</div>";
 
// et à la fin du programme :
echo $texte;

Je ne trouve pas ça très propre de passer par une variable PHP alors que le reste de l'appli est développée en séparant le code HTML du PHP.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?php
foreach($tableau)
{
?>
<div>Du texte et autres joyeusetés HTML</div>
<?php
}
?>

Y a t-il une manière plus propre d'appliquer ce principe en Ajax ?

[dkmix]

Bonjour, il est possible d'utiliser JSON comme format de données pour AJAX, et ensuite d'utiliser des templates pour mettre à jour le html.

underscore.js permet de faire cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>";
_.template(list, {people : ['moe', 'curly', 'larry']});
 
Output => "<li>moe</li><li>curly</li><li>larry</li>"

[CinePhil]

Mouais... le JSon est encore moins lisible que le HTML dans une variable PHP !

Je jetterai un oeil à l'occasion.

Merci pour la réponse.

[Golgotha]

Concrètement, qu'est ce que fait ta fonction ajax, et quel est le code HTML que tu dois ajouter ?

Je pense plus à un problème de conception.

[dkmix]

le JSon est encore moins lisible que le HTML dans une variable PHP !

il existe des framework de templating comme Knockout.js qui donne un syntaxe HTML comme ceci :

Html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName">Go caps</button>

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
 
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();    
    }, this);
 
    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };    
}
 
// Activates knockout.js
ko.applyBindings(new AppViewModel());

Pour : syntaxe html sympa
Contre : pas simple a débugger , un temps de mise en place non négligeable.


Lien vers l'exemple : ici

[CinePhil]

Concrètement, qu'est ce que fait ta fonction ajax, et quel est le code HTML que tu dois ajouter ?

Je pense plus à un problème de conception.

Un truc classique, il me semble, du genre :
Clic sur un objet cliquable lance une fonction javascript qui passe des paramètres en Ajax à un programme PHP qui met à jour la BDD puis construit un bout de HTML pour l'afficher dans la page à la place d'autre chose ou à la suite de quelque chose ou dans une div jusque là vide.

C'est la contruction du HTML en PHP qui me pose des problèmes de conscience et, à vrai dire, de facilité de codage. C'est plus facile d'écrire du HTML avec des bouts de PHP dedans pour afficher le contenu de variables PHP plutôt que de construire du HTML dans une variable texte PHP.

Concrètement, ceci :

Code PHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="machin">
	Ma variable :&nbsp;
	<?php echo $la_variable; ?>
</div>

Est plus facile et plus propre à écrire que ceci :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$html = '<div class="machin">'."\n";
$html .=	'Ma variable :&nbsp;';
$html .=	$la_variable."\n";
$html .= '</div>'."\n";

[v1cent]

Il n'y a aucune nécessité de transmettre différemment le code html destiné à être affiché en tant que page et celui destiné à être utilisé en tant que portion de page.

donc probablement un problème de conception...


Beaucoup d'applications font la séparation entre la notion de vue et celle de layout/template (je cherche toujours de bons mots en français pour ça).
Une vue te permet d'afficher le code HTML correspondant à un objet (ou si t'es pas en POO à une variable, un tableau). Ce sera souvent (mais pas toujours) du code HTML dans une variable PHP.
Le template/layout te permet de gérer ce qui est autour, donc la structure générique de ta page html dans le cas d'une requête destinée à être en pleine page, et à priori rien du tout dans le cas d'une requête AJAX, vu que tu ne souhaite avoir que ta variable. En général, ce sera du code html avec un peu de php.

J'espère que ça pourra t'éclairer.

En tout cas, si tu préfère, tu peux tout à fait faire un requête AJAX avec un code comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div class="machin">
	Ma variable :&nbsp;
	<?php echo $la_variable; ?>
</div>

Mais pour t'en dire plus, il nous faudrait ta conception

[CinePhil]

Ben je l'ai décrite ma conception :

Un truc classique, il me semble, du genre :
Clic sur un objet cliquable lance une fonction javascript qui passe des paramètres en Ajax à un programme PHP qui met à jour la BDD puis construit un bout de HTML pour l'afficher dans la page à la place d'autre chose ou à la suite de quelque chose ou dans une div jusque là vide.

[dkmix]

si le code html/php que retourne la fonction ajax est isolé dans un fichier, il est possible d'utiliser file_get_contents et stream_context_create comme la réponse à ce post

boutDeCodeHtml.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="machin">	
	<?php echo $_POST['var1']." ".$_POST['var2']; ?>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$postdata = http_build_query(
    array(
        'var1' => 'some content',
        'var2' => 'doh'
    )
);
 
$opts = array('http' =>
    array(
        'method'  => 'POST',
        'header'  => 'Content-type: application/x-www-form-urlencoded',// a adapter
        'content' => $postdata
    )
);
 
$context  = stream_context_create($opts);
 
$resultPourAjax = file_get_contents('http://example.com/boutDeCodeHtml.php', false, $context);

Ça fait beaucoup de détours... question perfs çà doit pas être top mais on garde une syntaxe du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="machin">	
	<?php echo $var1; ?>
</div>

Dans certains cas avec des helpers ça doit être jouable.

[v1cent]

Ben je l'ai décrite ma conception :

Ha ok tu fais les traitements et les vues dans les mêmes fichiers ? j'avais pas compris ça...

A mon avis en effet la meilleure solution est de séparer tout ça d'une manière ou d'une autre, comme ça tu pourra coder tes vues comme tu veux.

Dans Zend ils font un truc que je trouve sympa, ils font la distinction entre les fichiers destinés à afficher quelque chose .phtml, du html avec des affichages de variables php, et les fichiers destinés à faire des traitements et autres classes en .php.

[CinePhil]

Ha ok tu fais les traitements et les vues dans les mêmes fichiers ? j'avais pas compris ça...

Justement non !
Pour la partie "classique" de l'appli, j'ai des fichiers x-controller.php et des fichiers x-view.phtml mais c'est justement pour la partie Ajax que je pose la question si on peut faire pareil. Pour le moment, les programmes .php de la partie Ajax de l'appli font le traitement et la restitution dans une variable vers la fonction Javascript appelante. Cette variable peut contenir un simple texte ("Votre contenu est bien enregistré"), une valeur (l'identifiant du contenu créé en BDD) ou du HTML (donc du texte complexe avec des balises, comme dans l'exemple que je donne ici).

Et c'est cette partie HTML encapsulée dans une variable PHP que je trouve chiante, peu esthétique et "anti MVC".

[dkmix]

Dans un context MVC, dans le controler :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$resultPourAjax = file_get_contents('http://example.com/x-controler.php?action=getAjaxView&var1=TOTO');

[bewidia]

Et c'est cette partie HTML encapsulée dans une variable PHP que je trouve chiante, peu esthétique et "anti MVC".

Personnellement j'utilise la transformation XSLT depuis quelques temps et je trouve ça très pratique.
Ca rajoute une étape (données -> XML) et un langage à apprendre (XSLT) mais c'est selon moi le plus propre.

Ex :
1) ton appel Ajax exécute une requête sur le serveur PHP
2) le serveur construit un XML simple du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<reponse>
<codeRetour>0</codeRetour>
<messageRetour>Tout s'est bien passé !</messageRetour>
</reponse>

3) la feuille XSLT le tranforme en HTML pour donner quelque chose comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div>
Tout s'est bien passé !
</div>

en cas d'erreur, on peut imaginer la chose suivante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div class="erreur">
<ul>
<li>Code Erreur : 123</li>
<li>La date est invalide</li>
</ul>
</div>

4) ton appel Ajax récupère un morceau html qu'il insère dans le DOM

La mise en forme est bien séparée du traitement serveur. Comme ça je sais que si je dois modifier du traitement serveur, je vais coté serveur et si je veux modifier l'apparence, je vais coté XSLT.
L'avantage aussi étant que le XSLT peut générer tout un tas de formats différents (pdf, html, etc.)

[CinePhil]

Je regarderai ça à l'occasion mais pour le moment j'en reste à la technique de l'encapsulation du HTML dans une variable PHP sur ce projet qui traîne...

Merci pour vos réponses en tout cas.

[CinePhil]

Je réactive cette discussion car j'ai un gros bout d'Ajax à faire (grosso modo une popup avec image, textes variables selon le contexte, compteurs, boutons d'action...) et c'est vraiment pénible de mettre tout ce code PHTML dans une variable chaîne PHP.

J'ai essayé ce qui suit...

test_page.phtml :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<html>
<body>
<p>Valeur : <?php echo file_get_contents('sousprog.phtml'); ?></p>
</body>
</html>

sousprog.phtml :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$variable = 'Goooood !';
?>
Une valeur au pif avec du blabla et une variable php : <?php echo $variable; ?>

Résultat :

Valeur : Une valeur au pif avec du blabla et une variable php :

Code source de la page :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<html>
<body>
<p>Valeur : <?php
$variable = 'Goooood !';
?>
UNe valeur au pif avec du blabla et une variable php : <?php echo $variable; ?></p>
</body>
</html>

On voit que, malheureusement, le code PHP est présent tel quel mais non interprété, donc solution pas bonne.

Dans un context MVC, dans le controler :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$resultPourAjax = file_get_contents('http://example.com/x-controler.php?action=getAjaxView&var1=TOTO');

Tu peux expliquer davantage l'utilisation que tu préconises ?

EDIT :
J'ai trouvé une méthode qui semble fonctionner et qui correspond à ce que je souhaite...

Le programme Ajax Javascript passe ses paramètres à un programme x_controller.php à la fin duquel il y a ceci :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

echo include("x_view.phtml");

En effet, selon la doc PHP :

Si appelée depuis l'environnement global, l'exécution du script est interrompue. Si le script courant était inclus avec la structure include ou require, alors le contrôle est rendu au script appelant. De plus, si le fichier du script courant a été inclus via l'instruction include, alors la valeur retournée sera utilisée comme résultat de l'instruction include.

Du coup, à la fin de x-view.phtml, il suffit d'ajouter un simple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php return; ?>

Ainsi, même dans la partie PHP d'Ajax, on peut avoir une séparation MVC propre et plus facile à écrire, à lire, à débugguer.

[dkmix]

Bonjour,

Tu peux expliquer davantage l'utilisation que tu préconises ?

file_get_contents(chemin) ne renvoi pas la même chose que file_get_contents(url).
Dans mon exemple il faut utiliser l'url pour interpréter le code comme du php.

sousprog.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$variable = 'Goooood !';
?>
Une valeur au pif avec du blabla et une variable php : <?php echo $variable; ?>

index.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<?php
 
$varRetourDirect =  file_get_contents('sousprog.php');
$varRetourUrl = file_get_contents('http://localhost:8081/test/sousprog.php');
?>
 
<?php echo 'direct : '.$varRetourDirect;?>
<br/>
<?php echo 'url : '.$varRetourUrl;?>

Résultat :

direct : Une valeur au pif avec du blabla et une variable php :
url : Une valeur au pif avec du blabla et une variable php : Goooood !