Imagen que muestra un ejemplo de un formulario con varios campos en una página web.

Más adelante verás que en nuestro reto final crearemos una web que utilizaréis dos tipos de usuarios:

En resumen, necesitas que tu página web realice dos acciones sobre la base de datos: insertar datos en la BD y recoperarlos. ¿Cómo realizarás esto? Mediante código PHP. ¡No es difícil! Para ello te presentamos este ejercicio guiado que te mostrará los comandos necesarios para realizar estas operaciones. Sigue los ejemplos ejecutándolos en tu recién estrenado servidor XAMPP.

En este ejercicio guiado vamos a basar nuestro ejemplo en una base de datos utilizada para almacenar la información de los libros de una biblioteca. Usarás tu web para recopila datos de nuevos libros a añadir y para mostrar después los existentes en la web:

Crea la base de datos y la tabla

Para poder insertar valores en una base de datos y extraerlos posteriormente, tendrás primero que crear dicha base de datos y la tabla donde se almacenarán los datos.

Para esto, recuerda los pasos seguidos en el punto anterior y:

Crea una base datos llamada "biblioteca".
Crea una tabla llamada "libros" que contendrá los campos:
1. Título: será un campo de tipo texto.
2. Autor: será un campo de tipo texto.
3. Categoría: será un campo de tipo texto, con valores cerrados a elegir entre: [cómic, novela, educación, poesía, ensayo]
4. Año: será un campo de tipo numérico.
5. ISBN: será un campo de tipo texto.

Insertar datos: el formulario HTML

Para ingresar datos en una nueva tabla de la base de datos, primero necesitarás una página HTML que recopile esos datos del usuario. El siguiente código HTML hace eso y pasa la información a un script PHP:

<form action="insert.php" method="post">
    Usuario: <input type="text" name = "user" /><br/>
    Contraseña: <input type="password" name = "pass" /><br/>
    Título: <input type="text" name = "field1" /><br/>
    Autor: <input type="text" name = "field2" /><br/>
    Categoría: <select name="field3">
        <option value="comic">Cómic</option>
        <option value="novela">Novela</option>
        <option value="educacion">Educación</option>
        <option value="poesia">Poesía</option>
        <option value="ensayo">Ensayo</option>
      </select><br/>
    Año: <input type="number" name = "field4" /><br/>
    ISBN: <input type="text" name = "field5" /><br/>
    <input type="submit" />
</form>

Investiga las siguientes cuestiones:

¿Por qué crees que el campo Contraseña utiliza type=password mientras los demás son type=text?
¿Para qué se utiliza la etiqueta select?
¿Qué muestra en pantalla el último elemento input?
Consulta la documentación HTML sobre etiquetas HTML y busca ¿qué efecto tendría utilizar la etiqueta input type="file"? (te será muy útil para el reto)

El código HTML anterior mostrará al usuario 7 campos de texto, en los cuales el usuario puede ingresar datos y un botón Submit (Enviar). Al hacer clic en el botón Submit, los datos enviados por el usuario se pasarán a un script llamado insert.php.

Insertar datos: el script PHP

El script PHP a utilizar para insertar en la base de datos los datos recopilados en el formulario, puede tener una estructura como la siguiente:

<?php
$database = "biblioteca.db";
$username = $mysqli->real_escape_string($_POST['user']);$password = $mysqli->real_escape_string($_POST['pass']);//Conectamos con la BD indicando su nombre y el usuario y la contraseña indicados.$mysqli = new mysqli("localhost", $username, $password, $database);
$field1 = $mysqli->real_escape_string($_POST['field1']);
$field2 = $mysqli->real_escape_string($_POST['field2']);
$field3 = $mysqli->real_escape_string($_POST['field3']);
$field4 = $mysqli->real_escape_string($_POST['field4']);
$field5 = $mysqli->real_escape_string($_POST['field5']);

$query = "INSERT INTO table_name (titulo, autor, categoria, anyo, isbn)
            VALUES ('{$field1}','{$field2}','{$field3}','{$field4}','{$field5}')";
//Enviamos el comando SQL
$mysqli->query($query);//Cerramos la conexión  a la BD
$mysqli->close();
?>

En el código utilizado observa y analiza:

Las variables en PHP comienzan por $
El comado real_escape_string del objeto $mysqli (se llama al método del objeto mediante ->) transforma los valores recogidos para poder ser entendidos y utilizados en SQL. A la vez, verifica los datos introducidos en el formulario proporcionando seguridad ante un ataque de inyección de código SQL malicioso.
Con la cadena $_POST['field1'] almacenamos en la veriable PHP la información del campo ‘field1’ a través del método post proveniente del formulario.
Con el usuario y la contraseña abrimos la conexión a la base de datos mediante el comando new mysqli. La conexión abierta se almacena en la variable objeto $mysqli.
Con los valores recogidos en las variables PHP creamos la cadena de inserción SQL como aprendiste en el REA 4 y se almacena en la variable $query.
Con el comando query del objeto $mysqli lanzamos la consulta sobre la base de datos.
¡No olvides cerrar la conexión con close().
No olvides que este código lo guardarás en un fichero aparte llamado insert.php. Este fichero deberás incluirlo en la misma carpeta (directorio) donde tengas almacenado el fichero .html.

Una vez que el usuario envía la información, el script insert.php la guardará en la tabla de la base de datos. ¡Pon en funcionamiento este código de inserción en la base de datos y genera al menos 3 entradas en la tabla libros!

Recuperar datos: Resultado en la web

Ahora, deseamos generar toda la información de la base de datos para que el usuario pueda verla en la página.

Lo primero que necesitarás hacer es una consulta a la base de datos. Recuerda, de SQL, que el primer comando que necesitarás usar es la sentencia SELECT FROM que, en este ejemplo, tiene la siguiente sintaxis: SELECT * FROM libros;

Podemos elegir mostrar los datos que recuperemos en forma de una tabla en la página HTML. Para ello podemos usar un script PHP dentro del código HTML de la página que, mediante un bucle, vaya tomando los valores y construyendo la estructura HTML de la tabla. Observa esta solución propuesta:

<html>
<body>
<?php 
$username = "username"; 
$password = "password"; 
$database = "biblioteca.db"; 
$mysqli = new mysqli("localhost", $username, $password, $database); 
$query = "SELECT * FROM table_name";


echo '<table border="0" cellspacing="2" cellpadding="2"> 
      <tr> 
          <td> <font face="Arial">Título</font> </td> 
          <td> <font face="Arial">Autor</font> </td> 
          <td> <font face="Arial">Categoría</font> </td> 
          <td> <font face="Arial">Año</font> </td> 
          <td> <font face="Arial">ISBN</font> </td> 
      </tr>';

if ($result = $mysqli->query($query)) {
    while ($row = $result->fetch_assoc()) {
        $field1name = $row["titulo"];
        $field2name = $row["autor"];
        $field3name = $row["categoria"];
        $field4name = $row["anyo"];
        $field5name = $row["isbn"]; 

        echo '<tr> 
                  <td>'.$field1name.'</td> 
                  <td>'.$field2name.'</td> 
                  <td>'.$field3name.'</td> 
                  <td>'.$field4name.'</td> 
                  <td>'.$field5name.'</td> 
              </tr>';
    }
    $result->free();
} 
?>
</body>
</html>

Aquí puedes aprender cómo:

Se configuran el nombre de usuario y la contraseña del usuario administrador de la base de datos para poder conectar y sacar los datos.
Se establece la conexión con la BD.
Se crea la consulta select y se almacena en la variable $query.
Se usa el comando echo para incluir en el programa PHP cadenas de texto que se deben interpretar solo texto. Así, al interpretarse PHP se devolverá como texto en el fichero HTML final el código HTML que incluía el programa en PHP. Lo que se va a mostrar, en este caso el código HTML de la tabla, se debe limitar por comillas simples: '. En el primer echo se están creando la tabla y sus los encabezados.
Se usa la estructura if para comprobar que realmente se obtienen datos al realizar la consulta sobre la BD mediante el comando query del objeto $mysqli. stos datos recogido se guardan en la variable $result.
Se utiliza ahora un bucle while que va tomando cada uno de los valores recogidos en $result mediante el comando fetch_assoc() que devuelve una fila del resultado. Cada valor de la base de datos se asigna a una variable.
Después, se van incluyendo estos valores recogidos a la vez que se construye una celda en la tabla para cada uno de ellos y una fila para la tupla en conjunto, mediante los comados HTML tr y td.
Finalmente, liberamos la memoria de la variable, mediante el comado PHP free() y cerramos el script PHP con ?>

Este código imprimirá el contenido de la tabla y agregará una fila adicional para cada registro en la base de datos, dando formato a los datos a medida que se imprimen. Ponle un título a la página, dale formato atractivo con los conocimientos que has adquirido en los apartados anteriores y muestra a la clase tu página de ejemplares de la biblioteca. ¡Atrévete a añadirle un estilo CSS!