Salut,3WAcademy - Semaine 8 - Logo

La huitième semaine s’achève, et elle fut très intéressante, comme d’habitude. On rentre de plus en plus dans des projets qui permettent de se confronter à des difficultés qu’on va rencontrer dans le milieu professionnel.

Cette semaine nous avons eu un projet de blog à réaliser en équipe. Nous devions décider des fonctionnalités à implémenter et nous devions utiliser toutes les technologies vues depuis le début de la formations à savoir Javascript, JQuery, Ajax, PHP et MySQL. Ce qui fait beaucoup de choses!

Retour de l’intégration cette semaine, et ce fut là encore très intéressant, puisque nous avons eu une présentation de WordPress. Pour le manipuler un peu depuis quelque temps, je n’ai pas été perdu, mais la suite a été un peu déstabilisante, puisque nous sommes parti d’un thème vierge pour réaliser un thème sur mesure depuis zéro. La mise en route a été un peu lente, mais petit à petit, je comprends le principe…

Intégration

Nous avons eu le plaisir de retrouver notre excellente formatrice en intégration ce jeudi pour parler de WordPress. Tu dois te dire que WordPress c’est bidon, que c’est l’anti-solution aux métiers du web, qu’il n’y a pas besoin d’être développeur pour l’utiliser. Alors pour répondre dans l’ordre : NON, NON, OUI et NON…

WordPress

3WAcademy - Semaine 8 - wordpress

J’ai souvent lu sur des forums ou autre que les personnes qui utilisaient wordpress n’étaient pas des développeurs, que WordPress était une mauvaise solution, surtout d’un point de vu de la sécurité, que ça tuait le marché parce que trop de personnes pouvaient l’utiliser sans passer par un développeur ou une agence, et que ça pouvait représenter un manque à gagner.

Je ne suis pas tout à fait d’accord avec tout ça mais je n’ai pas un avis sur tout non plus pour le moment, surtout sur la question du manque à gagner…

« Merci, belle réponse… »

Alors sur le fait qu’il n’y ai pas besoin d’être développeur pour utiliser WordPress et que ça puisse casser le marché, c’est possible. En même temps as tu déjà essayé d’installer WordPress? Ce n’est certes pas compliqué, mais pour un novice qui peinerais déjà à installer une imprimante, ça peut être difficile, donc non tout le monde ne peut pas utiliser WordPress. Même si les hébergeur propose de l’installer directement lors de l’achat de l’hébergement, il semblerait que ça ne soit pas la meilleure des solutions. Il est donc préférable de passer par un logiciel de FTP, donc là clairement ça réduit un peu plus le nombre de personnes qui vont se lever le matin en espérant faire le site web de l’année…

Ce blog est la preuve qu’il n’y a pas besoin d’être développeur pour utiliser WordPress, mais il est aussi évident que ça n’est pas un développeur qui l’a construit. Lorsque je me suis lancé dans la réalisation de ce blog, je n’y connaissait pas grand chose, et je n’ai jamais trop eu le temps de soigner le design.

Après la présentation que nous avons eu pendant ces deux jours, je ne referais pas ce blog de cette façon et c’est normal! J’ai simplement modifié un thème existant, alors qu’en cours nous avons créé un thème depuis zéro, c’est pas du tout le même travail! Cela dit, améliorer certaines choses sur ce blog me permettra de poursuivre mon apprentissage et de mieux maîtriser certains points. J’essaierais de faire ça à partir du début d’année.

Concernant la sécurité, notre formateur en développement, nous à dit à plusieurs reprises que WordPress était une passoire. Ce qui est certainement vrai, et je lui fais confiance sur ce point. Maintenant, je pense aussi qu’il faut rester mesurer…

Il ne faut pas oublier que WordPress représente 27% des sites web. Cela signifie que plus d’un site sur 4 que tu visites est réalisé avec WordPress, sans que tu t’en rendes compte. WordPress représente 70-80% des blogs (c’est d’ailleurs fait pour ça à la base donc c’est pas étonnant), et 18 à 20% des sites de e-commerce. Donc j’entends bien que ce soit une passoire mais si c’était si catastrophique que ça, on ne serait même pas en train d’en parler, ça n’existerais plus!

CMS

WordPress est un CMS, un système de gestion de contenu (Content Management System). Ce qui simplifie son utilisation c’est son back-office qui permet de gérer principalement 2 types de contenus:

  • le contenu fixe : les pages (Accueil, A propos, Contact)
  • le contenu chaud : le flux d’article d’un blog comme celui ci.

Je vais simplifier pas mal ce qui suit. Le flux d’article est géré via les fonctions du moteur PHP de WordPress qui fait des requêtes SQL en permanence pour afficher les articles dans l’ordre chronologiques, gérer les commentaires, l’affichage des différentes parties de la page, …

Il faut savoir qu’un site WordPress ne contient pas de page complète physiquement. le moteur PHP est constamment en train d’assembler des morceaux de pages en fonctions de ce qu’on a demandé. Il appelle donc en permanence un HEADER.php, un FOOTER.php, une SIDEBAR, …

Si je prends l’exemple de ce blog, dans le footer, il y a une section archive qui s’allonge au fil des mois, sans que j’ai quoique ce soit à faire, WordPress s’occupe de tout! Pareil pour la section qui recense les derniers articles, c’est une fonction PHP qui réalise une requête SQL particulière et en retour PHP affiche la liste dans un certain ordre, etc…

Pour avoir fait un peu de PHP, je comprends beaucoup mieux le fonctionnement de tout cela!

En ce qui me concerne, ces fonctions me font gagner énormément de temps! Mais on peut faire beaucoup plus avec WordPress, sachant que je ne parlerais pas dans cet article des milliers de plugin qui permettent de rajouter des fonctions.

Faire un thème personnalisé

Comme d’habitude en intégration, nous avons eu une maquette à réaliser, sauf que cette fois ci nous avions la « contrainte » d’utiliser un thème « Blank » pour WordPress. Ce sont des thèmes vides qui permettent de réaliser des projets personnalisés avec des besoins particuliers, sans être enfermé dans un thème. C’est d’ailleurs par ce biais que j’ai découvert les métiers du web et du développement. C’est pas le sujet, mais pour la faire courte, je me suis intéressé au HTML et au CSS au départ pour modifier un thème qui ne me satisfaisait pas totalement.

Dans l’organisation de la formation, on ne voit WordPress que maintenant pour une raison très simple: pour créer un thème, il faut avoir des bases en PHP pour pouvoir rentrer dans le code et pouvoir en tirer parti. Il est clair que je n’aurais pas été capable de faire cela avant de connaître quelques principes de base, comme les appels de fonctions et les includes.

Pour réaliser ce type de projet, il faut bien connaître le fonctionnement de WordPress et les types de contenu qu’il est possible de manipuler, afin de savoir comment la maquette nécessite de les afficher, que ce soit du contenu fixe ou du flux. Ce ne sont pas les mêmes fonctions qui gèrent cela, donc il est important d’avoir les idées claires la dessus. Ce qui a été un peu long à comprendre au départ, c’est la correspondance entre tout cela. Heureusement la documentation de WordPress est pas mal faite, et avec les explications de la formatrice, j’ai fini par m’en sortir.

Ce qui est déstabilisant, c’est qu’on a l’habitude d’avoir le HTML en intégralité pour faire le CSS, là c’est un peu différent. Comme je le disais plus haut, WordPress assemble des morceaux de page en permanence, donc il faut à voir l’oeil en permanence dans l’inspecteur de la console pour comprendre quel sélecteur CSS choisir.

WordPress nous aide pour le CSS puisqu’il créé des classes sur les éléments donc ça permet de pouvoir les cibler plus précisément qu’avec le nom de la balise, et comme on n’a pas toujours accès à l’intégralité du HTML, ça permet de s’en passer.

Je ne peux pas te montrer à quoi ressemble le projet, je n’ai pas les droits d’auteur sur la maquette, en revanche crois mois que ce genre de chose nécessite de bonne base en PHP, et que ça n’est pas donné à tout le monde… vraiment pas. Moi même j’apprend et je trouve qu’il y a des choses compliquées, ça ne s’invente pas… 

Si tu souhaites faire un thème personnalisé pour WordPress ou au moins voir comment ça se présente, voici deux exemples de thèmes vides (ou blank):

Le développement

Comme je te l’avais annoncé dans mon article précédent, (3WAcademy – Semaine 7) nous avons eu un très bon projet : coder un blog.

J’ai laisser le choix du thème à mes collègues, et c’est un blog de voyage: inspiré les mecs… Bref nous étions 2, puis 4 et finalement 2… C’est un peu le problème d’avoir des gens pas très assidu dans une formation… tu finis par avoir une équipe boiteuse… Je reviendrais sur ce point dans mon dernier article concernant ma formation.

Nous nous sommes donc lancé avec peu de ressources en bras mais beaucoup d’enthousiasme dans ce projet. Mon collègue ayant un passif de graphiste, a préféré s’occuper de la partie affichage utilisateur, ce qui m’a permis de réaliser la petite partie administration.

Le découpage du projet

Notre formateur a regretté que soyons tous parti rapidement dans du code, sans trop passer pas la case schéma UML… et il a raison de nous inciter à faire cela. Le métier de développeur ça n’est pas seulement écrire du code, mais aussi de la lecture de documentation, et surtout de la réflexion. Il est vrai, pour en avoir parlé souvent, que faire des schémas aide mieux à découper un projet ou simplement une fonction. J’aurais du l’écouter, mais en même temps je ne me suis pas si mal débrouillé. J’ai vite identifié les différentes fonctions à faire, et les différentes requêtes dont j’aurais besoin pour ajouter du contenu, le modifier ou le supprimer. J’ai encore beaucoup de choses à apprendre sur toutes ces opérations sur les données, mais c’est vraiment ce qu’il me plaît.

Nous avons décidé d’organiser le travail autour de la base de données, de manière à ce quelle soit le seul point de contact entre nos différentes parties:

  • La partie Admin, permet de créer du contenu pour le blog, de le modifier, voir de le supprimer. J’ai donc eu besoin d’écrire les types de requêtes correspondante. Voici ci dessous quelques requêtes que j’ai eu besoin d’écrire:
<?php

/**
 * Fonction qui réalise la requête pour recharger un article à modifier
 * Pour modifier un article j'ai besoin de re-remplir le formulaire avec les données précédemment saisies de l'article.
 */

function query_modify_article($bdd_connect, $decomp){

  $requete = $bdd_connect -> prepare("SELECT * FROM `article` WHERE numero_article = ?");
  $get_result_in_sql = $requete -> execute(array($decomp[2]));
  $get_result_in_php = $requete -> fetch(PDO::FETCH_ASSOC);

  return  $get_result_in_php;
}

function modify_article($bdd_connect){

  $requete = $bdd_connect -> prepare("UPDATE `article` SET `titre` = ?, `auteur` = ?, `message` = ?, `categorie` = ? WHERE `numero_article` = ?");
  $get_result_in_sql = $requete -> execute(array(

     $_POST['titre'],
     $_POST['auteur'],
     $_POST['message'],
     $_POST['categorie'],
     $_POST['id']

  ));
  $get_result_in_php = $requete -> fetchAll(PDO::FETCH_ASSOC);

  return  $get_result_in_php;
}


/**
 * Fonction permettant de supprimer un article
 */

function delete_article($bdd_connect){

    $requete = $bdd_connect -> prepare("DELETE FROM `article` WHERE `numero_article` = ?");
    $get_result_in_sql = $requete -> execute(array($_POST['id']));
    $get_result_in_php = $requete -> fetch(PDO::FETCH_ASSOC);
    return  $get_result_in_php;
}
?>
  • Pour ma part, j’ai réalisé toutes ces requêtes en AJAX, cela nécessite donc de faire communiquer du Javascript et du PHP. J’ai décidé d’exécuter ces requêtes au clic sur un bouton. Les fonctions qui abritent les requêtes Ajax sont toutes des fonctions de rappel d’évènement. En voici une pour que tu vois à quoi ça ressemble:
/**
 * Fonction permettant de réaliser une modification d'article
 * correspond à la fonction modify_article => fichier admin-echange_bdd.php
 */
function ajax_modify_article(event){
  event.preventDefault();
  console.log("click"); // => event ok Lors du développement, j'ai pris pour habitude de placer des marqueur pour voir si tout se passe bien.
						// Ici le console.log("click") me permet de voir que l'évènemet fonctionne bien.

  let get_id_as_data = parseInt(document.querySelector("input[name='titre']").dataset.id);

	// Création d'un objet afin de regrouper les infos de l'article modifier
  let update = {
    'id' : get_id_as_data,
    'titre' : document.querySelector("input[name='titre']").value,
    'auteur' : document.querySelector("input[name='auteur']").value,
    'message' : document.querySelector("textarea[name='article']").value,
    'categorie' : document.querySelector("select[name='categorie']").value
  };

// Requête AJAX, on solicite un fichier PHP au sein duquel il y a un routeur (switch) qui permet de rediriger les informations vers la bonne requête SQL
	//Ici je fait passer des informations dans l'url, après le .php
	//Le mot modify sera examiné dans le routeur et les fonctions correspondante seront exécutées.
    $.ajax({

        method: 'POST',
        url : `/DEVELOPPEMENT/Jour18-Blog/php/admin-renvoi_ajax.php/modify`,
        data : update// l'objet est automatiquement interprété par PHP et passe toutes les infos dans $_POST

      }).done(function(answer_modification){// data contient les valeurs de retour de la requete AJAX
      console.log(answer_modification);
      refresh_list();
		// remise à zéro des champs du formulaire après l'envoi
      let resetFields = document.querySelectorAll("input");
      for(let p of resetFields){
        p.value = "";

      }
      document.querySelector("textarea").value="";
      document.querySelector("select").value=1;

      }).fail(
      function(error) {
        console.log(error);
      }
    );


}
  • Voici maintenant à quoi ressemble le routeur, fonction switch qui me permet de rediriger les informations suivant l’opération qui est demandé. Les noms d’actions demandées sont les valeurs après les « case » de la fonction switch:
<?php
if(!empty($_SERVER["PATH_INFO"])){

  include "../php/admin-connect_BDD.php";
  $bdd_connect = com_bdd();
//faire explode => permet de décomposer le $_SERVER["PATH_INFO"] qui est transmis sous forme de chaine de caractère.
// "/" indique quel est le symbole de séparation entre chaque partie à décomposer
  $decomp = explode("/", $_SERVER["PATH_INFO"]);
  switch ($decomp[1]){

    case "get_article" :

      //echo ("serveur info ! " . $decomp[2]);
        include "../php/admin-echange_bdd.php";
        $query_modify_article = query_modify_article($bdd_connect, $decomp);

        $array_to_json = array_php_to_json($query_modify_article);

          echo $array_to_json;

        break;



     case "modify" :

         include "../php/admin-echange_bdd.php";


          $modify_article = modify_article($bdd_connect);

          echo $modify_article;

         break;

     case "delete" :

          //  var_dump("serveur info ! " . $decomp[3]); // $decomp[2] retourne l'id de l'article
             include "../php/admin-echange_bdd.php";

            $delete_article = delete_article($bdd_connect);

              echo $delete_article;

             break;

      case "refresh" :
//Partie qui rafraichit la liste des articles
            include "../php/admin-echange_bdd.php";
            $read_article_list_admin = read_article_list_admin($bdd_connect);

            include "../phtml/admin-include.phtml";
            $new_list = build_list_article_admin($read_article_list_admin);
// var_dump($new_list);
            echo $new_list;

          break;

            default:
      echo "ERROR";
  }// fin switch

}// fin function

 ?>
  • La partie de mon collègue qui gère l’affichage de ce contenu, consiste à organiser le rendu des pages HTML et à nourrir ces pages avec le contenu stocké dans la BDD. Il n’a que des requêtes de lecture mais elles sont toutes différentes.

La base de donnée

Nous avons une base de données assez simple, composée de 3 tables:

  • contenu des articles,
  • répertoire des catégories,
  • classements des commentaires.

Cette table utilise la notion de clé étrangère.Pour faire simple c’est un moyen d’associer des données d’une table à des données plus précises dans une autre table. Je ne pense pas être clair donc je vais te donner un exemple.

Voici un aperçut de la base article dans laquelle sont stockées le nom de l’auteur de l’article, le contenu, le titre et la catégorie. Mais contrairement à ce qu’on pourrais penser, les catégories ne sont pas répertoriées pas leur noms mais par un identifiant:

3WAcademy - Semaine 8 - table articles

Dans ma table « principale », article, j’ai un champ catégorie qui est de type INT (nombre entier). Tu dois te dire qu’une catégorie d’article qui s’appelle 1, ça renseigne pas beaucoup sur ce qu’elle contient, et c’est tout à fait vrai. En revanche, dans la table catégorie, l’id 1 correspond à « europe », ce qui a déjà beaucoup plus de sens dans un blog de voyage! Donc si tu reprends la photo de ma table article, on peut imaginer que l’article qui aura pour catégorie 1 concernera un voyage fait en europe. Il nous suffit ensuite réaliser des requêtes pour récupérer par exemple tous les articles qui sont de catégorie 1 pour avoir touts ceux de l’Europe. C’est en tout cas comme cela que l’on veut que ça marche…

Voici un aperçut de la table des catégories:

3WAcademy - Semaine 8 - table categories

Je n’ai pas terminé ma partie, j’espère que ça sera fini ce week end, et que je pourrais mettre un peu de CSS pour égayer un peu le projet. Je compte aussi m’occuper de la partie commentaire que je souhaite réaliser en AJAX et SQL. Cela permettra d’ajouter les commentaires sans avoir besoin  de recharger la page pour les voir apparaître. J’ai déjà utilisé cette techno pour ce projet puisque les opérations de rechargement des articles avant modifications ou suppressions, ont été réalisées en AJAX, voir les exemples plus haut.

Ce projet est un super moyen de tout réviser et de mélanger un peu tout. J’avais un peu de mal au départ à passer de PHP à Javascript, mais là je ne me pose plus la question! Sans compter qu’il faut aussi jongler avec SQL et Jquery, mais toutes cette petite cuisine se fait assez bien, c’est assez surprenant d’ailleurs après 2 mois de formations! Encore une fois, je ne suis pas en train de dire que je suis devenu une super star du développement… J’aimerais bien, mais c’est pas le cas.

Semaine prochaine, on va passer encore un ou deux jours sur le blog. On doit aussi terminer la partie intégration de la formation avec la suite du projet WordPress et Bootstrap. Je ne sais pas trop ce qui nous attends en cours de développement, je pense qu’on devrait démarrer l’utilisation de CANVAS avec Javascript, puis la programmation orientée objet en Javascript et PHP. De toutes façon c’est vite vue, il reste 2 semaines de cours, puis nous avons 2 semaines de projet sur un site e-commerce à coder depuis zéro.

Petit à petit ça commence à sentir la fin de cette formation, et en même temps je me rends compte de la quantité de chose qu’il me reste à apprendre et à maîtriser. Je ne cesserais jamais de le dire mais cette formation file très vite. Nombreux sont ceux dans ma promotion qui ont décroché, ou qui ont pris trop de retard. Si tu envisages de faire cette formation ce que je recommande bien évidemment si tu souhaites apprendre vite, c’est d’y arrivé armé. Euh façon de parler hein…

Plus sérieusement, il est important d’avoir des connaissances au moins en Javascript pour ne pas être largué en développement.Pour ma part, je n’avais aucune notion de PHP quand on a démarré, mais le fait d’avoir quelques notion en programmation grâce à Javascript, m’a permis de m’adapter assez rapidement à ce nouveau langage, même si je ne sais pas tout faire. J’aurais l’occasion de reparler plus en détail de ces choses là dans l’article de la semaine 12, qui sera l’occasion pour moi de faire un bilan de ces trois mois à la 3WAcademy. D’ici là il y a encore du boulot, donc je te dis à la semaine prochaine!

Guillaume