asked on

Display randomly selected images in PHP

Hello Experts,
I am trying to display 5 random images, each time I click a button.
The following is my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
	    <meta charset = "UTF-8">
	    <title>Card Changer</title>
	    <?php
	    ini_set( 'display_errors', 1 );
	    error_reporting(E_ALL);
	    ?>
	</head>
	
	<body>
      <h1 align = 'center'>Card Changer</h1>
      <form>
        <table align = 'center'>
          <tr>
            <td><?php print "$array[$num_list[0]]"; ?></td>
            <td><?php print "$array[$num_list[1]]"; ?></td>
            <td><?php print "$array[$num_list[2]]"; ?></td>
            <td><?php print "$array[$num_list[3]]"; ?></td>
            <td><?php print "$array[$num_list[4]]"; ?></td>
          </tr>
          <tr><td align = 'center'><input type = 'button' value = 'Change' onclick = 'document.location = "cardChanger.php"' /></td></tr>
        </table>
      </form>

    </body>
</html>

Open in new window

And the following is my PHP code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
	    <meta charset="UTF-8">
	    <title>Poker Dealer</title>
	</head>
	
	<body>
      <?php
        ini_set( 'display_errors', 1 );
	    error_reporting(E_ALL);
       $array  = glob ("cards/*.gif"); //store paths in 'cards' directory with '.gif' extension

        $max = count($array); //check how many contents has created in array
  
        //pick five images from "cards" folder, no duplicate, randomly
        $num_list = range(1,$max);
        $num_list = array_rand($num_list,5); 
        shuffle ($num_list);
        
        print "$array[$num_list[0]]"."<br>";
        print "$array[$num_list[1]]"."<br>";
        print "$array[$num_list[2]]"."<br>";
        print "$array[$num_list[3]]"."<br>";
        print "$array[$num_list[4]]"."<br>";
    
      ?>
    </body>
</html>

Open in new window

As usual, my HTML code is not communicating to my PHP code and my HTML page is not displaying any images now.

How can I display the multiple images in HTML page using PHP and when I click a button, change the images, without displaying any duplicates? Is my approach going to a right direction...?

For this practice, I am using the images of a deck of playing cards and put them into a folder named "cards". I thought about that writing array for every single card, like "2c.gif", "2d.gif", "2h.gif", "2s.gif", and while I was searching online, I found a piece of code, which might be the way to go...

Thank you for your help in advance.

Gary

Confused why you have 2 separate pages - the first has nothing to do with the second so how is it supposed to get the random images
Just place your button into the second code sample and get rid of the first code sample.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
	    <meta charset="UTF-8">
	    <title>Poker Dealer</title>
	</head>
	
	<body>
      <?php
        ini_set( 'display_errors', 1 );
	error_reporting(E_ALL);
       $array  = glob ("images/*.png"); //store paths in 'cards' directory with '.gif' extension

        $max = count($array); //check how many contents has created in array

        //pick five images from "cards" folder, no duplicate, randomly
        $num_list = range(1,$max);
        $num_list = array_rand($num_list,5); 
        shuffle ($num_list);?>
     <h1 align = 'center'>Card Changer</h1>
      <form>
        <table align = 'center'>
          <tr>
            <td><?php print $array[$num_list[0]]; ?></td>
            <td><?php print $array[$num_list[1]]; ?></td>
            <td><?php print $array[$num_list[2]]; ?></td>
            <td><?php print $array[$num_list[3]]; ?></td>
            <td><?php print $array[$num_list[4]]; ?></td>
          </tr>
          <tr><td align = 'center'><input type = 'button' value = 'Change' onclick = 'document.location = "cardChanger.php"' /></td></tr>
        </table>
      </form>

        
    </body>
</html>

Open in new window

Also took the array items out of the quotation marks

Ray Paseur

PHP runs on the server. It prepares the HTML document that is sent to the client. By the time the client browser sees any data at all, PHP is finished with its work and the server has "gone back to sleep." If you want a fuller explanation of this, try this article about HTTP client server protocols.

It follows that a script that chooses 5 cards at random would run first, then the cards would be displayed in the HTML document after the script has run.

BTW, do you know Katherine Holmes of Washington, DC? She went to school with my son, and is a pretty good fencer!

Here is the general design pattern for creating the deck, shuffling it, and showing the five cards.
http://www.laprbass.com/RAY_temp_sabregirl.php

<?php // RAY_temp_sabregirl.php 2013-10-13
error_reporting(E_ALL);
echo '<pre>';

// SEE http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_28265916.html
// SHUFFLE A DECK OF CARDS AND DEAL FIVE

$deck = array
(  'as',  'ah',  'ad',  'ac'
,  '2s',  '2h',  '2d',  '2c'
,  '3s',  '3h',  '3d',  '3c'
,  '4s',  '4h',  '4d',  '4c'
,  '5s',  '5h',  '5d',  '5c'
,  '6s',  '6h',  '6d',  '6c'
,  '7s',  '7h',  '7d',  '7c'
,  '8s',  '8h',  '8d',  '8c'
,  '9s',  '9h',  '9d',  '9c'
, '10s', '10h', '10d', '10c'
,  'js',  'jh',  'jd',  'jc'
,  'qs',  'qh',  'qd',  'qc'
,  'ks',  'kh',  'kd',  'kc'
)
;

// SHUFFLE
shuffle($deck);

// CHOOSE 5 OF THE CARDS
$deal = array_slice($deck,0,5);

// SHOW THE CHOICES
print_r($deal);

// CREATE A FORM USING HEREDOC NOTATION TO REPEAT THE SHUFFLE/DEAL
$form = <<<EOD
<form>
<input type="submit" value="Re-Deal" />
</form>
EOD;
echo $form;

Open in new window

Please post back if you have any questions, ~Ray

sabregirl

ASKER

Hello GaryC123,
Thank you for your comment. I have a mental block just writing PHP and let it running... I need to work on to write HTML code in PHP code.

Anyway, I have tried to run the code you corrected for me, but even after I change some modification you made (for example, line 13, $array = glob ("images/*.png"); , my original code was "cards/*gif"), my page is blank and I think that I have some issues on my code...

I will look closer the code and see what's causing the displaying issue.

Thank you for your help though. I appreciate it.

sabregirl

Gary

Is cards a sub folder of where you are running the script from and are you sure the images are of type .gif?
If not then it will show nothing.

sabregirl

ASKER

Hello Ray_Paseur,
Thank you for your comment and the link. I don't practice epee, but I saw Katherine Holmes' name on USFA magazine and web site.

So you wrote all the contents in array manually in your sample. Does that mean that the piece of code I wrote,

$array  = glob ("images/*.png"); //store paths in 'cards' directory with '.gif' extension

      $max = count($array); //check how many contents has created in array

Open in new window

doesn't work well to what I would like to do...?

Also, the way you wrote the code, I should use shuffle function first, before I select 5 images randomly. It makes sense...

I try to apply your code to my case, showing actual deck images now. I may ask more questions later...

Thank you again for your help!

sabregirl

sabregirl

ASKER

Hello GaryC123,
Thank you for your comment. I named a image folder, "cards" instead of "images" and all the images are in that folder are .gif.

Thank you for checking. And the PHP file and "cards" sub folder are in the same "test4" folder.

sabregirl

Ray Paseur

Yes, I kind of assumed that the deck of cards would have four suits of 13 cards each. So the design is to create the deck of cards and shuffle the deck and choose five cards. Then you can use the five cards in the deal() array to create the image links.

Gary

Can you do a
var_dump($array)
after you populate it to make sure the array is filled from the directory.
The script works fine on my server.

Gary

When you view the source of the page do you see the TABLE HTML or is it blank?

sabregirl

ASKER

Hello GaryC123,
Please discard my previous comment. I had some extra comments which I didn't comment out. I'm seeing the changes, but not the images themselves, just the names I used in my array, like "cards/jc.gif", "cards/qd.gif".

So I need to fix this part and hopefully it'll be running!

Sorry for my confusion...and thank you for your help.

sabregirl

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sabregirl

ASKER

Hello GaryC123,
Thank you again for your help. Somehow, the codes you mentioned me didn't work, but when I modify the code to
<td><img src="<?php print $array[$num_list[0]]; ?>"></td>
it worked as I wanted to.

Thank you so much for all of your help and being so patient. I really appreciate it!

Gary

<?=$array[$num_list[4]]; ?>
is just shorthand for
<?php print $array[$num_list[4]]; ?>

So should work fine, but it may be disabled (short_open_tag)

sabregirl

ASKER

Thank you so much for all your help, GaryC123 and Ray_Paseur.
Yes, I am still new to PHP and will check the links as much as I can and will be a web designer with moderate knowledge of PHP and JavaScript (I know that especially knowing PHP is a big help to work on CMS sites).
I will go through the links that Ray_Paseur mentioned me in his comments, as I need to learn more.

I guess that I need to choose the best solution, which is very tough for me because both of the experts helped me a lot, but because GaryC123 gave me the very first answer, so it goes to his last answer.

Thank you again for your time and being so patient to answer my questions. I really appreciate your effort.

Ray Paseur

Thanks for the points. Footnote about short open tag... There are some confusing things about this, and the PHP gods have done less than nothing to help.

This is a full "start PHP" tag: <?php

This is a short-open tag: <?

This is a short-echo tag: <?=

A proliferation of different tags that mean same or similar things, coupled with configuration variables that enable or disable them, coupled with release-dependent support, coupled with changing defaults at different version levels? Really, PHP gods??

Nevertheless, that's where we have come to today, when everyone thinks he can be a software developer. So be patient with yourself, stick to well-identified learning resources, and build your own library of teaching examples. It won't happen over night, but you will conquer the beast eventually!

sabregirl

ASKER

Hello Ray_Paseur,
I'm so sorry that I didn't say thank you for your last comment and cheer.
Quite a few times, I feel like that I keep making the same mistakes, not learning anything, but as I don't have the code brains, my progress will be like a snail. Still, if I won't give up, one day I can be a web designer with some decent knowledge of JaveScript and PHP, I hope.

Thank you again for all of your help. I really appreciate it.