Semaine 10 - Les Forms et httpclient

Télécharger : 7 - Théorie Semaine 10 (Écoutez l'utilisateur avec les Forms - méthode template).docx

7 – Améliorez, Écoutez l'utilisateur avec les Forms (méthode template)

Jusqu'ici, dans ce cours, vous avez appris à créer une application dynamique qui permet d'échanger des informations entre components à l'aide des services et des Observables, qui change l'affichage selon le routing et qui réagit à certains événements provenant de l'utilisateur, comme des clics sur un bouton, par exemple.  Cependant, pour l'instant, toutes les données que vous avez utilisées ont été codées "en dur" dans l'application, c'est-à-dire fournies ni par l'utilisateur, ni par un serveur.  Dans les chapitres suivants, vous allez apprendre à interagir avec l'utilisateur et avec les serveurs afin de créer une application totalement dynamique.

En Angular, il y a deux grandes méthodes pour créer des formulaires :

N'oubliez pas d'importer FormsModule dans AppModule les components ou vous en avez besoin, si ce n'est pas déjà fait !

Dans la suite de ce chapitre nous allons découvrir la méthode template.

Partie 7 (Voitures11)

1.       Créez un formulaire

Pour comprendre et pratiquer cette méthode, vous allez créer un nouveau component EditVoitureComponent qui permettra à l'utilisateur d'enregistrer une nouvelle voiture :

sudo ng g c EditVoiture

dans edit-voiture.component.html

<div class="row">

    <div class="col-sm-8 col-sm-offset-2">

        <form (ngSubmit)="onSubmit(f)" #f="ngForm">

        <div class="form-group">

          <label for="name">

            Nom de la voiture

          </label>

       <input type="text" id="name" class="form-control" name="name" ngModel required>

        </div>

        <div class="form-group">

          <label for="status">

            Disponibilité de la voiture

          </label>

          <select id="status" class="form-control" name="status">

            <option value="Disponible">Disponible</option>

            <option value="Non disponible">Non disponible</option>

          </select>

        </div>

        <button class="btn btn-primary" type="submit" [disabled]="f.invalid">Enregistrer</button>

      </form>

    </div>

  </div>

Angular parcourt votre template et trouve la balise  <form> , créant ainsi un objet qui sera utilisable depuis votre code TypeScript.  Avant de passer à la soumission du formulaire, il faut signaler à Angular quels inputs correspondront à des controls , c'est-à-dire des champs dont le contenu est à soumettre.  Pour cela, il suffit d'ajouter deux attributs aux inputs en question : un attribut name, qui correspondra à la clef de la paire clef-valeur qui sera rendu, et l'attribut  ngModel , sans parenthèses ni crochets.  Ce deuxième attribut signale à Angular que vous souhaitez enregistrer ce contrôle :

Il faut maintenant préparer la gestion de la soumission de ce formulaire.  Dans votre template (.html), au lieu d'ajouter un événement sur le bouton, vous allez déclarer le bouton de type submit , et remarquer le code suivant dans la balise  <form>  :

<form (ngSubmit)="onSubmit(f)" #f="ngForm">

……

…….

<button class="btn btn-primary" type="submit" [disabled]="f.invalid">Enregistrer</button>

Déclarer le bouton de type submit à l'intérieur du  <form>  déclenche le comportement de soumission classique de HTML.  En ajoutant l'attribut  (ngSubmit) , vous recevez cette soumission et exécutez la méthode  onSubmit()  (que vous n'avez pas encore créée).

L'attribut  #f  est ce qu'on appelle une référence locale.  Vous donnez simplement un nom à l'objet sur lequel vous ajoutez cet attribut ; ce nom sera ensuite utilisable par Angular.  C'est d'ailleurs le cas ici : on appelle le formulaire  f  pour ensuite le passer comme argument à la méthode de soumission.

De manière générale, on ne donne pas de valeur à une référence locale : on écrit simplement  #f  ou  #my-name . Dans ce cas précis d'un formulaire en méthode template, on y attribue la valeur  ngForm  pour avoir accès à l'objet créé par Angular.

Pour récapituler : quand l'utilisateur clique sur le bouton de type submit, la méthode que vous attribuez à  (ngSubmit)  est exécutée, et grâce à la référence locale  #f="ngForm" , vous pouvez passer l'objet à la méthode (et donc la récupérer dans votre code TypeScript).

Créez maintenant la méthode  onSubmit()  afin de recevoir les informations venant du formulaire.  Pour l'instant, vous allez simplement les afficher dans la console :

Dans edit-voiture.component.ts

NgForm comporte beaucoup de propriétés très intéressantes ; je n'en expliquerai que certaines dans ce cours, mais vous pouvez en trouver la liste complète dans la documentation officielle.

Pour avoir accès au formulaire, créez une nouvelle route dans AppModule  app.routes.ts et un  routerLink  correspondant dans la barre de menu :

import { Routes } from '@angular/router';

import { Auth } from './auth/auth';

import { VoitureView } from './voiture-view/voiture-view';

import { SingleVoiture } from './single-voiture/single-voiture';

import { EditVoiture } from './edit-voiture/edit-voiture';

export const routes: Routes = [

    { path: 'auth', component: Auth },

    { path: 'voitures',component: VoitureView },

    { path: 'voitures/:id', component: SingleVoiture },

    { path: 'edit', component: EditVoiture }, 

    { path: '', component: Auth},

    { path: '**', component: Auth },

];

app.component.html

          <ul class="navbar-nav">

            <li class="nav-item active">

              <a class="nav-link" routerLinkActive="active" routerLink="voitures">Voitures</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" routerLinkActive="active" routerLink="auth">Authentification</a>

            </li>

            <li class="nav-item">

            <a class="nav-link" routerLinkActive="active" routerLink="edit">Nouvelle voiture</a>

          </li>

            <li class="nav-item">

              <a class="nav-link disabled" routerLinkActive="active" href="#">Disabled</a>

            </li> 

          </ul>

Naviguez vers cette nouvelle page.  Si vous tapez "Lada" comme nom, choisissez "Disponible" et vous cliquez sur "Enregistrer", dans la console vous avez :

Ça y est, vous avez accès aux informations du formulaire !  Avant de les traiter et de créer une nouvelle voiture, vous allez d'abord ajouter une validation du formulaire, afin que l'utilisateur ne puisse pas le soumettre sans rentrer des données valables.

--> 14:55

2.       Validez les données

Pour le formulaire de cette application, on peut dire que le nom de la voiture est un champ obligatoire.  Pour ajouter cette obligation, ajoutez simplement la directive suivante :

<input type="text" id="name" class="form-control" name="name" ngModel required>

Cet attribut ressemble à un attribut HTML5 classique, mais sachez qu'Angular désactive par défaut le comportement de validation HTML5.

Le champ est obligatoire, mais le formulaire peut encore être soumis, car vous n'avez pas encore intégré l'état de validation du formulaire.  Pour accomplir cela, vous allez lier la propriété disabled du bouton à la propriété invalid du formulaire, qui est mise à disposition par Angular :

<button class="btn btn-primary" type="submit" [disabled]="f.invalid">Enregistrer</button>

Vous employez la référence locale  f  pour avoir accès à l'objet  NgForm , et donc à sa propriété  invalid , désactivant le bouton si elle retourne  true .

Il serait intéressant de déclarer la voiture "Non disponible" par défaut afin de ne pas laisser ce champ vide.  Pour déclarer une réponse par défaut, vous allez créer une variable TypeScript et la lier à la propriété ngModel du contrôle :

edit-voiture.ts à

export class EditVoiture {

  defaultOnOff = 'Non disponible';

dans edit-voiture.html à

            <select id="status" class="form-control" name="status" [ngModel]="defaultOnOff">

                <option value="Disponible">Disponible</option>

                <option value="Non disponible">Non disponible</option>

            </select>

Ainsi, le formulaire ne pourra être soumis que si le champ "Nom de la voiture" n'est pas vide, et l'option choisie par défaut empêche le deuxième champ d'être vide également.

Il ne reste plus qu'à exploiter ces données et en créer une nouvelle voiture!

2.       Exploitez les données

Dans la méthode onSubmit() , vous allez récupérer les données et les attribuer à deux constantes pour les envoyer à  VoitureService  :

Dans edit-voiture.component.ts

onSubmit(form: NgForm) {

    const name = form.value['name'];

    const status = form.value['status']

}

Puisque vous savez que le formulaire comportera forcément un champ name et un champ status, vous savez que vous pouvez utiliser cette syntaxe sans problème.

Créez maintenant la méthode dans VoituresService qui générera une nouvelle voiture :

  addVoiture(name: string, status: string) {

        const voitureObject = {

          id: 0,

          name: '',

          status: ''

        };

        voitureObject.name = name;

        voitureObject.status = status;

        voitureObject.id = this.voitures[(this.voitures.length - 1)].id + 1;

        this.voitures.push(voitureObject); 

  }

Cette méthode crée un objet du bon format, et attribue le nom et le statut qui lui sont passés comme arguments.  La ligne pour l'id prend l'id du dernier élément actuel de l'array et ajoute 1.  Ensuite, l'objet complété est ajouté à l'array et le Subject est déclenché pour tout garder à jour.

import { Component } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { NgForm } from '@angular/forms';

import { ServiceVoiture } from '../services/service-voiture';

import { ActivatedRoute, Router } from '@angular/router';

@Component({

  selector: 'app-edit-voiture',

  imports: [FormsModule],

  templateUrl: './edit-voiture.html',

  styleUrl: './edit-voiture.scss',

})

export class EditVoiture {

  defaultOnOff = 'Non disponible';

constructor(private voitureService: ServiceVoiture, private route: ActivatedRoute, private router2: Router) { }

onSubmit(form: NgForm) {

    const name = form.value['name'];

    const status = form.value['status'];

    this.voitureService.addVoiture(name, status);

    this.router2.navigate(['/voitures']);

}

}

Et voilà !  Maintenant, grâce à un formulaire simple géré par la méthode template, l'utilisateur peut créer une nouvelle voiture pour la liste.

-->23:00

Réf. : https://openclassrooms.com/fr/courses/4668271-developpez-des-applications-web-avec-angular/5089516-ecoutez-lutilisateur-avec-les-forms-methode-template

Télécharger : 8- Théorie Semaine 10 (Interagissez avec un serveur et HttpClient).docx

8 - Interagissez avec un serveur et HttpClient

(php et JSON)

Partie 8 (Voitures12)

1.       Introduction

a)     Dans une application Angular, vous aurez très souvent besoin de faire des appels à un backend ou à un autre serveur — pour enregistrer ou charger des données, par exemple, ou pour effectuer des calculs ou des modifications de données que vous ne souhaitez pas faire faire par le frontend.  Angular met à disposition un service appelé  HttpClient  qui permet de créer et d'exécuter des appels HTTP (fait par AJAX - Asynchronous JavaScript and XML) et de réagir aux informations retournées par le serveur.

b)     Dans ce chapitre, vous allez utiliser un serveur Apache et une base de données MySql.

2.   Préparez le Backend

Pré requis: Avoir un serveur Apache, programmer en php, et avoir une base de données MySql. L'implentation a été réaliser dans les premières    semaines de ce cours.

Note:         La plupart des exemples sur le Web utilise le service Firebase de Google. Ce service permet la création d'un backend complet sans coder, et node comprend énormément de services, dont l'authentification, une base de données NoSQL et un stockage de fichiers.

a)       Tout d'abord créer un dossier "backend" dans votre dossier angular situé à la racine de votre serveur web Apache.

b)       Créer dans ce dossier les fichiers .php qui serviront à la communication entre le "frontend" angular et le "backend" Apache et sa base de données MySql.

Télécharger : backend.zip

connecter_angular.php

afficher_angular.php 

<?php
/**
 * Renvoie la liste des voitures
 */
require 'connecter_angular.php';

$voit = [];
$sql = "SELECT id, nom, statut FROM voiture_sport";
$final = '[';
if($result = mysqli_query($con,$sql))
{
  $cr = 0;
  while($row = mysqli_fetch_assoc($result))
  {
      if ($cr > 0){
        $final .= ',';    
      }
    $voit[$cr]['id']    = $row['id'];
    $voit[$cr]['nom'] = $row['nom'];
    $voit[$cr]['statut'] = $row['statut'];
    $cr++;

    //Contruire la chaine de donnees au format accepter par Angular !!!
    $final .= '{"id":'.$row['id'].',"name":"'.$row['nom'].'","status":"'.$row['statut'].'"}';
  }
  $final .= ']'; 

  echo $final; //Envoie a Angular Frontend
  //echo json_encode(['data'=>$tuto]);
}
else
{
  http_response_code(404);
}
?>

Inserer_angular66.php

<?php
require 'connecter_angular.php';
$query = null;
$table_data = null;
// Obtenez les données publiées
$postdata = file_get_contents("php://input");

// Extraire les données. 
$array = json_decode($postdata, true);
//Supprimer les données
$sql66 = "DELETE FROM  voiture_sport WHERE id > 0;";      
$result = mysqli_query($con,$sql66);

          foreach($array as $row) //Extract the Array Values by using Foreach Loop
          {
           $query .= "INSERT INTO `voiture_sport` (`id`, `nom`, `statut`) VALUES (NULL, '".$row["name"]."', '".$row["status"]."'); ";  // Make Multiple Insert Query 
           $table_data .= '
            <tr>
       <td>'.$row["id"].'</td>
       <td>'.$row["name"].'</td>
       <td>'.$row["status"].'</td>
      </tr>'; //Data for display on Web page
          }
          if(mysqli_multi_query($con, $query)) //Run Mutliple Insert Query
          {
            http_response_code(204);
          }
          else
          {
            return http_response_code(422);
          } 
?> 

c)     Créer ensuite une Base de données dans MySql (phpMyAdmin ou terminal).

Dans mon cas,

BD = voiture                      Table = voiture_sport

3.   Envoyez vers le Backend

Pour avoir accès au service HttpClient , il faut tout d'abord ajouter  le module HttpClient , importé depuis  @angular/common/http , à votre  app.component.ts :  

import { Component} from '@angular/core';

import { CommonModule } from '@angular/common';

import { RouterModule } from '@angular/router';

import { ServiceAuth } from './services/service-auth'

import { HttpClient } from '@angular/common/http';

@Component({

  selector: 'app-root',

  imports: [CommonModule, RouterModule],

  templateUrl: './app.html',

  styleUrl: './app.scss'

})

export class App {

  title = 'Voitures12 de rêve de Mers 2026';

  constructor(private service: ServiceAuth, private http:HttpClient){

  }

}

Ensuite…Préparer l'utilisation du HttpClient pour Angular :

à  app.config.ts :

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {

  providers: [

    provideBrowserGlobalErrorListeners(),

    provideRouter(routes), provideClientHydration(withEventReplay()),[provideHttpClient(withFetch())]

  ]

};

Vous allez utiliser HttpClient , dans un premier temps, pour la gestion des données de la liste de voitures.  Vous allez donc l'injecter dans service-voiture.ts, en y ayant auparavant ajouté le décorateur  @Injectable()  (importé depuis  @angular/core  ) :

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Subject } from 'rxjs';

import { Router } from '@angular/router';

  voituresSubject = new Subject<any[]>();

  public urlPhp : string = "http://localhost/angular/Voitures12/backend/inserer_angular66.php";

  voitures = [

    {

      id: 1,

      name: 'Bugatti',

      status: 'Non disponible'

    },

…

constructor(private router: Router, private http: HttpClient) { }

…

service-voiture.service.ts à

…

public urlPhp : string = "http://localhost/angular/Voitures12/backend/inserer_angular66.php";

…

Et ajouter …

saveVoituresToServer() {

        const body = this.voitures;

        return this.http.post(this.urlPhp,body);

}

Analysez cette méthode :

Créez maintenant un bouton dans VoitureViewComponent (.html) qui déclenche cette sauvegarde (en passant, si vous ne l'avez pas encore fait, vous pouvez retirer l'activation conditionnelle des boutons "Tout allumer" et "Tout éteindre")  ou pas !:

      <button class="btn btn-success"

      [disabled]="!isAuth"

      (click)="onAllumer()">Tous disponible</button>

      <button class="btn btn-danger"

      [disabled]="!isAuth"

      (click)="onFermer()">Tous Non disponible</button>

      <button class="btn btn-primary"

      (click)="onSave()">Enregistrer les voitures</button>

      <br>

En suite dans voiture-view.component.ts :

onSave() {

    this.service.saveVoituresToServer()

    .subscribe(response => {

      this.voitures = response; 

    });;

  }

Enregistrez le tout, et cliquez sur le bouton que vous venez de créer : vous devez avoir votre message de réussite qui apparait dans la console.  Si vous regardez maintenant la BD MysSql:

service-voiture.service.ts à

…

public urlPhp : string = "http://localhost/angular/Voitures12/backend/inserer_angular66.php";

…

Et ajouter …

Maintenant, quand vous enregistrez les données, votre MySql montre les bons enregistrements car notre fichier php efface la BD avant d'y insérer les nouveaux.

Ainsi, vous savez envoyer des données vers un serveur avec les méthodes POST et PUT.  Pour la suite, vous allez intégrer la requête GET pour récupérer et traiter des données depuis le serveur.

Aide :

Pour voir ou comprendre les erreurs, voir l'onglet réseau de l'inspecteur (F12) ou (Ctrl+Maj+i)

--> 45:43

2.   Recevez depuis le Backend

Afin de demander la liste des voitures (maintenant stocké dans MySql ), vous allez créer une nouvelle méthode qui emploie la méthode  get()  dans  ServiceVoitureService  :

Et une méthode emitVoitureSubject

    …

export class ServiceVoiture {

  voituresSubject = new Subject<any[]>();

  public urlPhp : string = "http://localhost/angular/Voitures12/backend/inserer_angular66.php";

  public urlPhpGet : string = "http://localhost/angular/Voitures12/backend/afficher_angular.php";

  voitures = [

…

    getVoituresFromServer() {

      return this.http.get(this.urlPhpGet);

    }

…

Comme pour post()  et  put() , la méthode get() retourne un Observable, mais puisqu'ici, vous allez recevoir des données, TypeScript a besoin de savoir de quel type elles seront (l'objet retourné est d'office considéré comme étant un Object).  Vous devez donc, dans ce cas précis, ajouter écraser l'objet de votre service par le nouvel objet reçu.

: si vous ne le faites pas, TypeScript vous dira qu'un array ne peut pas être redéfini comme Object.

Vous pouvez maintenant vider l'array voitures du service et intégrer un bouton au component permettant de déclencher la méthode getVoitureFromServer()  :

Avant dans voiture-view.component.html:

      (click)="onAllumer()">Tous disponible</button>

      <button class="btn btn-danger"

      [disabled]="!isAuth"

      (click)="onFermer()">Tous Non disponible</button>

      <button class="btn btn-primary"

      (click)="onSave()">Enregistrer les voitures</button>

        <br>

        <button class="btn btn-primary"

        (click)="onFetch()">Récupérer les voitures</button>

En suite dans voiture-view.component.ts, ajouter la nouvelle fonction onFetch (ou le nom de votre choix:

  onFetch() {

    this.service.getVoituresFromServer()

    .subscribe(response => {

      this.voitures = response;

    });;

  }

Maintenant, vous pouvez ajouter de nouvelles voitures, en modifier l'état et les sauvegarder, puis récupérer la liste sauvegardée. Tester.

Problème &?4?%&$!

(En navigant d'un onglet à l'autre, le contenue n'est pas le bon)

Il faut envoyer l'objet reçu dans le tableau du service.

Ajouter dans voiture-view.component.ts

  onFetch() {

    this.service.getVoituresFromServer()

    .subscribe(response => {

      this.voitures = response;

      this.service.voitures = this.voitures;

    });;

  }

Il serait également possible de rendre automatique le chargement et l'enregistrement des voitures (par exemple en appelant la méthode getVoitureFromServer()  dans  ngOnInit() , et  saveVoituresToServer()  après chaque modification), mais j'ai souhaité vous laisser la possibilité de les exécuter manuellement afin de voir le résultat de manière plus concrète.

Dans ce chapitre, vous avez appris à passer des appels à un serveur HTTP avec le service HttpClient .  Vous avez utilisé un backend Apache et BD MySql pour cette démonstration : en effet, Firebase propose une API beaucoup plus flexible que des appels HTTP simples afin de profiter pleinement des services proposés.

BONUS: Problème de rechargement après avoir chargé ou enregistré les voitures ?!?!

Solution à la "Mers" … un peu douteux mais bon !

Premièrement dans app.routes.ts

Ensuite….

this.router.navigate(['mon']);

plus … n'oubliez pas …

import { Router } from '@angular/router';

et

constructor(private cdr: ChangeDetectorRef, private service:ServiceVoiture, private router: Router) {

Dans le component inutilisé ou nouveau, à vous de voir …

(Dans mon cas, j'ai utiliser "mon-premier")

Insérer simplement un gif animé pur faire patienté l'utilisateur et donner l'impression qu'un enregistrement ou un téléchargement à lieu…

<img src="http://localhost/angular/Voitures12/images/attente.gif">

Ajouter une attente de 2 secondes ??? et un gif animé de votre choix !!!

Dans le "constructor" de votre component qui affiche le gif :

    setTimeout(

          () => {

                  this.router.navigate(['voitures']);

                  this.cdr.detectChanges();

          }, 2000

    );

Réf. : https://openclassrooms.com/fr/courses/4668271-developpez-des-applications-web-avec-angular/5091141-interagissez-avec-un-serveur-avec-httpclient

https://www.itsolutionstuff.com/post/angular-17-httpclient-http-services-tutorialexample.html

https://jasonwatmore.com/post/2020/10/07/angular-http-put-request-examples