2. Estructura de un proyecto

Frontend, backend y base de datos

Un proyecto web se define en 3 bloques importantes:

• Frontend — Es lo que el usuario ve. Se dibuja en el navegador con HTML y Tailwind o CSS: las páginas, los componentes, textos, etiquetas, formularios, botones, etc.
• Backend — Es la lógica por detrás. Corre en el servidor con PHP y se encarga de validar los datos, procesarlos y decidir qué mostrar.
• Base de datos — Es donde se guarda todo. Se encarga de guardar de forma permanente los datos en PostgreSQL: usuarios, productos, registros, etc.

El frontend pide algo, el backend lo procesa y la base de datos lo guarda o lo entrega. El usuario ve la respuesta.

No toda página necesita las tres capas

Existen páginas web estáticas, como este mismo sitio de apuntes, que se encargan solo de mostrar información. Es decir, no tienen backend ni base de datos.

Cómo se comunican estas tres capas

sequenceDiagram
    participant F as Frontend<br/>(HTML + Tailwind)
    participant B as Backend<br/>(PHP)
    participant D as Base de datos<br/>(PostgreSQL)
    F->>B: Solicitud HTTPS
    B->>D: Consulta SQL
    D-->>B: Filas encontradas
    B-->>F: Código de estado + datos
    Note over F,D: El frontend NUNCA habla<br/>directamente con la base de datos

1. El frontend le pide algo al backend a través de HTTPS.
2. El backend realiza una consulta SQL a la base de datos.
3. La base de datos le devuelve al backend los resultados de las filas consultadas.
4. El backend responde al frontend con un código de estado y los datos solicitados.

El frontend nunca habla directamente con la base de datos

Siempre pasa por el backend. Si el navegador pudiera conectarse a PostgreSQL, cualquier usuario podría leer o borrar la tabla completa: el navegador está en el computador del usuario y todo lo que hay ahí es visible y modificable.

El backend es el que valida quién pide qué, y es la razón por la que la contraseña de la base de datos vive en el servidor y nunca en el HTML.

¿Cómo se estructura un proyecto?

mi-proyecto/
├── index.php              Página de entrada del sitio
├── README.md              Qué es el proyecto y cómo se ejecuta
│
├── frontend/              Todo lo que ve el usuario
│   ├── css/
│   │   └── estilos.css
│   ├── js/
│   │   └── scripts.js
│   └── paginas/
│       ├── login.php
│       └── productos.php
│
├── backend/               La lógica del servidor
│   ├── config/
│   │   └── conexion.php   Conexión a PostgreSQL con PDO
│   ├── modelos/
│   │   └── producto.php
│   └── controladores/
│       └── productos.php
│
├── img/                   Imágenes del sitio
│   ├── logo.png
│   └── banner.jpg
│
└── sql/                   Scripts de la base de datos
    └── esquema.sql

La idea de fondo: una carpeta por responsabilidad. Si mañana necesitas cambiar cómo se ve un botón, sabes que eso está en frontend/css/. Si necesitas cambiar cómo se valida un formulario, está en backend/.

El proyecto crece con el curso

En el Trabajo 1 solo tendrás frontend/ e img/. La carpeta backend/ aparece en el Trabajo 2 y sql/ en el Trabajo 3. Empezar con la estructura completa te ahorra reordenar todo después.

Buenas prácticas para nombrar

Estas reglas no son cosmética: en un servidor Linux, un nombre mal escrito es una página que devuelve 404 y una tarde perdida buscando por qué.

Por qué cada regla

Sin espacios. En una URL, un espacio se convierte en %20. La dirección queda ilegible y propensa a romperse al copiarla.

Sin tildes ni ñ. No todos los servidores y sistemas de archivos codifican los caracteres especiales igual. Un archivo llamado diseño.html puede funcionar en tu computador y fallar al subirlo.

Todo en minúsculas. Esta es la que más problemas causa. Windows no distingue mayúsculas de minúsculas, pero Linux sí. Index.html e index.html son el mismo archivo en tu PC con Windows y dos archivos distintos en el servidor. Tu sitio funciona local y se cae al publicarlo.

Guion medio, no guion bajo. Los buscadores interpretan el guion medio como separador de palabras y el guion bajo como parte de la palabra.

index.html es un nombre reservado

Cuando alguien entra a misitio.cl/productos/, el servidor busca automáticamente index.html (o index.php) dentro de esa carpeta. Es el nombre que debe llevar la página principal de cada carpeta.

Checkpoint

Intenta responder antes de desplegar cada pregunta.

¿Qué es frontend, backend y base de datos?

• Frontend: lo que el usuario ve, dibujado en el navegador con HTML y CSS o Tailwind.
• Backend: la lógica que corre en el servidor con PHP; valida, procesa y decide qué mostrar.
• Base de datos: donde se guarda la información de forma permanente, con PostgreSQL.

¿Por qué conviene separar frontend y backend en el proyecto?

Por dos razones. Una de orden: cada carpeta tiene una responsabilidad, así sabes dónde buscar cuando hay que cambiar algo. Y otra de seguridad: todo lo que está en el frontend llega al computador del usuario y es visible; lo del backend se queda en el servidor, y por eso ahí viven las contraseñas y las validaciones.

¿Por qué los archivos se nombran sin espacios ni tildes?

Los espacios se convierten en %20 dentro de una URL, dejándola ilegible y propensa a romperse al copiarla. Las tildes y la ñ no se codifican igual en todos los servidores y sistemas de archivos: un archivo puede funcionar en tu computador y fallar al subirlo.

¿Cómo se comunica el frontend con el backend y la base de datos? Flujo completo.

1. El frontend le pide algo al backend por HTTPS.
2. El backend hace una consulta SQL a la base de datos.
3. La base de datos le devuelve al backend las filas encontradas.
4. El backend responde al frontend con un código de estado y los datos.

El frontend nunca habla directamente con la base de datos: siempre pasa por el backend.

¿Qué puede fallar si nombras un archivo Contacto.html y lo subes a un servidor Linux?

Que el enlace deje de funcionar y devuelva 404. Windows no distingue mayúsculas de minúsculas, pero Linux sí: si tu HTML enlaza a contacto.html y el archivo se llama Contacto.html, en tu PC funciona y en el servidor no. Es de los errores más difíciles de detectar, porque local todo se ve bien.