sábado, 31 de enero de 2015

Crea tu propia página web desde cero (V)

En el capítulo anterior vimos cómo crear nuestra base de datos de ejemplo para empezar a meter datos desde la web. Ahora vamos a ver por fin cómo hacer que desde nuestro formulario web, esos datos que metíamos se guarden en esa BD, y cómo hacer para consultarlos desde la web a modo de listado de usuarios.

Lo primero de todo, crearemos una carpeta llamada protected en la raíz de nuestro proyecto, de modo que ahora tendremos las carpetas bootstrap, css, img y protected, además del fichero index.html. En esa carpeta protected meteremos los códigos PHP que serán invisibles al usuario. Estos códigos tendrán extensión .php, y serán la programación interna desde el servidor para gestionar los datos de la web entre el navegador que ve el usuario, y la base de datos. Atención: es recomendable tener nociones de programación para entender bien este capítulo, aunque se explicará cada código en la medida de lo posible, el usuario debería analizar cada línea para entender lo que hace.

En esa carpeta protected creamos un fichero llamado bd.php que contendrá la información de acceso a nuestra base de datos. Tendrá el código siguiente:

<?php
if(!defined("HOST")) define("HOST", "localhost");
if(!defined("USER")) define("USER", "root");
if(!defined("PASS")) define("PASS", "");
if(!defined("BD")) define("BD", "ejemplo");
$mysqli = new mysqli(HOST, USER, PASS, BD);
$mysqli->set_charset("utf8");
?>

Al ser código PHP, todo irá incluido entre las etiquetas <?php y ?>. Lo que hacemos en este código es decirle en qué servidor se encuentra la BD (en localhost), qué usuario y contraseña accederá a la BD (root y sin contraseña, a no ser que queramos poner más usuarios y contraseñas, lo dejamos así), el nombre de la BD (ejemplo), y se crea la base de datos con esos parámetros, además de decirle que le ponga un cotejamiento utf8 que nos será útil para poder escribir caracteres como acentos y eñes. A nivel de programación, primero comprueba "si no existe la clave HOST, define la variable HOST con el valor localhost", y así con los cuatro parámetros. Luego se crea la variable $mysqli y se le asigna un objeto mysqli (objeto de BD) con esos cuatro parámetros, y después se le asigna la codificación utf8.

Tendremos que modificar un poco nuestro formulario en el fichero index.html para que podamos elegir la asignatura y país de algún desplegable, que se deberán cargar con los datos de asignaturas y países existentes en la BD. Pero para ello crearemos antes un par de páginas nuevas desde las cuales podremos añadir a mano las asignaturas y países.

Empezamos por crear un fichero paises.php en la raíz de la web, junto a index.html. Copiamos el código entero de index.html y lo pegamos en paises.php, cambiando lo que hay en el interior del bloque <div class="cuerpo"> </div>, que será lo único que cambie, y añadimos en ese bloque el código siguiente:

<form class="form-group" id="nuevo-pais" name="nuevo-pais" action="protected/nuevo_pais.php" method="post">
<h2>Crear nuevo país</h2>
<hr>
<div class="form-group">
Nombre del país:<br>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre del país">
</div>
<hr>
<input class="btn btn-primary" class="form-control" type="submit" id="enviar" value="Guardar">
</form>
<hr/>
<h3>Países creados:</h3>
<?php
include("protected/paises.php");
?>
<a href="index.html"><-- Volver</a>

Ya tenemos un formulario para añadir países por su nombre, y un enlace para volver a la página anterior. También deberíamos añadir a index.html el código <a href="paises.php">Crear país</a> justo debajo del formulario, para poder acceder a la página de países desde el index. Además hemos incluido un fragmento de código PHP, en donde le estamos indicando que incluya el código del fichero protected/paises.php. Esto servirá para cargar aquí mismo el listado de países que vayamos creando. Esta carga de países realizada desde protected/paises.php tendrá el siguiente código:

<?php
include("bd.php");

$query = "SELECT * FROM pais";
if($result = $mysqli->query($query))
{
$resultado = "";

if(mysqli_num_rows($result) == 0)
{
$resultado = "No existen países";
}
else
{
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$nombre_pais = $linea['nombre'];
$resultado .= $nombre_pais . "<br/>";
}
}
echo $resultado . "<br>";
}
else
{
echo "ERROR al cargar los países: " . $mysqli->error;
}
?>

Lo que hace este código en la primera línea es incluir el código de bd.php, que contiene la información sobre la BD que vamos a manipular. Después crea una sentencia SQL para seleccionar toda la información de la tabla país (se recomienda buscar en Google más información sobre sentencias SQL, en concreto las SELECT, INSERT y UPDATE). Si el resultado de ejecutar esa selección de países es correcta, crea una variable $resultado por ahora vacía, que contendrá el texto a devolver. Si el resultado de países es vacío, el texto resultado dirá que no existen países. Si no, si hubiera países, lo que hace es mientras se crea una línea por cada país, se obtiene su nombre y se añade al texto resultado. Por último, imprime el resultado con echo. Si hubiera algún error previamente al cargar los datos de la BD, imprimirá un mensaje de error.

Si nos fijamos en el formulario de países, el action del form apunta a protected/nuevo_pais.php. Así que tenemos que crear un fichero llamado nuevo_pais.php dentro de la carpeta protected. Su código incluirá lo siguiente:

<?php
include("bd.php");

if(isset($_POST['nombre']))
{
$nombre_pais = $_POST['nombre'];
$query = "INSERT INTO pais (nombre) VALUES ('$nombre_pais')";

if($result = $mysqli->query($query))
{
header("Location: ../paises.php?ok=1");
}
else
{
header("Location: ../paises.php?error=1");
}
}
else
{
header("Location: ../paises.php?error=2");
}
?>

Analicemos un poco el código. En primer lugar está incluyendo el código del fichero bd.php que creamos anteriormente, ya que es necesario saber qué base de datos vamos a manipular. Después hay una condición if, que podemos traducir en si se ha enviado el atributo nombre por POST, es decir, si se envió correctamente el nombre del país desde el formulario anterior. Si esta condición se cumple, ejecuta el bloque encerrado entre llaves: crea una variable $nombre_pais con el nombre enviado por POST, crea una variable $post con el código que inserta por SQL un país cuyo valor para su nombre será el contenido en $nombre_pais, es decir, el nombre que enviamos desde el formulario. Ojo, en esta sentencia, el nombre debe ir entre comillas, ya que se trata de tipo texto (varchar), así tenemos ('$nombre_pais'). Si quisiéramos insertar números, serían sin comillas, pero los textos y fechas van entre comillas. Después, si el resultado de ejecutar esa sentencia es correcto, volvemos a la página paises.php con un atributo ok puesto a 1. Si no, volvemos igualmente a paises.php, pero con un código de error igual a 1. Si no se cumplía la condición de haber recibido el nombre por POST, entonces vuelve a la página paises.php con otro código de error puesto a 2. Estos códigos servirán para mostrar mensajes informativos en la página de creación de países. Para mostrarlos, añadimos el siguiente código justo encima de la etiqueta <form del fichero paises.php:

<?php
if(isset($_GET['ok']))
{
echo '<p style="color: green">País añadido correctamente</p>';
}
if(isset($_GET['error']))
{
$error = $_GET['error'];

if($error == 1)
{
echo '<p style="color: red">ERROR: Hubo un problema con la base de datos</p>';
}
else if($error == 2)
{
echo '<p style="color: green">ERROR: No se envió correctamente el país</p>';
}
}
?>

Si hemos escrito bien los códigos, al acceder a localhost/Ejemplo/paises.php veremos el formulario para crear nuevos países. Podemos probar a crear varios, y comprobar el mensaje de confirmación o los mensajes de error si hubiera algún problema:


Ahora vamos a modificar el código del index.html para poder obtener los países y enviar bien todos los datos. Para empezar, hay que renombrar index.html a index.php, es decir, cambiarle la extensión, pues vamos a manipular PHP. Después, donde teníamos el bloque <select> de la nacionalidad, debemos dejarlo así:

Nacionalidad:<br>
<select id="nacionalidad" class="form-control" name="nacionalidad">
<option value="0">Elije tu país</option>
<?php
include("protected/bd.php");
$query = "SELECT * FROM pais";
$result = $mysqli->query($query);
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$id_pais = $linea['id'];
$nombre_pais = $linea['nombre'];
echo '<option value="' . $id_pais . '">' . $nombre_pais . '</option>';
}
?>
</select>

Se podría hacer más eficiente utilizando el fichero protected/paises.php, que ya nos devolvían los países, y utilizar plantillas para añadir esos países como opciones del desplegable, pero no vamos a entrar en más complicaciones. Si todo funciona bien, ahora nuestra página principal index.php debe mostrar algo así:


Ahora vemos como en el desplegable aparecen los países que hemos creado desde la página de creación de países. Por ahora lo de las asignaturas lo vamos a dejar, os lo dejo como deberes, pues se haría igual que con los países, aunque en el formulario de registro sería interesante que se pudieran elegir varias asignaturas. Lo dejaremos como está, sólo con el nombre de usuario, email, contraseña, fecha de nacimiento y foto, aunque lo de la foto lo dejaremos para otro capítulo, ya que sería interesante hacer copias de foto y obtenerlo por su ruta, etc.

Vamos por fin a crear el fichero protected/registro.php que tendrá el código que procese los datos del usuario registrado. Contendrá lo siguiente:

<?php
if(isset($_POST['nombre']) && isset($_POST['email']) && isset($_POST['password']) && isset($_POST['pais']))
{
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$password = sha1($_POST['password']);
$pais = $_POST['pais'];
$fecha_nac = "";
if(isset($_POST['fecha-nacimiento'])) $fecha_nac = $_POST['fecha-nacimiento'];
include ("bd.php");
$query = "INSERT INTO usuario (nombre, email, password, pais, fecha_nac) VALUES ('$nombre', '$email', '$password', $pais, '$fecha_nac')";
if($result = $mysqli->query($query))
{
header("Location: ../index.php?ok=1");
}
else
{
header("Location: ../index.php?error=1");
}
}
else
{
header("Location: ../index.php?error=2");
}
?>

Este código es similiar al de creación de países, pero para usuarios, y con sus atributos. Notad que para el password se ha utilizado una función sha1 hacia el password enviado, esto lo que hace es encriptarlo para que no se pueda ver desde la BD. Y la fecha de nacimiento, como no es obligatoria, depende de si se ha enviado o no, el incluirla.

Por último, vamos a crear un fichero protected/usuarios.php para obtener los datos de los usuarios, con el siguiente código, igual que para países, pero con usuarios:

<?php
include("bd.php");

$query = "SELECT * FROM usuario";
if($result = $mysqli->query($query))
{
$resultado = "";

if(mysqli_num_rows($result) == 0)
{
$resultado = "No existen usuarios";
}
else
{
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$nombre = $linea['nombre'];
$email = $linea['email'];
$resultado .= $nombre . " - " . $email . "<br/>";
}
}
echo $resultado . "<br>";
}
else
{
echo "ERROR al cargar los usuarios: " . $mysqli->error;
}
?>

Dentro del bloque while sólo hemos incluido el nombre y email, pero podríamos poner el resto, y añadirlo al resultado con el formato y estilo que queramos (por ejemplo en bloques <p> o en una tabla, etc.)

Finalmente, vamos a ver cómo quedaría el index.php definitivo para que funcione todo el trasvase de datos y presentación de la web (sólo se incluye el contenido de su bloque <body>):

<div class="encabezado">
<h1>Mi primera web</h1>
</div>

<div class="cuerpo">
<?php
if(isset($_GET['ok']))
{
echo '<p style="color: green">Usuario creado correctamente</p>';
}
if(isset($_GET['error']))
{
$error = $_GET['error'];

if($error == 1)
{
echo '<p style="color: red">ERROR: Hubo un problema con la base de datos</p>';
}
else if($error == 2)
{
echo '<p style="color: red">ERROR: No se envió correctamente el usuario</p>';
}
}
?>
<form class="form-group" id="registro" name="registro" action="protected/registro.php" method="post">
<h2>Registro de usuario</h2>
<hr>
<h3>Introduce tus datos personales:</h3>
<div class="form-group">
Nombre de usuario:<br>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Introduce tu nombre">
</div>
<div class="form-group">
E-Mail:<br>
<input type="email" class="form-control" id="email" name="email" placeholder="email@ejemplo.com">
</div>
<div class="form-group">
Contraseña:<br>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="form-group">
Fecha de nacimiento:<br>
<input type="date" class="form-control" id="fecha-nacimiento" name="fecha-nacimiento">
</div>
<div class="form-group">
Nacionalidad:<br>
<select id="pais" class="form-control" name="pais">
<option value="0">Elije tu país</option>
<?php
include("protected/bd.php");
$query = "SELECT * FROM pais";
$result = $mysqli->query($query);
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$id_pais = $linea['id'];
$nombre_pais = $linea['nombre'];
echo '<option value="' . $id_pais . '">' . $nombre_pais . '</option>';
}
?>
</select>
</div>
<div class="form-group">
Foto:<br>
</div>
<input type="file" id="foto" name="foto">
<div class="form-group">
<input type="checkbox" id="acepto" name="acepto" required>
Acepto los términos y condiciones
</div>
<hr>
<input class="btn btn-primary" class="form-control" type="submit" id="enviar" value="Enviar datos">
</form>
<hr/>
<h3>Usuarios registrados:</h3>
<?php
include("protected/usuarios.php");
?>
<hr/>
<a href="paises.php">Crear país</a>
</div>

Si todo lo habéis hecho correctamente, nuestra página principal será así:



Vemos como en la parte superior aparece el mensaje de que el usuario fue añadido correctamente. Y abajo del todo aparece el listado de usuarios, que por ahora sólo es uno.

Y eso es todo por ahora. Os animo a practicar con nuevos datos, clases y atributos, así como presentar a vuestro gusto los datos que vayáis cargando. En el próximo capítulo veremos cómo subir imágenes, y cómo presentar el listado de usuarios de manera más elegante con todos sus datos y fotos.

Extra:

Crea tu propia página web desde cero (I)

No hay comentarios:

Publicar un comentario