A nested WHILE loop to fetch and display data from TWO tables - php

Question

I'm in the process of building an entertainment website. It uses THREE MySQL tables; one called title, one called clips and one called dialogue.
I've been playing around all day with having my PHP fetch data from TWO of the tables (clips and dialogue) and output the content in a HTML table.
I've not had much luck and to cap it all, I was using a free host which has now reached its EP limit and although I've upgraded, I've got to wait 24 hours to try the code I've now come up with.
My question is, have I done it right? Will this collect basic information about the clip and then produce each line of the script in a new TR before going back to the start and collecting information for the next clip?
I really hope this makes sense.
I've tried researching this and have re-built my PHP from the ground up, ensuring that I annotate each section. Last time I checked, it still didn't work!
<table class='container'>";
##############################
# CLIPS QUERY & ECHOING HERE #
##############################
$clipsquery = "SELECT * FROM clips WHERE titleid=$mainurn ORDER BY clipid";
$result2 = mysqli_query($cxn, $clipsquery);
while ($row2 = mysqli_fetch_assoc($result2))
{extract ($row2);
echo "
<tr>
<td colspan='3' class='divider'></td>
</tr>
<tr>
<td class='description'>";
if ($epident == "")
{echo "";}
else
{echo "<span class='episode'>$epident</span>";}
echo "</td>
<td rowspan='2' style='text-align: right'><audio controls>
<source src='media/$clipid.mp3' type='audio/mpeg'>Your browser does not support the audio element.</audio></td>
<td rowspan='2' style='text-align: right'><a href='media/$clipid.mp3' download='$clipid.mp3'><img src='graphics/dl-icon.png' alt='Download Icon' title='Right-click here to download this clip to your computer.'></a></td>
</tr>
<tr>
<td class='description'>$clipsynopsis</td>
</tr>
<tr>
<td colspan='3'></td>
</tr>";
#################################
# DIALOGUE QUERY & ECHOING HERE #
#################################
$dialoguequery = "SELECT * FROM dialogue WHERE clipid=$clipid ORDER BY linenum";
$result3 = mysqli_query($cxn, $dialoguequery);
while ($row3 = mysqli_fetch_assoc($result3))
{extract ($row3);
echo "
<tr>
<td class='speaker'>$speaker:</td>
<td colspan='2' class='script'>$dialogue:</td>
</tr>";}}
echo "
</table>
I've got the site to work (sort of) but the formatting went wild and sometimes included clips from other sources not meant to be on the page!

Answer 1

There are some things I would change in your code. If you trust the variables going into your sql query then change your while loops:
while($row = $result->fetch_assoc()){
$fetchValue = $row['COLUMN_NAME'];
}
I would say you shouldn't be using extract here.
If the user is able to modify the variables going into your sql statement you should implement prepared statements. I would build a class/function and just call it when you need it.
From the HTML/CSS side its probably going to serve you better to use css div tables, especially if you are planning to make the site responsive down the line. This can convert yours
With regards to the queries, I'm not sure I understand the structure of your tables. If you want to keep playing around on your machine install a L/W/M/AMP stack depending on your operating system. See here for more information.

Answer 2

You only need one table where you store the data of clips.
First, you fetch the data into an array, then
you can loop through that array with foreach,
creating the table and filling it with data.
You can use an alternative syntax for foreach to make mixing PHP with HTML easier.
//Creating the array of clips
$clips = [];
$sql = "SELECT * FROM clips";
if($result = mysqli_query($db, $sql)) {
while($row = mysqli_fetch_assoc($result)) {
array_push($clips, $row);
}
}
?>
<!-- Looping through the array and creating the table -->
<table class="container">
<?php foreach ($clips as $clip): ?>
<tr>
<td colspan='3' class='divider'></td>
</tr>
<tr>
<td class='description'>
<span class='episode'><?php echo $clip["id"]; ?></span>
</td>
<td rowspan='2' style='text-align: right'>
<audio controls>
<source src='<?php echo "media/". $clip["id"]. ".mp3"; ?>' type='audio/mpeg'>
Your browser does not support the audio element.
</audio>
</td>
<td rowspan='2' style='text-align: right'>
<a href='<?php echo "media/". $clip["id"]. ".mp3"; ?>' download='<?php echo $clip["id"]. ".mp3"; ?>'>
<img src='graphics/dl-icon.png' alt='Download Icon' title='Right-click here to download this clip to your computer.'>
</a>
</td>
</tr>
<tr>
<td class='description'>
<?php echo $clip["sypnosis"]; ?>
</td>
</tr>
<tr>
<td class='speaker'>
<?php echo $clip["speaker"]; ?>
</td>
<td colspan='2' class='script'><?php echo $clip["dialogue"]; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
You need 1 MySQL table (clips) with the 4 attributes.
You should consider using PDO over mysqli, because it's a better way of dealing with the database.
Also, template engines like Smarty can help you make the code more readable and modifiable, separating the application logic from the presentation logic.

Answer 3

you must use JOIN in your Sql query
SELECT
clips.clipid, clips.columnname,
dilogue.id, dialogue.columnname
FROM
clips JOIN dialogue ON
clips.clipid = dialogue.id
WHERE
clipid=$clipid
ORDER BY linenum
then you can use
while($row = mysqli_fetch_assoc($result)){
echo $row['column name in clips table'];
echo $row['column name in dialogue table'];
}
but you must use Prepared statements or
mysqli_real_escape_string()
to avoid Sql Injections
also open and close PHP tags before and after html)