ENTORNO DE DESARROLLO INTEGRADO ( IDE )

MATERIA
APLICACIONES EN INTERNET

ALUMNOS
ANDRES FELIPE ROJAS LONDOÑO
SEBASTIAN HENAO ERAZO

DOCENTE
RAFAEL MORENO PARRA

UNIVERSIDAD LIBRE SECCIONAL CALI

FACULTAD DE INGENIERIA DE SISTEMAS
SANTIAGO DE CALI, AGOSTO DE 2021

1
Contenido
1. Nombre de la herramienta, URL de descarga y licencia (libre, freeware o de pago)..................3
2. Método de descarga..................................................................................................................3
3. Colorear las instrucciones. Palabras reservadas del lenguaje PHP aparecen en otro color en
comparación con las variables.........................................................................................................33
4. Autocompletado. Deben probarse los siguientes tres(3) escenarios:......................................34
5. DEBUG EN PHP STORM............................................................................................................38

2
 1. Nombre de la herramienta, URL de descarga y licencia (libre,
freeware o de pago).

Herramienta : PHP STORM

Licencia: Libre.
PhpStorm es un IDE multiplataforma patentado para PHP, creado por la empresa JetBrains con
sede en la República Checa. PhpStorm proporciona un editor para PHP, HTML y JavaScript con
análisis de código sobre la marcha, prevención de errores y refactorizaciones automatizadas para
código PHP y JavaScript.

PHP STORM

URL de descarga (dependiendo del SO escoger el correcto, en este caso usaremos windows10)

2. Método de descarga

3
NOTA ANTES DE LA INSTALACION

Antes de instalar este entorno de desarrollo para PHP se asume que el usuario que lea este
manual tenga instalado PHP en su equipo y algún servidor, en este caso XAMPP es recomendado

https://www.jetbrains.com/es-es/phpstorm/download/#section=windows

Una vez descargado el archivo ejecutar el .exe y seguir los pasos para instalar PHP STORM.

4
Dar click en siguiente siguiente hasta finalizar

5
Luego de esto podremos abrir nuestro IDE PHP STORM.

Al abrirlo podremos crear un nuevo proyecto desde 0 .

6
7
Le asignamos un nombre a nuestro proyecto y la ubicación en donde queremos guardarlo.

8
En esta instancia nuestro entorno ya ha sido inicializado ahora debemos configurar PHP y XAMPP
para el despliegue y ejecución de nuestra aplicación.

Dar click en settings.

9
Aquí se debe filtrar en la barra de búsqueda la palabra PHP y luego dar click en el modal principal
luego vemos en la parte derecha debemos escoger la versión de PHP y el intérprete de php que
generalmente esta ubicado en la ruta C:\php\php.exe .

Escogemos la versión en este caso PHP 8.1 luego en la parte de CLI intérprete dar clic en los tres
puntos…

10
En la parte superior izquierda damos click en el icono + luego se nos mostrara la pantalla en la
parte derecha y a esta configuración podemos ponerle un nombre en este caso PHP 8.0 .

Luego en la sección general en el ítem PHP ejecutable esta es la ruta del intérprete de php del .exe
que en nuestro caso está en la ruta C:\php\php.exe que fue donde instalamos php en este
instante como vemos no tenemos DEBUGGER instalado para php por lo cual lo configuraremos
aquí mismo .

11
Dependiendo de nuestro navegador necesitaremos una extensión para crear una sesión de debug
ya que xdebug en php storm esta corriendo el servicio de debug con el navegador para interactuar
con las peticiones get post etc , y dependiendo de los puntos de interrupción hara el debug por lo
tanto debemos tener 3 cosas para configurar php storm y dejarlo listo para hacer debug.

1: Extensión de debug para Chrome usaremos la propia extensión de xdebug que es compatible
con phpstorm.

https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc

Se da click en instalar y luego se espera a que se instale luego podremos ver la extensión instalada
aquí.

12
Luego volvemos a php storm y debemos instalar xdebug .

13
 Para esto debemos descargar una extensión para PHP y este IDE llamada Xdebug en el siguiente
URL.

https://xdebug.org/download#releases

Luego aquí escogemos la versión de PHP en este caso usamos la versión  .

 PHP 8.0 VS16 TS (64 bit)

Luego eso nos descarga un archivo dll

Luego este archivo lo movemos a la raíz de nuestra carpeta de instalación de php en este caso .

C:\php

14
Luego debemos configurar el archivo php.ini que ese encuentra en nuestra carpeta de instalación
de php.

Y lo abrimos en nuestro editor favorito luego buscamos estas 2 líneas y las eliminamos.

zend_extension=<path_to_zend_debugger>
zend_extension=<path_to_zend_optimizer>

Luego en este mismo archivo debemos agregar las siguientes líneas.

Como ven zend_extension es la ruta de nuestra extensión para hacer debug en php en este caso
ya la movimos a la carpeta de instalación de php y demás .

[xdebug]

zend_extension="C:\php\php_xdebug-3.1.0-8.0-vs16-x86_64.dll"

xdebug.mode=debug

xdebug.client_host=localhost

xdebug.client_port=9000

xdebug.idekey = PHPSTORM

xdebug.show_error_trace = 1

xdebug.start_with_request=yes

Luego de esta configuración guardamos el archivo php.ini y volvemos al editor PHPSTORM.

15
Aquí damos click a recargar en el icono de ciclo y esto tomara las nuevas configuraciones de
nuestro archivo php.ini y nos dirá que el xdebug 3 para php 8 está instalado Excelente!!!!!.

Luego damos click en apply y en ok.

16
Luego de esto verificamos que nuestra configuración es correcta.

17
Y luego en la barra de búsqueda simplemente filtramos la palabra deployment.

18
Y aquí podemos acceder a la parte del deployment(Despliegue del servidor de PHP) damos click.

19
Como ven no tenemos configurado XAMPP o el servidor en el que estemos desplegando php en
este caso entonces damos click al icono de + .

20
Damos click a la opción Local or mounted folder.

21
Damos un nombre a la configuración de nuestro despliegue de servidor.

22
Luego aquí en esta sección en donde dice Folder debemos especificar la ruta de instalación de
nuestro software que despliega el servidor en este caso XAMPP la ruta es C:\xampp\htdocs .

23
Damos click en apply y luego en ok en el caso del host podemos poner otro nombre de host si es
que este existe en este caso usaremos localhost luego dar click en OK .

24
Luego en nuestro HOME de PHP STORM damos click derecho a nuestro proyecto y veremos todas
estas opciones y damos click en new para crear un nuevo archivo PHP en PHP file.

Le asignamos cualquier nombre en este caso test.

Luego veremos esto:

Y aquí ya podemos empezar a escribir código PHP pero hay una configuración que nos hace falta, y
es que como ven el botón de ejecutar código no está habilitado, sería interesante que cuando
diéramos click en este botón se ejecutara nuestro archivo test.php en el servidor XAMPP en
localhost para hacer esto posible debemos dar click en la parte superior derecha donde dice Add
Configuration.

25
Luego tendremos la siguiente pantalla.

26
Damos click en + y escribimos la palabra PHP.

y escogemos la opción PHP Build in – web-server luego de dar CLICK en esta opción debemos
hacer lo siguiente.

27
Asignamos un nombre cualquiera a esta configuración, luego en Document root buscamos la raíz
de nuestro proyecto luego en host marcamos localhost y en el puerto si desean lo cambian en
este caso usaremos el por defecto 80 luego damos click en APPLY y luego en OK.

Esta configuración se hace para que todos los archivos que estén en nuestro proyecto se ejecuten
en el host “localhost” utilizando el servidor XAMPP que previamente configuramos, luego de hacer
esto podrán ver lo siguiente.

28
El botón para correr nuestro código esta habilitado por lo tanto para probar esto haremos un hello
world en php y lo ejecutaremos entonces seria lo siguiente:

Luego de dar click en el icono RUN del Triángulo verde en la parte superior derecha podemos
observar que PHP storm ejecuta nuestro archivo test.php en el servidor con XAMPP y al final esto
se resuelve en el host “localhost” en el puerto 80 , también es interesante que este IDE nos
permite ver los logs cuando interactuamos con nuestra aplicación entonces iremos al url.

http://localhost:80/test.php

29
Como podemos observar en nuestro IDE podemos visualizar los LOGS de las peticiones a nuestra
aplicación.

O también podemos ubicar el puntero del mouse sobre el código php .

Y como se puede observar nos da la opción de dar click al icono del navegador donde queremos
abrir nuestra aplicación ya ejecutándose así que esto es muy útil .

Con esta serie de pasos hemos explicado como instalar PHP storm y configurarlo para PHP y
configurar si debugger con xdebug 3, recordar siempre que debemos antes de todo tener
levantado nuestro servidor en este caso XAMPP.

30
31
FUNCIONES DE PHP STORM.

Tenemos el siguiente código en test.php

<?php
class Employee
{
private $first_name;
private $last_name;
private $age;
private $saludo;

public function __construct($first_name, $last_name, $age, $saludo)

{
$this->first_name = $first_name;
$this->last_name = $last_name;
$this->age = $age;
$this->saludo = $saludo;
}

public function getFirstName()

{
return $this->first_name;
}

public function getLastName()

{
return $this->last_name;
}

public function getAge()

{
return $this->age;
}

public function getSaludo()

{

return $this->saludo;
}
}

$objEmployee = new Employee('Bob', 'Smith', 30,"Hola desde la clase");

echo $objEmployee->getFirstName(); // print 'Bob'

echo "<br>";
echo $objEmployee->getLastName(); // prints 'Smith'
echo "<br>";
echo $objEmployee->getAge(); // prints '30'
echo "<br>";
echo $objEmployee->getSaludo();
?>

32
Tenemos una clase Employee con 4 métodos y el resultado en la ejecución en el navegador es el
siguiente.

Aquí entonces veremos….

3. Colorear las instrucciones. Palabras reservadas del lenguaje

PHP aparecen en otro color en comparación con las variables.

33
Como se puede observar los colores de la palabra reservada public function es distinto a las
variables declaradas, la palabra reservada private también esta coloreada de otra forma

La etiqueta <?php también por lo que podemos notar diferencias de colores

4. Autocompletado. Deben probarse los siguientes tres(3)

escenarios:
a. Visualizar como el IDE muestra una ayuda para autocompletar una función o
instrucción propia de PHP.
b. Visualizar como el IDE muestra una ayuda sobre que parámetros tiene una función
o instrucción propia de PHP.
c. Escriba una clase que tenga mínimo cuatro (4) métodos, cada método recibe de
uno a varios parámetros. En una segunda clase se instancia un objeto de la
primera. Visualizar como el IDE muestra los métodos en el objeto y los
parámetros.

R// a) inicialmente instanciare la clase creando un objeto de tipo Employee y comenzaremos a

llamar a cada uno de los métodos de la clase para imprimir sus valores de retorno y veremos cómo
PHP storm nos autocompleta instrucciones propias de PHP

34
b)

Como vemos nos sugiere y nos dice cuáles son los parámetros que debe recibir al instanciar la
clase

Luego comenzamos a llamar cada uno de los métodos y vemos como nos autocompleta

35
36
c) con esta clase actual ya tenemos 4 métodos por lo tanto crearemos otra clase y desde esta
instanciaremos un objeto de la primera clase y luego veremos como el IDE completa
automáticamente los métodos que tiene ese objeto creado y los parámetros que debe recibir
este nuevo objeto (los cuales son los mismos de la clase Employee) ya que está heredando

CLASE NUEVA QUE EXTIENDE DE Employee

class Asisttant extends Employee
{
function getSaludoAsistente(){
return "Hola desde asistente";
}
}

Como podemos observar desde una clase aparte hemos heredado sobre la clase anterior y luego
hemos creado un objeto y el IDE nos autocompleta los métodos que tiene este objeto que hereda
los métodos de la clase Employee

37
 5. DEBUG EN PHP STORM

para estoy ya siguiendo los pasos anteriores de instalación de xdebug y la modificación del archivo
php.ini y la instalación de la extensión vamos a nuestro editor PHP storm y definimos un
punto de interrupción es decir hasta donde queremos que nuestro código se ejecute y
luego de eso podremos observar el valor de las variables creadas hasta ese momento del
código

38
para estoy volvemos a PHP STORM

Nos paramos en la línea hasta donde queremos ejecutar el código y presionamos CTRL+F8 o
damos click en el número de la línea hasta tener el punto rojo.

Una vez con esto ya tenemos definido nuestro punto de interrupción por lo tanto debemos dar
click en correr el proyecto.

39
Al dar click en run nuestro proyecto inicia como si nada si vamos al navegador observaremos el
print de nuestro código.

Ahora bien aquí en este momento con el código ejecutándose debemos activar el servidor de
xdebug para que empiece a escuchar las peticiones de nuestro proyecto, recuerden que el
archiv php.ini tiene un parámetro llamado xdebug.client_host=localhost que es del host de
donde escuchara peticiones por lo tanto para habilitar este modo escucha de xdebug
desde PHPSTORM debemos ir a PHPSTORM y dar click en el siguiente icono.

Damos click una vez realizado esto volvemos a nuestro navegador y vamos a la extensión xdebug
helper que ya habíamos descargado y la habilitamos.

40
Y damos click en Debug , una vez echo esto recargamos nuestra pagina , y volvemos a PHPSTORM.

Cuando se recargo la pagina en nuestro IDE nos saltara una ventana por primera vez que dice que
hay una conexión entrante de localhost hacia xdebug por lo tanto damos click en aceptar.

41
Para que esta conexión sea recibida y luego de esto podremos ver lo siguiente:

Aquí podemos ver el valor de las variables que existen hasta el punto de interrupción , como se
puede observar $asistente es un objeto con 4 atributos tenemos otras variables, y lo
interesante es que también podemos observar variables del servidor.

Si queremos continuar el código en ejecución después del punto de interrupion damos click en el
icono verde.

42
Con esto se limpia la consola del debugger y nuestro código igualmente sigue en ejecución.

Con esto damos por terminado las explicaciones necesarias para el desarrollo del proyecto.

43