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 CSS Formation Framework HTML Web

Bootstrap

Qu’est ce que c’est ?

Logo Bootstrap

Bootstrap est un Framework CSS.
Les frameworks sont des règles préétablies dans lesquelles on peut venir piocher. Ils permettent de simplifier la reprise du code par quelqu’un d’autre et de gagner du temps.

La base

Bootstrap est basé sur un principe de grilles.
On ne réfléchit plus en termes d’espacement, mais de colonnes de la grille à utiliser.
Bootstrap est basé sur 12 colonnes (car il y a de nombreux multiples possibles). Et entre les colonnes, il y a ce qu’on appelle des gouttières (ce sont les espacements entre les colonnes).

Par exemple, pour placer un élément sur toute la largeur de la page, on lui dit d’occuper 12 colonnes. Pour en placer 2, il faudra indiquer à chaque élément d’occuper 6 colonnes (ou en fonction de la disposition, par exemple 25% /75% deviendront 4 colonnes / 8 colonnes).

Les composants

Dans Bootstrap, il y a des composants : ce sont des outils CSS et JavaScript qui permettent d’ajouter directement dans la page de petits éléments (barres de recherche, pop up stylisé, etc.) déjà fonctionnels. L’inconvénient, c’est qu’on se retrouve rapidement avec les mêmes composants de partout (tous les sites se ressemblent alors !)
Il faut donc modifier le CSS pour styliser chaque élément à sa façon.

L’installation

Bootstrap est un fichier de style à charger.
Le téléchargement peut se faire sur le site de Bootstrap puis [Download].

Une autre méthode, plus simple, permet de ne pas télécharger Bootstrap (et donc d’alléger la page !) : ajouter directement au fichier HTML un lien vers le fichier Boostrap.
Toujours sur le site de Bootstrap, cliquez sur [Get Started] puis dans la section [Quick Start], récupérez le lien CSS à mettre dans le head du fichier HTML :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Il faut bien mettre ce lien avant celui de notre propre fichier de style CSS. En effet, nos règles CSS sont déclarées en dernier, elles seront donc prioritaires. Ce qui permettra de contrer celles de Bootstrap.

Comment fonctionne Bootstrap ?

Bootstrap permet de faire de la mise en page directement dans le fichier HTML (et avec très peu de règles CSS à ajouter).

Il y a des class prédéfinies que l’on peut ajouter au HTML. Elles permettent d’intégrer automatiquement des fonctionnalités aux balises ciblées.
On rajoute donc des class seulement s’il y a des modifications a apporter sur la balise.
La règle de nommage des class est : .nomdelaregle-taille-valeur

Bon à savoir : par défaut, tous les éléments Bootstrap ont des padding de 15px (les gouttières sont alors de 30px).

Breakpoints

Bootstrap intègre des breakpoints, permettant de rendre la page responsive automatiquement :
xs ou xtrasmall (< 576px) : .col-
Attention, cela correspond au mobile-first. Il sera donc la valeur par défaut (depuis la version 4 de Bootstrap)
sm ou small (>=576px) : .col-sm-
md ou medium (>=768px) : .col-md-
lg ou large (>=992px) : .col-lg-
xl ou xtralarge (>=1200px) : .col-xl-

Containers

Bootstrap est composé de deux containers généraux :
container fluid qui occupe toute la page

<div class="container-fluid"> </div>

container qui occupe la page avec un maximum de 1170px

<div class="container"> </div>

On utilise ensuite la notation des colonnes sur des éléments suivants.

Flex

Bootstrap est basé sur du flex. Il ne faut donc pas oublier de donner comme règle aux parents la class row (fait devenir flex sans prendre en compte l’espacement des cotés).
L’architecture des balises sera alors :
– grand parent => container
– parent => row
– enfant => col
Attention : il ne faut pas d’enfant row après un parent row.

Comme Bootstrap applique le style flex à la page, les class permettent d’appliquer toutes les règles du flex (elles sont toutes listées sur le site Bootstrap)

Alignement horizontal
justify-content-start
justify-content-center
justify-content-end

Le nomage se fait de la façon suivante :
.{propriété}-{breackpoint}-{valeur}
Par exemple :

<div class="row justify-content-start justify-content-lg-center"> </div>
Alignement vertical
 align-items-start
 align-items-center
 align-items-end

Par exemple :

<div class="row align-items-start align-items-lg-center"> </div>
Ordre les éléments
 order-2
 order-md-1

Ce qui permet de changer d’ordre et de le faire aussi en fonction de la taille de l’écran.

Saut de colonne

offset-nb : permet de placer un nombre (nb) de colonnes vides avant mon élément
offset-taille-nb : idem, en fonction de la taille de l’écran

Cela permet de faciliter la mise en page, car les calculs d’espacement se font tout seuls. cet outil gère automatiquement les espaces que doit avoir chaque élément et l’espace entre eux.

Remplacement du visible

C’est l’équivalent du display. il est noté d.

d-none : l’élément est caché
d-block : il est affiché

L’élément peut s’afficher ou se cacher en fonction de la taille de l’écran : d-lg-none ou d-lg-block

Espacement (padding / margin)

Le nommage se fait de la façon suivante :
.{propriété}{coté}-{breackpoint}-{taille}

Par exemple :

<div class="pr-md-0"> </div>

– propriété :
m margin
p padding

– coté :
a toutes les directions
t en haut
r à droite
l à gauche
b en bas
x horizontal (gauche et droite)
y vertical (haut et bas)

– breakpoint (cf. plus haut)
(rien) à partir de la taille mobile
sm
md
lg
xl

– taille
0
1 (0.25rem)
2 (0.5rem)
3 (1rem)
4 (1.5rem)
5 (3rem)

A savoir : il y a un gros gap entre 4 et 5. Il est donc possible de rajouter des règles CSS.
Pour rappel : l’unité de mesure rem est fonction de la taille du body.


Règles générales

Sans écrire une seule règle de CSS, on a déjà une mise en page en blocs avec des tailles différentes, etc.

Toutes les règles de mise en forme sont sur le site de Bootstrap.


Divers

Il est possible de modifier graphiquement les titres.
Il existe des classes qui permettent qu’un titre ressemble à un autre titre :

<h1 class="h2"> titre h1 qui ressemble à des h2 </h1>
<h2 class="h4"> titre h2 qui ressemble à des h4 </h2>