Page de gestion d'un membre

Site d'annonce (Expert)

Guillaume LELEU

Mis en ligne le 24-08-2023 à 09:18

Langues disponibles

1 . Récupérer et changer ses informations

Dans cette partie nous allons voir comment faire pour qu'un membre puisse changer ses informations.

Tout d'abord nous allons créer une page nommée "**manageprofile.php**" :

![](https://coding-school.fr/images/users/1692863791.PNG "")

Nous allons ensuite mettre un code de base :

``` 
<?php include 'include/config.php'; 
session_start();
if(!isset($_SESSION['user_login'])) 
{
  
}
else
{
  $id = $_SESSION['user_login'];
  $select_stmt = $db->prepare("SELECT * FROM user WHERE id=:uid");
  $select_stmt->execute(array(":uid"=>$id));
  $row=$select_stmt->fetch(PDO::FETCH_ASSOC);
}
?>
<html>
<head>
    <title>Page de connexion</title>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
    
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.1/mdb.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<?php include 'include/header.php'; ?>
<body>
    <?php include 'include/header.php'; ?>
    <div class="container">
      <br><br>
      
    </div>
    <script type="text/javascript" src="js/mdb.min.js"></script>
  </body>
</html>

```

Maintenant que nous sommes prêt, voici ce que l'on attends :

![](https://coding-school.fr/images/users/1692863434.PNG "undefined")

Comme vous pouvez le voir nous avons 2 colonnes :

- Mes informations
- Mes annonces

Pour faire cela nous allons utiliser ce code qui vient d'[ici](https://mdbootstrap.com/docs/standard/navigation/tabs/) :

```
  <ul class="nav nav-tabs nav-fill mb-3" id="ex1" role="tablist">
        <li class="nav-item" role="presentation">
          <a class="nav-link active" id="ex2-tab-1" data-mdb-toggle="tab" href="#ex2-tabs-1" role="tab" aria-controls="ex2-tabs-1" aria-selected="true"><i class="fa-solid fa-circle-info"></i> Mes informations</a>
        </li>
        <li class="nav-item" role="presentation">
          <a class="nav-link" id="ex2-tab-2" data-mdb-toggle="tab" href="#ex2-tabs-2" role="tab" aria-controls="ex2-tabs-2" aria-selected="false"><i class="fa-solid fa-list"></i> Mes annonces</a>
        </li>
      </ul>
```

Ce code est à placer en dessous du

``` 
  <div class="container">
  <br><br>
```

![](https://coding-school.fr/images/users/1692863997.PNG "")

Maintenant ajoutons du contenu dans les 2 colonnes :

``` 
  <div class="tab-content" id="ex2-content">
        <div class="tab-pane fade show active" id="ex2-tabs-1" role="tabpanel" aria-labelledby="ex2-tab-1">
          <p>Ceci est le paragraphe pour les informations</p>
        </div>
        </div>
        <div class="tab-pane fade" id="ex2-tabs-2" role="tabpanel" aria-labelledby="ex2-tab-2">
          <p>Ceci est le paragraphe pour les annonces</p>
        </div>

</div>
      </div>
```

Tout d'abord nous allons commencer par récupérer les informations de l'utilisateur comme :

- Photo de profil
- Nom 
- Prénom 
- Age

Voici le code complet pour faire cela :

``` 
  <div class="col-sm-12 align-center">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-12 col-md-8 col-lg-6 col-xl-9">
                  <form method="POST" enctype="multipart/form-data">
                    <label class="form-label"><i class="fa-solid fa-image"></i> Photo de profil</label>
                    <div class="form-outline mb-4">
                      <label for="profile_picture">
                          <?php 
                          $user = $_SESSION['user_login'];
                          $stmt = $db->query("SELECT profile_picture FROM user WHERE id = '$user'");
                          $profile_picture = $stmt->fetch();
                          $image_path = 'img/' . $id . '/' . $profile_picture['profile_picture'];

if ($profile_picture['profile_picture'] !== NULL) {
                              echo '<img src="' . $image_path . '" class="rounded-circle" height="150" alt="Username" loading="lazy" style="cursor:pointer;"/>';
                          } 
                          else 
                          {
                              echo '<img src="img/base.png" class="rounded-circle" height="200" width="180" loading="lazy" style="cursor:pointer;" />';
                          }
                          ?>
                          <input type="file" id="profile_picture" name="profile_picture" style="display:none;">
                      </label>
                    </div>
                    <div class="form-outline mb-4">
                      <?php 
                        $user = $_SESSION['user_login'];
                        $stmt = $db->query("SELECT nom FROM user WHERE id = '$user'");
                        $nom = $stmt->fetch();
                      ?>
                      <input type="text" id="nom" name="nom" class="form-control" value="<?php echo $nom['nom'];?>"/>
                      <label class="form-label" for="nom"><i class="fa-solid fa-user"></i> Nom</label>
                    </div>
                    <div class="form-outline mb-4">
                      <?php 
                        $user = $_SESSION['user_login'];
                        $stmt = $db->query("SELECT prenom FROM user WHERE id = '$user'");
                        $prenom = $stmt->fetch();
                      ?>
                      <input type="text" id="prenom" name="prenom" class="form-control" value="<?php echo $prenom['prenom'];?>"/>
                      <label class="form-label" for="prenom"><i class="fa-solid fa-user"></i> Prénom</label>
                    </div>
                    <div class="form-outline mb-4">
                      <?php 
                        $user = $_SESSION['user_login'];
                        $stmt = $db->query("SELECT email FROM user WHERE id = '$user'");
                        $email = $stmt->fetch();
                      ?>
                      <input type="email" id="email" name="email" class="form-control" value="<?php echo $email['email'];?>"/>
                      <label class="form-label" for="form1Example1"><i class="fa-solid fa-envelope"></i> Email</label>
                    </div>
                    <div class="form-outline mb-4">
                      <?php 
                        $user = $_SESSION['user_login'];
                        $stmt = $db->query("SELECT age FROM user WHERE id = '$user'");
                        $age = $stmt->fetch();
                      ?>
                      <input type="number" id="age" name="age" class="form-control" value="<?php echo $age['age'];?>"/>
                      <label class="form-label" for="form1Example1"><i class="fa-solid fa-arrow-down-9-1"></i> Age</label>
                    </div>
                    <button type="submit" name="btn_submit_change" class="btn btn-primary btn-block"><i class="fas fa-sync"></i> Mettre à jour ces informations</button>
                  </form>
                </div>
              </div>
            </div>
```

**Explication du code :**

Voici l'explication ligne par ligne du code que vous avez fourni :

```
<div class="col-sm-12 align-center">
```
Ceci crée une colonne Bootstrap qui est centrée horizontalement sur les petits écrans.

```
  <div class="row d-flex justify-content-center align-items-center h-100">
```

Ceci crée une ligne Bootstrap à l'intérieur de la colonne. Elle aligne horizontalement et verticalement le contenu au centre et occupe 100% de la hauteur de son conteneur parent.

```
    <div class="col-12 col-md-8 col-lg-6 col-xl-9">
```

Ceci crée une colonne qui s'adapte à différentes tailles d'écran, prenant toute la largeur sur les petits écrans mais réduisant progressivement la largeur sur les écrans plus grands.

```
      <form method="POST" enctype="multipart/form-data">
```

Ceci démarre un formulaire avec la méthode POST et un encodage multipart/form-data, qui est utilisé pour traiter les téléchargements de fichiers.

```
        <label class="form-label"><i class="fa-solid fa-image"></i> Photo de profil</label>
```

Ceci affiche une étiquette indiquant le champ pour télécharger la photo de profil, avec une icône d'image.

```
        <div class="form-outline mb-4">
```

Ceci crée un champ de formulaire avec une mise en forme spécifique.

```
          <label for="profile_picture">
            <?php 
            $user = $_SESSION['user_login'];
            $stmt = $db->query("SELECT profile_picture FROM user WHERE id = '$user'");
            $profile_picture = $stmt->fetch();
            $image_path = 'img/' . $id . '/' . $profile_picture['profile_picture'];

Ceci affiche l'image de profil actuelle de l'utilisateur en utilisant l'icône d'image si elle est disponible. Si aucune image n'est présente, une image par défaut est affichée. Un champ de téléchargement de fichier est également inclus, mais est caché (display:none;) et activé par l'image.

```
</div>
```
Ferme le div du champ de photo de profil.

```
<div class="form-outline mb-4">
```
Ceci crée un champ de formulaire pour le nom de l'utilisateur.

```
          <?php 
            $user = $_SESSION['user_login'];
            $stmt = $db->query("SELECT nom FROM user WHERE id = '$user'");
            $nom = $stmt->fetch();
          ?>
          <input type="text" id="nom" name="nom" class="form-control" value="<?php echo $nom['nom'];?>"/>
          <label class="form-label" for="nom"><i class="fa-solid fa-user"></i> Nom</label>
```
Ceci récupère le nom de l'utilisateur à partir de la base de données et affiche un champ de texte pour le modifier.

```
        </div>
```
Ferme le div du champ de nom.

```
        
```

```
        <button type="submit" name="btn_submit_change" class="btn btn-primary btn-block"><i class="fas fa-sync"></i> Mettre à jour ces informations</button>
```

Ceci crée un bouton de soumission pour mettre à jour les informations de l'utilisateur. Il affiche l'icône de synchronisation et le texte "Mettre à jour ces informations".

```
      </form>
```
Ferme le formulaire.

```
    </div>
```
Ferme la colonne Bootstrap.

```
  </div>
</div>
```
Ferme la ligne et la colonne Bootstrap, complétant ainsi la mise en forme et la structure de la page pour permettre à l'utilisateur de mettre à jour ses informations de profil.

Maintenant vous pouvez récupérer sans soucis les informations de l'utilisateur.

# Envoi des données du formulaire

Il faut maintenant envoyer les données du formulaire à l'aide du bouton qui s'appelle "btn_submit_change" dans la base de données et plus précisément dans la table **user**.

Pour cela nous allons utiliser ce code :

``` 
  if (isset($_POST['btn_submit_change']))
{ 
  $id = $_SESSION['user_login'];
  $nom=$_POST['nom'];
  $prenom=$_POST['prenom'];
  $email=$_POST['email'];
  $age=$_POST['age'];

$filename = "img/" . $id . "/";
  if (!file_exists($filename)) 
  {
    mkdir("img/" .$id, 0777); 
  } 
  else 
  {

}

$folder ="img/" . $id . "/";
  $profile_picture = $_FILES['profile_picture']['name']; 
  $size = $_FILES['profile_picture']['size'];
  $rand_val = date('YMDHIS') . rand(11111, 99999);
  $profile_picture = md5($rand_val) . '.png';
  $path = $folder . $profile_picture; 
  $target_file=$folder.basename($_FILES["profile_picture"]["name"]);
  $pictureFileType=pathinfo($target_file,PATHINFO_EXTENSION);
  $allowed=array('png'); $filename=$_FILES['profile_picture']['name'];
  $ext=pathinfo($filename, PATHINFO_EXTENSION);

$data = [
    'id' => $id,
    'nom' => $nom,
    'prenom' => $prenom,
    'email' => $email,
    'age' => $age,
    'profile_picture' => $profile_picture,
  ];

move_uploaded_file($_FILES['profile_picture'] ['tmp_name'], $path); 
  $sql = "UPDATE user SET nom=:nom, prenom=:prenom, email=:email, age=:age, profile_picture=:profile_picture WHERE id=:id";
  $stmt= $db->prepare($sql);
  $stmt->execute($data);
  header("refresh:0; manageprofile.php");
}
```

**Explication du code :**

```
if (isset($_POST['btn_submit_change']))
```

Cette ligne vérifie si le bouton de soumission pour mettre à jour les informations du profil a été cliqué. Si c'est le cas, le code à l'intérieur du bloc sera exécuté.

```
{ 
  $id = $_SESSION['user_login'];
  $nom = $_POST['nom'];
  $prenom = $_POST['prenom'];
  $email = $_POST['email'];
  $age = $_POST['age'];
```

Ces lignes récupèrent les données soumises du formulaire pour le nom, le prénom, l'e-mail et l'âge, ainsi que l'ID de l'utilisateur à partir de la session.

```
  $filename = "img/" . $id . "/";
  if (!file_exists($filename)) 
  {
    mkdir("img/" .$id, 0777); 
  } 
  else 
  {

}
```

Ceci vérifie si le dossier pour l'utilisateur existe dans le répertoire "img". Si ce n'est pas le cas, il crée un dossier avec les autorisations spécifiées. Sinon, il ne fait rien.

```
  $folder = "img/" . $id . "/";
  $profile_picture = $_FILES['profile_picture']['name'];
  $size = $_FILES['profile_picture']['size'];
  $rand_val = date('YMDHIS') . rand(11111, 99999);
  $profile_picture = md5($rand_val) . '.png';
  $path = $folder . $profile_picture;
  $target_file = $folder . basename($_FILES["profile_picture"]["name"]);
  $pictureFileType = pathinfo($target_file, PATHINFO_EXTENSION);
  $allowed = array('png');
  $filename = $_FILES['profile_picture']['name'];
  $ext = pathinfo($filename, PATHINFO_EXTENSION);
```

Ces lignes gèrent le téléchargement de l'image de profil. Elles déterminent le chemin où l'image sera stockée, génèrent un nom de fichier unique pour l'image, et vérifient le type de fichier et son extension pour s'assurer qu'il s'agit d'une image PNG.

```
  $data = [
    'id' => $id,
    'nom' => $nom,
    'prenom' => $prenom,
    'email' => $email,
    'age' => $age,
    'profile_picture' => $profile_picture,
  ];
```

Ceci crée un tableau associatif avec les données qui seront insérées ou mises à jour dans la base de données.

```
  move_uploaded_file($_FILES['profile_picture']['tmp_name'], $path);
```

Cette ligne déplace le fichier téléchargé vers le chemin spécifié.

```
  $sql = "UPDATE user SET nom=:nom, prenom=:prenom, email=:email, age=:age, profile_picture=:profile_picture WHERE id=:id";
  $stmt = $db->prepare($sql);
  $stmt->execute($data);
```

Ces lignes préparent et exécutent une requête SQL pour mettre à jour les informations de l'utilisateur dans la base de données avec les nouvelles valeurs.

```
  header("refresh:0; manageprofile.php");
```

Ceci redirige l'utilisateur vers la page "manageprofile.php" après que les informations aient été mises à jour.

```
}
```
Ferme le bloc conditionnel du bouton de soumission.

Ce code est à placer ici :

``` 
if (isset($_POST['btn_submit_change']))
{ 
  $id = $_SESSION['user_login'];
  $nom=$_POST['nom'];
  $prenom=$_POST['prenom'];
  $email=$_POST['email'];
  $age=$_POST['age'];

$filename = "img/" . $id . "/";
  if (!file_exists($filename)) 
  {
    mkdir("img/" .$id, 0777); 
  } 
  else 
  {

}

$data = [
    'id' => $id,
    'nom' => $nom,
    'prenom' => $prenom,
    'email' => $email,
    'age' => $age,
    'profile_picture' => $profile_picture,
  ];

Juste au dessus de la balise html.

Vos membres pourront maintenant éditer leurs informations.

2 . Gestion des annonces

Chaque membre pourra poster, éditer et supprimer une annonce, c'est ce que nous allons faire dans cette partie.

Voici ce que l'on attends :

![](https://coding-school.fr/images/users/1692866614.PNG "undefined")

Voici le code complet pour faire cela :

``` 
  <a href="createannonce.php"><button type="button" class="btn btn-info btn-block"><i class="fa-solid fa-plus"></i> Publier une annonce</button></a>
          <h1>Gérer vos annonces</h1>
          <?php
                $sql = $db->prepare("SELECT a.id, a.id_user, a.titre, c.nom, a.ville, a.prix, a.description, a.date_post, a.photo1
                  FROM annonces a
                  JOIN categories c ON a.id_categorie = c.id
                  WHERE a.id_user =$id;"); 
                $sql->execute();
              ?>
              <div class="table-responsive">
                <table class="table table-striped table-hover table-bordered table-sm table-dark border-light text-center">
                  <thead>
                    <tr>
                      <th scope="col"><i class="fas fa-image"></i></th>
                      <th scope="col"><i class="fas fa-pencil-alt"></i> Titre</th>
                      <th scope="col"><i class="fas fa-list"></i> Catégorie</th>
                      <th scope="col"><i class="fas fa-city"></i> Ville</th>
                      <th scope="col"><i class="fas fa-sort-numeric-up-alt"></i> Prix</th>
                      <th scope="col"><i class="fas fa-sort-numeric-up-alt"></i> Description</th>
                      <th scope="col"><i class="fas fa-calendar-alt"></i> Date de publication</th>
                      <th scope="col"><i class="fas fa-sync"></i> Edition</th>
                      <th scope="col"><i class="fas fa-trash"></i> Supprimer</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php while( $row = $sql->fetch()) : ?>
                    <tr>
                      <td><img src="img/<?php echo $id. "/annonces/" . $row['photo1']; ?>" class="rounded-circle" height="100" loading="lazy" /></td>
                      <td><?php echo $row['titre']; ?></td>
                      <td><?php echo $row['nom']; ?></td> 
                      <td><?php echo $row['ville']; ?></td>
                      <td><?php echo $row['prix']; ?>€</td>
                      <td><?php echo $row['description']; ?></td>
                      <td><?php echo $row['date_post']; ?></td>
                      <td><a href="update-annonce.php?id=<?php echo $row["id"] ?>"><button type="button" class="btn btn-warning btn-sm"><i class="fa fa-pencil-alt" aria-hidden="true"></i> Editer l'annonce</button><a></td>
                      <td>
                        <form method="POST" enctype="multipart/form-data">
                          <input type="hidden" id="id" name="id" class="form-control" value="<?php echo $row['id'] ?>"/>
                          <button type="submit" name="ok_suppression_annonce" value="ok_suppression_annonce" class="btn btn-danger mb-4"><i class="fas fa-trash"></i></button>
                        </form>
                       </td>  
                    </tr>
                    <?php endwhile ?> 
                  </tbody>
                </table>
```

**Explication du code :**

```
<a href="createannonce.php"><button type="button" class="btn btn-info btn-block"><i class="fa-solid fa-plus"></i> Publier une annonce</button></a>
```

Ceci crée un lien qui redirige vers la page "**createannonce.php**" pour créer une nouvelle annonce. Le lien est stylisé comme un bouton avec une icône de plus.

```
<h1>Gérer vos annonces</h1>
```

Ceci affiche un titre indiquant que cette section concerne la gestion des annonces de l'utilisateur.

```
<?php
  $sql = $db->prepare("SELECT a.id, a.id_user, a.titre, c.nom, a.ville, a.prix, a.description, a.date_post, a.photo1
    FROM annonces a
    JOIN categories c ON a.id_categorie = c.id
    WHERE a.id_user =$id;"); 
  $sql->execute();
?>
```

Ceci prépare et exécute une requête SQL pour récupérer les annonces de l'utilisateur actuel (dont l'ID correspond à $**id**) ainsi que des informations liées aux annonces à partir de la table "annonces" et de la table "**categories**" en utilisant une jointure.

```
<div class="table-responsive">
  <table class="table table-striped table-hover table-bordered table-sm table-dark border-light text-center">
```

Ceci crée un élément de tableau Bootstrap avec des classes pour la mise en forme. Il est conçu pour être réactif et afficher les données tabulaires.

```
    <thead>
      <tr>
        <th scope="col"><i class="fas fa-image"></i></th>
        <th scope="col"><i class="fas fa-pencil-alt"></i> Titre</th>
        <th scope="col"><i class="fas fa-list"></i> Catégorie</th>
        <th scope="col"><i class="fas fa-city"></i> Ville</th>
        <th scope="col"><i class="fas fa-sort-numeric-up-alt"></i> Prix</th>
        <th scope="col"><i class="fas fa-sort-numeric-up-alt"></i> Description</th>
        <th scope="col"><i class="fas fa-calendar-alt"></i> Date de publication</th>
        <th scope="col"><i class="fas fa-sync"></i> Edition</th>
        <th scope="col"><i class="fas fa-trash"></i> Supprimer</th>
      </tr>
    </thead>
```

Ceci définit les en-têtes de colonne du tableau avec des icônes correspondantes. Chaque **th** représente une colonne différente dans le tableau.

```
    <tbody>
      <?php while( $row = $sql->fetch()) : ?>
```
Ceci ouvre la boucle while pour parcourir les résultats de la requête SQL.

```
      <tr>
        <td><img src="img/<?php echo $id. "/annonces/" . $row['photo1']; ?>" class="rounded-circle" height="100" loading="lazy" /></td>
        <td><?php echo $row['titre']; ?></td>
        <td><?php echo $row['nom']; ?></td> 
        <td><?php echo $row['ville']; ?></td>
        <td><?php echo $row['prix']; ?>€</td>
        <td><?php echo $row['description']; ?></td>
        <td><?php echo $row['date_post']; ?></td>
```
Ceci crée une nouvelle ligne dans le tableau et affiche les différentes données de chaque annonce récupérées de la base de données.

```
        <td><a href="update-annonce.php?id=<?php echo $row["id"] ?>"><button type="button" class="btn btn-warning btn-sm"><i class="fa fa-pencil-alt" aria-hidden="true"></i> Editer l'annonce</button><a></td>
```

Ceci crée un bouton dans la colonne "**Edition**" qui redirige vers la page "**update-annonce.php**" avec l'ID de l'annonce comme paramètre pour permettre l'édition de l'annonce spécifique.

```
        <td>
          <form method="POST" enctype="multipart/form-data">
            <input type="hidden" id="id" name="id" class="form-control" value="<?php echo $row['id'] ?>"/>
            <button type="submit" name="ok_suppression_annonce" value="ok_suppression_annonce" class="btn btn-danger mb-4"><i class="fas fa-trash"></i></button>
          </form>
        </td>
      </tr>
      <?php endwhile ?> 
    </tbody>
  </table>
```

Ceci crée un bouton dans la colonne "**Supprimer**" qui permet à l'utilisateur de supprimer l'annonce. Le formulaire envoie l'ID de l'annonce comme valeur cachée. La boucle while se termine ici, après avoir parcouru tous les résultats de la requête SQL.

Pour pouvoir supprimer l'annonce nous avons fait appel au bouton "**ok_suppression_annonce**", voici son code à mettre tout en haut de la page avec le PHP :

``` 
  
if (isset($_POST['ok_suppression_annonce']))
{
  $id=addslashes($_POST['id']);
  $db->exec('DELETE FROM annonces WHERE id = '.$id.'');
  $successMsgDeleted="L'annonce a bien été supprimée."; 
  header("refresh:0; manageprofile.php");
}
  
```

Page de gestion d'un membre

1 . Récupérer et changer ses informations

2 . Gestion des annonces

Sommaire