¡Hola, bienvenid@s al curso de Laravel y ChatGPT! Hoy empezaremos a ver las vistas de la aplicación, vamos a generar las Rutas, vistas Blade, HTML, CSS para la funcionalidad Zonas con ChatGPT. Hasta ahora vimos toda la parte del backend (base de datos, modelos y controles), ahora nos toca ver la parte de las vistas del cliente, para esto trabajaremos con las vistas Blade que nos ofrece Laravel. Así también, trabajaremos con la parte visual de diseño de la aplicación con HTML y CSS.
¡Empecemos!
¿Qué son las vistas Blade en Laravel?
Las vistas Blade son un motor de plantillas que permite definir y renderizar las interfaces de usuario de una aplicación web de forma dinámica y reutilizable. Blade proporciona una sintaxis sencilla y expresiva para crear plantillas HTML que incluyen código PHP.
¿Qué son las vistas Blade en Laravel?
Las vistas Blade son un motor de plantillas que permite definir y renderizar las interfaces de usuario de una aplicación web de forma dinámica y reutilizable. Blade proporciona una sintaxis sencilla y expresiva para crear plantillas HTML que incluyen código PHP.
Crear las rutas para la funcionalidad Zonas
Comenzaremos por crear las rutas para la funcionalidad de Zonas, para esto realizamos la siguiente pregunta a ChatGPT.
“Crear las rutas para el controlador Zonas”
ChatGPT genera las rutas para la funcionalidad Zonas con las acciones típicas de un CRUD. Copiamos y pegamos el código generado en nuestra aplicación en el archivo web.php.

Crear la vista listar Zonas
Ahora comenzaremos por crear la vista para listar las zonas, para esto realizamos la siguiente pregunta a ChatGPT.
“Crear la vista para el listado de zonas, utiliza laravel blade, html y css”
ChatGPT genera las instrucciones y el código necesario para crear la vista, si observamos el código utiliza las plantillas blade para separar el código de la vista en partes, esto está bien pero para el ejemplo de este curso colocaremos todo el código en un solo archivo.

Volvemos a generar la pregunta a ChatGPT añadiendo este requerimiento.
“Crear la vista para el listado de zonas, utiliza laravel blade, html y css todo en un solo archivo”
Si observamos la respuesta de ChatGPT podemos observar que generó todo el código Blade, HTML y CSS en un mismo archivo.

Podemos optimizar el código CSS y utilizar por ejemplo el mínimo archivo de Tailwind CSS, preguntado a ChatGPT lo siguiente:
“Utiliza en el listado index Tailwind CSS en lugar de css puro”
ChatGPT genera otra respuesta esta vez con todo el código Blade, HTML y Tailwind CSS en un mismo archivo. Copiamos y pegamos el código en el archivo index.blade.php.
Para realizar las pruebas de nuestra aplicación iniciaremos el servidor local de Laravel, el servicio de MySQL y en el navegador escribimos la siguiente ruta http://127.0.0.1:8000/zonas para ver los resultados.

Si observamos la vista creada por ChatGPT, genera las funcionalidades de Crear, Editar, Ver y Eliminar una Zona, las funcionalidades que se crearon en las rutas y controladores de nuestra aplicación.
Crear el formulario para registrar Zona
Continuando con el desarrollo, ahora vamos a crear el formulario para crear una nueva zona, para esto realizamos la siguiente pregunta a ChatGPT.
“Crear el formulario zonas utilizando laravel blade, html y css todo en una sola página”
ChatGPT genera las instrucciones y el código necesario para crear el formulario de zonas. Primeramente, creamos el archivo create.blade.php en la ruta “resources/views/zonas/”, y copiamos y pegamos todo el código generado.

Realizamos las pruebas de la funcionalidad de crear nueva Zona y genera un error “Class «App\Http\Controllers\Zona» not found”.

Es aquí donde entra nuestra capacidad como desarrolladores de resolver errores en el código y la aplicación, podemos resolver por nuestra cuenta o consultar a ChatGPT para que nos de posibles soluciones.
“Me da el error Class App\Http\Controllers\Zona not found en el formulario de crear una nueva zona”
ChatGPT nos da posibles soluciones al problema, realizamos los pasos que nos aconseja y vamos probando la aplicación (la solución al problema es importar el modelo “Zona” en el controlador).

Crear el formulario para editar Zona
Continuando con el desarrollo, ahora vamos a crear el formulario para editar una zona, para esto realizamos la siguiente pregunta a ChatGPT.
“Crear el formulario para editar una zona utilizando laravel blade, html y css todo en una sola página”
ChatGPT genera las instrucciones y el código necesario para crear el formulario de editar una zona. Primeramente, creamos el archivo edit.blade.php en la ruta “resources/views/zonas/”, y copiamos y pegamos todo el código generado. Realizamos las pruebas de la funcionalidad editar zona.

Crear la vista eliminar Zona
Por último, vamos a crear la funcionalidad de eliminar una zona. Si observamos el archivo index de la funcionalidad de zonas, podemos observar que la funcionalidad ya fue creada por ChatGPT (además de generar el código de la instrucción solicitada genera código que ve que es necesario y de acuerdo al contexto generado). Realizamos las pruebas de la funcionalidad de eliminar una zona.

Realizamos las pruebas necesarias de la funcionalidad eliminar zona. Si todo está correcto ya tenemos el módulo de zonas completo y funcional. Recuerda que todo el código fuente generado en esta clase y las demás clases está disponible en GitHub totalmente gratis para su descarga.
Ejercicios de la clase
Realizar la funcionalidad de “Ver zona” utilizando la herramienta de ChatGPT, utiliza estilos HTML y CSS modernos y personalizados de acuerdo a tu estilo.
Para cualquier duda o consulta de la clase de hoy puedes dejarnos un comentario para poder ayudarte. En la siguiente clase continuaremos creando las vistas, esta vez para la funcionalidad de “Viviendas”.
¡Te espero en la siguiente clase!
Saludos y éxitos.

Victor Peña
Desarrollador de software Backend Developer, experto en Laravel Framework, PHP, JavaScript y MySQL. Creador de contenidos de emprendimiento y desarrollo de software.