Categories
Apprentissage Formation Projet Web

Projet de fin d’études

Image de Présentation du projet  GardenBoard

Et voilà, c’est la fin de ma formation chez Web Force 3 !
Et pour terminer en beauté, nous avions 10 jours pour réaliser un projet en groupe.

Le projet

Nous étions une équipe de 3 personnes. Et en 10 jours il a fallu s’organiser pour voir notre projet aboutir !

Après quelques réunions préprojet, nous avons alors défini notre projet et les objectifs à atteindre.
Notre idée était donc de créer un dashboard de plantes pour pouvoir s’en occuper… En gros, qu’on soit débutant ou master en la matière, tout devait y être : aide à la culture et l’entretien des plantes, calendrier de rappel, dashboard personnalisé, météo…

Pour y arriver, nous avions alors l’idée de passer par une API de plantes existante. Voire même d’intégrer pl@ntNet dans notre projet !

Comme nous étions évalués aussi bien sur notre maîtrise du Front que du Back et l’utilisation de libraries associées, nous avons fait le choix de partir sur un combo : Vue.js / Symfony

Wowww nous voilà avec un double objectif : faire un site viable en 10 jours, tout en apprenant une nouvelle techno (Vue.js) !

En pratique

Pour nous organiser au mieux, nous avons décidé de faire en fonction de nos affinités : l’un en back, l’autre en front et la 3ème en lien avec les 2 autres…
Nous avons été une équipe très soudée, ce qui a permis d’avancer rapidement et efficacement !

Et pour être sûrs d’être tous en phase à chaque étape du projet, nous avons fait des réunions rapides tous les matins. Ce qui nous permettait de faire le point sur ce qui avait été fait la veille, et ce qu’il y avait à faire le jour même.

Nos outils ? Un tableau blanc, un Trello et une bonne dose d’humour !

Et nous voilà partis pour l’aventure !

Au final

Finalement, nous n’avons pas utilisé l’API de plantes qui était entièrement en anglais (nous n’avions pas le temps de tout traduire !). A la place, nous avons créé notre propre base de données (avec une quinzaine de plantes !) pour pouvoir faire une démo.

L’ajout de pl@ntNet n’a pas pu se faire dans le temps imparti. Mais l’option est envisageable pour une V2 du projet !

Nous avons appris à utiliser Vue.js en moins de 10 jours.
La liaison avec Synfony s’est parfaitement effectuée (ce qui nous a permis de garder l’authentification en Back!).
Et notre appli web fonctionne correctement.

Et bien sûr, comme dans tout projet, il reste de nombreuses features à ajouter…

GardenBoard

Je vous laisse découvrir en vidéo le rendu !

Pour les plus curieux, le code est disponible sur GitHub


Nous sommes passés devant un jury formé par nos professeurs et une personne extérieure (un responsable de plusieurs équipes de dev.).
Et je suis fière de vous dire que ce fut un véritable succès !

Ce que je retiendrai de cette formation :
– toute montée en compétence est possible si on s’en donne les moyens
– faire aboutir un projet est possible avec beaucoup de communication et d’humilité
– devenir développeuse front est vraiment la bonne décision que j’ai prise!

Categories
Apprentissage Formation Framework PHP Web

Symfony

Logo du framework Symfony

L’utilisation d’un framework PHP permet de faciliter la création d’un site/CRUD.
Pendant ma formation, j’ai enfin découvert Symfony 5 !

Symfony, qu’est ce que c’est ?

Comme je l’ai dit, Symfony est un framework PHP. C’est donc un logiciel de construction ou une grosse boite à outils permettant d’aller plus vite.

On y trouve :
– un router : Symfony vient avec son propre serveur web
– des templates
– une structure de projet MVC
– la construction de classes et d’objets facilitée grâce à de nombreuses conventions (notions avancées déjà configurées, qu’on peut implémenter facilement, et qu’il ne faudra pas hésiter à tester !)

Utilisation de Symfony

Créer un nouveau projet

Pour créer un nouveau projet, on utilise alors la commande suivante :

composer create-project symfony/website-skeleton blog

Elle permet de créer toute une architecture de projet sur la base de paquet (ici website-skeleton) dans le dossier choisi.

Il existe 2 types de projets :
skeleton : projet basique sans dépendances. Principalement utilisé pour API, ou pour avancer finement sur un projet.
website-skeleton : projet avec tout le nécessaire pour partir direct avec serveur intégré.

A noter que lorsque l’on utilise un framework, il ne faut pas lui faire confiance à 100% et bien vérifier les fichiers (pour éviter des bugs). Il est donc important de bien lire tous les messages qui apparaissent sur le terminal à la suite d’une installation car ils contiennent de nombreuses informations inintéressantes.

Je vous mets ici une liste pour connaitre un peu plus en détail certains fichiers :
composer.lock : c’est la liste des versions actuelles des extensions utilisées par le projet. Attention : il ne doit jamais être touché !
symfony.doc : c’est la documentation à ne pas toucher;
Kernel : c’est le noyau du projet, on ne le touche pas. A notre niveau, il n’y a pas besoin de le connaitre pour travailler.
Entity : c’est un Model avec juste les attributs, les getter et les setter
repository : ce sont les fichiers qui permettent de faire des select dans un Model. Les requêtes st donc externalisées.
migration : ce fichier contient les modifications successives que l’on fait dans la Base de Données.

Routes

Avec Symfony, il y a deux façons différentes de déclarer les routes :
– soit dans un fichier en .yaml

# config/routes.yaml

about:
    path: /a-propos
    controller: App\Controller\PagesController::about

Dans ce cas on indique à Symfony que la route about se dirigera vers le controller PagesController et utilisera la méthode about associée, lorsque l’utilisateur va sur l’URL /a-propos .

– soit en utilisant les commentaires pour définir les routes directement dans le controller. Attention, il faut bien définir dans l’ordre : la route puis son nom. (voir plus loin dans l’explication des controller)

C’est donc ce choix qu’on privilégiera.
Attention, les 2 façons de faire ne sont pas compatibles !

Controller

Le controller est ensuite créé dans le dossier src/ :

// src/Controller/PagesController.php

namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;

class PagesController {

    public function about() {
        return new Response('Hello world!');
    }
}

Toutes les méthodes de controller retournent impérativement une Response . On utilisera donc l’autocomplétion pour bien importer les alias nécessaires!

return new Response();

C’est alors à ce moment que l’on peut déclarer les routes via les commentaires :

use Symfony\Component\Routing\Annotation\Route;
// ...

    /**
    * @Route("/home", name="home")
    */
    public function home() {
        return new Response ('Bienvenue sur la page d\'accueil !');
    }

Lors de la déclaration des routes, il est possible d’ajouter des variables dans l’URL. La documentation de Symfony est très bien fournie !

/**
* @Route("/users/{userId}/books/{bookId}", name="user_book")
*/
public function users(int $userId, int $bookId) {
    return new Response ('Vous consultez le livre #' . $bookId . ' de l\'utilisateur numéro '. $userId);
}

Il est possible de typer ces variables pour n’accepter que certains types de caractères. Pour cela on va utiliser des expressions régulières (ou regex)

/**
  * @Route("/blog/{page}", name="blog_list", requirements={"page"="\d+"})
  */

Dans ce cas-là, la route n’acceptera que les cas où l’argument {page} correspond à la regex \d+ (= valeurs numériques uniquement).

Note :

Avec Symfony, le var_dump ne permet plus de voir de façon simple les informations. A la place, on fera un dd (dump & die).

Requête (et Réponse)

Lorsque l’on a besoin de récupérer des données d’une requête, on utilise les Request et Response du package HttpFoundation.

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

// ...

    /**
    * @Route("/post-user", name="create_user", methods={"POST"})
    */

    public function create(Request $request) : Response
    {
        dump($request);
    }

Nous avons donc déclaré dans la route quelle méthode nous utilisons pour « communiquer » avec la basse de données (ici c’est la méthode POST).
Nous avons aussi importé les classes Request et Response, ce qui nous a permis d’utiliser l’objet Request dans la méthode create().
Il ne faut alors pas oublier d’indiquer le type de retour de la fonction (: Response).

L’objet Request $request, qui par exemple peut être issu de l’envoi d’un formulaire, est alors disponible à l’utilisation !
Nous pouvons ensuite accéder aux valeurs POST par exemple avec $request->get('name');.

Communication avec la base de données

Pour créer une base de données lors d’un projet Symfony, on va utiliser Doctrine.
Doctrine est un ORM (Object-Relational Mapper), qui implémente le pattern Data Mapper. Concrètement, le Data Mapper synchronise un objet dans le PHP avec la base de données, ce qui nous donne une couche Model performante dans notre MVC.

Pour commencer, il faut configurer la base de données dans le fichier .env qui se trouve à la racine du projet :

DATABASE_URL=mysql://db_user:db_password@127.0.0.1:3306/db_name

NB : Remplacez les valeurs de db_user et db_password par les valeurs qui correspondent à votre configuration.

Une fois le fichier .env configuré, on ouvre une console dans le dossier du projet dans laquelle on va saisir : php bin/console doctrine:database:create pour créer la base de données.

Ensuite on va créer une Entity (équivalent du Model en MVC – qui mappera la table correspondante en base de données), en saisissant dans la console : php bin/console make:entity Article

Puis il faut effectuer une migration. Une migration est en fait une instruction de base de données qui indique quoi faire par rapport à l’état des fichiers Entity (elle regarde la BdD et l’Entity puis vérifie la différence entre les deux).

php bin/console make:migration

Il faut ensuite bien aller voir la migration pour vérifier la ligne SQL (et la modifier si nécessaire !). Si tout est OK, on valide en lançant la commande : php bin/console doctrine:migrations:migrate

CRUD & Symfony

Symfony permet aussi de créer facilement un CRUD. Dans chaque Controller, on va pouvoir déclarer toutes les routes correspondant au CRUD, ainsi que les méthodes à utiliser.
Ensuite, on utilisera Twig pour l’affichage de chaque page.

Tout est détaillé dans la doc de Symfony, je vous laisse donc y jeter un œil ! 😉


L’apprentissage de Symfony est un énorme morceau lorsque l’on se plonge dans le Back.
Je vous avouerais que ça n’a pas été ma tasse de thé et je m’excuse d’avance de ne pas avoir détaillé plus tous mes cours…

J’ai enfin fini la formation avec un projet de groupe que je vous laisserai découvrir dans le prochain post ! 🙂

Categories
Apprentissage Formation MVC PHP Web

L’organisation MVC

Le MVC (Model View Controller) est une manière d’organiser son code, de structurer son projet selon un ensemble de conventions.

Fonctionnement

L’idée est de pouvoir séparer le code en différents fichiers dont chacun aura une responsabilité définie. Cela permettra alors de rendre le code plus lisible, plus maintenable et plus prévisible.

schema de mvc (model view controller)
Schéma du Model-View-Controller

Ces différents fichiers sont :

  • les models, qui sont les fichiers qui gèrent la base de données. C’est une classe qui contient des setters, getters, et des fonctions d’enregistrement ou de lecture de la base de données.
    Le fichier est nommé en PascalCase et au singulier, la classe associée prendra alors exactement le même nom.
    Exemple de nommage : Exemple.php qui contiendra : class Exemple { /* */}
  • des views, qui sont les seuls fichiers contenant de l’affichage (HTML) et du code dynamique structurel (des conditions ou des boucles pour l’affichage).
    Le dossier est nommé en kebab-case et au pluriel, il y a alors un fichier par vue.
  • les controllers (glue entre le model et la view) qui, selon la page demandée, récupéreront les données (en demandant au Model correspondant) et afficheront les données (en demandant à la View correspondante).
    Le fichier est nommé en PascalCase et au pluriel, la classe associée prendra alors exactement le même nom.
    Exemple de nommage : ExemplesController.php qui contiendra : class ExemplesController { /* */}

En plus de ces éléments, il y a aussi:

  • un router. C’est un bloc de code (codé manuellement ou grâce à une librairie externe) qui se chargera d’appeler le bon controller selon la page demandée.

Par exemple :

Page demandéeControllerMéthodeCommentaires
"/" en GETAppControllerindex()Relative à l’application en général (AppController). Pour laquelle on veut l’index de l’application
"/a-propos" en GETAppControllerabout()Les pages relatives à l’application en général (AppController), et pour laquelle on veut la page à propos de l’application
"/articles" en GETArticlesControllerindex()Relatives aux articles (ArticlesController), et pour laquelle on veut l’index des articles
"/articles/3" en GETArticlesControllershow(3)Les pages relatives aux articles (ArticlesController), pour laquelle on veut l’affichage d’un article (l’article id = 3)

Comment créer un modèle MVC ?

Il existe de nombreux tutos sur internet. Je vous en ai donc sélectionné quelques-uns :
Tomsihap
Grafikart
Nouvelle Techno
– Kevin Martinel : cours 1 et cours 2

Pourquoi utiliser le MVC

Connaitre l’architecture MVC permet de comprendre le fonctionnement des framework PHP.
En effet, ces derniers sont tous basés sur la logique MVC, ce qui permet une maintenabilité du code plus performante.

Dans un projet en MVC, tout est séparé.
Les URL sont déclarées (par exemple : une route en GET pour voir les formulaires, une route en POST pour le traiter).
Chaque table de la base de données à son propre controller (qui définira via des fonctions les données à transmettre à l’URL pour l’afficher ensuite) ainsi que son propre Model (qui permet de traiter et récupérer les données de la base de données).
Enfin, les vues sont gérées par table de la base de données, et par type d’affichage. Ce sont donc des morceaux de fichiers appelés par le controller au moment de l’affichage.

CRUD

Et si on abordait le sujet du CRUD ? Bonne idée, mais qu’est ce que c’est ? CRUD est l’acronyme de Create, Read, Update et Delete.

Le CRUD permet de faire facilement le lien entre la base de données et PHP. En effet, chaque action visant la base de données est gérée via PHP. On a alors différents fichiers :
– un dédié à la création des éléments de la base de données
– un permettant la lecture (et l’affichage) des éléments de la base de données
– un dédié à la mise à jour de ces éléments
– et enfin, un permettant la suppression d’un (ou plusieurs) élément(s) de la base de données.

Le CRUD s’inscrit donc logiquement dans le fonctionnement en MCV : il permet de bien tout séparer !


Avoir vu le MVC permet de bien compartimenter la façon de fonctionner pour gérer un site en PHP.
L’utilisation d’un framework va permettre d’aller encore plus loin, tout en rendant la création d’un site plus rapide ! C’est ce que nous allons voir par la suite…

Categories
Apprentissage Formation PHP Web

La programmation orientée objet en PHP

Logo PHP

La programmation orientée objet (POO) en PHP est un des cœurs principaux de ce langage. J’ai déjà évoqué ce sujet lors de mon approche de Python. La logique va donc être la même, seul le langage change !

Voyons plus en détail comment PHP utilise la POO.

Les classes

Une classe est une représentation de quelque chose (donnée, container, etc.), c’est un « objet commun ». On peut lui définir un patron de représentation. Et c’est avec ce patron que l’on pourra ensuite générer des objets.

Pour définir une classe, on prépare des attributs (= variables). On peut aussi lui ajouter des méthodes (= fonctions) qui donnent des fonctionnalités par défaut.
On peut ensuite créer une nouvelle instance de la classe (= objet).
A cet objet, on peut ainsi définir des valeurs aux attributs (on utilise la flèche pour l’attribution des valeurs et on ne met pas de $ lors de l’appel de l’attribut).

Dans une classe, pour accéder aux attributs eux-mêmes, on utilise $this. Lors de l’utilisation de la classe, $this sera remplacé alors par le nom de l’objet.
Attention : $this réfère toujours et uniquement à la classe elle-même !

class Table {
    /**
    * Attributs
    */
    public $nom;
    public $plateau;
    public $pieds;

    /**
    * Méthodes
    */
    public function fold() {
        echo "la table " . $this->nom . " est pliée.";
    }
}

$tableKlak = new Table;
$tableKlak->nom = "Klak";
$tableKlak->plateau = "marbre";
$tableKlak->pieds = "acier";

echo "La table " . $tableKlak->nom . " a des pieds en " . $tableKlak->pieds . " et un plateau en " . $tableKlak->plateau
// affichera : La table Klak a des pieds en acier et un plateau en marbre

$tableKlak->fold();
// affichera : La table Klak est pliée.
Les objets

On peut voir les objets comme étant des array surpuissants. Car on peut leur donner des attributs pour être sûrs de ce qu’il y a dedans.
Il y a cependant une grosse différence entre les objets et les arrays : dans un array, on peut rajouter à la volée une nouvelle clé et sa valeur, ou ne pas remplir une clé déjà existante. Avec un objet, on est obligé de prévoir en avance les données qui vont exister, et on sera obligé de ne remplir que celles-ci, et pas une de plus.

Il est aussi possible de mettre des valeurs par défaut aux attributs :

class Table {
    public $nom;
    public $plateau = "plastique";
    public $pieds = 'plastique';
}

On peut définir des attributs ‘obligatoires’. Et pour cela on va utiliser des « méthodes magiques ».
La plus importante est le constructeur car elle est systématiquement appelée lors de la création de l’objet. Cela permet de mettre une surcouche de protection (pour être sûr d’avoir les données nécessaires).

class Table {
    public $nom;
    public $plateau = "plastique";
    public $pieds = 'plastique';

    public function __construct($newName) {
        $this->nom = $newName;
    }
}

$tableKlak = newTable("Klak");

A ce moment il n’y a plus besoin d’instancier l’attribut nom car il le fait automatiquement lors de la création de l’objet.

De manière générale, on ne crée pas une nouvelle variable. On se sert de celles existantes.
Dans l’exemple précédent, on écrirait le constructeur de la façon suivante :

public function __construct($nom) {
    $this->nom = $nom;
}
Les méthodes

Les méthodes sont des fonctions (qui existent dans une classe). Pour créer une méthode, on la déclare dans la classe avec public function :

class Ship {
    public $name;

    public function sayHello() {
        echo "Hello !";
    }
}

Pour appeler une méthode, on utilise la même flèche -> que pour les attributs :

$myShip->sayHello();

Les méthodes permettent donc d’avoir des classes qui sont des petits packs de données, comme un array, mais qui peuvent aussi effectuer des actions, ce qu’un array ne peut absolument pas faire !

Et comme pour une fonction classique, on peut aussi ajouter des arguments à nos méthodes de classe.

Attention, il ne faut pas oublier qu’une méthode doit absolument retourner quelque chose (donc ne pas oublier de mettre un return ou echo) !

La documentation

Lorsque l’on code en programmation orientée objet en PHP, il est de convention chez tous les éditeurs de documenter son code avec phpdoc. Il permet lors de l’autocomplétion dans VSCode (ou tout type d’IDE) d’avoir des informations sur les fonctions, les classes, les variables, etc.

En PHP, on utilise un bloc de commentaires (/**  */) avant la déclaration de la class.
Par exemple pour un constructeur :

/**
* @param string $name Nom du personnage
* @param integer $power Puissance du personnage
*/

Il suffit donc de déclarer : @param (annotation paramètre) suivi du type de données, du nom du paramètre, et éventuellement de ce qu’il représente.

Attention : phpdoc est uniquement de la déclaration et n’a aucune valeur de vérifier les bugs. C’est une aide pour les utilisateurs du code (voir même pour permettre de générer automatiquement une doc)

Pour les attributs, on utilise @var suivi du type de variable (integer, string, boolean).

Gestion des classes

Pour limiter les bugs, l’accès aux données des classes et objets doit être contrôlé.
Dans un premier temps, la déclaration des attributs ne sera plus public mais private :

class Table {
    private $nom;
    private $plateau = "plastique";
    private $pieds = 'plastique';
}

On ne peut alors plus accéder à l’attribut ->nom car il est privé (private). Cela permet donc de ne plus avoir d’erreurs de saisie dans nos objets, par contre on ne peut plus rien mettre dedans du tout.

Pour pallier à ce problème, on va utiliser des getter et des setter. Mais qu’est ce que c’est ?

Getter

Un attribut private, n’est accessible ni en lecture, ni en écriture.
Nous allons donc utiliser des getters, des méthodes qui nous permettent d’accéder aux données de ces attributs.

L’intérêt est d’avoir plus de possibilités, pour formater les données ou pour traduire ce qui vient de la base de données, etc.
Il transforme donc la donnée pour lui permettre de s’afficher.

Par exemple, on peut modifier la casse d’un attribut lors de son affichage :

class Table {
    // ...
    public function getNameUppercase() {
        return strtoupper($this->nom);
    }
}

$maTable = new Table();
echo "TABLE : " . $maTable->getNameUppercase();

// Le nom de la nouvelle table sera écrit en majuscule
Setter

Ce sont des méthodes qui ne servent qu’à une chose : changer la valeur d’un des attributs de notre classe. Le setter prépare donc la donnée.

En fait, quand on met un attribut sur private, on n’y a plus accès depuis l’extérieur de la classe. Par contre, il reste accessible à l’intérieur de la classe ! Un setter permet alors de retourner l’objet lui-même avec return $this ; .

class Table {
    private $nom;
    private $plateau = "plastique";
    private $pieds = 'plastique';

    public function setName($nom) {
        $this->nom = $nom;
    }
}

Le gros avantage des setters, c’est qu’il y a des validations dans nos données. Dans les méthodes set***(), on peut valider les données avant de réellement les donner à nos objets.

Typage

Pour avoir une levée d’erreur, il faut bien penser à typer les paramètres. Par exemple pour le constructeur :

public function __construct(string $newName, int $newStrength = null, int $newPower = null) 
{ 
    // instructions
}

Et pour typer une valeur retour dans une fonction, on l’ajoute au moment de la déclaration :

function maFonction () : int 
{ 
    // instructions
}

Nous avons vu dans les grandes lignes la programmation orientée objet en PHP.
Il nous reste à voir comment bien organiser notre code grâce à la MVC… Ça sera donc le thème du prochain post !!! 🙂

Categories
Apprentissage CSS Database Formation HTML PHP SQL Web

Quand PHP dynamise les pages Web

code sur un écran

PHP dynamise les pages web grâce à des variables injectées directement dans le code HTML des pages.
Découvrons ce qui se cache derrière ces variables dites dynamiques…

Les superglobales

Une page web contient de nombreuses données qui peuvent être récupérées en PHP. Pour cela on va utiliser des variables techniques dites superglobales. Elles sont toujours disponibles, quel que soit le niveau où elles sont déclarées.

SuperglobaleDescription
$GLOBALSListe les variables disponibles dans le contexte global de l’application
$_SERVERContient des informations comme les en-têtes, dossier, chemin du script. Informations générées par le serveur
$_REQUESTUn tableau associatif qui contient par défaut le contenu des variables $_GET$_POST et $_COOKIE.
$_POSTContient les variables POST passées via une requête HTTP
$_GETElle contient les variables GET passées via une requête HTTP
$_FILESElle contient les fichiers uploadés au serveur passés par la méthode POST
$_ENVContient les variables d’environnement qui gravitent autour du script PHP : les variables shell, le système d’exploitation…
$_COOKIETableau de cookies envoyés par HTTP
$_SESSIONTableau de valeurs stockées en session, c’est-à-dire n’existant que pour l’utilisateur courant et durant une période limitée (son temps de connexion environ par défaut)

La transmission des données d’une page à l’autre se fait via le protocole HTTP. Deux méthodes sont alors utilisées :
GET : qui permet de récupérer un contenu, transmis par un paramètre get via l’URL.
POST : qui permet d’envoyer plus de contenu. Cette méthode est principalement utilisée pour gérer l’envoi de formulaires (lien avec HTML).

Voyons ces deux superglobales en détail…

Les variables GET

Lors d’une requête GET, on peut créer des variables directement dans l’adresse URL. La transmission se fait alors avec une paire de key=value contenue dans l’URL. Les données sont donc récupérables.
Pour ce faire, à la fin de l’adresse on écrit : url?parametre1=valeur1&parametre2=valeur2

Attention, le ? entre le nom du fichier et la variable est très important car c’est lui qui détermine les variables à transmettre.

Pour récupérer les données, on utilisera ensuite la superglobale $_GET.
Cette variable est un tableau d’objets qui contient toutes les données sous le format key => value .

Les variables POST

La méthode POST est principalement utilisée pour les formulaires. Pour gérer ces données, il faudra avoir 2 pages : une page contenant le formulaire et une autre permettant le traitement des variables.
La superglobale $_POST se comporte exactement comme $_GET : elle revoie un tableau d’objets. Il ne faut donc pas oublier dans le formulaire d’ajouter à chaque input un name !

Par exemple :
Page form.php

<html>
<body>
    <form action="login.php" method="post">
        <input type="email" placeholder="Adresse e-mail" name="email">
        <input type="password" placeholder="Mot de passe" name="password">
        <button type="submit">Connexion</button>
    </form>
</body>
</html>

Page traitement.php

<?php

echo "Votre e-mail est " . $_POST['email']  . ". Vous êtes bien connecté ! Votre mot de passe est secret, mais au cas où, il s'agit de " . $_POST['password'];

?>

Utiliser PHP avec du HTML, c’est possible !

Dans le doc HTML, on va pouvoir considérer les données PHP comme étant des données dynamiques. Il va donc être possible d’ajouter des conditions, ou des boucles directement dans le HTML.
Pour cela, on va inclure les données PHP en les écrivant dans les balises PHP : <?php   ...    ?> .

Les bonnes pratiques :
<?= correspond à <?php echo. Cette notation va permettre d’abstraire encore plus le php !
– au lieu de l’accolade dans les conditions, on va mettre deux points et terminer avec end... .
Par exemple :

<?php foreach($articles as $article => $donnee) : ?>
    <div>
        <a href="article.php?id=<?= $article ?>"><?= $donnee['title'] ?> </a>
        </div>
<?php endforeach ; ?>

On va donc écrire toute la page en HTML. Et s’il y a des variables spécifiques à déclarer en PHP, on va créer un bloc PHP tout en haut du document (avant la déclaration du HTML).

Conseils pratiques :
– avant de mettre les variables PHP dynamiques, écrire d’abord en dur le HTML ce que l’on veut obtenir,
– ne pas oublier d’ouvrir et fermer directement la balise PHP pour éviter les problèmes.

Insertion de fichier

Il est aussi possible d’insérer des fichiers directement dans la page PHP/HTML. Pour cela, on va utiliser la fonction include( ) (ou required() ).

PHP va lire le fichier, prendre tout son contenu pour le copier dans la page HTML. A noter que toute cette partie n’apparaîtra pas dans le code source : le fichier va rester sur serveur, et PHP va l’analyser pour le compiler (tout en restant transparent pour le client !).

Cette fonction d’ajout permet aussi de gérer les fichiers comme les componants externes : on peut faire un fichier contenant juste la navbar, juste le header, juste le footer, etc…
Cela évite d’écrire la même chose de partout, et les changements seront alors plus simples.
Le code PHP de la page web devient donc plus facile à maintenir !

Différence entre include et required

Avec include( ) , si le fichier n’est pas trouvé, on aura un warning (cela n’empêche donc pas le script de s’exécuter).
A noter que les erreurs ne s’affichent pas pour les clients du site, elles s’affichent uniquement en mode développeur.

Avec require( ) , si le fichier n’est pas trouvé, on aura alors une fatal-error entraînant l’arrêt d’exécution du script !

Connexion avec les bases de données

Il est possible de récupérer les données depuis une base de données. Pour cela, il faut créer une connexion à la base de données ($bdd), puis créer une requête comme avec SQL ($response), pour ensuite avoir une réponse ($variablesRecuperees).

Extraire tous les éléments de la base de données
// On créée une connexion à la base de données que l'on stocke dans $bdd
$bdd = new PDO('mysql:host=localhost;dbname=nomDeLaBdd;charset=utf8;port=3306', 'login', 'password');

// On écrit notre requête MySQL. On peut aussi concaténer des variables PHP dedans si besoin !
$request = "SELECT * FROM table";

// On demande à notre base de données, $bdd, d'exécuter la requête. On stocke la réponse de MySQL dans $response 
$response = $bdd->query($request);

// On demande à la réponse de nous retourner TOUTES les données (grâce à fetchAll).
// De plus, ces données seront retournées sous forme de tableau associatif, grâce au paramètre PDO::FETCH_ASSOC. 
$variablesRecuperees= $response->fetchAll(PDO::FETCH_ASSOC);

$variablesRecuperees est alors un tableau associatif. On peut alors extraire toutes les données grâce à un foreach :

<?php foreach ($variablesRecuperees as $variableRecuperee) : ?>
  <h1>
      L'élément est <?= $variableRecuperee['champs'] ?>
  </h1>
<?php endforeach; ?>
Extraire un seul élément

Il est possible d’extraire un seul élément de la base de données.
Pour cela, il existe deux façons de faire :

1 – en cherchant via l’id de l’élément (ou en incluant des variables précises)
Par exemple :

$idMovie = 34; // cet ID peut venir de GET par exemple !
$request = "SELECT * FROM movies WHERE id = " . $idMovie;

// ou encore

$search = "science-fiction"; // Ce paramètre peut venir de GET si on a cliqué sur le lien d'une catégorie, ou de POST pour un moteur de recherche par exemple !
$request = "SELECT * FROM movies WHERE category LIKE '%" . $search . "%'";

2 – via une requête paramétrée

$response = $bdd->query($request);

// Si on n'attend qu'un élément (par exemple: un film trouvé par ID), on utilise fetch :
$variableRecuperee = $response->fetch(PDO::FETCH_ASSOC);

PHP aide à dynamiser les pages web en injectant des données qui sont modifiables en fonction contexte.
Mais PHP est avant tout un langage de programmation orienté objet !
Nous découvrirons la POO avec PHP dans les prochains cours !

Categories
Apprentissage Formation HTML PHP Web

La programmation en PHP

Logo PHP

La programmation en PHP courante se fait comme en JS : des boucles, des conditions, des fonctions…
Allons voir de plus près !

Dans cet article, je vais faire beaucoup de liens avec JavaScript. En effet, la réflexion de programmation est toujours la même. Seule la syntaxe change d’un langage à l’autre…
Je ne détaillerais donc pas tout. Toutefois, vous pouvez trouver quelques explications sur les articles écrits lors de mon apprentissage du JS :
pour les variables et tableaux
pour les fonctions

Conditions

IF

La structure est la suivante :

if (condition) {
    echo "Condition vraie";
}
elseif (condition2) {
    echo "2ème condition vraie";
}
else {
    echo "Condition fausse";
}

Attention : PHP va considérer que tout ce qui n’est pas équivalent à 0 est vrai et tout ce qui l’est est faux.

Le résultat d’une condition va être interprétée par PHP comme une variable booléenne. Il va chercher à chaque fois à déterminer si la condition est vraie ou fausse.
Lorsque l’on utilise un double égal, PHP va essayer de trans-typer les variables pour les comparer entre elles. Il est alors nécessaire d’utiliser le triple égal (que l’on utilisera donc par défaut).

Avec if, tout ce qui se passe dans le bloc, sort du bloc et est alors récupérable.

AutreS manièreS d’écrire :

l’écriture ternaire
Tout comme en JS, on met l’action à effectuer avant la condition :

echo (condition) ? "si vrai" : "si faux" ;
// ou
$variable = (condition) ? "si vrai" : "si faux" ;

On l’utilisera peu car en intégrant les conditions dans du HTML, la lecture et l’écriture ne seront alors pas aisées.

le switch
Il est utilisé lorsqu’il y a plusieurs choix possibles (comme en JS).
On passe alors successivement par toutes les étapes.
S’il n’y a pas de break, la lecture des cas continue. S’il y a un break, cela permet de sortir de la condition.
Le résultat de chaque case est fixe car on vérifie une égalité simple.

OU / ET

L’écriture de ces opérateurs est la suivante :
OU => OR ou ||
ET => AND ou &&

Leur utilisation est la même qu’en JS.

Les tableaux

Array simple

Ils permettent de stocker dans une variable plusieurs données.
Il y a deux façons d’écrire un tableau :

$array = ["a", true, 42, $variable, ["autre tableau"]]; // date de PHP5.3 - 2009
$array = array(); // avant 2009 - ne pas s'en servir !

A noter : echo permet uniquement d’afficher des string ou variable simple. Par contre, il ne permet pas afficher un tableau.
Pour afficher les infos du tableau, on utilisera donc var_dump( )

Pour afficher une donnée du tableau, on utilise son index (se comporte comme en JS)

echo $array[0];
Tableau associatif

Au lieu d’utiliser les index, on associe une clé à une valeur. Le tableau simple devient alors un tableau associatif.
Pour associer la clé à la valeur, on va utiliser une grosse flèche : =>

$user = [
    "firstname" => "john",
    "lastname"  => "doe",
    "age"       => "54",
    "job"       => "developpeur"
];

Pour afficher une donnée du tableau associatif, on utilise alors sa clé :

echo $user["job"];

Les boucles

Les boucles dédiées aux tableaux

Pour pouvoir lire successivement les données dans un tableau, on va utiliser une boucle spécifique : foreach(argument) {}

foreach($tableau as $elementsDuTableau) {
    //instructions;
}

La boucle va alors scanner tous les éléments du tableau et les instructions porteront sur ces éléments.
Par exemple :

$nbPairs = [2, 4, 6, 8];

foreach($nbPairs as $nombre) {
    echo $nombre;
}

// écrira : 2 puis 4 puis 6 puis 8

$user = [
    "firstname" => "john",
    "lastname"  => "doe",
    "age"       => "54",
    "job"       => "developpeur"
];

foreach($user as $cle => $valeur) {
    echo "<li>" . $cle . " : " . $valeur . "</li>";
}

// écrira sous forme de liste chaque clé puis ":" puis chaque valeur associée

Conventions
Le singulier et le pluriel sont très importants lors de la désignation des variables :
– le singulier représente 1 seule chose
– le pluriel représente plusieurs choses (comme par exemple pour un tableau simple qui contient 2 tableaux)

Les boucles while

Les boucles while fonctionnent en PHP comme en JS…

$i = 0;

while($i < 10) {
    var_dump($i);
}

Dans l’exemple ci-dessus, la boucle est infinie.

En PHP, le navigateur ne se crashe pas car le serveur (Apache) va stopper l’exécution . En effet, le serveur limite les capacités de mémoire au client ce qui permet de ne pas le faire planter lorsqu’une boucle infinie est exécutée…
Il y a donc 2 limites par défaut qu’on peut paramétrer dans le fichier php.ini
– un temps d’exécution de 30sec max
– la mémoire allouée de 128Mo

Pour stopper une boucle infinie, il faut alors stopper le serveur et le relancer !

$i = 0;

while($i < 10) {
    var_dump($i);
    $i = $i + 1;
}

Il y a trois manières d’écrire l’incrémentation de la boucle :
$i = $i + 24
$i += 24
$i++ (rajoute uniquement 1) / On préférera cette notation sauf quand l’incrémentation est différente de 1.

L’ordre d’écriture de la boucle est important. En effet, selon le placement de l’incrémentation, le résultat obtenu ne sera pas le même.

$i = 0;

while($i < 10) {
    var_dump($i);
    $i++;
}

// on va de 0 à 9
$i = 0;

while($i < 10) {
    $i++;
    var_dump($i);
}

// on va de 1 à 10

La boucle while vérifie une vérité, il n’y a donc pas forcément besoin d’une incrémentation. On peut parcourir une liste par exemple.

Les boucles for

Les boucles for fonctionnent aussi en PHP comme en JS…

for($i = 0; $i < 10; $i++) {
    var_dump($i);
}

On va privilégier cette boucle.

Demander des nombres pairs

Pour vérifier qu’un nombre est pair, on va passer par un modulo pour être sûr du résultat. Et ce, quelque soit la valeur initiale de la variable testée.

for($i = 0; $i < 10; $i++) {
    if($i%2 === 0) {
        var_dump($i);
    }
    $i++;
}

Les fonctions

C’est un bloc contenant une série d’instructions qui pourra être rappelé lorsque l’on en a besoin. Cela évite de se répéter, évite les erreurs et que l’on peut l’utiliser à différents endroits.
Il permet lorsqu’il y a une modification à faire (lors de la maintenance par exemple) d’avoir un seul endroit à modifier (et évite de chercher de partout!).

Si à un moment on recopie au moins 2 fois la même chose, il faudra bien se poser la question si cela mérite ou non une variable ou une fonction.

Une fonction est un répertoire, une recette de cuisine. Tant qu’on ne l’exécute pas (on ne l’appelle pas), les instructions contenues à l’intérieur restent en « sommeil ».

Dès qu’on appelle une fonction, elle va alors juste exécuter les instructions.
Il faut donc obligatoirement demander à la fonction de retourner quelque chose pour qu’elle puisse afficher un résultat.

//déclaration
function sayHello() {
    //instructions
    $texte = "hello world";
    return $texte;
}

//appel
echo sayHello();

Attention, dans les instructions on va éviter de mettre des instructions d’affichage. Ce qui permet de décider par la suite ce que l’on veut faire du résultat de la fonction.

PORTÉE DES VARIABLES

En général, les variables déclarées dans un bloc de fonction ne sont utilisables que dans ce bloc. C’est ce que l’on appelle la portée des variables (ou scop). le scop global correspond à ce qui se trouve partout dans le code (hors d’un bloc).

Les variables sont utilisables de partout (même dans des blocs de conditions par exemple).

Dans les blocs de conditions ou de boucles, dès que l’on rentre dedans on peut récupérer toutes les variables après.

Les fonctions elles, n’ont pas accès au scop global. On ne peut donc pas utiliser de variables externes dans une fonction. Et inversement, les variables de la fonction ne peuvent pas être utilisées après l’exécution de la fonction.
C’est pour cette raison qu’on utilise return pour récupérer une variable de fonction dans le scop global.

Les paramètres (ou arguments)

Il est possible d’attribuer des paramètres (ou arguments) à une fonction.

function addition($nombre1, $nombre2) {
    $calcul = $nombre1 + $nombre2;
    return $calcul;
}

echo addition(42, 58);

Cet exemple permet de montrer que, quelque soit les paramètres que l’on va mettre dans la fonction, on aura un résultat.

Les fonctions récursives

Une fonction récursive est une fonction qui s’appelle elle-même.
Par exemple une fonction qui prend un nombre $nombre et additionne tous les nombres un par un jusqu’à ce nombre :

function somme($nombre) {
    // Si mon nombre est différent de zéro, je fais mon calcul :
    if ($nombre != 0) {
        // La somme est :
        // le nombre actuel +
        // la fonction somme() sur le nombre précédent
        // Qui elle même prend le nombre précédent...
        // Et lui ajoute la fonction somme sur le nombre encore précédent...
        // et ainsi de suite !
        $somme = $nombre + somme($nombre - 1);
        return $somme;
    }
    else {
        return $nombre;
    }
}

On vient de faire un tour rapide des fonctionnalités de PHP qui nous servirons ensuite lors de son utilisation pour les page web.
D’ailleurs, en parlant pages web, comment PHP permet de les dynamiser ?
C’est ce que j’ai découvert dans la suite des cours…

Categories
Apprentissage Formation HTML PHP Web

Langage PHP

Logo PHP

Après avoir vu comment gérer une base de données, nous apprenons un nouveau langage : PHP.
Plus connu sous son sigle PHP (Hypertext Preprocessor), est un langage de programmation qui est principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP.

Généralités

PHP va compiler et transformer les fichiers en HTML (ou autre) en petits exécutables qui ne sont pas lisibles tel quel. On va donc utiliser un serveur Web (Apache, Ngnix, etc.) pour les afficher.

Pour travailler en PHP, il faut donc :
– un exécutable PHP (outil en ligne de commande) qui permet de lire et compiler les requêtes,
– un serveur web (Apache par ex.) qui est capable de lire les fichiers compilés par PHP.

Les versions de PHP

Créé en 1994 par Rasmus Lerdorf, PHP a connu plusieurs rénovations. La plus utilisée est PHP5 qui a été mise en place en 2005.
Depuis il y a eu beaucoup de tentatives de rénovation de PHP. En 2005, la sortie de PHP6 n’a pas marché.

Il a fallu attendre 2015 et l’arrivée de PHP7 pour une remise à plat et une ré-écriture complète de tout le langage. Ce qui a permis notamment de doubler les performances. La contrainte fût une mise à jour massive et rapide des sites codés en PHP5… Depuis, ces mises à jour sont plus régulières et plus stables.

Pour en savoir plus, il suffit d’aller faire un tour sur Wikipédia ! 😉

Alors PHP ça ressemble à quoi ?

Rentrons dans le vif du sujet…
PHP peut s’intégrer partout dans du HTML et permet de travailler avec des variables directement dans la page.
Pour cela il suffit d’ouvrir une balise de code PHP :

<?php

?>

A noter que quand on écrit un fichier uniquement en PHP et qu’il n’y a rien d’autre, on n’est pas obligé de fermer la balise PHP ?> .

Et il est important de retenir que toutes les instructions finissent avec un point-virgule. Sinon, elles ne marchent pas !

Les variables
Déclaration

La déclaration se fait avec un dollar : $nomVariable
Pour le moment, on typera les variables uniquement grâce à la valeur qu’on leur donnera. Il faut bien retenir que PHP est très permissif dans le typage des variables.

Concaténation

On peut concaténer les variables entre elles avec un point :

$hello = "Hello";
$world = "World";

$result = $hello . $world;

Une autre façon de faire :

$stringAge = $stringAge . "ans"
//ou 
$stringAge .= "ans"

Il est aussi possible de faire des calculs :

$calcul = $number + 14; 
// les opérateurs possibles sont : + - / * %
Affichage

On va utiliser echo, puis on déclare derrière tout type de données (chiffres, caractères, variables, HTML).

Si on déclare plusieurs echo les uns à la suite des autres, toutes les valeurs seront mises les unes à côté des autres (chiffre et caractères indifféremment).
Il est possible d’ajouter du HTML entre, il suffit de bien ouvrir et fermer les balises PHP comme il faut.

Divers
  • var_dump( ) permet quant à lui de débugger.
    Il va afficher : à quel endroit il y a l’erreur, quel type de donnée est à l’origine de l’erreur et sa valeur.
  • ! quand on le met devant un booléen, il permet d’avoir l’inverse.

Hello World

Premiers essais, premières lignes de code… Affichons « Hello World » !

<?php
echo 'Hello World';
?>

Dans la suite des cours, nous verrons comment utiliser le langage PHP en programmation

Categories
Apprentissage Database Découverte Formation SQL Web

Base de données avec mySQL

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 ?

Logo SQL - 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 !!! 😉

Categories
Apprentissage CSS Découverte Formation HTML Javascript Web

Les bibliothèques logicielles

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 ! 🙂

Categories
Apprentissage Formation HTML Javascript Web

La manipulation du DOM

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… 🙂