title: Retrieving and Formatting Data Properly From MYSQL
body: <p>Okay so I'm trying to create a replica of the Billboard Hot 100. I have already a database and the page with the proper format I want. But when I tried to retrieve the data from the database, the format I used became a huge mess and a lot of errors appeared. </p>
  
  <p>Here's my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="chartsList"&gt;
   &lt;ul class="charts" style="list-style: none;"&gt;
    
  
  
    &lt;?php
    $songQuery = mysqli_query($con, "SELECT * FROM songs ORDER BY sales DESC LIMIT 100");
    while($row = mysqli_fetch_array($songQuery)) {
     
  
    $i = 2;
    foreach($songQuery as $songId) 
  
     echo "&lt;li class='chartsRow'&gt;
        &lt;div style='width:10%;height:100%;float:left; text-align: center;color:black;font-size: 40px;line-height: 150px;font-weight: 600;'&gt;$i&lt;/div&gt;
       &lt;img style='height: 30%; float: right; position: relative; top: 50; right: 89%;'src='" . $row['movement'] . "'&gt;
  
       &lt;img type='button' style='float: right;width: 25px;position: relative;top: 60;'onclick='myFunction()'src='assets/icons/expand.png'&gt;
       &lt;div style='width:90%; height:100%; display: block;''&gt;
  
      &lt;div style='width:15%;height:100%;float:left'&gt;
       &lt;img style='height: 90%;margin-top: 8;'src='". $row['coverArt'] . "'&gt;
      &lt;/div&gt;
      &lt;div style='width:85%; height: 100%;margin-left: 26%;''&gt;
       &lt;a style='font-size: 30px; font-weight: 600; position: relative; top: 30;'&gt;" . $row['title'] . "&lt;/a&gt;
       &lt;p style='position: relative;top: 10;''&gt;" . $row['artist'] . "&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
     &lt;div id='moreinfo'&gt;
        &lt;div class='lefty'&gt; 
        &lt;a&gt;" . $row['lastWeek'] . "&lt;/a&gt;
        &lt;p&gt;LAST WEEK&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class='lefty' style='border-left-style: solid;border-left-width: 1px;border-right-style: solid;border-right-width: 1px;border-right-color: #b7b7b7; border-left-color: #b7b7b7;'&gt;
       &lt;a&gt;" . $row['peak'] . "&lt;/a&gt;
       &lt;p&gt;PEAK POSITION&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class='lefty'&gt;
       &lt;a&gt;" . $row['woc'] . "&lt;/a&gt;
       &lt;p&gt;WEEKS ON CHART&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
   
  
      &lt;/li&gt;";
  
     $i = $i + 2;
    }
  
    ?&gt;
  
   &lt;/ul&gt;
     
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Current Issue: </p>
  
  <blockquote>
    <p>"Warning: mysqli_fetch_array() expects parameter 1 to be
    mysqli_result, boolean given in C:\xampp\htdocs\billboard\hot-100.php
    on line 52"</p>
  </blockquote>
  
  <p>What I'm trying to achieve is something that looks like this: <a href="https://www.billboard.com/charts/hot-100" rel="nofollow noreferrer">https://www.billboard.com/charts/hot-100</a> but with the rows from 2-100 taking up 60% of the screen and a lower portion that can appear/disappear when clicking the extend icon. </p>