formapedia

Dans cette vidéo vous allez apprendre moins de dix commandes Git, qui vont vous permettre de vous en sortir dans 80% des situations, c’est à dire qu’elles vont constituer votre routine de développeur.

Il est recommandé de commiter à la fin de la journée à minima, même si vous n’avez pas encore fini votre code, en effet si votre ordinateur venait à se faire voler, vous perdriez une journée de travail.

O2switch est un hébergeur français avec une formules très intéressante pour les étudiants en développement web. EN effet vous devez présenter (si vous faites un projet hors stage un site), et on attends de vous de savoir déployer en production, et non faire un github Pages ou un Heroku.

Je m’aperçois que beaucoup d’étudiant ne savent pas faire un simple FTP vers un serveur mutualisé ou VPS, par contre ils s’y connaissent en Docker! . Or je me rappelle que c’est un des premiers trucs que j’ai appris à faire. Je veux bien que vous travailliez avec des dockers, mais sachez au moins comment cela se passe sous le capot.

Je conseille aux étudiants de prendre un hébergement O2switch qui coûte 120 euros TTC environs, et qui permet d’avoir 5 VPS. Vous avez un hébergement par défaut, et 4 autres qu’ils appellent des lunes, qu’il faut créer. Je pars du principe que vous avez créé des lunes, et que vous avez accès via une liste déroulante, la fameuse liste déroulante que je vais customiser avec un script Javascript que je ferai exécuter avec Greasemonkey (ou Tampermonkey sous Chrome). Voilà à quoi ça ressemble de base :

Voila qui est bien plus pratique, car je ne retrouvais jamais mes sites, je devais me constituer des notes pour me repérer.

Je vous détaille donc comment j’y suis parvenu. Pour comprendre comment fonctionne Greasemonkey je vous envois vers ce tuto [xxx].

le but est ici de faire de la manipulation de DOM, on va remplacer les textes de la liste déroulante avec nos sites web. Le script Greasemonkey va s’exécuter une fois qu’on clique sur la liste déroulante, au passage l’interface web CPanel est codé en Angular. Mais cela n’influence pas notre script.

On a donc une liste déroulante en HTML qui est chargé de façon asynchrone, nous allons voir pourquoi tout à l’heure. Pour remplacer le texte des élément <li>, nous devons capturer l’élément HTML, parcourir ses éléments et remplacer avec innerHTML le contenu de ces <li>.

Greasemonkey permet d’injecter un script Javascript dans la page. Voici le code:

// ==UserScript==
// @name     Customize O2Switch
// @version  1
// @grant    none
// ==/UserScript==
let mapp = new Map()

mapp.set('exceret (huynh.odns.fr)',"site1.com")
mapp.set('sc1exceret (sc1exceret.universe.wf)',"site2.fr")
mapp.set('sc2exceret (sc2exceret.universe.wf)',"site3.com")
mapp.set('sc3exceret (sc3exceret.universe.wf)',"site4.com")
mapp.set('sc4exceret (sc4exceret.universe.wf)',"site5.com")


let handler = function(){
  
  let e =document.querySelector('#ddlAccounts_chosen')
  let f = e.querySelector('.chosen-results')

  
  f.children[0].innerHTML = mapp.get(f.children[0].innerHTML)
  f.children[1].innerHTML = mapp.get(f.children[1].innerHTML)
  f.children[2].innerHTML = mapp.get(f.children[2].innerHTML)
  f.children[3].innerHTML = mapp.get(f.children[3].innerHTML)
  
}

let body = document.querySelector('body')
body.addEventListener("click", handler, false);

On constitue notre objet Map qui est l’équivalent d’un tableau associatif PHP, chaque clé est associé une valeur le nom du domaine. Grâce à querySelector, je capture l’élément HTML, et à la fin du script j’ajoute un event listener qui s’exécute au clic, ce qui va bien car la liste déroulante se charge en asynchrone.

ce script n’est pas parfait car au chargement du Cpanel vous êtes dans la vue principale qui liste les 5 VPS, mais une fois que vous avez cliqué une des lunes, la liste se réduit aux 4 lunes décalant les index. Le script ci-dessus a été optimisé pour la page avec les 4 lunes. Il faudrait pouvoir détecter le contexte et proposer le bon affichage.

J’avoue que cette méthode je pense l’avoir vu il y a très longtemps, mais je ne l’ai jamais utilisée.

La requête SQL de création de table

Nous allons d’abord créer deux tables pour faire la jointure.

CREATE TABLE `products` (
  `product_id` int NOT NULL,
  `product_name` varchar(255) NOT NULL,
  `brand_id` int NOT NULL,
  `category_id` int NOT NULL,
  `model_year` smallint NOT NULL,
  `list_price` decimal(10,2) NOT NULL,
  PRIMARY KEY (`product_id`),
  KEY `category_id` (`category_id`),
  KEY `brand_id` (`brand_id`),
  FULLTEXT KEY `product_name` (`product_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci


CREATE TABLE `categories` (
  `category_id` int NOT NULL,
  `category_name` varchar(255) NOT NULL,
  PRIMARY KEY (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci

Première façon de faire une jointure FROM

La jointure implicite, après le FROM on liste les tables de la jointure, cette façon de faire n’est pas moins performante mais est moins claire.

select * 
from products P, categories C
where P.category_id = C.category_id 
AND P.product_id = 1

Seconde façon de faire une jointure INNER JOIN

Jointure explicite, je vous la recommande, elle permet de mieux appréhender les autres types de jointure (LEFT JOIN, RIGHT JOIN, FULL OUTER JOIN)

C’est cette méthode qui est enseignée dans la formation SQL

SELECT * FROM products P
INNER JOIN categories C ON C.category_id = P.category_id
WHERE P.product_id = 1

Troisième façon de faire une jointure avec USING

Jointure à « l’ancienne ». J’ai vu il me semble cette syntaxe il y a 30 ans avec Microsoft Access…

SELECT * FROM products p JOIN categories c
USING(category_id) WHERE product_id = 1

On utilise quand même le mot clé JOIN sauf que la clause ON n’est pas présente.

Des classes couplées

La classe appelante est couplée à la classe appelée, si on veut changer de manière de lire des données, il faut réécrire la classe appelante.

Des classes découplées

La classe appelante est découplée à la classe appelée, grâce à une interface, si on veut changer de manière de lire des données, il suffit lors de l’appel de la méthode de passer une autre classe appelée.

Ce qu’il faut retenir

Ici le plus important est que c’est l’interface qui est passée en paramètre de la méthode lors de sa définition MAIS pas de l’exécution de la méthode, à ce moment là on passe un objet(!) dont la classe implémente l’interface.

Dans la vidéo ci-dessous j’essaye de vous expliquer en détail le fonctionnement de la boucle for, sont fonction est le même quelquesoit le langage.

Une boucle est une machine à répéter du code

tout étudiant en informatique est souvent confronté à des difficultés pour comprendre la boucle fort parce que ça demande beaucoup d’efforts ça met en jeu beaucoup de concepts, je vais essayer à travers cette vidéo de vous les montrer, de la manière la plus simple possible . tout d’abord une boucle for permet de répéter un bout de code autant de fois qu’il le faut , si je veux faire une fois 2*1000 fois, ou 1000000 de fois, c’est une boucle for  qu’il me faut . et  c’est la raison d’être de nos machines, c’est de répéter une action alors vous me direz donc dans quel genre de situation on peut utiliser une boucle for ? en  théorie de la boucle for permet de parcourir les collections de données mise en pratique qu’est-ce que c’est ?  je vous le montre la syntaxe d’une boucle dans 2 langages très courants  le  javascript et le  PHP .

Décomposition d’une boucle for

Dans les quels que soient les langages, je vais vous en à 3 paramètres après le mot clé fort il y a d’abord le premier paramètre qui est initial c’est le début de la boucle le point de départ de la boucle le 2e paramètre représente la limite supérieure de la boucle virgule et le 3e paramètre Eh bien c’est le pas c’est à dire on la progression a de combien j’avance et entre les accolades nous avons le bout de code à répéter

On appelle ça un bloc de code ici c’est une simple ligne qui affiche la variable de lit mais on peut faire aussi complexe ce qu’on veut

La variable i va donc partir de la position 0 puis il va valoir 1,2,3,4 et 5 et va s’arrêter là, il ne va pas prendre la valeur 6 puisque la condition du milieu i < 6 le lui interdit

La boucle fort en l’utilise pas avec une variable i ,dans la réalité on utilise la boucle for lorsqu’on travaille avec des variables qui sont des collections, c’est quoi une collection ? une collection c’est une variable qui contient plusieurs valeurs en javascript ce sera un tableau et en PHP c’est un tableau également

Que serait un code sans notion de collection?

Si nous ne connaissons pas les collections ou les tableaux on va créer une variable pour contenir une valeur par exemple la variable $eleve va contenir Dupont, et si j’ai plusieurs élèves comment je fais? et bien on va devoir créer plusieurs variables $eleve1, $eleve2 etc, et c’est vraiment pas pratique ! La solution c’est d’utiliser donc un tableau, dans lequel on va déclarer une seule variable, de type tableau et dedans on met tous les prénoms séparés par une virgule.

Corollaire : la boucle FOR s’utilise presque toujours avec une variable de type collection

donc la boucle for s’utilise principalement avec une collection, en PHP ce sont des tableaux et idem en javascript, on va se servir de la boucle for pour parcourir le tableau. Un élément dans un tableau est repéré par sa position encore appelé index . Le premier élément a un index 0, le dernier élément a un index qui est égal à la taille du tableau (c’est à dire le nombre d’éléments du tableau moins 1).

Quelles sont les applications concrètes d’une d’une boucle for?

Par exemple lorsque vous êtes dans votre espace Amazon, et que vous voulez lister les commandes que vous avez déjà passées et si vous avez fait plusieurs commandes par le passé, ces commandes seront insérées dans des dans des tableaux,

Les onglets que vous avez ouverts sur votre navigateur par exemple ce sont des items contenus dans un tableau, donc si j’ai une dizaine d’onglets ouverts j’ai 10 éléments dans un tableau d’onglets.

Un menu de page web par exemple, aussi c’est ce sont des différents éléments d’un tableau.

Illustration graphique des index dans un tableau

Je vais essayer d’illustrer le l’histoire des index avec parking de supermarché voilà nous avons en parking avec des voitures des places des parkings numérotées et souvent il la place de parking numérotée 0 ça n’existe pas ! donc ça commence à 1,mais en informatique on commence pas 1, on commence à 0 donc sur l’exemple qu’on voit ici la voiture numéro un à la place de parking numéro un en fait en informatique ce sera l’index 0

En informatique on ne code pas en dur les valeurs, on aime bien que le code soit générique, qu’il qu’il puisse marcher dans toutes les situations. Dans l’exemple du tableau de prénoms, bien que nous ayons 3 éléments on ne va pas mettre le nombre 3 pour la longueur du tableau, mais on va mettre une une expression qui va représenter la longueur du tableau de façon symbolique, ceci va nous permettre de de faire marcher le script quel que soit le nombre d’éléments qu’on a dans notre tableau

Voilà pourquoi on utilise les variables c’est pour que notre code ait des emplacements dans lesquels les valeurs peuvent être diverses une fois qu’on a écrit le code on n’y touche plus le code doit marcher quelque soit les situations donc c’est important de ne pas coder en dur les variables

La variable i parcoure les index

L’astuce de la boucle FOR est donc de faire promener la variable i dans l’intervalle de valeur des index, ceci nous permet de parcourir tous les éléments d’un tableau.

En HTML, pour les checkbox, si la checkbox n’est pas checkée, elle n’envoit rien !

Comment faire pour envoyer quand même zéro lorsque la checkbox n’est pas cochée?

En effet

<?php

echo "vous êtes en train de soumettre un formulaire";
echo '<pre>';
print_r($_POST);
echo '</pre>';


echo $_POST['test'];

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="<?= $_SERVER['PHP_SELF'] ?>" method="post">
        <label for="">Checkez SVP</label><br>
        <input type="hidden" name="toto" value="0">
        <input type="checkbox" name="toto" value="1"><br>
        <input type="submit" value="Soumettre">
    </form>
</body>

</html>

La solution relativement simple consiste à créer un input de type hidden donc invisible qui contient la valeur à envoyer dans tous les cas. Elle sera écrasée par la valeur de la checkbox quand cette dernière est cochée.