This section is about PHP programming (problems 1–4) and CSS floating (problems 5–8).

## 1. Kitties

Given 5 image files (kittie1.jpeg, kittie2.jpeg, etc.), write a PHP webpage that displays all 5 images as seen here.

Problem by Alex Miller

### Solution

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>kitties</title>
<body>
<div>
<?php
for (\$i = 1; \$i <= 5; \$i++) {
print("<img src=\"kittie{\$i}.jpeg\" />");
}
?>
</div>
</body>
</html>
```

## 2. Fibonacci

Modify the following file, `fibonacci.php`, to print the first 20 Fibonacci numbers in an ordered list using PHP.

Recall that in the Fibonacci sequence, each number is the sum of the two previous numbers, with the first and second numbers being 0 and 1 respectively.

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Fibonacci Sequence</title>
<body>
<h1>The first twenty Fibonacci numbers:</h1>

</body>
</html>
```

problem by Rishi Goutam

### Solution

The modified `fib.html`:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<title>Fibonacci Sequence</title>
<body>
<h1>The first twenty Fibonacci numbers:</h1>

<ul>
<?php
\$first = 0;
\$second = 1;
\$SEQUENCE_LENGTH = 20; // number of elements to print
for (\$i = 0; \$i < \$SEQUENCE_LENGTH; \$i++) { ?>
<li><?= \$first ?></li>

<?php
\$temp = \$second;
\$second += \$first;
\$first = \$temp;
} ?>
</ul>
</body>
</html>
```

## 3. Buggy PHP programs:

The following PHP pages each contain one or more bugs. The bugs could be syntax errors or incorrect logic. Look at each page, find the bug(s), and correct the errors.

1. bug1.php
``````<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Buggy PHP page 1 - variables, strings, if/else
-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<p>The page is <strong>really</strong> great.</p>

<div>
<?php
\$logged_in = TRUE;
if \$logged_in) {
print "Welcome, user.\n";
}
</div>

<h2>Name information:</h2>

<div>
\$first_name = "David';
if (\$logged_in) {
print "Welcome, \$first_name\n";
} else {
print "Howdy, Stranger.\n";
}
?>
</div>

</body>
</html>
``````
2. bug2.php
``````<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Buggy PHP page 2 - variables, if/else, for loops, string concatenation, comments
-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>
<h1>Joe's money page</h1>

<p>Our money info:</p>

<div>
<?php
\$funding = -17000;        <!-- we lost money -->
if (\$funding < 0) {
print "We are in the red.";
} elif (\$funding = 0) {
print "We broke even.";
} else {
}
?>
</div>

<h2>Our bank's rules:</h2>

<div>
<?php
for (int \$i = 1; \$i <= \$10; \$i++) {
print("Rule " + \$i + " of Money Club is, you do NOT talk about Money Club.\n");
}
?>
</div>

</body>
</html>
``````
3. bug3.php
``````<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Buggy PHP page 3 - arrays, foreach, cumulative sum, string concatenation
-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>
<h1>Curly's Supermarket</h1>

<h2>Items for sale:</h2>

<div>
<?php
\$prices = array(9.00, 5.95, 12.50);
foreach (\$price as \$prices) {
print "The next item costs \$price\n";
}
?>
</div>

<h2>Total cost:</h2>

<div>
<?php
\$tax_rate = 1.08;    # 8% tax

# compute total price with tax for all items
foreach (\$prices as \$price) {
\$total_price = \$price * \$tax_rate;
}

print "Total price (with tax): \$\$total_price \n";
?>
</div>
</body>
</html>
``````
4. bug4.php
``````<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Buggy PHP page 4 - arrays, foreach, expression blocks
-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>
<h1>My images</h1>

<div>
<?php
\$images = array["barney", "powerrangers", "barbie", "heman"];
foreach (\$images as \$image) { ?>

<img src="/images/<? \$images ?>.gif" alt="a picture" />

<?php } ?>
</div>
</body>
</html>
``````

Here are some useful general debugging tips:

• Look at the error messages, if any, and examine those lines in your PHP source file. (You may need to enable line numbers in your editor.)
• Check for mismatched brackets. Many editors support bracket matching. (In TextPad, select a bracket and press Ctrl-M.)
• PHP's error messages are not very friendly, often mentioning obscure internal terms like `T_VARIABLE` and `\$end`. If you don't understand an error message, try Googling for the error message to see if others have seen this kind of error before. You may be able to find an explanation of what causes this problem and how to fix it.
• If there is no error message but something wrong, try printing the value of your variables at various points in the code. Use `print` statements for simple variables and `print_r` or `var_dump` for arrays and objects. (The XDebug software we have installed on Webster will show the values of variables when errors occur, but you may need more than this.)

## 4. 12 Days of Xmas: (long)

Write a page that displays the complete lyrics of the song, "12 Days of Xmas," along with displaying images for each of the gifts given on each day. Start from the template in the following file:

The page already has the correct appearance, but the code is long and redundant. Modify the page to use PHP code to remove this redundancy. The page should look like the following:

1. For each day # N of Xmas, show day N's gift image once.
2. For each day # N of Xmas, show day N's gift image N times.
3. For each day # N of Xmas, show (day N's down to day 1's) gift image the appropriate number of times.
4. (advanced) Add the text labels such as "Three French hens" under each gift's image(s). You probably won't be able to finish that in the time provided. You may want to use advanced syntax such as arrays to help you with this.

When you're finished with your page, the code might look like the following sample solution, written by former TAs Sylvia Tashev and Stefanie Hatcher:

## 5. Floats:

Given the following HTML file, floats.html:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```

And the following CSS file, floats.css:

```.box {
width: 100px;
height: 100px;
background-color: black;
margin: 10px;
}
```

Modify the HTML and CSS files so that `floats.html` has the following appearance (rendered in Firefox):

problem by Alex Miller

### Solution 1

The modified `floats.html`:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box break"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```

And modified `floats.css`:

```.box {
width: 100px;
height: 100px;
background-color: black;
margin: 10px;
float: left;
}

.break {
clear: left;
}
```

### Solution 2

The modified `floats.html`:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>floats</title>
<body>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br />
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```

And modified `floats.css`:

```.box {
width: 100px;
height: 100px;
background-color: black;
margin: 10px;
float: left;
}

br {
clear: both;
}
```

Given the following HTML file, menu.html:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<ul>
<li>Bananas</li>
<li>Apples</li>
<li>Grapefruit</li>
<li>Oranges</li>
<li>Papaya</li>
</ul>
</div>
</body>
</html>
```

Apply CSS rules so the menu appears like this:

problem by Alex Miller

### Solution

```ul {
background-color: red;
}

li {
display: inline;
border: 1px solid black;
background-color: white;
}
```

## 7. Layout:

Given the following HTML file, layout.html:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>layout</title>
<body>
<div id="container">
</div>
<div id="left-column">
<h2>Left column</h2>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
<div id="right-column">
<h2>Right column</h2>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
```

And the following CSS file, layout.css:

```#container {
background-color: lightgray;
}

background-color: green;
height: 100px;
}

#left-column, #right-column {
background-color: lightblue;
}

#footer {
background-color: green;
}
```

Modify the just CSS file so that `layout.html` has the following appearance (rendered in Chrome/Firefox):

The overall container takes up 80% of the width of the page and is centered. The sidebars take up 20% of the container width.

problem by Alex Miller

### Solution

The modified `layout.css`:

```#container {
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: lightgray;
}

background-color: green;
height: 100px;
}

#left-column, #right-column {
width: 20%;
background-color: lightblue;
}

#left-column {
float: left;
}

#right-column {
float: right;
}

#content {
margin-left: 20%;
width: 60%;
}

#footer {
background-color: green;
clear: both;
}
```

## 8. More Floats: (long)

Given the following HTML file, morefloats.html:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>More Floats</title>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c">Lorem ipsum dolor sit amet, ...</div>
</body>
</html>
```

And the following CSS file, morefloats.css:

```#a, #b {
width: 100px;
height: 100px;
font: 30pt bold Helvetica, Arial, sans-serif;
line-height: 100px;
text-align: center;
}

#a {
background-color: lightblue;
}

#b {
background-color: pink;
}

#c {
background-color: lightgray;
}
```

Which together render as follows:

Modify morefloats.css to produce each of the following results:

1. Hint: This is tricky, but involves only a single CSS property being set. (It's also not usually desirable output.)
2. (hard)
Is this even possible? What if you can edit the HTML?

Protip: Open morefloats.html in a new window, then break out Firebug into a separate window by clicking the middle show/hide button:

Then resize the morefloats.html window to be about 350 × 250 pixels and tweak its styles using Firebug.

problem by Morgan Doocy

### Solutions

Following are possible solutions for each output (there may be more):

1. ```#a {
float: left;
}

#b {
float: right;
}
```
2. ```#a {
float: left;
}

#b {
float: right;
clear: left;
}
```
3. ```#a {
float: left;
}

#b {
float: right;
clear: left;
}

#c {
clear: left;
text-align: right;
}
```
4. ```#a {
float: left;
}

#b {
float: right;
clear: left;
}

#c {
text-align: right;
width: 100px;
margin-left: auto;
margin-right: auto;
}
```
5. ```#a {
float: right;
}

#b {
float: left;
}

#c {
float: left;
text-align: center;
width: 100px;
}
```
6. ```#a {
float: right;
}

#b {
position: absolute;
top: 50px;
right: 100px;
}

#c {
clear: right;
text-align: center;
margin-right: 100px;
}
```
7. ```#a, #b {
float: left;
}

#c {
margin-left: 200px;
}
```
8. ```#a {
float: left;
}
```
9. This problem requires another element. First edit the HTML to add a fourth element, d, surrounding a and b:

```<div id="d">
<div id="a">A</div>
<div id="b">B</div>
</div>
```

Then make the following CSS additions:

```#a, #b {
float: left;
}

#c {
margin-top: 100px;
}

#d {
background-color: lightgreen;
height: 100px;
}
```

Here's what the above looks like, with the green background color on d:

10. ```#a {
display: none;
}

#b, #c {
display: inline;
}
```

# Solutions

## 1. Kitties

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>kitties</title>
<body>
<div>
<?php
for (\$i = 1; \$i <= 5; \$i++) {
print("<img src=\"kittie{\$i}.jpeg\" />");
}
?>
</div>
</body>
</html>
```

## 2. Fibonacci

The modified `fib.html`:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<title>Fibonacci Sequence</title>
<body>
<h1>The first twenty Fibonacci numbers:</h1>

<ul>
<?php
\$first = 0;
\$second = 1;
\$SEQUENCE_LENGTH = 20; // number of elements to print
for (\$i = 0; \$i < \$SEQUENCE_LENGTH; \$i++) { ?>
<li><?= \$first ?></li>

<?php
\$temp = \$second;
\$second += \$first;
\$first = \$temp;
} ?>
</ul>
</body>
</html>
```

## 5. Floats:

The modified `floats.html`:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box break"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```

And modified `floats.css`:

```.box {
width: 100px;
height: 100px;
background-color: black;
margin: 10px;
float: left;
}

.break {
clear: left;
}
```

## 5. Floats:

The modified `floats.html`:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>floats</title>
<body>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br />
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```

And modified `floats.css`:

```.box {
width: 100px;
height: 100px;
background-color: black;
margin: 10px;
float: left;
}

br {
clear: both;
}
```

```ul {
background-color: red;
}

li {
display: inline;
border: 1px solid black;
background-color: white;
}
```

### Solution

The modified `layout.css`:

```#container {
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: lightgray;
}

background-color: green;
height: 100px;
}

#left-column, #right-column {
width: 20%;
background-color: lightblue;
}

#left-column {
float: left;
}

#right-column {
float: right;
}

#content {
margin-left: 20%;
width: 60%;
}

#footer {
background-color: green;
clear: both;
}
```

## 8. More Floats:

Following are possible solutions for each output (there may be more):

1. ```#a {
float: left;
}

#b {
float: right;
}
```
2. ```#a {
float: left;
}

#b {
float: right;
clear: left;
}
```
3. ```#a {
float: left;
}

#b {
float: right;
clear: left;
}

#c {
clear: left;
text-align: right;
}
```
4. ```#a {
float: left;
}

#b {
float: right;
clear: left;
}

#c {
text-align: right;
width: 100px;
margin-left: auto;
margin-right: auto;
}
```
5. ```#a {
float: right;
}

#b {
float: left;
}

#c {
float: left;
text-align: center;
width: 100px;
}
```
6. ```#a {
float: right;
}

#b {
position: absolute;
top: 50px;
right: 100px;
}

#c {
clear: right;
text-align: center;
margin-right: 100px;
}
```
7. ```#a, #b {
float: left;
}

#c {
margin-left: 200px;
}
```
8. ```#a {
float: left;
}
```
9. This problem requires another element. First edit the HTML to add a fourth element, d, surrounding a and b:

```<div id="d">
<div id="a">A</div>
<div id="b">B</div>
</div>
```

Then make the following CSS additions:

```#a, #b {
float: left;
}

#c {
margin-top: 100px;
}

#d {
background-color: lightgreen;
height: 100px;
}
```

Here's what the above looks like, with the green background color on d:

10. ```#a {
display: none;
}

#b, #c {
display: inline;
}
```