Requisitos previos para crear un proyecto en Laravel:
- PHP
- Mysql
- Composer
- Node
Vamos a proceder a crear un nuevo proyecto en Laravel utilizando la última versión, para ello utilizaremos Laragon como localserver y composer para instalar las dependencias y crear la estructura de proyecto. Creamos un nuevo proyecto mediante el comando composer create-project laravel/laravel nombre-proyecto.
Para proseguir se ha de modificar el fichero .env y adaptarlo a la BBDD que disponemos, en el caso que estoy haciendo utilizo la BBDD local de Laragon:
A continuación aprovechando los snipets que proporciona artisan, crearemos toda la estructura base MVC, para ello utilizamos el comando php artisan make:model NombreModelo -crm, dicho comando creará el modelo de datos, el fichero migrations (este fichero permite definir la estructura de la BBDD, esta estructura se creará mediante php artisan migrate cogiéndo como estructura el fichero migrations), y el controlador:
Añadimos los campos deseados para la tabla en el fichero migrations creado en el anterior paso, de esta forma definimos la estructura que creará el programa:
Una vez definido aplicamos los cambios en la BBDD, para ello utilizamos el comando php artisan migrate.
Se puede observar mediante el gestor de BBDD heidi incluido en laragon que se ha creado la estructura de tabla definida en migrations:
Insertaremos datos en la BBDD de forma manual para comenzar a tratarlos en la aplicación, para ellos vamos al gestor y creamos las diferentes sentencias:
A continuación nos vamos al editor, creamos una nueva carpeta en Views donde crearemos una nueva plantilla de blade:
Vamos al controlador, y en el método index (podría llamarse de otra forma sin problema), utilizando los métodos de base de datos obtenemos todos los campos de la tabla cliente y los almacenamos en una variable, dicha variable se la enviamos mediante return view a la vista para luego su posterior tratamiento:
A continuación editamos el fichero web.php encargado del sistema de rutas, crearemos una nueva ruta (endpoint), definiremos el método utilizado, el controlador indicado y la función a realizar:
Vamos a la view de blade que hemos creado con anterioridad, insertamos un bucle foreach, recorremos el objeto enviado mediante el controlador a la vista y mostramos los datos recopilados dentro del bucle:
Blade permite también añadir fragmento html y css:
A continuación se procederá a crear un sistema de entrada de datos mediante formulario, para ello creamos una vista en resources->views, y creamos un formulario básico.
A continuación vamos al controlador y creamos el método para enviar los datos del formulario a la base de datos:
Vamos al sistema de enrutamiento albergado en web.php y añadimos la ruta del controlador/método:
A continuación rellenaremos el formulario para la obtención de datos utilizando el alias como ruta para enviar los datos:
Instalaremos tailwindcss para dar estilos, para ello en la consola introduciremos el comando npm install -D tailwindcss y seguido de este npx tailwindcss init:
Añadimos content: ["./src/**/*.{html,js}"] en el fichero de configuración de tailwind ubicado en la raíz del proyecto y @tailwind base; @tailwind components; @tailwind utilities; en el fichero app.css ubicado en resources,css.
Añadiremos el plugin oficial para alñadir los "forms" de tailwindcss, para ello ejecutaremos el comando npm install -D @tailwindcss/forms en un powershell en la raíz del proyecto y añadiremos require('@tailwindcss/forms'), en el fichero de configuración de tailwindcss ubicado en la raíz del proyecto.
El siguiente paso es dar estilos para ello le damos al documento una estructura de html, en la cabecera de este añadimos el acceso a vite y en las clases de los diferentes objetos de la vista les añadimos los parámetros de tailwindcss:
*Muy importante añadir las anotaciones, la primera da acceso vite al documento y la segunda anotación añade un token a la peticion HTTP.
Para actualiza la vista hace falta utilizar el comando npm run dev.
Aplicando los estilos mostrados queda de la siguiente forma:
