Solved

php results display

Posted on 2016-07-17
27
67 Views
Last Modified: 2016-07-30
<?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>';

?>
0
Comment
Question by:doctorbill
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 10
  • 5
27 Comments
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41715717
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
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41715720
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
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41715722
@Julian: LOL I thought I was only me to not understand but I happily see I'm not alone :)
0
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 

Author Comment

by:doctorbill
ID: 41715732
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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41715785
Ah that makes sense - no time for solution now - maybe Marco can assist - if not I will pick up later.
0
 

Author Comment

by:doctorbill
ID: 41715786
Thanks you guys - very much appreciated
I learn so much from this
0
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 250 total points
ID: 41715834
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
 

Author Comment

by:doctorbill
ID: 41715898
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
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 250 total points
ID: 41715911
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
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41715914
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
 
LVL 56

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 41715917
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
 

Author Comment

by:doctorbill
ID: 41715925
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
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41715929
If ($i) does not mean anything :)
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41715932
Use
if (($i % 2) === 0) {

Open in new window

0
 

Author Comment

by:doctorbill
ID: 41715934
No syntax error and page works but everything is in just one list as opposed to columns
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41715935
Let me see the code you are using, please
0
 

Author Comment

by:doctorbill
ID: 41715936
<?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
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41715938
Ah, you're using Julian's code... I thought you were using mine ;)
0
 

Author Comment

by:doctorbill
ID: 41715940
ooops - can you paste your working solution again please
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 41715943
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
 

Author Comment

by:doctorbill
ID: 41715944
Perfect - working
Thanks a lot
0
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 250 total points
ID: 41715946
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
 

Author Comment

by:doctorbill
ID: 41715950
Marco and Julian - thanks very much
Problem solved
0
 

Author Comment

by:doctorbill
ID: 41715956
Thanks a lot
Complete solution
0
 

Author Closing Comment

by:doctorbill
ID: 41715957
Completed
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41724272
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
 

Author Comment

by:doctorbill
ID: 41735744
Thanks - good to know
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question