Positioning Codeigniter Chat Messages

Asked

Viewed 185 times

0

Hello, I’m developing a messaging app (chat) and it’s almost finished and working.

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

Example:

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

I intend to change this and position user message 1 left and position user message 2 right. (Whastapp style).

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

Below is the code of how I’m 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 of 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 code above:

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>";
}
?>
php html codeigniter
  • 1

    OFF: Just a hint: don’t do that <?php } for God’s sake. When to mix your PHP with HTML use <?php foreach($do as $it): ?> to open and <?php endforeach; ?> to close, the same goes for if and anything else that needs to open and close.

  • 1

    Obrigad @Williamnovak, annotated tip

  • 1

    Opinion Award of the Year for @Williamnovak... And why "for God’s sake"? D

  • Looks like work for CSS, @Wagnerfilho. Why not try something like Like Hangout Chat?

  • @Shutupmagda, this, CSS, I’m trying this way: <?php $class_nome = ($this->session->userdata('id') == $row['usuario_id']) ? "direct-chat-nome esquerda" : "direct-chat-nome direita";?>

  • <span class="<?php echo $class_nome;?>"><?=$row['nome_usuario']?></span>

Show 1 more comment

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>

  • OK. Mark the answer ;)

Browser other questions tagged php html codeigniter

You are not signed in. Login or sign up in order to post.