mai 2020 ⋆ BGMP

Base de données avec mySQL

Marie 17/05/202030/06/2020 0

Milieu de formation, fin des cours sur le front !
Nous passons donc sur les connaissances à avoir pour un développeur back…

Le rôle du développeur back est de manipuler les données puis de les envoyer au front pour qu’elles s’affichent.
A noter que le format d’envoi de ces données est le JSON (JavaScript Object Notation).
Le stockage des données se fait à l’aide d’une base de données.

Qu’est ce qu’une base de données ?

Une base de données peut être comparée à un grand tableur excel en plus poussé : le nom du fichier excel correspond à la base de données, les feuilles (ou onglets) aux tables de la base de données ; les colonnes correspondent aux champs et les lignes aux entrées de la base de données.

Pour utiliser la base de données et récupérer les informations qu’elle contient, il faut faire des requêtes. Pour cela, on utilise le langage SQL (Structured Query Langage). Ce langage permet de regrouper toutes les requêtes et de les afficher de façon lisible pour un humain !
Les requêtes sont dites simples quand elles concernent une recherche spécifique dans une table. Elles sont dites complexes quand la recherche se fait sur plusieurs tables combinées.

La finalité d’une base de données est d’avoir des données les plus génériques possible. Ce qui permet ensuite de pouvoir faire n’importe quel type de table.

mySQL

Il existe différentes façon de faire des bases de données.
Ma formation est axée sur mySQL : il peut y avoir de nombreux champs et c’est une base de données très puissante pour manipuler de nombreuses données. mySQL est très performante pour indexer les données.

En base de données, on travaille toujours en « case insensitive » (il faut donc bien penser à indiquer que la base de données est encodée en utf8_general_ci). En effet, lorsque l’on cherche à enregistrer/récupérer une donnée on ne peut pas obliger l’utilisateur à l’écrire d’une façon qui nous convient !

Création d’une base de données et de ses tables

Base de données

Pour créer une base de données, l’appel est simple :

CREATE DATABASE IF NOT EXISTS nom_base;
USE nom_base;

Si une base de données existe déjà, il y a une erreur et la lecture du script s’arrête. Pour éviter et maîtriser ces erreurs, il faut bien penser à ajouter IF NOT EXISTS juste avant le nom de la base.

Table

Pour créer une table, on écrira :

CREATE TABLE IF NOT EXISTS Animal (
    id          SMALLINT UNSIGNED NOT NULL AUTO_INCREMENT,
    espece      VARCHAR(40) NOT NULL,
    sexe        CHAR(1),
    birthdate   DATETIME NOT NULL,
    nom         VARCHAR(30),
    commentaires TEXT,
    PRIMARY KEY (id)
)
ENGINE=INNODB;

Typage des variables

Attention : Il faut bien typer les variables !

Pour les chiffres INT :
– SMALLINT
– MEDIUMINT
Sachant qu’un integer fait 4 bytes, le chiffre 1 par ex fait quelques octets. Donc pour un ID on va préférer un SMALLINT!
– FLOAT
– DECIMAL
A noter que FLOAT et DECIMAL fonctionnent pareil : on met entre parenthèses le nombre de chiffres total puis le nombre de chiffres après la virgule. La différence est que FLOAT va trouver une fraction qui se rapproche le plus du nombre inscrit ds la base de données, on va donc manquer de précision (la somme des cellules sera ensuite un arrondi et non pas la somme exacte). DECIMAL est quand à lui plus lourd mais il garde le chiffre exact.
– NOT NULL : défini que l’on n’a pas le droit d’ajouter une ligne qui aurait ce champ vide.
– UNSIGNED : on l’ajoute pour n’avoir que des chiffres positifs.
– AUTO_INCREMENT : permet d’ajouter un élément qui va s’auto incrémenter.
Pour les chaines de caractères TEXT :
– SMALLTEXT
– MEDIUMTEXT
– CHAR : indique le nombre de caractères. Si le nombre de caractères de la donnée est plus petit alors SQL complète en espaces blancs.
– VARCHAR : utilisé pour moins de 250 caractères. On précise alors le nombre de caractères.
A noter que TEXT n’est pas optimisé pour la recherche, alors que VARCHAR l’est car il est limité en nombre de caractères.
Il est donc très important de prévoir en amont la taille maxi des données pour alléger la table.
Pour les dates, on a le choix :
– DATE
– DATETIME
– TIMESTAMP : la date est convertie en secondes depuis le 01/01/1970. Cela permet un calcul rapide (et facile) des écarts entre deux dates. Les conversions sont aussi plus aisées (en fonction des formats de chaque pays par ex.). Et cela permet une manipulation facile des dates.

Fin de création

On fini la création de la Table avec :
– PRIMARY KEY : la clé primaire est la clé d’indexation de la table. C’est ce qui va la rendre unique (on préférera alors utiliser comme clé primaire l’id de la table !).
Attention, comme elle est écrite à la fin de la table (donc avant la fermeture de la parenthèse), on ne met pas de virgule après !
– ENGINE=INNODB : c’est la configuration du moteur de la base de données.
– CHARACTER SET=utf8 ou DEFAULT CHARACTER SET : correspond au charset (configuration des caractères d’écriture).

Autres types d’affichage

SHOW DATABASES;

Cette commande permet de voir quelles sont les bases de données qui existent dans le fichier.

SHOW TABLES;

Cela permet de voir quelles sont les tables qui existent ds la base de données en cours d’utilisation.

DESCRIBE nomTable;

Cette commande permet de voir tous les champs d’une table.

Effectuer une requête SQL

la requête de base s’effectue à l’aide des mots clés SQL :
– SELECT (liste des champs à afficher / avec une virgule entre eux / s’affiche ds l’ordre écrit)
– FROM (table visée mises entre guillemets inversés « )
Cette requête permet d’afficher une liste de données.
– On fini toujours la requête par un point virgule ;

L’ordre d’écriture de la requête est important. On effectue d’abord une gestion des champs, puis de la table, puis de ce que l’on recherche et enfin du tri souhaité.

SELECT  champ1, champ2
FROM    tableName;

Pour sélectionner tous les champs, on utilise l’astérisque :

SELECT  *
FROM    tableName

Affiner une requête

Il est possible d’affiner la requête en ajoutant :
WHERE : on ajoute alors le champ de recherche et la valeur recherchée avec un = (ou < ou > ou <= ou =>).
Dans ce cas là, la recherche se porte sur la valeur exacte écrite.

On peut aussi utiliser BETWEEN pour un intervalle, NOT pour mettre l’inverse, et on peut cumuler avec AND.

Pour être moins précis et élargir la recherche, ou pour faire en sorte que la case de la donnée ne soit pas prise en compte on utilise : LIKE après WHERE puis la recherche entre guillemets à laquelle on ajoute la wildcard (%) avant, après ou les 2 en fonction de là où on veut que ce soit « flou ».

Trier la recherche

Il est aussi possible de trier la recherche. On ajoute alors :
– ORDER BY : on indique comment se fait le tri, et dans quel ordre (ascendant ASC (du plus petit au plus grand) ou descendant (du plus grand au plus petit) avec DESC).
– LIMIT / OFFSET : tri entre 2 bornes. On peut aussi l’écrire 0, 4 pour les 4 éléments à partir de l’index 0.
– DISTINCT : à placer dans SELECT, pour supprimer les doublons

Autres variations

On peut aussi imbriquer des requêtes, toujours en gardant l’ordre et en mettant la deuxième requête entre parenthèses.

Important : il faut aller progressivement ds la rédaction des requêtes pour vérifier qu’à chaque étape tout fonctionne correctement !

Mise à jour de champs

UPDATE nomTable SET champ1 = "nouvelle valeur", champ2 = "nouvelle valeur";

Cette requête va changer d’un coup tous les champs ciblés. Il faut donc bien penser à pointer la ligne sélectionnée :

UPDATE nomTable SET champ1 = "nouvelle valeur", champ2 = "nouvelle valeur" 
WHERE id = 2;

Effacer

DELETE FROM nomTable;

Cette requête va vider toute la table et il n’y a pas moyen de revenir en arrière !!! Donc bien penser à cibler :

DELETE FROM nomTable WHERE id = 21;

Les jointures

Quand on fait une base de données, on essaye de dupliquer le moins possible les données. C’est plus léger, moins redondant et permet une mise à jour plus aisée.
Pour voir ce qu’il y a dans les différentes tables, on fait une jointure avec INNER JOIN

SELECT *
FROM table
INNER JOIN table2 ON table1.champ = table2.champ;

La table 2 se rajoute à la fin de la table 1, à condition que les deux champs correspondent entre eux !
Quand on cherche à faire une jointure entre deux tables avec des champs dont le nom est identique, il faut absolument éviter les ambiguïtés. Dans tous les cas, il faut penser à bien mettre le nom de la table avant le champ (table.champ).

Il est possible de modifier l’intitulé des champs à ce moment là :

SELECT table1.champ1 as "Nom Générique du champ1"
              table1.champ2 as "Nom Générique du champ2"
              table2.champ2 as "Nom Générique du champ2bis"
FROM table
INNER JOIN table2 ON table1.champ3 = table2.champ3;

INNER JOIN

C’est une jointure fermée qui ne récupère pas de données s’il n’y a pas de croisements. La jointure ne se fait que s’il y a des données « jointables » des 2 cotés.

LEFT JOIN

« La table 1 est à gauche de table 2 »
Affiche toutes les données de la table gauche même si à droite il n’y a rien à faire correspondre.

LEFT JOIN ... WHERE table2.champ IS NULL

Ici, on affiche tous les éléments de la table 1 qui n’ont pas de liens avec la table 2.

RIGHT JOIN

idem que LEFT JOIN mais avec la table de droite !

CONSEIL : il est préférable de ne faire que des LEFT JOIN pour garder les repères lors de la jointure des tables !

Les fonctions d’agrégation

Ces fonctions retournent une valeur unique et non une liste d’entrées. En effet, elles permettent d’agréger des résultats en une seule donnée et le résultat de ces fonctions est alors un sous dossier des champs agrégés.
Elles sont bien expliquées sur le site de w3schools .

On distingue différents types de fonctions.

Les fonctions numériques :
– AVG(), COUNT(), MAX(), MIN(), SUM()
– Possibilité de faire des arrondis : ROUND() supérieur par défaut / FLOOR() arrondi inférieur / CEIL()
Les fonctions scalaires :
– Possibilité d’afficher le texte différemment. Par exemple UPPER()
– Il est possible de faire des recherches de string avec SUBSTR()
Les fonctions de dates :
– NOW() , par exemple, qui est une fonction qui donne la date du jour.
GROUP BY : il permet de regrouper plusieurs champs (dont certains sont agrégés) en fonction d’un champ défini.

SELECT  champ1, count(*) as 'Nombre de résultats'
FROM    tableName
GROUP BY champ1

J’ai appris beaucoup de nouvelles notions. Et bien qu’ayant l’habitude de manipuler des tableurs, la création et la manipulation d’une base de donnée sont de grandes nouveautés pour moi !
Et ce n’est pas fini !!! 😉

Apprentissage CSS Découverte Formation HTML Javascript Web

Les bibliothèques logicielles

Marie 09/05/202017/05/2020 0

Les bibliothèques logicielles (libraries en anglais) sont là pour aider le développeur à coder un site plus rapidement. Les libraries sont donc des facilitateurs de travail. En effet, elles permettent en très peu de lignes de code d’ajouter de multiples fonctions lors du développement d’un site (ou application) web.

Je vais donc vous faire une liste (non exhaustive) des différentes bibliothèques logicielles – basées sur JavaScript – que j’ai vu lors de la formation.

jQuery

Une des bibliothèques logicielles les plus connues pour JavaScript est jQuery. Et son slogan illustre très bien ce qu’une library apporte au développeur :

write less, do more
jQuery

Ajouter jQuery consiste à charger un script supplémentaire dans le fichier HTML.
C’est un fichier qui a déjà plein de fonctions écrites et dont on pourra se servir pour nos propres scripts (on ajoute donc ce script avant le script de notre propre fichier JS).

Tout comme en JavaScript, jQuery permet de cibler des éléments du DOM pour leur ajouter une action (événement, modification du CSS, etc.). Il permet aussi d’ajouter des animations pré-construites permettant de dynamiser encore plus le site.

jQuery UI

Cette bibliothèque logicielle permet entre-autre de venir compléter jQuery.
En effet, cette library apporte des interactions avec l’utilisateur, des widgets et des effets pré-construits qui ciblent plus particulièrement les formulaires (mais peuvent aussi être utilisées autrement !).
Elle propose aussi des thèmes dont on peut s’inspirer.

Bootstrap

J’en ai déjà parlé, Boostrap est un framework CSS.
Et c’est aussi une library JavaScript.
Elle fonctionne avec les scripts jQuery et PoperJS et permet d’ajouter de nombreux components aux pages HTML.
Ces derniers sont dynamiques, ils utilisent des classes spéciales ; ce qui évite donc d’ajouter des scripts perso.

FancyBox

Cette bibliothèque permet de créer un zoom en cliquant sur une image ou une vidéo et de faire un déroulé d’images.
Elle fonctionne simplement : les images sur toute la page sont de basse qualité. Puis quand on clique dessus, un effet zoom se déclenche et ouvre une image de qualité supérieure.
Cette library permet d’optimiser les temps de chargement des pages contenant de nombreux fichiers multimédias.

Masonry

Cette bibliothèque permet, lorsqu’il y a des images de tailles différentes, de réorganiser les éléments pour les placer de la meilleure façon.
Cette library recalcule donc les tailles de toutes les images.

Isotope

C’est une bibliothèque qui permet de faire du tri visuel dans les éléments.
(Elle permet aussi d’ajouter une mise en page d’images.)

Hammer.js

Cette bibliothèque permet de gérer des gestures tactiles : elle créée de nouveaux événements entièrement dédiés au tactile.

Autres librairies

Animate CSS et Anime JS
Ces deux bibliothèques logicielles permettent d’ajouter des animations très poussées sur un site.
Leaflet
C’est une library qui permet d’ajouter de la cartographie sur un site.
PixiJS
Cette bibliothèque permet de faire de la gestion 2D pur les images, les jeux. C’est un moteur de rendus qui utilise les canvas.
(elle est assez complexe à prendre en main, je la recommande à des développeur plus aguerris !).
AOS (Animate On Scroll)
Comme son acronyme le mentionne, cette library permet d’ajouter des animations lors d’un scroll.
Container player
C’est une bibliothèque qui permet d’ajouter des vidéos en background.
Progressively
Cette library permet tout simplement de charger progressivement les images.

Voici donc un petit tour d’horizon des différentes libraries que j’ai pu voir lors de ma formation.
Si vous en connaissez ou utilisez d’autres, venez les partager en commentaires ! 🙂

Apprentissage Formation HTML Javascript Web

La manipulation du DOM

Marie 02/05/202009/05/2020 0

La manipulation du DOM est le sujet de la dernière partie du cours de JavaScript… J’ai alors pu voir plus en détail comment cibler des éléments pour les rendre dynamiques (en leur ajoutant un événement) !

Et dans un premier temps, faisons connaissance avec le DOM…

Le DOM, qu’est ce que c’est ?

D’après Wikipedia, le Document Object Modele (DOM) ou « modèle d’objets de document » concerne la page Web qui sera affichée dans le navigateur.
Le DOM représente le document affiché par une structure en arbre, comportant des nœuds. La représentation suivante permet alors de mieux visualiser ce qu’est le DOM pour une page web :

représentation du DOM par Birger Eriksson — DOM Model by Birger Eriksson / CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)

Affichage des éléments du DOM

L’affichage des différents éléments peut se faire grâce aux class :
– ciblage.className affichera le nom des class
– ciblage.classList affichera un tableau. Cela permet alors d’utiliser contains( ) qui va récupérer ce qui est contenu dans le tableau. Ce qui permettra ensuite de vérifier si oui ou non il possède déjà la class.
Par exemple :

<h1> </h1>

const titre = document.querySelector('h1');

titre.className = "text-right color-primary";
console.log(titre.className);
console.log(titre.classList);

if(titre.classList.contains("text-right")){
    console.log("oui");
} else {
    console.log("non);
}

Ajouter des éléments

Lors de la manipulation du DOM, il est aussi possible d’ajouter des éléments au fichier HTML. Pour cela on va principalement se servir des balises.

L’ajout va se faire en 2 temps :
– création de l’élément avec document.createElement( )
– ajout de l’élément comme enfant avec .appendChild( )

const nouveauTitre = document.createElement('h1');
const conteneur = document.getElementById('conteneur');
conteneur.appendChild(nouveauTitre);

Modifier un attribut

Il est aussi possible de modifier l’attribut d’une balise HTML directement depuis le fichier JS.
On utilisera le ciblage suivant :

setAttribute('attribute', 'value')

Par exemple, pour changer l’attribut défini sur une image voici le type de code que l’on pourrait alors trouver :

<img id="image" src="img/image.jpg" data-test="test">

const monImage = document.getElementById('image');
monImage.setAttribute('data-test', 'Nouveau texte alternatif');

Il est aussi possible de récupérer l’attribut d’une balise HTML en utilisant getAttribute('attribute')

Les événements

Pour dynamiser encore plus les pages HTML, on va ajouter des événements. On appelle événement une action dynamique qui s’effectue par exemple lorsque l’on clique avec la souris, lors de l’utilisation du clavier, etc.
Les événements peuvent ainsi se déclencher via la souris, le clavier, la fenêtre, le formulaire ou le document.

Ajouter un événement

Lorsque l’on souhaite ajouter un événement, on dit alors que l’on ajoute un événement d’écoute. En effet, la page va « écouter » ce que l’utilisateur fait avec .addEventListener.
Pour cela, on va indiquer quel événement doit être « écouté » (un clic de souris, un scroll, etc.) et on indiquera ensuite dans une fonction quelle sera l’action à exécuter lors de cet événement.

maVariable.addEventListener('click', maFonction);

Pour faciliter la lecture, on va privilégier l’écriture de la fonction en fonction fléchée. Ce choix est d’autant plus pertinent que la fonction n’inclue aucun paramètre et qu’elle ne sera pas forcément utilisée ailleurs.

maVariable.addEventListener('click', () => {
    //instructions de la fonction
})

Il est enfin possible de supprimer l’écoute d’un événement avec .removeEventListener. Dans ce cas, il faudra donc bien penser à externaliser la fonction !

maVariable.removeEventListener('click', maFonction);

Les différents événements

Il existe de nombreux événements. Je vous liste ici les principaux événements que l’on peut ajouter sur une page HTML :

1. Souris
– click
– mouseenter : la souris entre dans l’élément
– mouseleave : la souris sort de l’élément

2. Clavier
– keydown : lorsque l’utilisateur appuie sur une touche
– keyup : lorsque l’utilisateur relâche la touche
Pour les événements clavier, chaque touche du clavier doit porter un numéro. Pour retrouver le numéro de la touche, il faut d’abord le chercher avec un événement d’écoute :

document.addEventListener('keydown', clavier);

function clavier(e) {
    console.log(e.which);
}

Il faut aussi bien se souvenir que l’utilisateur ne pense pas à se servir de son clavier quand il va sur un site. Il faut donc bien le mentionner pour qu’il utilise son clavier !

3. Fenêtre
L’écoute de l’événement doit donc cibler la fenêtre (window)
– scroll : apparition d’un élément lors du scroll par exemple

window.addEventListener('scroll', maFonction);

– resize : l’élément se réadapte par rapport à la taille de l’écran

4. Formulaire
– change : dédié aux input, select ou textarea, il est relié à une value. Cet événement est pris en compte uniquement lorsque l’utilisateur change de champs (dès qu’on est plus focus sur ce champs)
– submit : relié à la balise <form> (donc au formulaire dans son ensemble). Il se déclenche au moment où l’on envoie le formulaire.

ciblage.addEventListener('submit', e => {
    e.preventDefault( );
})

5. Document
– DOM Content Loaded : s’exécute quand le document HTML est chargé et analysé (et pas lorsque les images et le CSS le sont).
– load : s’exécute quand la page (ou ce qu’on a visé) est totalement chargée. On peut aussi le mettre sur la fenêtre pour vérifier que tout est bien chargé.

La gestion du temps

Lorsque l’on ajoute des événements sur une page HTML, il peut aussi être nécessaire de gérer le temps de ces événements.
Pour cela, il existe différentes solutions.

setTimeout

Cette méthode est équivalente à un délai.
L’inconvénient de cette méthode est qu’elle ne permet pas de faire un affichage/non affichage continuel car cela ferait alors une énorme boucle.

setTimeout(maFonction, temps);

Attention, le temps est alors exprimé en millisecondes (ms).

setInterval

Cette méthode permet les répétitions jusqu’à ce qu’on lui dise d’arrêter (c’est une boucle). Le temps est aussi exprimé en ms.

const repet = setInterval(maFonction, 1000);

Pour arrêter la boucle, on utilise alors clearInterval()

clearInterval(repet);

Date

Cette classe permet de récupérer des informations sur les dates, des informations générales sur le jour.

const maintenant = new Date();

maintenant.getDay(); // affiche le numéro du jour (Dimanche = 0)
maintenant.getDate(); // affiche le jour
maintenant.getMonth(); // affiche le numéro du mois (Janvier = 0)
maintenant.getFullYear(); // affiche toute l'année (2020 par exemple)

Mathématiques

Il existe enfin une fonctionnalité en JavaScript qui permet des opérations mathématiques : Math (il est défini comme un objet).

– Math.round() : créé un arrondi du chiffre.
– Math.floor() : donne un arrondi du chiffre, à l’entier inférieur.
– Math.ceil() : fait un arrondi du chiffre, à l’entier supérieur.
– variable.toFixed(*digits*) : détermine le nombre de chiffre après la virgule (digits) pour arrondir un chiffre.

const nombre = 4.328;
nombre.toFixed(2); // affiche 4.33

– Math.random() donne un nombre aléatoirement entre 0 et 1.

Je vous mets ci-dessous une écriture qui permet alors d’être au plus juste par rapport aux probabilités :

Math.floor(Math.random() * (max + 1))

max est la valeur maximale à atteindre, auquel on ajoute 1 car sinon elle ne sera jamais obtenue.
Par exemple, si on a un max de 10 et un nombre aléatoire de 0.999999, Math.floor(0.99999) donnerai 9 (et on n’aurait jamais 10).

– Math.isNaN() : ce n’est pas un nombre, c’est un booléen.
– Number(nombre) : permet de convertir une valeur en numérique.
– Math.min() : donne le minimum parmi les valeurs et Math.max() donne le maxi.
Attention : si on a un tableau de valeurs, il faudra le convertir en liste en utilisant bien l’opérateur de décomposition « .. » .

const numbers = [1, 2, 3, 4];
Math.max(..numbers); //donnera 4
Math.min(..numbers); //donnera 1

Les cours de JavaScript suivis pendant ma formation prennent donc fin. Ils m’ont permis de découvrir comment dynamiser une page HTML. Maintenant, il va me falloir faire encore des exercices supplémentaires pour mieux maîtriser ce langage… Et je compte bien le faire en mettant au point mon portfolio (c’est le premier projet que je me suis fixé ! ).

[spoiler] La suite portera sur les librairies… 🙂