Write to UsSwap Images and Text with PHP
Take a look at this Humble Supermodels Page. As you can see, you can change the name of the models, and also the pictures without
leaving the page. This is done using a simple PHP script that will carry GET parameters as part of the URL. The script will use these
parameters to decide what name and what picture will appear on the page each time it is loaded.
First thing you need to do is creating a page called supermodels.php. The heart of the script will be a function called seleccion,
which will import two values: $scotch and $xy. One of them will contain the name of the picture the page must load, and the one will
contain the name of the supermodel you have chosen. Inside the function, the array $info_magda will contain information on all three
supermodels. And the array $pict_Array will contain the names and address of their pictures. We use two switches to determine what
picture and what name will be returned by the function.
<?php
function seleccion($scotch, $xy)
{
$info_magda[0]= "Birth Date: 1975 <br /> Birth Place: Gdansk, Poland. <br />Hair Color: Dark brown. <br />Eye Color: Blue.";
$info_magda[1] = "Birth Date : August 7, 1980<br />Birth Place : Saint-Mars-d'Autille, France<br />Height : 177 cm 5'10''<br />Measurements : 33-22-33<br />Select Case Daniels";
$info_magda[2] = "Birth Date : december 12, 1977<br />Birth Place : Springdale, Arkansas<br />Height : 177 cm 5'10''<br />Eye-color: Hazel";
$pict_Array[1][1] = "graficos/1012378117-Bebe-007.jpg";
$pict_Array[1][2] = "graficos/1012378131-Bebe-008.jpg";
$pict_Array[1][3] = "graficos/26.jpg";
$pict_Array[1][4] = "graficos/bas_magdalena06.jpg";
$pict_Array[1][5] = "graficos/bas_magdalena04.jpg";
$pict_Array[2][1] = "graficos/aurelie.jpg";
$pict_Array[2][2] = "graficos/aurelie2.jpg";
$pict_Array[2][3] = "graficos/aurelie3.jpg";
$pict_Array[2][4] = "graficos/aureli27.jpg";
$pict_Array[2][5] = "graficos/aurelie-home.jpg";
$pict_Array[3][1] = "graficos/hall1.jpg";
$pict_Array[3][2] = "graficos/hall2.jpg";
$pict_Array[3][3] = "graficos/hall3.jpg";
$pict_Array[3][4] = "graficos/hall4.jpg";
$pict_Array[3][5] = "graficos/hall5.jpg";
switch($xy)
{
case "Magdalena":
$superm_text = "Magdalena Wrobel";
$info_de = $info_magda[0];
$x = 1;
break;
case "Aurelie":
$superm_text = "Aurelie Claudel";
$info_de = $info_magda[1];
$x = 2;
break;
case "Hall":
$superm_text = "Bridget Hall";
$info_de = $info_magda[2];
$x = 3;
break;
}
switch ($scotch)
{
case "pict1":
$img_src = $pict_Array[$x][1];
break;
case "pict2":
$img_src = $pict_Array[$x][2];
break;
case "pict3":
$img_src = $pict_Array[$x][3];
break;
case "pict4":
$img_src = $pict_Array[$x][4];
break;
case "pict5":
$img_src = $pict_Array[$x][5];
break;
}
return array($info_de, $img_src, $superm_text);
}
Outside the function, we have several lines that will always be read by the server whenever the webpage is loaded. Using $_REQUEST, we obtain the GET parameters that are passed via the URL. If you take a look at all the URLs inside the anchors, you will notice that none of them pass the values of aurel and name simultaneously, meaning that whenever the webpage is loaded, either $name or $pic will be null, sometimes even both. We start a session that will allow the server to remember the name of the supermodel you chose the previous time the page was loaded. If the page wasn't loaded before, then the default name will be “Aurelie.”
Since the function seleccion will return an array of three values, we use list to assign those values to $info_de, $img_src, and $superm_txt, like this:
list($info_de, $img_src, $superm_text) = seleccion($pict, $name);
With list, you can make a function return more than one value.
$pict = $_REQUEST['aurel'];
session_start();
if ($name == null)
{
if (!isset($_SESSION['NAME']))
{
$name = "Aurelie";
}
else
{
$name = $_SESSION['NAME'];
}
}
else
{
$_SESSION['NAME'] = $name;
}
if ($pict == null)
{
$pict = "pict1";
}
list($info_de, $img_src, $superm_text) = seleccion($pict, $name);
?>
Everything inside the <html> tags is pretty basic. The variables inside the <?php ... ?> tags depend on the links you choose. A typical Anchor-href's URL may look like this: <a href="supermodels.php?aurel=pict1">Picture1</a>. In this case, aurel will equal pict1, and name will be null. If $_SESSION['NAME'] has a value stored in it, then the script will use that value. If there's no value inside the session, then the name Aurelie will be used.
<html>
<head>
<title>Supermodels Page</title>
<link href="cascading_sheets/modelos.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div>
<center>
<div id="title_bar">
<h1 align="center"><?php echo $superm_text; ?></h1>
</div>
</center>
<br />
<p>
<b><br /><br /><center>
<div id="super_chooser">
<a href="supermodels.php?name=Magdalena">Magdalena Wrobel</a> |
<a href="supermodels.php?name=Aurelie">Aurelie Claudel</a> |
<a href="supermodels.php?name=Hall">Bridget Hall</a>
</div></b></center>
<br /><br /><br />
<a href="supermodels.php?aurel=pict1">Picture1</a> |
<a href="supermodels.php?aurel=pict2">Picture 2</a> |
<a href="supermodels.php?aurel=pict3">Picture 3</a> |
<a href="supermodels.php?aurel=pict4">Picture 4</a> |
<a href="supermodels.php?aurel=pict5">Picture 5</a>
</p>
<div style="float: left;">
<img src="<?php echo $img_src; ?>" width="200" />
</div>
<div id="infor_super" >
<?php echo $info_de; ?>
</div>
</div>
</body>
</html>
You can download the entire script here. If you want to see the ASP.NET version of this tutorial, click here.
Note: the zip file also contain the ASP.NET version of the script in VB and C#.