Affichage de messages dynamiques formatés en fonction du contenu à l'aide de PHP/Ajax/Jquery

Question

Je travaille sur un système de commentaires/contenus/affichages et je suis arrivé à une bifurcation, alors je me suis dit que je devais demander d'autres avis avant de choisir une voie. Je suis désolé, mais pour l'instant je n'ai pas d'exemple concret à présenter (ou un que je puisse partager), alors j'espère que ma description suffira.

J'ai une page principale index.php qui appelle loadmore.php pour demander les messages des utilisateurs à afficher dans un div. Le loadmore.php reçoit ces données d'une base de données MySQL.

Chaque message peut être de différents types et s'affiche différemment lorsqu'il est affiché à l'écran.

Exemples (Tous les messages affichent l'utilisateur qui a posté et la date en haut) :

• POSTE : Poste ordinaire, texte seulement.
• LIEN : Affiche le titre de la page liée sous forme de lien hypertexte, une petite image miniature à côté et un extrait de texte extrait du site lié.
• IMAGE : Affiche une grande image avec une légende en dessous.
• VIDÉO : Affiche le titre en haut, avec la vidéo sous le titre prenant la moitié de la largeur de la division, la description de la vidéo est à côté de la vidéo.

Ne vous préoccupez pas du formatage, je voulais simplement montrer que chaque message sera formaté différemment selon le type de message et que le HTML peut être long.

Maintenant, voici ce que je veux savoir : d'où doit provenir le HTML généré ou choisi (pour simplifier, j'utilise un pseudo-code).

Option 1 . Je pourrais avoir les différents "modèles" HTML en ajax/js sur la page index.php elle-même et juste remplir les variables en utilisant un tas d'instructions IF, mais je ne suis pas sûr que cela doive être dans le fichier index.

index.php

    <div id="mainContainer">
    //Content
    <div id="postsContainer">
        //Individual posts go in here (Several divs formatted according to content)
    </div>
    //More content
    </div>
    <script>
     GET data to loadmore.php and get results into variables
     IF "type" is "link" 
         append to #postsContainer "<div id="linkURL"....$variables etc...
     IF "type" is "video" 
         append to #postsContainer "<div id="videoDiv"....$variables
     //And so on...
    </script>

loadmore.php

    <?PHP
    //Get and process post data into variables
    //Query SQL database for more/new posts
    //Return individual data in JSON format to index.php
    ?>

Option 2 . OU, je pourrais faire en sorte que le fichier loadmore.php utilise des instructions IF afin de renvoyer la chaîne HTML appropriée à ajouter dans index.php, mais je trouve qu'il serait inefficace de faire passer autant de longues chaînes HTML entre les deux fichiers PHP côté serveur alors que seules les variables peuvent être transmises.

index.php (Note : seule la partie script est différente)

    <div id="mainContainer">
    //Content
    <div id="postsContainer">
        //Individual posts go in here (Several divs formatted according to content)
    </div>
    //More content
    </div>
    <script>
     //GET data to loadmore.php and get resulting HTML string
     //Append to #postsContainer the HTML string returned from loadmore.php
    </script>

loadmore.php

    <?PHP
    //Get and process post data into variables
    //Query SQL database for more/new posts
    IF "type" is "link" 
         $returnHTML = "<div id="linkURL....$variables etc...
    IF "type" is "video" 
         $returnHTML = "<div id="videoDiv....$variables
    //And so on...

    return $returnHTML; 
    //This is a single long string returned with all HTML formatted by loadmore.php
    //index.php simply has to Append the entire string into the div
    ?>

Quelle est la meilleure voie à suivre ? Et pourquoi ?

Désolé si cela semble désordonné, je suis encore en train de m'habituer aux méthodes de formatage de ce site...

Answer 1

En faisant quelque chose de similaire dans le passé,

Il suffirait que votre loadmore.php passe en revue les messages que vous souhaitez afficher, détermine le type de message et affiche le formatage correct.

<?php
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
//...
$result = $mysqli->query($query);

while ($row = $result->fetch_array(MYSQL_ASSOC)) {
  $count += 1;
  echo '<div id="post'.$count.'">';
  switch ($row['type']) {
    case 'POST':
      //POST format
      break;
    case 'LINK':
      //LINK format
      break;
    case 'PICTURE':
      //PICTURE format
      break;
    //...
    default:
      //default
  }
  echo '</div';
}

$result->free();
$mysqli->close();
?>

Vous pourriez alors simplement charger la page php dans un div. Une façon de procéder est d'utiliser jQuery :

<script typ="text/javascript">
    $(document).ready(function(){
         $("#postsContainer").load("loadmore.php");
    });
</script>

Si vous vouliez passer des paramètres à loadmore.php (disons à partir d'un formulaire, peut-être caché), vous pourriez utiliser ce qui suit :

var variables = $("#form").serialize();
$.post("loadmore.php", variables, function(data) {
    $("#postsContainer").html(data);
});

Ensuite, la récupération des données affichées dans loadmore.php est aussi simple que $POST_['variable'], et vous pouvez incorporer cela dans votre requête (ou n'importe quoi d'autre), selon ce que vous faites.

Je pense que charger simplement la sortie d'un fichier php est mieux que de transférer les variables et d'avoir des templates et des ifs qui gonflent votre page web (option 1), ou de passer des chaînes html depuis un fichier php (option 2).