Nro.

DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 1

I. OBJETIVOS

○ Instalar Nginx y PHP en Ubuntu Server 20.04.

○ Crear páginas web de prueba que empleen PHP
○ Crear formularios HTML y procesar la información mediante PHP.

II. SEGURIDAD

Advertencia:
En este laboratorio está prohibida la manipulación de hardware, conexiones
eléctricas o de red; así como la ingestión de alimentos o bebidas.

III. NORMAS EMPLEADAS

○ No aplica

IV. RECURSOS
○ En el siguiente laboratorio se trabajará con un equipo que cuente VMWare Player
(mínimo versión 14).

V. METODOLOGÍA PARA EL DESARROLLO DE LA TAREA

○ El desarrollo del laboratorio es individual.
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 2

VI. PROCEDIMIENTO

● Se empleará una instancia de Ubuntu Server 20.04 para instalar Nginx y PHP.
● Haciendo uso de Visual Studio Code conectarse remotamente a dicha instancia, en caso lo
necesite puede usar la información adicional dada en la sección de módulos en el curso de
Canvas.

MÉTODO 1: Built-in PHP web server

Instalando PHP

● Para instalar PHP en el servidor, bastará con ejecutar el siguiente comando.

$ sudo apt install -y php-fpm

● En Ubuntu Server 20.04 no habrá necesidad de iniciar y habilitar los servicios relacionados
con PHP, el sistema operativo lo hace automáticamente.

Publicando la APP con PHP

● Primero nos aseguramos de tener una carpeta para nuestros archivos de PHP.
$ mkdir -p ~/Workplace/www-php/

● Con el programa Visual Studio Code genere una conexión a Ubuntu Server, y abra el
folder /home/tecsup/Workplace/www-php/

● Cree un archivo nuevo llamado form.php con el siguiente contenido.

 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 3

● Cree un segundo archivo con el nombre welcome.php que contenga lo siguiente:

● Abra la terminal en Visual Studio Code, y ejecute el siguiente comando:

Nota
Reemplazar la parte en rojo por sus datos.

$ php -S IP_Ubuntu_Server:8080

● En su navegador web abra una nueva pestaña con la siguiente URL

http://IP_Ubuntu_Server:8080/form.php
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 4

● Proporcione sus datos y de clic en el botón Enviar

● Realice un análisis de lo sucedido y añada capturas de pantalla con el resultado:

● Analice los mensajes mostrados en la consola de Visual Studio Code:

Muestra la ejecución de la pagina y cuando se envia el formulario

● En el archivo form.php cambie el valor de la atributo method de la etiqueta form por get
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 5

● En el archivo welcome.php cambiar todas las variables $_POST por $_GET

● Reinicie el servidor web de prueba presionando Ctrl + C en la consola de Visual Studio

Code y ejecute de nuevo el comando correspondiente.
● Vuelva a cargar la URL que se menciona en pasos anteriores y repite el proceso, ¿qué
nota de diferente?

La diferencia es que el método GET es Visible en la barra de direcciones en cambio

POST es invisible para el usuario

● Detenga el servidor web de pruebas que se está ejecutando en Visual Studio Code
presionando Ctrl + C

MÉTODO 2: Usando PHP por medio de NGINX

Instalando NGINX
● Nginx es un servidor web/proxy inverso ligero de alto rendimiento y un proxy para
protocolos de correo electrónico. Es software libre y de código abierto, licenciado bajo la
Licencia BSD simplificada; también existe una versión comercial distribuida bajo el nombre
de Nginx Plus.
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 6

● Para instalar la versión libre de Nginx en Ubuntu Server procedemos a ejecutar el siguiente
comando.
$ sudo apt install -y nginx

● En Ubuntu Server 20.04 no habrá necesidad de iniciar y habilitar el servicio web de Nginx,
el sistema operativo lo hace automáticamente.
● Bastará colocar la siguiente URL en el navegador web:
http://IP_Ubuntu_Server

● Debe obtener el siguiente resultado (la dirección IP en la imagen es referencial).

Configurando Nginx para que use PHP

● Procederemos añadiendo un bloque de servidor en Nginx dentro de /etc/nginx/sites-
available/. En este ejemplo utilizaremos un bloque de configuración llamado
ejemplo.xyz, pero esto puede cambiar según lo requerido por el usuario.
● En Visual Studio Code abra el folder /home/tecsup/Workplace/

Nota
En caso de no tener el directorio Workplace, deberá crearlo.

● Cree un archivo nuevo con nombre ejemplo.xyz que tenga el siguiente contenido.
server {
listen 80;
root /home/tecsup/Workplace/www;
index index.php index.html index.htm;
server_name ejemplo.xyz;

location / {
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 7

try_files $uri $uri/ =404;

}

location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
}

location ~ /\.ht {
deny all;
}
}

● Guardar los cambios.

● En Visual Studio Code cerramos la ventana del archivo ejemplo.xyz, y dentro de la
terminal copiamos dicho archivo al directorio adecuado y borramos el archivo original ya
que no se volverá a utilizar.
$ sudo cp ~/Workplace/ejemplo.xyz /etc/nginx/sites-available/
$ rm ~/Workplace/ejemplo.xyz

● Revisar la documentación de Nginx y explicar qué significa lo ingresado en el bloque de

configuración.
La primera línea de código indica en que puerto(puerto 80) va estar el
server,la siguiente línea indica su ubicación, la tercera linea seria como un inicio de o como
debe ser determinado el file,la cuarta indica el nombre del server, esta parte location
/ {try_files $uri $uri/ =404;}
Seria un error que indica que no se llegó a encontrar la página location
~ \.php$: este bloque de ubicación administra el procesamiento de
PHP real orientando Nginx al archivo de configuración fastcgi php.conf y al archivo
php7.2-fpm.sock, que declara el socket que
se asocia con php-fpm. el último bloque de ubicación maneja
archivos que Nginx no procesa.

● Al utilizar un bloque de configuración podemos mantener la configuración base sin modificar,

y en caso de ser necesario volver a activarla.
● Para activar el nuevo bloque de configuración procederemos a crear un enlace simbólico al
directorio /etc/nginx/sites-enabled/
$ sudo ln -s /etc/nginx/sites-available/ejemplo.xyz /etc/nginx/sites-enabled/

● Desenlazamos la configuración actual del directorio /etc/nginx/sites-enabled/

$ sudo unlink /etc/nginx/sites-enabled/default

● Probamos la configuración del nuevo bloque con el siguiente comando.

$ sudo nginx -t
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 8

● Si no hubiera problemas con el nuevo bloque de configuración, el comando anterior deberá

mostrar la siguiente salida.

● Caso contrario se deberá revisar la configuración, corregir los errores y volver a probar.
● Una vez la prueba del archivo de configuración sea exitosa, se procede a reiniciar el
servicio web para habilitar dicha configuración.
$ sudo systemctl restart nginx

Creando un archivo PHP de prueba

● Crearemos el archivo info.php dentro de la carpeta /home/tecsup/Workplace/www con
● Primero crearemos la carpeta que se indicó en la configuración dada a Nginx
$ mkdir -p ~/Workplace/www/

● Con Visual Studio Code genere un nuevo archivo de nombre info.php dentro de la carpeta
www.
● El contenido de dicho será el siguiente:

● Ahora podremos ver la página creada colocando la IP del servidor en el navegador web
seguido de /info.php
http://IP_Ubuntu_Server/info.php

● El resultado deberá mostrarse como la siguiente captura (la dirección IP de la imagen es

referencial)
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 9

● ¿Qué nota de diferente respecto al primer método?

Para ingresar a las paginas web que se crean no es necesario especificar el puerto.
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 10

Ejercicio Propuesto
● Crear un formulario que solicite un número de tres dígitos, dicha información debe ser
procesada en un script de PHP el cual encontrará la posición de la primera ocurrencia de
dicho número en los decimales de la constante PI, la página resultante deberá mostrar la
posición, además de los cuatro dígitos que anteceden al número dado y los cuatro dígitos
siguientes.
● Por ejemplo si se proporciona el número 926, la página debe mostrar que la primera
ocurrencia de dicho número se encuentra en la quinta posición, que le antecede los dígitos
1415 y que le siguen los dígitos 5359.
● Se calificará la presentación del formulario, así como el diseño de la página de respuesta.
● Se debe adjuntar la carpeta que contiene los documentos HTML, CSS, y PHP.
● Se debe documentar las partes más importantes de la página (formularios, scripts, css,
etc.)

NOTA
No se puede emplear JavaScript.
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 11

VII. OBSERVACIONES

● Para realizar el laboratorio se utilizo un equipo con conexión a internet.

● Para realizar el laboratorio se reviso el material de teoria.

● En el primer método para poder encontrar la página form.php, tuve que adicionar el
nombre de la carpeta en que se encontraba dicho archivo, ya que si solo colocaba
form.php se indicaba que la pagina no había sido encontrada.
● A mi parecer el segundo método es más fácil de realizar y conveniente.
● Tuve dificultades para realizar el ejercicio propuesto.

VIII. CONCLUSIONES

● Al realizar el laboratorio se aplicaron los conocimientos adquiridos en la sesión de teoría,

● PHP es un lenguaje de código abierto adecuado para el desarrollo web y que puede ser
incrustado en HTML.
● Uno de los beneficios de PHP es que nos proporciona un Fácil acceso a bases de datos
● Una de los beneficios de Nginx es que se puede configurar el equilibrio de carga para los
servidores http de escala rápida.
● Se instalo Nginx y PHP en Ubuntu Server 20.04.
● Se crearon paginas de prueba empleando PHP.
 Nro. DD-106
Desarrollo de Aplicaciones en Internet
Laboratorio 04 - PHP Parte I
Página 12

IX. REFERENCIAS

Drake, M. (2018, mayo 23). How To Install Linux, Nginx, MySQL, PHP (LEMP stack) on

Ubuntu 18.04. Recuperado 20 de marzo de 2019, de

https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-

lemp-stack-ubuntu-18-04

NGINX. (s. f.-a). PHP FastCGI Example [wiki]. Recuperado 20 de marzo de 2019, de

https://www.nginx.com/resources/wiki/start/topics/examples/phpfcgi/

NGINX. (s. f.-b). Server Block Examples [wiki]. Recuperado 20 de marzo de 2019, de

https://www.nginx.com/resources/wiki/start/topics/examples/server_blocks/

W3School. (s. f.). PHP 7 Tutorial [Wiki]. Recuperado 20 de marzo de 2019, de

https://www.w3schools.com/php7/default.asp