How to Make For Loops with PHP for HTML5 and CSS3 Programming

By Andy Harris

Sometimes you want to repeat something as an HTML5 and CSS3 programmer. PHP (like most programming languages) supports a number of looping constructs. Begin with the humble but lovable loop.

image0.jpg

This prints 100 dice. This would be tedious to do by hand, but that’s exactly the kind of stuff computers are so good at.

The following code explains all:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>for.php</title>
 <style type="text/css">
 img{
  height: 40px;
  width: 50px;
 }
 </style>
</head>
<body>
 <h1>Dice Rolling Game</h1>
 <p>Welcome to the dice rolling game. Rolling 100 dice. How many will be sixes?</p>
 <p>
 <?php
 $sixCount = 0;
 for ($i = 0; $i < 100; $i++){
 $userNumber = rand(1,6);
 print <<< HERE
  <img src="images/dado_$userNumber.png"
   alt = "$userNumber"
   width = "20px"
   height = "20px" />
HERE;
 if($userNumber == 6){
  $sixCount++;
 } // end if
 } // end for
 print "</p><p>You rolled $sixCount six(es)!</p>";
 ?>
 <p><a href="for.php">Try Again!</a></p>
</body>
</html>

Most of the code is plain-old HTML. Note the lone print statement responsible for printing out dice. That print statement (and a few supporting characters) are repeated 100 times. for loops are extremely powerful ways to get a lot of work done.

  1. Begin with the for keyword.

    This keyword indicates the beginning of the for structure.

    for ($i = 0; $i < 100; $i++){
  2. Add an initializer.

    for loops usually center around a specific integer variable, sometimes called the sentry variable. The first part of the for loop sets up the initial value of that variable. Often, the variable is initialized to 0 or 1.

    for ($i = 0; $i < 100; $i++){
  3. Add a condition.

    The loop continues as long as the condition is true and exits as soon as the condition is evaluated as false. Normally, the condition will check whether the variable is larger than some value.

    for ($i = 0; $i < 100; $i++){
  4. Add a modifier.

    Every time through the loop, you need to do something to change the value of the sentry. Normally, you add 1 to the sentry variable (remember, ++ is a shortcut for “add one”).

    for ($i = 0; $i < 100; $i++){
  5. Encase the body of the loop in braces.

    The code that will be repeated is placed inside braces({}). As usual, indent all code inside braces so you understand that you’re inside a structure.

This particular program has a few other features that make it suitable for printing out 100 dice.

  • It uses $i as a counting variable. When the sentry variable’s name isn’t important, $i is often used. $i will vary from 0 to 99, giving 100 iterations of the loop.

  • Each time through the loop, roll a die. The familiar rand() function is used to roll a random die value between 1 and 6. Because this code is inside the loop, it is repeated.

    $userNumber = rand(1,6);
  • Print out an image related to the die roll. Here, interpolation is used to determine which image to display. Note that code was used to resize image files to a smaller size.

     print <<< HERE <img src="images/dado_$userNumber.png" alt = "$userNumber" width = "20px" height = "20px" />HERE;
  • Check whether you rolled a 6. If the roll is a 6, add 1 to the $sixCount variable. By the end of the loop, this will contain the total number of sixes rolled.

    if($userNumber == 6){ $sixCount++;} // end if
  • Print the value of $sixCount. After the loop is completed, report how many sixes were rolled.

    print "</p><p>You rolled $sixCount six(es)!</p>";