Aligner les messages du l’expéditeurs a gauche et ceux du destinataire a droite

Signaler
Messages postés
61
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
27 octobre 2020
-
Messages postés
29908
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
-
salut tous le monde je fais un système de chat mais la j'essaye de classer les message de l’expéditeur a droit et ceux du destinataire a gauche

comme pour les messenger , whatsapp par exemple
mais concrètement je sais pas comment m'y prendre
car les message sont toujours aligner au centre et non de gauche droite




voila mon code



<?php
// Affichage des erreurs php ( à placer AU DEBUT de ton code.. AVANT tout le reste ! )
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

// connexion de la bdd ET activation des erreurs PDO
try{
  $bdd = new PDO("mysql:host=127.0.0.1;dbname=espace_membre;charset=utf8", "root", "");
  // Activation des erreurs PDO
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  // mode de fetch par défaut : FETCH_ASSOC / FETCH_OBJ / FETCH_BOTH
  $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
  die('Erreur : ' . $e->getMessage());
}

// initialisation des variables
$iesp ="5 " ;
$dest ="10" ;


// requête pour récupérer les infos du membre 
$sql = ("SELECT * FROM membres where id = :dest");
$datas = array(':dest'=>$dest);

//Execution de la requete
try{
  $requete = $bdd -> prepare($sql) ;
  $requete->execute($datas) ;
  $normal = $requete->fetch(); // tu n'attends qu'un seul résultat.. donc pas besoin de boucle
}catch(Exception $e){
  // en cas d'erreur :
   echo " Erreur ! ".$e->getMessage();
   echo " Les datas : " ;
  print_r($datas);
}

//requête pour récupérer les messages
$sql = ("SELECT * 
FROM messages 
WHERE (id_expediteur = :iesp and id_destinataire = :dest)
  or (id_destinataire = :iesp and id_expediteur = :dest)
  order by date DESC ");
$datas = array(':dest'=>$dest, ':iesp'=>$iesp);

//Execution de la requete
try{
  $requete = $bdd -> prepare($sql) ;
  $requete->execute($datas) ;
  $messages = $requete->fetchAll(); // On stocke le résultat dans un array
}catch(Exception $e){
  // en cas d'erreur :
   echo " Erreur ! ".$e->getMessage();
   echo " Les datas : " ;
  print_r($datas);
}


echo $normal ['pseudo'] ;
echo "<img src='".$normal['avatar']."' height='100' width='100'/>";
echo "<br>";


if(!empty($messages)){
  echo "<ul>";
  foreach($messages as $M){
   
    $idExp = $M['id_expediteur'];
    $message = htmlspecialchars($M['message']);
    $date = $M['date'];
    if ($idExp == $iesp ) {
      $class = "classpouraligneragauche";
    }else{
      $class = "classpouraligneradroite";
    }
    
    echo "<li class='".$class."' data-id='".$idExp."'>
           <span class='date'>".$date."</span>
           <span class='message'>".$message."</span>
          </li>";
   
  }
  echo "</ul>";  
}
   
?>


5 réponses

Messages postés
29908
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
2 900
Visiblement tu comprends vite ...enfin.. si on t'explique longtemps .... très
très longtemps.......

Ta question concerne la mise en page, le style.........
Ce n'est donc pas du PHP !!!

Ça concerne le CSS.....

Je déplace donc ta question dans le bon forum.
J'aurais pensé que suite à nos précédents échanges tu aurais enfin compris...

Messages postés
61
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
27 octobre 2020

Lolll je fais de mon mieux pour apprendre
Sinon jai cherche css dans le forum j’ai pas trouvé c’est pour ca j’ai mis dans php
Messages postés
12842
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
30 octobre 2020
716
bonjour,
as-tu compris à quoi servait
class=
?
Messages postés
61
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
27 octobre 2020

Non pas vraiment
Messages postés
12842
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
30 octobre 2020
716 >
Messages postés
61
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
27 octobre 2020

je pense alors que le moment est venu d'étudier CSS.
Messages postés
29908
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
2 900
Tiens,
voila un exemple de code html/css que tu peux utiliser pour t'en inspirer
https://bootsnipp.com/snippets/1ea0N

Messages postés
61
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
27 octobre 2020

finalement je me suis bloqué ici je sais pas ce qui cloche mais j arrive pas a décaler les message de l’expéditeur a droite
et dans le code php aussi je sais pas comment faire une differance entre les deux pour ensuite les séparer facilement dans le css




.message {

  position: relative;
  background-color:#fff;
  margin-bottom:95px;
}

.message {
  background-color:#2195F2;
  padding:3px  8px;
  margin:3px  0;
  border-radius:12px;
  max-width:75%;
  display:inline-block;
  min-height:25px 

  

}
 .message .classpouraligneragauche 
 {
 background-color: #3498db;
 float:right;

 }
 .message .classpouralignerdroite
 {
 background-color: #dbc3c2;
 float:left;

 }




<?php
// Affichage des erreurs php ( à placer AU DEBUT de ton code.. AVANT tout le reste ! )
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

// connexion de la bdd ET activation des erreurs PDO
try{
  $bdd = new PDO("mysql:host=127.0.0.1;dbname=espace_membre;charset=utf8", "root", "");
  // Activation des erreurs PDO
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  // mode de fetch par défaut : FETCH_ASSOC / FETCH_OBJ / FETCH_BOTH
  $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
  die('Erreur : ' . $e->getMessage());
}

// initialisation des variables
$iesp ="5 " ;
$dest ="10" ;


// requête pour récupérer les infos du membre 
$sql = ("SELECT * FROM membres where id = :dest");
$datas = array(':dest'=>$dest);

//Execution de la requete
try{
  $requete = $bdd -> prepare($sql) ;
  $requete->execute($datas) ;
  $normal = $requete->fetch(); // tu n'attends qu'un seul résultat.. donc pas besoin de boucle
}catch(Exception $e){
  // en cas d'erreur :
   echo " Erreur ! ".$e->getMessage();
   echo " Les datas : " ;
  print_r($datas);
}

//requête pour récupérer les messages
$sql = ("SELECT * 
FROM messages 
WHERE (id_expediteur = :iesp and id_destinataire = :dest)
  or (id_destinataire = :iesp and id_expediteur = :dest)
  order by date DESC ");
$datas = array(':dest'=>$dest, ':iesp'=>$iesp);

//Execution de la requete
try{
  $requete = $bdd -> prepare($sql) ;
  $requete->execute($datas) ;
  $messages = $requete->fetchAll(); // On stocke le résultat dans un array
}catch(Exception $e){
  // en cas d'erreur :
   echo " Erreur ! ".$e->getMessage();
   echo " Les datas : " ;
  print_r($datas);
}


echo $normal ['pseudo'] ;
echo "<img src='".$normal['avatar']."' height='100' width='100'/>";
echo "<br>";


if(!empty($messages)){
  echo "<ul>";
  foreach($messages as $M){
   
    $idExp = $M['id_expediteur'];
    $message = htmlspecialchars($M['message']);
    $date = $M['date'];
    if ($idExp == $iesp ) {
      $class = "classpouraligneragauche";
    }else{
      $class = "classpouraligneradroite";
    }
    
    echo "<li class='".$class."' data-id='".$idExp."'>
           <span class='date'>".$date."</span>
           <span class='message'>".$message."</span>
          </li>";
   
  }
  echo "</ul>";  
}
   
?>
Messages postés
29908
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
2 900
Tu n'as visiblement pas cherché à reproduire le code html et css fourni dans le lien que je t'ai donné
https://bootsnipp.com/snippets/1ea0N
Messages postés
61
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
27 octobre 2020

Sinn j’ai vraiment essayé c’est juste j’arrive pas a bien comprendre


Sinn j’aimerais savoir un truc
Vous savais les div ou span
On tous des class
C’est cette même class je dois mettre dans le code css pour permettre de préciser ou intervenir

Mais maintenant comme tenu de mon code php
Le message L’expéditeur et du destinataire devrait avoir chacun une class
Pour permettre au css de faire la différence
C’est ca mon soucis
Vue la ils la même class dans mon code php
Messages postés
29908
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 octobre 2020
2 900
Tu as pris en exemple le code du lien que je t'avais donné ?
Donc, désormais, quel est ton code ??
Sans nous le montrer, personne ne pourra te répondre.