Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo de lo que estuve hablando el otro día con una amiga. El caso es que resulta que le gusta mucho cocinar, y por eso, ahora que se decidió a estudiar desarrollo web, quiere presentar como proyecto de final de ciclo un recetario web. Como ya le dije, esto es algo que está muy extendido en internet. Solo hay que buscar un poco para encontrar códigos con los que poder poner a funcionar un recetario de cocina.
Buscando un poco entre los discos duros que tengo por aquí amontonados, encontré un código que empecé hace como unos 11 años (cuando yo estudiaba justamente desarrollo web … como pasa el tiempo!! …), pero por una cosa u otra no terminé. Bueno, pues después de la conversación que tuve con esta mujer, decidí ponerlo a funcionar. Así que cambié un poco de aquí y de allá el código, y aun que todavía quedan algunas cosas por añadir y otras por pulir, ahora que tengo un rato libre, lo he subido en GitHub, donde suelo poner las cosas que voy publicando aquí. Así que si a alguien le sirve, que no dude en coger el código y adaptarlo a sus necesidades.
El recetario web (un vistazo rápido)
Al final el proyecto se me ha quedado un poco grande como para publicarlo en un solo artículo. Por eso, he decidido que no publicaré aquí el código. Si alguien lo quiere consultar, lo tiene disponible en el repositorio en donde he subido todo el código y la base de datos que lo acompaña.
Por esto, en las siguientes líneas, vamos a ir viendo un poco por encima las funcionalidades de las que dispone este pequeño proyecto. En el código, he ido metiendo comentarios para explicar que hace cada parte.
El login
Para empezar, decir que este recetario de cocina tiene un login, desde donde el usuario puede registrarse en caso de no tener una cuenta. A este login se accede desde el index.html que encontraremos en la carpeta login. A la ventana para introducir la contraseña o registrarnos podremos acceder haciendo clic en el botón que dice «Login«, el cual se sitúa en la parte derecha superior.
La contraseña que introduce el usuario se guarda en la base de datos utilizando la función de hash password_hash(). El formulario de registro incluye también una opción para recuperar la contraseña, pero esto por el momento no es funcional. Aun que está la estructura, pero falta por desarrollar el sistema de entrega del token en la base de datos.
Tengo que decir que a modo de demostración he puesto un email y contraseña de prueba. Estos datos se pueden leer en la pantalla de login. Aun que si el usuario quiere, puede acceder registrando una cuenta. Por el momento no hace falta validar el correo electrónico (otra cosa que queda todavía por implementar).
El recetario web
Una vez logueados como usuarios registrados, el sistema nos llevará a la pantalla del recetario web. Aquí veremos una interfaz sencilla. Esta se divide en cuatro partes. La cabecera, un carrusel de imágenes, un listado de categorías y un listado de las recetas. A continuación vamos a ver un poco por encima cada una de estas tres partes.
La cabecera y el carrousel de imágenes
Estas dos partes son sencillas. En los archivos navbar.php y carrousel.php, que se encuentran dentro de la carpeta includes encontraremos el código de ambas partes.
En la barra de navegación encontraremos un pequeño menú que nos permitirá movernos a las diferentes secciones de la página. Además, en el desplegable que se encuentra en la parte derecha del menú, encontraremos la opción Cerrar sesión. Esta opción nos devolverá a la pantalla de login.
En cuanto al carrousel de imágenes podremos mostrar imágenes con mensaje, los cuales se irán desplazando cada cierto tiempo. Este carrousel se crea utilizando Bootstrap, por lo que es altamente configurable.
Las categorías
Las categorías que se van a mostrar están definidas en la base de datos y en el archivo categorías.php que he puesto dentro de la carpeta includes. A las categorías que se muestran les he aplicado un pequeño efecto de zoom y sombras con CSS.
Como se puede ver en la captura de pantalla, cada categoría cuenta con un botón que dice «Ver«. Si pulsamos sobre alguno de ellos, se abrirá una ventana modal en la que podremos ver todas las recetas asociadas a la categoría en cuestión.
En la ventana, veremos como se van acumulando las recetas a medida que las guardemos. Si hacemos clic sobre alguna de ellas, se abrirá en otra ventana modal la receta en cuestión.
Como se puede ver, el formato de la receta es sencillo. Podremos ver la imagen asociada a la receta. Justo debajo, en dos columnas, tendremos en una los ingredientes y en otra los pasos que se definan para conseguir el plato que se busca. Cada receta cuenta con una X en la parte superior derecha y un botón «Cerrar» en la parte inferior derecha para cerrar la ventana modal.
A esto le quedan también algunas cosas a añadir, pues la posibilidad de incluir un vídeo o añadir más de una imagen, también estaría muy bien. Pero eso queda para otro momento.
Listado de recetas
Al final del recetario encontraremos un bloque de instrucciones (básicas) para añadir nuevas recetas. Justo debajo veremos también una sección en la que se van a listar todas las recetas guardadas en la base de datos. En esta sección encontraremos el botón «Añadir Receta«, para añadir nuevas recetas completando los campos que se nos mostrarán en una ventana modal:
En esta sección también encontraremos el listado de todas las recetas, junto con algunas opciones que podremos utilizar para ver una receta en particular, para editarla, o directamente eliminarla.
Además en la parte superior también tendremos disponible un buscador el cual nos irá mostrando los resultado en directo.
Y bueno, en principio esto es todo. Supongo que esta mujer que me hablaba de que quería hacer un recetario web, o a quien pueda interesarle, con esto tiene por donde empezar. Cuando tenga tiempo, quizás termine por pulir más este recetario, pero por el momento, no tengo mucho tiempo para ponerme a ello.
Antes de terminar, solo me queda decir que si alguien quiere ver este pequeño proyecto funcionando, puede hacerlo en la sección de ejemplos de esta web. Y bueno, solo queda recordar que el código y la base de datos, se pueden descargar al completo desde este repositorio de GitHub.
