Alert number of unread messages

Question

I am creating internal message exchange in my project, as shown in the image:

On the button with the image surrounded in red intended to show an alert with the number of messages not yet read, which are in bold, this way as shown in the image below surrounded in red:

Button where I want to create the alert:

<td class="td-info view_data apagar" id="<?php echo $row["Id"]; ?>,<?php echo $row["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $row["Status"] != '0'?' style="font-weight:bold" ':' style="font-weight:normal" '?>>

Table where I receive messages:

<table id="table" class="table table-bordered">  
        <tr> 
            <th width="20%" style="text-align:center">De</th>
            <th width="60%" style="text-align:center">Assunto</th>
            <th width="10%" style="text-align:center">Prioridade</th>
            <th width="10%" style="text-align:center">Recebido</th>             
        </tr>
<?php  
    while($row = mysqli_fetch_array($result))  
        {  
?> 
        <tr>
        <th width="10%" colspan=4>Recebido: <?php echo $row["Data"]; ?></th>
        </tr>       

        <tr>  
        <td><?php echo $row["De"]; ?></td>
        <td class="td-info view_data apagar" id="<?php echo $row["Id"]; ?>,<?php echo $row["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $row["Status"] != '0'?' style="font-weight:bold" ':' style="font-weight:normal" '?>><?php echo $row["Assunto"]; ?></td>  
        <td><?php echo $row["Prioridade"]; ?></td> 
        <td><?php echo $row["Hora"]; ?></td>
        </tr>
<?php  
        }  
?> 
    </table> 

Answer 1

From what I understand, you will run your query and you will receive a numerical value of how many new messages there are for the user, right?

So, you can call a javascript function by passing the numeric value received from the query.

If you pass 0 nothing appears if you pass a value greater than 0 this value appears in the icon.

In the example I put a CSS that leaves the red badge and the white font, in addition adds an icon input box and the placements.

Javascript has the function and I call the function with a Document.getElementById. Note that I put the name msgNumer as id in the Document.getElementById command and in the span where I want the number to appear.

You can change colors, sizes, icons, etc.

function novasMensagens(numero) {
  var retorno = numero > 0 ? numero : "";
  return retorno;
}

document.getElementById("msgNumero").innerHTML = novasMensagens(5);

body {
  font-family: Arial, Helvetica, sans-serif, color: black;
}

.notification {
  color: black;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
}

.notification .badge {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<a href="#" class="notification">
  <i class="glyphicon glyphicon-envelope" style='font-size:50px;'></i>
  <span class="badge" id='msgNumero'></span>
</a>