Displaying an image depending on the value in a MySQL Database

Question

I'm currently working on a status website for where I work. The aim of it is to display which systems and services are running or not, in the form of a tick or cross next to the services name.

I have a database with the names of the services inside, as well as a value of either A or B. A should result in a tick, B should result in a cross.

I've got the code together to retrieve the A or B, and display it in a table next to the corresponding name, but I'd like either the tick or cross to display instead.

The tick is located at 'sources/tick.png', and the cross is located at 'sources/cross.png'.

Could anyone give me some pointers on how I can achieve this? Thanks a lot!

Below is my code (I know its messy but I'm still learning):

<?php
$mysqli = new mysqli("localhost", "root", "password", "status");
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
echo  '<img width="1%" src="sources/tick.png">' . "\n";

$sql1 = "SELECT wifi from status"; 
if(!$result1 = $mysqli->query($sql1)){
    die('There was an error running the query [' . $db->error . ']');
}

$sql2 = "SELECT internet from status"; 
if(!$result2 = $mysqli->query($sql2)){
    die('There was an error running the query [' . $db->error . ']');
}

?>

<html>
<head>
    <title>Network Status</title>
    <link rel="stylesheet" href="sources/styles.css">
</head>
<body>
<div id="header" align="center">
    <img class="headerImg" src="sources/logo.png"><br />
    <font class="headerTxt">The Current Network Status:</font>
</div>

<div id="wrapper" align="center">
    <table align="center">
        <tr>
            <td align="center"><span class="statusItm" id="wifi"><font class="statusTxt">WiFi</font></span></td>
            <td align="center"><span id="wifi"><?php while($row = $result1->fetch_assoc()){echo $row['wifi'] . '<br />';} ?></span></td> 
        </tr>
        <tr>
            <td align="center"><span class="statusItm" id="internet"><font class="statusTxt">Internet Access</font></span></td>
            <td align="center"><span id="internet"><?php while($row = $result2->fetch_assoc()){echo $row['internet'] . '<br />';} ?></span></td> 
        </tr>
    </table>
</div>
</body>
</html>

Jack

if your table contains columns `wifi / internet` with status set as `A/B (off/on)`, you can make only *one* query, then check values of each column in your results loop -> if `wifi==A (on)` then display `tick` else display `cross`, and same for internet. So, in your div, instead of displaying `$row['internet']` use a `img` tag — OldPadawan, Apr 21 '17 at 08:09
@OldPadawan could you elaborate on the code structure please. That makes perfect sense, I'm just not too sure on how to build that. Thank you! — Jack Anyon, Apr 21 '17 at 09:05
I'll show you structured and commented example that you can study / use asap — OldPadawan, Apr 21 '17 at 09:10
@JackAnyon : example below : please read links / comments and adapt — OldPadawan, Apr 21 '17 at 10:38

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1st of all, for all SELECT, UPDATE, DELETE, you should really consider using PPS : Prepared Parameterized Statements. This will help Preventing SQL injection

Then, for your problem, as in comments : if your table contains columns wifi / internet with status set as A/B (off/on), you can make only one query, then check values of each column in your results loop -> if wifi==A (on) then display tick else display cross, and same for internet. So, in your div, instead of displaying $row['internet'] use a img tag

Example that you need to adapt:

<?php

error_reporting(E_ALL); ini_set('display_errors', 1); /* PHP will help us */

/* connexion to db */
$mysqli = mysqli_connect("$host", "$user", "$pwd", "$db");
/* adapt to your credentials */

if (mysqli_connect_errno()) { echo "Error: no connexion allowed : " . mysqli_connect_error($mysqli); }

$query = " SELECT `internet`, `wifi` FROM `status` ";

$stmt = $mysqli->prepare($query); /* prepare query */

$results = $stmt->execute(); /* execute query */
$stmt->bind_result($internet, $wifi); /* get results */
$stmt->store_result();

// print_r($stmt->error_list); /* check for error */
// print_r($stmt->get_warnings()); /* check for error */
// print_r($stmt->error); /* check for error */

if ($stmt->num_rows > 0) { /* we have results */
/* here, you may want to start CSS table -> end php -> write raw html -> back to php */

while($stmt->fetch()){ /* loop through results */

/* here you add your CSS table tr / td for the results */

if($wifi == "A") { echo"<img src=\"sources/tick.png\" alt=\"\" />"; } else { echo"<img src=\"sources/cross.png\" alt=\"\" />"; }
if($internet == "A") { echo"<img src=\"sources/tick.png\" alt=\"\" />"; } else { echo"<img src=\"sources/cross.png\" alt=\"\" />"; }
}

/* here, you close CSS table -> end php -> write raw html -> back to php */

}
else
{ echo"[ no data ]"; }
?>

That worked perfectly thank you very much. Great idea using the prepared statements as well. Really appreciate the help! Jack — Jack Anyon, Apr 21 '17 at 10:51

Displaying an image depending on the value in a MySQL Database

1 Answers1