2024-02-29

1. Laravel API Setup

Step 1: Create a New Laravel Project

Run the following command in your terminal to create a new Laravel project:

composer create-project --prefer-dist laravel/laravel TaskManager cd TaskManager

Step 2: Set Up Database & Migrations

Edit the .env file and configure your database settings:

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=task_manager

DB_USERNAME=root

DB_PASSWORD=

Then, create a migration for the tasks table:

php artisan make:migration create_tasks_table

Edit the migration file in database/migrations/xxxx_xx_xx_xxxxxx_create_tasks_table.php:

‌

public function up() { Schema::create('tasks', function (Blueprint $table) { $table->id(); $table->string('title'); $table->boolean('completed')->default(false); $table->timestamps(); }); }

Run the migration:

php artisan migrate

Step 3: Create Task Model & Controller

Generate the model and controller:

php artisan make:model Task -mcr

Edit app/Models/Task.php:

namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model;

class Task extends Model { use HasFactory; protected $fillable = ['title', 'completed']; }

Edit app/Http/Controllers/TaskController.php:

namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Task;

class TaskController extends Controller { public function index() { return response()->json(Task::all()); } public function store(Request $request) { $request->validate([ 'title' => 'required|string|max:255', 'completed' => 'boolean' ]); $task = Task::create($request->all()); return response()->json($task, 201); } public function show($id) { return response()->json(Task::findOrFail($id)); } public function update(Request $request, $id) { $task = Task::findOrFail($id); $task->update($request->all()); return response()->json($task); } public function destroy($id) { Task::destroy($id); return response()->json(['message' => 'Task deleted']); } }

Step 4: Set Up API Routes

enable API routing using the install:api Artisan command: (see https://laravel.com/docs/11.x/routing )

php artisan install:api

Edit routes/api.php:

use App\Http\Controllers\TaskController;

Route::apiResource('tasks', TaskController::class);

Step 5: Configure CORS in Laravel

• Configuration File: To customize CORS settings, you must publish the CORS configuration file using the Artisan command: (see https://codingmall.com/knowledge-base/25-global/14123-laravel-11-cors )

php artisan config:publish cors

This command creates a `cors.php` file in the `config` directory of your application.

• Setting CORS Options: In the `cors.php` file, you can define various settings:

  <?php
   return [
      'paths' => ['api/*', 'sanctum/csrf-cookie'],
      'allowed_methods' => ['GET', 'POST', 'PUT', 'OPTIONS'],
      'allowed_origins' => ['http://localhost:3000'],
      'allowed_origins_patterns' => [],
      'allowed_headers' => ['Origin', 'Content-Type', 'X-Auth-Token', 'Cookie'],
      'exposed_headers' => [],
      'max_age' => 0,
      'supports_credentials' => true,
  ];

• Clear the configuration cache:

php artisan config:clear

php artisan cache:clear

Step 6: Start Laravel Server

php artisan serve

Your Laravel API is now ready! 🎉

2. React App Setup

Step 1: Create a React Project

Navigate to your workspace and create a React app:

npx create-react-app task-manager cd task-manager

npm install axios bootstrap

Step 2: Configure Environment Variables

Create a .env file in the React project root and define the API URL:

REACT_APP_API_URL=http://127.0.0.1:8000/api

Step 3: Update React App.js

Edit src/App.js:

import React, { useState, useEffect } from 'react'; import axios from 'axios'; import 'bootstrap/dist/css/bootstrap.min.css';

function App() { const [tasks, setTasks] = useState([]); const [newTask, setNewTask] = useState(''); const [newTaskCompleted, setNewTaskCompleted] = useState(false); useEffect(() => { fetchTasks(); }, []); const fetchTasks = async () => { try { const response = await axios.get(${process.env.REACT_APP_API_URL}/tasks); setTasks(response.data); } catch (error) { console.error('Error fetching tasks:', error); } }; const handleAddTask = async () => { try { const response = await axios.post(${process.env.REACT_APP_API_URL}/tasks, { title: newTask, completed: newTaskCompleted, }); setTasks([...tasks, response.data]); setNewTask(''); setNewTaskCompleted(false); } catch (error) { console.error('Error adding task:', error); } }; return ( <div className="container"> <h3>Add Task</h3> <div className="row"> <div className="col-md-6"> <form> <div className="form-group"> <label>Task Title:</label> <input type="text" className="form-control" value={newTask} onChange={(e) => setNewTask(e.target.value)} /> </div> <div className="form-group form-check"> <input type="checkbox" className="form-check-input" checked={newTaskCompleted} onChange={(e) => setNewTaskCompleted(e.target.checked)} /> <label className="form-check-label">Completed</label> </div> <button type="button" className="btn btn-primary" onClick={handleAddTask}> Add Task </button> </form> </div> </div> <hr /> <div className="row"> <div className="col-md-12"> <h3>Task List</h3> <table className="table table-hover"> <thead> <tr> <th>ID</th> <th>Title</th> <th>Completed</th> </tr> </thead> <tbody> {tasks.map((task) => ( <tr key={task.id}> <td>{task.id}</td> <td>{task.title}</td> <td>{task.completed ? 'Yes' : 'No'}</td> </tr> ))} </tbody> </table> </div> </div> </div> ); } export default App;

Step 4: Run the React App

npm start

✅ Validation using Requests

✅ Resource controller

✅ Middleware for logging requests (inside a controller)

✅ Views for displaying, adding, deleting, and editing students

✅ Session flashed messages

(✅ Bootstrap for styling)

---------------------------------------------

Step 1: Install Laravel

composer create-project laravel/laravel student-management

Step 2: Set Up the Database

Modify .env:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=student_management DB_USERNAME=root DB_PASSWORD=

Create the database:

CREATE DATABASE student_management;

Step 3: Create the Model, Migration,

php artisan make:model Student -m

Modify migration file =(database/migrations/YYYY_MM_DD_create_students_table.php):

public function up() { Schema::create('students', function (Blueprint $table) { $table->id(); $table->string('cin', 10)->unique(); $table->string('first_name', 50); $table->string('last_name', 50); $table->date('date_of_birth'); $table->string('address'); $table->string('phone', 10)->unique(); $table->string('email')->unique(); $table->timestamps(); }); }

Run migrations:

php artisan migrate

Step 4: Create the Controller with Request Validation

php artisan make:controller StudentController --resource --requests

To generate form requests, instead of --requests:

=> php artisan make:request StoreStudentRequest

=> php artisan make:request UpdateStudentRequest

Modify StoreStudentRequest.php (app/Http/Requests/StoreStudentRequest.php):

public function rules(): array { return [ 'cin' => ['required', 'regex:/^[A-Za-z]{0,2}[0-9]+$/', 'unique:students,cin'], 'first_name' => ['required', 'alpha', 'min:2'], 'last_name' => ['required', 'alpha', 'min:2'], 'date_of_birth' => ['required', 'date', 'before_or_equal:' . now()->subYears(18)->toDateString(), 'after:' . now()->subYears(26)->toDateString()], 'address' => ['required', 'string'], 'phone' => ['required', 'regex:/^0[0-9]{9}$/', 'unique:students,phone'], 'email' => ['required', 'email', 'unique:students,email'], ]; }

Modify StudentController.php:

use App\Models\Student; use App\Http\Requests\StoreStudentRequest; use App\Http\Requests\UpdateStudentRequest; use Illuminate\Http\Request; class StudentController extends Controller { public function index() { $students = Student::all(); return view('students.index', compact('students')); } public function create() { return view('students.create'); } public function store(StoreStudentRequest $request) { Student::create($request->validated()); return redirect()->route('students.index')->with('success', 'Student added successfully!'); } public function edit(Student $student) { return view('students.edit', compact('student')); } public function update(UpdateStudentRequest $request, Student $student) { $student->update($request->validated()); return redirect()->route('students.index')->with('success', 'Student updated successfully!'); } public function destroy(Student $student) { $student->delete(); return redirect()->route('students.index')->with('success', 'Student deleted successfully!'); } }

Step 5: Create Middleware

php artisan make:middleware LogMiddleware

Modify LogMiddleware.php:

use Closure; use Illuminate\Http\Request; use Illuminate\Support\Facades\Log; class LogMiddleware { public function handle(Request $request, Closure $next) { Log::info('Request Data:', $request->all()); return $next($request); } }

Register it in app/Http/Kernel.php:

protected $middleware = [ \App\Http\Middleware\LogMiddleware::class, ];

Use it in StudentController.php:

public function __construct() { $this->middleware(LogMiddleware::class); }

Step 6: Define Routes

Modify routes/web.php:

use App\Http\Controllers\StudentController; Route::get('/', [StudentController::class, 'index']); Route::resource('students', StudentController::class);

Step 7: Create Views

Inside resources/views/students, create these files:

1️⃣ index.blade.php (List Students)

@extends('layouts.app') @section('content') <div class="container"> <h2>Student List</h2> <a href="{{ route('students.create') }}" class="btn btn-primary mb-3">Add Student</a> @if(session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif <table class="table table-bordered"> <thead> <tr> <th>CIN</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Address</th><th>Phone</th><th>Email</th><th>Actions</th> </tr> </thead> <tbody> @foreach ($students as $student) <tr> <td>{{ $student->cin }}</td> <td>{{ $student->first_name }}</td> <td>{{ $student->last_name }}</td> <td>{{ $student->date_of_birth }}</td> <td>{{ $student->address }}</td> <td>{{ $student->phone }}</td> <td>{{ $student->email }}</td> <td> <a href="{{ route('students.edit', $student) }}" class="btn btn-warning">Edit</a> <form action="{{ route('students.destroy', $student) }}" method="POST" style="display:inline;"> @csrf @method('DELETE') <button type="submit" class="btn btn-danger" onclick="return confirm('Delete this student?')">Delete</button> </form> </td> </tr> @endforeach </tbody> </table> </div> @endsection

2️⃣ create.blade.php (Add Student Form)

@extends('layouts.app') @section('content') <div class="container"> <h2>Add Student</h2> <form action="{{ route('students.store') }}" method="POST"> @csrf @include('students.form') <button type="submit" class="btn btn-success">Save</button> </form> </div> @endsection

3️⃣ edit.blade.php (Edit Student Form)

@extends('layouts.app') @section('content') <div class="container"> <h2>Edit Student</h2> <form action="{{ route('students.update', $student) }}" method="POST"> @csrf @method('PUT') @include('students.form') <button type="submit" class="btn btn-primary">Update</button> </form> </div> @endsection

4️⃣ form.blade.php (Reusable Form Fields)

<div class="mb-3"> <label>CIN</label> <input type="text" name="cin" class="form-control" value="{{ old('cin', $student->cin ?? '') }}"> </div> <div class="mb-3"> <label>First Name</label> <input type="text" name="first_name" class="form-control" value="{{ old('first_name', $student->first_name ?? '') }}"> </div> <!-- Add other fields similarly -->

Step 8: Run the Application

php artisan serve

Now visit http://127.0.0.1:8000/ 🎉

1. PDO (PHP Data Objects)

   • Provides a consistent database access layer that allows you to interact with different databases (MySQL, PostgreSQL, SQLite, etc.) using the same API.

   • Supports prepared statements, which improve security by preventing SQL injection.

   • Allows easier database switching without rewriting code.

2. Tokenizer

   • Enables lexical analysis by breaking PHP source code into tokens.

   • Used internally by PHP for parsing code and by tools like static analyzers, syntax highlighters, and code linters.

   • Useful for developing custom PHP parsers or code-related tools.

3. OpenSSL

   • Provides cryptographic functions for secure communication.

   • Enables data encryption, decryption, and SSL/TLS connections.

   • Used for generating secure hashes, signing/verifying data, and working with certificates.

4. Mbstring (Multibyte String)

   • Handles multibyte character encoding, which is essential for non-ASCII languages like Arabic, Chinese, and Japanese.

   • Provides string manipulation functions that properly handle multibyte characters (e.g., mb_strlen(), mb_substr()).

   • Prevents issues when working with UTF-8 encoded text.

php artisan make:provider RouteServiceProvider

-in boot() mothod of RouteServiceProvider

=> ex:

route::pattern('id', '[0-9]+');

php artisan make:provider RouteServiceProvider

-to define a global pattern => ex:

in boot() method ->

route::pattern('id', '[0-9]+')

1. Contrôleurs à simple action (p114-115)

2. Contrôleur Middleware (p117-118)

3. Contrôleur de ressources (quelques points à ajouter aux p121-124, p126-128, p132, p137)

   ---

   devowfs201 => 8/4

   devowfs202 => 10/4

collections => groupby()

Implémentation du mécanisme de la protection CSRF à travers le mix AJAX/JQUERY sur une application LARAVEL

=> Etudier les axes suivants:

-Concept du cloud et ses avantages

-Exemples des fournisseurs cloud

-Différence entre cloud privé, public et hybride

-Services du cloud (IAAS, PAAS, SAAS)

-Approche cloud natif

-API REST

-Méthodes du protocole HTTP

==================================

201 => 08/01/2026

202 => 09/01/2026

-------------------------------------------------------------

N.B. / Goal of the Application

This Express application demonstrates the basic principles of creating a RESTful API that allows you to perform CRUD (Create, Read, Update, Delete) operations on a list of teams. The application is structured to help you understand how to:

·         Create new teams using the POST method.

·         Retrieve all teams using the GET method.

·         Update an existing team's details using the PUT method.

·         Delete a team using the DELETE method.

By using this app, you'll learn how to handle HTTP requests, manipulate data in arrays, and interact with JSON data in a server environment using Express.js. The app serves as a foundation for building more complex applications that require data management via API endpoints.

N.B:

=> + read/write in files

Exécuter les commandes 'MongoDB Shell' sur une base de données MongoDB

.installations :

=> npm install express mongodb

.Tests:

-fonctionnalités présentes

-insertion, mise à jour, suppression en masse

-autres opérateurs MQL (MongoDB Query Language) : $eq, $exits, ...

----------- Partie 2 :extension (optionnelle)

=> complexifier les documents -> ajouter des champs tableau et objet

see the padlet named 'Cloud : expressJS_mongodb (script)'

=======================================

Page 5/6

Page login: https://www.figma.com/proto/CC4r03L3R9gBOw5LNrsXpD/mini-projet-
wow?node-id=1-5735&t=pylmPsqmsy175Nri-0&scaling-min-zoom&content-
scaling fixed&page-id=0%3A1 (2 points)
Page S'inscrire: https://www.figma.com/proto/CC4r03L3R9gBOw5LNrsXpD/mini-projet-
wow?node-id-1-5546&t=pylmPsqmsy175Nrj-0&scaling-min-zoom&content- scaling-fixed&page-id=0%3A1 (2 points)
4- Créer une interface minimale en utilisant React pour ajouter une anecdote à l'aide d'un formulaire affiché dans une fenêtre modale (popup), tout en consommant l'API de création
d'anecdote (3 points)
Page de création anecdote :
https://www.figma.com/proto/CC4r03L3R9gBOw5LNrsXpD/mini-projet-wow?node-id=1-
8009&t=n4MvJJBHU5B1DXQP-0&scaling-min-zoom &content-scaling-fixed&page-id=0%3A1
5- Créer un composant fonctionnel en React "anecdote" qui permet d'afficher une anecdote. Le composant doit recevoir ses données via les props et afficher le titre et le contenu de l'anecdote. (3 points)
Lien du component Figma : https://www.figma.com/proto/CC4r03L3R9gBOw5LNrsXpD/mini-
projet-wow?node-id=25-270&t=pylmPsqmsy17SNrj-0&scaling-min-zoom&content-
scaling-fixed&page-id=0%3A1
6- Créer une page d'index qui affiche la liste des anecdotes en utilisant une boucle sur le composant Anecdote. Implémentez un système de scroll infini (infinite scroll) à la fois côté backend (pagination API) et côté frontend (chargement progressif lors du scroll). (4 points)
Lien de la page sur figma : https://www.figma.com/proto/CC4r03L3R9gBOw5LNrsXpD/mini-
projet-wow?node-id=1-2006&t=RzEu2i3GWqSnYR5N-0&scaling-min-zoom&content-
scaling-fixed&page-id=0%3A1

-https://www.canva.com/design/DAGV-_qGYOs/Y_r3DVQjKrlhe_QXYXU41g/edit?utm_content=DAGV-_qGYOs&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

alimedelmiloudi@gmail.com

mounirsaididimaraja@gmail.com

aithammiabdelali@gmail.com

abdelilahdam27@gmail.com

badramraoui94@gmail.com

ayoubchakiri105@gmail.com

aminedouz439@gmail.com

kaoutarguennouni38@gmail.com

aymaneamn123@gmail.com

alabdelouafi@gmail.com

alioulahcen272@gmail.com

imanebaali268@gmail.com

lmoudenoussama10@gmail.com

hafasatalibi@gmail.com

oumoulasalahdine@gmail.com

elkhadirwalid23@gmail.com

1- Ecrire un composant qui Affiche un bouton labelisé 'Jour suivant', et un label qui affiche un message

contenant le jour actuel sous format 'Jour actuel: Lundi'; Le jour est mis à jour (on passe au jour suivant) à chaque clic sur le bouton; Le jour affiché au début est 'Lundi'.

2- Ecrire un composant qui Affiche un bouton, et un label qui contient l'heure actuelle (heures, minutes, et secondes);

L'heure doit être mise à jour à chaque clic sur le bouton.

N.B : Il affiche un message dans le format suivant: 'Il est : 13:02:39'.

3- Ecrire un composant qui permet d'afficher un chronomètre avec un pas d'une seconde; Le chronomètre doit commencer à l'heure actuelle.

N.B : Il affiche un message dans le format suivant: 'Il est : 13:02:39'

Implémenter l'interface en pièce jointe

Développer une application React complète nommée Mini-Store, permettant de gérer un petit catalogue de produits.

L’application doit offrir une navigation fluide entre plusieurs pages, afficher des produits récupérés via une API, permettre l’ajout manuel de nouveaux produits, afficher le détail d’un article , et gérer un panier grâce à Redux.

 L’application doit exposer les pages suivantes :

-       Accueil : page d’accueil

-       Produits: lister les produits

-       DetailsProduit: afficher les détails d’un produit

-       Panier: afficher les produits ajoutés dans le panier

Vous trouverez ci-dessous les tâches à faire.

Travail à faire

1. Mise en place & Routage

1. Configurez les routes suivantes :  

●     / → Accueil

●     /produits → Liste les produits

●     /produits/:id → Détails d’un produit

●     /panier → Panier

2. Et créez un menu contenant des liens vers les pages suivantes :  

●     Accueil

●     Produits

●     Panier

2. Page Produits

1. Dans la page Produits,   

Récupérez une liste de produits depuis https://fakestoreapi.com/products.

2. Affichez les produits sous le format indiqué dans la section  ‘Annexes’ (Voir Ref au dessous).
    Chaque produit doit être rendu via un composant <ProduitCard /> recevant des propriétés.

3. Si les produits ne sont pas encore chargés → affichez "Chargement…".
    Si erreur → affichez "Erreur lors du chargement". 

4. Créez un petit formulaire "Ajouter un produit",

●     champ texte : titre

●     champ number: prix

●     bouton submit

5. À la soumission du formulaire,

●     Envoyer la requête d’ajout à l’API.

●     Afficher l’objet créé dans la console.

3. Détail d’un produit

Dans la page DetailsProduit (accessible via le clic sur le bouton ‘Voir Details’),

Affichez les informations suivantes (sous le format indiqué dans la section  ‘Annexes’) :

○     image

○     titre

○     prix

○     description

○     un bouton "Ajouter au panier" (Géré par Redux, plus loin)

------------------------

4. Redux — Panier

1. Créez un store Redux qui gère un panier :

●     state initial : { items: [] }

●     reducer :

○     AJOUTER: ajoute un produit au panier

○     SUPPRIMER: supprime un produit

2. Dans la page DetailsProduit,

Le bouton "Ajouter au panier" doit envoyer l’action AJOUTER.

Dans la page Panier (Voir la section  ‘Annexes’),

3. Affichez la liste des produits présents dans Redux

Le bouton "Supprimer" pour chaque élément, qui doit envoyer l’action SUPPRIMER.

-----------------------------------------------------------

Ref Annexes:

https://docs.google.com/document/d/e/2PACX-1vSPNI2uTzHppADoQ24IuphnZdWxWZPXbANgaElq1xsWO03kWKUQlpx7SLajTMedGbJfqRSq-wy0umt9/pub

+fichier 'explanations.pdf'

===============================

Contexte

Vous développez une petite application React + Redux Toolkit qui démontre comment combiner plusieurs slices dans un store unique.

Objectifs

1. Mettre en place un store Redux configuré avec configureStore.

2. Créer deux slices :

   • userSlice : gère l’authentification (connexion/déconnexion).

   • tasksSlice : gère une liste de tâches (CRUD minimal).

3. Dans l’UI :

   • Tant que l’utilisateur n’est pas connecté, afficher un écran Login.

   • Une fois connecté, afficher l’écran Tasks :

     • lister les tâches,

     • ajouter une tâche,

     • supprimer une tâche,

     • basculer l’état completed (terminée / non terminée).

4. Utiliser :

   • useSelector pour lire state.user et state.tasks,

   • useDispatch pour déclencher login, logout, addTask, toggleTask, removeTask.

Règles fonctionnelles

• Un utilisateur se connecte en fournissant un nom (ex: “John”).

• Une tâche est un objet : { id, text, completed }.

• L’ajout refuse les textes vides.

• Le toggle inverse completed.

• La suppression retire la tâche du tableau.

• Le store global doit ressembler à :

  {
    user: { name: "Guest", isLoggedIn: false },
    tasks: [ { id: 1, text: "...", completed: false }, ... ]
  }
  

https://docs.google.com/document/d/1gtnj3-a-_Gbcv02y7rFa0EQy37jjTpuIDw9wbM6wMfI/edit?usp=sharing

Compléter une mini-application React + Redux permettant de charger des posts depuis une API distante en utilisant des actions asynchrones (thunk).

API fournie :

https://jsonplaceholder.typicode.com/posts?_limit=5

1️⃣ redux/postsSlice.js (à compléter)

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

/* =========
   ÉTAT INITIAL
   ========= */
const initialState = {
  posts: ____________,     // tableau vide
  loading: ____________,   // false
  error: ____________      // null
};

/* =========
   SLICE
   ========= */
const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {
    fetchPostsStart: (state) => {
      state.loading = ____________;
      state.error = ____________;
    },

    fetchPostsSuccess: (state, action) => {
      state.posts = ____________;
      state.loading = ____________;
    },

    fetchPostsError: (state, action) => {
      state.error = ____________;
      state.loading = ____________;
    }
  }
});

/* =========
   EXPORT DES ACTIONS
   ========= */
export const {
  ____________________,
  ____________________,
  ____________________
} = postsSlice.actions;

/* =========
   ACTION ASYNCHRONE (THUNK)
   ========= */
export const fetchPostsAsync = () => async (dispatch) => {
  dispatch(____________________());

  try {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts?_limit=5"
    );

    dispatch(____________________(response.data));
  } catch (error) {
    dispatch(____________________(error.message));
  }
};

export default postsSlice.reducer;

2️⃣ redux/store.js (à compléter)

import { configureStore } from "@reduxjs/toolkit";
import postsReducer from "./postsSlice";

const store = configureStore({
  reducer: {
    ____________: postsReducer
  }
});

export default store;

3️⃣ components/PostsList.js (à compléter)

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { ____________________ } from "../redux/postsSlice";

const PostsList = () => {
  const dispatch = ____________________();

  const { posts, loading, error } = useSelector(
    (state) => state.____________
  );

  const handleFetch = () => {
    dispatch(____________________());
  };

  return (
    <div style={{ textAlign: "center" }}>
      <button onClick={handleFetch} disabled={loading}>
        {loading ? "Chargement..." : "Charger les posts"}
      </button>

      {loading && <p>Chargement en cours...</p>}

      {error && (
        <p style={{ color: "red" }}>
          Erreur : {error}
        </p>
      )}

      <ul>
        {posts.map((post) => (
          <li key={post.____}>
            {post.____}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostsList;

4️⃣ App.js (à compléter)

import React from "react";
import PostsList from "./components/PostsList";

const App = () => {
  return (
    <div>
      <h1 style={{ textAlign: "center" }}>
        ______________________________
      </h1>

      <PostsList />
    </div>
  );
};

export default App;

5️⃣ index.js (à compléter)

import React from "react";
import ReactDOM from "react-dom";
import { ____________ } from "react-redux";
import store from "./redux/store";
import App from "./App";

ReactDOM.render(
  <____________ store={store}>
    <App />
  </____________>,
  document.getElementById("root")
);

question 2 (video useSelectors) : est ce que en peut accede au donnee de store sans utiliser useSelectors ?

question 3 (video Asynchronous) : la difference entre asynchrone implicite et asynchrone explicite ?

question 4 : cette question a propos sur la solution de l'exercice des slices : est ce que "useMemo" est obligatoire dans cet exercice, ou est-ce seulement une optimisation ?

Merci d’avance (EL KHADIR)

=====Réponses===========================

Réponse 1 (Plusieurs Reducers) : quand on a un état complexe => diviser en modules indépendants (ex: users, projets, tasks) pour éviter d'avoir un fichier géant illisible et difficile à déboguer.

Réponse 2 (Accès sans useSelector) : Oui, via store.getState(). Cependant, contrairement à useSelector, cela ne déclenche pas de re-render automatique quand les données changent.

Réponse 3 (Asynchrone Implicite vs Explicite) :

• Implicite (Thunk classique) : Tu crées manuellement une fonction qui contient ta logique async/await et tu dispatch toi-même chaque étape (start, success, error) pour mettre à jour le store.

• Explicite (createAsyncThunk) : Tu utilises la fonction native de Redux Toolkit qui gère automatiquement le cycle de vie de la promesse en générant les actions pending, fulfilled et rejected sans dispatch manuel.

Réponse 4 (useMemo dans l'exercice) : C'est une optimisation. Ce n'est pas obligatoire pour que le code fonctionne, mais c'est recommandé pour éviter de recalculer des données lourdes à chaque rendu si ce n'est pas nécessaire.

medjemmakh078@hmail.com

ayoubchakiri105@gmail.com

hajar2006hahioui@gmail.com

Enoncé:

On veut développer une application multi-service qui permet :
- La gestion des suites de l’hôtel
- La gestion des réservations des suites
On commencera par développer le service Service-suite, qui permet de :
 + Vérifier la disponibilité d’une suite
 + Mettre à jour la disponibilité d’une suite
 + Ajouter une suite
 + Supprimer une suite

Travail à Faire:

-Implémenter l'API REST correspondante.

-Procéder aux tests des différents 'endpoints'.

N.B:

On considérera les champs suivants:
-idSuite

-designation

-etage

-capacite

-disponibilite

On veut développer une application multi-service qui permet :
- La gestion des suites de l’hôtel
- La gestion des réservations des suites
On a décidé de développer les services suivants :
- Service-suite, qui permet de :
 + Vérifier la disponibilité d’une suite
 + Mettre à jour la disponibilité d’une suite
 + Ajouter une suite
 + Supprimer une suite
- Service-client, qui permet de :
 + Ajouter une réservation :
- On doit vérifier la disponibilité de la suite, avant la
réservation
- On doit mettre à jour la disponibilité de la suite,

après la réservation
 + Annuler une réservation
- On doit mettre à jour la disponibilité de la suite,

après l’annulation

Travail à Faire:

-Implémenter les API REST correspondantes.

-Procéder aux tests des API.

N.B:

On considérera les champs suivants pour les suites:
-idSuite

-designation

-etage

-capacite

-disponibilite

On considérera les champs suivants pour les réservations:
-idReservation

-dateDebut

-dateFin

-état seulement si la suite est annulée, avec la valeur positionnée à 'annulée'

-idSuite

1-installation => npm install -g nodemon

2-configuration du 'package.json' => dans la clé 'scripts': ajouter -> "dev": "nodemon index.js"

{
  "name": "projet_auth",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.js",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.1.1",
    "express": "^4.19.2",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^8.3.2",
    "nodemon": "^3.1.14"
  }
}

3- Pour lancer l'API => nodemon index.js

1- Tests

• authentifier un utilisateur et récupérer le JWT.

• Ajouter un produit avec les scénarios suivants:

  • JWT non envoyé

  • JWT envoyé, mais incorrect

  • JWT envoyé et correct

2- Exercice:

• Modifier l'endpoint d'ajout de produits afin d'include le code de produit en tant que donnée des produits.

• Ajouter au microservice 'produit' les endpoints de 'suppression', mise à jour des prix des produits qui seront contrôlés par le middleware.

• Ajouter au microservice 'produit' l'endpoint de 'listing' des produits non contrôlé par le middleware.

• Modifier le middleware afin d'inclure la date de la requête dans la réponse.

• Effectuer les tests adéquats via Postman.

-Amender le microservice produi-service afin d'ajouter un endpoint qui permet de verifier l'existence d'un produit en se basant sur son id.

- Implémenter le microservice commande-service qui présente un endpoint de création de commandes sur les produits; une commande est identifiée par son id, l'id du produit commandé, sa date, sa quantité, et l'email de l'utilisateur qui l'a fait;

Avant de commander, on doit s'assurer de l'existence du produit.

N.B:

-Toutes les routes sont sécurisées par un middleware d'authentification JWT

-------------------------------------------

Exercice Middleware 'authentification-microservices' v3:

Adopter la structure du projet ci-joint pour votre projet

==============================

Travail à faire:

Développer un microservice qui permet de:

• Enregister les utilisateurs à travers leurs Email et mots de passe

• Authentifier les utilisateurs, et générer des tokens JWT pour les utilisateurs connectés; On effectue un contrôle sur le statut du compte de l'utilisateur (activé/désactivé)

• Désactiver les comptes des utilisateurs

• Activer les comptes des utilisateurs

Plan Présentation: Prévues le 10/04/2026

-Présentation du lieu du stage

-Présentation du contexte général

-Présentation du cahier de charges

-Présentation de la solution (Concption + Implémentation)

===========================================

Livrables: Date limite 03/04/2026

1-Rapport (pdf)

2-dump SQL (BD)

3-Application

=> Dossier (fichier compréssé) nommé sous format: noms-des-personnes_stage_devowfs201 à partager à partir de Goggle Drive