需要重复的div才能从一个div代码生成多个数据库行

时间:2019-01-10 00:05:13

标签: php html mysqli

好的,这确实是一个重复的问题。我已经在这里搜索答案很长时间了,但是没有使用正确的搜索关键字。

这是我的原始问题:

我正在尝试从数据库中提取数据,并通过将变量输入到我的html和php代码中以用于特定的div设置来使用查询。我希望一遍又一遍地进行相同的div设置,但是对于每个数据库行,都应包含每个数据库行的信息。

不幸的是,通过尝试在这里和其他来源中可以找到的所有内容,我正在变成该项目的复制粘贴编码器。但是,似乎没有任何作用。我从这里尝试的解决方案的一半会导致div布局中断。其余的显示变量的php代码,而不是变量本身。

<?php
    $db = mysqli_connect('localhost','db_user','db_password','db_name');
?>
 <html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dragon Site</title>
     <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/responsee.css">
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="owl-carousel/owl.theme.css">
    <link rel="stylesheet" href="css/lightcase.css">
    <!-- CUSTOM STYLE -->      
    <link rel="stylesheet" href="css/template-style.css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,600,900&subset=latin-ext" rel="stylesheet"> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>      
  </head>

  <body class="size-1140">
    <div id="page-wrapper">
      <!-- HEADER -->
      <header role="banner" class="position-absolute margin-top-30 margin-m-top-0 margin-s-top-0">    
        <!-- Top Navigation -->
        <nav class="background-transparent background-transparent-hightlight full-width sticky">
      <div class="s-12 l-2">
        <a href="index.html" class="logo">
          <!-- Logo version before sticky nav -->
          <img class="logo-before" src="img/logo-dark.png" alt="">
          <!-- Logo version after sticky nav -->
          <img class="logo-after" src="img/logo-dark.png" alt="">
        </a>
      </div>
    </nav>
  </header>


      <?php
            $query = "SELECT * FROM `usa_games`;";
            $result = mysqli_query($db, $query);
            while($row = mysqli_fetch_assoc($result)) {
                  // Display your datas on the page
            }
      ?>


  <!-- MAIN -->
  <main role="main">
    <!-- Content -->
    <article>
      <header class="section background-white">
        <div class="line text-center">        
          <p class="margin-bottom-0 text-size-16 text-dark">All USA Region Games</p>
        </div>  
      </header>

      <div class="background-white full-width"> 
<?php
while($row = mysqli_fetch_array($result)) {
//make the variables   
$game_name = $row['game_name'];
$image_name = $row['image_name'];
$file_name = $row['file_name'];
$qr_name = $row['qr_name'];
?>

        <div class="s-12 m-6 l-five">
          <a class="image-with-hover-overlay image-hover-zoom" href="dlfiles/usa-games/<?php echo $file_name ?>" title="<?php echo $game_name ?>">
            <div class="image-hover-overlay background-primary"> 
              <div class="image-hover-overlay-content text-center padding-2x">
                <h3 class="text-white text-size-20 margin-bottom-10"><?php echo $game_name ?></h3>
                <p class="text-white text-size-14 margin-bottom-20"><img class="full-img" src="qrcodes/<?php echo $qr_name ?>" alt="<?php echo $game_name ?>"/></p>  
              </div> 
            </div> 
            <img class="full-img" src="img/3ds/digi/US/<?php echo $image_name ?>" alt="<?php echo $game_name ?>"/>
          </a>  
            </div>

    <?php }?>

<?php 
mysqli_close ($db_server);
?>

          </div>  
        </article>
      </main>
    <script type="text/javascript" src="js/responsee.js"></script>
    <script type="text/javascript" src="js/jquery.events.touch.js"></script>
    <script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
    <script type="text/javascript" src="js/template-scripts.js"></script> 
  </body>
</html>

预期结果将是一个div网格,其中每个数据库行均以存在的任意行表示。

实际结果,是仅在页面上显示的标题,没有div。 (ps-这是在我解决了sql调用的一些问题之后,根据评论,php甚至不在我的页面上运行)

这是我最终找到“我如何使用PHP / MySQL如何显示具有相同样式的多个数据库对象”的答案的问题。位于此处。

这就是我将代码更改为的代码,以使其正常工作:

<html lang="en-US">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dragon Site</title>
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" href="css/lightcase.css">
<!-- CUSTOM STYLE -->      
<link rel="stylesheet" href="css/template-style.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,600,900&subset=latin-ext" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>      
  </head>

  <body class="size-1140">
    <div id="page-wrapper">
  <!-- HEADER -->
  <header role="banner" class="position-absolute margin-top-30 margin-m-top-0 margin-s-top-0">    
    <!-- Top Navigation -->
    <nav class="background-transparent background-transparent-hightlight full-width sticky">
      <div class="s-12 l-2">
        <a href="index.html" class="logo">
          <!-- Logo version before sticky nav -->
          <img class="logo-before" src="img/logo-dark.png" alt="">
          <!-- Logo version after sticky nav -->
          <img class="logo-after" src="img/logo-dark.png" alt="">
        </a>
      </div>
    </nav>
  </header>

  <!-- MAIN -->
  <main role="main">
    <!-- Content -->
    <article>
      <header class="section background-white">
        <div class="line text-center">        
          <p class="margin-bottom-0 text-size-16 text-dark">All USA Region Games</p>
        </div>  
      </header>

   <?php 
  $servername = "localhost"; 
  $username = "db_username"; 
  $password = "db_password"; 
  $dbname = "db_username";

// Create connection 
$conn = mysqli_connect($servername, $username, $password, $dbname); 

//Check connection 
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error()); }



  $sql = "SELECT game_name, file_name, image_name, qr_name FROM usa_games";

$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
// output data of each row

echo '<div class="background-white full-width">'; 
echo '<div class="s-12 m-6 l-five">';

    while($row = mysqli_fetch_assoc($result)) {

    echo '<a class="image-with-hover-overlay image-hover-zoom" href="dlfiles/usa-games/' . $row["file_name"]. '" title=' . $row["game_name"]. '>';
      echo "<div class='image-hover-overlay background-primary'>";
        echo "<div class='image-hover-overlay-content text-center padding-2x'>";
          echo '<h3 class="text-white text-size-20 margin-bottom-10">' . $row["game_name"]. '</h3>';
          echo '<p class="text-white text-size-14 margin-bottom-20"><img class="full-img" src="qrcodes/' . row["qr_name"]. '" alt=' . $row["game_name"]. '/></p>';
        echo "</div>";
      echo "</div>";
      echo '<img class="full-img" src="img/3ds/digi/US/' . $row["image_name"]. '" alt=' . $row["game_name"]. '/>';
    echo "</a>";
    }   
  echo "</div>";

} 
else {
        echo "0 results"; }

mysqli_close($conn); ?>


      </div>  
    </article>
  </main>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="js/jquery.events.touch.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"> </script>
<script type="text/javascript" src="js/template-scripts.js"></script> 
  </body>
</html>

我希望这也可以帮助其他人找到正确的答案(如果未删除的话)。

1 个答案:

答案 0 :(得分:-1)

while($row = mysql_fetch_array($result))
//make the variables   
$game_name = $row['game_name'];
$image_name = $row['image_name'];
$file_name = $row['file_name'];
$qr_name = $row['qr_name'];
{?>

需要成为

while($row = mysql_fetch_array($result)) {
    //make the variables   
    $game_name = $row['game_name'];
    $image_name = $row['image_name'];
    $file_name = $row['file_name'];
    $qr_name = $row['qr_name'];
?>

如您所写,while循环仅适用于$game_name行。

您还将mysqlmysqli调用混合在一起,并且对同一结果集进行了两次迭代(第一次,完全不产生任何输出)。