Tutorial #2: Instalación del Servidor Web Local (XAMPP)

🎯 Introducción

¡Bienvenido de nuevo! En esta lección, vamos a instalar un servidor web local en nuestra computadora para ejecutar PHP y MySQL (MariaDB) y así poder construir nuestra aplicación de video chat.

Nota: Si ya tienes un servidor web local instalado (como XAMPP, WAMP, MAMP o Laragon), puedes saltar este tutorial.

📦 ¿Qué es XAMPP?

XAMPP es una solución de servidor web open source (código abierto) que crea un entorno de servidor en tu computadora local para ejecutar:

PHP (y otros lenguajes)
MySQL / MariaDB (base de datos)
Apache (servidor web)
Perl (opcional)

Es la herramienta perfecta para desarrollar aplicaciones web sin necesidad de un servidor remoto.

🔍 Paso 1: Descargar XAMPP

1.1 Buscar XAMPP en Google

Abre tu navegador y ve a Google
Busca: XAMPP o xampp download
El primer resultado debería ser: apachefriends.org

1.2 Acceder al Sitio Oficial

https://www.apachefriends.org/

https://www.apachefriends.org/images/xampp-logo-ac398edf.svg

1.3 Seleccionar tu Sistema Operativo

XAMPP está disponible para:

Sistema Operativo	Versión	Descripción
🪟 Windows	8.2.12	Incluye PHP 8.2, Apache 2.4, MariaDB 10.4
🍎 macOS	8.2.12	Para Intel y Apple Silicon (M1/M2)
🐧 Linux	8.2.12	Para Ubuntu, Debian, Fedora, etc.

https://www.apachefriends.org/images/download.png

⬇️ Paso 2: Descargar e Instalar XAMPP

2.1 Para Windows 🪟

Haz clic en "XAMPP for Windows"
Descarga el instalador (archivo .exe de ~150MB)
Ejecuta el instalador como administrador
Sigue las instrucciones del asistente:

📋 Opciones de instalación:

✅ Componentes recomendados:
   ☑ Apache
   ☑ MySQL
   ☑ PHP
   ☑ phpMyAdmin
   ☑ Webalizer (opcional)

❌ No necesitas:
   ☐ FileZilla (servidor FTP)
   ☐ Mercury (servidor de correo)
   ☐ Tomcat (Java)

Carpeta de instalación: C:\xampp (por defecto)
Haz clic en "Next" y espera a que termine

2.2 Para macOS 🍎

Haz clic en "XAMPP for OS X"
Descarga el archivo .dmg
Abre el archivo descargado
Arrastra XAMPP a la carpeta Applications
Abre XAMPP desde Launchpad

2.3 Para Linux 🐧

Ubuntu / Debian

# Descargar el instalador
wget https://sourceforge.net/projects/xampp/files/XAMPP%20Linux/8.2.12/xampp-linux-x64-8.2.12-0-installer.run

# Hacer ejecutable
chmod +x xampp-linux-x64-8.2.12-0-installer.run

# Ejecutar como root
sudo ./xampp-linux-x64-8.2.12-0-installer.run

Fedora / CentOS / RHEL

# Descargar el instalador
wget https://sourceforge.net/projects/xampp/files/XAMPP%20Linux/8.2.12/xampp-linux-x64-8.2.12-0-installer.run

# Hacer ejecutable
chmod +x xampp-linux-x64-8.2.12-0-installer.run

# Ejecutar como root
sudo ./xampp-linux-x64-8.2.12-0-installer.run

🚀 Paso 3: Iniciar XAMPP

3.1 Windows - Panel de Control

Después de la instalación, abre el XAMPP Control Panel:

Busca en el menú inicio: "XAMPP Control Panel"
O ve a C:\xampp\xampp-control.exe

https://www.apachefriends.org/images/xampp-control-panel.png

3.2 Iniciar los Servicios Necesarios

Para nuestra aplicación necesitamos DOS servicios:

Servicio	Icono	Descripción
🟢 Apache	🐘	Servidor web para ejecutar PHP
🟢 MySQL	🐬	Base de datos para almacenar usuarios

Pasos:

Haz clic en "Start" al lado de Apache
Haz clic en "Start" al lado de MySQL

Resultado esperado: Ambos servicios deben aparecer con fondo verde y estado "Running"

✅ Apache    - Running (Puerto 80, 443)
✅ MySQL     - Running (Puerto 3306)

3.3 macOS - XAMPP Manager

Abre XAMPP desde Applications
Haz clic en "Start" en Apache
Haz clic en "Start" en MySQL

https://www.apachefriends.org/images/xampp-macos.png

3.4 Linux - Terminal

# Iniciar XAMPP
sudo /opt/lampp/lampp start

# Salida esperada:
# Starting XAMPP for Linux 8.2.12...
# XAMPP: Starting Apache...ok.
# XAMPP: Starting MySQL...ok.
# XAMPP: Starting ProFTPD...ok.

Comandos útiles de Linux:

# Detener XAMPP
sudo /opt/lampp/lampp stop

# Reiniciar XAMPP
sudo /opt/lampp/lampp restart

# Ver estado
sudo /opt/lampp/lampp status

✅ Paso 4: Verificar la Instalación

4.1 Probar Apache

Abre tu navegador web
Escribe en la barra de direcciones:
text
```
http://localhost/
```
o
text
```
http://127.0.0.1/
```
Deberías ver la página de bienvenida de XAMPP

https://www.apachefriends.org/images/xampp-dashboard.png

4.2 Probar PHP

Crea un archivo de prueba:

Ve a la carpeta de XAMPP:
- Windows: C:\xampp\htdocs\
- macOS: /Applications/XAMPP/htdocs/
- Linux: /opt/lampp/htdocs/
Crea un archivo llamado info.php

<?php
phpinfo();
?>

Abre en el navegador:
text
```
http://localhost/info.php
```
Deberías ver una página con toda la información de PHP

4.3 Probar MySQL

Abre phpMyAdmin:
text
```
http://localhost/phpmyadmin/
```
Deberías ver la interfaz de phpMyAdmin
Credenciales por defecto:
- Usuario: root
- Contraseña: (vacío)

🛠️ Paso 5: Solucionar Problemas Comunes

5.1 Error: "Puerto 80 en uso"

Problema: Otro programa (como Skype o IIS) está usando el puerto 80.

Soluciones:

Opción 1: Cambiar el puerto de Apache

# Editar: C:\xampp\apache\conf\httpd.conf
# Buscar: Listen 80
# Cambiar a: Listen 8080

# Luego acceder a:
http://localhost:8080/

Opción 2: Liberar el puerto

# Abrir CMD como administrador
netstat -ano | findstr :80
# Anotar el PID y finalizar el proceso
taskkill /PID [PID] /F

5.2 Error: "MySQL no inicia"

Problema: El puerto 3306 está ocupado o hay problemas con los datos.

Soluciones:

Opción 1: Cambiar puerto

# Editar: C:\xampp\mysql\bin\my.ini
# Buscar: port=3306
# Cambiar a: port=3307

Opción 2: Recrear base de datos

# Hacer backup de: C:\xampp\mysql\data\
# Eliminar y reiniciar XAMPP

5.3 Error: "Access denied for user 'root'"

Solución: Resetear la contraseña de root

# Detener MySQL
# Ir a: C:\xampp\mysql\bin\
# Ejecutar:
mysqld --skip-grant-tables
# En otra terminal:
mysql -u root
FLUSH PRIVILEGES;
ALTER USER 'root'@'localhost' IDENTIFIED BY '';

5.4 Error en Linux: "Permission denied"

# Dar permisos a la carpeta de XAMPP
sudo chmod -R 755 /opt/lampp/htdocs/

# Cambiar propietario (opcional)
sudo chown -R $USER:$USER /opt/lampp/htdocs/

📁 Paso 6: Estructura de Carpetas

Donde guardamos nuestros proyectos:

Sistema	Ruta	Descripción
Windows	`C:\xampp\htdocs\`	Archivos de tus proyectos
macOS	`/Applications/XAMPP/htdocs/`	Archivos de tus proyectos
Linux	`/opt/lampp/htdocs/`	Archivos de tus proyectos

Ejemplo:

htdocs/
├── proyecto1/
│   └── index.php
├── proyecto2/
│   └── index.html
└── video-chat/          ← Nuestro proyecto
    ├── index.php
    ├── login.php
    └── ...

Acceso en el navegador:

http://localhost/video-chat/

🎯 Paso 7: Configuración Adicional (Recomendado)

7.1 Activar extensiones PHP

Edita php.ini (C:\xampp\php\php.ini):

; Buscar y descomentar (quitar el punto y coma)
extension=curl
extension=gd
extension=mbstring
extension=mysqli
extension=openssl
extension=pdo_mysql
extension=zip

; Ajustar límites
upload_max_filesize = 100M
post_max_size = 100M
memory_limit = 256M
max_execution_time = 300

7.2 Configurar Virtual Hosts (Opcional)

Crea un dominio local para tu proyecto:

Editar C:\xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/video-chat"
    ServerName videochat.local
    <Directory "C:/xampp/htdocs/video-chat">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Editar C:\Windows\System32\drivers\etc\hosts

127.0.0.1   videochat.local

Reiniciar Apache

Ahora puedes acceder a:

http://videochat.local/

📊 Resumen Rápido

Verificación de Instalación

✅ Verificación	URL	Resultado Esperado
Apache	`http://localhost/`	Página XAMPP
PHP	`http://localhost/info.php`	Información PHP
MySQL	`http://localhost/phpmyadmin/`	phpMyAdmin UI

Comandos Rápidos

Acción	Windows	macOS	Linux
Iniciar	Panel de Control	App	`sudo /opt/lampp/lampp start`
Detener	Panel de Control	App	`sudo /opt/lampp/lampp stop`
Estado	Panel de Control	App	`sudo /opt/lampp/lampp status`

❓ Preguntas Frecuentes

¿Puedo usar WAMP o MAMP en lugar de XAMPP?

Sí, cualquiera funciona:

WAMP: Windows + Apache + MySQL + PHP
MAMP: macOS + Apache + MySQL + PHP
Laragon: Alternativa moderna para Windows

¿Necesito instalar PHP por separado?

No, XAMPP ya incluye PHP, MySQL y Apache.

¿Puedo tener varias versiones de PHP?

Sí, pero es más avanzado. Para este curso, la versión incluida funciona perfecto.

¿Es seguro usar XAMPP en producción?

NO, XAMPP es solo para desarrollo. Para producción usa un hosting profesional.

¿Qué puertos usa XAMPP?

Apache: Puerto 80 (HTTP) y 443 (HTTPS)
MySQL: Puerto 3306

🆘 Obtener Ayuda

Si tienes problemas durante la instalación:

Comunidad XAMPP: Apache Friends Forums
Stack Overflow: Busca tu error específico
Documentación oficial: Apache Friends Docs
Mis cursos: Puedes dejar tu pregunta en la sección de comentarios

🎉 Conclusión

¡Excelente! Has instalado XAMPP y tienes un servidor web local funcionando:

✅ Apache corriendo (servidor web)
✅ MySQL corriendo (base de datos)
✅ PHP instalado (backend)
✅ phpMyAdmin (gestión de base de datos)

Ahora estás listo para comenzar a desarrollar tu aplicación de video chat. En la siguiente lección, configuraremos la base de datos y comenzaremos con el código PHP.

📝 Notas Importantes

⚠️ IMPORTANTE: Recuerda que XAMPP solo es para DESARROLLO LOCAL. Nunca lo uses en producción sin configuraciones de seguridad adicionales.

🔒 Seguridad: Para producción, necesitarás HTTPS, firewall y configuración segura de MySQL.

🖥️ Requisitos de sistema: XAMPP funciona en Windows 7+, macOS 10.10+, y Linux con kernel 2.6+.