1 ere phase complète

app/Http/Controllers/ClientController.php

@@ -25,7 +25,7 @@ class ClientController extends Controller
     }
 
     /**
-     * Requete 
+     * update le client
      */
     public function update(Request $request, $id) {
         $client = Client::findOrFail($id);

app/Http/Controllers/FrontendController.php

@@ -27,5 +27,17 @@ class FrontendController extends Controller
         return view('clients');
     }
 
+    public function supprimer($id){
+        $client = Client::findOrFail($id);
+        $client->delete();
+        return response()->noContent();
+    }
 
+    public function update(Request $request, $id) {
+        $client = Client::findOrFail($id);
+        $client->update($request->all());
+    return $client;
+    }
+
+    public function unClient($id) { return view('majClient'); }
 }

public/css/style.css

@@ -43,3 +43,75 @@ nav {
     nav a:hover {
         text-decoration: underline;
     }
+
+    body {
+        font-family: "Inter", sans-serif;
+        background: #f5f6fa;
+        padding: 50px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    h1 {
+        font-weight: 600;
+        margin-bottom: 35px;
+        color: #1d1d1f;
+    }
+
+    .form-clean {
+        background: #58a198;
+        padding: 40px 45px;          /* plus de padding */
+        border-radius: 14px;
+        width: 100%;
+        max-width: 450px;
+        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
+        display: flex;
+        flex-direction: column;
+        gap: 22px;                   /* spacing entre les champs */
+    }
+
+    .field {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    .form-clean label {
+        font-size: 15px;
+        color: #333;
+        font-weight: 500;
+    }
+
+    .form-clean input {
+        padding: 14px 16px;          /* plus de padding dans les inputs */
+        border-radius: 10px;
+        border: 1px solid #dcdce0;
+        background: #fafafa;
+        font-size: 15px;
+        transition: 0.25s;
+    }
+
+    .form-clean input:focus {
+        border-color: #000;
+        background: #fff;
+        box-shadow: 0 0 0 3px rgba(0,0,0,0.07);
+        outline: none;
+    }
+
+    .btn-submit {
+        margin-top: 10px;
+        padding: 14px 20px;
+        border-radius: 10px;
+        border: none;
+        background: #1d1d1f;
+        color: #fff;
+        font-size: 16px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: 0.25s;
+    }
+
+    .btn-submit:hover {
+        background: #000;
+    }

resources/views/clients.blade.php

@@ -17,6 +17,7 @@
                                             <th scope=\"col\">Nom du client</th> 
                                             <th scope=\"col\">Adresse e-mail</th> 
                                             <th scope=\"col\">Voir le client</th>
+                                            <th scope=\"col\">Supprimer</th>
                                         </tr> 
                                     </thead>
                                     <tbody> `;
@@ -25,16 +26,103 @@
                 table.innerHTML += `<tr> 
                                         <td>${c.nom}</td>
                                         <td>${c.email}</td>
-                                        <td><a href="{{ url('/clients/${c.id}') }}">le client ${c.id}<a></td>
+                                        <td><a href="#" onclick="leClient(${c.id});">Informations</a></td>
+                                        <td><a href="#" onclick="supprimer(${c.id});">supprimer</a></td>
                                     </tr>`;
                 });
-                list.innerHTML += "</tbody> </table>"
+                list.innerHTML += "</tbody> </table> "
 
             } catch (error) {
                 console.error('Erreur :', error);
                 list.innerHTML = '<li>Impossible de charger les clients</li>';
             }
         }
+        
+        async function supprimer(id){
+                try{
+                    await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
+                        method: 'DELETE'
+                    });
+                    await loadClients();
+                }catch(err){
+                    console.error(err);
+                }
+            }
+
+        async function leClient(id) {
+            try {
+                const response = await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
+                    method: 'GET'
+                });
+
+                if (!response.ok) {
+                    throw new Error("Client introuvable");
+                }
+
+                const client = await response.json();
+
+                // zone d'affichage
+                const zone = document.getElementById("client-info");
+
+                // formulaire
+                zone.innerHTML = `
+                    <h2>Modifier le client</h2>
+
+                    <form onsubmit="updateClient(${client.id}); return false;">
+                        
+                        <label>Nom :</label><br>
+                        <input type="text" id="edit-nom" value="${client.nom}" required><br><br>
+
+                        <label>Prénom :</label><br>
+                        <input type="text" id="edit-prenom" value="${client.prenom}" required><br><br>
+
+                        <label>Email :</label><br>
+                        <input type="email" id="edit-email" value="${client.email}" required><br><br>
+
+                        <label>Numéro de téléphone :</label><br>
+                        <input type="text" id="edit-ntelephone" value="${client.ntelephone ?? ''}"><br><br>
+
+                        <button type="submit">Mettre à jour</button>
+                    </form>
+                `;
+            } catch (error) {
+                console.error(error);
+                document.getElementById("client-info").innerHTML =
+                    "<p>Erreur lors du chargement du client.</p>";
+            }
+        }
+
+        async function updateClient(id) {
+            try {
+                const nom = document.getElementById("edit-nom").value;
+                const prenom = document.getElementById("edit-prenom").value;
+                const email = document.getElementById("edit-email").value;
+                const telephone = document.getElementById("edit-ntelephone").value;
+
+                const response = await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
+                    method: 'PUT',
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ nom, prenom, email, telephone })
+                });
+
+                if (!response.ok) {
+                    throw new Error("Erreur de mise à jour");
+                }
+
+                alert("Client mis à jour !");
                 loadClients();
+
+            } catch (err) {
+                console.error(err);
+                alert("Impossible de mettre à jour le client.");
+            }
+        }
+
+
+        loadClients();
+
+        
     </script>
+    <div id="client-info"></div>
 @endsection
+

resources/views/creationClient.blade.php

@@ -2,21 +2,30 @@
 @section('content')
 <link href="{{ asset('css/style.css') }}" rel="stylesheet">
 <h1>Création d'un nouveau client</h1>
-<form action="{{ url('ajout')}}" method="POST">
+<form class="form-clean" action="{{ url('/clients/ajout') }}" method="POST">
     @csrf
-    <label for="nom">Nom:</label>
-    <input type="text" name="nom" id="nom" required>
+    <div class="field">
+        <label for="nom">Nom</label>
+        <input type="text" id="nom" name="nom" required>
+    </div>
 
-    <label for="prenom">Prenom:</label>
-    <input type="text" name="prenom" id="prenom" required>
+    <div class="field">
+        <label for="prenom">Prénom</label>
+        <input type="text" id="prenom" name="prenom" required>
+    </div>
 
-    <label for="email">E-mail:</label>
-    <input type="text" name="email" id="email" required>
+    <div class="field">
+        <label for="email">E-mail</label>
+        <input type="email" id="email" name="email" required>
+    </div>
 
-    <label for="telephone">Numero de Telephone:</label>
-    <input type="text" name="telephone" id="telephone">
+    <div class="field">
+        <label for="telephone">Téléphone</label>
+        <input type="text" id="telephone" name="telephone">
+    </div>
 
-    <input type="submit" value="Soumettre">
+    <button class="btn-submit" type="submit">Soumettre</button>
 </form>
 
+
 @endsection

resources/views/layout.blade.php

@@ -10,9 +10,6 @@
     <a href="{{ url('/') }}">Accueil</a>
     <a href="{{ url('/clients') }}">Liste des clients</a>
     <a href="{{ url('/ajoutClient') }}">Crée un client</a>
-    <a href="{{ url('/clients') }}">Mise à jour complète d'un client</a>
-    <a href="{{ url('/clients') }}">Mise à jour partielle d'un client</a>
-    <a href="{{ url('/clients') }}">Supprimer un client</a>
 </nav>
 
     

resources/views/majClient.blade.php

@@ -0,0 +1,5 @@
+@extends('layout')
+@section('content')
+<link href="{{ asset('css/style.css') }}" rel="stylesheet">
+
+@endsection

routes/api.php

@@ -13,5 +13,5 @@ Route::get('/user', function (Request $request) {
 Route::get('/clients', [ClientController::class, 'index']);
 Route::get('/clients/{id}', [ClientController::class, 'show']) ;
 Route::delete('/clients/{id}', [ClientController::class, 'destroy']);
-Route::post('/clients', [ClientController::class , 'store']);
+Route::post('/clients/ajout', [ClientController::class , 'store']);
 Route::put('/clients/{id}', [ClientController::class, 'update']);

routes/web.php

@@ -10,3 +10,7 @@ Route::get('/', function () {
 Route::get('/', [FrontendController::class, 'accueil']);
 Route::get('/clients', [FrontendController::class, 'clients']);
 Route::get('/ajoutClient', [FrontendController::class, 'creer']);
+Route::post('/clients/ajout', [FrontendController::class, 'ajout']);
+Route::delete('/clientsDel/{id}', [FrontendController::class, 'supprimer']);
+
+Route::put('/majClient/{id}',[FrontendController::class, 'update']);