Solved

Table lay out with results coming from a XML file

Posted on 2010-09-06
12
533 Views
Last Modified: 2013-11-18
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
Comment
Question by:Dada44
  • 5
  • 4
  • 3
12 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
Where did you get these image links?  It hung my computer when I tried to read them.
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
Comment Utility

<?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
 

Author Comment

by:Dada44
Comment Utility
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
 
LVL 14

Expert Comment

by:EMB01
Comment Utility
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
 
LVL 14

Expert Comment

by:EMB01
Comment Utility
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
 

Author Comment

by:Dada44
Comment Utility
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
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 108

Expert Comment

by:Ray Paseur
Comment Utility
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
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
 

Author Closing Comment

by:Dada44
Comment Utility
thanks a lot! amazing!
0
 
LVL 14

Expert Comment

by:EMB01
Comment Utility
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
 
LVL 14

Expert Comment

by:EMB01
Comment Utility
Oh, Rays must have worked, as usual.  Good job!
0
 
LVL 14

Expert Comment

by:EMB01
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
I made this because I wanted to get e-mail with a attached csv file so I'd would be able to import user input into a MS Excel template, but I also wanted to register/save all inputs from each day in a file on the server. 1st - It creates a temp C…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

743 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