Tutorial #3: Estructura de Carpetas para tu Aplicaci贸n de Video Chat

 

Tutorial #3: Estructura de Carpetas para tu Aplicaci贸n de Video Chat

馃幆 Introducci贸n

¡Bienvenido de nuevo! En esta lecci贸n, vamos a crear la estructura de carpetas para nuestra aplicaci贸n de video chat.

En la lecci贸n anterior, instalamos XAMPP con Apache y MySQL. Ahora, vamos a organizar nuestros archivos de manera profesional para comenzar a desarrollar.

馃搨 Paso 1: Ubicar la Carpeta htdocs

1.1 ¿D贸nde est谩 htdocs?

La carpeta htdocs es donde guardamos todos los archivos de nuestros sitios web locales.

Sistema OperativoRuta Predeterminada
馃獰 WindowsC:\xampp\htdocs\
馃崕 macOS/Applications/XAMPP/htdocs/
馃惂 Linux/opt/lampp/htdocs/

1.2 Navegar a htdocs

Windows 馃獰

text
C:\ → xampp → htdocs

macOS 馃崕

text
Aplicaciones → XAMPP → htdocs

Linux 馃惂

bash
cd /opt/lampp/htdocs/

馃梻️ Paso 2: Crear la Carpeta del Proyecto

2.1 Nombre del Proyecto

Vamos a llamar a nuestra carpeta: vchat (video chat)

text
馃搧 vchat/     ← Carpeta principal del proyecto

2.2 Crear la Carpeta

Opci贸n 1: Desde el Explorador de Archivos

  1. Navega a htdocs

  2. Haz clic derecho → Nueva carpeta

  3. N贸mbrala: vchat

Opci贸n 2: Desde Terminal (Windows)

cmd
cd C:\xampp\htdocs\
mkdir vchat

Opci贸n 3: Desde Terminal (Linux/macOS)

bash
cd /opt/lampp/htdocs/
mkdir vchat

馃彈️ Paso 3: Estructura Completa de Carpetas

Vamos a crear la siguiente estructura:

text
馃搧 vchat/                          ← Ra铆z del proyecto
│
├── 馃搧 assets/                     ← Recursos del frontend
│   ├── 馃搧 css/                    ← Archivos CSS
│   │   └── style.css
│   ├── 馃搧 js/                     ← Archivos JavaScript
│   │   ├── app.js
│   │   └── webrtc.js
│   └── 馃搧 images/                 ← Im谩genes y avatares
│       └── default-avatar.png
│
├── 馃搧 core/                       ← L贸gica del backend
│   └── 馃搧 classes/                ← Clases PHP
│       ├── Database.php
│       ├── User.php
│       └── Call.php
│
├── 馃搧 websocket/                  ← Servidor WebSocket (Node.js)
│   ├── server.js
│   └── package.json
│
├── 馃搧 includes/                   ← Archivos incluidos
│   ├── config.php
│   └── functions.php
│
├── 馃搧 api/                        ← Endpoints API
│   ├── get_users.php
│   └── get_user.php
│
├── 馃搧 uploads/                    ← Subidas de usuarios
│   └── profiles/
│
├── 馃搫 index.php                   ← P谩gina principal
├── 馃搫 login.php                   ← Login
├── 馃搫 register.php                ← Registro
├── 馃搫 profile.php                 ← Perfil de usuario
├── 馃搫 logout.php                  ← Cerrar sesi贸n
└── 馃搫 .htaccess                   ← Configuraci贸n Apache

馃枼️ Paso 4: Crear las Carpetas (Pr谩ctico)

4.1 Crear la Estructura desde el Explorador

Windows 馃獰

text
C:\xampp\htdocs\vchat\
    ├── assets\
    │   ├── css\
    │   ├── js\
    │   └── images\
    ├── core\
    │   └── classes\
    ├── includes\
    ├── api\
    └── uploads\
        └── profiles\

macOS 馃崕

text
/Applications/XAMPP/htdocs/vchat/
    ├── assets/
    │   ├── css/
    │   ├── js/
    │   └── images/
    ├── core/
    │   └── classes/
    ├── includes/
    ├── api/
    └── uploads/
        └── profiles/

4.2 Crear con Comandos (Linux/macOS)

bash
cd /opt/lampp/htdocs/
mkdir -p vchat/{assets/{css,js,images},core/classes,includes,api,uploads/profiles}

4.3 Crear con Comandos (Windows - PowerShell)

powershell
cd C:\xampp\htdocs\
New-Item -ItemType Directory -Path "vchat\assets\css","vchat\assets\js","vchat\assets\images","vchat\core\classes","vchat\includes","vchat\api","vchat\uploads\profiles" -Force

馃摑 Paso 5: Crear el Archivo de Prueba

5.1 Crear index.php

En la carpeta ra铆z vchat/, crea el archivo index.php

php
<!-- vchat/index.php -->
<?php
// Esto es solo una prueba
echo "<h1>馃殌 ¡Hola Mundo!</h1>";
echo "<p>El servidor est谩 funcionando correctamente.</p>";
echo "<p>Estamos listos para construir nuestra aplicaci贸n de video chat.</p>";
?>

5.2 Crear un .htaccess (Opcional)

apache
# vchat/.htaccess
RewriteEngine On

# Redirecci贸n de URLs amigables
RewriteRule ^perfil/([0-9]+)/?$ profile.php?id=$1 [L]

# Proteger carpetas sensibles
<FilesMatch "\.(sql|log|ini)$">
    Order allow,deny
    Deny from all
</FilesMatch>

# Permitir subida de archivos
<Directory "uploads">
    Options -Indexes
</Directory>

# Configuraci贸n de errores
ErrorDocument 404 /vchat/404.html

✅ Paso 6: Probar el Servidor

6.1 Asegurar que Apache est茅 corriendo

Windows

  1. Abre el XAMPP Control Panel

  2. Verifica que Apache est茅 con fondo verde

  3. Si no, haz clic en "Start"

macOS

  1. Abre XAMPP Manager

  2. Verifica que Apache est茅 encendido

Linux

bash
sudo /opt/lampp/lampp status
# Busca: Apache...ok.

6.2 Abrir el Navegador

Escribe en la barra de direcciones:

text
http://localhost/vchat/

Resultado esperado:

text
馃殌 ¡Hola Mundo!
El servidor est谩 funcionando correctamente.
Estamos listos para construir nuestra aplicaci贸n de video chat.

6.3 Verificar la Lista de Archivos

Si ves una lista de archivos en lugar de "Hola Mundo", significa que no hay archivo index.php o que la configuraci贸n de Apache permite listar directorios.

Para desactivar el listado de directorios:

apache
# En .htaccess
Options -Indexes

馃Ч Paso 7: Limpieza y Organizaci贸n

7.1 Archivos Temporales

Crea un archivo README.md para documentar tu proyecto:

markdown
# Video Chat con PHP y WebRTC

## 馃搵 Descripci贸n
Aplicaci贸n de video chat en tiempo real usando WebRTC, PHP y WebSockets.

## 馃搧 Estructura del Proyecto
- `/assets` - Recursos est谩ticos (CSS, JS, im谩genes)
- `/core` - Clases PHP
- `/includes` - Configuraci贸n y funciones
- `/api` - Endpoints API
- `/uploads` - Archivos subidos por usuarios

## 馃殌 Instalaci贸n
1. Clonar en htdocs
2. Importar database.sql
3. Iniciar servidor WebSocket
4. Abrir en navegador

7.2 Configuraci贸n de Git (Opcional)

bash
cd C:\xampp\htdocs\vchat
git init
echo "uploads/" > .gitignore
echo "*.log" >> .gitignore

馃搳 Resumen de la Estructura

¿Para qu茅 sirve cada carpeta?

CarpetaProp贸sitoContenido
馃搧 assets/Recursos est谩ticosCSS, JavaScript, im谩genes
馃搧 core/classes/Clases PHPDatabase, User, Call
馃搧 includes/Configuraci贸nconfig.php, functions.php
馃搧 api/Endpointsget_users.php, get_user.php
馃搧 uploads/Archivos de usuariosAvatares, im谩genes de perfil
馃搧 websocket/Servidor WebSocketserver.js, package.json

¿Qu茅 archivos vamos a crear?

ArchivoFunci贸n
index.phpP谩gina principal con lista de usuarios
login.phpFormulario de inicio de sesi贸n
register.phpFormulario de registro
profile.phpPerfil de usuario con opci贸n de llamada
logout.phpCerrar sesi贸n
api/get_users.phpObtener todos los usuarios
api/get_user.phpObtener un usuario espec铆fico

馃幆 Verificaci贸n Final

Lista de Verificaci贸n

  • □

    ¿XAMPP est谩 instalado?

  • □

    ¿Apache est谩 corriendo?

  • □

    ¿MySQL est谩 corriendo?

  • □

    ¿Creaste la carpeta vchat en htdocs?

  • □

    ¿Creaste todas las subcarpetas?

  • □

    ¿Creaste index.php?

  • □

    ¿Puedes ver "Hola Mundo" en http://localhost/vchat/?

Si todo funciona, ¡Felicidades! 馃帀

Has configurado correctamente la estructura de tu proyecto de video chat. Est谩s listo para comenzar a programar.

馃啒 Soluci贸n de Problemas

Error: "No se puede acceder a la carpeta"

Soluci贸n: Verifica los permisos de la carpeta

bash
# Linux
sudo chmod -R 755 /opt/lampp/htdocs/vchat

# Windows
# Haz clic derecho → Propiedades → Seguridad → Editar permisos

Error: "404 Not Found"

Soluci贸n:

  1. Verifica que el archivo existe

  2. Comprueba la URL: http://localhost/vchat/

  3. Reinicia Apache

Error: "No se muestra Hello World"

Soluci贸n:

  1. Aseg煤rate de que el archivo se llame index.php

  2. Verifica que tenga la extensi贸n .php, no .txt

  3. Comprueba que Apache est茅 ejecut谩ndose

馃挕 Consejos para Organizaci贸n

Buenas Pr谩cticas

  1. Nombres consistentes: Usa min煤sculas para carpetas

  2. Separa responsabilidades: Backend en core/, frontend en assets/

  3. C贸digo limpio: Mant茅n los archivos ordenados y comentados

  4. Control de versiones: Usa Git desde el principio

  5. Backups: Guarda tu trabajo frecuentemente

Estructura de Nombres de Archivos

text
✅ Bien:   User.php, Database.php, Call.php
❌ Mal:    userclass.php, data_base.php, clase_de_llamada.php

✅ Bien:   get_users.php, get_user.php
❌ Mal:    getusers.php, getUser.php

✅ Bien:   style.css, app.js
❌ Mal:    cssstyles.css, javascript.js

馃摎 Resumen

En esta lecci贸n hemos:

  1. ✅ Localizado la carpeta htdocs

  2. ✅ Creado la carpeta principal vchat

  3. ✅ Establecido la estructura completa de carpetas

  4. ✅ Creado un index.php de prueba

  5. ✅ Verificado que el servidor funciona

馃殌 Pr贸ximo Paso

En la siguiente lecci贸n, vamos a:

  • Configurar la base de datos MySQL

  • Crear la tabla de usuarios

  • Establecer la conexi贸n PHP con MySQL

Comentarios

Publicar un comentario

Entradas m谩s populares de este blog

Tutorial Completo: Chat de Video en Vivo con PHP + WebRTC

   Tutorial Completo: Chat de Video en Vivo con PHP + WebRTC 馃幆 Lo que Construir谩s Hola, soy Aizaz Dinho y en este tutorial te mostrar茅 c贸mo crear un chat de video en vivo con PHP y WebRTC . Al finalizar, tendr谩s una aplicaci贸n completa con: ✅ Sistema de login de usuarios ✅ Lista de usuarios en l铆nea ✅ Llamadas de video P2P (Peer-to-Peer) ✅ Notificaciones en tiempo real ✅ Estado "ocupado" durante llamadas ✅ URLs amigables para perfiles ✅ WebSockets para comunicaci贸n instant谩nea 馃搵 Requisitos Previos PHP 7.4+ con extensiones: pdo_mysql , json , mbstring MySQL 5.7+ o MariaDB Node.js (para el servidor WebSocket) Navegador moderno (Chrome, Firefox, Edge) Conocimientos b谩sicos de PHP, JavaScript y HTML 馃彈️ Estructura del Proyecto text video-chat/ ├── assets/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ ├── app.js │ │ └── webrtc.js │ └── images/ │ └── default-avatar.png ├── includes/ │ ├── config.php │ ├── database.php │ └── functions.php ├── webso...
Leer m谩s