Outputting values from MySQL into a preformatted table - php

Question

I am making a periodic table and am new to php. I have looked far and wide for information on how to accomplish this task, but I can't find anything. What I want to do is query my database and get values for things like atomic weight, name, element symbol, etc, and have them populate in my periodic table that I have constructed with html and css. However, I just don't know to run the "while" loop and have the data populate in the appropriate spaces. I understand how to create a table with the results, but I don't understand how to have results populate into an html structure that has already been created. Here is a part of my code. Again, I am very new to php, so any help would be greatly appreciated. I'm fairly certain this has a lot to do with where I'm placing my opening/closing php tags. Essentially, how do I get the loop to recognize the variables within the html? Do I close php tags and reopen?
Thank you tremendously.
<?php
//query database (connection successful)//
$result=mysql_query("SELECT * FROM elementdata", $link);
//fetch results into array to loop through//
while($row = mysql_fetch_array($result)) {
//begin table structure where I would like to insert data//
<div id="hydrogen" class="element group1 period1">
<span class="number"> echo $row['atomicNumber']; </span><br>
<span class="symbol">H</span><br>
<span class="name"> echo $row['name']; </span><br>
<span class="molmass">1.007 94</span></div>
<div id="Helium" class="element group18 period1">
<span class="number">echo $row['atomicNumber'];</span><br>
<span class="symbol">He</span><br>
<span class="name"> echo $row['name']; </span><br>
<span class="molmass">4.002 602</span></div>
//...table continues...//
?>

Answer 1

You could go with two approaches, using PHP to echo the HTML or having PHP in the HTML.
PHP printing HTML
<?php
//query database (connection successful)//
$result=mysql_query("SELECT * FROM elementdata", $link);
//fetch results into array to loop through//
while($row = mysql_fetch_array($result)) {
//begin table structure where I would like to insert data//
echo '<div id="hydrogen" class="element group1 period1">';
echo ' <span class="number">' . $row['atomicNumber'] . '</span><br>';
echo ' <span class="symbol">H</span><br>';
echo ' <span class="name">' . $row['name'] . '</span><br>';
echo ' <span class="molmass">1.007 94</span></div>';
}
HTML with PHP
<?php
//query database (connection successful)//
$result=mysql_query("SELECT * FROM elementdata", $link);
//fetch results into array to loop through//
while($row = mysql_fetch_array($result)) {
?>
//begin table structure where I would like to insert data//
<div id="hydrogen" class="element group1 period1">';
<span class="number"><?php echo $row['atomicNumber']; ?></span><br>';
<span class="symbol">H</span><br>';
<span class="name"><?php echo $row['name']; ?></span><br>';
<span class="molmass">1.007 94</span></div>';
<?php
}

Answer 2

Well i am not sure about whether you are storing the molmass,symbol,group and period in the MySQL table, but you most probably are. Since i dont know what you named them, please replace molmass,atomicSymbol,atomic_group and atomic_period with your coloumn name.
You can use this code,
<?php
//query database (connection successful)//
$result=mysql_query("SELECT * FROM elementdata", $link);
//fetch results into array to loop through//
while($row = mysql_fetch_array($result)) {
// echo the first line, i.e the div
echo "<div id='{$row['name']}' class='element {$row['atomic_group']} {$row['atomic_period']}'>";
// Echo the atomic number, symbol, name and molmass
echo "<span class='number'>{$row['atomicNumber']}</span><br>";
echo "<span class='symbol'>{$row['atomicSymbol']}</span><br>";
echo "<span class='name'>{$row['name']}</span><br>";
echo "<span class='molmass'>{$row['molmass']}</span><br>";
echo "</div>";
}
?>
Explaination: The {} is required for us to insert the $row[''] syntax in a string, else it gives us trouble.
Rest we just loop over everything in the table, fetch what you named them and what group and period they belong to, create a div. Then we print each of their properties.

Answer 3

You need to step in and out of PHP
After :
//fetch results into array to loop through//
while($row = mysql_fetch_array($result)) {
If you want to output HTML, you must close PHP
?>
Now when you want to output some PHP variable inside a HTML tag :
<span class="number"><?php echo $row['atomicNumber']; ?></span><br>
Similar to the opening and closing tags in HTML, you enclose your PHP code within PHP tags.

Answer 4

Well, let's try one possible way:
<html>
<head>
</head>
<body>
<?php
open your db stuff
$query = " SELECT name,
symbol,
atomicnumber,
molmass,
otherstuff
FROM periodictabletable
WHERE index > 0 ";
$result = mysqli_query($cxn, $query) or die ("could not query database");
echo "<table>";
while ($row = mysqli_fetch_array($result))
{
echo "<tr><td>".$row['name']."</td><td>".$row['symbol']."</td><td>".$row['atomicnumber']."</td><td>".$row['molmass']."</td></tr>";
}
echo "</table>";
?>
</body>
</html>
Once you get this up and running, you can embed all kinds of formatting tags into the html, just make sure you only use single quotes for stuff like - class='numbercolor' .
But there are many ways to do this. You could make the table in html, then populate it with an ajax call - depends on what you want to do.
Have fun!