Programación Web • ITI-07 •

Clase Práctica: Instalación de un Servidor de Desarrollo Web

Objetivo de la práctica

En esta clase se instalará y utilizará un servidor de desarrollo web en la computadora del centro de cómputo.
El propósito es que el estudiante comprenda el funcionamiento básico de un entorno de desarrollo web, identificando sus componentes y observando su ejecución directamente en el navegador.

La sesión está enfocada en la práctica, priorizando el aprendizaje mediante la experimentación.

¿Qué se va a instalar hoy?

Un servidor de desarrollo web es un conjunto de programas que permiten ejecutar aplicaciones web de manera local, sin necesidad de publicarlas en internet.

El entorno de desarrollo que se utilizará incluye:

  • Un servidor web
  • Un lenguaje del lado del servidor
  • Un gestor de base de datos
  • Herramientas de administración

Todos estos componentes se encuentran integrados en un solo instalador.

Presiona aquí para descargar

Componentes que se verán en la práctica

Servidor web

Es el componente encargado de recibir las solicitudes del navegador y mostrar las páginas web correspondientes.
Cuando se accede a localhost, el servidor web es quien responde a la petición.

Lenguaje del lado del servidor (PHP)

PHP es un lenguaje que se ejecuta en el servidor y permite generar contenido dinámico.
Durante la práctica se creará un archivo PHP y se observará cómo el servidor interpreta su contenido antes de enviarlo al navegador.

Base de datos

La base de datos permite almacenar información de forma permanente.
En esta clase únicamente se verificará que el gestor de base de datos funciona correctamente y que puede establecerse una conexión desde PHP.

Archivos del proyecto

Las aplicaciones web se organizan en carpetas dentro del servidor.
Se identificará la ubicación correcta de los archivos y la forma adecuada de acceder a ellos desde el navegador.

Software que se utilizará

Para facilitar la instalación y configuración se usará un entorno de desarrollo integrado, como:

  • XAMPP
  • WAMP
  • Laragon
  • MAMP

Estos entornos permiten trabajar de forma inmediata sin configuraciones avanzadas.

Desarrollo de la práctica

En esta práctica se instalará el servidor de desarrollo y se comprobará su funcionamiento creando y ejecutando archivos PHP desde el navegador.

  1. Abre el software del servidor de desarrollo instalado en la computadora (XAMPP) e inicia el servicio Apache. Verifica que el servidor quede activo.

  2. Abre el navegador web y escribe en la barra de direcciones http://localhost.
    Si se muestra la página de inicio del servidor, el servidor web está funcionando correctamente.

  3. Localiza la carpeta raíz del servidor.

    • En XAMPP: C:\xampp\htdocs\
    • En Laragon: C:\laragon\www\

    Dentro de esta carpeta crea una carpeta con tu nombre_apellido y dentro de ella una subcarpeta llamada 1-practica-servidor.

  4. Dentro de la carpeta 1-practica-servidor crea un archivo llamado index.php.
    Abre el archivo con un editor de texto y escribe el siguiente código:

<?php
echo "<h1>Servidor de desarrollo funcionando</h1>";
echo "<p>Este mensaje fue generado con PHP.</p>";
echo "<p>Fecha y hora del servidor:</p>";
echo date("d/m/Y H:i:s");
?>
  1. Guarda los cambios y regresa al navegador. En la barra de direcciones escribe http://localhost/nombre_apellido/1-practica-servidor y presiona Enter. Si el servidor está funcionando correctamente, se mostrará el mensaje generado con PHP junto con la fecha y hora actuales.

Recuerda que los archivos PHP no deben abrirse con doble clic, siempre deben ejecutarse a través de localhost, ya que es el servidor quien interpreta el código.

Esta práctica será la base para las siguientes actividades del curso, por lo que a partir de ahora todo el desarrollo se realizará dentro del servidor de desarrollo web.

Uso básico de base de datos (comprobación)

En esta parte de la práctica verificaremos que el gestor de base de datos del servidor de desarrollo funciona correctamente y que PHP puede conectarse a él.

  1. Desde el panel de control del servidor de desarrollo (XAMPP), inicia el servicio MySQL.

  2. Abre el navegador y accede al administrador de base de datos escribiendo la siguiente dirección:

  3. En el panel de administración, crea una nueva base de datos con el nombre:

No es necesario crear tablas en este momento.

  1. Regresa a la carpeta 1-practica-servidor y crea un nuevo archivo llamado db.php.

  2. Abre el archivo db.php con un editor de texto y escribe el siguiente código:

<?php
$servidor = "localhost";
$usuario = "root";
$contrasena = "";
$base_datos = "practica_web";

$conexion = mysqli_connect($servidor, $usuario, $contrasena, $base_datos);

if ($conexion) {
    echo "<h2>Conexión a la base de datos exitosa</h2>";
} else {
    echo "<h2>Error al conectar con la base de datos</h2>";
}
?>

  1. Guarda los cambios y abre el navegador.

  2. Escribe la siguiente dirección: http://localhost/nombre_apellido/1-practica-servidor/db.php

Esta prueba solo verifica la conexión. No se realizarán consultas ni operaciones sobre datos en esta práctica.

Evidencia de la práctica

Entregar una captura de pantalla del navegador mostrando el resultado obtenido y las respuestas a la actividad de cierre indicada por el docente.