Solved

php results display

Posted on 2016-07-17
27
47 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
  • 12
  • 10
  • 5
27 Comments
 
LVL 51

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 30

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 30

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
 

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 51

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 30

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 30

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 51

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 51

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 30

Expert Comment

by:Marco Gasi
ID: 41715929
If ($i) does not mean anything :)
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 30

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 30

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 30

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 30

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 30

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 51

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Foreword In the years since this article was written, numerous hacking attacks have targeted password-protected web sites.  The storage of client passwords has become a subject of much discussion, some of it useful and some of it misguided.  Of cou…
Generating table dynamically is the most common issue faced by php developers.... So it seems there is a need of an article that explains the basic concept of generating tables dynamically. It just requires a basic knowledge of html and little maths…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now