Pour développer cette application de gestion de collections, vous pouvez suivre les étapes suivantes :
- Créez un nouveau projet Symfony pour le backend en exécutant la commande suivante :
bashcomposer create-project symfony/skeleton backend
- Créez un nouveau projet Angular pour le frontend en exécutant la commande suivante :
arduinong new frontend
- Configurez SQLite pour votre projet Symfony en modifiant le fichier
.envdans le répertoirebackend. Changez la valeur de la variableDATABASE_URLpour utiliser SQLite :
makefileDATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
- Créez une entité pour représenter les éléments de la collection dans le backend :
bashcd backend
php bin/console make:entity CollectionItem
Ajoutez les propriétés nécessaires à l'entité (par exemple : nom, description, image, etc.).
- Générez les migrations pour créer la table correspondante dans la base de données :
bashphp bin/console make:migration php bin/console doctrine:migrations:migrate
- Créez un contrôleur API pour gérer les opérations CRUD (Create, Read, Update, Delete) des éléments de la collection :
bashphp bin/console make:controller Api/CollectionItemController
Ajoutez les méthodes nécessaires pour gérer les opérations CRUD et utilisez les annotations pour définir les routes.
- Installez et configurez le bundle
ApiPlatformpour faciliter la création d'APIs avec Symfony :
javascriptcomposer require api
- Créez un service Angular pour gérer les interactions avec l'API du backend :
bashcd ../frontend
ng generate service services/collection-item
Ajoutez les méthodes nécessaires pour effectuer des requêtes HTTP vers l'API du backend (par exemple : getCollectionItems, getCollectionItem, createCollectionItem, updateCollectionItem, deleteCollectionItem).
- Créez des composants Angular pour afficher et gérer les éléments de la collection :
bashng generate component components/collection-item-list ng generate component components/collection-item-detail ng generate component components/collection-item-form
Utilisez les composants et services créés pour implémenter les fonctionnalités de l'application.
Pour chaque question du devoir, créez une version sous la forme d'une étiquette (tag) :
git tag questionN
où N est un nombre écrit numériquement.
Mettez à jour le fichier README.md avec les commandes utilisées pour chaque étape.
Utilisez Docker pour déployer l'application en suivant les instructions fournies dans le fichier
compose.yml.Assurez-vous que la contribution de chaque membre du projet est clairement reflétée dans les commits du dépôt git. Si nécessaire, indiquez la répartition effective du travail dans le fichier README.md.
En suivant ces étapes, vous devriez être en mesure de créer une application de gestion de collections avec Symfony et Angular. N'oubliez pas de respecter les spécifications de noms de fichiers, de répertoires et d'étiquettes pour éviter des malus importants sur votre note.
Pour répondre à la question 1, suivez les étapes ci-dessous :
- Créez un nouveau projet Symfony pour le backend en exécutant la commande suivante :
bashcomposer create-project symfony/skeleton backend
- Créez un nouveau projet Angular pour le frontend en exécutant la commande suivante :
arduinong new frontend
- Créez un fichier README.md à la racine du dépôt et ajoutez les informations requises (prénoms, noms et emails universitaires des membres du groupe) au format markdown :
markdown# Projet de gestion de collections
## Membres du groupe
- Prénom Nom: [email protected]
- Prénom Nom: [email protected]
## Commandes utilisées
### Question 1
- Création du projet Symfony : `composer create-project symfony/skeleton backend`
- Création du projet Angular : `ng new frontend`
- Exécutez les serveurs Angular et Symfony :
- Pour Angular, exécutez la commande suivante dans le répertoire
frontend:
ng serve
- Pour Symfony, exécutez la commande suivante dans le répertoire
backend:
sqlsymfony server:start
- Testez les pages par défaut dans un navigateur :
- Accédez à
http://localhost:4200pour Angular. - Accédez à
http://localhost:8000pour Symfony.
- Créez un tag pour la question 1 :
sqlgit add .
git commit -m "Question 1 : Création des projets Angular et Symfony"
git tag question1
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
À l'issue de cette question, le correcteur doit pouvoir cloner votre dépôt, lancer les serveurs Angular et Symfony, et constater que les pages par défaut sont opérationnelles dans un navigateur.
Pour répondre à la question 2, suivez les étapes ci-dessous :
- Installez et configurez le bundle
ApiPlatformpour votre projet Symfony :
bashcd backend
composer require api
- Créez l'entité
Collectionavec les propriétés spécifiées :
bashphp bin/console make:entity Collection
Ajoutez les propriétés suivantes à l'entité Collection :
- titre (string, max 100 caractères, obligatoire)
- description (text, optionnelle)
- date de création (date, obligatoire)
Pensez à annoter l'entité avec @ApiResource pour l'exposer via l'API.
- Créez l'entité
Elementavec les propriétés spécifiées :
bashphp bin/console make:entity Element
Ajoutez les propriétés suivantes à l'entité Element :
- designation (string, max 200 caractères, obligatoire)
- description (text, optionnelle)
- commentaires (text, optionnelle)
- valeur (integer, optionnelle)
Pensez à annoter l'entité avec @ApiResource pour l'exposer via l'API.
- Ajoutez une relation entre les entités
CollectionetElement:
- Dans l'entité
Element, ajoutez une propriétécollectionde typeCollectionavec une annotationManyToOne. - Dans l'entité
Collection, ajoutez une propriétéelementsde typeArrayCollectionavec une annotationOneToMany.
- Générez les migrations pour créer les tables correspondantes dans la base de données :
bashphp bin/console make:migration php bin/console doctrine:migrations:migrate
- Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question 2
- Installation d'API Platform : `composer require api`
- Création de l'entité Collection : `php bin/console make:entity Collection`
- Création de l'entité Element : `php bin/console make:entity Element`
- Génération des migrations : `php bin/console make:migration`
- Exécution des migrations : `php bin/console doctrine:migrations:migrate`
- Créez un tag pour la question 2 :
sqlgit add .
git commit -m "Question 2 : Création du backend Symfony avec API Platform"
git tag question2
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
À l'issue de cette question, le correcteur doit pouvoir lancer le serveur Symfony, accéder à l'interface API par le chemin /api, et constater que le système d'information donne accès aux entités Collection et Element décrites ci-dessus.
Pour répondre à la question 3, suivez les étapes ci-dessous :
- Installez le bundle
DoctrineFixturesBundleet la bibliothèqueFakerpour votre projet Symfony :
luacomposer require --dev doctrine/doctrine-fixtures-bundle
composer require --dev fakerphp/faker
- Créez un fichier de fixtures pour les entités
CollectionetElement:
bashphp bin/console make:fixtures CollectionFixtures
- Modifiez le fichier
src/DataFixtures/CollectionFixtures.phppour remplir les tables de la base de données avec les données de test :
php// ...
use Doctrine\Bundle\FixturesBundle\Fixture;
use Doctrine\Persistence\ObjectManager;
use App\Entity\Collection;
use App\Entity\Element;
use Faker\Factory;
class CollectionFixtures extends Fixture
{
public function load(ObjectManager $manager)
{
$faker = Factory::create();
// Créer 3 collections
for ($i = 0; $i < 3; $i++) {
$collection = new Collection();
$collection->setTitre($faker->words(3, true));
$collection->setDescription($faker->optional()->text);
$collection->setDateCreation($faker->dateTimeThisYear());
$manager->persist($collection);
// Créer un nombre aléatoire d'éléments (entre 5 et 25) pour chaque collection
$elementCount = $faker->numberBetween(5, 25);
for ($j = 0; $j < $elementCount; $j++) {
$element = new Element();
$element->setDesignation($faker->words(5, true));
$element->setDescription($faker->optional()->text);
$element->setCommentaires($faker->optional()->text);
$element->setValeur($faker->optional()->numberBetween(1, 1000));
$element->setCollection($collection);
$manager->persist($element);
}
}
$manager->flush();
}
}
- Exécutez la commande pour charger les fixtures :
bashphp bin/console doctrine:fixtures:load
- Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question 3
- Installation de DoctrineFixturesBundle et Faker : `composer require --dev doctrine/doctrine-fixtures-bundle` et `composer require --dev fakerphp/faker`
- Création des fixtures : `php bin/console make:fixtures CollectionFixtures`
- Chargement des fixtures : `php bin/console doctrine:fixtures:load`
- Créez un tag pour la question 3 :
sqlgit add .
git commit -m "Question 3 : Création des fixtures avec Faker"
git tag question3
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
À l'issue de cette question, le correcteur doit pouvoir lancer le serveur Symfony, accéder à l'interface API par le chemin /api, et tester quelques requêtes pour obtenir des réponses non vides.
Pour répondre à cette question, suivez les étapes ci-dessous pour créer les composants et les fonctionnalités requises pour le frontend Angular :
- Créez les composants nécessaires :
csharpcd frontend
ng generate component home
ng generate component collections
ng generate component elements
ng generate component add-collection
ng generate component add-element
- Configurez les routes pour chaque composant dans le fichier
src/app/app-routing.module.ts:
typescriptimport { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CollectionsComponent } from './collections/collections.component';
import { ElementsComponent } from './elements/elements.component';
import { AddCollectionComponent } from './add-collection/add-collection.component';
import { AddElementComponent } from './add-element/add-element.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'collections', component: CollectionsComponent },
{ path: 'elements', component: ElementsComponent },
{ path: 'add-collection', component: AddCollectionComponent },
{ path: 'add-element', component: AddElementComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
- Ajoutez le menu de navigation dans le fichier
src/app/app.component.html:
html<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">Gestion de collections</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/collections">Collections</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/elements">Éléments</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/add-collection">Ajout d'une collection</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/add-element">Ajout d'un élément</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<router-outlet></router-outlet>
</div>
</main>
Implémentez les fonctionnalités pour chaque composant en suivant les exigences décrites dans la question. Vous devrez également intégrer et configurer un module HTTP, tel que
HttpClientModule, pour interagir avec le backend Symfony.Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question Front-end Angular
- Création des composants : `ng generate component home`, `ng generate component collections`, `ng generate component elements`, `ng generate component add-collection`, `ng generate component add-element`
- Configuration des routes dans `src/app/app-routing.module.ts`
- Ajout du menu de navigation dans
Pour répondre à la question 4, nous avons déjà créé les composants requis et configuré les routes dans les étapes précédentes. Nous allons maintenant ajouter du contenu à la page d'accueil et créer un service pour gérer les collections et les éléments.
- Ajoutez du contenu à la page d'accueil en modifiant le fichier
src/app/home/home.component.html:
html<div class="jumbotron">
<h1 class="display-4">Bienvenue sur l'application de gestion de collections !</h1>
<p class="lead">Cette application vous permet de gérer et d'organiser vos collections et leurs éléments.</p>
<hr class="my-4">
<p>Utilisez le menu de navigation pour accéder aux fonctionnalités de l'application.</p>
</div>
- Créez un service pour gérer les collections et les éléments :
ng generate service collection
- Modifiez le fichier
src/app/collection.service.tspour implémenter les méthodes nécessaires pour interagir avec l'API Symfony :
typescriptimport { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CollectionService {
private apiUrl = 'http://localhost:8000/api';
constructor(private http: HttpClient) { }
getCollections(): Observable<any> {
return this.http.get(`${this.apiUrl}/collections`);
}
getElements(): Observable<any> {
return this.http.get(`${this.apiUrl}/elements`);
}
// Ajoutez d'autres méthodes pour gérer les collections et les éléments (ajout, modification, suppression, etc.)
}
- N'oubliez pas d'importer et d'ajouter
HttpClientModuledanssrc/app/app.module.tspour utiliser le service HTTP dans votre application :
typescript// ...
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
// ...
],
imports: [
// ...
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question 4
- Ajout du contenu à la page d'accueil dans `src/app/home/home.component.html`
- Création d'un service pour gérer les collections et les éléments : `ng generate service collection`
- Importation de HttpClientModule dans `src/app/app.module.ts`
- Créez un tag pour la question 4 :
sqlgit add .
git commit -m "Question 4 : Implémentation des composants et services pour le menu et la page d'accueil"
git tag question4
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
À l'issue de cette question, le correcteur doit pouvoir lancer l'application Angular, voir le menu de navigation et accéder à la page d'accueil avec sa description.
Pour répondre à la question 5, suivez les étapes ci-dessous pour créer les composants et les fonctionnalités requises pour la gestion des collections :
- Modifiez le fichier
src/app/collections/collections.component.tspour utiliser le serviceCollectionServiceet récupérer les collections depuis l'API :
typescriptimport { Component, OnInit } from '@angular/core';
import { CollectionService } from '../collection.service';
@Component({
selector: 'app-collections',
templateUrl: './collections.component.html',
styleUrls: ['./collections.component.css']
})
export class CollectionsComponent implements OnInit {
collections: any[];
constructor(private collectionService: CollectionService) { }
ngOnInit(): void {
this.collectionService.getCollections().subscribe(data => {
this.collections = data['hydra:member'];
});
}
}
- Modifiez le fichier
src/app/collections/collections.component.htmlpour afficher la liste des collections :
html<h1>Collections</h1>
<table class="table">
<thead>
<tr>
<th scope="col">Titre</th>
<th scope="col">Date de création</th>
<th scope="col">Description</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let collection of collections">
<td>{{ collection.title }}</td>
<td>{{ collection.creationDate }}</td>
<td>{{ collection.description | slice:0:20 }}...</td>
<td>
<button class="btn btn-primary">Détails</button>
<button class="btn btn-secondary">Modifier</button>
</td>
</tr>
</tbody>
</table>
Implémentez les fonctionnalités pour afficher les détails d'une collection et modifier une collection. Vous pouvez créer des composants supplémentaires et des routes associées pour gérer ces fonctionnalités.
Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question 5
- Modification du fichier `src/app/collections/collections.component.ts` pour utiliser le service `CollectionService`
- Modification du fichier `src/app/collections/collections.component.html` pour afficher la liste des collections
- Créez un tag pour la question 5 :
sqlgit add .
git commit -m "Question 5 : Implémentation des composants et services pour la gestion des collections"
git tag question5
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
À l'issue de cette question, le correcteur doit pouvoir lancer l'application Angular, accéder à la liste des collections, et voir les détails d'une collection ou modifier les détails d'une collection.
Pour répondre à la question 6, suivez les étapes ci-dessous pour créer les composants et les fonctionnalités requises pour la gestion des éléments :
- Modifiez le fichier
src/app/elements/elements.component.tspour utiliser le serviceCollectionServiceet récupérer les éléments depuis l'API :
typescriptimport { Component, OnInit } from '@angular/core';
import { CollectionService } from '../collection.service';
@Component({
selector: 'app-elements',
templateUrl: './elements.component.html',
styleUrls: ['./elements.component.css']
})
export class ElementsComponent implements OnInit {
elements: any[];
constructor(private collectionService: CollectionService) { }
ngOnInit(): void {
this.collectionService.getElements().subscribe(data => {
this.elements = data['hydra:member'];
});
}
}
- Modifiez le fichier
src/app/elements/elements.component.htmlpour afficher la liste des éléments :
html<h1>Éléments</h1>
<table class="table">
<thead>
<tr>
<th scope="col">Désignation</th>
<th scope="col">Collection</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let element of elements">
<td>{{ element.designation }}</td>
<td>{{ element.collection.title }}</td>
<td>
<button class="btn btn-primary">Détails</button>
<button class="btn btn-secondary">Modifier</button>
<button class="btn btn-danger">Supprimer</button>
</td>
</tr>
</tbody>
</table>
Implémentez les fonctionnalités pour afficher les détails d'un élément, modifier un élément et supprimer un élément. Vous pouvez créer des composants supplémentaires et des routes associées pour gérer ces fonctionnalités.
Créez les composants pour ajouter un nouvel élément et une nouvelle collection :
csharpng generate component add-element
ng generate component add-collection
Implémentez les formulaires pour créer un nouvel élément et une nouvelle collection, en vous assurant de valider les champs obligatoires. Utilisez les directives de validation d'Angular, telles que
requiredpour les champs obligatoires etmin="0"pour s'assurer que la valeur est positive ou nulle.Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question 6
- Modification du fichier `src/app/elements/elements.component.ts` pour utiliser le service `CollectionService`
- Modification du fichier `src/app/elements/elements.component.html` pour afficher la liste des éléments
- Création des composants pour ajouter un nouvel élément et une nouvelle collection : `ng generate component add-element` et `ng generate component add-collection`
- Créez un tag pour la question 6 :
sqlgit add .
git commit -m "Question 6 : Implémentation des composants et services pour la gestion des éléments"
git tag question6
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
À l'issue de cette question, le correcteur doit pouvoir lancer l'application Angular, accéder à la liste des éléments, et voir les détails d'un él
Pour répondre à la question 7, suivez les étapes ci-dessous pour intégrer Angular Material dans votre application et améliorer l'aspect visuel :
- Installez Angular Material :
sqlng add @angular/material
- Importez les modules Angular Material nécessaires dans
src/app/app.module.ts:
typescriptimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Import Angular Material modules
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule, // Add BrowserAnimationsModule
MatButtonModule, // Add MatButtonModule
MatTableModule, // Add MatTableModule
MatInputModule, // Add MatInputModule
MatFormFieldModule // Add MatFormFieldModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Modifiez vos composants pour utiliser les composants et les styles d'Angular Material.
Pour les tables, remplacez les balises <table>, <thead>, <tbody>, etc. par les composants Material correspondants, tels que <mat-table>, <ng-container matColumnDef>, <mat-header-row>, <mat-row> etc.
Pour les boutons, ajoutez la directive mat-button, mat-raised-button ou mat-flat-button aux balises <button> pour appliquer les styles Material.
- Pour les formulaires, utilisez les composants Material tels que
<mat-form-field>et<input matInput>pour les champs de formulaire, et<mat-error>pour afficher les messages d'erreur. Utilisez les directives de validation d'Angular, telles querequired,min,maxetc., pour valider les champs.
Exemple de formulaire avec validation et messages d'erreur :
html<form>
<mat-form-field appearance="outline">
<mat-label>Designation</mat-label>
<input matInput required [(ngModel)]="designation" #designationInput="ngModel" name="designation">
<mat-error *ngIf="designationInput.invalid && designationInput.touched">Designation is required</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Valeur</mat-label>
<input matInput type="number" min="0" [(ngModel)]="valeur" #valeurInput="ngModel" name="valeur">
<mat-error *ngIf="valeurInput.invalid && valeurInput.touched">Valeur must be positive or null</mat-error>
</mat-form-field>
<button mat-raised-button type="submit">Submit</button>
</form>
- Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question 7
- Installation d'Angular Material : `ng add @angular/material`
- Importation des modules Angular Material dans `src/app/app.module.ts`
- Modification des composants pour utiliser les composants et les styles d'Angular Material
- Créez un tag pour la question 7 :
sqlgit add .
git commit -m "Question 7 : Utilisation d'Angular
Pour répondre à la question 8, suivez les étapes ci-dessous pour ajouter l'authentification JWT dans votre application Angular :
- Installez les dépendances nécessaires :
bashnpm install @auth0/angular-jwt
- Configurez le module
angular-jwtdanssrc/app/app.module.ts:
typescriptimport { JwtModule } from '@auth0/angular-jwt';
export function tokenGetter() {
return localStorage.getItem('access_token');
}
@NgModule({
// ...
imports: [
// ...
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
allowedDomains: ['your.api.domain'], // Remplacez par le domaine de votre API
disallowedRoutes: [] // Spécifiez les routes qui ne nécessitent pas d'authentification
}
}),
],
// ...
})
export class AppModule { }
- Créez un service d'authentification pour gérer l'authentification et le stockage du token JWT :
ng generate service auth
Modifiez le fichier src/app/auth.service.ts :
typescriptimport { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private apiUrl = 'your.api.domain'; // Remplacez par l'URL de votre API
constructor(private http: HttpClient) { }
login(username: string, password: string) {
return this.http.post<{token: string}>(`${this.apiUrl}/login`, {username, password}).pipe(
tap(res => {
localStorage.setItem('access_token', res.token);
})
);
}
logout() {
localStorage.removeItem('access_token');
}
isAuthenticated(): boolean {
return !!localStorage.getItem('access_token');
}
}
- Créez un composant de connexion :
ng generate component login
Implémentez le formulaire de connexion dans src/app/login/login.component.html et utilisez le service d'authentification pour envoyer les informations de connexion et stocker le token JWT.
Mettez à jour les routes pour protéger les routes nécessitant une authentification dans
src/app/app-routing.module.ts. Vous pouvez utiliser unAuthGuardpour vérifier si un utilisateur est authentifié avant d'accéder à une route.Modifiez le menu pour afficher les éléments en fonction de l'état d'authentification de l'utilisateur. Utilisez le service
AuthServicepour vérifier si un utilisateur est authentifié et mettez à jour les éléments du menu en conséquence.Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question 8
- Installation des dépendances nécessaires : `npm install @auth0/angular-jwt`
- Configuration du module `angular-jwt` dans `src/app/app.module.ts`
- Création du service d'authentification : `ng generate service auth`
- Création du composant de connexion : `ng generate component login`
- Créez un tag pour la question 8 :
sqlgit add .
git commit -m "Question 8 : Ajout de l'authentification JWT et protection des routes"
git tag question8
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
``
Pour répondre à la question 9, vous devez d'abord modifier votre API Symfony pour ajouter les relations entre les utilisateurs, les collections et les éléments. Ensuite, vous devez mettre à jour votre application Angular pour prendre en compte ces relations.
API Symfony :
- Ajoutez les relations entre les entités
User,CollectionetElementdans vos classes d'entité. - Mettez à jour les contrôleurs et les routes pour s'assurer que seuls les utilisateurs ayant les autorisations appropriées peuvent voir et manipuler les collections et les éléments.
- Ajoutez des contrôles d'accès dans le fichier
security.yamlpour protéger les routes API en fonction des rôles et des autorisations des utilisateurs.
Application Angular :
- Mettez à jour les services
CollectionServiceetElementServicepour inclure le token JWT dans les requêtes HTTP. Le moduleangular-jwtajoutera automatiquement le token JWT aux en-têtes des requêtes HTTP pour les domaines autorisés.
typescriptimport { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service';
constructor(private http: HttpClient, private authService: AuthService) { }
getCollections() {
const headers = new HttpHeaders().set('Authorization', `Bearer ${this.authService.getToken()}`);
return this.http.get(`${this.apiUrl}/collections`, { headers: headers });
}
Mettez à jour les composants pour afficher et manipuler les collections et les éléments en fonction de l'utilisateur connecté.
Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
vbnet## Question 9
- Modification de l'API Symfony pour ajouter les relations entre les utilisateurs, les collections et les éléments
- Mise à jour de l'application Angular pour prendre en compte ces relations
- Créez un tag pour la question 9 :
sqlgit add .
git commit -m "Question 9 : Ajout des relations entre utilisateurs, collections et éléments et contrôle des autorisations"
git tag question9
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
À l'issue de cette question, le correcteur doit pouvoir lancer l'application Angular et l'API Symfony, se connecter en tant qu'utilisateur et voir et manipuler uniquement les collections et les éléments qui lui sont associés.
Pour répondre à la question 10, vous devez ajouter les fonctionnalités de suppression de collections et de filtrage des éléments par collection à votre application Angular.
- Dans le composant
CollectionListComponent, ajoutez une méthode pour supprimer une collection. Vous pouvez utiliser un dialogue de confirmation pour demander à l'utilisateur de confirmer la suppression. Utilisez leCollectionServicepour envoyer une requête de suppression à l'API Symfony.
typescriptimport { MatDialog } from '@angular/material/dialog';
import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
constructor(private collectionService: CollectionService, private dialog: MatDialog) { }
deleteCollection(collectionId: number) {
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
data: {
title: 'Supprimer la collection',
message: 'Êtes-vous sûr de vouloir supprimer cette collection et tous ses éléments ?'
}
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.collectionService.deleteCollection(collectionId).subscribe(() => {
this.loadCollections();
});
}
});
}
Mettez à jour le modèle
Collectionpour inclure une méthode de suppression des éléments liés.Dans le composant
ElementListComponent, ajoutez un filtre pour les éléments par collection. Vous pouvez utiliser un formulaire pour permettre à l'utilisateur de sélectionner une collection et mettre à jour la liste des éléments en fonction de la sélection.
typescriptfilteredElements: Element[] = [];
constructor(private elementService: ElementService, private collectionService: CollectionService) { }
filterElementsByCollection(collectionId: number) {
if (collectionId) {
this.filteredElements = this.elements.filter(element => element.collection.id === collectionId);
} else {
this.filteredElements = this.elements;
}
}
- Mettez à jour le fichier README.md avec les commandes utilisées pour cette question :
markdown## Question 10
- Ajout de la possibilité de supprimer une collection et ses éléments dans `CollectionListComponent`
- Ajout d'un filtre des éléments par collection dans `ElementListComponent`
- Créez un tag pour la question 10 :
sqlgit add .
git commit -m "Question 10 : Améliorations - Suppression des collections et filtrage des éléments par collection"
git tag question10
N'oubliez pas de pousser vos modifications et le tag sur le dépôt git :
cssgit push origin main --tags
À l'issue de cette question, le correcteur doit pouvoir lancer l'application Angular et utiliser les fonctionnalités de suppression de collections et de filtrage des éléments par collection.
Add to Chrome - It's free
Add to Firefox - It's free
Add to Edge - It's free