Exercices Front

Exercices : Mise à jour et suppression des aliments

Objectif

L'objectif de cet exercice est d'étendre votre application existante pour permettre la mise à jour et la suppression des aliments. Vous allez ajouter des fonctionnalités pour modifier et supprimer des aliments de la liste.

Exercice 1 : Mise à jour des aliments

Instructions

1. Ajouter un bouton "Modifier" :

   • Pour chaque aliment affiché dans la liste, ajoutez un bouton "Modifier".

2. Créer un formulaire de modification :

   • Lorsque l'utilisateur clique sur le bouton "Modifier", un formulaire doit apparaître, pré-rempli avec les informations actuelles de l'aliment.
   • Utilisez JavaScript pour remplir dynamiquement les champs du formulaire avec les données de l'aliment sélectionné.

3. Envoyer les modifications :

   • Ajoutez un gestionnaire d'événements pour le formulaire de modification qui envoie une requête PUT à votre API pour mettre à jour les informations de l'aliment.
   • Assurez-vous que l'API est capable de gérer les requêtes PUT pour mettre à jour les aliments.

Exemple de code

function openEditForm(food) {
    document.getElementById('edit-food-id').value = food.id;
    document.getElementById('edit-food-name').value = food.name;
    document.getElementById('edit-food-type').value = food.type;
    document.getElementById('edit-food-emoji').value = food.emoji;
    document.getElementById('edit-form').style.display = 'block';
}

async function updateFood(event) {
    event.preventDefault();
    const id = document.getElementById('edit-food-id').value;
    const name = document.getElementById('edit-food-name').value;
    const type = document.getElementById('edit-food-type').value;
    const emoji = document.getElementById('edit-food-emoji').value;

    const response = await fetch(`http://localhost/Food/back/foods/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name, type, emoji }),
    });

    if (response.ok) {
        fetchFoods(); // Rafraîchir la liste des aliments
        document.getElementById('edit-form').style.display = 'none';
    } else {
        console.error('Erreur lors de la mise à jour de l\'aliment');
    }
}

Exercice 2 : Suppression des aliments

Instructions

1. Ajouter un bouton "Supprimer" :

   • Pour chaque aliment affiché dans la liste, ajoutez un bouton "Supprimer".

2. Gérer la suppression :

   • Ajoutez un gestionnaire d'événements pour le bouton "Supprimer" qui envoie une requête DELETE à votre API pour supprimer l'aliment.
   • Assurez-vous que l'API est capable de gérer les requêtes DELETE pour supprimer les aliments.

3. Rafraîchir la liste :

   • Après la suppression d'un aliment, assurez-vous de rafraîchir la liste des aliments pour refléter les changements.

Exemple de code

async function deleteFood(id) {
    const response = await fetch(`http://localhost/Food/back/foods/${id}`, {
        method: 'DELETE',
    });

    if (response.ok) {
        fetchFoods(); // Rafraîchir la liste des aliments
    } else {
        console.error('Erreur lors de la suppression de l\'aliment');
    }
}

Conseils

• Assurez-vous que votre API back-end est configurée pour gérer les requêtes PUT et DELETE.
• Testez chaque fonctionnalité individuellement pour vous assurer qu'elle fonctionne correctement avant de passer à la suivante.
• Utilisez la console du navigateur pour déboguer et vérifier que les requêtes sont envoyées correctement.