Scribd
Importer
84 vues3 pages

Mini Projet Angular

Le mini-projet consiste à créer une application de gestion des étudiants utilisant Angular pour le front-end et Node.js avec Express pour le back-end, avec une base de données SQL. L'application doit permettre des opérations CRUD sur les étudiants, incluant l'ajout, la modification, la suppression et la recherche d'étudiants. Les livrables incluent le code source, un script SQL pour la base de données, et une documentation d'installation.

Transféré par

noamane ould
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
84 vues3 pages

Mini Projet Angular

Le mini-projet consiste à créer une application de gestion des étudiants utilisant Angular pour le front-end et Node.js avec Express pour le back-end, avec une base de données SQL. L'application doit permettre des opérations CRUD sur les étudiants, incluant l'ajout, la modification, la suppression et la recherche d'étudiants. Les livrables incluent le code source, un script SQL pour la base de données, et une documentation d'installation.

Transféré par

noamane ould
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

INF3091 : TECHNOLOGIES WEB 2

(REACT JS et ANGULAR JS)


Responsable Module: Dr. Fadwa Lachhab
Niveau: 3ème Année Année: 2024/2025
Filière: G. Info Session: Hiver
Volume horaire: 55

Mini Projet : Angular

Mini Projet

Énoncé de Mini-Projet : Application de Gestion des Étudiants

Objectif :

Créer une application CRUD (Create, Read, Update, Delete) pour la gestion des étudiants en
utilisant Angular pour le front-end, une base de données SQL pour le back-end, et [Link] avec
Express pour la communication entre Angular et la base de données.

Description du Projet :

L'application doit permettre de :

• Ajouter un nouveau étudiant.


• Modifier les données d'un étudiant existant.
• Supprimer un étudiant.
• Afficher la liste des étudiants dans un tableau stylisé avec Bootstrap.
• Rechercher un étudiant par nom ou par matricule.
Spécifications Techniques:

1. Front-end: Angular

• Créez une interface utilisateur en Angular pour les opérations CRUD.


• Utilisez Bootstrap pour styliser les composants de l'application.
• Implémentez un formulaire pour l'ajout et la modification des étudiants.
• Ajoutez une barre de recherche pour filtrer les étudiants par nom ou matricule.
• Affichez la liste des étudiants dans un tableau Bootstrap.

2. Back-end : [Link] avec Express

• Configurez un serveur [Link] avec Express pour gérer les requêtes HTTP.
• Créez des routes pour les opérations CRUD (ajout, modification, suppression,
récupération).

3. Base de Données : SQL

• Créez une base de données nommée gestion_etudiants.


• Ajoutez une table etudiant avec les colonnes suivantes :

▪ id (int, clé primaire, auto-incrémentée)


▪ nom (varchar)
▪ prenom (varchar)
▪ email (varchar, unique)
▪ tel (numero, unique)
▪ date_naissance (date)
▪ filière (varchar)
4. Communication Front-end / Back-end :

• Implémentez un service Angular pour effectuer des requêtes HTTP vers l'API
[Link].
• Utilisez le module HttpClient d'Angular pour les opérations CRUD.
• Gérez les erreurs et les succès des requêtes HTTP.
Livrables :

• Code source complet de l'application Angular.


• Code source du serveur [Link] avec Express.
• Script SQL pour créer la base de données et la table etudiant.
• Documentation expliquant l'installation et l'exécution de l'application.
• Capture d'écran de l'application en fonctionnement.

Bonus :

• Implémentez la pagination pour la liste des étudiants.


• Ajoutez des validations pour les champs du formulaire dans Angular.
• Mettez en place un système de notifications pour informer l'utilisateur des
succès ou des erreurs.

Vous aimerez peut-être aussi