如何使用PHP和 MySQL 在 DOM 中显示最近的帖子？

很多时候，我们对网站中的“最新博客”或“最近帖子”非常熟悉。所以现在，这里有一个简单的解决方案，用于使用PHP和 MySQLi 在 DOM 上显示最近的博客。

要求：

1. 数据库和表
2. XAMPP 服务器
3. 编辑器（本文中的 VS Code）。

注意：代码中需要的bootstrap可以从Bootstrap Download下载。在您的 HTML 或PHP代码中添加所需的文件，如下所示。

代码片段：以下代码片段展示了如何在各自的 HTML 或PHP代码中添加所需的库。

要求：

1. MySQL 数据库和表。
2. XAMPP 服务器（下载 – 下载服务器）
3. 编辑器（本文使用的是 VS Code）。

要遵循的步骤：

1. 创建一个数据库，其中包含具有“id”的表“posts”和需要在页面中显示的内容。
2. 在 phpmyadmin 工具中创建表的步骤：
   • 转到 phpmyadmin
   • 使用您的用户名“root”和密码“”登录。
   • 在phpmyadmin的主页中，单击左侧边栏中的 *new* 以创建一个新数据库。

   

   • 为数据库命名。

   

   • 对于Create Table ，为表命名，并为其列数。

   

   • 给出列名和各自的大小或长度。

   

   • 转到插入选项卡，并插入要存储的值。（这只是一个示例）

   

   添加要显示的值。

   

   帖子表

3. 创建一个名为posts的PHP页面。 PHP并将文件夹放在XAMPP内的htdocs文件夹中。

   HTML 代码：将font-awesome目录下载到您的工作文件夹中，并为文件“font-awesome.min.css”引用适当的位置，如下所示。

   HTML

     
   
       
       
     
       
     
       
       
       
       
     
       
   
     
   
     
       
       
           
               
                   Latest Blogs
               
     
               
     
                   
                       
                           
                           
     
                               
                                   
                                       CAT 1
                               
                               
                               
                                   The domestic cat is a member 
                                   of the Felidae,a family that 
                                   had a common ancestor about 
                                   10–15 million years ago. The 
                                   genus Felis diverged from the 
                                   Felidae around 6–7 million 
                                   years ago.
                               
                           
                       
                   
               
           
       
     
       
       
       
         
       
       
     
       
       
         
       
       
   
     

   CSS 代码片段：以下“style.css”文件用于上述代码中的 HTML 控件样式。

   *{
     box-sizing: border-box;    
   }
     
   .card {
       height: 40%;
   }
     
   a.blog-link {    
       color:black;
       text-decoration:none;
   }
     
   a.blog-link:hover {    
       color: #adadad;
   }
     
   .column {
       float:left;
       width:15%;
       padding:2px;
       height:100px;
   }
     
   .row:after {
       content: "";
       display: table;
       clear: both;
   }
   

   输出：

   

   单张贴在这里

4. 现在，我们必须连接到数据库并检索“id”，因此与它对应的所有详细信息都添加到 DOM 中。为此，我们将使用 MySQL 查询。
   在这里，我们首先使用时间戳对数据库进行排序，使用“order by”子句，然后将最新博客的 id 推送到数组中，然后是文件“ retrieve_id ”中的其他 id 。 PHP ”。

   PHP

   query($sql);
   $sqlall= "SELECT * FROM posts ORDER BY timestamp desc";
   $resultall = $conn->query($sqlall);
      
   $i = 0;
      
   if ($result->num_rows > 0) {  
     
       // Output data of each row
       $idarray= array();
       while($row = $result->fetch_assoc()) {
           echo "
   ";  
           
           // Create an array to store the
           // id of the blogs        
           array_push($idarray,$row['id']); 
       } 
   }
   else {
       echo "0 results";
   }
   ?>
   

5. 更改“帖子。 PHP ”文件并包含上面的“ retrieve_id.php”。 PHP ”在里面。将卡片放入一个循环中，该循环将根据您要显示的帖子数量运行直到一个数字。使用 MySQL 查询，使用“ retrieve_id ”中创建的“id”数组从数据库表中检索值。 PHP ”。

   将PHP代码或具有从数据库中检索到的值的变量放置在 HTML 代码中的任何需要的位置。

   最终代码：是以上所有步骤和代码的组合。

   PHP

     
   
   
     
   
     
     
     Posts
     
     
     
     
     
     
     
     
     
   
     
   
     
     
     
       
         
           Latest Blogs
     
         
           
     
             
             
               
                 
                   " alt="Card image cap">
                   
                     
                       
                         
                     
                     
                     
                       
                     
                   
                 
               
             
             
           
         
       
     
     
     
     
     
     
     
     
       
     
     
       
     
     
   
     

   最终输出：

   

   最近添加的帖子