Pues la entrada de hoy la voy a dedicar a eso, a ver como introducimos todo lo visto anteriormente en la página Web. ¿Os acordáis de las funciones include() y require()? Pues las vamos a utilizar, más concretamente la función require(). Y así comprobaremos la gran utilidad y lo poderosa que es esta función.
Antes que nada, para organizarnos mejor vamos a crear una carpeta, la vamos a llamar carpeta_web, o como vosotros queráis yo he elegido este nombre que estará dentro del directorio xampp. Dentro de esta carpeta crearemos otra carpeta que llamaremos img donde guardaremos las imágenes. También he creado un archivo de estilos style que guardaremos en la carpeta carpeta_web, pero fuera de la carpeta img. En la carpeta img solo van imágenes. El código del archivo style es el siguiente:
body {
background: #000000 url(images/background.jpg) center repeat;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:62.5%; /* Sets default font size to 10px */
color:#222222;
}
* {
margin:0;
padding:0;
}
img {
border:0;
}
p {
margin-bottom:1.75em;
}
a {
text-decoration:none;
color:#2E3192;
}
a:hover {
text-decoration:none;
color:#0000FF;
}
#wrapper {
margin:0 auto;
width:770px;
background:#ffffff;
font-size:1.20em;
}
#header {
height:194px;
background:url(images/header.jpg) no-repeat;
}
#menu {
height: 30px;
background: #B1BB49;
text-align: center;
}
#menu a:link, #menu a:visited {
display: block;
float: left;
line-height: 30px;
height: 30px;
padding: 0 30px;
color: #fff;
border-right: 1px solid #fff;
border-bottom: 0;
}
#menu a:hover {
background: #979F3B;
border-right: 1px solid #fff;
text-decoration: none;
border-bottom: 0;
}
#menu ul {
padding: 0;
list-style: none;
}
#menu li {
margin: 0;
float: left;
height: 30px;
padding: 0;
}
#sidebar {
float:right;
width:180px;
background:#ffffff;
margin-right:10px;
}
#content {
float:left;
width:550px;
min-height:400px;
}
#footer {
clear:both;
height:30px;
background:#B1BB49;
}
.entry {
padding:5px 10px;
text-align:justify;
line-height:1.75em;
}
.entry-title {
font-size:1.90em;
font-weight:normal;
letter-spacing:-1px;
}
.date {
font-size:0.9em;
color:#bbb;
cursor:default;
letter-spacing:1px;
}
#sidebar ul {
list-style-type:none;
margin-top:5px;
}
#sidebar li {
}
#sidebar li a {
display:block;
height:20px;
line-height:20px;
color:#2E3192;
padding-left:5px;
border-bottom:1px dotted #2E3192;
}
#sidebar li a:hover {
color:#0000FF;
}
#footer-valid {
float:left;
padding-top:55px;
padding-left:20px;
cursor:default;
color:#ffffff;
}
#footer-valid a {
color:#ffffff;
text-decoration:none;
}
#footer-valid a:hover {
color:#ffffff;
text-decoration:underline;
}
h1 {
font-size:2.5em;
font-weight:normal;
cursor:default;
position:relative; top:50px; left:30px;
letter-spacing:1px;
color:#aaaaaa;
font-style:italic;
}
Este código no lo voy a explicar ya que no está dentro de PHP. Dentro de la carpeta img tengo dos imágenes background (el fondo de la pagina) 
y header (el encabezado que va a aparecer en todas las paginas)
También deciros que me he ayudado del programa Dreamweaver. Lo uso bastante y además lo recomiendo por las muchas funciones y ventajas que posee.
Dicho esto, volvemos a nuestro proyecto. Primero vamos a crear un archivo html para el encabezamiento que lo vamos a llamar header.html y que lo guardaremos en la carpeta carpeta_web. El archivo header.html mostrado en el navegador:
Solo nos muestra el encabezado. El código html es el siguiente:
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-image: url(img/background.jpg);
}
-->
</style></head>
<body>
<br/>
<div id="wrapper">
<div id="header">
<img src="img/header.jpg" width="770" height="194">
</div>
</body>
</html>
Tengo que decir que para hacer este tipo de proyecto hay que tener conocimientos de html, como podemos comprobar le hemos puesto de color de fondo una imagen, además de introducir la hoja de estilos que es el archivo style.
Ahora vamos a crear otro archivo lo vamos a llamar menú.html que es la barra de menus. En el navegador aparecerá de la siguiente forma:
Y el código html es el siguiente:
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-image: url(img/background.jpg);
}
-->
</style></head>
<body>
<div id="menu">
<ul>
<li><a href="form.php">Form1</a></li>
<li><a href="#">Form2</a></li>
<li><a href="#">Form3</a></li>
</ul>
</div>
</body>
</html>
Creamos otro archivo llamado menu2.html para el otro menú que tenemos a la derecha de la página. Visto en el navegador:
Cuyo código html es el siguiente:
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-image: url(img/background.jpg);
}
-->
</style></head>
<body>
<div id="sidebar">
<ul>
<li> <font color="#999999" size="4" face="Geneva, Arial, Helvetica, sans-serif">
<strong>Formularios</strong></font></li>
<li></li>
<li><a href="form.php">Form1</a></li>
<li><a href="#">Form2</a></li>
<li><a href="#">Form3</a></l
></ul>
</div>
</body>
</html>
Creamos otro archivo que va a ser el pie de página. Lo vamos a llamar footer.html. En el navegador lo vemos de la siguiente forma:
El código html es el siguiente:
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-image: url(img/background.jpg);
}
-->
</style></head>
<body>
<div id="footer">
<div align="center">
<p><font color="#FFFFFF">Copyright © 2011 All Rights Reserved - Curso de PHP</font> <br />
</p>
</div>
</div>
</div>
</body>
</html>
Con todo esto, vamos a crear ya los últimos archivos. Creamos el archivo form.php que visto en el navegador lo veremos de la siguiente manera:
Y cuyo código php es el siguiente:
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-image: url(img/background.jpg);
}
-->
</style></head>
<body>
<?
require("header.htm");
?>
<?
require("menu.htm");
?>
<?
require("menu2.htm");
?>
<div id="content">
<div class="entry"><br/>
<div class="entry-title">
<p><font color="#000000" size="5" face="times roman numeral">Formulario de pedido </font></p>
</div>
<div class="entry">
<p><font color="#000000" face="Arial" size="2">El pedido consiste en programas antivirus. El procesamiento del pedido incluye descuento en el programa Antivirus Norton, obliga al formulario indicar alguna cantidad a alguno de los programas para que se pueda procesar el resumen del pedido, y además incluye una nueva parte de como nos ha conocido el cliente. </font></p>
<p><font color="#000000" size="2" face="Arial">Por otra parte, se guarda el resumen del pedido en un archivo .doc </font></p>
<form name="form1" id="form1" method="post" action="procesaform.php">
<table width="406" border="1" bordercolor="#999999">
<tr bgcolor="#999999">
<td width="57"><div align="center"><strong>Antivirus</strong></div></td>
<td width="180"><div align="center"><strong>Cantidad</strong></div></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Norton</td>
<td>
<div align="center">
<input name="nortoncant" type="text" id="nortoncant" size="3" maxlength="3" />
</div></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Panda</td>
<td><div align="center">
<input name="pandacant" type="text" id="pandacant" size="3" maxlength="3" />
</div></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Nod32</td>
<td><div align="center">
<input name="nodcant" type="text" id="nodcant" size="3" maxlength="3" />
</div></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>AVG</td>
<td><div align="center">
<input name="avgcant" type="text" id="avgcant" size="3" maxlength="3" />
</div></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>¿Cómo conoció nuestra página? </td>
<td><select name="find" id="find">
<option value="a">Cliente habitual</option>
<option value="b">Buscador Google</option>
<option value="c">Otros buscadores</option>
<option value="d">Otros medios de comunicación</option>
</select></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Dirección de envio </td>
<td><input name="direc" type="text" id="direc" size="20" maxlength="20" /></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Población</td>
<td><input name="pob" type="text" id="pob" size="20" maxlength="20" /></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Código Postal </td>
<td><input name="cp" type="text" id="cp" size="5" maxlength="5" /></td>
</tr>
<tr bgcolor="#CCCCCC">
<td>Provincia</td>
<td><input name="prov" type="text" id="prov" size="20" maxlength="20" /></td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="2"><div align="center">
<input type="submit" name="Submit" value="Enviar Pedido" />
</div></td>
</tr>
</table>
</form>
<p> </p>
<p> </p>
<p><font color="#000000" face="Arial" size="2"><br/>
<br/>
<br/>
</font></p>
</div>
</div>
</div>
<?
require("footer.htm");
?>
</body>
</html>
</body>
</html>
Observamos el código, después de la etiqueta <body> utilizamos la función require() para añadir el archivo header.html, después a continuación va el archivo menú.html, después el archivo menu2.html, luego escribimos el contenido de la página que es html lo he resaltado en negrita para que lo veáis mejor, y al final añadimos mediante la función require() el pie de página el archivo footer.html. Por cierto, se me olvidaba, hay que crear un archivo doc lo vamos a llamar pedidos.doc y lo vamos a guardar dentro de la carpeta_web.
El último archivo que nos queda por crear es el procesaform.php, bueno yo lo he llamado así, de forma que cuando le demos a enviar al formulario nos re direccionará a este archivo, cuyo código es el siguiente:
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?
require("header.htm");
?>
<?
require("menu.htm");
?>
<?
require("menu2.htm");
?>
<?
echo "<p> Pedido procesado a las: ";
echo date ("H:i"); //La fecha con la hora incluída
echo " del día ";
echo date ("j ");
echo "de ";
echo date ("F ");
echo "del año ";
echo date ("Y"); //hasta aquí la fecha
echo "<br>";
echo "<p>Su pedido es el siguiente: ";
echo "<br>";
$totalcant = 0; //la cantidad total de programas antivirus solicitados
$total= 0.00; //el precio total de los programas solicitados
define ("NORTONPRECIO", 50); //el precio de cada programa
define ("PANDAPRECIO", 52);
define ("NOD32PRECIO", 28);
define ("AVGPRECIO", 24,30);
if ($nortoncant<10) //aplicación de descuento
$descuento = 0;
elseif ($nortoncant >=10 && $nortoncant <=49)
$descuento = 5;
elseif ($nortoncant >=50 && $nortoncant <=99)
$descuento = 10;
elseif ($nortoncant>100)
$descuento = 15;
switch ($find)
{
case "a":
echo "<p>Se trata de un cliente habitual.";
break;
case "b":
echo "<p>Este cliente nos conoció a través del buscador Google.<br>";
break;
case "c":
echo "<p>Este cliente nos conoció a través de otros buscadores.<br>";
break;
case "d":
echo "<p>Este cliente nos conoció a través de otros medios de comunicación.<br>";
break;
default:
echo "<p>No sabemos como nos ha conocido este cliente<br>";
break;
}
$totalcant = $nortoncant + $pandacant + $nodcant + $avgcant; //cálculo de la cantidad total de programas
$total = $nortoncant * NORTONPRECIO
+ $pandacant * PANDAPRECIO
+ $nodcant * NOD32PRECIO
+ $avgcant * AVGPRECIO; //cálculo del precio total
if ($totalcant == 0)
{echo '<font color=black>';
echo "Usted no ha introducido ninguna cantidad en el formulario <br>";
echo '</font>';}
else
{
if($nortoncant>0)
echo $nortoncant. " Norton<br>"; //procesa la cantidad de norton
if($pandacant>0) //Si no le indicamos la cantidad no lo procesa el pedido
echo $pandacant. " Panda<br>"; //procesa la cantidad de panda
if($nodcant>0)
echo $nodcant. " Nod32<br>"; //procesa la cantidad de nod
if($avgcant>0)
echo $avgcant. " AVG<br>"; //procesa la cantidad de avg
echo "<br>";}
echo "<br>";
echo "Programas pedidos: ".$totalcant."<br>\n";
echo "Subtotal: €";
echo number_format($total, 2);
echo "<br>\n";
if ($descuento == 0)
{
echo "No tiene ningún descuento en el programa Norton Antivirus";
}
else
{
echo "<p>Descuento en el programa Norton Antivirus".$descuento."%";
echo "<br>";
}
$iva=0.16;
$total = $total *(1+$iva);
$total=number_format($total, 2);
echo "Total incluyendo impuestos: €".$total."<br\n";
$stringsalida = $date."\t".$nortoncant." Norton \t".$pandacant." Panda\t" .$nodcant." Nod32\t"
.$avgcant." AVG\t\€".$total."\t". $direc."\t". $pob."\t". $cp."\t". $prov."\n";
// abrir fichero añadiendo
@ $fp = fopen("C:/xampp/htdocs/xampp/carpeta_web/pedidos.doc", "a");
@ flock($fp, 2);
if (!$fp)
{
echo "<p><strong> Su orden no ha podido ser procesada en este momento. "
."Por favor inténtelo de nuevo más tarde.</strong></p></body></html>";
exit;
}
fwrite($fp, $stringsalida);
flock($fp, 3);
fclose($fp);
echo "<p>Su orden ha sido recibida y guardada.</p>";
?>
<?
require("footer.htm");
?>
</body>
</html>
Nos fijamos después de la etiqueta <body> con la función require() añadimos los archivos header.html, menú.html, menu2.html, y a continuación la aplicación que la he resaltado en negrita que es exactamente igual al pedido que hicimos en la entrada anterior. Y por último otra vez la función require() añadiendo la función footer.html.
Ahora vamos a ver el archivo form.php en el navegador y vamos a realizar un pedido y veremos cómo nos re direcciona al archivo procesaform.php y nos almacena los datos en el archivo pedidos.doc.
Abrimos en el navegador el archivo form.php:
Realizamos el pedido y le damos al botón enviar y nos lleva a la página procesaform.php:
Abrimos el archivo pedidos.doc
Y ahí nos aparecen los datos que hemos introducido en el formulario.
Pues hasta aquí el proyecto. A partir de ahora el nivel va a ser mucho mayor, todos los que habéis llegado hasta aquí y habéis entendido gran parte del contenido podéis consideraros que tenéis un conocimiento básico-medio. Lo que vamos a ver en las próximas entradas va a ser la base de datos SQL, como crear una base de datos, añadir registros a la base de datos, eliminar registros, etc. el cómo autentificarse en una página, etc. Aunque en algunas entradas os pondré alguna práctica relacionada con lo que hemos visto hasta ahora para que practiquéis y refresquéis la memoria. Por otro lado, si vosotros consideráis que me he dejado algo por ver, o que debería profundizar en algo concreto ya sabéis lo podéis hacer mediante los comentarios o enviándome algún mail.
