Desarrollo Web con PHP y MySQL (VIII)

Hola a tod@s,

Hoy continuamos con nuestro curso que dejamos con su séptima entrega, Desarrollo Web con PHP y MySQL (VII), donde estuvimos las estructuras de control de flujo de los programas en PHP.

Estuvimos viendo los diferentes tipos de estructuras, y vimos que se clasificaban en 3 grandes grupos: Los condicionales, los bucles y los saltos.

A parte de ver las diferentes estructuras de cada categoría, vimos ejemplos de cada una de ellas, así como nuevas funciones PHP para la validación de formularios HTML.

En el ejemplo que vimos (Ejemplo de envío de formulario), aplicamos las funciones que habíamos visto y pudimos comprobar cómo trabajaba PHP con las nuevas funcionalidades y métodos aprendidos.

Hoy continuaremos con el estudio de las Aplicaciones Web en PHP.

Siguiendo la numeración de capítulos, hoy continuamos con el capítulo 10.

10. Aplicaciones Web

Se denomina aplicación web a aquellas herramientas que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador. En otras palabras, es una aplicación software que se codifica en un lenguaje soportado por los navegadores web en la que se confía la ejecución al navegador.

Las aplicaciones web son populares debido a lo práctico del navegador web como cliente ligero, a la independencia del sistema operativo, así como a la facilidad para actualizar y mantener aplicaciones web sin distribuir e instalar software a miles de usuarios potenciales. Existen aplicaciones como los webmails, wikis, weblogs y tiendas en línea que son ejemplos bien conocidos de aplicaciones web.

10.1 Crear Plantillas

Ciertas características en PHP, tal como el diseño HTML, se utiliza para cada página dentro de un sitio web. Podemos poner todos estos elementos dentro de cada página individual, pero cuando necesitamos hacer un cambio, lo tendríamos que hacerlo por todas las páginas.

Para ahorrar tiempo podemos crear plantillas que separan el contenido de la estructura de la página.

Lo que se hace es crear un prototipo y después dividirlo en partes.

Ejemplo de Plantilla

<!DOCTYPE HTML> <!-- Plantilla HTML5 -->
<html>
    <head>
        <title>Plantilla 1</title>
    </head>
    <body>
        <font size="1">Cabecera</font></br>
        <hr> <!-- Línea Horizontal -->
<!--                Cabecera                -->
        Contenido Variable 1
        </br></br></br>
        Contenido Variable 2
<!--                Pié de Página            -->        
        <hr>
        <font size="-1">Pié de Página</font></br>
    </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Plantilla 1</title>

</head>

<body>

<font size="1">Cabecera</font></br>

Contenido Variable 1

</br></br></br>

Contenido Variable 2

<hr>

<font size="-1">Pié de Página</font></br>

</body>

</html>

Nota: Lo escrito entre <!– y –> son comentarios, que solo saldrán en el código, y no en la página.

Aunque hemos definido así la Cabecera, el Cuerpo y el Pié de Página de nuestra Web, gracias a HTML5, nos facilita el trabajo gracias a las nuevas etiquetas <header></header> y <footer> </footer>:

<!DOCTYPE HTML>
<html>
    <head>
        <!-- Aquí irá el contenido del head. -->
    </head>
    <body>
        <header>
            <h1>Título de la web</h1>
        </header>
        Contenido de la web.
        <footer>
            Pie de pagina.
        </footer>
    </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<h1>Título de la web</h1>

</header>

Contenido de la web.

Pie de pagina.

</footer>

</body>

</html>

La etiqueta <header>…</header> especifica una introducción, o un grupo de elementos de navegación para el documento. Y la etiqueta <footer>…</footer> define el pie de página de una sección o documento. Por lo general contiene el nombre del autor, la fecha en que fue escrito el documento y/o información de contacto.

Nosotros vamos a hacer la plantilla por partes, es decir, vamos a hacer una página para la cabecera y otra para el pié de página en PHP.

Así entre estas dos, tendremos el cuerpo de la web en PHP.

Cabecera(cabecera.html)

<!DOCTYPE HTML> <!-- HTML5 -->
<HTML>
  <HEAD>
    <TITLE>Cabecera</TITLE>
  </HEAD>
  <BODY>
    <FONT SIZE=”1”>Cabecera</FONT></BR>
    </BR>
    <HR>
  </BODY>
</HTML>

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>Cabecera</TITLE>

</HEAD>

<BODY>

<FONT SIZE=”1”>Cabecera</FONT></BR>

</BR>

<HR>

</BODY>

</HTML>

Pié de Página(piedepagina.html)

<!DOCTYPE HTML> <!-- HTML5 -->
<HTML>
  <HEAD>
    <TITLE>Pié de Página</TITLE>
  </HEAD>
  <BODY>
    <HR>
    <FONT SIZE=”-1”>Pié de Página</FONT><BR>
  </BODY>
</HTML>

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>Pié de Página</TITLE>

</HEAD>

<BODY>

<HR>

<FONT SIZE=”-1”>Pié de Página</FONT><BR>

</BODY>

</HTML>

10.2 Utilizar archivos externos

Para poder insertar dentro de las páginas PHP las páginas separadas por elementos particulares o plantillas, disponemos de 2 funciones:

include();

require();

Estas 2 funciones son equivalentes, es decir, realizan la misma función.

Estas funciones insertan el archivo al cual se hace referencia desde el archivo principal.

Podemos utilizar estas funciones en diferentes situaciones como por ejemplo:

Incluir Plantillas
Incluir Funciones
Incluir información de acceso a una BBDD (Base de datos)

Con las 2 plantillas anteriores en HTML, vamos a ver un ejemplo de plantilla PHP para incluir esas plantillas a nuestro PHP principal utilizando una de las funciones que hemos visto.

Ejemplo incluir plantilla HTML en una página PHP

La estructura de carpetas del proyecto o sitio web serán como en el siguiente diagrama:

Plantilla PHP(plantilla.php)

<html>
  <head>
    <title>Plantilla PHP</title>
  </head>
  <body>
    <?php
      include('aplicaciones/cabecera.html');
      echo "Contenido Variable 1"."</br>";
      echo "Contenido Variable 2"."</br>";
      include('aplicaciones/piedepagina.html');
    ?>
  </body>
</html>

<html>

<head>

<title>Plantilla PHP</title>

</head>

<body>

<?php

include('aplicaciones/cabecera.html');

echo "Contenido Variable 1"."</br>";

echo "Contenido Variable 2"."</br>";

include('aplicaciones/piedepagina.html');

</body>

</html>

10.3 Utilizar formularios HTML con PHP

Hasta ahora, siempre hemos utilizado 2 páginas o Scripts por separado para manejar formularios con PHP:

Una página HTML que nos muestra el Formulario

Una página PHP que procesaba la información introducida en el Formulario HTML

Con PHP podemos hacer que una página PHP muestre i procese el formulario a la vez utilizando las estructuras de control (¡vistas en la anterior entrega del curso!):

if(//si el formulario se ha enviado)
{
  //Procesamos la información del formulario
}else{
  //Mostramos el formulario
}

if(//si el formulario se ha enviado)

{

//Procesamos la información del formulario

}else{

//Mostramos el formulario

}

Un ejemplo, sería comprobar la condición de si se ha pulsado el botón de ‘Enviar’ o no el Formulario:

if(isset($_POST['enviar'])) //Si se pulsa el botón enviar
{
  //Procesamos la información del formulario
}else{
  //Mostramos el formulario
}

if(isset($_POST['enviar'])) //Si se pulsa el botón enviar

{

//Procesamos la información del formulario

}else{

//Mostramos el formulario

}

Ejemplo Control de Acceso de Usuarios en PHP

<?php
  if(isset($_POST['enviar']))
  { //Comprobaciones si se ha pulsado el botón enviar
    if((!empty($_POST['mail']))&&(!empty($_POST['password'])))
    {
      if(($_POST['password'])==($_POST['conf-pass']))
      {
        echo "Has entrado los datos correctamente!"."</br>";
      }else{
        echo "El password no es igual que el de la confirmación!"."</br>";
      }
    }else{
      echo "Introduce e-mail i password!!!"."</br>";
    }
  }else{
    //Si no se ha pulsado el botón enviar, muestra el Formulario
    echo "Rellena el formulario de acceso para entrar: "."</br>";
    echo '<form action="formulario.php" method="POST"></br>
    Dirección e-mail: <input type="text" name="mail"></br>
    Password: <input type="password" name="password"></br>
    Confirmar Password: <input type="password" name="conf-pass"></br>
    <input type="submit" name="enviar">
    </form>';
  }
?>

<?php

if(isset($_POST['enviar']))

{ //Comprobaciones si se ha pulsado el botón enviar

if((!empty($_POST['mail']))&&(!empty($_POST['password'])))

{

if(($_POST['password'])==($_POST['conf-pass']))

{

echo "Has entrado los datos correctamente!"."</br>";

}else{

echo "El password no es igual que el de la confirmación!"."</br>";

}

}else{

echo "Introduce e-mail i password!!!"."</br>";

}

}else{

//Si no se ha pulsado el botón enviar, muestra el Formulario

echo "Rellena el formulario de acceso para entrar: "."</br>";

echo '<form action="formulario.php" method="POST"></br>

Dirección e-mail: <input type="text" name="mail"></br>

Password: <input type="password" name="password"></br>

Confirmar Password: <input type="password" name="conf-pass"></br>

</form>';

}

10.4 Buffer de Salida

El Buffer de Salida en PHP es el paso intermedio entre script PHP y el resultado del navegador.
En un script PHP, si tenemos abierto el buffer de salida, las etiquetas HTML que incorporamos y todas las salidas se colocarán en el buffer, y cuando finalice el script, el contenido de este se escribirá al navegador.

El tamaño del buffer de salida es de más o menos 4096 Bytes, es decir, se puede introducir un máximo de 4MB de código PHP pero se puede configurar para soportar más!( EasyPHP -> Configuración -> PHP ->php.ini).

Tenemos varias funciones PHP para trabajar con el buffer de salida:

ob_start(): Sirve para indicar al Script que se ha de iniciar el buffer de salida, es decir, se comienzan a guardar las salidas, en lugar de enviarlas directamente al navegador.

ob_end_flush(): Sirve para indicar que se quiere enviar el contenido del buffer al navegador.

ob_end-clean(): Sirve para eliminar los datos acumulados en el buffer.

Ejemplo de uso del Buffer de Salida en PHP

<?php
  //Empezamos a guardar datos en el Buffer
  ob_start();
?>

<html>
  <head>
    <title>Página HTML</title>
  </head>
  <body>
    <p>Es como comparar manzanas con naranjas.</p>
  </body>
</html>

<?php
//Enviamos para que se muestre en el navegador
ob_end_flush();
//Limpiamos el Buffer
ob_end_clean();
?>

<?php

//Empezamos a guardar datos en el Buffer

ob_start();

<html>

<head>

<title>Página HTML</title>

</head>

<body>

<p>Es como comparar manzanas con naranjas.</p>

</body>

</html>

<?php

//Enviamos para que se muestre en el navegador

ob_end_flush();

//Limpiamos el Buffer

ob_end_clean();

Aquí tenéis un enlace a la web php.net en donde encontraréis más información y más funciones sobre el Buffer de salida, que ellos llaman “Funciones de control de salida“.

10.5 Manipular encapsulados HTTP

Un encapsulado HTTP, es un protocolo de transferencia que se utiliza para enviar información de ida y de vuelta entre servidor y cliente (navegador web).

Una de las maneras con las cuales podemos trabajar con encapsulados es redireccionar al usuario de una página a otra.

Para hacer esto, utilizaremos la función PHP header();

header()

Sirve para insertar una referencia a una página web externa que nos redirigirá a ella, i no como include() o request() que se ejecuta en nuestra página.Se utiliza location para referenciar la web:

header('location: web.php');

1	header('location: web.php');

Ejemplos de uso de header()

<?php
  if(isset($_POST['enviar']))
  {
    ob_end_clean();
    header('location:wellcome.php');
    exit();
  }else{
    echo "Formulario";
  }
?>

<?php

if(isset($_POST['enviar']))

{

ob_end_clean();

header('location:wellcome.php');

exit();

}else{

echo "Formulario";

}

En el código anterior miramos lo que sucede:

La 1ª vez que entramos en esta página, se muestra el Formulario (en este caso, nos muestra la palabra “Formulario“).
Pero, si pulsamos el botón “Enviar” del Formulario, se limpia el buffer de salida (ob_end_clean()) y nos muestra la página que hemos especificado mediante header().
Cuando salimos de esta página, mediante la nueva función exit(), PHP nos cierra o nos fuerza salir del navegador.

<?php
  echo "Mensaje";
  if(isset($_POST['enviar']))
  {
    ob_end_clean();
    header('location:wellcome.php');
  }else{
    echo "Formulario";
  }
?>

<?php

echo "Mensaje";

if(isset($_POST['enviar']))

{

ob_end_clean();

header('location:wellcome.php');

}else{

echo "Formulario";

}

Ahora miramos lo que sucede:

La 1ª vez que entramos en esta página, se muestra el Mensaje y el Formulario (en este caso, nos muestra la palabra “Formulario“).
Si pulsamos el botón “Enviar” del Formulario, se limpia el buffer de salida (ob_end_clean()) y nos muestra la página que hemos especificado mediante header().
Cuando salimos de esta página, como no tenemos la función exit(), PHP no nos cerrará o nos forzará salir del navegador, y nos mantendremos en él.

Hasta aquí esta parte del curso Desarrollo Web con PHP y MySQL a lo que lenguaje PHP se refiere. La semana próxima empezaremos con una introducción a las bases de datos (BBDD) y en nuestro caso, empezaremos a ver que es MySQL y sus principales características.

Más adelante, retomaremos el lenguaje PHP para ver más funciones asociadas al trabajo con BBDD como MySQL.

Hasta entonces un saludo y no os olvidéis dejar vuestros comentarios o incidencias sobre el curso.

¡Ánimo!

Info | PHP.NET
Curso | Desarrollo Web con PHP y MySQL

2 thoughts on “Desarrollo Web con PHP y MySQL (VIII)”

Paco
12 noviembre, 2012 at 13:06

Inicia sesión para responder

Enhorabuena por la labor que haces, todo lo que explicas siempre es bienvenido.
1. The_CEO
  Author
  
  12 noviembre, 2012 at 14:59
  
  Inicia sesión para responder
  
  Gracias a tí por visitar mi Blog, ahora estoy preparando la 2ª parte del curso que se centrará más en MySQL, y empezará en Enero.
  
  Saludos!

You must be logged in to post a comment.

[Curso GIT II]
Comandos básicos

[Curso JAVA III]
Petición de datos

Diseños profesionales
con Canva

[Curso JAVA II]
Variables en Java

[Curso de Diseño Gráfico]
Introducción a GIMP

[Curso Ubuntu] Introducción a Linux

[Códigos de ejemplo II]
Ejemplos JavaScript

[Curso de Hardware]
Introducción al Hardware

[Curso BBDD]
Fundamentos de BBDD

[Curso GIT]
Control de versiones

[Curso Unity]
Introducción a Unity

[Curso JAVA]
Plataforma Java