Forum : Projet réseau social un utilisateur voit le profil d'un ami

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 affiché. Dans mes consignes on me demande à ce que l'administrateur puisse voir le profil d'un de ses amis. J'ai codifié ceci mais le profil de l'ami n'est pas affiché dans le navigateur. Pouvez vous m'aider SVP? Merci a vous tous 
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<div class="card">
<img
src="assets/Juan.png"
alt="Photo de profil"
class="rounded-circle img-fluid"
style="width: 150px"
/>

        <div class="card-body">
          <h5 class="card-title" id="username">Pseudonyme</h5>
          <p class="card-text" id="FullName">Nom et Prénom</p>
          <p class="card-text" id="age">Age</p>
          <p class="card-text" id="gender">Genre</p>
          <p class="card-text" id="email">Email</p>
          <p class="card-text" id="contact">Coordonnées</p>
          <p class="card-text" id="bio">Présentation</p>
          <p class="card-text" id="preferences">Préférences</p>
          <a href="#" class="btn btn-primary">Modifier les informations</a>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Identité des utilisateurs</div>
        <div class="card-body">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Nom</th>
                <th scope="col">Prénom</th>
                <th scope="col">Voir le profil</th>
              </tr>
            </thead>
            <tbody id="usersTableBody">
              <!-- Charger les données des utilisateurs ici -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<!--Voir le profil d'un ami de l'administrateur-->
<div
  class="modal fade"
  id="viewProfileModal"
  tabindex="-1"
  aria-labelledby="viewProfileModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="viewProfileModalLabel">
          Profil de l'ami
        </h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <img
          src="assets/Rafa.png"
          alt="Photo de profil de l'ami"
          class="rounded-circle img-fluid"
          style="width: 150px"
        />
        <p>
          <strong>Pseudonyme :</strong> <span id="friendUsername"></span>
        </p>
        <p>
          <strong>Nom et Prénom :</strong> <span id="friendFullName"></span>
        </p>
        <p><strong>Age :</strong> <span id="friendAge"></span></p>
        <p><strong>Genre :</strong> <span id="friendGender"></span></p>
        <p><strong>Email :</strong> <span id="friendEmail"></span></p>
        <p>
          <strong>Coordonnées :</strong> <span id="friendContact"></span>
        </p>
        <p><strong>Présentation :</strong> <span id="friendBio"></span></p>
        <p>
          <strong>Préférences :</strong>
          <span id="friendPreferences"></span>
        </p>
      </div>
    </div>
  </div>
</div>

8 réponses

young_ryan360

Réponse acceptée

Si j'ai bien compris, c'est l'affichage du modal qui cause problème. Essaie d'ajouter cette variable :

// Afficher le modal
   const modal = new bootstrap.Modal(document.getElementById('viewProfileModal'));
   modal.show();

Place là de telle sorte que

modal.show()

se déclanche lorsqu'on clique sur le bouton voir le profil. Bonne chance.

young_ryan360

Réponse acceptée

Si dans le fichier profil.html aussi il y a un modal qui ne s'affiche pas, alors oui.

young_ryan360

Réponse acceptée

Effectivement, si le modal ne s'affiche pas alors surement il s'agit d'un script qui ne marche pas pour une raison quelconque. Le mieux serait de vérifier avec l'inspercteur de ton navigateur.

juan.3594

Auteur

Suite à ta réponse cette variable je l'ai mis sur mon scripts.js (javascript) se présentant comme ceci : // fonction pour voir le profil de l'ami
window.viewFriendProfile = function (userId) {
fetch(http://localhost:3000/api/users/${userId}, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: Bearer ${localStorage.getItem("token")},
},
})
.then((response) => {
if (!response.ok) {
throw new Error("Failed to fetch user profile");
}
return response.json();
})
.then((data) => {
document.getElementById("friendUsername").innerText = data.username;
document.getElementById("friendFullName").innerText = data.fullname;
document.getElementById("friendAge").innerText = data.age;
document.getElementById("friendGender").innerText = data.gender;
document.getElementById("friendEmail").innerText = data.email;
document.getElementById("friendContact").innerText = data.contact;
document.getElementById("friendBio").innerText = data.bio;
document.getElementById("friendPreferences").innerText =
data.preferences;
const modal = new bootstrap.Modal(
document.getElementById("viewProfileModal")
);
modal.show();
})
.catch((error) =>
console.error(
"Erreur lors de la récupération du profil de l'ami :",
error
)
);
};

checkUserType();
}); Est ce que cette variable je le rajoute aussi sur profil.html?

juan.3594

Auteur

Young_Ryan je n'ai pas réussi. Dans le navigateur le profil de l'ami n'est toujours pas affiché. Je suis complètement paumé. Rien ne se passe quand j'inspecte en console. <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page de profil administrateur - Paris-JO2024</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
role="navigation"

<a class="navbar-brand" href="index.html">Paris-JO2024</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"

<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.html">Inscription</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Connexion</a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.html">Déconnexion</a>
</li>
</ul>
</div>
</nav>

<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<div class="card">
<img
src="assets/Juan.png"
alt="Photo de profil de Juan"
class="rounded-circle img-fluid"
style="width: 150px"
/>
<div class="card-body">
<h5 class="card-title" id="username">Pseudonyme</h5>
<p class="card-text" id="fullname">Nom et Prénom</p>
<p class="card-text" id="age">Age</p>
<p class="card-text" id="gender">Genre</p>
<p class="card-text" id="email">Email</p>
<p class="card-text" id="contact">Coordonnées</p>
<p class="card-text" id="bio">Présentation</p>
<p class="card-text" id="preferences">Préférences</p>
<a href="#" class="btn btn-primary">Modifier les informations</a>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">Identité des utilisateurs</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Voir le profil</th>
</tr>
</thead>
<tbody id="usersTableBody">

</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<div
class="modal fade"
id="viewProfileModal"
tabindex="-1"
aria-labelledby="viewProfileModalLabel"

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="viewProfileModalLabel">
Profil de l'ami
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
</button>
</div>
<div class="modal-body text-center">
<img
src="assets/Rafa.png"
alt="Photo de profil de Rafa"
class="rounded-circle img-fluid"
style="width: 150px"
/>
<p>
<strong>Pseudonyme :</strong> <span id="friendUsername"></span>
</p>
<p>
<strong>Nom et Prénom :</strong> <span id="friendFullName"></span>
</p>
<p><strong>Age :</strong> <span id="friendAge"></span></p>
<p><strong>Genre :</strong> <span id="friendGender"></span></p>
<p><strong>Email :</strong> <span id="friendEmail"></span></p>
<p>
<strong>Coordonnées :</strong> <span id="friendContact"></span>
</p>
<p><strong>Présentation :</strong> <span id="friendBio"></span></p>
<p>
<strong>Préférences :</strong>
<span id="friendPreferences"></span>
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="scripts.js"></script>
</body>
</html> et scripts.js // profil de l'administrateur
function loadAdminProfile() {
const username = localStorage.getItem("username");
const fullname = localStorage.getItem("FullName");
const age = localStorage.getItem("age");
const gender = localStorage.getItem("gender");
const email = localStorage.getItem("email");
const contact = localStorage.getItem("contact");
const bio = localStorage.getItem("bio");
const preferences = localStorage.getItem("preferences");

document.getElementById("username").innerText = username;
document.getElementById("fullname").innerText = fullname;
document.getElementById("age").innerText = age;
document.getElementById("gender").innerText = gender;
document.getElementById("adminEmail").innerText = email;
document.getElementById("contact").innerText = contact;
document.getElementById("bio").innerText = bio;
document.getElementById("preferences").innerText = preferences;

}

// chargement du profil de l'administrateur
function loadUsers() {
fetch("http://localhost:3000/api/users", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: Bearer ${localStorage.getItem("token")},
},
})
.then((response) => {
if (!response.ok) {
throw new Error("Failed to fetch users");
}
return response.json();
})
.then((data) => {
const usersTableBody = document.getElementById("usersTableBody");
usersTableBody.innerHTML = ""; // Vide la table avant le chargement des données
data.users.forEach((user) => {
const row = document.createElement("tr");
row.innerHTML = <td>${user.FullName}</td> <td>${user.email}</td></td> <td> <button class="btn btn-sm btn-warning">modifier</button> <button class="btn btn-sm btn-danger">supprimer</button> </td>;

      usersTableBody.appendChild(row);
    });
  })
  .catch((error) =>
    console.error("Erreur lors du chargement de l'administrateur :", error)
  );

}

checkUserType();
});
Tu aurais une autre solution? Merci à toi

juan.3594

Auteur

Young_ryan je pense que ça doit être le modal en lui même qui me pose problème. J'ai vérifié sur le site https://getbootstrap.com/docs/5.0/components/modal/. Qu'en penses tu?

juan.3594

Auteur

[RESOLU] Young_Ryan j'ai pu résoudre mon problème. J'ai remplacé modal fade par Mt-container et ça a marché. Le profil de l'ami du navigateur a pu s'afficher dans le navigateur. Effectivement la modale masque par défaut et sont faites pour être déclenchées par javascript en cliquant sur un bouton ou autre évènement. Merci beaucoup pour ton aide. A très bientôt.

young_ryan360

Ravi d'avoir pu t'aider ;⁠-⁠)