基于条件从表中回显UI上的图像

Question

我有一张桌子:

场景:在这里你会看到5个徽章(badge1直到badge5).当员工获得徽章奖励时1,其他人就会获得奖励0.例如: Brinda赢得所有徽章,而lyka只获胜badge1.

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

用于显示徽章的UI:

现在,我有一个UI,我想显示最近赢得的3个徽章.

• 如果赢得1个徽章,则只会显示1个徽章.
• 如果赢得5个徽章,则会显示3个徽章.
• 如果没有赢得徽章那么回声"没有徽章赢了".

与上述用户界面中的徽章相关的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);

然后,如果condion足够,即如果该徽章的计数值为1,我将从表中回显徽章的图像.我将在上面的html代码中回显它.

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

我在这里尝试做的是类似于Stack Overflow中的配置文件.在最新的,你可以看到一个"评论家"徽章.我们如何根据条件携带最新徽章或徽章？

Answer 1

您遇到的问题来自于您以这样的方式存储数据,即您只知道用户拥有的徽章.要了解最"最近"的徽章,您需要将更多信息存储到数据库中.

让我们先重新构建数据库; 在大多数情况下,第一列id应该是PRIMARY KEYwith,IDENTITY以便每次插入时都会创建一个唯一的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有2个.让我们把'第三徽章'给'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')";

仅仅因为列有一个default value并不意味着它不被覆盖.您可以根据自己的喜好调整此表(例如添加进度列),但让这个示例保持简单.对于现在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对其进行排序.计算返回的行,如果rowcount> 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';
}

Answer 2

首先，如果您想根据时间测量（此处为最近的）显示某些内容，您需要将时间与“内容”一起保存。在您的示例中，我建议使用一个单独的表来保存对用户、徽章的引用并保存收到徽章时的时间戳。这样您就可以更改查询，以便它根据最近收到的顺序获取徽章。

为了显示图像本身，我建议这里给出的答案（下面引用的相关信息）

第一个，也是我不推荐的一个，如果您有大量这样的图像，就是使用内联 Base64 编码。这是通过以下方式完成的：

<img src="data:image/jpeg;base64,<?php echo base64_encode($image); ?>" />;

第二种方法是创建一个“图像”PHP 文件，该文件将数据库中图像的 ID 作为查询字符串参数并输出图像。所以，你的 HTML 看起来像这样：

<img src="image.php?id=<?php echo $image_id; ?>" />