Salut,3WAcademy - Semaine 7

La septième semaine vient de s’achever, et ça devient de plus en plus intéressant! Les projets font intervenir de plus en plus de langages et on commence à faire intervenir PHP et Javascript. Comme tu le vois, le rythme est élevé, j’ai peu de temps pour mettre mes articles en forme et je les publie avec pas mal de retard par rapport à ce que je faisais au début, mais on y arrive! 

Comme la semaine dernière, nous n’avons pas fait d’intégration donc je ne vais parler que de développement. On reprend l’intégration la semaine prochaine, avec WordPress et Bootstrap au programme.

Bien qu’ayant fini la semaine dernière un peu fatigué , et surtout pas serein avec ces histoires de requêtes SQL. J’ai travaillé le week-end dernier sur Openclassrooms, et un de mes problèmes s’est éclairé dans le train dimanche soir… mieux vaut tard que jamais!

Cette semaine a donc commencé par une petite révision SQL, puis nous avons enchainé dès mardi sur JQuery pendant 2 jours, puis nous avons exploré les requêtes AJAX, très pratique!

Développement

La suite d’SQL3WAcademy - Semaine 7 - logo mysql

La semaine dernière nous avons vu rapidement les bases d’SQL en n’expérimentant que les opérations de lectures sur les bases de données. En ce début de semaine, on a corrigé ce qu’on avait à faire pour le week-end, et on a commencé à utiliser les requêtes permettant de modifier la bases de données : avec les requêtes d’écritures (création), de mises à jour et de suppressions.

Pour récapituler très rapidement, les requêtes SQL se font de manière très normées grâce à l’utilisation de mots clés comme SELECT, FROM et WHERE dont je parlais la semaine dernière (3WAcademy – Semaine 6).

La structure de requête pour l’écriture est un peu différente puisqu’on utilise pas les mêmes mots clés. Pour écrire on va utiliser les termes INSERT INTO  et VALUES.

On indique avec INSERT INTO ce qu’on ajoute, en correspondance avec les divers champs de la table, puis avec VALUES on indique les valeurs associées à chaque champ. Voici à quoi une vrai requête ressemble:

<?php


  $insert = "INSERT INTO `nom_de_la_base`(`nom`,`prenom`) VALUES(`Paul`, `Durand`, `Salut, je 'm'appelle Paul`)";

//autre possibilité pour que ça soit plus lisible : 

  $insert = "INSERT INTO `nom_de_la_base`(`nom`,`prenom`) 
  				VALUES(`Paul`, `Durand`, `Salut, je 'm'appelle Paul`)";


?>

Attention, dans le petit exemple ci dessus, je ne fais figurer que la syntaxe de la requête. Pour exécuter la requête, il y a un protocole à suivre sur lequel je ne m’attarde pas pour le moment.

Je ne me rappelle plus si j’en ai parlé la semaine dernière mais avant de communiquer avec une base de données, il faut s’y connecter. Il y a un protocole à respecter pour le faire en PHP. C’est pas forcément compliqué, mais il faut bien faire attention à la syntaxe.

  <?php

  $id = "root"; // identifiant de connection à la base, dans mon cas, accès au localhost
  $passWord = ""; // mot de passe de connection
  $dsn = "mysql:host=localhost,dbname=nom_de_la_base_de_donnee";// nom de l'hote  et nom de la base de donnée
  $com_bdd = new PDO($dsn,$id,$passWord); // je ne connais pas encore de détail de cet objet, mais c'est ce qui permet de connecter la BDD avec les fichiers PHP

  $com_bdd = exec("SET NAMES UTF8");// Spécification de l'encodage, même si la base a été construite avec ces paramètres.

?>

Cette parenthèse étant close, voyons comment on peut mettre à jour des données dans notre base, et bonne nouvelle ce n’est pas si compliqué, pour des requêtes simples. Je n’ai pas encore vu de cas avec des requêtes complexes, mais le principe restera le même.

Pour effectuer cette mise à jour, on va utiliser cette fois les mots clés UPDATE et SET. UPDATE servira à identifier dans quelle base on veut modifier des valeurs, puis avec SET, on va réattribuer de nouvelles valeurs aux champs que l’on souhaite modifier. Grâce à SQL, il y a vraiment possiblité d’être précis dans une requête donc on peut modifier un champ spécifique, ou plusieurs, suivant ce que l’on souhaite faire. Voici un exemple de syntaxe de requête d’UPDATE en SQL:

<?php

$insert = "UPDATE `contact` SET `ville` = `Limoges` WHERE `id` = `87`

?>

Donc avec cette requête qu’est ce que je souhaite faire?

Dans la table « contact », je souhaite modifier le nom de la ville existante du contact portant l’id 87 dans la table par Limoges. Je n’ai pas créé de table exprès pour tester ce code, mais je pense que ça doit fonctionner. Il est souvent plus simple de cibler une entrée par son id plutôt que par un autre paramètre. On est certain que l’ID est unique dans toute la table, à condition d’avoir construite la table en conséquence.... Par exemple si tu recherches un contact nommé Pierre par son prénom, il est fort possible que tu en trouves plusieurs… Alors qu’il n’y aura qu’un seul Pierre qui portera l’id 67845… par exemple.

Maintenant on souhaite supprimer des données, pour cela, rien de très compliqué non plus, c’est peut être le problème, puisqu’une fois supprimé d’une base de donnée, il est impossible de récupérer quoi que ce soit, à moins d’avoir exporté une copie sur son disque dur…

Tu dois te douter du mot clé pour supprimer, et il s’agit bien de DELETE. Encore une fois il faut préciser dans quelle table on souhaite supprimer quelque chose. Je ne sais pas ce qu’il se passe si on ne précise rien, mais pour le moment j’ose même pas imaginer…

Voilà pour les bases de SQL, il n’y a pas grand chose à retenir, ensuite il faut surtout de la pratique pour bien formuler les requêtes, c’est ça le plus compliqué. Avant d’aller à la 3WAcademy, je n’avais pas eu le temps de me renseigner sur ce que c’était, j’espère que ces quelques lignes t’aideront un peu mieux à savoir à quoi ça ressemble, et surtout ce que ça fait.

JQuery

3WAcademy - Semaine 7 - logo jquery

Lors d’un projet de création d’un carnet d’adresse nous avons été invité à découvrir jQuery. Si tu n’en a pas trop entendu parler, jQuery est une bibliothèque Javascript qui permet de faire sensiblement la même chose que Javascript mais de manière un peu plus simple, la syntaxe est un peu plus allégée.

En ce qui me concerne j’ai regretté qu’on ai pas eu de cours sur le sujet, on a du se débrouiller un peu tout seul, ce qui ne me dérange pas, mais le délai étant un peu court pour faire le projet, j’ai fait la majorité  des choses en JS natif.

Ce qui m’a finalement convaincu de mettre le nez dans jQuery, c’est la feignantise. En regardant tout de même quelques tutos sur internet, j’ai compris la syntaxe assez vite et que c’était top de faire la même chose en écrivant moins… Je me dit maintenant que le slogan de jQuery est complètement justifié: Write less, do more…

//Exemple mettre un titre h1 en bleu

//Version JS natif
document.querySelector("h1").style.color = "blue";

//Version JQuery

$('h1').css('color', 'blue');

S’intéresser à Jquery quand on a un peu l’habitude de Javascript, ça se passe très bien. On retrouve d’ailleurs la même structure entre les deux versions dans l’exemple ci dessus:

  • sélection de l’élément HTML;
  • expression de la propriété css

Le cas que je te présente est assez simple mais pour montrer les similitudes ça suffit amplement. Si tu as bien compris la gestion du DOM en Javascript, tu n’auras pas de problème pour passer à jQuery. Après je ne connais pas assez bien cette bibliothèque pour en parler en détail, mais c’est sûr que je vais pousser le bouchon plus loin après la formation!

Autre point qui m’a semblé très pratique, c’est la notation pointée pour ajouter des fonctions jQuery les unes derrière les autres sur un même éléments. Je n’ai pas utilisé cette possibilité parce que j’en ai pas eu besoin, mais je sais que ça peut se faire. Le moment venu, je m’en servirais. J’imagine que ça permet d’appliquer plusieurs choses à un  élément, sans avoir besoin de cibler l’élément à chaque fois qu’on veut lui attribuer une propriété. Chose que l’on ferait en Javascript par exemple.

Avec jQuery, les structures de Javascript ne changent pas :

  • une boucle reste une boucle,
  • une structure if, est la même en JQuery, etc…

En revanche c’est très intéressant pour la manipulation du DOM.

Petit bémol, la documentation est pas très bien faite je trouve… Je préfère le MDN et la doc de PHP, c’est plus clair, mais ce n’est que mon avis.

J’ai beaucoup plus utilisé jQUERY dans le dernier projet de la semaine, qui nous a conduit à utiliser AJAX…

AJAX

3WAcademy - Semaine 7 - logo ajax

C’est la semaine des nouveautés, puisque je ne connaissais pas du tout AJAX, je ne savais même pas ce que ça faisait… Pour me mettre au parfum, je me suis fait un petit déjeuner sur youtube avec les tutos de Graphikart, toujours très instructif!

Voilà mon pti déj…

A quoi ça sert?

Ajax permet de réaliser des requêtes HTTP, sans avoir besoin de recharger la page! Pour simplifier et donner un exemple qui pourrait utiliser cette technologie: les applications chat, comme messenger de Facebook. Lorsque tu envois un message dans messenger ou que tu en reçois un, le reste de ta page Facebook ne se rafraîchit pas, seul le contenu de la zone de chat se met à jour, et seul le nouveau message change. C’est quelque chose que pourrait faire AJAX (je ne sais pas si messenger fonctionne avec ça mais c’est l’idée). L’avantage c’est que c’est moins gourmand en ressource puisqu’on envoie ou reçoit moins de donnée à chaque fois. Il est assez logique que la requête soit plus rapide lorsque tu envois ou reçois un message dans une messagerie que si tu avais besoin de resoliciter toute la page avec la navigation, les photos, les animations, etc…

En vrai ça donne quoi?

Alors on a fait un petit projet que je ne sais même pas trop nommer, on va appeler ça un testeur de requête. Nous devions construire un formulaire avec 4 boutons radios correspondant chacun à un type de requête à réaliser:

  • une requête vers un fichier HTML à la racine du projet,
  • une requête nécessitant de transformer un tableau PHP en fichier JSON,
  • une requête affichant une liste de film et leurs affiches, reçu depuis une page PHP,
  • une requête affichant le résultat d’une requête SQL.

Là on a fait un grand mélange de tout ce qu’on a appris à faire, et ça s’est très bien passé! C’est là où je me dis que j’ai tout de même acquis une certaine capacité d’adaptation face à des choses que je ne sais pas faire, et où je commence à bien comprendre comment utiliser quelle techno et pourquoi. Alors je ne suis pas en train de dire non plus que je suis devenu un crack en 7 semaines, loin de là , mais je sens que je suis plus à l’aise.

(Je me rends compte que je ne me suis pas renvoyé mes fichiers du projet Ajax, je les intégrerais très vite… désolé…)

J’en parlais avec mes collègues à midi dans la semaine, la formation est terminée (presque)… Il nous reste certes 5 semaines, mais on va avoir 2 semaines de projets à la fin, il ne reste donc que 3 semaines de cours. La semaine prochaine nous allons avoir un bon projet un peu long : créer un blog avec tout ce qu’on a appris depuis le début. On va devoir faire ça en équipe, pendant 4-5 jours, dans un premier temps jusqu’à mercredi. On m’aurait demandé de coder un blog il y a 1 mois, je l’aura pas senti du tout, là je sais que ça peut le faire avec quelques petites fonctions sympa…On verra ça lundi!

Ce week end, c’est pas les vacances, j’ai mon projet d’intégration à terminer, il est sur le feu depuis 2 semaines, mais PHP est passé par là… et j’ai aussi 2 projets à terminer en développement, donc j’ai de quoi faire!

Je te souhaite un très bon week end, à la semaine prochaine!

Guillaume