diff --git a/resources/docs/docs/gestion-film/create-film.md b/resources/docs/docs/gestion-film/create-film.md index 71b420c115c774a490cc7c17a661f47741c8b9f9..dc6be3552fd57a7e47c0db16ed63e606e5d04526 100644 --- a/resources/docs/docs/gestion-film/create-film.md +++ b/resources/docs/docs/gestion-film/create-film.md @@ -6,7 +6,7 @@ Tu peux tester en cliquant sur *Nouveau film* sur [le site](https://allocine.tak ## 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`. +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 @@ -16,7 +16,7 @@ On veut ajouter une route à celles existantes : */add-movie* pour afficher le ` ## Le bouton -Pour ajouter un bouton, on utilise la balise `<button></button>` et on écrit entre les balises ce qu'on veut afficher dans le bouton : *Nouveau film*. +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. > Tu as la [doc](https://getbootstrap.com/docs/5.0/components/buttons/) pour voir comment customiser ton bouton avec Bootstrap. @@ -33,31 +33,34 @@ Mais surtout, il ne se passe rien si je clique dessus ! 😬 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 à `null` : +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` : ```ts -movie = { - title = ''; - director = ''; - releaseDate = new Date(); - synopsis = ''; - id: null, - rate: null, - image: null +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 : ```html -<div class="d-flex flex-column"> +<div class="d-flex flex-column w-50"> <label for="title">Titre</label> - <input type="text" id="title" [(ngModel)]="title"/> + <input type="text" id="title" [(ngModel)]="movie.title"/> </div> ``` +>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` +>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. @@ -70,21 +73,23 @@ Attention, celui-ci n'a pas le même comportement ! On n'a pas besoin de la part > `(click)` permet de détecter à chaque fois qu'on clique sur le bouton >`addMovie()` 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 `MovieService`. +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é. ```ts addMovie(): void { - this.movieService.addMovie(this.movie).subscribe( + this.moviesService.addMovie(this.movie).subscribe( () => this.router.navigate(['/movies']) ); } ``` -Mais... Ça ne compile pas... Car dans notre `MovieService` il n'y a pas de méthode addMovie ! Hop, on la crée : +>Si tu ne te souviens 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 : ```ts addMovie(movie: Movie): Observable<Movie> { - return this.httpClient.post<Movie>(movie); + return this.httpClient.post<Movie>(this.url, movie); } ``` diff --git a/resources/docs/docs/gestion-film/implem-component.md b/resources/docs/docs/gestion-film/implem-component.md index f4f5bbf4b36d6156c12b72572a05c28f2c554b0c..2915ecef1e918188f382afadd5cb6b6946c6912f 100644 --- a/resources/docs/docs/gestion-film/implem-component.md +++ b/resources/docs/docs/gestion-film/implem-component.md @@ -26,7 +26,7 @@ Dans le tableau, il te faut 6 colonnes (oui, on oublie la dernière avec les act ## Aide -❗Tu dois créer un service qui te permet d'appeler ton backend pour récupérer tous tes films : `MovieService`. +❗Tu dois utiliser ton `MoviesService` pour aller chercher les données. ❗Grâce à Bootstrap, la création du tableau est super simple ! Regarde la [documentation de Table](https://getbootstrap.com/docs/5.0/content/tables/){:target="\_blank"}. ❗Pense à bien formater la **date**. diff --git a/resources/docs/docs/gestion-film/navigation.md b/resources/docs/docs/gestion-film/navigation.md index b689ce08c8f9e1212c2241935dbc109cc31d9509..cfe022b54fdf40458352bffe6fbd8eb00ffcf555 100644 --- a/resources/docs/docs/gestion-film/navigation.md +++ b/resources/docs/docs/gestion-film/navigation.md @@ -53,7 +53,7 @@ export const appConfig: ApplicationConfig = { > On voit que l'import de `routes` est bien présent, que le fichier provide le `Router` d'Angular (avec `provideRouter`) et qu'on lui passe bien les routes en paramètres. Parfait ! ⭐ -Pour savoir si ce que l'on a fait fonctionne : rajoute */review* dans ton url après ton locahost (`http://localhost:4200/review`). Tu dois voir le contenu HTML de `ReviewComponent` : `<p>review works!</p>`. +Pour savoir si ce que l'on a fait fonctionne : rajoute */movies* dans ton url après ton localhost (`http://localhost:4200/movies`). Tu dois voir le contenu HTML de `MoviesComponent` : `<p>movies works!</p>`. ***C'est booon, les routes fonctionnent !!*** ⭐ @@ -67,7 +67,7 @@ Dans notre `NavbarComponent`, on peut ajouter un onglet *Gestion de films*. <nav class="navbar navbar-light navbar-expand bg-light ps-5"> <a class="navbar-brand">{{ title | titlecase }}</a> <a class="nav-item nav-link" href="#">Accueil</a> - <a class="nav-item nav-link" href="#">Gestion de films</a> + <a class="nav-item nav-link ms-3" href="#">Gestion de films</a> </nav> ``` @@ -77,7 +77,7 @@ On a donc 2 onglets : **Accueil** et **Gestion de films**. Ce sont des balises ` En Angular, nous n'utilisons pas `href` mais la directive `routerLink`. -À toi de jouer ! Remplace les `href` par des `routerLink` +À toi de jouer ! Remplace les `href` par des `routerLink` et importe `RouterLink`. ❗La valeur du routerLink doit correspondre aux **paths** indiqués dans les `Routes` > Le chemin du `MoviesComponent` est défini à 'review' dans le fichier `app.route.ts`. > Par contre, dans la directive routerLink, il faut le spécifier comme "/movies" (avec le /). @@ -88,7 +88,7 @@ Tu dois donc avoir : <nav class="navbar navbar-light navbar-expand bg-light ps-5"> <a class="navbar-brand">{{ title | titlecase }}</a> <a class="nav-item nav-link" routerLink="/">Accueil</a> - <a class="nav-item nav-link" routerLink="/movies">Gestion de films</a> + <a class="nav-item nav-link ms-3" routerLink="/movies">Gestion de films</a> </nav> ``` diff --git a/resources/docs/docs/premiere-page/home.md b/resources/docs/docs/premiere-page/home.md index 2fa5ed719bc1ad4207a28d9bac816e1cdb206a54..c8ade37e0b1eef9c2d382a02cf5d62cd2945b0ab 100644 --- a/resources/docs/docs/premiere-page/home.md +++ b/resources/docs/docs/premiere-page/home.md @@ -52,13 +52,13 @@ C'est parti : ```ts export interface Movie { - id: number; + id?: number; title: string; releaseDate: Date; director: string; - rate: number; + rate?: number; synopsis: string; - image: string; + image?: string; } ```