App de notas con PHP – Ejemplo de código

En este post te voy a explicar y mostrar un ejemplo de código con PHP, MySQL, Twig y Bootstrap en donde se gestionan notas y usuarios.

La app de notas es totalmente responsiva y hecha completamente con PHP, usando MySQL para la persistencia de datos.

El correo es posible gracias a Twig para renderizar la vista, y PHPMailer para enviarlos.

• Un usuario puede ver, crear, editar y eliminar notas
• Cualquier usuario puede registrarse usando su correo electrónico
• Los usuarios pueden cambiar su contraseña
• Para que el usuario se registre, se debe verificar el correo electrónico
• Los usuarios pueden resetear su contraseña olvidada
• Un usuario no puede ver ni modificar las notas de otro usuario
• Las notas guardadas deben guardar la fecha y hora de creación

Como lo ves, está muy enfocado a la gestión de usuarios.

Código fuente, demostración y descargas

El código fuente está en GitHub, basado en mi caja de herramientas de PHP. El código contiene:

• Validación con Valitron
• Renderizado de vistas con Twig
• Diseño con Bootstrap
• Sesiones propias con MySQL
• Flashdata en las sesiones

La demostración la puedes ver en mi página de apps.

App de notas con PHP, MySQL, Bootstrap y Twig

Para descargar el código simplemente ve a GitHub y clona o descarga el proyecto. Recuerda que debes tener Composer y PHP instalado.

Explicación de app de notas con PHP

Ahora voy a explicar cómo funciona esta app de notas con PHP y MySQL.

La gestión de usuarios no la explicaré, pues es más larga, aunque muy parecida a las notas, excepto por la parte de restauración de contraseñas y contraseñas olvidadas.

No olvides que debes crear las tablas definidas en esquema.sql, y si hace falta instala un servidor de correo de pruebas para la gestión de usuarios.

Rutas y controladores

Comenzamos viendo las rutas de las notas en rutas.php:

Además de las que tienen que ver con el perfil y el cierre de sesión, tenemos las rutas que son:

• GET notas – Para ver las notas que el usuario tiene guardadas
• GET notas/agregar – Formulario para agregar una nota
• POST notas/guardar – Fíjate que es post; se encarga de procesar el formulario
• GET notas/editar/{idNota} – Mostrar formulario para editar una nota
• GET notas/eliminar/{idNota} – Confirmación para eliminar nota
• POST notas/eliminar – Eliminar una nota
• POST notas/editar – Procesar formulario para guardar la nota

Cada ruta llama a un método del controlador de notas, el cual es el siguiente:

Modelo de notas (el que habla con la base de datos)

El controlador se encarga de funcionar como pegamento entre el usuario y el software; pues valida los datos, muestra vistas (como el formulario) y redirige a otras ubicaciones.

Hay muchas llamadas al modelo de notas, el cual se encarga de comunicarse con la base de datos:

Son consultas simples, es decir, no estoy usando ningún ORM.

Puedes ver que se hace el CRUD completo de las notas con PHP, ya que hacemos un SELECT, UPDATE, DELETE e INSERT.

Formulario para agregar una nota

El formulario que agrega una nota es el siguiente:

Su action es la ruta notas/guardar definido en las rutas que vimos anteriormente. Tiene un campo de tipo textarea que se llama contenido.

Agregar nota

Cuando una nota se guarda con éxito, esta es la salida:

Nota agregada en PHP – Alerta con Bootstrap

Es decir, si es exitoso, se redirige a las notas y se muestra una alerta que desaparece al recargar la página.

Mostrar notas

Cuando ya tenemos notas, las mismas se muestran en un ciclo (mira el modelo de notas en el método deUsuario) y la vista es la de arriba.

Su código es el siguiente:

Se hace un ciclo for con twig y se dibujan divs de tipo tarjeta (este estilo lo da Bootstrap)

Además, se ponen dos enlaces: uno para editar la nota y otro para eliminarla.

Editar nota

Cuando se hace click en editar nota, se muestra un formulario que tiene el id de la nota como un campo hidden, y se rellena el contenido de la misma:

Si no entiendes de dónde vienen estos datos, mira el controlador de notas en su método editar, y al modelo en su método unaDeUsuario (pues recuerda que solo se pueden editar notas que le pertenecen a un usuario)

Editar nota – app con PHP

Si se guarda correctamente, se regresa a donde se muestran todas las notas con una alerta:

Nota editada. Mostrando alerta de Bootstrap indicando operación exitosa

Eliminar nota

Cuando se elimina una nota se pide una confirmación que muestra un formulario que, al ser enviado, elimina realmente la nota (solo si le pertenece al usuario).

El formulario de confirmación es el siguiente:

Y se ve así:

Formulario para pedir confirmación de eliminación de nota

En caso de que se confirme y la eliminación sea correcta, de nuevo se muestran todas las notas:

Alerta indicando que la nota fue eliminada – App de notas con MySQL y PHP

Conclusión

Así es como funciona, a grandes rasgos, esta app de notas con PHP. Recuerda que utiliza Bootstrap 4 para ese bonito diseño, y como storage o almacenamiento una base de datos con PHP que bien podría ser cambiado por otro motor.

Te repito que esta app está basada en mi caja de herramientas que presenté anteriormente.

Eres libre de ver el código en GitHub, o registrarte y usar la app.

Mira más aplicaciones que he creado.