n°22
Structure de blog en PHP et Javascript avec Cockpit
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();

corentin héraud-louisadat

architecte & développeur
75018 Paris
heraud-arobase-laponies-point-fr

*1992, Strasbourg

Diplômé d'état en 2016 de l'ENSA Paris-Malaquais et de la RWTH Aachen puis habilité à maîtrise d'oeuvre en nom propre (HMONP) en 2019, j'ai travaillé pour diverses agences telles que Nicolas Reymond architectes urbanistes, Dietmar Feichtinger architectes ou Julian Breinersdorfer. Je développe sur mon temps libre des applications pour le Web et la 3D. Vous pouvez également consulter l'archive des travaux laponies.fr ainsi que la carte des bonnes adresses.

Amis, famille et blogroll : Anaïs Héraud-Louisadat, Héraud–Baumann, Till Baumann, Anne-Claire Héraud, La Boucle.

alsace europe