martes, 15 de agosto de 2017


Crear una plantilla con includes en PHP

Cómo crear una plantilla en PHP y hacer un sitio homogéneo utilizando sencillos includes.
Una plantilla va a ser un portada genérica para nuestra web, que solo contendrá los menús y elementos indispensables que además mostraremos en todas las páginas por igual.

¿Para qué queremos esto?


1.Código más limpio,cualquier modificación se puede hacer sobre este mismo archivo afectando de manera inmediata al resto de las páginas. 
2. Web más uniforme, de modo que el usuario no sé perderá entre diferentes secciones llenas de menús que puedan hacer engorrosa la navegabilidad.

Comencemos

Nuestro código va a ser sumamente simple, para empezar crearemos una tabla que como marco donde deberemos poner nuestros logotipos, menus, publicidad,.. y lo más importante, el contenido.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Plantilla en PHP</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 

<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td colspan="3"><div align="right">Logotipo y Titulo</div></td> 
</tr> 
<tr> 
<td width="20%"><p>Menu principal</p> 
<ul> 
<li><a href="">Sección 1 </a></li> 
<li><a href="">Sección 2 </a></li> 
<li><a href="">Sección 3 </a></li> 
</ul></td> 
<td colspan="2" valign="top"> 
Aquí irá el contenido 
</td> 
</tr> 
<tr> 
<td colspan="3">Pie de página </td> 
</tr> 
</table> 
</body> 
</html>
Vamos a utilizar el PHP para poder introducir contenido dentro de esta plantilla.
Para ello vamos a utilizar la función include de PHP. Esta nos permite introducir una página dentro de otra con tan solo indicarle la ruta del archivo, así utilizaremos una variables (que pasaremos por URL) para indicar a que sección queremos acceder.
Por ejemplo, si utilizamos una variable llamada $sec podriamos acceder a una sección utilizando el link "?sec=seccion1", de modo que a continuación en nuestro código y para evitar fallos innecesarios comprobaremos que el archivo 1.html/ 1.htm/ 1.php/... existe y en tal caso lo incluiremos.
Veamos a contianuación el código:
<?php 
if(empty($sec)) 

include("presentacion.html"); 

else 

if(file_exists($sec.".php")) 
include($sec.".php"); 
elseif(file_exists($sec.".html")) 
include($sec.".html"); 
else 
echo 'Perdón pero la página solicitada no existe'; 

?>
En este caso hemos comprobado solo si existe el archivo "1.html" y "1.php".
Pero ¡cuidado con este código!, ya que en el caso de que tengamos ambos archivos en nuestro servidor siempre se mostrará el ".php" ya que es el primero que aparece.
De este modo conseguimos finalmente un fichero con la siguiente forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Plantilla en PHP</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 

<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td colspan="3"><div align="right">Logotipo y Titulo</div></td> 
</tr> 
<tr> 
<td width="20%"><p>Menu principal</p> 
<ul> 
<li><a href="?sec=1">Secci&oacute;n 1 </a></li> 
<li><a href="?sec=2">Secci&oacute;n 2 </a></li> 
<li><a href="?sec=3">Secci&oacute;n 3 </a></li> 
</ul></td> 
<td colspan="2" valign="top"> 
<?php 
if(empty($sec)) 

include("presentacion.html"); 

else 

if(file_exists($sec.".php")) 
include($sec.".php"); 
elseif(file_exists($sec.".html")) 
include($sec.".html"); 
else 
echo 'Perdón pero la página solicitada no existe'; 

?> 
</td> 
</tr> 
<tr> 
<td colspan="3">Pie de p&aacute;gina </td> 
</tr> 
</table> 
</body> 
</html> 

En él existen 3 archivos, el index.php que será nuestra plantilla, 1.php que será una de nuestras secciones, 2.html que será otra de nuestras secciones y el link a la sección tres la hemos dejado que apunte a un archivo que aun no hemos creado para comprobar que nuestra funcion file_exists funciona correctamente.
Las cabeceras y los tags van dentro de nuestro index.php, si incluis un archivo con cabeceras dentro de otro creareis un mal código html, que posiblemente no tenga mucho efecto en el visitante pero sí será un obstaculo para encontrar posibles errores o simplemente para leer vuestro propio código.

Formularios en HTML5:



Tipos de input:

Tipo de entrada Número

La <input type = "número"> define una numérico campo de entrada.
También puede establecer restricciones en lo que se aceptan los números.
El ejemplo siguiente muestra un campo de entrada numérico, donde se puede introducir un valor de 1 a 5:

Ejemplo

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Propiedades del <textarea>:


<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
  rows:



El número de líneas visibles en el control. Largo de la caja.
cols:

La anchura visible del control de texto, en caracteres de anchura media. Si está definido debe ser positivo. Si no, por defecto, el valor es 20 (HTML 5).
placeholder: declararemos el atributo placeholder con una pista  acerca del contenido que se espera sea ingresado en el control, el cual será mostrado dentro de la caja de texto cuando ésta esté vacía.

Sintaxis de tel input HTML5

Como veis es muy fácil insertar el nuevo input tel en el formulario un formulario.

Ejemplo de uso del atributo pattern en el tel input HTML5

Os pongo un segundo ejemplo usando el atributo pattern, esta mejora consiste en que se metan obligatoriamente los 9 dígitos de los números de teléfono que se usan en España.
En el código superior podemos ver como en el atributo pattern hemos metido una expresión regular en la que condicionamos la entrada de 9 números del 0 al 9.
Siempre se ha de cumplir esa condición, en caso contrario nos hará una validacón automática como la que pongo en la siguiente imagen.

Ejemplo de uso del atributo pattern para letras:

XHTML
1
2
<input type="text" name="pueblo" pattern="[A-Za-z]{4-16}">
<!-- El usuario solo podrá meter una palabra de 4 a 16 caracteres entre la con las letras de A-Z y a-z -->

Atributos válidos en tel input HTML5

  1. name: Nombre del input (name=”nombre del input”).
  2. disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=”disabled”), por defecto activado.
  3. type: tipo de input, en este caso es ‘tel’
  4. form: Con este atributo se asocia el id del form al que pertenece el input (form=”id del form”).
  5. autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=”off”, autocomplete=”on”).
  6. autofocus: Este atributo hace que el cursor se situe en en input (autofocus=”autofocus”).
  7. list: Asocia mediante id una lista de valores predefinidos (list=”nombre lista”).
  8. maxlength: Longitud máxima en caracteres del número introducido.
maxlength="7"

readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=”readonly”).

required: Determina si el input tiene que ser rellenado obligatoriamente (required=”required”).

size: Anchura del input en el form.

pattern: Expresión regular que a de cumplir el número de teléfono.

placeholder: Permite al usuario ver una leyenda en el input de entrada de datos. Cuando el usuario clicke sobre el input esta leyenda desaparecerá (placeholder=”leyenda, texto explicativo”).

value: Valor por defecto del input.

novalidate: Hace que el input no se valide al enviarse el formulario.


ucwords (Convierte la primera letra de cada palabra a Mayúsculas en php)

$texto = ucwords($observacion);


strtouppper, strtolower, ucwords y la codificación

$cadenaOriginal = "En EsPaÑA hAy MuchOs HIpÓcritas y PolíTicOS CoRruPtos";
echo ("CADENA ORIGINAL: ".$cadenaOriginal."<br>");
// Arroja >> CADENA ORIGINAL: En EsPaÑA hAy MuchOs HIpÓcritas y PolíTicOS CoRruPtos
echo ("CADENA MAYÚSCULAS: ".strtoupper($cadenaOriginal)."<br>");
// Arroja >> EN ESPAÑA HAY MUCHOS HIPÓCRITAS Y POLíTICOS CORRUPTOS
echo ("CADENA MINÚSCULAS: ".strtolower($cadenaOriginal)."<br>");
// Arroja >> CADENA ORIGINAL: en espa�a hay muchos hip�critas y pol�ticos corruptos
echo ("CADENA CAPITALIZADA: ".ucwords(strtolower($cadenaOriginal))."<br>");
// Arroja >> CADENA ORIGINAL: En Espa�a Hay Muchos Hip�critas Y Pol�ticos Corruptos



Cómo colocar la estructura de un echo para que nos valga una variable:

echo '<b><font color="red" size="4">'.$texto.'</font></b>';
echo '<a href="'.$observacion.'" target="_blank"><font color="blue" size="4"> IR AL SITIO WEB</a>';