[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 542
  • Last Modified:

Table lay out with results coming from a XML file

Dear all,


I'm reading an xml file using php and I'm displaying the data with no problems.

Now I want to display the data, some images, in a html table.
As the xml will change in the future, and I don't know the number of images it may have, the table should have columns of 3 images, and the rows that the number of data may need.

For example: if I have 5 images it should show the first 3 images in the 1st row and a second row with 2 images, and if I have 7 images it should show the first 3 images in the 1st row, a second row with another 3 images and a last row with just one image...

The code below is displaying the images in just one row, with no lay out .. what am I doing wrong??

Thanks a ton!

THE PHP FILE:

 <table width="366" align="center">
        <tr>


	<?php
  $doc = new DOMDocument();

  $doc->load('myxmlfile.xml');
    
     $imgDs = $doc->getElementsByTagName( "imgDet" );
  foreach( $imgDs as $imgD )
  {
  
    
  
    $imgs = $doc->getElementsByTagName( "img" );
  foreach( $imgs as $img )
  {
  
  
   $paths = $img->getElementsByTagName( "path" );
  $path = $paths->item(0)->nodeValue;
  $bar_count = $doc->getElementsByTagName("path")->length;   

  
  echo" <td><img src='$path' width='110' height='82' border='0' /></td>";
 
 
       
       if($bar_count % 2 != 0)
        {
             echo"</tr><tr>";
        }
    
  }}

?>

</tr></table>


THE XML FILE:

<?xml version="1.0" encoding="utf-8"?>
<info>
	<book>
	<titulo><![CDATA[<span class='titulo1'>TWEET</span>]]></titulo>
	<image><![CDATA[tweet_50.jpg]]></image>
	<body><![CDATA[blabla<br>blablaado<br><br><br><br>]]></body>
	<imgDet>			
		<img><path><![CDATA[http://4.bp.blogspot.com/_OfeW7G9lntE/S-hONfiQMWI/AAAAAAAAAHQ/_VLbjWMXfFc/s1600/book.jpg]]></path>
		</img>
		<img><path><![CDATA[http://ceiplossalados.centros.educa.jcyl.es/sitio/upload/img/book.jpg]]></path>
		</img>
		<img><path><![CDATA[http://blog.mpl.org/nowatmpl/books1.jpg]]></path>
		</img>
		<img><path><![CDATA[http://freesouls.cc/thebooks/full/01-HARDCOVER-BOOK-perspective-a_d.jpg]]></path>
		</img>
		<img><path><![CDATA[http://www.locosxlosbits.com/wp-content/uploads/2009/12/smashing_book.jpg]]></path>
		</img>
	</imgDet>
	</book>
</info>

Open in new window

0
Dada44
Asked:
Dada44
  • 5
  • 4
  • 3
1 Solution
 
Ray PaseurCommented:
Where did you get these image links?  It hung my computer when I tried to read them.
0
 
Ray PaseurCommented:

<?php // RAY_temp_dada44.php
error_reporting(E_ALL);

// SHOW IMAGES IN TABULAR ROWS OF THREE

// TEST DATA FROM THE POST AT EE (MODIFIED)
$xml = <<<EOXML
<?xml version="1.0" encoding="utf-8"?>
<info>
	<book>
	<titulo><![CDATA[<span class='titulo1'>TWEET</span>]]></titulo>
	<image><![CDATA[tweet_50.jpg]]></image>
	<body><![CDATA[blabla<br>blablaado<br><br><br><br>]]></body>
	<imgDet>
		<img><path><![CDATA[http://www.google.com/images/icons/hpcg/usflag-transbg_42.png]]></path>
		</img>
		<img><path><![CDATA[http://www.google.com/images/icons/hpcg/usflag-transbg_42.png]]></path>
		</img>
		<img><path><![CDATA[http://www.google.com/images/icons/hpcg/usflag-transbg_42.png]]></path>
		</img>
		<img><path><![CDATA[http://www.google.com/images/icons/hpcg/usflag-transbg_42.png]]></path>
		</img>
		<img><path><![CDATA[http://www.google.com/images/icons/hpcg/usflag-transbg_42.png]]></path>
		</img>
		<img><path><![CDATA[http://www.google.com/images/icons/hpcg/usflag-transbg_42.png]]></path>
		</img>
		<img><path><![CDATA[http://www.google.com/images/icons/hpcg/usflag-transbg_42.png]]></path>
		</img>
	</imgDet>
	</book>
</info>
EOXML;

// MAKE AN OBJECT
$obj = SimpleXML_Load_String($xml, 'SimpleXMLElement', LIBXML_NOCDATA);

// ACTIVATE THIS TO SEE THE OBJECT
// echo "<pre>"; var_dump($obj);

// EXTRACT THE IMAGE URLS FROM THE OBJECT
foreach ($obj->book->imgDet->img as $url)
{
   $arr[] = (string)$url->path;
}

// CREATE THE TABLE
echo "<table>" . PHP_EOL;

// CREATE THE ROW(S)
while (!empty($arr))
{
    $kount = 3;
    echo "<tr>";

    // CREATE THE DATA ELEMENTS
    while (!empty($arr))
    {
        // http://us2.php.net/manual/en/function.array-shift.php
        $img = array_shift($arr);
        echo "<td>";
        echo "<img src=\"$img\" />";
        echo "</td>";
        $kount--;

        // IF THE ROW IS FULL
        if ($kount == 0)
        {
            echo "</tr>" . PHP_EOL;

            // IF THERE ARE MORE DATA ELEMENTS
	        if (!empty($arr))
	        {
	            $kount = 3;
	            echo "<tr>";
	        }
        }
    }
}

// IF THERE ARE EMPTY POSITIONS IN THE LAST ROW
$close_tr = FALSE;
while ($kount)
{
    $close_tr = TRUE;
    echo "<td> </td>";
    $kount--;
}

// END OF THE LAST ROW
if ($close_tr)
{
    echo "</tr>" . PHP_EOL;
}

// END OF THE TABLE
echo "</table>" . PHP_EOL;

Open in new window

0
 
Dada44Author Commented:
Sorry for that, they're Google's creative commons. You can substitute them for your own ..  (it's very odd anyway  I tried the script in both mac and PC and both is running .. )
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
EMB01Commented:
To do this, you could use conditions.  See code attached.
// to display the first three images per row

  // assign vars
  $imgs = $doc->getElementsByTagName( "img" );
  $counter = 0;

  // begin table
  echo "<table>";

  // create column
  echo "<td>";

  // loop images
  foreach( $imgs as $img ) {

    // begin row
    echo "<tr>";

    // create new row on third image
    if ($counter % 3) {

        echo "</tr><tr>";

    }

    // create image
    echo "<img src='$img' width='110' height='82' border='0' />";

  }

  // end row
  echo "</tr>";

  // end table
  echo "</table>";

Open in new window

0
 
EMB01Commented:
Forgot one line, please try this.
// to display the first three images per row

  // assign vars
  $imgs = $doc->getElementsByTagName( "img" );
  $counter = 0;

  // begin table
  echo "<table>";

  // create column
  echo "<td>";

  // loop images
  foreach( $imgs as $img ) {

    // begin row
    echo "<tr>";

    // create new row on third image
    if ($counter % 3) {

        echo "</tr><tr>";

    }

    // create image
    echo "<img src='$img' width='110' height='82' border='0' />";

    // iterate counter
    $counter++;

  }

  // end row
  echo "</tr>";

  // end table
  echo "</table>";

Open in new window

0
 
Dada44Author Commented:
Ray, looks gorgeous, but I cannot  put the xml inside of the php file I have to read it externaly.
I'm doing: $xml="myxmlfile.xml";
but it's not working, what am I doing wrong?
THanks!
0
 
Ray PaseurCommented:
0
 
Ray PaseurCommented:
As a practical matter, you may find that the external XML file is not always present, or is slow to load.  If your script blows up because of that, consider converting the load-file process to CURL.  You can trap errors better with CURL.  But for now the SimpleXML_Load_File() should work.  It does the same thing as the SimpleXML_Load_String() but reads from an external data source instead of a local variable.

Best regards, ~Ray
0
 
Dada44Author Commented:
thanks a lot! amazing!
0
 
EMB01Commented:
Did you try mine?  I'm interested in know if it works!  The whole file should work as:
// to display the first three images per row

  // assign vars
  $doc = new DOMDocument();
  $doc->load('myxmlfile.xml');
  $imgs = $doc->getElementsByTagName( "img" );
  $counter = 0;

  // begin table
  echo "<table>";

  // create column
  echo "<td>";

  // loop images
  foreach( $imgs as $img ) {

    // begin row
    echo "<tr>";

    // create new row on third image
    if ($counter % 3) {

        echo "</tr><tr>";

    }

    // create image
    echo "<img src='$img' width='110' height='82' border='0' />";

    // iterate counter
    $counter++;

  }

  // end row
  echo "</tr>";

  // end table
  echo "</table>";

Open in new window

0
 
EMB01Commented:
Oh, Rays must have worked, as usual.  Good job!
0
 
EMB01Commented:
This code works, just tested it.  Just plug it in here to test:
http://writecodeonline.com/php/
// to display the first three images per row

  // assign vars
  $imgs = array("http://lh6.ggpht.com/_kKbidMmtxIk/TGngBhbyTrI/AAAAAAAAAjc/hcvGGZGCulA/s720/IMG_5854.JPG", "http://lh3.ggpht.com/_kKbidMmtxIk/TGngBAeBcXI/AAAAAAAAAMo/CROMWcPjAJI/s512/IMG_5837.JPG", "http://lh5.ggpht.com/_kKbidMmtxIk/TGngA6wcMHI/AAAAAAAAAMk/mT9GvjLm1v0/s512/IMG_5829.JPG", "http://lh4.ggpht.com/_kKbidMmtxIk/TGngARTZLyI/AAAAAAAAAMg/HWNWYXTgV5o/s512/IMG_5825.JPG", "http://lh6.ggpht.com/_kKbidMmtxIk/TGngBhbyTrI/AAAAAAAAAjc/hcvGGZGCulA/s720/IMG_5854.JPG", "http://lh3.ggpht.com/_kKbidMmtxIk/TGngBAeBcXI/AAAAAAAAAMo/CROMWcPjAJI/s512/IMG_5837.JPG", "http://lh5.ggpht.com/_kKbidMmtxIk/TGngA6wcMHI/AAAAAAAAAMk/mT9GvjLm1v0/s512/IMG_5829.JPG", "http://lh4.ggpht.com/_kKbidMmtxIk/TGngARTZLyI/AAAAAAAAAMg/HWNWYXTgV5o/s512/IMG_5825.JPG");
  $counter = 0;

  // begin table
  echo "<table>";

  // begin row
  echo "<tr>";
  // create column
  echo "<td>";

  // loop images
  foreach( $imgs as $img ) {

    // create new row on third image
    if ($counter % 3 == 0) {

        echo "</td></tr><tr><td>";

    }

    
    // create image
    echo "<img src='$img' width='110' height='82' border='0' style='padding:5px'/>";

    // iterate counter
    $counter++;

  }

  // end column
  echo "</td>";
  // end row
  echo "</tr>";

  // end table
  echo "</table>";

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now