<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- Définit le type de contenu, l'encodage des caractères et le langage de script pour cette page JSP -->

<html>
<head>
    <title>Create Couleur</title>
    <!-- Titre de la page, apparaîtra dans l'onglet du navigateur -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <!-- Lie un fichier CSS externe pour le style de la page -->
    <!-- Inclure les fichiers CSS/JS si nécessaire -->
    <!-- Commentaire indiquant un emplacement pour inclure d'autres fichiers CSS ou JS -->
    <!-- http://localhost:8080/demo/webapps/jsp/CouleurForm.jsp -->
    <!-- Commentaire indiquant l'URL d'accès à cette page JSP -->
</head>
<body>
     <!-- Inclure le menu -->
     <jsp:include page="menu.jsp" />
     <!-- Inclut un autre fichier JSP (menu.jsp), permettant la réutilisation du code -->

    <h1>Alimentations</h1>
    <!-- Titre principal de la page -->
    <h2>Create Couleur Form</h2>
    <!-- Sous-titre de la section du formulaire -->
    <form id="createCouleurForm" action="/couleur" method="post">
        <!-- Début du formulaire avec l'attribut 'action' définissant l'URL de traitement du formulaire -->
        <label for="nom">Nom de la Couleur:</label>
        <!-- Étiquette pour le champ de saisie du nom de la couleur -->
        <input type="text" id="nom" name="nom" required><br><br>
        <!-- Champ de saisie pour le nom de la couleur -->

        <label for="hexadecimal_rvb">Code Hexadecimal RGB:</label>
        <!-- Étiquette pour le champ de saisie du code RGB hexadécimal -->
        <input type="text" id="hexadecimal_rvb" name="hexadecimal_rvb" required><br><br>
        <!-- Champ de saisie pour le code RGB hexadécimal -->

        <input type="submit" value="Submit">
        <!-- Bouton pour soumettre le formulaire -->
    </form>
    <!-- Élément pour afficher la réponse -->
    <div id="response"></div>
    <!-- Zone pour afficher les réponses du serveur après la soumission du formulaire -->
    <script>
        document.getElementById('createCouleurForm').addEventListener('submit', function(event) {
            event.preventDefault();
            <!-- Empêche le comportement par défaut du formulaire (rechargement de la page) -->

            var formData = new FormData(this);
            <!-- Crée un objet FormData à partir du formulaire -->
            var jsonData = {};
            <!-- Initialise un objet vide pour le JSON -->

            for (var [key, value] of formData.entries()) {
                jsonData[key] = value;
                <!-- Convertit chaque paire clé/valeur du formulaire en JSON -->
            }

            console.log(jsonData);
            <!-- Affiche les données JSON dans la console du navigateur -->

            fetch('http://localhost:8080/couleur', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(jsonData)
                <!-- Envoie une requête POST avec les données JSON au serveur -->
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.statusText);
                }
                return response.json();
                <!-- Traite la réponse du serveur -->
            })
            .then(data => {
                document.getElementById('response').innerHTML = 'Response: ' + JSON.stringify(data);
                <!-- Affiche la réponse du serveur dans l'élément 'response' -->
            })
            .catch(error => {
                console.error('Error:', error);
                <!-- Affiche les erreurs dans la console -->
            });
        });
    </script>
</body>
</html>

Ce fichier JSP est utilisé pour créer une interface utilisateur web pour soumettre des informations sur une nouvelle couleur. Il comprend un formulaire pour saisir le nom et le code hexadécimal RGB de la couleur, et utilise JavaScript pour traiter la soumission du formulaire et communiquer avec le serveur via une requête AJAX.

 

Modifié le: jeudi 23 novembre 2023, 03:42