Exercise : Captions (by Morgan Doocy)

Write a form, caption.html, which asks the user to select a photo to display and two lines of caption. Then write a script, caption.php, that will accept the submitted information and display the photo and captions on-screen:

Provide several photo URLs to select from in the form of a dropdown menu. Give the options in the dropdown user-friendly labels, but make the user's final selection result in an absolute URL being submitted to the server script. For the img's alt text, use a combination of both caption lines.

Exercise : Captions (by Morgan Doocy)

→

Exercise Solution

<form action="caption.php" method="post">
	<dl>
		<dt>Image:</dt>
		<dd>
			<select name="image">
				<option value="http://tinyurl.com/8x4ouqu">Cupcake</option>
				<option value="http://tinyurl.com/6uqgufv">Leo Strutting</option>
			</select>
		</dd>
		<dt>Line 1:</dt>
		<dd><input type="text" name="line1" /></dd>
		<dt>Line 2:</dt>
		<dd><textarea name="line2" rows="2" cols="30"></textarea></dd>
	</dl>
	<p><input type="submit" value="Captionate!" /></p>
</form>

Exercise Solution

<?php
   $image = $_POST["image"];
   $line1 = $_POST["line1"];
   $line2 = $_POST["line2"];
?>
<p>
	<img id="image" src="<?= $image ?>" alt="<?= "$line1. $line2" ?>" />
</p>
<h1 id="line1"><span><?= $line1 ?></span></h1>
<p id="line2"><?= $line2 ?></p>

Exercise : Captions (optional validation)

Optional: Modify your PHP code to ensure all expected parameters are passed and non-empty. If any parameters aren’t, display an error message instead of the expected output.

• Tip: To validate many parameters at once, create an array of their names and loop over it.
• l33t tip: To use a variable whose name is specified by another variable, use the $$varname (“variable variable”) syntax:

  $uwnetid = "mdoocy";
  $paramname = "uwnetid";
  print $$paramname;  // 'mdoocy'
  $$paramname = "stepp";
  print $uwnetid;     // 'stepp'
  

Exercise Solution (optional validation)

<?php
	$valid = true;
	foreach (array('image', 'line1', 'line2') as $param) {
		if (!isset($_POST[$param]) || !$_POST[$param]) {
			$valid = false;
			break;
		} else {
			$$param = $_POST[$param]; // $image = $_POST['image'], etc.
		}
	}
	if (!$valid) {
		?>
		<p>ERROR: You submitted invalid values.</p>
		<?php
	} else {
		?>
		<p><img id="image" src="<?= $image ?>" alt="<?= "$line1. $line2" ?>" /></p>
		<h1 id="line1"><span><?= $line1 ?></span></h1>
		<p id="line2"><?= $line2 ?></p>
		<?php
	}
?>