Positioning Messages Chat Codeigniter

0

Hello, I'm developing a messaging application (chat) and it's pretty much done and working.

It turns out that the messages are all aligned from left to right, regardless of the message user.

Example:

User 1 Mensagem
User 2 Mensagem
User 1 Mensagem
User 2 Mensagem

I want to change this and put the message from user 1 on the left and position the message from user 2 on the right. (WhastApp style).

User 1 Mensagem
Mensagem User 2
User 1 Mensagem
Mensagem User 2

Below is the code for how I am retrieving the message.

<?php
$this->db->select('tickets_historico.*,usuarios.nome_usuario');
    $this->db->join('usuarios','usuarios.id = tickets_historico.usuario_id', 'left');
    $this->db->where('ticket_id = 1');
    $this->db->order_by('dt_cadastro','desc');
    $historico = $this->db->get('tickets_historico')->result_array()
?>

Below is the code for how I am displaying the message.

  <div class="direct-chat-msg">
      <?php //Se houver comentários, imprime os comentários
      if(count($historico) > 0)
    { foreach ($historico as $row)
      {?>
        <?php $id = $row['usuario_id']; ?>
            <?php $image_url = base_url() . 'upload/imagens_usuarios' . '/' . $id . "_thumbnail" . '.jpg'; ?>
                <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name pull-left"><?=$row['nome_usuario']?></span>
                    <span class="direct-chat-timestamp pull-right"><?= date('d/m/Y h:i A',strtotime($row['dt_cadastro']))?></span>
                </div>
                <img class="direct-chat-img" src="<?php echo $image_url; ?>" alt="message user image">
                <div class="direct-chat-text">
                    <?=$row['mensagem'];?>
                </div><br>
       <?php }
    }
    else //Quando não há nenhum comentário
    {
    echo "<p>Atualmente, não há comentários.</p>";
    }
    ?>
</div>

Summarizing the above code:

if(count($historico) > 0)
    { foreach ($historico as $row)
{?>
    <p><strong><?=$row['nome_usuario']?></strong> Disse em <?= date('d/m/Y h:i A',strtotime($row['dt_cadastro']))?><br>
    <?=$row['mensagem'];?></p><hr>
<?php   }
}
    else //Quando não há nenhum comentário
{
    echo "<p>Atualmente, não há comentários.</p>";
}
?>
    
asked by anonymous 30.01.2017 / 17:24

1 answer

0

Hello, Resolved as follows:

<div class="direct-chat-messages" style="height: 325px;">
     <?php //Se houver comentários, imprime os comentários
        if(count($historico) > 0)
            { foreach ($historico as $row)
        {?>
     <?php $id = $row['usuario_id']; ?>
     <?php $image_url = base_url() . 'upload/imagens_usuarios' . '/' . $id . "_thumbnail" . '.jpg'; ?>
     <?php $class_chat = ($this->session->userdata('id') == $row['usuario_id']) ? "direct-chat-msg" : "direct-chat-msg right";?>
     <?php $class_nome = ($this->session->userdata('id') == $row['usuario_id']) ? "direct-chat-name pull-left" : "direct-chat-name pull-right";?>
     <?php $class_data = ($this->session->userdata('id') == $row['usuario_id']) ? "direct-chat-timestamp pull-right" : "direct-chat-timestamp pull-left";?>
     <div class="<?php echo $class_chat;?>">
        <div class="direct-chat-info clearfix">
           <span class="<?php echo $class_nome;?>"><?=$row['nome_usuario']?></span>
           <span class="<?php echo $class_data;?>"><?= date('d/m/Y H:i',strtotime($row['dt_cadastro']))?></span>
        </div>
        <img class="direct-chat-img" src="<?php echo $image_url; ?>" alt="message user image">
        <div class="direct-chat-text">
           <?=$row['mensagem'];?>
        </div>
        <br>
     </div>
     <?php   }
        }
            else //Quando não há nenhum comentário
        {
         echo "<p>Atualmente, não há nada para ser mostrado .</p>";
        }
        ?>                                                              
  </div>
    
31.01.2017 / 12:46