Question

I’m working on a comment/content/posting system and hit a fork in the road, so I figured I should ask for other opinions before choosing a path. Sorry but at this time I don’t have a good enough working example to present (Or one that I can share) so hopefully my description is enough.

I have an index.php main page which calls loadmore.php to request user posts to display in a div. The loadmore.php gets this data from a MySQL DB.

Each post can be of different types and are displayed differently when put up on the screen.

Examples (All posts display the user that posted and the date on top):

• POST: Regular post, text only.
• LINK: Displays the title of the linked page as a hyperlink, small thumbnail image next to that, and a snippet of text below that was extracted from the linked site.
• PICTURE: Displays large picture with caption below it.
• VIDEO: Displays title on top, with video under the title taking half the width of the div, description of video is next to the video.

Don’t concern yourself with the formatting etc, I just wanted to show that each post will be formatted differently according to type of post and the HTML can be lengthy.

Now, THIS is what I want to know; WHERE should the generated, or chosen, HTML come from? (For simplicity, I’m using pseudo code)

Option 1. I could have the various HTML “template” in ajax/js on the index.php page itself and just fill in the variables using a bunch of IF statements, but I’m not sure this should be in the index file.

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. OR, I could have the loadmore.php use IF statements in order to return the appropriate HTML string to be prepended in index.php, but I find that it would be inefficient to pass so many long HTML strings between the 2 PHP files server-side when only the variables can be passed.

index.php (Note: only the script portion is different)

    <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
    ?>

Which is the best route to go with this? And why?

Sorry if it seems messy, I’m still getting used to this site’s formatting methods…

Answer 1

When doing something similar in the past,

I would simply have your loadmore.php iterate over the posts you’d like to display, determine the type, and echo the correct formatting.

<?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();
?>

Then you could simply load the php page into a div. One way is to use jQuery:

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

If you wanted to pass parameters to loadmore.php (say from a form, perhaps hidden), you could use the following:

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

Then, retrieving the posted data in loadmore.php is as simple as $POST_[‘variable’], and you could incorporate that into your query (or whatever else), depending on what you’re doing.

I think just loading the output from a php file is better than transferring the variables and having templates and ifs bloating your webpage (option 1), or passing html strings from a php file (option 2).