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.
sabregirlAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
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
0
Ray PaseurCommented:
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
0
sabregirlAuthor Commented:
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
0
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Learn More!
GaryCommented:
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.
0
sabregirlAuthor Commented:
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
0
sabregirlAuthor Commented:
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
0
Ray PaseurCommented:
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.
0
GaryCommented:
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.
0
GaryCommented:
When you view the source of the page do you see the TABLE HTML or is it blank?
0
sabregirlAuthor Commented:
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
0
GaryCommented:
You need to change your html to use IMG

            <td><img src="<?=$array[$num_list[0]]; ?>"></td>
            <td><img src="<?=$array[$num_list[1]]; ?>"></td>
            <td><img src="<?=$array[$num_list[2]]; ?>"></td>
            <td><img src="<?=$array[$num_list[3]]; ?>"></td>
            <td><img src="<?=$array[$num_list[4]]; ?>"></td>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
Let's consider the deck of cards.  It's pretty immutable.  Even if your directory does not have images for all of the cards, the game would seem to be based on 52 cards.  So a logical approach would be to shuffle the logical 52-card deck and "deal" five cards into a hand.  The resulting array would contain the names of the cards.  From that array you could derive the names of the GIF or PNG images that visually represent the cards.  

I am guessing that a king of hearts would be represented by an image file with a name of kh.png or something like that.  

If you had joker(s) they might be 1j.png and j2.png.  In that case you might append 1j and j2 to the elements of the $deck array.

If you're new to PHP programming and want to learn more, some good learning resources are available from the links in this article. It will also help you stay away from the many bad examples that litter the internet!
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html
0
sabregirlAuthor Commented:
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!
0
GaryCommented:
<?=$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)
0
sabregirlAuthor Commented:
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.
0
Ray PaseurCommented:
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!
0
sabregirlAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.