3. Directory Structure
Estructura de un Proyecto Web con PHP
📚 Tema del Tutorial:
"Estructura de Directorios y Configuración Inicial de un Proyecto Web con PHP"
🎯 Objetivo de Aprendizaje
Al final de este tutorial, entenderás:
Cómo organizar carpetas en un proyecto web
La diferencia entre backend y frontend
Cómo configurar un servidor local con XAMPP
Cómo crear y ejecutar tu primer archivo PHP
📂 Parte 1: Entendiendo la Estructura de Directorios
¿Por qué necesitamos organizar carpetas?
Imagina tu proyecto como una casa:
Raíz del proyecto = La dirección de la casa
Backend = La cocina (donde se prepara la comida/la lógica)
Frontend = El comedor (donde se sirve y se ve la comida)
Archivos CSS/JS/Imágenes = La decoración de la casa
Estructura de tu proyecto MyWhisper:
text
MyWhisper/ ← 📍 DIRECTORIO RAÍZ (tu "casa")
├── backend/ ← 🍳 COCINA (PHP, lógica del servidor)
│ ├── classes/ ← 📚 LIBROS DE RECETAS (clases PHP)
│ └── init.php ← 📋 LISTA DE COMPRAS (configuración)
├── frontend/ ← 🛋️ COMEDOR (lo que ven los usuarios)
│ ├── style/ ← 🎨 DECORACIÓN (CSS)
│ └── images/ ← 🖼️ FOTOS/CUADROS (imágenes)
├── index.php ← 🚪 PUERTA PRINCIPAL (página de inicio)
└── view.php ← 🪟 OTRA HABITACIÓN (página de resultados)
💻 Parte 2: Configurando el Entorno de Desarrollo
Paso 1: Instalar XAMPP (tu "casa virtual")
XAMPP es como un simulador de casa en tu computadora:
Apache = El "mayordomo" que sirve las páginas
MySQL = El "archivador" que guarda datos
PHP = El "cocinero" que prepara la lógica
Descarga XAMPP desde: https://www.apachefriends.org
Paso 2: Ubicar la carpeta htdocs
Después de instalar XAMPP:
text
C:/xampp/htdocs/ ← 📍 Aquí van TODOS tus proyectos
Analogía: htdocs es como un edificio de apartamentos, y cada proyecto es un apartamento diferente.
Paso 3: Crear tu carpeta del proyecto
bash
# En Windows:
1. Abre el Explorador
2. Ve a C:/xampp/htdocs/
3. Crea nueva carpeta llamada "MyWhisper"
Ejemplo visual:
text
EDIFICIO XAMPP
├── 📁 htdocs/ (edificio)
│ ├── 📁 proyecto1/ (apartamento 101)
│ ├── 📁 proyecto2/ (apartamento 102)
│ └── 📁 MyWhisper/ (TU apartamento) ← ¡Aquí trabajas!
🔨 Parte 3: Creando la Estructura Paso a Paso
Paso 4: Crear las carpetas principales
Dentro de MyWhisper/, crea:
text
📁 backend/
📁 frontend/
📄 index.php
Explicación sencilla:
backend/ = "Detrás del escenario" (los actores preparándose)
frontend/ = "En el escenario" (lo que ve el público)
index.php = "El actor principal" (la primera página que ven)
Paso 5: Dentro de backend/
text
📁 backend/
├── 📁 classes/ ← 🧰 CAJA DE HERRAMIENTAS (funciones reutilizables)
└── 📄 init.php ← 🔌 ENCHUFE PRINCIPAL (conecta todo)
Ejemplo en código:
php
// init.php - El "enchufe" que conecta todo
<?php
require 'classes/Whisper.php'; // ← Trae la herramienta Whisper
$whisperObj = new Whisper; // ← Prepara la herramienta para usar
?>
Paso 6: Dentro de frontend/
text
📁 frontend/
├── 📁 style/ ← 🎨 PINCELES Y PINTURAS (diseño)
│ └── style.css ← 📋 LIBRO DE DISEÑO (reglas visuales)
└── 📁 images/ ← 🖼️ GALERÍA DE ARTE (imágenes, iconos)
🚀 Parte 4: Tu Primer Archivo PHP - index.php
Concepto clave: ¿Qué es PHP?
PHP es como un chef en la cocina:
HTML/CSS/JS = Los ingredientes crudos
PHP = El chef que cocina y mezcla los ingredientes
Resultado = Un plato listo para servir
Creando index.php paso a paso:
Paso 1: La estructura básica
php
<?php
// Esto es COCINA (PHP - backend)
echo "Hola Mundo"; // ← El chef prepara un saludo
?>
Paso 2: Añadiendo HTML (el plato)
php
<!DOCTYPE html>
<html>
<head>
<title>Mi Primer PHP</title>
</head>
<body>
<?php
// PHP DENTRO de HTML = Chef trabajando en la cocina
$mensaje = "¡Bienvenido!"; // ← Variable = ingrediente
echo "<h1>" . $mensaje . "</h1>"; // ← Chef sirve el plato
?>
</body>
</html>
Paso 3: En nuestro proyecto MyWhisper:
php
// Así comienza index.php en MyWhisper
<?php
include 'backend/init.php'; // ← Trae toda la configuración
if($_SERVER['REQUEST_METHOD'] === "POST"){
// Si alguien envía un formulario...
// ¡Aquí procesamos el archivo de audio/video!
}
?>
<!DOCTYPE html>
<!-- El resto es HTML normal -->
🌐 Parte 5: Probando tu Proyecto
Paso 7: Iniciar XAMPP
Abre el Panel de Control de XAMPP
Haz clic en "Start" en Apache
Verifica que esté en verde (como un semáforo en verde)
Estado del semáforo XAMPP:
🔴 Rojo = Apagado
🟡 Amarillo = Problemas
🟢 Verde = ¡Funcionando!
Paso 8: Acceder a tu proyecto
En tu navegador web:
text
http://localhost/MyWhisper/
O si tienes index.php:
text
http://localhost/MyWhisper/index.php
Analogía de la URL:
http:// = "Quiero visitar una casa"
localhost = "En mi ciudad local"
MyWhisper/ = "La casa llamada MyWhisper"
index.php = "La puerta principal"
🎨 Parte 6: Esquema Visual de Cómo Funciona
text
USUARIO (Tú)
|
↓ (Escribe URL)
NAVEGADOR (Chrome/Firefox)
|
↓ (Pide página)
SERVIDOR XAMPP (Apache)
|
↓ (Busca archivos)
CARPETA MyWhisper/
|
↓ (Ejecuta PHP)
index.php ← Aquí empieza la magia
|
↓ (Incluye otros archivos)
backend/init.php
|
↓ (Crea objetos)
classes/Whisper.php
|
↓ (Devuelve HTML)
NAVEGADOR ← ¡Página mostrada!
Flujo de datos como una cadena de producción:
text
[USUARIO sube archivo] → [Frontend recibe] → [Backend procesa]
↑ ↓
[Usuario ve resultado] ← [Frontend muestra] ← [PHP termina]
📝 Parte 7: Ejercicio Práctico - Crea tu Propia Estructura
Ejercicio 1: Proyecto "Mi Blog"
Crea esta estructura:
text
MiBlog/
├── backend/
│ ├── database/ (para conexión a BD)
│ └── functions/ (funciones útiles)
├── frontend/
│ ├── css/
│ ├── js/
│ └── images/
├── index.php (página principal)
├── about.php (sobre mí)
└── contact.php (contacto)
Ejercicio 2: Archivo de prueba
En index.php escribe:
php
<?php
echo "<h1>Mi Primer Blog</h1>";
echo "<p>Fecha: " . date('d/m/Y') . "</p>";
?>
Luego visita: http://localhost/MiBlog/
❓ Parte 8: Cuestionario de Evaluación
Pregunta 1:
¿Qué representa la carpeta backend/ en nuestra analogía de la casa?
a) El jardín
b) La cocina ✅
c) El dormitorio
d) El garaje
Explicación: Backend es donde se "cocina" la lógica, como la cocina en una casa.
Pregunta 2:
¿Dónde se deben guardar los archivos PHP según lo aprendido?
a) En cualquier carpeta de Windows
b) En C:/xampp/htdocs/tu_proyecto/ ✅
c) En el Escritorio
d) En Documentos
Pregunta 3:
¿Qué hace la línea include 'backend/init.php';?
a) Crea una nueva página
b) Trae/configura herramientas PHP necesarias ✅
c) Borra archivos temporales
d) Cambia el diseño visual
Pregunta 4:
Si Apache en XAMPP está en ROJO, significa:
a) Todo funciona perfecto
b) Hay advertencias
c) El servidor está apagado ✅
d) Necesita más memoria
Pregunta 5:
¿Cuál es la función principal de index.php?
a) Almacenar imágenes
b) Ser la página principal/puerta de entrada ✅
c) Guardar configuraciones de base de datos
d) Contener solo CSS
🎉 Resumen Final - Reglas de Oro
📍 Ubicación: Siempre en htdocs/ dentro de XAMPP
📂 Organización: Separa backend (lógica) de frontend (vista)
🚪 Entrada: index.php es la puerta principal
🔧 Configuración: Usa archivos como init.php para configurar
🌐 Prueba: Siempre usa http://localhost/tu_proyecto/
Analogía Final:
Tu proyecto web es como un restaurante:
Backend = Cocina (chefs/PHP preparando)
Frontend = Comedor (mesas/HTML listas)
XAMPP = El edificio del restaurante
Navegador = Cliente que viene a comer
Tú = ¡El dueño del restaurante!
📚 Recursos Adicionales
Para practicar más:
Cambia colores en frontend/style/style.css
Modifica el mensaje de bienvenida en index.php
Añade una nueva página about.php
Experimenta con diferentes estructuras de carpetas
Preguntas para reflexionar:
¿Qué pasaría si pones index.php dentro de backend/?
¿Cómo organizarías un proyecto más grande?
¿Qué otras carpetas podrías necesitar?
¡Felicidades! 🎊 Ahora entiendes la estructura básica de un proyecto web PHP. ¡Sigue practicando!
Nota para el principiante: Cada gran desarrollador empezó con un simple "Hola Mundo". Tómate tu tiempo, experimenta, comete errores y aprende de ellos. ¡Tú puedes!
Comentarios
Publicar un comentario