simple comment system for getKirby CMS

howto.md

1st try to code a comment system for getKirby CMS.

(adapted from https://gist.github.com/bastianallgeier/c396df7923848912393d)

• comments will be placed at bottom of post in a structure field
• comments, moderation, display comments can be set for each post (no global settings yet)
• not meant to used in the wild (yet) due... see 2do
• after posting a comment it redirects to page 'thank-you' so create one, u know how

2do:

• style that shit
• better input/output sanitising
• spam protection (honeypot, captcha,...)
• prevent double send form after back button pressed (by form security token)
• refill entered values to form after error occured

Install:

• install getKirby-Starterkit

I use the normal project template and put comments to the bottom like:

• add this to /blueprints/project.php:

  line:
    type: line
  info:
    label:
      de: Kommentare... .. .
      en: Comments... .. .
    icon: comment
    type: info
    text:
      de: >
        Dear 
        ...
        In love,
        Your admin
      en: >
        Dear editor,

        use at own risk!
  commentsallow:
    width: 1/3
    label:
      de: Kommentare erlauben
      en: Allow Comments
    type: checkbox
    default: false
    icon: question-circle
  commentsshow:
    width: 1/3
    label:
      de: Kommentare anzeigen
      en: Show comments
    type: checkbox
    default: false
    icon: question-circle
  commentsmoderate:
    width: 1/3
    label:
      de: Kommentare moderieren
      en: Moderate comments
    type: checkbox
    default: true
    icon: question-circle
  comments:
    label:
      de: Kommentare
      en: Comments
    type: structure
    entry: >
      {{approved}}
      <b>{{name}}</b> {{date}} {{time}}<br>
      ({{email}})
    fields:
      approved:
        label:
          de: geprüft
          en: approved
        type: checkbox
        default: true
      date:
        width: 1/2
        label:
          de: Datum
          en: Date
        type: date
        default: today
        validate: date
      time:
        width: 1/2
        label:
          de: Zeit
          en: Time
        type: time
        default: now
        validate: time
        interval: 1
      name:
        label:
          de: Kommentator Name
          en: Commenter Name
        type: text
      email:
        label:
          de: Kommentator Email
          en: Commenter Email
        type: email
        validate: email
      message:
        label:
          de: Kommentar
          en: Comment
        type: textarea

• add this to /site/templates/projects.php:

  <!-- the comments -->
  <?php if( $page->commentsshow() == "1" ): ?>
    <?php $comments = yaml($page->comments()->filterBy('approved', true)); ?>
      <ul class="">
        <?php foreach($comments as $comment): ?>
          <?php if( $comment["approved"] == true ): ?>
            <li class="">
              <h3><?php echo htmlspecialchars($comment["name"])?></h3>
              <?php echo $comment["date"].' '.$comment["time"]; ?>
              <p><?php echo htmlspecialchars($comment["message"]); ?></p>
              <hr> 
            </li>
          <?php endif ?>        
        <?php endforeach; ?>
      </ul>
  <?php endif ?>




  <!-- the comment form-->
  <?php if( $page->commentsallow() == "1" ): ?>
  <h2>Leave a comment:</h2>
    <form method="post">

      <?php if($alert): ?>
      <div class="alert">
        <ul>
          <?php foreach($alert as $message): ?>
          <li><?php echo html($message) ?></li>
          <?php endforeach ?>
        </ul>
      </div>
      <?php endif ?>

      <div class="">
        <label for="name">Name <abbr title="required">*</abbr></label>
        <input type="text" id="name" name="name">
      </div>

      <div class="">
        <label for="email">Email <abbr title="required">*</abbr></label>
        <input type="email" id="email" name="email" required>
      </div>

      <div class="">
        <label for="message">Comment <abbr title="required">*</abbr></label>
        <textarea id="message" name="message" required></textarea>
      </div>

      <input type="submit" name="submit" value="Submit">

    </form>
  <?php endif ?>

• create a /site/contollers/projects.php and add this:

<?php
return function($site, $pages, $page) {
  $alert = null;
  if(get('submit')) {

    $data = array(
      'name'  =>  filter_var( get('name'), FILTER_SANITIZE_STRING),
      'email' => filter_var( get('email'), FILTER_SANITIZE_STRING),
      'message'  => filter_var( get('message'), FILTER_SANITIZE_STRING),
      'date' => date('Y-m-d'),
      'time' => date('H:i'),
      'approved' => $page->commentsmoderate() == "1" ? false : true,
    );
    $rules = array(
      'name'  => array('required'),
      'email' => array('required', 'email'),
      'message'  => array('required', 'min' => 1, 'max' => 1024),
    );
    $messages = array(
      'name'  => 'Please enter a valid name',
      'email' => 'Please enter a valid email address',
      'message'  => 'Please enter a text between 1 and 1024 characters'
    );

    // some of the data is invalid
    if($invalid = invalid($data, $rules, $messages)) {
      $alert = $invalid;
    // the data is fine, let's save the comment
    } else {

      try {
        $comments = yaml($page->comments());
        $comments[] = $data;

        page()->update(array(
          'comments'    => yaml::encode($comments),
        ));

        go('thank-you');

      } catch(Exception $e) {
        echo $e->getMessage();
      }
      
    }
  }
  return compact('alert');
};

done.

I would like to read comments especially about input/output sanitizing.

have fun, svnt