1

Laravel - Configuración del Entorno

Resultado de Aprendizaje

Construir la interfaz de usuario, apoyado en la evaluación del prototipo, determinando las

entradas y salidas requeridas en el diseño y definiendo los lineamientos para la navegación, de

acuerdo con las necesidades del usuario.

Competencia de Aprendizaje

Construir el sistema que cumpla con los requisitos de la solución informática.

Aprendiz

Alber Steeven Pedraza Huertas

Sena – Centro de Diseño y Metrología

Análisis y Desarrollo de Sistemas de Información

No. Ficha 2338898

Instructor

Luis Prieto

14 de octubre de 2022
 2

Tabla de Contenido

Introducción .................................................................................................................................... 3

Herramientas Necesarias de Uso .................................................................................................... 4

Proceso de instalación de Visual Studio Code ........................................................................ 4

Proceso de instalación del Servidor PHP .............................................................................. 11

Proceso de instalación de Composer...................................................................................... 17

Proceso de instalación de Laravel .......................................................................................... 25

Conclusiones ................................................................................................................................. 35

Referencias .................................................................................................................................... 36
 3

Introducción

Laravel es un Framework o marco de trabajo creado para trabajar en PHP. En este

documento se describen los pasos que se deben seguir para la correcta instalación de este

framework junto con las herramientas necesarias para su funcionamiento, es decir que no solo

vamos describir las instrucciones detalladas de instalación de Laravel, sino también aquello

programas que debemos instalar para que este framework pueda funcionar en nuestros equipos.
 4

Herramientas Necesarias de Uso

Las siguientes herramientas que debemos instalar para usar Laravel en nuestro equipo son

las siguientes:

• Visual Studio Code (IDE opcional)

• Xampp

• Composer

• Laravel

Proceso de instalación de Visual Studio Code

El entorno de desarrollo integrado o IDE es una aplicación que suministra servicios y

herramientas de desarrollo para facilitar la tarea al programador al momento de crear código y

desarrollar software. La IDE cuenta con las siguientes características como:

• Compilador: Programa que se encarga de darle traducción al código fuente escrita por el

desarrollador y lo transforma a un código objeto, de tal manera que la maquina pueda

interpretar la serie de instrucciones, como ejemplo, la compilación al sistema binario.

• Editor de código: Es la principal característica de un IDE, en lo que permite suministrar

atajos y autocompletados o código sugerido para que el desarrollador pueda escribir

código sin tener que escribir absolutamente todo. Esto trae consigo utilidades como

autocompletado de cierres. Si es necesario, el usuario debe instalar las extensiones

correspondientes al lenguaje que va a trabajar.

• Depurador: Un programa que busca errores de código en tiempo real.

 5

El entorno que vamos a usar para trabajar el lenguaje de programación PHP y el framework

Laravel es Visual Studio Code.

Figura 1.

Visual Studio Code

Nota. (S/f). Robertoserrano.pro. Recuperado el 14 de octubre de 2022, de https://www.robertoserrano.pro/content/images/2020/08/instalar-visual-

studio-code-en-ubuntu-1.png
 6

A continuación, se presenta la serie de pasos para instalar este entorno de desarrollo.

Paso 1. Ingresar al navegador y buscar visual studio code. Ingresamos al primer enlace en la

ventana de resultados ingresando a la url como se muestra en la figura 2.

Figura 2.

Resultado de búsqueda

Paso 2. Ahora que ingresamos a la web oficial de Visual Studio Code, damos click en el cuadro

azul de descarga para Windows, si usa otro sistema operativo, justo al lado, cuenta con la fecha

que despliega los OS disponibles para su instalación. Automáticamente inicia la descarga del

programa con su versión más reciente, como se muestra en la siguiente figura.

 7

Figura 3.

Estado de descarga del programa

Figura 4.

Página principal de la página web

 8

Paso 3. Una vez completado el proceso de descarga iniciamos el programa de instalación

ubicado en la ruta de descarga. Como se ve en la siguiente figura, se muestra los acuerdo

de licencia, simplemente damos en el checkbox de “acepto el acuerdo”, y damos click en

siguiente.

Figura 5.

Venta de instalación de Visual

 9

En el siguiente recuadro nos aparece la ruta de instalación por defecto, teniendo el botón de

examinar para elegir una ruta distinta si así lo deseamos, en este caso lo dejamos por

defecto y damos click en siguiente.

Figura 6.

Ruta de instalación

Después inicia el proceso extracción de archivos y instalación reflejado en una barra de estado,

cuando este se haya completado, nos aparece una nueva venta de finalización del

programa de instalación, cerramos la ventana y el proceso ya se ha completado. Si

abrimos el programa visual se muestra la ventana de presentación y lista para su uso. Ver

la siguiente figura.
 10

Figura 7.

Ventana principal de VSC

 11

Proceso de instalación del Servidor PHP

Ahora que ya instalamos nuestro entorno de desarrollo, ahora es momento de instalar las

herramientas para desarrollar bases de datos. Para este caso vamos a trabajar MySQL utilizando

la herramienta de XAMPP, este es un programa que permite crear y manipular bases de datos y

alojarlos en un servidor local suministrado por este programa.

Para descargar e instalar XAMPP en nuestro equipo, el proceso es similar a como si instaláramos

VSC.

Paso 1. Abrimos el navegador y escribimos XAMPP en la barra de búsqueda. Luego ingresamos

al primer resultado de la búsqueda, ingresando a la página oficial de XAMPP.

Paso 1.

Figura 8.

Resultado de búsqueda de XAMPP

 12

Ahora que nos encontremos en web oficial de XAMPP, en la barra de opciones de

descarga ubicada en la parte inferior donde se indica descargar, damos click en alguna de las tres

opciones según el sistema operativo, en este caso, damos click en el cuadro de XAMPP para

Windows. Ver figura 9.

Figura 9.

Web oficial de XAMPP

Ahora inicia el proceso de descarga, y cuando haya finalizado, abrimos el programa de

instalación. Ahora como se muestra en la siguiente figura.

 13

Figura 10.

Programa de instalación de XAMPP

Para continuar, damos click en el cuadro de next, y nuevamente damos click en next, dejando la

ruta de instalación por defecto, como se ve en la siguiente figura.

 14

Figura 11.

Ruta de instalación de XAMPP

El siguiente cuadro simplemente es para la seleccionar los idiomas disponibles, ver siguiente

figura.
 15

Figura 12.

Selección de idioma

El siguiente cuadro muestra la barra de estado de instalación, cuando este se complete,

damos click en next. Luego aparace la venta de finalización.

 16

Figura 13.

Estado de instalación.
 17

Proceso de instalación de Composer

El siguiente programa que debemos instalar es Composer, este es un programa de gestión

de paquetes del lenguaje PHP, esto permite el manejo de dependencias y librerías. Este programa

es necesario si vamos a usar frameworks para PHP.

Paso 1. Nuevamente buscamos en el navegador la palabra Composer e ingresamos a la web

oficial como se muestra en la siguiente figura.

Figura 14.

Resultado de busqueda de Composer.

 18

Una vez que ingresamos a la web oficial, damos click en el cuadro de download como se

muestra en la siguiente figura.

Figura 15.

Web oficial de Composer

 19

Este nos redireccionará a una nueva ventana con información sobre el proceso de

instalación. En la siguiente figura se muestra en que parte de la página debe dar click para

descargar el instalador.

Figura 16.

Enlace de descarga de Composer.

 20

Damos click en el click que dice Composer-Setup.exe e iniciará la descarga. Luego abrimos el

programa de instalación.

Figura 17.

Modo de instalación

La siguiente venta muestra la opción para activar sobre el modo de desarrollador, en este caso no

la seleccionamos, simplemente damos click en next.

Figura 18.

Opción de instalación
21
 22

En el siguiente cuadro dejamos la ruta por defecto de instalación y damos click en siguiente.

Figura 19.

Ruta de instalación de Composer

En este punto se muestra la configuración predefinida de instalación. Aquí simplemente damos

click en install. Ver figura 20.

 23

Figura 20.

Vista previa de la configuración

 24

En la siguiente venta de la figura 21, se muestra información a tener en cuenta, damos click en

next. Y damos click en finish en la ventana posterior.

Figura 21.

Información de finalización
 25

Proceso de instalación de Laravel

Los programas Xampp y Composer son de instalación necesaria para poder instalar y

configurar Laravel, y que este puede funcionar de forma correcta. Habiendo hecho los pasos

anteriores, ahora si procedemos a instalar el framework de PHP. Seguir los siguientes pasos para

la instalación y configuración.

Paso 1. Debemos ingresar y buscar Laravel composer en el navegador. Como se muestra en la

siguiente figura:

Figura 22.

Busqueda de Laravel
 26

Se abrirá una nueva página informativa que contiene la documentación con las

instrucciones de instalación por medio de la terminal de comandos.

Figura 23.

Página de presentación de Laravel

Ahora tenemos al comienzo el índice de la documentación, para este caso vamos a

instalar la versión de Windows, para damos click en #Install Laravel, ver siguiente figura. Este

nos traslada al punto que contiene las instrucciones de instalación para este sistema operativo.
 27

Figura 24.

Tabla de contenido de la documentación de Laravel

Se nos muestra el instructivo que incluye una serie de líneas de comandos que debemos

ejecutar en la terminal de comandos de Windows o CMD. Ahora debemos abrir la consola

ejecutándolo como administrador.

Una vez que abrimos la consola la primera línea que debemos ingresar el comando cd .. para

ubicarnos al disco local C. Por defecto cuando abrimos la consola la primera línea muestra la

ruta en la que se encuentra ahora, si es necesario ingresamos nueva la línea de comando para

ubicarnos en la ruta C:. ver figura 25 de ejemplo.

 28

Figura 25.

Accediendo la ruta de C: del disco local

En la línea 3 de la figura 25 se muestra el código por donde debemos empezar a ingresar

los comandos. Aquí ya nos hemos ubicado en el disco principal.

Paso 2. Ahora debemos ingresar a la carpeta htdocs de nuestra carpeta XAMPP instalada por

medio de la consola porque es ahí donde vamos a instalar el framework a través de comandos.

Para esto debemos ingresar el comando cd y seguido de este ingresamos el nombre de la carpeta

que le sigue al disco local teniendo en cuanta la ruta de carpetas hasta ubicar la carpeta htdocs,

como ejemplo para comprender, la siguiente carpeta es Programas Instalados seguido por el

signo de barra vertical, luego damos enter o tab. Posterior ingresamos nuevamente cd Xampp/

que sería la siguiente ruta, y finalmente la línea cd htdocs/. Ver la figura 26 sobre como seguir la

ruta de instalación.
 29

Figura 26.

Ruta htdocs de xampp

Paso 3. Ahora que ya nos ubicamos a la carpeta htdocs de Xampp en nuestra consola. Debemos

copiar el primer comando que se muestra en la documentación en el punto de #Install Laravel.

Ver siguiente figura.

Figura 27.

Comando uno de instalación con Composer

 30

Esta primera línea la pegamos en la consola y damos enter. Este comando iniciará el

proceso de instalación de Laravel como se ve en la figura 28.

Figura 28.

Instalando Laravel con Composer en el CMD

 31

Paso 4. Ahora que hemos instalado Laravel, debemos crear un proyecto. Para esto ingresar a la

siguiente línea de comando: laravel new nombreProyecto, y se iniciará el proceso de creación

de un nuevo proyecto en Laravel. Recuerde que esta línea de comando se debe ejecutar

manteniendo la ruta htdocs activa en nuestra consola. Ver figura 29. Si por algún motivo sale un

error durante el proceso de creación de nuevo proyecto, Ingrese las siguientes líneas en orden

como se ven en la figura 30 para volver a instalar laravel y evitar el error.

Figura 29.

Nuevo proyecto en Laravel

Figura 30.

Comandos para remover y reinstalar Laravel

 32

Si todo esta correcto y se pudo crear el proyecto debe aparecer al final del comando la

siguiente estructura similar a la figura 29, con esto se entiende que se pudo crear el proyecto

correctamente.

Paso 5. El paso final ahora consiste en ingresar a la carpeta de nuestro proyecto creado ubicado

en la carpeta htdocs de XAMPP a través de la misma consola. Si es necesario volver a ubicar la

ruta htdocs, puede repetir el paso 2 anterior. Ver figura 31.

Figura 31.

Ruta del proyecto Laravel en consola de comandos

Ya ubicado en nuestro proyecto, ingresamos la línea php artisan serve, también puede

copiarla en el instructivo de la documentación de la pagina de instalación de Laravel. Damos

enter y se nos mostrará en pantalla la URL de nuestro proyecto. Ver figura 32.
 33

Figura 32.

URL del localhost

Finalmente copiamos la URL generada en la consola y la pegamos en nuestro navegador

de internet. En la figura 33 se muestra la página de presentación de Laravel junto con versión

instalada de Laravel y la versión instalada de PHP que se visualiza en la parte inferior derecha

del conjunto informativo. Con esto damos por finalizado el proceso de instalación de Laravel en

nuestro equipo.
 34

Figura 33.

Presentación Laravel
 35

Conclusiones

Las instrucciones presentadas en este documento están sujetas a una forma de instalar

Laravel en nuestro equipo utilizando Composer, así como las herramientas requeridas de gestión

de datos como XAMPP, también existen otras herramientas que proveen las mismas funciones.

Si se sigue los pasos de forma consecuente ya tendremos instalado Laravel y estaría listo para su

uso.
 36

Referencias

1. Installation. (s/f). Laravel.com. Recuperado el 17 de octubre de 2022, de

https://laravel.com/docs/9.x

2. Tutos, T.-D. [UCGRLuHmN8AmB09doG3cb3fw]. (2021, octubre 30). Instalar

Laravel 8 Paso a Paso en Windows 10 2021 || Tecno-Dev. Youtube.

https://www.youtube.com/watch?v=lUrl7ESwgNI

3. (S/f). Amazon.com. Recuperado el 17 de octubre de 2022, de

https://aws.amazon.com/es/what-is/ide/