Aller au contenu

Ajouter un film

On veut ajouter un bouton qui redirige vers un formulaire d'ajout de films. Tu peux tester en cliquant sur Nouveau film sur le site !


Création du composant

À toi de jouer ! 👾 Utilise Angular CLI via ton terminal

La commande est la même que celle utilisée pour générer le HomeComponent; il faut juste lui donner le nom add-movie pour que le composant généré s'appelle AddMovieComponent. Il faudrait qu'il se trouve dans le dossier existant movies.


Nouvelle page = nouvelle route

On veut ajouter une route à celles existantes : /add-movie pour afficher le AddMovieComponent.

À toi de jouer ! 👾 Ajoute une Route dans la constante route de app.routes.ts


Le bouton

Pour ajouter un bouton dans movies.component.html, on utilise la balise <button></button> et on écrit entre les balises ce qu'on veut afficher dans le bouton : Nouveau film.
Normalement, il ne sera pas très beau.

Documentation

Tu as la doc pour voir comment customiser ton bouton avec Bootstrap.

Mais surtout, il ne se passe rien si je clique dessus ! 😬

Tip

Comme pour la balise <a></a> du NavbarComponent, on utilise le routerLink.

C'est tout bon ! Cliquer sur Nouveau film me redirige bien !


Implémentation du AddMovieComponent

Les formulaires

Tout d'abord, on ajoute notre titre entre des balises <h1></h1>.
Ensuite, on a 4 champs de formulaire composés d'un <label> et d'un <input>.

On crée une variable movie de type Movie avec ces 4 champs initialisés dans le add-movie.component.ts, les autres champs sont mis à undefined :

movie: Movie = {
    title: '',
    director: '',
    releaseDate: new Date(),
    synopsis: '',
    id: undefined,
    rate: undefined, 
    image: undefined
}
On te montre quoi ajouter pour le premier champ titre dans add-movie.component.html et on te laisse faire les autres :
<div class="d-flex flex-column w-50">
    <label for="title">Titre</label>
    <input type="text" id="title" name="title" [(ngModel)]="movie.title"/>
</div>

Info

Pour utiliser ngModel, il faut importer FormsModule.
Les propriétés for et id servent à lier le label et l'input en HTML.
Le type permet de savoir quoi rentrer dans l'input, ici ce sera du texte.
Il existe un type date dans la balise input si besoin.


Le bouton de soumission du formulaire

Maintenant, il faut recréer un bouton pour faire la soumission du formulaire.
Tu peux t'inspirer de celui déjà crée tout à l'heure.
Attention, celui-ci n'a pas le même comportement ! On n'a pas besoin de la partie routerLink et on veut une fonction au clic sur le bouton.

 <button class="btn btn-warning" (click)=addMovie()>Ajouter</button>

Info

(click) permet de détecter qu'à chaque fois qu'on clique sur le bouton addMovie() c'est une fonction du TS qui est appelée à chaque clic.

Il faut alors définir la fonction addMovie, sinon notre code ne compilera pas. On veut que la méthode fasse un appel POST au back en lui donnant le nouveau film à ajouter. On doit donc passer par le MoviesService. Au retour du back, on navigue vers la page précédente si l'ajout s'est bien effectué.

 addMovie(): void {
    this.moviesService.addMovie(this.movie).subscribe(
        () => this.router.navigate(['/movies'])
    );
 }

Tip

Si tu ne te souviens pas comment injecter ton moviesService, tu peux regarder dans home.component.ts comment on l'avait fait.

Mais... Ça ne compile pas... Car dans notre MoviesService il n'y a pas de méthode addMovie ! Hop, on la crée :

addMovie(movie: Movie): Observable<Movie> {
    return this.httpClient.post<Movie>(this.url, movie);
}

Et voilaaaaa ton AddMovieComponent est terminé !

🙋‍♀️ Checkpoint time 🙋‍

Appelle-nous pour qu'on valide cette partie !!️