James Lee James Lee - 26 days ago 10
MySQL Question

How can I distinguish messages by color like Facebook instant messenger?

Me and my friends are trying to learn how to do this in PHP procedural and MYSQLI procedural we are creating a message system but we want the user's

messages to differentiate in color just like Facebook instant messenger like blue and gray, so we are wondering how we can make the SQL output different css styles for different user's messages automatically.

Screen shot 1

This is how our's look like.

Screen shot 2

The database structure consist of these names message_id,user_id,name and message. The message_id is auto incremented.

Screen shot 3

We tried many attempts but we reverted back to how it was originally and posted it here to avoid confusion of our clueless attempts.

<?php
$link =mysqli_connect("localhost","example_userx","pw1234","example_testx");

/*check connection*/
if(mysqli_connect_errno()) {
echo "Connection failed:".mysqli_connect_error();
}

$query ="SELECT*FROM color_test";

$result = mysqli_query($link,$query);

?>

<!DOCTYPE html>
<html>
<head>
<style>
#name {
font-weight: bold;
}

.message{
background-color: #0099ff;
color: white;
}

.message{
background-color: gray;
color: white;
}
</style>
<body>

<?php
/*fetch associative array*/
while($row = mysqli_fetch_assoc($result)) {
?>

<p id="name"><?php echo $row['name']; ?></p>
<p class="message"><?php echo $row['message']; ?></p>

<?php
}

/*free result set*/
mysqli_free_result($result);

/*close connection*/
mysqli_close($link);
?>
</body>
</html>


Here's the link to the files if you guys want to play with them.
Link

Answer Source
<?php
$link = mysqli_connect("localhost", "root", "", "other");
/* check connection */
if (mysqli_connect_errno()) {
    echo "Connection failed:" . mysqli_connect_error();
}
$query = "SELECT * FROM color_test";
$result = mysqli_query($link, $query);
?>
<!DOCTYPE html>
<html>
    <head>
        <style>
            .msg {
                background: #f2f4f5;
                border-radius: 8px;
                font-family: sans-serif;
                margin: 8px;
                padding: 8px;
                width: 200px;
                min-height: 50px;
                clear: both;
            }

            .msg.me {
                background: #0284FE;
                float: right;
                clear: both;
            }

            div.me>span.name,div.me>span.text{
                color:white;
                float: right;
                clear:right;
            }

            .name {
                display: block;
                font-weight: bold;
            }
            .container {
                bottom:0;
                margin: 0 5px 5px 5px;
            }
            .left{
                float: left;
            }
            .right{
                float: right;
            }

        </style>
    <body>
        <div class="container">
            <?php
            /* fetch associative array */
            $senderName = $receiverName = "";
            while ($row = mysqli_fetch_assoc($result)) {
                if (empty($senderName) || empty($receiverName)) {
                    if ($row['user_id'] == '1')
                        $senderName = $row['name'];
                    else
                        $receiverName = $row['name'];
                }
                ?>
                <div class="msg <?= ($row['user_id'] == '1') ? 'me' : '' ?>">
                    <span class="text"><?= $row['message']; ?></span>
                </div>
                <?php
            }
            ?>
            <span class="left"><b><?= $receiverName ?></b></span>
            <span class="right"><b><?= $senderName ?></b></span>
                    <?php
                    /* free result set */
                    mysqli_free_result($result);
                    /* close connection */
                    mysqli_close($link);
                    ?>            
        </div>
    </body>
</html>

OUTPUT :

enter image description here

Edit 1: Added message color distinguish

Edit 2: Message box alignment

Edit 3: Moved user name in the corners, instead of user name in each message