Projet réseau social un utilisateur voit son profil (test)

Bonjour à tous.
Je dois créer un projet de réseau social équivalent à Facebook et je suis en train de créer le profil d'un membre utilisant boostrap 5. Dans le navigateur j'ai bien le profil principal de l'administrateur avec ses informations qui sont vide (Pseudonyme, nom et prénom, Age, gender, email, téléphone, bio et préférences). Dans mes consignes on me demande à ce que l'administrateur puisse voir son profil, le modifier et le supprimer. Ma question serait est- il possible que lorsqu' à titre d'exemple je mets une information de profil quelconque (exemple martin Dupont et tout son identité) elle puisse s'afficher automatiquement ou bien suis je obligé dans le VS code de les codifier manuellement en rajoutant un value sur pseudo, nom et prénom etc....? Merci à vous tous Voici mon code
[/code]

<!--identité du profil administrateur-->
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<img
src="assets/lego.png"
alt="Photo de profil de lego"
class="rounded-circle img-fluid"
style="width: 150px"
/>
<h4 class="mt-3">Pseudonyme:</h4>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
<form id="adminProfileForm">
<div class="mb-3">
<label for="adminUsername" class="form-label"

Pseudonyme</label

<input
type="text"
class="form-control"
id="adminUsername"
name="Username"
/>
</div>
<div class="mb-3">
<label for="adminFullName" class="form-label"
Nom et prénom</label

<input
type="text"
class="form-control"
id="adminFullName"
name="FullName"
/>
</div>
<div class="mb-3">
<label for="adminAge" class="form-label">Âge</label>
<input
type="number"
class="form-control"
id="adminAge"
name="Age"
/>
</div>
<div class="mb-3">
<label for="adminGender" class="form-label">Genre</label>
<select class="form-select" id="adminGender" name="Gender">
<option value="male">Masculin</option>
<option value="female">Féminin</option>
</select>
</div>
<div class="mb-3">
<label for="adminEmail" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="adminEmail"
name="Email"
/>
</div>
<div class="mb-3">
<label for="adminPhone" class="form-label">Téléphone</label>
<input
type="tel"
class="form-control"
id="adminPhone"
name="Phone"
/>
</div>
<div class="mb-3">
<label for="adminBio" class="form-label">Présentation</label>
<textarea
class="form-control"
id="adminBio"
name="Bio"
rows="3"
</textarea>
</div>
<div class="mb-3">
<label for="adminPreferences" class="form-label"
Préférences</label

<input
type="text"
class="form-control"
id="adminPreferences"
name="Preferences"
/>
</div>
<!--modification du profil de l'administrateur-->
<button type="submit" class="btn btn-primary">
Modifier les informations
</button>
<!--suppression du profil de l'administrateur-->
<button type="submit" class="btn btn-danger">Supprimer</button>
</form>
</div>
</div>
</div>
</div>
</div>

<!--Section pour supprimer le profil de l'administrateur-->
<div id="deleteProfileSection" class="container mt-5" style="display: none">
<div class="card">
<div class="card-body">
<h5>Supprimer le profil de l'Administrateur</h5>
<p>
êtes-vous sur de vouloir supprimer votre profil administrateur?
Cette action est irréversible.
</p>
<button type="submit" class="btn btn-danger">Supprimer</button>
<button
type="button"
class="btn btn-secondary"
onclick="hideDeleteProfileSection()"

Annuler
</button>
</div>
</div>
</div>

Modifié par juanito76 (26 Nov 2024 - 10:33)

Bonjour Felipe et Niuxe

En fait j'ai une consigne suite à mon projet qui me dit d'utiliser Javascript (ainsi qu'au choix Bootstrap, Jquery ou Angular) ainsi que le serveur côté backend. Pour Javascript mon code se présente comme ceci :

// Fonction pour charger le profil de l'administrateur
  document.addEventListener("DOMContentLoaded", () => {
    // Fonction pour charger le profil de l'administrateur
    function loadAdminProfile() {
      fetch("http://localhost:3000/api/profil", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error("Problème pour obtenir un profil");
          }
          return response.json();
        })
        .then((data) => {
          document.getElementById("adminUsername").value = data.username;
          document.getElementById("adminFullName").value = data.fullName;
          document.getElementById("adminAge").value = data.age;
          document.getElementById("adminGender").value = data.gender;
          document.getElementById("adminEmail").value = data.email;
          document.getElementById("adminPhone").value = data.contact;
          document.getElementById("adminBio").value = data.bio;
          document.getElementById("adminPreferences").value = data.preferences;
          if (data.profilePicture) {
            document.querySelector("img[alt='Photo de profil']").src =
              data.profilePicture;
          }
        })
        .catch((error) => {
          console.error("Erreur lors de la récupération du profil :", error);
          alert("Erreur lors de la récupération du profil : " + error.message);
        });
    }
    // Fonction pour charger les utilisateurs
    async function loadUsers() {
      try {
        const response = await fetch("http://localhost:3000/api/users", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
        });

        if (!response.ok) {
          throw new Error("Problème pour obtenir les utilisateurs");
        }

        const data = await response.json();
        const usersTableBody = document.getElementById("usersTableBody");
        if (usersTableBody) {
          usersTableBody.innerHTML = "";
          data.forEach((user) => {
            const row = document.createElement("tr");
            row.innerHTML = `
            <td>${user.username}</td>
            <td>${user.fullName}</td>
            <td><button onclick="viewFriendProfile(${user.id})">Voir le profil de l'ami</button></td>
            <td><button>Modifier</button></td>
            <td><button>Supprimer</button></td>
          `;
            usersTableBody.appendChild(row);
          });
        }
      } catch (error) {
        console.error(
          "Erreur lors de la récupération des utilisateurs :",
          error
        );
        alert(
          "Erreur lors de la récupération des utilisateurs : " + error.message
        );
      }
    }

    // Mise à jour du profil de l'administrateur
    const adminProfileForm = document.getElementById("adminProfileForm");

    adminProfileForm.addEventListener("submit", async function (event) {
      event.preventDefault();
      const formData = new FormData(adminProfileForm);
      const payload = Object.fromEntries(formData.entries());
      try {
        const response = await fetch("http://localhost:3000/api/profil", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
          body: JSON.stringify(payload),
        });
        const data = await response.json();
        if (response.ok) {
          alert("Profil mis à jour avec succès !");
          loadAdminProfile(); // rechargement du profil après mise à jour
        } else {
          alert("Erreur lors de la mise à jour du profil : " + data.message);
        }
      } catch (error) {
        console.error("Erreur lors de la mise à jour du profil :", error);
        alert("Erreur lors de la mise à jour du profil : " + error.message);
      }
    });

Modifié par Felipe (26 Nov 2024 - 15:40)