php - 根据条件从表中在 UI 上回显图像

Question

我有一张 table :

场景:在这里您将看到 5 个徽章(badge1 到 badge5)。当员工获得一枚徽章时，徽章变为 1，否则为 0。 例如:Brinda 赢得了所有徽章，而 lyka 只赢得了 badge1。

徽章作为 blob 图像存储在不同的 badgePhoto 表中:

用于显示徽章的 UI:

现在，我有一个 UI，我想在其中显示最近赢得的 3 个徽章。

• 如果赢得 1 个徽章，则只会显示 1 个。
• 如果赢得 5 个徽章，将随机显示 3 个徽章。
• 如果没有赢得徽章，则回显“没有赢得徽章”。

与上述 UI 中的徽章相关的 HTML:

<div class="panel">
  <div class="form" style="width: 350px; height: 220px;">
    <div class="login">Recent badges</div>
    <span class="fa-stack fa-5x has-badge">
	    <div class="badgesize">
            <img src="images/7.png"  alt=""  >
	    </div>
    </span>
    <span class="fa-stack fa-5x has-badge">
	    <div class="badgesize">
			<img src="images/1.png"  alt=""   >
		</div>
    </span>
    <span class="fa-stack fa-5x has-badge">
		<div class="badgesize">
	        <img src="images/2.png"  alt="" >
	        <!-- <img class="cbImage" src="images/7.png" alt="" style="width:50px;height:50px"/> -->
		</div>
    </span>
  </div>
</div>

<!-- badges panel ends here -->

图像标签讲述徽章。

我有一些 PHP 来获取数据:

$q2 = "SELECT * FROM pointsBadgeTable WHERE EmployeeID = '" . $_SESSION['id'] . "' ";
$stmt1 = sqlsrv_query($conn,$q2);
if ($stmt1 == false)
{
    echo 'error to retrieve info !! <br/>';
    die(print_r(sqlsrv_errors(),TRUE));
}
$pbrow = sqlsrv_fetch_array($stmt1);

然后，如果条件足够，即如果该徽章的计数值为 1，我将回显表中徽章的图像。我将在上面的 html 代码中回显它。

<?php echo "" . $pbrow['badge1/badge2/...'] . "" ?>

我在这里尝试做的与 Stack Overflow 中的配置文件类似。在最新的下方，您可以看到一个“评论家”徽章。我们如何根据条件携带最新的徽章或任何徽章？

Answer 1

您面临的问题是您存储数据的方式使您只知道用户拥有或不拥有什么徽章。要了解最新的徽章，您需要将更多信息存储到数据库中。

让我们先重构一下数据库；在大多数情况下，第一列 id 应该是带有 IDENTITY 的 PRIMARY KEY，这样每次插入都会创建一个唯一的 ID。让我们从删除 employees 表和 badgePhoto 中的过时列开始，我们将添加一个 id 和一个小的名称更改，以便一切更有意义。

+------+---------+    +---------------------------+
|   employees    |    |          badges           |
+------+---------+    +----+--------------+-------+
| id   | name    |    | id | name         | image |
+------+---------+    +----+--------------+-------+
| 34   | Anil    |    | 1  | First Badge  | blob  |
+------+---------+    +----+--------------+-------+
| 1122 | Lyka    |    | 2  | Second Badge | blob  |
+------+---------+    +----+--------------+-------+
| 2233 | brinda  |    | 3  | Third Badge  | blob  |
+------+---------+    +----+--------------+-------+

现在创建一个新表，以便我们可以通过按 ID 连接表来链接数据。

+--------------------------------------------------+  CREATE TABLE employee_badges(
|                employee_badges                   |    id int NOT NULL IDENTITY PRIMARY KEY,
+----+-------------+----------+--------------------+    employee_id int NOT NULL,
| id | employee_id | badge_id | earned_on          |    badge_id int NOT NULL,
+----+-------------+----------+--------------------+    earned_on datetime NOT NULL DEFAULT GETDATE()
| 1  | 1122        | 1        | 2016-12-7 12:10:08 |  )
+----+-------------+----------+--------------------+
| 2  | 34          | 1        | 2016-8-7 12:10:08  |  INSERT INTO employee_badges (employee_id, badge_id) VALUES (1122, 1)
+----+-------------+----------+--------------------+  INSERT INTO employee_badges (employee_id, badge_id) VALUES (34, 1)
| 3  | 34          | 2        | 2016-9-6 08:10:14  |  INSERT INTO employee_badges (employee_id, badge_id) VALUES (34, 2)
+----+-------------+----------+--------------------+
| etc.. each row represents an earned medal        |
+--------------------------------------------------+

现在尝试可视化我们将如何连接数据，目前在此表中员工 Lyka 有 1 个奖牌，员工 Anil 有两个。让我们把“第三枚徽章”送给“Lyka”:

$sql = "INSERT INTO employee_badges (employee_id, badge_id) VALUES (1122, 3)";

$date = date("Y-m-d H:i:s", strtotime("-1 year")); // give badge at today's date, last year.
$sql  = "INSERT INTO employee_badges (employee_id, badge_id, earned_on) VALUES (1122, 3, '$date')";

仅仅因为一个列有一个默认值并不意味着它不允许被覆盖。您可以根据自己的喜好调整此表(例如添加进度列)，但让这个示例保持简单。目前，earned_on 的默认值 为GETDATE()，因此每次插入新行时，都会自动为您设置当前时间。

如果您想选择员工 Anil 获得的徽章，您可以执行以下查询:

SELECT b.name, b.image FROM badges AS b
INNER JOIN employee_badges AS e
ON e.badge_id = b.id
WHERE e.employee_id = 34

您还可以使用像这样的过滤器来选择最新徽章。

...
WHERE e.employee_id = 34
ORDER BY e.earned_on DESC
LIMIT 1

这会将列表从最新到最早排序，如果您添加 LIMIT 1，则只会返回最上面的行。

您可以让您的 SQL 服务器做几乎所有事情，但也许您应该一次只做一步。只需使用上面的查询并让 PHP 对其进行排序即可。计算返回的行数，如果行数 > 0，那么您就知道用户获得了徽章，只需循环显示结果即可。

if(sqlsrv_has_rows($stmt)){
  while($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
    $result[] = $row;
  }

  if(count($recentBadge) > 3){
    foreach(array_rand($recentBadge, 3) as $key){
      $data[] = $recentBadge[$key];
    }
    $recentBadge = $data;
  }

  foreach($recentBadge as $row){
    echo 
      $row['name'],
      # Keep in mind to fix vvvv the mime-type. If you stored it as png, then png, or gif or w/e.
      '<img src="data:image/jpeg;base64,'.base64_encode($row['image']).'"/>',
      '<br>'
    ;
  }
} else {
  echo 'no results';
}