let's assume the simple example of a blog running over html, php and javascript. When the page is loaded, I run through a php script which e.g. iteratively puts all the comments under a blog post. The printing of the comments is done in an object oriented way where the comment is represented by a class and a member function print_comment() which echos the comment field including post date, author, text etc.:

// in the comment class declaration

class comment
{
  $id; // unique identifier of comment
  $dateSubmission; // date when comment was submitted
  $text; // content of comment
  $author; // who wrote it

  function __construct($id)
  {
    $this->load($id);
  }

  function load($id)
  {
    // here i load all info from mysql database for the defined id
  }

  function print_comment($id)
  {
    echo "<div class=\"comment-container\">";
      echo "<div class=\"comment-author\">";
      // etc etc
      echo "</div>";
    echo "</div>";

  }
}


// in the blog.php file
$ids = getCommentIds($postId); // returns comment ids for current blog post
$nComments = length($ids);
for ($iComment = 0; $iComment < $nComments; $iComment  )
{
  $currComment = new comment($ids[iComment]); // loads content for comment
  $currComment->print_comment(); // prints comment
}

Now a user adds another comment and after clicking the submit button and handling all the database stuff through an ajax call I want to add the new comment under the list of existing ones. Ideally I would now love to use my already prepared php class to create the text but so far I always needed to rewrite the content creation in javascript.

Which is the best way to handle such situations? Rewriting the print_comment function in javascript would be a way to do it but is double work and requires changing two functions whenever I would update the layout.

What is the best practice for such a situation?

P.S.: I know that reloading the whole page is a solution, nevertheless not what I want to go for :).

CodePudding user response：

Unfortunately, you will always end up needing to write dynamically loading content in JavaScript. PHP runs on the server and serves a static file. If you want to update a part of the page (as opposed to serving a whole new page), this has to be done on the client, which means using JavaScript.

CodePudding user response：

There's multiple roads to a solution.

1. Refresh the page on form submit, it's the standard way of using PHP, there's nothing wrong with this approach.
2. Duplicate functionality so you don't have to refresh the entire page, and simply add the commenters reply using javascript. Downside besides code duplication is that you won't receive other new comments until you hard refresh the page.
3. Only use JS for the front-end, and only use PHP as an API back-end. That way you can load parts of the data without doing a complete page refresh. As a downside, you still need to duplicate code, as you'll want both front- and back-end validation.
4. Now we're getting into some extreme rewriting, but you could also consider using nodeJS as a back-end, and write the entire app in javascript. This gives you the option to share libraries between front- and back-end, removing code duplication completely. As an added bonus, it's relatively easy to add in websockets meaning you can push new comments to each connected reader as they are sent.
5. Don't bother writing your own blog, but rather rely on tried and tested platforms.

The last one is probably the best solution.

But if you're writing a blogging application simply as an exercise, I would go for option 4, I think this gives you the most versatile grounds for pushing yourself. It's easy to start writing a REST-api in nodeJS, and there are plenty libraries to help you with the heavy lifting. Once you have a complete API, you can write a simple frontend using vanilla javascript, or you can pick any frontend framework. You can add socketIO to get some real-time commenting up and running, and you can create another frontend using a different framework.