How to Use PHP Loops with Arrays for HTML5 and CSS3 Programming - dummies

How to Use PHP Loops with Arrays for HTML5 and CSS3 Programming

By Andy Harris

PHP arrays and loops are like peanut butter and jelly; they just go together. When you start to use arrays in HTML5 and CSS3 programming, eventually, you’ll want to go through each element in the array and do something with it. The for loop is the perfect way to do this.

Look at the loopingArrays.php code to see an array with a couple of variations of the for loop.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>loopingArrays.php</title>
</head>
<body>
 <h1>Looping through arrays</h1>
<div>
 <?php
 //first make an array of mini-book names
 $books = array("Creating the HTML Foundation",
     "Styling with CSS",
     "Using Positional CSS for Layout",
     "Client-Side Programming with JavaScript",
     "Server-Side Programming with PHP",
     "Databases with MySQL",
     "Into the Future with AJAX",
     "Moving From Pages to websites");
 //just print them out with a loop
 print "<p> n";
 for ($i = 0; $i < sizeof($books);$i++){
  print $books[$i] . "<br />n";
 } // end for
 print "</p> n";
 //use the foreach mechanism to simplify printing out the elements
 print "<p> n";
 foreach ($books as $book){
  print $book . " <br />n";
 } // end foreach
 print "</p> n";
 ?>
</div>
</body>
</html>

The relationship between arrays and loops isn’t hard to see:

  1. Create your array.

    The array is preloaded. There’s no problem with the fact that the array statement (although a single line of logic) actually takes up several lines in the editor.

  2. Build a for loop to step through the array.

    The loop needs to happen once for each element in the array; in this case, that’s eight times. Set up a loop that repeats eight times. It will start at 0 and end at 7.

  3. Use the sizeof() function to determine the ending point.

    Because you know that this array has eight elements, you could just set the condition to $i < 8. The sizeof() function is preferred because it will work even if the array size changes. Also, it’s easier to understand what you meant. sizeof($books) means “the size of the $books array.” The number 8 could mean anything.

  4. Print out each element.

    Inside the loop, you simply print out the current element of the array, which will be $books[$i]. Don’t forget to add a <br /> tag if you want a line break in the HTML output. Add the n to keep the HTML source code looking nice.

Simplify loops with foreach

The relationship between loops and arrays is so close that many languages provide a special version of the for loop just for arrays. Take a look at this code to see how cool it is:

//use the foreach mechanism to simplify printing out the elements
print "<p> n";
foreach ($books as $book){
 print $book . " <br />n";
} // end foreach
print "</p> n";

The foreach loop is a special version of the for loop that simplifies working with arrays. Here’s how it works.

  1. Use the foreach keyword to begin the loop.

    This tells PHP that you’re working with the foreach variation.

  2. The first parameter is the array name.

    The foreach loop is designed to work with an array, so the first parameter is the array you want to step through.

  3. Create a variable to hold each element of the array.

    On each pass through the loop, the $book variable will hold the current element of the $books array. Most of the time, you use a loop for an array because you want to deal with each element of the array. Using a foreach loop makes this easier.

  4. Use the $book variable inside the loop.

    The $book variable is ready to go. The nice thing about using foreach is you don’t have to worry about indices. The $book variable always contains the current element of the array.

    image0.jpg

Many languages have variations of the loop, but they differ greatly in the details. Feel free to use the loop, but be aware that it doesn’t translate between languages quite as freely as most operations.

Arrays and HTML

Arrays are great because they’re used to hold lists of data in your programming language. Of course, HTML already has other ways of working with lists. The and tags are both used for visual representations of lists, and the object is used to let the user choose from a list. It’s very common to build these HTML structures from arrays.

image1.jpg

The code for the page is not too different than the previous examples. It just adds some HTML formatting:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arrayHTML.php</title>
</head>
<body>
<h1>Arrays are useful in HTML</h1>
<div>
<?php
//first make an array of mini-book names
$books = array("Creating the XHTML Foundation",
"Styling with CSS",
"Using Positional CSS for Layout",
"Client-Side Programming with JavaScript",
"Server-Side Programming with PHP",
"Databases with MySQL",
"Into the Future with AJAX",
"Moving From Pages to websites");
//make the array into a numbered list
print "<ol>n";
foreach ($books as $book){
print " <li>$book</li> n";
} // end foreach
print "</ol>n";
//make the array into a select object
print "<select name = "book"> n";