Ayuda ejercicios unidad 11: Formularios y PHP


Ayuda al ejercicio:

• La página reservas.html.

Partimos de misma estructura que el resto de páginas.

Al principio tenemos dos tablas. Copia el siguiente código en tu página, dentro del div con clase contenido_abajo:

<h2>Reservas</h2>
<p>El acceso al parque es libre y gratuito, siempre que se respeten las normas de conducta y preservaci&oacute;n del entorno. </p>
<p>No obstante, tambi&eacute;n disponemos de servicios adicionales, como visita guiada o aula educativa para ni&ntilde;os.</p>
<h3>Horarios y reservas</h3>
<table border="0" cellspacing="3" cellpadding="3" class="reservas">
<tr>
<th colspan="5">Visitas con gu&iacute;a:</th>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" class="titulo">Temporada de Verano</td>
<td colspan="2" class="titulo">Temporada de Invierno</td>
</tr>
<tr>
<td class="titulo">Horarios:</td>
<td colspan="2">10:00 - 13:00<br />
16:00 - 19:00</td>
<td colspan="2">11:00 - 14:00</td>
</tr>
<tr>
<td rowspan="2" class="titulo">Tarifas:</td>
<td>Individual:</td>
<td>Grupos:</td>
<td>Individual:</td>
<td>Grupos:</td>
</tr>
<tr>
<td>5 &euro; persona</td>
<td>3 &euro; persona</td>
<td>4 &euro; persona</td>
<td>2 &euro; persona</td>
</tr>
</table>
<table border="0" cellspacing="3" cellpadding="3" class="reservas">
<tr>
<th colspan="3">Aula educativa (s&oacute;lo grupos):</th>
</tr>
<tr>
<td>&nbsp;</td>
<td class="titulo">Temporada de Verano</td>
<td class="titulo">Temporada de Invierno</td>
</tr>
<tr>
<td class="titulo">Horarios:</td>
<td>9:00 - 10:00<br />
15:00 - 16:00</td>
<td>10:00 - 11:00</td>
</tr>
<tr>
<td class="titulo">Tarifas:</td>
<td>25 &euro;</td>
<td>25 &euro;</td>
</tr>
</table>

Esas tablas, tienen aplicadas estilos CSS. Añade los siguiente estilos a la hoja de estilo:

table.reservas {
    font-size: 90%;
    background-color: #EFD3B3;
    text-align: center;
    margin: 10px auto;
    width: 410px;
    border: #BF823B 1px solid;
}
table.reservas td {
    background-color: #EFFFEF;
}
table.reservas th {
    background-color: #EFD3B3;
    color: #5F8F11;
}
table.reservas td.titulo {
    background-color: #D6EFC2;
}

A continuación, tenemos el formulario. Usamos una tabla para organizar los campos. Asegúrate de poner en el atributo action del formulario la página a la que queremos enviar los datos. Copia el código fuente siguiente después de las tablas:

<h3>Contacto</h3>
<p>Si est&aacute;s pensando visitar el parque con un grupo, por favor, rellena este formulario:</p>
<form id="form1" method="post" action="enviar_reserva.php">
<table cellspacing="2" cellpadding="4">
<tr>
<td>Nombre:</td>
<td><input name="nombre" class="texto" type="text" id="nombre" size="25" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" class="texto" type="text" id="email" size="25" /></td>
</tr>
<tr>
<td>Fecha de la visita:</td>
<td><input name="fecha" class="texto" type="text" id="fecha" size="8" />
(DD/MM/AAA)</td>
</tr>
<tr>
<td>Número de personas:</td>
<td><input name="numero" class="texto" type="text" id="numero" size="4" /></td>
</tr>
<tr>
<td>Edad del grupo:</td>
<td><label><input type="radio" name="edad" id="edad" value="5a8" /> De 5 a 8</label><br />
<label><input type="radio" name="edad" id="edad" value="9a14" /> De 9 a 14</label><br />
<label><input type="radio" name="edad" id="edad" value="15a184" /> De 15 a 18</label>
<label><br />
<input type="radio" name="edad" id="edad" value="adultos" />
Adultos</label>
</td>
</tr>
<tr>
<td colspan="2"><label>
<input type="checkbox" name="aula" id="aula" />
Deseamos asistir al aula educativa (s&oacute;lo ni&ntilde;os)</label></td>
</tr>
<tr>
<td>Observaciones:</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<textarea name="observaciones" id="observaciones" class="texto" cols="45" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input type="submit" value="Enviar" class="boton" />
</td>
</tr>
</table>
</form>

Observa que hemos usado clases en algunos de los elementos. Por tanto, hemos de defiir los estilos para el formulario y sus clases. Añade los siguiente sestilos a la hoja de estilos:

form {
    width: 410px;
    border: #BF823B 1px solid;
    margin: auto;
}
form table {
    width: 410px;
    font-size: 90%;
    border: #EFD3B3 3px solid;
    background-color: #EFFFEF;
}
.texto {
    border-width: 1px;
    border-style: solid;
    border-color: #BF823B #EFD3B3 #EFD3B3 #BF823B;
}

.boton {
    border-width: 1px;
    border-style: solid;
    border-color: #EFD3B3 #BF823B #BF823B #EFD3B3;
}

• La página enviar_reservas.php.

Partimos de una página con la estructura normal de las páginas del sitio, pero la guardamos con la extensión php.

Dentro del contenido, delimitamos el código php por sus marcas:

<div class="contenido">
<div class="contenido_abajo"> <h2>Reservas</h2>
<p>El acceso al parque es libre y gratuito, siempre que se respeten las normas de conducta y preservaci&oacute;n del entorno.</p> <?php ?> </div> </div>

Dentro de esas marcas, coloca el código PHP. Primero, recogemos los datos. Copia el siguiente código:

  //comenzamos recogiendo los datos
function recogeDato($campo){
return isset($_REQUEST[$campo])?$_REQUEST[$campo]:'';
} //la función recogeDatos comprueba si se ha recibido un dato y recoge su valor

//si no se ha recibido, le asigna un valor vacío.
$nombre = recogeDato('nombre');
$email = recogeDato('email'); //asignamos cada valor a una variable
$fech = recogeDato('fecha');
$numero = recogeDato('numero');
$edad = recogeDato('edad');
$aula = isset($_REQUEST['aula'])?'Sí':'No';
$observaciones = recogeDato('observaciones');
$algunerror = FALSE;

Una vez recogidos los datos, comprobamos que no estén vacíos los campos obligatorios. Copia el siguiente código:

 if($nombre==''){ //comprobamos que el campo no haya quedado vacío
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has introducido tu nombre.</p>\n";
}
if($email==''){
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has introducido eMail.</p>\n";
}
if($fecha==''){
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has indicado al fecha de la visita.</p>\n";
}
if($numero==''){
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has indicado el número de personas del grupo.</p>\n";
}
if($edad==''){
$algunerror = TRUE;
echo "<p class=\"erroneo\">No has indicado la edad del grupo.</p>\n";
}

Y por último, si los datos son correctos, enviamos el correo. Copia el siguiente código:

  if ($algunerror){ //comprobamos si ha habido algún error
echo "<p>&nbsp;</p>\n"; //si los hay, se lo indicamos al usuario
echo "<p>No se ha enviado la reserva por los errores que se detallan arriba.</p>\n";
echo "<p>Por favor, vuelve a rellenar el formulario.</p>\n";
echo "<p class=\"centrado\"><a href=\"reservas.html\">Volver al formulario</a></p>\n";
}else{
$para="ejemplo.aulaclic@gmail.com"; //si todo es correcto, enviamos el correo
$asunto="Reserva de grupos ";
$mensaje="Datos de contacto:\n". //creamos el mensaje con los datos
"Nombre: $nombre\n".
"eMail: $email\n".
"Información de la reserva:\n".
"Día de la visita: $fecha \n".
"Personas del grupo: $numero \n".
"Con edades $edad \n".
"Aula educativa: $aula \n".
"Observaciones: $observaciones";
mail($para, $asunto, $mensaje); //y lo enviamos
echo "<p>Tu reserva se ha enviado correctamente.</p>\n";
echo "<p>Nos pondremos en contacto lo antes posible. Esperamos que disfrutes del parque.</p>\n";
}

Sólo queda añadir a la hoja de estilo un estilo para los párrafos con el mensaje de error:

.erroneo {
color: #DF7E0D;
}
Inicio





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.