Entra en Alicante Mola!
http://www.alicantemola.es
Síguenos en Twitter: @AlicanteMola
Y dale a 'Me gusta' en nuestra página de Facebook!
martes, 7 de julio de 2015
Nuevo blog, Alicante mola! Los mejores lugares y actividades de la provincia de Alicante
Estrenamos nuevo blog, Alicante mola! Porque Alicante mola, y tiene multitud de lugares y rincones que visitar y actividades que realizar. Playas, montañas, ciudades, pueblecitos, entornos rurales, zonas de ocio, restaurantes, hoteles... todo tiene cabida en esta nueva web, donde trataremos de descubrir y repasar cada lugar de la provincia de Alicante. Porque Alicante es la millor terreta del món
Entra en Alicante Mola!
http://www.alicantemola.es
Síguenos en Twitter: @AlicanteMola
Y dale a 'Me gusta' en nuestra página de Facebook!
Entra en Alicante Mola!
http://www.alicantemola.es
Síguenos en Twitter: @AlicanteMola
Y dale a 'Me gusta' en nuestra página de Facebook!
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:
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í:
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)
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)
Crea tu propia página web desde cero (IV)
Seguimos con el tutorial para crear una página web desde cero con PHP. En los capítulos anteriores vimos la manera de empezar a teclear código HTML para montar un formulario sencillo y darle un estilo propio con CSS. En esta ocasión vamos a ver cómo podemos enviar los datos de ese formulario a una base de datos (en adelante BD), para tener un formulario de registro completo.
Lo primero que vamos a hacer es crear nuestra BD desde phpMyAdmin. A esta herramienta accedemos desde nuestro navegador, si instalamos en su día WAMP correctamente, yendo a localhost (o localhost:8080 si cambiamos el número de puerto, recordad los primeros pasos en el primer capítulo de este tutorial) en nuestro navegador, veremos la herramienta phpmyadmin en la sección Tools, o directamente en la dirección localhost/phpmyadmin. La página principal tiene un aspecto así:
En el menú de la izquierda vemos las BD que tenemos creadas. Para crear una nueva, hacemos click en Bases de datos en el menú superior, y en la siguiente pantalla escribimos el nombre que queramos darle, por ejemplo Ejemplo, por seguir el nombre que llevamos de la web. En cotejamiento recomiendo elegir utf8_bin para que reconozca caracteres que utilizamos en nuestro idioma, como los acentos o las eñes.
Una vez creada nuestra BD, la veremos en el menú de la izquierda. Hacemos click en ella, que se llamará ejemplo, y accederemos a la pantalla para configurar esta BD. El siguiente paso es crear las tablas. No vamos a entrar en demasiados detalles acerca de las BD, pues en la carrera esta materia abarca dos asignaturas enteras. Podéis buscar más por Internet acerca de las BD relacionales, que son las que vamos a utilizar. Básicamente debéis saber esto:
- Por cada clase de nuestra web, tendremos una tabla. Por ejemplo, un usuario es una clase, así que tendremos una tabla llamada usuario. Las clases no tienen por qué ser cosas tangibles del mundo real, también pueden ser cosas abstractas. Por ejemplo, un país, una asignatura, etc.
- Un objeto es una entidad concreta de una clase. Por ejemplo, de la clase usuario tendremos como objetos a usuarios concretos: el usuario pepito, manolito, etc.
- Cada clase tiene atributos. Por ejemplo, un usuario puede tener nombre, apellidos, email, etc. Además, cada objeto se debe poder identificar y diferenciar del resto por uno de sus atributos de manera exclusiva. Por ejemplo, un usuario se puede identificar por su DNI, o por un identificador único. Este atributo identificativo y único será la clave primaria. Nosotros utilizaremos la ID, ya que no necesitamos DNI en nuestra web. Así, el usuario pepito podría ser el 1, el usuario manolito el 2... y nunca dos usuarios tendrán dos ID iguales.
- Pueden existir relaciones entre dos o más tablas. Las relaciones pueden ser parte de, o pertenece a. Por ejemplo, un usuario puede pertenecer a un país. Para saber qué relaciones necesitamos, en principio basta con usar el sentido común, y saber qué clases vamos a utilizar en nuestra web. Una clase relacionada con otra deberá tener una clave ajena, que será la clave primaria (ID) de la otra tabla. Por ejemplo:
usuario [país : clave ajena] --- pertenece a --> país [ID : clave primaria]
Esta relación quiere decir que la tabla usuario tendrá un atributo país, cuyo valor será la ID de uno de los países según su tabla. Por ejemplo, el usuario pepito pertenece al país España, ¿cómo hacer esta relación? Pues si España tiene como clave primaria (su ID) el 1, entonces pepito tendrá en su atributo país el número 1. Además, dependiendo de lo que queramos en cada relación, podemos restringir el número de entidades relacionadas. En este ejemplo, puede haber muchos usuarios que pertenezcan a España (es lo normal), pero a la inversa no tiene por qué ser así. En este caso, si pepito pertenece a España, sólo puede pertenecer a España, ya que únicamente tendrá su número 1 en su campo país, y no puede tener otros valores.
- Además, cada atributo debe ser de un tipo concreto de datos. Por ejemplo, el nombre puede ser una cadena de texto (string o varchar), la fecha de nacimiento será de tipo fecha (date), la ID (identificación) será un número entero (int)...
Para entenderlo mejor, vamos a ver el diagrama de clases para la BD que vamos a utilizar:
¿Cómo interpretar este diagrama? Sin entrar en detalles de lo que es un diagrama de clases y cómo se utiliza, vemos que cada recuadro es una tabla. Tenemos cuatro tablas: usuario, país, asignatura, y usuario-asignatura. Cada tabla tiene sus atributos, con su nombre a la izquierda y su tipo de dato a la derecha. Además, los atributos que tienen un signo de exclamación a la izquierda son los identificadores utilizados como claves primarias, y que no se podrán repetir entre objetos de la misma clase. Los atributos subrayados indican que son claves ajenas, relaciones a otras tablas. ¿A qué tablas? A aquellas a las que van dirigidas las flechas. Por ejemplo, un usuario está relacionado con país, podríamos decir un usuario pertenece a un país. ¿Y por qué no al revés: un país pertenece a un usuario? Primero, porque no tiene sentido, y segundo, porque la relación va de su origen a su destino, el atributo país existe en usuario, y no el atributo usuario en país. Por último, tenemos una tabla un poco rara llamada usuario-asignatura, que nos servirá de intermediario entre usuario y asignatura, de manera que podamos hacer que un usuario pueda tener varias asignaturas, y viceversa, que una asignatura tenga varios alumnos (algo que no pasa con usuario y país). Así, podríamos tener para usuario-asignatura el usuario 1 con la asignatura 1, el usuario 1 con la asignatura 2, el usuario 3 con la asignatura 2... pero nunca dos pares iguales, sólo podrá existir una vez el par 1-1, el par 1-2, etc. Recordad que estos valores de 1, 2, 3... son los identificadores (ID) de la tabla usuario, país o asignatura.
Bueno, pero vayamos al grano. Ahora hay que transformar ese diagrama de arriba a algo que funcione en phpmyadmin. Por fin vamos a crear las tablas. Para ello, si habíamos hecho click en la BD ejemplo del menú de la izquierda, lo primero que aparece es la opción de crear una tabla. Vamos a empezar por la de usuario, así que le ponemos de nombre usuario, y número de columnas 7, ya que una columna es un atributo de los que vimos antes. Ahora hay que ir rellenando cada atributo/columna según vimos. Por ejemplo la primera se llamará id, y será de tipo int (entero), será clave primaria (índice: PRIMARY), y además lo marcaremos como autoincremental (A_I) para que la ID se ponga automáticamente por cada usuario creado más adelante, de manera incremental y empezando por el 1. En resumen, la tabla usuario os tiene que quedar así:
Los atributos que eran de tipo texto los hemos puesto de tipo varchar con una longitud máxima de 255 caracteres. La diferencia entre varchar y text, es que text sirve más para textos grandes, cosa que por ahora no necesitamos, pues para el nombre, email, password o foto (pondremos su URL) no necesitamos tanta longitud, así ahorramos espacio en la BD. Además, hemos marcado como Nulo los atributos fecha_nac, pais y foto, significando esto que estos tres atributos no son obligatorios, y podrán ser nulos. El resto sí que serán obligatorios, así que no los marcamos como nulos. Por último vemos que en el atributo pais hemos puesto índice INDEX, esto es porque lo utilizaremos como clave ajena para relacionarla con la tabla pais.
Ahora creamos las otras tres tablas de la misma manera, siguiendo el modelo del diagrama de clases. Las tablas pais y asignatura serán iguales, teniendo su id como en usuario, y el nombre será también varchar de longitud 255. Para la tabla usuario_asignatura tenemos dos atributos que de tipo int, y ambos serán de índice INDEX para relacionar cada uno con usuario y con asignatura respectivamente.
Una vez creadas las cuatro tablas, vamos a relacionarlas. Empezamos yendo a la tabla usuario haciendo click en ella en el menú de la izquierda, y después hacemos click en la opción Vista de relaciones que hay bajo la tabla con sus siete atributos. En la siguiente pantalla, vemos que el atributo pais tiene un desplegable para elegir su relación, así que elegimos la relación pais.id, pues será la ID del país con quien estará relacionado:
Guardamos los cambios y vamos ahora a la tabla usuario_asignatura para hacer lo mismo, desde Vista de relaciones, relacionamos usuario con usuario.id, y asignatura con asignatura.id. Puede darse el caso de que alguno de estos dos atributos no tenga su desplegable y no podamos elegir su relación. Esto suele ocurrir porque no se guarda bien el índice INDEX que pusimos anteriormente al crear la tabla. Para solucionarlo, desde la pantalla de la tabla, ponemos el cursor sobre la palabra Más que hay a la derecha del todo, y hacemos click en Agregar índice en el atributo donde nos falte:
Volvemos a Vista de relaciones de usuario_asignatura y añadimos las dos relaciones como hemos comentado antes, y guardamos. Las opciones extra que vemos al crear relaciones (on delete 'restrict', on update 'restrict') las dejamos como están, esto servirá para restringir el borrado de tablas si hay relaciones. Por ejemplo, si queremos borrar el país España pero hay usuarios que pertenecen a España, no podremos borrar este país. Primero habría que borrar los usuarios que pertenecen a España, y luego el país.
Y con todo esto ya tenemos creada nuestra BD Ejemplo, aunque por ahora sólo tenemos el esquema, y ningún dato aún. Podemos añadir datos a mano desde phpmyadmin haciendo click en Insertar en el menú superior que hay por cada tabla, o mediante código SQL en la opción con el mismo nombre, pero no vamos a entrar en estos detalles, ya que los datos los meteremos desde la web. Además siempre podemos añadir más tablas, atributos y relaciones, pero por ahora lo dejamos así, algo sencillo para hacer que nuestra web nos sirva para gestionar una lista de usuarios por asignaturas y países.
En el siguiente capítulo veremos cómo programar con código PHP la funcionalidad de añadir los datos del formulario a la BD que hemos creado, y cómo consultar estos datos desde la web.
martes, 6 de enero de 2015
Crea tu propia página web desde cero (III)
En el artículo anterior vimos cómo crear un formulario web con el que recoger datos de un usuario como su nombre, contraseña, etc. Esta vez vamos a ver cómo darle un toque más atractivo a la página, es decir, darle un estilo con CSS. Veremos aspectos básicos de CSS para cambiar los márgenes de los elementos de la web, los colores, tipos y tamaños de letra, etc. Y también veremos como utilizar el framework Bootstrap, que utiliza un estilo propio de manera fácil con la que nos podemos olvidar de complicarnos la vida en algunas cosas de diseño. Además, con Bootstrap haremos que nuestra web sea responsive, es decir, que se adapte a cualquier dispositivo móvil.
CSS es un lenguaje que define el estilo de una página web. Se encarga de especificar cómo será el diseño y estilo de cada elemento de la web. Y cada uno de sus elementos los debemos identificar previamente en nuestro HTML, para así especificar en CSS cómo deben ser. Por ejemplo, en el formulario que hicimos en el post anterior, teníamos un div marcado como class="encabezado", que por ahora sólo contenía el título Mi primera web, sin ningún estilo, simplemente en color negro y alineado a la izquierda. Podemos identificar ese div con el atributo id con un nombre que deberá ser único en toda la página (en todo su fichero .html), o con el atributo class, de manera que podrá haber varios elementos con la misma clase y así decirle al CSS cómo debe ser ese div. Por ejemplo:
<div class="encabezado">
<h1>Mi primera web</h1>
</div>
En este caso, el div está marcado como class="encabezado". Esto quiere decir que será de la clase encabezado, y podrá haber más elementos marcados con la misma clase. Así, cuando le digamos al CSS que la clase encabezado deberá tener un cierto estilo, todos los elementos de esa clase seguirán ese estilo. Sin embargo, podemos tener lo siguiente:
<div id="encabezado">
<h1>Mi primera web</h1>
</div>
En este caso el encabezado está como identificador (id), de manera que en el CSS se marcará el estilo del elemento encabezado, que será único en toda la página. Para dar estilo a un elemento como el div anterior, se puede hacer de dos maneras:
1- Estilo incrustado en el HTML. Esta es la forma a priori más sencilla pero menos recomendada, y consiste en añadir el atributo style a la etiqueta div (para este ejemplo), y especificar qué estilo queremos darle. Esta manera puede ser útil cuando queremos dar un estilo rápido y específico a un elemento concreto y no nos queremos complicar mucho. La manera sería:
<div class="encabezado" style="background-color: red; margin-left: 50%; text-align: center;">
<h1>Mi primera web</h1>
</div>
En este caso, le hemos dicho que ese div tenga como color de fondo el rojo, que el margen por la izquierda sea del 50% del ancho de la página, y que la alineación del texto sea centrada. Pero podemos añadir muchos más estilos, por lo que puede ser engorroso añadir tantos dentro de la propia etiqueta, siendo cada propiedad separada por punto y coma, y cada propiedad poniendo su nombre clave seguido de dos puntos y el valor.
2- Estilo en una hoja de estilos CSS externa. Es la manera más adecuada y habitual. Consiste en escribir un fichero con extensión .css en la que escribimos todos los estilos que queramos para la web. Podemos tener varias hojas de estilos para una misma web, y cambiar de estilo en el propio navegador. Lo ideal sería tener una carpeta css en nuestro directorio raíz del proyecto, y ahí incluir cada fichero .css. Por ejemplo, creamos un fichero llamado estilo.css y lo metemos en la carpeta css. También es habitual tener una carpeta llamada img donde incluir todas las imágenes que vayamos a utilizar.
En la carpeta css meteremos los ficheros .css, y en la carpeta img las imágenes que vayamos a utilizar.
Para poner el mismo estilo de color rojo de fondo, margen 50% a la izquierda y texto centrado, en el fichero estilo.css escribimos:
.encabezado
{
background-color: red;
margin-left: 50%;
text-align: center;
}
Así le estamos diciendo a nuestra hoja de estilos que la clase encabezado (al ser una clase se pone un punto delante) tenga las tres propiedades que queremos con sus respectivos valores. Pero además, tenemos que decirle a nuestro index.html dónde está esa hoja de estilos. Para ello, en nuestro encabezado <head></head>, ponemos:
<link href="css/estilo.css" rel="stylesheet">
Para verlo un poco más claro, en la siguiente imagen se ve el código del index.html, donde se ve con la etiqueta <link> dónde está la hoja de estilos (en la carpeta css, y se llama estilo.css). Debemos borrar la línea style="..." que pusimos anteriormente, pues sería repetitivo y no comprobaríamos el funcionamiento del estilo con el archivo .css.
Si lo hemos hecho correctamente, al refrescar nuestra web veremos algo así:
Gracias al fondo rojo vemos claramente lo que ocupa el div. También podemos observar que este encabezado empieza a mitad de página: esto quiere decir que funciona bien el margen que pusimos del 50%, pues empieza al 50% de página por la izquierda. Y por último, el texto Mi primera web queda centrado dentro del div.
Como se puede intuir, existen multitud de propiedades de diseño que podemos cambiar a nuestros elementos de la web. Como son muchos, aquí no los vamos a ver todos, pero os dejo el enlace del W3Schools donde se muestran ejemplos y explicaciones de cada uno:
Otra cosa que debemos haber tenido en cuenta es que en el ejemplo anterior, hemos dado un estilo a una clase, marcada como class="encabezado". Podríamos tener varios elementos de la misma clase, y todos seguirían el estilo marcado por nuestro CSS. Pero también podemos dar estilos a elementos concretos marcados con su identificador (id), o a elementos marcados por etiquetas. A esto se conoce como selectores, y hay de varios tipos, pero básicamente utilizaremos:
.clase: Para especificar el estilo a una clase, cada elemento debe tener el atributo class="clase", diciéndole de qué clase es, y en el CSS, el nombre de esa clase debe estar precedida por un punto.
#id: Si el elemento es único y está identificado con id="identificador", entonces en el CSS irá precedido por la almohadilla.
elemento: Si es un elemento genérico especificado por su etiqueta, se pondrá su nombre sin más en el CSS. Por ejemplo, podemos querer que los elementos de texto marcados con párrafos <p> tengan cierta fuente tipográfica y estilo, o lo mismo para los <div>, <h1>, etc.
Para cada elemento al que queramos dar estilo, sus propiedades deberán ir incluidas entre llaves, como vimos en el ejemplo anterior. Aquí puedes ver todos los selectores con sus explicaciones y ejemplos. Os recomiendo que investiguéis y probéis con todo tipo de selectores, atributos, propiedades, etc. para ver cómo se comportan vuestros elementos de la web.
...
Una vez visto esto, para dar un estilo básico a nuestra web no necesitamos mucho más. Vamos a darle un estilo a nuestro ejemplo que anteriormente tenía un simple fondo blanco y las letras eran muy básicas y en negro. Por una parte debemos escribir bien el index.html para marcar cada elemento con su id o clase, y por otra parte escribir en el fichero estilo.css las propiedades que queramos tener de estilo para nuestros elementos del formulario. El código del index.html sólo incluye el bloque <body></body>. En negrita se muestran los elementos a los que se da estilo en el CSS.
index.html
<body>
<div class="encabezado">
<h1>Mi primera web</h1>
</div>
<div class="cuerpo">
<form id="registro" name="registro" action="registro.php" method="post">
<h2>Registro de usuario</h2>
<hr>
<h3>Introduce tus datos personales:</h3>
<p>
Nombre de usuario:<br>
<input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre" required>
</p>
<p>
E-Mail:<br>
<input type="email" id="email" name="email" placeholder="email@ejemplo.com" required>
</p>
<p>
Contraseña:<br>
<input type="password" id="contrasena" name="contrasena" required>
</p>
<p>
Fecha de nacimiento:<br>
<input type="date" id="fecha-nacimiento" name="fecha-nacimiento">
</p>
<p>
Nacionalidad:<br>
<select id="nacionalidad" name="nacionalidad">
<option value="0">Elije tu país</option>
<option value="1" selected>España</option>
<option value="2">Resto de Europa</option>
<option value="3">Resto del mundo</option>
</select>
</p>
<p>
Foto:<br>
<input type="file" id="foto" name="foto">
</p>
</p>
<p>
<input type="checkbox" id="acepto" name="acepto" required>
Acepto los términos y condiciones
</p>
<hr>
<input class="boton-enviar" type="submit" id="enviar" value="Enviar datos">
</form>
</div>
</body>
estilo.css:
body
{
background-color: #33CCFF;
}
.encabezado
{
background-image: url("../img/fondo-encabezado.jpg");
margin-bottom: 5%;
height: 100px;
text-align: center;
color: yellow;
font-family: verdana;
}
.cuerpo
{
background-color: white;
margin-left: 25%;
margin-right: 25%;
padding: 5% 5% 5% 5%;
font-family: courier;
text-align: center;
}
p
{
font-size: 12px;
}
h2
{
color: blue;
}
input[type=submit]
{
background-color: yellow;
border: none;
padding: 2% 2% 2% 2%;
}
input[type=submit]:hover
{
background-color: orange;
}
Vamos a analizar un poco estos códigos.
body - Lo único que le hemos indicado es el color de fondo del bloque <body></body>.
.encabezado - A esta clase (le hemos puesto el punto delante para indicar que es un class) le hemos indicado una imagen de fondo, que estará en la carpeta img que dijimos anteriormente, siguiendo la nomenclatura url("ruta de la imagen"); También tiene un margen inferior del 5%, así que lo que haya por debajo tendrá una pequeña separación de margen. La propiedad height indica que el alto de este encabezado será de 100 píxels. Nótese que las unidades se pueden indicar en porcentaje (%) o en píxels concretos (px). La alineación del texto será centrada, el color del texto amarillo y la fuente tipográfica Verdana. En la web que indicamos antes del W3Schools se puede mirar más sobre las fuentes, colores, etc.
.cuerpo - Esta clase tendrá un color blanco de fondo, márgenes del 25% a izquierda y derecha, por lo que quedará el bloque centrado con espacios a los lados, separación del 5% por todos los lados, la fuente será Courier y el texto estará centrado. Nos paramos a explicar un poco las propiedades que indican posición (top, bottom, left, right). Cuando queremos poner un margen (margin) o un espacio de separación (padding), podemos indicar el lado concreto de esa propiedad. Por ejemplo, margin-top, o padding-left... Pero también podemos indicarlo todo en una sola propiedad. En nuestro ejemplo tenemos padding: 5% 5% 5% 5%, esto quiere decir que en las cuatro direcciones el espacio de separación será del 5%. Pero también podríamos haber puesto padding-top: 5%; padding-bottom: 5%; padding-left: 5%; padding-right: 5%;
p - A la etiqueta <p> le indicamos que el tamaño de letra será de 12 píxels.
h2 - Los títulos etiquetados con <h2> serán de color azul. Los colores se pueden poner como nombre o como código hexadecimal (ver más información en la web del W3Schools).
input[type=submit] - Dijimos en el post anterior que los inputs pueden ser de varios tipos. Uno de ellos es submit, que viene a ser un botón que envía datos al servidor. Así que en este caso en nuestro CSS estamos especificando el estilo sólo para este tipo de inputs. El botón será de color amarillo, le hemos quitado el borde y la separación será del 2% por todos los lados.
input[type=submit]:hover - Además, para este mismo tipo de input, cuando pasemos el cursor por encima (hover), haremos que cambie su color a naranja.
El resultado de aplicar este CSS a nuestra web es el siguiente:
Hemos visto un poco sobre CSS, pero lo recomendable es que el usuario pruebe por su cuenta todas las posibilidades que crea convenientes y que mire en la web del W3Schools, pues hay muchas propiedades y palabras claves que no merece la pena poner aquí.
Vamos a ver brevemente el framework Bootstrap. Se trata de una herramienta que nos da los estilos ya hechos, muy atractivos y listos para utilizar. Para ello podemos descargarnos los archivos necesarios de la web oficial o simplemente añadir un enlace a nuestro index.html, al igual que hicimos para nuestro estilo.css, pero para vincular a los estilos de Bootstrap que hay online:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Debemos poner la primera línea <link... para el estilo en sí (observemos que es un .css), y el segundo es un enlace a un archivo JavaScript (.js) necesario para el funcionamiento de algunos elementos de este framework.
No vamos a entrar en demasiados detalles sobre el funcionamiento de Bootstrap, podemos ver en su web las secciones de componentes, CSS, etc. y ver cómo aplicar algunos elementos. Para nuestro ejemplo, si quitamos la línea <link... que pusimos con nuestro estilo.css y la cambiamos por las líneas comentadas antes de Bootstrap, tenemos lo siguiente:
Vemos que el estilo es propio de Bootstrap, con sus tipos de letra, pero no tiene márgenes y es bastante sencillo. Podemos arreglarlo un poco, para ello es recomendable descargarse los archivos de Bootstrap y descomprimir la carpeta en nuestro proyecto. Es recomendable renombrarlo a bootstrap, quitando el sufijo que indica la versión. Así, en nuestra carpeta Ejemplo tendríamos las carpetas bootstrap, css e img. Dentro de la carpeta bootstrap hay varias carpetas y archivos. Debemos ir a la carpeta dist, donde hay varias carpatas más. Vamos a su carpeta css y copiamos al menos el archivo bootstrap.css (no confundir con el bootstrap.css.map) a nuestra carpeta propia css. También es recomendable copiar tal cual las carpetas js y fonts a nuestra carpeta raíz, uniéndose así a las de bootstrap, css e img, ya que hay elementos de Bootstrap que necesitan de esos archivos.Volvemos a cambiar nuestra línea <link> para tenerla así:
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" title="Bootstrap">
<link href="css/estilo.css" rel="alternate stylesheet" type="text/css" title="Estilo propio">
Con estas dos líneas estamos indicando que el estilo principal será el bootstrap.css, al que llamamos Bootstrap, y el estilo alternativo será nuestro estilo propio estilo.css. Podemos cambiar de estilo en nuestro navegador, por ejemplo desde Firefox vamos al menú, y en Ver accedemos a Estilo de página, donde elegiremos uno u otro, o incluso podemos ver la web sin ningún estilo.
Si probamos nuestra web, la veremos igual que antes, pues ese archivo bootstrap.css es el mismo que el que hay online y probamos antes sin descargarnos nada. Lo que debemos hacer es añadir diseños propios a este fichero, es decir, abrimos el archivo css/bootstrap.css, que tiene miles de líneas, y al final del todo añadimos nuestros propios estilos. Por ejemplo, podemos añadirle los bloques que pusimos de .encabezado y .cuerpo. Si lo copiamos tal cual, nuestra web cambiará así:
Es casi como nuestro estilo.css pero con algunas diferencias, ya que los diseños de los elementos body, p, h2, input... ya están predefinidos en el fichero bootstrap.css, pero podríamos buscarlos en el fichero y cambiarlos.
Vamos a modificar de nuevo nuestro index.html para añadir algunas propiedades propias de Bootstrap a nuestro formulario, para darle un aspecto algo más atractivo a los inputs y botones. En negrita se indican los atributos propios de Bootstrap que reconoce para darles estilo. Fijaos que hemos sustituido los bloques <p> por bloques <div class="form-control"> que es como lo hace Bootstrap:
<body>
<div class="encabezado">
<h1>Mi primera web</h1>
</div>
<div class="cuerpo">
<form class="form-group" id="registro" name="registro" action="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="contrasena" name="contrasena">
</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="nacionalidad" class="form-control" name="nacionalidad">
<option value="0">Elije tu país</option>
<option value="1" selected>España</option>
<option value="2">Resto de Europa</option>
<option value="3">Resto del mundo</option>
</select>
</div>
<div class="form-group">
Foto:<br>
<input type="file" id="foto" name="foto">
</div>
<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>
</div>
</body>
Como Bootstrap tiene mucho código propio, os recomiendo que miréis su guía y probéis. Hay ejemplos de elementos de formularios con los que podéis practicar. El resultado de aplicar este código sería:
Ahora vemos que los inputs y el botón de enviar datos son distintos. Lo dicho, como hay infinitas posibilidades, debéis practicar y probar cosas propias mirando los ejemplos y guías de la web de Bootstrap.
Y eso es todo. Aunque el artículo puede haber resultado algo largo, en realidad es muy poco lo que se ha visto sobre CSS y Bootstrap, ya que los temas son muy extensos. Pero al menos hemos visto algo con lo que dar un estilo propio y básico a nuestra web. Os recomiendo que practiquéis y cambiéis cosas, márgenes, fondos, colores, tipos de letra, tamaños, etc. Al final el diseño y maquetación de una web consiste en ir probando hasta que nos gusta lo que vemos.
En el próximo artículo veremos por fin cómo crear una base de datos con MySQL y utilizarla para enviar datos al servidor con PHP, pudiendo darle uso a nuestro formulario de registro.
Extra:
Suscribirse a:
Entradas (Atom)