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>";
}
?>