Compte rendu tp web avancée :
Le projet consiste à développer une page de Login en utilisant Angular pour le
frontend, Spring Boot pour le backend, et PostgreSQL comme base de données.
L'objectif est de permettre aux utilisateurs de se connecter en vérifiant leurs
informations d'identification et de rediriger vers une page d'accueil en cas de
succès, sinon d'afficher un message d'erreur.
Backend (Spring Boot)
le modèle :
Ici la classe modèle Users pour représenter les utilisateurs qui vont faire le login. La classe
est annotée avec @Entity indiquant qu'elle est une entité persistante stockée dans une base
de données. Les champs id, username, et password représentent les propriétés de
l'utilisateur .
le repository :
l’interface Userrepository utilisant Spring Data JPA. Elle étend JpaRepository pour gérer les
opérations de base sur la base de données pour l'entité Users.
La méthode finduser utilise une requête SQL native : "SELECT * FROM users u
where [Link]= :n and [Link]= :p "
pour rechercher un utilisateur par nom d'utilisateur (`n`) et mot de passe (`p`).
service :
Cette partie définit un service Userservice de la login. Le service gère les opérations
métier liées à l'entité Users. Le constructeur prend en paramètre une instance de
Userrepository, permettant au service d'interagir avec la base de données par La
méthode finduser de Userrepository.
le controller
Le contrôleur Usercontroller gère les requêtes liées à l'entité `Users`. Il est annoté
avec @RestController pour indiquer qu'il gère les requêtes HTTP . Les méthodes du
contrôleur sont mappées à des endpoints à l'aide de l'annotation
`@RequestMapping`.
Le constructeur prend en paramètre une instance de `Userservice` permettant au
contrôleur d'utiliser les fonctionnalités fournies par le service. Sa méthode finduser
répond à une requête GET sur le chemin /api/user/finduser/{n}/{p} , où {n} et
{p} sont des paramètres de chemin. Cette méthode utilise le service pour récupérer
un utilisateur en fonction du nom d'utilisateur n et du mot de passe p .
configuration :
dans la configuration il y a le user name et le password de base , aussi il y a le nom
de la base et sa url , etc …
Base de Données (postgresql):
création de base de données user sur postgresql :
Frontend (Angular)
login component :
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from '../[Link]';
@Component({
selector: 'app-login',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class LoginComponent {
constructor(private userService: UserService,private router: Router)
{}
user = {
username: '', password: '',
};
go() {
[Link]([`/aceuil`]);}
login() {
[Link]([Link],
[Link]).subscribe(
(response) => {
if ([Link](response)) {
alert("wrong Login")
}else{
[Link]()
}},
(error) => {
[Link]('Error finding user:', error);
}
);
}
private isObjectEmpty(obj: any): boolean {
return [Link](obj).length === 0;
}}
Constructeur:Injecte les services UserService et Router pour les opérations et la
navigation liées à l’utilisateur.
Objet utilisateur :Définit un objet utilisateur représentant les informations
d'identification de l'utilisateur (nom d'utilisateur et mot de passe).
Méthode de navigation (go):Navigue vers la route /aceuil à l’aide du Angular Router.
Méthode de login(login) : Invoqué lors de la tentative de connexion de l'utilisateur.
Appelle findUser depuis UserService avec les informations d’identification de
l’utilisateur.
Navigue vers aceuil en cas de connexion réussie ; Sinon, affiche une alerte en cas de
connexion incorrecte.
service :
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private baseUrl = '[Link]
constructor(private http: HttpClient) {}
findUser(username: string, password: string): Observable<any> {
const url = `${[Link]}/finduser/${username}/${password}`;
return [Link](url).pipe(
catchError((error: HttpErrorResponse) => {
[Link]('Error finding user:', error);
return throwError(error);
})
);
}
}
URL de base et client HTTP :Définit une baseUrl représentant l'URL de base pour les
requêtes API.
findUser :
Prend le nom d'utilisateur et le mot de passe comme paramètres et il utilise l url pour
veifier si le user exist ou non .
login html :
<div class="login-container">
<h2>Login</h2>
<form (ngSubmit)="login()" #loginForm="ngForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
[(ngModel)]="[Link]" required #username="ngModel">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
[(ngModel)]="[Link]" required #password="ngModel">
<div *ngIf="[Link] && ([Link] ||
[Link])" class="error-message">
Username is required.
</div>
<div *ngIf="[Link] && ([Link] ||
[Link])" class="error-message">
Password is required.
</div>
<button type="submit"
[disabled]="[Link]">Login</button>
</form>
</div>
.
résultat:
cas de login correct :
login incorrect :
