php results display

<?php
$deleteimage = "http://localhost:888/dropzone/delete.php?idvalue=";
$image = "uploads/";
$link= "<span class='linkfont'>";
$linkend= "</span>";


$sql = "SELECT id, file_name FROM files";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
	echo '<table width=""><tr valign="top">';
	$i=0;
	
    while($row = $result->fetch_assoc()) {
        echo "ID: " . $row["id"]. " - Name: " . $row["file_name"] . 
		
		"<td>" ." - Image: 
		". "<img src=".$image.$row["file_name"]." width='50px' height='50px' />
		 " . "</td>" . "<a href='".$deleteimage.$row["id"]."'>$link Delete Image from database</a>$linkend" . 
		
		"<br>";

    }
} else {
    echo "Current Images in Database:";
}
$conn->close();

?>
<?php
		$i++;
		if(  0==($i % 2) )
		{
			echo '</tr><tr valign="top">';
		}
	
	echo '</tr></table>';

?>

Open in new window


I am trying to get the above code to arrange the data as a grid across and down the page in 2 columns:
ID, Name, Image and "delete image from database"
When I add the code below it splits the data such that the ID, Name and delete image from database fields are listed on the left of the page and the images are displayed across the page as a continuous row below the ID, Name and delete image fields

echo '<table width=""><tr valign="top">';
      $i=0;

<?php
            $i++;
            if(  0==($i % 2) )
            {
                  echo '</tr><tr valign="top">';
            }
      
      echo '</tr></table>';

?>
doctorbillTechAsked:
Who is Participating?
 
Marco GasiConnect With a Mentor FreelancerCommented:
I rewrote the code to show you that:
if ($result->num_rows > 0) {
	// output data of each row
	echo '<table width="">';
	$i = 0;
	while ($row = $result->fetch_assoc()) {
		if (0 === ($i % 2)) {
			echo '<tr valign="top">';
		}
		echo "<td>ID: " . $row["id"] . " - Name: " . $row["picture"] . "</td>";
		echo "<td> - Image: <img src=" . $image . $row["picture"] . " width='50px' height='50px' /><a href='" . $deleteimage . $row["id"] . "'>$link Delete Image from database</a>$linkend</td>";
		if (1 === ($i % 2)) {
			echo "</tr>";
		}
		$i++;
	}
} else {
	echo "Current Images in Database:";
}
$conn->close();
echo '</table>';

Open in new window


Look at lines 6 and 11: there ypou have to change the values accordingly:
for 3 columns:
         line 6: if (0 === ($i % 3)) {
         line 11: if (2 === ($i % 3)) {
for 4 columns:
         line 6: if (0 === ($i % 4)) {
         line 11: if (3 === ($i % 4)) {

And so on...
btw, but only for logical reason, I would reverse the comparison order:

if ($i % 2) === 0 {

and

if ($i % 2) === 1 {
0
 
Julian HansenCommented:
I don't understand
as a grid across and down the page in 2 columns:
ID, Name, Image and "delete image from database
2 Columns - but ID + Name + Image + delete button = 4 columns?

Are you trying to do this
CSS
.grid-image {
  width: 50px;
  height: 50px;
}

Open in new window

<?php
$deleteimage = "http://localhost:888/dropzone/delete.php?idvalue=";
$image = "uploads/";
$link= "<span class='linkfont'>";
$linkend= "</span>";


$sql = "SELECT id, file_name FROM files";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
  echo <<< TABLE
    <table width="">
TABLE;

  $i=0;
  
  while($row = $result->fetch_assoc()) {
    echo <<< ROW
      <tr valign="top">
        <td>{$row['id']} - Name: {$row['file_name']} - Image: <img src="{$image}{$row["file_name"]}" class="grid-image"/></td>
        <td><a href="{$deleteimage}{$row["id"]}">{$link} Delete Image from database</a>{$linkend}</td>
      </tr>
ROW;
    }
} else {
    echo "Current Images in Database:";
}
$conn->close();

Open in new window

The problem with your code is you are trying to output data outside of <td> cells within the table.

The code I have posted has not been tested so you might need to tweak for your purposes.

In a nutshell the changes I have made are
1. Use HEREDOC for your output - much easier to see what is going on
2. All content moved to within cells
3. Each row is output as a single unit - no need for the catchup loop at the end.

Post back if you have any queries.
0
 
Marco GasiFreelancerCommented:
Sorry but I really don't understand how you are trying to format your table. If you want group Id and file name in a column and the image and the link to delete it in another column this should do it:
<?php
$deleteimage = "http://localhost:888/dropzone/delete.php?idvalue=";
$image = "uploads/";
$link = "<span class='linkfont'>";
$linkend = "</span>";


$sql = "SELECT id, file_name FROM files";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
	// output data of each row
	echo '<table width="">';
	$i = 0;

	while ($row = $result->fetch_assoc()) {
		echo '<tr valign="top">';
		echo "<td>ID: " . $row["id"] . " - Name: " . $row["file_name"] . "</td>";
		echo "<td> - Image: <img src=" . $image . $row["file_name"] . " width='50px' height='50px' /><a href='" . $deleteimage . $row["id"] . "'>$link Delete Image from database</a>$linkend</td>";
		echo "</tr>";
	}
} else {
	echo "Current Images in Database:";
}
$conn->close();
echo '</tr></table>';
?>

Open in new window


Also, I didn't understand what you're checking for odd/even rows.
That said, for each roq in the result set you have to print a row (<tr>) in your table and within each row you have to put 2 (or more) columns accordingly to the layout you want to get.
If you try to explain me better maybe I can give you a better answer :)
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Marco GasiFreelancerCommented:
@Julian: LOL I thought I was only me to not understand but I happily see I'm not alone :)
0
 
doctorbillTechAuthor Commented:
I have attached a pdf of the final result I am trying to achieve
The recordset should be displayed as 2 columns down the page  - the record on top left will have ID of 264, then the one to the right will have ID 265, then next one down on the left ID 266 etc down the page for all the records returned (I just copied and pasted the same record for ease of demonstration)
grid.pdf
0
 
Julian HansenCommented:
Ah that makes sense - no time for solution now - maybe Marco can assist - if not I will pick up later.
0
 
doctorbillTechAuthor Commented:
Thanks you guys - very much appreciated
I learn so much from this
0
 
Marco GasiConnect With a Mentor FreelancerCommented:
You can use this:
if ($result->num_rows > 0) {
	// output data of each row
	echo '<table width="">';
	$i = 0;
	while ($row = $result->fetch_assoc()) {
		if (0 == ($i % 2)) {
			echo '<tr valign="top">';
			echo "<td>ID: " . $row["id"] . " - Name: " . $row["file_name"] . "</td>";
			echo "<td> - Image: <img src=" . $image . $row["file_name"] . " width='50px' height='50px' /><a href='" . $deleteimage . $row["id"] . "'>$link Delete Image from database</a>$linkend</td>";
		}else{
			echo "<td>ID: " . $row["id"] . " - Name: " . $row["file_name"] . "</td>";
			echo "<td> - Image: <img src=" . $image . $row["file_name"] . " width='50px' height='50px' /><a href='" . $deleteimage . $row["id"] . "'>$link Delete Image from database</a>$linkend</td>";
			echo "</tr>";
		}
		$i++;
	}
} else {
	echo "Current Images in Database:";
}

Open in new window

0
 
doctorbillTechAuthor Commented:
Perfect - thanks. Works just as I want it to
Obviously I will close the ticket and award points
If I wanted to have 3, 4 etc  columns what would I need to edit
0
 
Julian HansenCommented:
Not to take anything a way from Marco but a couple of things I noticed

1. There is the potential with odd number of items not to close the <tr>
2. The output lines are duplicated unnecessarily

Notes:
1. I would strongly suggest using HEREDOC
2. Put your styling in CSS
3. It is not necessary to repeat the code to output the cells - all that is required is a check to see if you are outputting a start of a <tr> or a closing <tr> and flip a flag to indicate what you are doing next.

Here is an alternative
CSS
.grid-image {
  width: 50px;
  height: 50px;
}

Open in new window

CODE
if ($result->num_rows > 0) {
  // output data of each row
  echo <<< TABLE
    <table width="">
TABLE;
  $i = true;
  while ($row = $result->fetch_assoc()) {
    // START A ROW SO OUTPUT THE START
    if ($i)) {
      echo <<< STARTROW
      <tr valign="top">
STARTROW;
    }
    
    // DUMP THE DATA
    echo <<< CELLS
      <td>{$row['id']} - Name: {$row['file_name']} - Image: <img src="{$image}{$row["file_name"]}" class="grid-image"/></td>
      <td><a href="{$deleteimage}{$row["id"]}">{$link} Delete Image from database</a>{$linkend}</td>
CELLS;

    // END OF ROW DUMP THE END
     if (!$i) {
      echo <<< ENDROW
      </tr>
ENDROW;
    }
    
    // FLIP
    $i = !$i;
  }
} else {
  echo "Current Images in Database:";
}

Open in new window

0
 
Julian HansenConnect With a Mentor Commented:
Now, having said that - tables are meant for tabular data. The correct way of doing this layout is in floated div's. You can use Bootstrap's grid system to achieve this.

The advantage with this is that the framework will automatically layout the columns as you want - and to expand to 3 or 4 columns is dead simple.

For instance, in the following sample - using bootstrap you simply output a sequence of <div> elements styled with the bootstrap col- class and amend for the column layout you want.

Does what you want and is responsive.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
...
</head>

if ($result->num_rows > 0) {
  // output data of each row
  echo <<< TABLE
    <div class="row">
TABLE;
  $i = true;
  while ($row = $result->fetch_assoc()) {
    // START A ROW SO OUTPUT THE START
    if ($i)) {
    // TWO COLUMN LAYOUT - CHANGE TO col-xs-4 FOR 3 and col-xs-3 FOR 4 etc
      echo <<< COLUMN
      <div class="col-xs-6">
      {$row['id']} - Name: {$row['file_name']} - Image: <img src="{$image}{$row["file_name"]}" class="grid-image"/>
      <a href="{$deleteimage}{$row["id"]}">{$link} Delete Image from database</a>{$linkend}
COLUMN;
    }
    
    // FLIP
    $i = !$i;
  }
  echo <<< ROW
  </div>
ROW;
} else {
  echo "Current Images in Database:";
}

Open in new window

0
 
doctorbillTechAuthor Commented:
I changed this "if ($i)) {"  to if ($i) { as it was giving a syntax error

The page displays as one long list as opposed to columns
0
 
Marco GasiFreelancerCommented:
If ($i) does not mean anything :)
0
 
Marco GasiFreelancerCommented:
Use
if (($i % 2) === 0) {

Open in new window

0
 
doctorbillTechAuthor Commented:
No syntax error and page works but everything is in just one list as opposed to columns
0
 
Marco GasiFreelancerCommented:
Let me see the code you are using, please
0
 
doctorbillTechAuthor Commented:
<?php
$deleteimage = "http://localhost:888/dropzone/delete.php?idvalue=";
$image = "uploads/";
$link= "<span class='linkfont'>";
$linkend= "</span>";
$tdwidth = "<td class='tdwidth'>";


$sql = "SELECT id, file_name FROM files";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  echo <<< TABLE
    <div class="row">
TABLE;
  $i = true;
  while ($row = $result->fetch_assoc()) {
    // START A ROW SO OUTPUT THE START
    if (($i % 2) === 0) {
    // TWO COLUMN LAYOUT - CHANGE TO col-xs-4 FOR 3 and col-xs-3 FOR 4 etc
      echo <<< COLUMN
      <div class="col-xs-6">
      {$row['id']} - Name: {$row['file_name']} - Image: <img src="{$image}{$row["file_name"]}" class="grid-image"/>
      <a href="{$deleteimage}{$row["id"]}">{$link} Delete Image from database</a>{$linkend}
COLUMN;
    }
    
    // FLIP
    $i = !$i;
  }
  echo <<< ROW
  </div>
ROW;
} else {
  echo "Current Images in Database:";
}
$conn->close();

?>

Open in new window


I think it is because the images were being resized to 50 and 50 (square)
0
 
Marco GasiFreelancerCommented:
Ah, you're using Julian's code... I thought you were using mine ;)
0
 
doctorbillTechAuthor Commented:
ooops - can you paste your working solution again please
0
 
Marco GasiFreelancerCommented:
My code is this
if ($result->num_rows > 0) {
	// output data of each row
	echo '<table width="">';
	$i = 0;
	while ($row = $result->fetch_assoc()) {
		if (0 === ($i % 2)) {
			echo '<tr valign="top">';
		}
		echo "<td>ID: " . $row["id"] . " - Name: " . $row["file_name"] . "</td>";
		echo "<td> - Image: <img src=" . $image . $row["file_name"] . " width='50px' height='50px' /><a href='" . $deleteimage . $row["id"] . "'>$link Delete Image from database</a>$linkend</td>";
		if (1 === ($i % 2)) {
			echo "</tr>";
		}
		$i++;
	}
} else {
	echo "Current Images in Database:";
}
$conn->close();
echo '</table>';

Open in new window

0
 
doctorbillTechAuthor Commented:
Perfect - working
Thanks a lot
0
 
Marco GasiConnect With a Mentor FreelancerCommented:
And here the Julian's Bootstrap layout with a couple of fixes:
if ($result->num_rows > 0) {
	// output data of each row
	$i = true;
	while ($row = $result->fetch_assoc()) {
		// START A ROW SO OUTPUT THE START
		if ($i) {
			echo <<< TABLE
    <div class="row">
TABLE;
		}
		// TWO COLUMN LAYOUT - CHANGE TO col-xs-4 FOR 3 and col-xs-3 FOR 4 etc
		echo <<< COLUMN
      <div class="col-xs-6">
      {$row['id']} - Name: {$row['file_name']} - Image: <img src="{$image}{$row["file_name"]}" class="grid-image"/>
      <a href="{$deleteimage}{$row["id"]}">{$link} Delete Image from database</a>{$linkend}</div>
COLUMN;
		if (!$i) {
			echo <<< TABLE
    </div>
TABLE;
			// FLIP
			$i = !$i;
		}
	}
	echo <<< ROW
  </div>
ROW;
} else {
	echo "Current Images in Database:";
}

Open in new window

0
 
doctorbillTechAuthor Commented:
Marco and Julian - thanks very much
Problem solved
0
 
doctorbillTechAuthor Commented:
Thanks a lot
Complete solution
0
 
doctorbillTechAuthor Commented:
Completed
0
 
Julian HansenCommented:
Just for completeness here is corrected code. The main difference between this and Marco's correction (thanks Marco) is that the <div class="row"> is moved outside the loop. This is necessary to take advantage of the Bootstrap versatility with respect to different column layouts the columns need to be contained within a single row.
<!doctype html>
<html>
<head>
<title>Responsive layout for column data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<?php
$db = new mysqli('localhost',user','password','database');

$deleteimage = "http://localhost:888/dropzone/delete.php?idvalue=";
$image = "uploads/";
$link= "<span class='linkfont'>";
$linkend= "</span>";

$result = $db->query("Select * from tableName");

if ($result->num_rows > 0) {
  // output data of each row
  echo <<< STARTROW
    <div class="row">
STARTROW;
  while ($row = $result->fetch_assoc()) {
    // TWO COLUMN LAYOUT - CHANGE TO col-xs-4 FOR 3 and col-xs-3 FOR 4 etc
    echo <<< COLUMN
      <div class="col-sm-6">
      {$row['id']} - Name: {$row['file_name']} - Image: <img src="{$image}{$row['file_name']}" class="grid-image"/>
      <a href="{$deleteimage}{$row['id']}">{$link} Delete Image from database</a>{$linkend}</div>
COLUMN;
  }
  echo <<< ENDROW
  </div>
ENDROW;
} else {
  echo "Current Images in Database:";
}
?>
</div>
</body>
</html>

Open in new window

1
 
doctorbillTechAuthor Commented:
Thanks - good to know
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.