Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160c/exercises/ex04.php

Exercise 4: Random Content PHP Script & Automated Breadcrumb Trail PHP Script


Resources for this exercise:


In this exercise you will use two unrelated PHP scripts.

In the first part of this exercise you will download, configure, install, and use a PHP random content script. This random content, or randomizer, script simply inserts a snippet of HTML code at random into a Web page each time the page loads. Here's how it works: You create a separate text file for each snippet of code. (Think of these snippets as include files, which is what they basically are.) You place these snippet files into a folder on the server. On your Web page, you place some PHP code that will, at random, choose a file from the snippets folder and include that file in the code of your page. The content of the snippet does not matter; it is just HTML code that will be inserted into your page. For example, each snippet could simply be an <img> tag that links to a different image, crafted into a random slide show. Or each snippet could be a <link> tag to a different style sheet, crafted into a random style switcher. Or each snippet could be a quote from a famous person. Or, well, you get the idea.

In this exercise I use the example of changing the page's background color at random. You, however, must not simply copy my example and change the background color. Make your randomizer change anything except the CSS of the page. In other words, unlike my example below, make your randomizer change some of the page's content in the <body>.

The second (unrelated) script of this exercise is to use a block of PHP code to make an automatically generated breadcrumb trail.

Note: As with all exercises, keep the files of this exercise (include files and stylesheets) completely separate from the files of previous exercises!


Step 1 - Install a Random Content PHP Script

1.1) Create a new Web page for exercise 4.

1.2) This page must contain the HTML 5 DocType.

1.3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

1.4) This page must display your name and say "Exercise 4."

1.5) This page's <title> must indicate that this is your exercise 4 page, so it should say something like "John Sky's DM62 Exercise 4".

1.6) This page must contain a relative link to your home page.

1.7) Download the PHP randomizer script "Rancon" from:
http:/teacherjohn.com/cabrillo/dm160c/exercises/ran_con.zip

1.8) The download should expand into a folder called ran_con that contains:

1.9) To test to see that this script will run on the Web server, simply upload the whole ran_con folder, without making any changes, to your public_html folder. Then go to:
http://webhawks.org/~yourusername/ran_con/RanCon.php
(replacing yourusername with your own webhawks user name, of course)
and reload the page a few times to see it in action.

1.10) Now that you've seen the script in action, delete the ran_con folder.

1.11) As you may remember from working with include files, the mantra is work backwards. In other words, create a Web page template for this exercise, (figure out which part of your code will be the random include), make sure the page validates, and then begin the process of breaking it up.

In the sample files that you downloaded, the script is used to display random content on the page. But a randomizer script can also be used to make random style changes. Let's say, for eaxample, that you want to randomize the page's background color. In the <head> section of the page template, here is the internal style sheet code that controls the background:

<style type="text/css">
body { background-color: white; }
</style>

1.12) Then you would create several code snippets for different colors, and save each one as a different file. This script requires a special naming convention for the include snippets: the first file is called "ranput_0.php", the second file is called "ranput_1.php", the third file is called ranput_2.php", and so on.

Note that the first file is named with a zero, not with a one.

1.13) So the "ranput_0.php" file would simply contain:
<style type="text/css">
body { background-color: white; }
</style>

The "ranput_1.php" file would simply contain:
<style type="text/css">
body { background-color: silver; }
</style>

The "ranput_2.php" file would simply contain:
<style type="text/css">
body { background-color: yellow; }
</style>

and so on.

1.14) For this exercise you must create and use a minimum of five include snippets.

1.15) Place all of these include snippet files into one folder. Call this folder "rancon".

1.16) Now let's get back to the exercise 4 Web page or template that will contain the random content.

In place of the random content, place this code:

<?php include("$ranfile"); ?>

In other words, in this example, instead of::

<style type="text/css">
body { background-color: white; }
</style>

place this:

<?php include("$ranfile"); ?>

So in this example, the head section of the Web page might look like this:

<head>
<title>John Sky's Exercise 4</title>
<?php include("$ranfile"); ?>
</head>

1.17) Now we need to make one more addition to the Web page. We need to place a block of PHP code to define the variables used by the script.

At the very beginning of the Web page code, before the DocType, place this code:

<?php
$rn = mt_rand(0,11); //Change these numbers to match the number of files in "rancon"
$ranfile = "rancon/ranput_$rn.php";
?>

But you will need to change two things here. See the part of the code that says:
(0,11)

This needs to reflect the number of include snippet files. For example the code above indicates that there are 12 files (starting at zero and ending at 11) in the rancon folder. If you have 5 files (the minimum for this exercise), change that to read:
(0,4)

1.18) The other change you may need to make is the path to the include snippet files. See the part of the code that says:
rancon/ranput_$rn.php

Note that this relative path assumes the page you are coding, and the rancon directory containing the snippets, are both in the same directory

This indicates that this execise 4 Web page and the rancon folder are in the same folder, and that you have not changed the name of the rancon folder to something else. So if your Web page and the rancon folder are both in public_html, and you have not renamed the rancon folder, you can leave this path the way it is.

1.19) Now save your changes and upload the exercise 4 Web page, and the rancon folder, to the server.

1.20) Test the script! Do you see different content each time the page loads?

1.21) Test for validation errors. You should reload and test enough times to make sure the page validates with the different content snippets.

Step 2 - Install an Automated Breadcrumb Trail PHP Script

In this part of the exercise you will use a block of PHP code to make an automatically generated breadcrumb trail, and use PHP includes to incorporate it into your exercise 4 page.

Thanks to Frank Turner for his modification to the code that capitalizes the directory names!

The original breadcrumbtrail code is based on code from:
http://www.drquincy.com
But I have modified the original code to work with includes.

2.1) Copy this code. Save this block of code as an include file. Save this include file as something like "breadcrumb.php".

<?php
function getFilenameWithoutExt($filename) {
$pos = strpos($filename, '.');
if($pos === false){
return $filename;
}else{
return substr($filename, 0, $pos);
}
}
?>

<?php
function breadcrumbtrail() {
// title of the page
$titleofpage = getFilenameWithoutExt(basename($_SERVER['PHP_SELF']));
// file path
$path = $_SERVER[ 'PHP_SELF' ];
// split the path into folders
$path = explode( "/", $path );
// set the label of the first element to 'Home'
$path[ 0 ] = "Home";
// set the last element of the array to the title of the page
$path[ count( $path ) - 1 ] = $titleofpage;
$counter = 0;
// go through the array and output the trail
foreach( $path as $key=>$value ) {
// compose hyperlink for all breadcrumb trail parts except the last element
if( $counter < ( count( $path ) - 1 ) ) {
$href = "/";
for( $c = 1; $c <= $counter; $c++ ) {
$href .= $path[ $c ] . "/";
}
// split link name into words by capital letter
// regular expression provided by james pittendreigh
$words = preg_split( '/([A-Z][a-z]+)/', $value, -1, PREG_SPLIT_DELIM_CAPTURE );
$linkname = "";
$isfirst = true;
// add whitespace to the link name
foreach( $words as $v ) {
// only consider adding whitespace if the element is populated
if( !empty( $v ) ) {
// don't add whitespace to the first element
if( !$isfirst ) {
$linkname .= " ";
}
else {
$isfirst = false;
}
// capitalize directory names
$linkname .= ucwords($v);
}
}
// output the hyperlink
echo "<a href=\"$href\">$linkname</a> &gt; ";
}
else {
// just output the value
echo ucwords($value);
}
$counter ++;
}
}
breadcrumbtrail();
?>

2.2) Now modify your exercise 4 page to contain a self-generating breadcrumb trail. Use PHP to include the file containing the breadcrumb trail into this exercise page.

2.3) Upload the modified exercise 4 page and test it!

Step 3 - Validate and Modify Your Home Page

3.1) Make sure the HTML on this page validates (using the HTML 5 DocType) with no errors, according to the W3C's online HTML Validator. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

3.2) Make sure the CSS used with this page validates, with no errors, according to the W3C's online CSS Validator. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

3.3) If there are any errors, fix them, re-upload the page, and validate it again.

3.4) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates. The navigation menu on your home page, that links to your exercises, must be coded as an HTML list.

3.5) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 2/24/14. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 02/26/14.