从数据库中获取随机结果并插入列中

Question

I'm trying to generate 6 column and 9 row long movie grid with random results from database on each user visit. I easily get random 54 results but I'm not able to separate results and insert them in 6 column as 9 row in each column. I was trying to break and continue while loop but no luck. How can I achieve this? Maybe I should run loop inside loop? My current code looks like this:

<?php
$i = 0;
$sql = "SELECT * FROM Movies ORDER BY RAND() LIMIT 54";
$gridmovies = $mysqli->query($sql);
if ($gridmovies->num_rows > 0) {
    while($row = $gridmovies->fetch_assoc()) {
        $i++
?>
            <div class="column" style="margin-top: 0px;">
              <a href="/similar/<?php echo $row['ImdbID']; ?>" class="item-card">
                <div class="overlay ov-show">
                  <div class="icon"><i class="fa fa-heart"></i></div>
                </div>
                <img src="<?php echo $row['PosterURL']; ?>" alt="<?php echo $row['EngTitle']; ?> / <?php echo $row['GeoTitle']; ?>">
              </a>          
            </div>
            <?php if ($i == 9) {break;} ?>
            <div class="column" style="margin-top: 40px;">
              <?php continue; ?>
              <a href="/similar/<?php echo $row['ImdbID']; ?>" class="item-card">
                <div class="overlay ov-show">
                  <div class="icon"><i class="fa fa-heart"></i></div>
                </div>
                <img src="<?php echo $row['PosterURL']; ?>" alt="<?php echo $row['EngTitle']; ?> / <?php echo $row['GeoTitle']; ?>">
              </a>
            </div>
            <?php if ($i == 18) {break;} ?>
            <div class="column" style="margin-top: 80px;">
              <?php continue; ?>
              <a href="/similar/<?php echo $row['ImdbID']; ?>" class="item-card">
                <div class="overlay ov-show">
                  <div class="icon"><i class="fa fa-heart"></i></div>
                </div>
                <img src="<?php echo $row['PosterURL']; ?>" alt="<?php echo $row['EngTitle']; ?> / <?php echo $row['GeoTitle']; ?>">
              </a>
            </div>
             <?php if ($i == 27) {break;} ?>
            <div class="column" style="margin-top: 120px;">
              <?php continue; ?>
              <a href="/similar/<?php echo $row['ImdbID']; ?>" class="item-card">
                <div class="overlay ov-show">
                  <div class="icon"><i class="fa fa-heart"></i></div>
                </div>
                <img src="<?php echo $row['PosterURL']; ?>" alt="<?php echo $row['EngTitle']; ?> / <?php echo $row['GeoTitle']; ?>">
              </a>
            </div>
            <?php if ($i == 36) {break;} ?>
            <div class="column" style="margin-top: 160px;">
              <?php continue; ?>
              <a href="/similar/<?php echo $row['ImdbID']; ?>" class="item-card">
                <div class="overlay ov-show">
                  <div class="icon"><i class="fa fa-heart"></i></div>
                </div>
                <img src="<?php echo $row['PosterURL']; ?>" alt="<?php echo $row['EngTitle']; ?> / <?php echo $row['GeoTitle']; ?>">
              </a>
            </div>
            <?php if ($i == 45) {break;} ?>
            <div class="column" style="margin-top: 200px;">
              <?php continue; ?>
              <a href="/similar/<?php echo $row['ImdbID']; ?>" class="item-card">
                <div class="overlay ov-show">
                  <div class="icon"><i class="fa fa-heart"></i></div>
                </div>
                <img src="<?php echo $row['PosterURL']; ?>" alt="<?php echo $row['EngTitle']; ?> / <?php echo $row['GeoTitle']; ?>">
              </a>
            </div>            
<?php
    } $gridmovies->free();
} else {
  echo 'error';
}
?>

Answer 1

First try to get your results in one place and display them in other so you have some separation in your code like so:(believe me, this will help you in the future)

$sql = "SELECT * FROM Movies ORDER BY RAND() LIMIT 54";
$gridmovies = $mysqli->query($sql);
$movies = [];
if ($gridmovies->num_rows > 0) {
    while ($row = $gridmovies->fetch_assoc()) {
        $movies[] = $row;
    }
}

In order to make a grid(a two dimensional entity) you need two loops (each loop for each dimension). One for rows and one for columns like so:

$rows = 9;
$columns = 6;
$index = 0;
for ($i = 0; $i < $columns; $i++) {
    if (!isset($movies[$index])) {
        break;
    }
    ?>
    <div class="column">
    <?php
    for ($j = 0; $j < $rows; $j++) {
        if (isset($movies[$index])) {
            $row = $movies[$index];
            // your html here
            ?>
                <a href="/similar/<?php echo $row['ImdbID']; ?>" class="item-card">
                    <div class="overlay ov-show">
                        <div class="icon"><i class="fa fa-heart"></i></div>
                    </div>
                    <img src="<?php echo $row['PosterURL']; ?>" alt="<?php echo $row['EngTitle']; ?> / <?php echo $row['GeoTitle']; ?>">
                </a>
            <?php
        } else {
            break;
        }
        $index++;
    }
    ?>
    </div >
    <?php
}

This way you avoid duplicating code. Everything is generated and if you want to change the format of the grid in 4 by 4 for example, it's easy, you just change the $rows and $columns variables.

EDIT Take a look at this example and how it is generated : IDEONE

This code is not tested. It may need some tweaks