CRUD PHP Y Mysql PDF

Preview

Summary

CRUD PHP Y Mysql...

Description

En este tutorial vamos a ver cómo crear una aplicación CRUD con PHP y MySQL. Crearemos tanto el backend como el frontend de la aplicación. No usaremos ningún framework, sino las extensiones y los métodos nativos de PHP. La aplicación soportará la lectura, la escritura, la actualización y el borrado de registros en la base de datos. Para las vistas usaremos únicamente HTML y CSS. Este es un tutorial de introducción especialmente creado para aquellas personas que se estén iniciando con el desarrollo de aplicaciones con PHP. Por ello, no crearemos un gestor de rutas ni usaremos composer. Tampoco dividiremos la aplicación en modelos, vistas y controladores tal y como dicta el patrón de diseño MVC, siendo algo que dejaremos para otro tutorial. Contenidos    



1 2 3 4

Introducción Configuración del Host Creación de la plantilla HTML Configuración de la base de datos o 4.1 Crea la base de datos o 4.2 Crea el script de instalación o 4.3 Ejecuta el script de instalación 5 Creación de la aplicación CRUD o 5.1 CRUD (Create): Creación de alumnos  5.1.1 Formulario HTML  5.1.2 Código PHP  5.1.3 Ataques XSS o 5.2 CRUD (Read): Lista de alumnos  5.2.1 Código PHP  5.2.2 Tabla HTML  5.2.3 Búsqueda

5.2.4 Acciones o 5.3 CRUD (Update): Actualización de alumnos  5.3.1 Código PHP (Lectura)  5.3.2 Formulario HTML  5.3.3 Código PHP (Actualización) o 5.4 CRUD (Delete): Borrado de alumnos  5.4.1 Código PHP  5.4.2 Código HTML 6 Protección CSRF 7 Conclusión 

 

Introducción Vamos a crear una sencilla aplicación que permita gestionar los datos de los alumnos de un colegio. Necesitamos agregar las funcionalidades que nos permitan crear un alumno, mostrar una lista de alumnos, editar los datos de un alumno y eliminar un alumno. Intentaremos usar las funcionalidades más recientes posibles de PHP y tomaremos ciertas consideraciones de seguridad, aun que este tutorial no deja de ser de aprendizaje. De todos modos, antes de continuar, es recomendable que tengas unos conocimientos básicos de HTML y de PHP: 

Si nunca has usado HTML, consulta primero la guía definitiva de HTML para aprender los conceptos más importantes.



Si nunca has usado PHP, consulta la guía definitiva de PHP, en donde además de aprender tus primeros pasos, verás cómo instalar y configurar PHP en tu sistema operativo.



Para gestionar las bases de datos MySQL usaremos phpMyAdmin, que es una herramienta que se instala con paquetes como Wamp, XAMPP o MAMP, aunque también puedes usar herramientas como Sequel Pro. De todos modos, también veremos cómo crear todas las consultas MySQL manualmente.

Lo primero que veremos en este tutorial será cómo conectarnos a una base de datos MySQL con PHP usando PDO (PHP Data Objects). Seguidamente crearemos un script que cree tanto la base de datos como las tablas de la misma. Luego crearemos un formulario HTML que envíe datos al servidor. En el servidor, usaremos sentencias preparadas para insertar registros en la base da datos. Finalmente obtendremos los datos de la base de datos y los mostraremos en una tabla HTML. Puedes encontrar el código de la aplicación CRUD en GitHub.

Configuración del Host Lo primero que tenemos que hacer es crear un host virtual en nuestro sistema, que es en donde crearemos el proyecto. Usaremos el servidor Apache, que se instala con Wamp, que es la herramienta que utilizo en este proyecto. Si no sabes cómo crear un host virtual, consulta el tutorial en donde explico cómo crear un host virtual con Apache. En caso de que uses algún paquete todo en uno, consulta una de estas guías. 

Host virtual con Wamp: Cómo crear un host virtual con Wamp



Host virtual con MAMP: Cómo crear un host virtual con MAMP



Host virtual con XAMPP: Cómo crear un host virtual con XAMPP

Vamos a crear el host virtual tutorial-crud.localhost. En mi caso, he asignado el directorio /hosts/tutorial-crud al host virtual, pero puedes asignar el que prefieras.

Creación de la plantilla HTML Primero tenemos que crear una plantilla HTML para la aplicación junto con un pequeño menú. No es el objetivo de este tutorial el de aprender CSS, por lo que nos limitaremos a usar Bootstrap para los estilos. En el interior del directorio del host virtual, crea un archivo vacío llamado index.php. En teoría deberíamos agregar el código HTML de la aplicación en el archivo index.php, tal que así:



Aplicación CRUD PHP

Aplicación CRUD PHP

A continuación vamos configurar la base de datos de la aplicación.

Configuración de la base de datos Para crear la base datos puedes usar alguna aplicación como MySQL Workbench, SequelPro, Adminer o phpMyAdmin. En este tutorial, primero crearemos la base de datos mediante una consulta SQL.

Crea la base de datos

Crea un directorio en la aplicación llamado /data y, en su interior, crea un archivo vacío llamado, migracion.sql. En su interior, agrega esta consulta:

CREATE DATABASE tutorial_crud; use tutorial_crud; CREATE TABLE alumnos ( id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY, nombre VARCHAR(30) NOT NULL, apellido VARCHAR(30) NOT NULL, email VARCHAR(50) NOT NULL, edad INT(3), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );

Lo que hemos hecho en este script es crear la base de datos, a la que llamamos tutorial_crud. Luego usamos la sentencia use para seleccionar la base de datos que hemos creado y luego creamos la tabla alumnos junto a sus campos. Primero definimos el nombre de los campos y seguidamente su tipo: 





Usamos int(11) para definir campos que contengan un número entero con una longitud de hasta 11 números. Usamos varchar(n) para definir cadenas que contengan hasta n caracteres. Usamos TIMESTAMP para definir un campo que contenga una fecha en formato YYYY-MM-DD HH:MI:SS.

Los campos created_at y updated_at guardarán la fecha de creación y de actualización de los alumnos respectivamente. Además, también hemos usado la sentencia NOT NULL para evitar que los campos puedan estar vacíos. No será posible insertar un registro en la tabla si un campo NOT NULL está vacío.

También asignamos la fecha actual como la fecha por defecto de los campos created_at y updated_at mediante la sentencia DEFAULT y el valor CURRENT_TIMESTAMP. Si quieres puedes probar la consulta antes de usarla en el código. Para ello sigue estos los pasos que ves a continuación. 

Accede a phpMyAdmin o a la herramienta que utilices:



Luego accede a la sección que permite ejecutar consulta SQL y copia y pega la consulta anterior:



Luego ejecuta la consulta haciendo clic en continuar en el caso de phpMyAdmin. Esta consulta debería crear la base de datos.

Si has creado la base de datos y no ha habido errores, significa que todo funciona como debería. Seguidamente borra la base de datos, ya que lo que pretendemos es crearla mediante un script PHP.

Crea el script de instalación

Vamos a crear un script que nos permita conectarnos a MySQL para crear la base de datos. Podemos usar la interfaz PDO (PHP Data Objects) o podemos usar MySQLi. La diferencia consiste en

que con PDO nos podemos conectar a más bases de datos que no necesariamente han de ser MySQL, siendo más versátil que MySQLi, que solamente funcionará con bases de datos MySQL. Además, PDO es más extensible y abierto de cara al futuro, haciendo que las aplicaciones sean más fáciles de mantener. El constructor de la clase PDO necesita que le pasemos el host de conexión a la base de datos, el nombre de usuario MySQL, la contraseña y finalmente las opciones de conexión. Para evitar repetir estos datos en varios archivos, crea el archivo de configuración config.php en el directorio raíz de la aplicación:



Crear





Lo único que hemos hecho ha sido agregar un botón que nos permita acceder al archivo create.php.

Formulario HTML

Primero incluiremos los archivos header.php y footer.php en el archivo crear.php. También agregaremos un formulario HTML que nos permita introducir los datos de un alumno:



Crea un alumno

Nombre

Apellido

Email

Edad



Regresar al inicio





Hemos agregado el atributo name a cada campo del formulario. El valor del atributo name será el nombre que tendrá cada campo cuando se envíe el formulario. Hemos agregado también una etiqueta para cada campo, que se relacionará con su correspondiente campo gracias al atributo for. El valor del atributo for es el mismo que el del atributo id del campo con el que se relaciona. El uso de etiquetas label permite que las páginas sean más accesibles. No hemos especificado ninguna acción en el formulario, por lo que éste se enviará a la misma página en la que está definido. Por ahora, dado que todavía no hemos agregado el código PHP, no ocurrirá nada. Si accedes al proyecto desde tu navegador, este será el resultado del formulario:

Tras crear el formulario, pasaremos a la parte backend, que es el código que ejecutará el servidor para insertar el usuario en la base de datos.

Código PHP

Cuando envías el formulario, los datos se enviarán al propio script crear.php. Podrás encontrarlos indexados en el interior del array $_POST. Por ejemplo, el nombre que introduzcas en el campo cuyo atributo name es nombre, estará en la variable $_POST['nombre']. Del mismo modo, el nombre que introduzcas en el campo cuyo atributo name es apellido, estará en la variable $_POST['apellido']. Para comprobar si el formulario se ha enviado, puedes usar la siguiente sentencia: if (isset($_POST['submit'])) {

// Acciones a realizar }

Para insertar un usuario también debemos conectarnos a MySQL, pero ahora deberemos especificar también el nombre de la base de datos en el parámetros DSN. A continuación, agrega este código al inicio del archivo crear.php:







Este sería el código PHP completo que usamos para crear el usuario:









Ahora ya podrías enviar el formulario. Deberías ver el siguiente mensaje una vez lo envíes:

Si embargo, todavía podemos mejorar el formulario.

Ataques XSS

Cuando creamos un alumno con éxito, mostramos su nombre en el mensaje de confirmación. Imprimimos por pantalla directamente el resultado de la variable $_POST, lo cual podría tener ciertos efectos indeseables si algún atacante inyecta código malicioso en esta variable. Para evitar ataques XSS vamos a codificar los caracteres especiales en sus respectivas versiones HTML. Para simplificar el proceso, crearemos una función reutilizable. Crea el archivo funciones.php en el directorio raíz del proyecto y agrega esta función:

function escapar($html) { return htmlspecialchars($html, ENT_QUOTES | ENT_SUBSTITUTE, "UTF-8"); }

Lo que hace la función es codificar cualquier caracter en su versión HTML. Luego, incluye el archivo funciones.php en la parte superior del archivo create.php: include 'funciones.php';

Seguidamente, usa la función escapar con el elemento $_POST['nombre'] en el array $resultado: $resultado = [ 'error' => false, 'mensaje' => 'El alumno ' . escapar($_POST['nombre']) . ' ha sido agregado con éxito' ];

Este sería el código final completo del archivo crear.php:











Crea un alumno

Nombre

Apellido

Email



Edad



Regresar al inicio





CRUD (Read): Lista de alumnos

Vamos a crear la página usada para mostrar los datos de los alumnos. Para ello usaremos el archivo index.php, en donde incluiremos tanto el archivo header.php como el archivo footer.php.

Código PHP

Después del botón que nos permite acceder a la página crear.php vamos a agregar una tabla con la lista de alumnos existentes. Sin embargo, primero necesitamos obtener la lista de alumnos desde la base de datos. Por ello, debes agregar este código al principio del archivo index.php:

Lo que hemos hecho ha sido incluir el archivo funciones.php y también el array de configuración. Luego nos conectamos a la base de datos en un bloque try/catch. De haber algún error, lo almacenamos en la variable $error. La consulta MySQL que usaremos para obtener la lista de alumnos será la siguiente, que sencillamente obtendrá la lista completa de alumnos

$sql = "SELECT * FROM alumnos;

Este será el código PHP que implementa y ejecuta la consulta: $consultaSQL = "SELECT * FROM alumnos"; $sentencia = $conexion->prepare($consultaSQL); $sentencia->execute();

Luego almacenamos el resultado en la variable $alumnos: $alumnos = $sentencia->fetchAll();

En caso de que se produzca algún error debes mostrarlo. Para ello, agrega el siguiente código justo después del lugar en donde incluimos el archivo header.php:







Este sería el código PHP del archivo index.php con lo que hemos hecho hasta ahora.













Crear





Ahora ya solamente nos falta mostrar los resultados en una tabla.

Tabla HTML

Vamos a mostrar la lista de alumnos en una tabla HTML. Sin embargo, primero agregaremos un mensaje que se ejecute en caso de que se haya producido algún error al obtener la lista de alumnos.

A continuación puedes ver el código de la tabla. Agrega este código justo después del bloque en donde mostramos el botón que redirige a la página que permite crear alumnos, y antes del lugar en donde incluimos el archivo footer.php:

Lista de alumnos

# Nombre Apellido Email Edad









Lo que hacemos es comprobar que existen alumnos mediante el método rowCount y recorrer la lista de alumnos, agregando una fila a la tabla por cada uno de los alumnos. Este sería el código del archivo index.php con lo que hemos hecho hasta ahora:











Crear





Lista de alumnos

# Nombre Apellido Email Edad









Si agregas algunos alumnos y luego accedes a la página principal de la aplicación usando tu navegador, deberías ver este resultado:

Ya hemos terminado, pero vamos a agregar una funcionalidad a mayores. Se trata de un formulario que nos permitirá filtrar la lista de alumnos.

Búsqueda

Estaría bien agregar un campo de búsqueda que nos permita buscar usuarios por apellido. Para ello crearemos el siguiente formulario debajo de la línea de separación que hemos agregado, debajo del enlace hacia la página crear.php:

Crear





Ver resultados



Hemos usado el atributo placeholder en el campo nombre del formulario para mostrar un texto por defecto, que desaparecerá cuando introduzcamos algo en él. Seguidamente, accede al proyecto desde tu navegador para ver el resultado:

El formulario enviará el apellido del alumno que introduzcamos a la propia página, por lo que debemos agregar una consulta SQL alternativa que se ejecute cuando el formulario se haya enviado: if (isset($_POST['apellido'])) { $consultaSQL = "SELECT * FROM alumnos WHERE apellido LIKE '%" . $_POST['apellido'] . "%'"; } else { $consultaSQL = "SELECT * FROM alumnos"; }

El operador MySQL LIKE buscará los alumnos cuyo apellido contenga la subadena que introduzcamos en el campo apellido. El símbolo % sirve para especificar que puede haber texto a la izquierda o a la derecha de la cadena. Vamos a modificar también el título del formulario, de modo que indiquemos cuando estemos realizando una búsqueda por apellido. Para ello, asignaremos el título del formulario mediante PHP: $titulo = isset($_POST['apellido']) ? 'Lista de alumnos (' . $_POST['apellido'] . ')' : 'Lista de alumnos';

Hemos usado el operador ternario de PHP para comprobar si el apellido está presente en el array $_POST, en cuyo caso agregamos el apellido entre paréntesis al título:

Por ahora hemos visto cómo conectarnos a la base de datos mediante PDO, cómo crear un script de instalación y cómo listar y agregar registros. En una aplicación real también tendríamos que agregar gestión de usuarios, una página de login o validaciones JavaScript entre otras cosas, aunque es algo que sale del alcance de este tutorial.

Acciones

Antes de continuar, vamos a agregar una columna más a nuestra tabla que contenga dos enlaces para cada fila. Los enlaces enlazarán al archivo editar.php y al archivo borrar.php respectivamente. Para ello agregamos una cabecera adicional a la tabla:



Necesitamos obtener los datos del usuario que estamos editando desde la base de datos y mostrar un formulario de edición.

Código PHP (Lectura)

Primero incluimos el archivo funciones.php y el array de configuración. Seguidamente comprobamos que el parámetro $_GET['id'] esté presente, mostrando un error en caso contrario. Luego nos conectamos a la base de datos para buscar el alumno que estamos editando. Este es el código PHP que usamos para obtener el alumno que estamos editando, que va al principio del archivo editar.php:

Tal y como ves, en caso de no pasar ningún id a la página o de que ocurra algún error, almacenamos el mensaje en el elemento $resultado['mensaje'].

Formulario HTML

A continuación debemos agregar un formulario con los datos actuales del alumno que hemos obtenido desde la base de datos, que están en el array $alumno. Este formulario es casi idéntico al que hemos agregado en el archivo crear.php, con la salvedad de que en este caso los campos tendrán un valor.

Sin embargo, primero debemos mostrar algún error en caso de que haya ocurrido alguno. Para ello usa el siguiente código después de la línea en la que incluimos el archivo header.php:







En caso de que se haya enviado el formulario, tendremos que mostrar también un mensaje de confirmación siempre y cuando no haya habido errores:



El alumno ha sido actualizado correctamente





Seguidamente, tras los mensajes anteriores, agrega el código del formulario:



Editando el alumno

Nombre











El alumno ha sido actualizado correctamente





Editando el alumno

Nombre

Código HTML

El siguiente código HTML solamente se mostrará si ha ocurrido algún error. Agrega este código después de la línea donde incluimos el archivo header.php:







Y con esto ya hemos terminado. Este sería el código completo final del archivo borrar.php:









Protección CSRF Vamos a agregar protección contra ataques CSRF, mediante los cuales un atacante puede engañar al navegador y ejecutar código no deseado. Lo que haremos será almacenar un token CSRF en ...