Structure de blog en PHP et Javascript avec Cockpit

n°23

Php, Javascript, Web

15 sept 2019

Cockpit est un très bon CMS (headless), mais qui possède malheureusement une documentation presque aussi faible que PyQGIS. Pour mémoire et aide, je publie ci-dessous un bout de code PHP qui permet de récupérer les données d'une collection Cockpit et les afficher sur une page. C'est très basique, mais même cela n'est pas la doc.

<?php
require_once("path/to/cockpit/bootstrap.php");


$page = 0;
$articlePerPage = 3;

$posts = cockpit('collections')->find('journal', [
   'limit' => $articlePerPage,
   'skip' => $articlePerPage*$page,
   'sort' => ["date"=>-1], //sorted by user defined "date" entry ; ["_created"=>-1] for last articles created first ; ["_o"=>1] for custom-order
   'filter' => ["tags"=>"myTag"]
]);

if (empty($posts)) {
    echo "Il n'y a pas de billets dans ce journal.".PHP_EOL;
} else {
    foreach ($posts as $post) {
      $title = $post["title"];
      $titleSlug = $post["title_slug"];
      $date = $post["date"];
      $tags = $post["tags"];
      $content = $post["content"];

      echo "
<article>
  <h3>".$title." (".$titleSlug.")</h3>
  <h4>".$date.". # Tags : ".implode(", ",$tags)."</h4>
".$content."
</article>
      ".PHP_EOL;
    }
}
?>

Et voici la même chose avec REST API et XMLHttpRequest en Javascript. La documentation propose d'utiliser fetch mais cette méthode n'est pas supportée par d'anciens navigateurs (Blackberry OS 10 par exemple). Il faut générer un jeton (token) adéquat depuis l'interface d'administration de Cockpit. Le jeton étant ici affiché en clair, pour des raisons évidentes de sécurité, il faut configurer un jeton en lecture seule et uniquement pour la collection recherchée. Voir la documentation Cockpit à ce sujet.

var container = document.getElementById("blog");
var ajaxReady = true; //avoids sending two requests at the same time

function nextPosts() {
  if(ajaxReady) {
    ajaxReady = false;

    // Request
    var request = new XMLHttpRequest();
    request.open('POST', 'path/to/cockpit/api/collections/get/name-of-your-collection?token=YOUR-READ-ONLY-TOKEN', true);
    request.onload = function() {
      var data = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
        var posts = data["entries"];
        var totalPosts = data["total"];

        for (var i in posts) {
          var post = posts[i];

          // Post elements
          const article = document.createElement("article");

          const articleTitle = document.createElement("h3");
          articleTitle.textContent = post.title;

          const articleDateAndTags = document.createElement("h4");

          var subtitle = post.date + "# Tags : ";
          for (var j in post.tags) {
              var t = post.tags[j] + ",";
              subtitle += t;
          }
          articleDateAndTags.innerHTML = subtitle;

        // Assembly
        article.appendChild(articleTitle);
        article.appendChild(articleDateAndTags);
          article.innerHTML += post.content;

          // Append article to page
          container.appendChild(article);

          postPosition += 1;

          if(postPosition >= totalPosts) {
            console.log("Fin des articles");
          }
        }
        ajaxReady = true;

      } else { 
        console.log("Error");
      }
    }

    // Request's body
    var requestBody = JSON.stringify({
        limit: postsPerLoad,
        skip: postPosition,
        sort: {date:-1},
        filter: {tag:"myTag"}
    });

    // Send request
    request.setRequestHeader('Content-Type', 'application/json');
    request.send(requestBody);
  }
}

nextPosts();