Código del sistema de los observatorios regionales en framework Laravel.
Para todos los pasos, siempre verificar que se haya instalado todo correctamente con los siguientes comandos:
Antes de empezar, hay que saber sobre migraciones en Laravel
Las Migraciones se les conoce como el control de versiones de tu base de datos; de esta forma se puede crear la base de datos y compartir el diseño con el equipo de trabajo. Si deseas agregar nuevas tablas o columnas a una tabla existente, puedes hacerlo con una nueva migración; si el resultado no fue el deseado, puedes revertir esa migración.
-
Crear una carpeta en donde estará el proyecto nuevo, en nuestro caso será tener un lugar o carpeta en donde se clonará este repositorio, ya que aqui va el proyecto.
-
Verificar las versiones de PHP, Composer, Node y NPM en POWERSHELL o CMD
-
COMPOSER: composer -v VERSION DEL PROYECTO: Composer version 2.4.1
-
PHP: php -v VERSION DEL PROYECTO: PHP 8.1.10 (cli), Zend Engine v4.1.10
-
NODE: node -v VERSION DEL PROYECTO: v16.15.1
-
NPM: npm -v VERSION DEL PROYECTO: 8.11.0
- Instalar TailwindCSS en POWERSHELL o CMD
- Posicionarse en la carpeta del proyecto de laravel
- npm install -D tailwindcss postcss autoprefixer
- npx tailwindcss init -p -> (crea el archivo de configuracion)
- Arrancar un proyecto de laravel en POWERSHELL o CMD:
- php artisan serve
- Instalar Node en el proyecto (SOLO LA PRIMERA VEZ)
- npm install
- Instalar TailwindCSS al proyecto y creacipon de archivo de configuracion (SOLO LA PRIMERA VEZ)
- Posicionarse en la carpeta del proyecto de laravel
- npm install -D tailwindcss postcss autoprefixer
- npx tailwindcss init -p
- Despues de haber instalado TailwindCSS, se debe de tener otro POWERSHELL o CMD corriendo con este comando:
- npm run dev
- Creacion de tablas o bases de datos por medio de migraciones de Laravel y MySQL Workbench 5.1. Migraciones
- php artisan migrate
- artisan migrate:rollback (Revierte la conección con la tabla)
- sail artisan migrate:rollback --step=5 (ejemplo de un rollback por pasos)
5.2. Make, comando para creación
- artisan make:migration (les da un nombre a las migraciones, este nombre sale en el proyecto de laravel en la parte de migraciones)
https://code.visualstudio.com/download
Se escoje la arquitectura de la computadora y se instala.
- Descargar la aplicación a la computadora.
- Localizar una carpeta en donde se guardaran el o los repositorios en nuestra computadora.
- Iniciar sesión de github en la aplicación.
- Seleccionar un repositorio para clonar en la carpeta del paso 2.
Cuando ya hay un repositorio clonado en nuestra computadora:
- Presionar fetch origin para verificar cambios en el repositorio de git.
- En caso de haber, presionar el mismo boton, el mismo dirá "Pull request" con un numero de la cantidad de cambios.
En caso de hacer un cambio:
- Verificar los cambios del git.
- Verificar los cambios por hacer en la aplicación (parte izquierda, sale todos los archivos y lineas modificadas por usted).
- Darle nombre y descripción al commit, abajo a la izquierda.
- Presionar Commit to main.
- Volver a presionar el mismo boton.
https://dev.mysql.com/downloads/installer/
NOTA: Si usan XAMPP, ya el por defecto trae una ruta de PHP, en mi caso yo la elimne por completo de las variables de entorno pues la version que iba a usar fue esta que vamos a instalar, en mi caso tiraba un error con ambos PHP en el PATH, asi que si les funciona el proyecto de Laravel con el php de xampp, CREO que podrian hacer caso omiso, solo recordar que esta version de PHP es la siguiente: VERSION DEL PROYECTO: PHP 8.1.10 (cli), Zend Engine v4.1.10
https://windows.php.net/download#php-8.1
Selecciona el cuadro que dice THREAD SAFE, luego la arquitectura de su computadora. Al darle descargar, es un .zip
Lo que se hace es darle click derecho y darle en "Extraer todo" y la carpeta extraída la vamos a poner en la unidad C:
Ahora, hay que agregarlo a las variables de entorno del sistema En busqueda de windows buscamos "Editar as variables del sistema", en ingles "Edit the system ebviroment variables"
Luego en el boton:
Vamos a las variables del sistema y seleccionamos el que dice PATH
Le damos en el boton de edit
Luego, en el boton de New
Y colocamos donde se tiene guardado PHP, en este caso lo guardamos en C:, y lo ponemos abajo
Le damos en OK y luego en Aplicar.
https://getcomposer.org/download/
Al descargar el archivo .exe le damos permiso a todos los usuarios, luego aparece una pantalla con una cajita de Developer Mode, NO la marcamos y le damos siguiente
En la ruta, debemos de ir a la ruta donde tenemos PHP, de nuevo, si tienen XAMPP, puede ser que ya traigan composer, sino se pone en la ruta del PHP de XAMPP, pero si no lo tienen y lo van instalando a como yo en C:, se ponen sobre la ruta C:\php\php.exe
El proxy no se toca y terminan de instalar.
Presionamos el que diga RECOMENDADO PARA LA MAYORIA DE LOS USUARIOS https://nodejs.org/en/download/
Es un archivo.msi Solo se aceptan los terminos y se de la Next hasta este punto, en donde si le clickeamos el check a esta opcion
Despues next e instalar.
Ahora, un CMD se va a abrir automaticamente, en donde solo le damos cualquier tecla para continuar con la instalacion de paquetes
Despues, abrira powershell u otro cmd donde instalaran paquetes y dependencias de Chocolatery y Phyton, esto se hace automaticamente, sabremos que todo termino correctamente cuando nos salga un mensaje de que presionemos ENTER para salir
Luego, nos fijamos en las versiones con los comandos de arriba del documento, especificamente node y npm.
Se abre el Powershell o CMD, se posiciona sobre el proyecto con cd "ruta del proyecto", y luego ejecuta el siguiente comando: npm install -D tailwindcss postcss autoprefixer
###IMPORTANTE: El proyecto ya trae Vite y Tailwindcss por defecto, ESTOS PASOS DE AQUI EN ADELANTE NO HAY QUE HACERLOS EN ESTE PROYECTO ya que ya viene por defecto, pero si algun dia hacen otro proyecto de laravel con tailwindcss, si abria que hacerlo.
Luego, el siguiente comando nos creara el archivo de configuracion de tailwind npx tailwindcss init -p Esto crea un archivo llamado tailwind.config.js, en donde le pondremos las siguientes lineas:
Luego, nos metemos a la carpeta de resources -> css -> app.css, ahi pondremos las sigueintes lineas de codigo:
Una vez listo, o cada vez que queramos ejecutar el proyecto, abrimos un powershell o cmd que correra siempre en el background, este powershell es aparte del php artisan serve, con el comando:
- npm run dev
Para añadirlo a las vistas, se incluye la linea de Vite:
Listo.
Lo principal que debe de saber es.. ¿en dónde van las vistas de la página web? Se pueden reconocer facil porque usan ".blade"
En Laravel, la manera que una vista se conecta con otra, ya sea por medio de botones o formularios, etc, es por medio de enrutamiento, un file llamado web.php
Aqui lo que se hace es configurar o hacer palabras para la compilacion mas facil por medio de cmd o pwershell
vite.conf.js