Tema 9. Desarrollo web en entorno servidor

Lope González Vázquez > ESO y Bachillerato > Programación y computación, 2º Bachillerato > Tema 9. Desarrollo web en entorno servidor

Currículo: esta unidad cubre parte de los saberes básicos del Bloque C – Desarrollo web (PRYC.2.C.2.3 y PRYC.2.C.2.4) correspondiente a 2º Bachillerato. Además, se evalúan los criterios que puedes encontrar al final de esta página.

Tabla de contenidos

Cuando desarrollas una página web con HTML, CSS y JavaScript, todo ocurre en el navegador del usuario: es lo que llamamos entorno cliente. Sin embargo, muchas de las aplicaciones que utilizas a diario —como redes sociales, tiendas online o plataformas de streaming— necesitan hacer algo más que mostrar información: deben guardar datos, procesarlos y responder de forma personalizada a cada usuario. Aquí es donde entra en juego el entorno servidor, una parte fundamental del desarrollo web que no ves directamente, pero que hace posible que Internet funcione tal y como lo conocemos.

En este tema vamos a introducirnos en ese “lado oculto” de las aplicaciones web para que tengas una visión global del desarrollo web que te permitirá entender cómo funcionan realmente las aplicaciones que usas cada día.

9.1. Introducción al desarrollo web en entorno servidor

En este primer apartado vamos a comprender qué ocurre “detrás de la pantalla” cuando accedes a una página web. Como acabamos de introducir, hasta ahora has trabajado con tecnologías que se ejecutan en tu propio navegador, pero muchas aplicaciones reales necesitan apoyarse en un servidor para funcionar correctamente.

9.1.1. Qué es el entorno servidor

Cuando hablamos de entorno servidor nos referimos al conjunto de programas y procesos que se ejecutan en un ordenador remoto (el servidor) y que se encargan de responder a las peticiones de los usuarios. Ese servidor está permanentemente conectado a Internet y preparado para recibir solicitudes desde navegadores u otras aplicaciones.

Cuando entras en una tienda online para ver tus pedidos, el navegador no tiene esa información guardada, por lo que envía una petición al servidor. Es el servidor el que busca tus datos en una base de datos, los procesa y devuelve una página personalizada con tu información.

Como ves, el servidor toma decisiones, genera contenido dinámico y envía archivos al navegador del usuario.

9.1.2. Diferencias entre entorno cliente y entorno servidor

Hasta ahora has trabajado principalmente en el entorno cliente, es decir, en el navegador. Para entender bien el cambio, conviene que insistamos una vez más comparando ambos enfoques.

  • Entorno cliente: se ejecuta en el navegador del usuario, utiliza tecnologías como HTML, CSS y JavaScript, y se encarga de la interacción directa con el usuario.
  • Entorno servidor: se ejecuta en una máquina remota, utiliza lenguajes como PHP, y se encarga de procesar datos, acceder a bases de datos y generar respuestas personalizadas.
  • Tipo de información: el cliente trabaja con lo que ya tiene cargado, mientras que el servidor puede acceder a información externa, como bases de datos o servicios web.
  • Seguridad: el código del cliente es visible para el usuario, mientras que el del servidor permanece oculto, lo que permite gestionar datos sensibles con mayor seguridad.

Por ejemplo, cuando inicias sesión en una red social, el formulario lo ves en el cliente, pero la comprobación de usuario y contraseña ocurre en el servidor.

9.1.3. Funcionamiento básico de una petición web (cliente-servidor)

Para entender cómo se comunican cliente y servidor, vamos a analizar el proceso paso a paso.

  1. Petición del cliente: el navegador solicita un recurso (por ejemplo, acceder a una página web).
  2. Procesamiento en el servidor: el servidor recibe la petición, ejecuta el código necesario (por ejemplo, PHP) y, si es necesario, consulta una base de datos (u otros servicios externos).
  3. Respuesta del servidor: el servidor genera una respuesta, normalmente en forma de HTML, y la envía al navegador.
  4. Renderizado en el cliente: el navegador interpreta ese HTML y lo muestra al usuario.

Este proceso ocurre continuamente cuando navegas por Internet, aunque normalmente no eres consciente de ello. Cada vez que actualizas una página, envías un formulario o consultas información personalizada, estás participando en este intercambio entre cliente y servidor.

9.2. Primeros pasos con PHP

En este apartado vamos a dar el salto desde la teoría del entorno servidor a una herramienta real. Empezaremos a trabajar con PHP, un lenguaje muy utilizado en desarrollo web que nos permitirá generar contenido dinámico desde el servidor.

9.2.1. Qué es PHP y para qué se utiliza

PHP es un lenguaje de programación que se ejecuta en el servidor y que está especialmente diseñado para el desarrollo web. Su principal función es generar contenido dinámico, es decir, páginas que no son siempre iguales, sino que cambian en función de la información que reciben.

Cuando el servidor ejecuta código PHP, el resultado que se envía al navegador es HTML.

💥Esto es importante: el usuario nunca ve el código PHP, solo el resultado final.

Por ejemplo, cuando accedes a una página que muestra tu nombre tras iniciar sesión, es PHP (u otro lenguaje de servidor) quien ha generado ese contenido de forma personalizada.

9.2.2. Instalación y entorno de trabajo (XAMPP o similar)

Para poder trabajar con PHP necesitamos simular un servidor en nuestro propio ordenador. Para ello utilizamos herramientas como XAMPP↗, que incluyen todo lo necesario para empezar a trabajar de forma sencilla. Instalando XAMPP tendremos todo lo necesario para reproducir un entorno de ejecución como si estuviéramos en producción, concretamente:

  • Servidor web (Apache): es el programa que se encarga de recibir las peticiones del navegador.
  • Intérprete de PHP: es el que ejecuta el código PHP y genera el resultado.
  • Base de datos (MySQL): nos permitirá almacenar información más adelante.

Una vez instalado XAMPP, trabajaremos dentro de una carpeta específica (normalmente llamada htdocs), donde colocaremos nuestros archivos PHP.

🖥️ Al acceder desde el navegador a http://localhost, estaremos realmente haciendo peticiones a nuestro propio servidor web.

9.2.3. Estructura básica de un archivo PHP

Un archivo PHP es muy similar a un archivo HTML, pero con la capacidad de incluir código que se ejecuta en el servidor. Este código se escribe entre unas etiquetas especiales.

<?php
echo "Hola, mundo";
?>

Cuando el servidor procesa este archivo, ejecuta el código PHP y genera el resultado, que en este caso sería un texto simple. Lo importante es entender que PHP no sustituye a HTML, sino que lo complementa.

Podemos combinar ambos:

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página PHP</title>
</head>
<body>
    <h1>
        <?php echo "Bienvenido a mi web"; ?>
    </h1>
</body>
</html>

Aquí PHP se encarga de generar parte del contenido dentro de una estructura HTML normal.

9.2.4. Integración de PHP con HTML

La verdadera potencia de PHP aparece cuando lo utilizamos para generar contenido dentro de una página web. Podemos usarlo para mostrar información, repetir elementos o adaptar la página según ciertas condiciones.

Por ejemplo, podemos usar PHP para mostrar distintos mensajes según una variable:

<?php
$nombre = "María";
?>
<h1><?php echo "Hola, " . $nombre; ?></h1>

De esta forma, la página deja de ser estática y pasa a ser dinámica, ya que el contenido depende de los datos que maneja el servidor.

Este será el punto de partida para todo lo que veremos a continuación: recibir información del usuario, procesarla y generar respuestas personalizadas.

9.3. Fundamentos básicos de programación en PHP

Una vez que ya sabes cómo se integra PHP dentro de una página web, el siguiente paso es comprender los elementos básicos de programación que nos permitirán construir lógica en el servidor. Veremos que muchos de estos conceptos ya te resultan familiares, porque son comunes a otros lenguajes como JavaScript.

La diferencia principal es que ahora todo se ejecuta en el servidor.

Por ello, vamos a pasar muy rápido y sin pararnos demasiado en los detalles.

9.3.1. Variables y tipos de datos

En PHP, las variables se utilizan para almacenar información que puede cambiar durante la ejecución del programa. Todas las variables comienzan con el símbolo $, lo que permite identificarlas fácilmente.

<?php
$nombre = "Carlos";
$edad = 18;
$altura = 1.75;
$es_estudiante = true;
?>

PHP es un lenguaje con tipado dinámico, lo que significa que no necesitas indicar el tipo de dato al declarar la variable. Aun así, es importante que identifiques los tipos más habituales:

  • Cadenas de texto: para representar texto, como nombres o mensajes.
  • Números: enteros o decimales.
  • Booleanos: valores de verdadero o falso.

Estos datos serán la base para construir cualquier aplicación.

9.3.2. Operadores básicos

Los operadores permiten realizar operaciones con variables y valores. En PHP encontramos los mismos tipos que ya conoces.

  • Operadores aritméticos: permiten realizar cálculos (suma, resta, multiplicación, división).
  • Operadores de comparación: sirven para comparar valores (igual, distinto, mayor que, etc.).
  • Operadores lógicos: permiten combinar condiciones (AND, OR, NOT).

Por ejemplo:

<?php
$edad = 20;
if ($edad >= 18) {
    echo "Eres mayor de edad";
}
?>

Aquí estamos utilizando un operador de comparación dentro de una condición.

9.3.3. Estructuras de control (condicionales y bucles)

Las estructuras de control permiten tomar decisiones o repetir acciones. Son fundamentales para que el programa no sea simplemente una secuencia lineal.

  • Condicionales (if, else): permiten ejecutar código solo si se cumple una condición.
  • Bucles (for, while): permiten repetir una acción varias veces.

Ejemplo de bucle:

<?php
for ($i = 1; $i <= 5; $i++) {
    echo "Número: " . $i . "<br>";
}
?>

Este código genera una lista de números del 1 al 5.

9.3.4. Funciones sencillas en PHP

Las funciones permiten agrupar código para reutilizarlo. Esto es especialmente útil cuando una misma operación se repite varias veces.

<?php
function saludar($nombre) {
    return "Hola, " . $nombre;
}
echo saludar("Ana");
?>

Aquí hemos definido una función que recibe un parámetro y devuelve un mensaje. De esta forma, puedes reutilizarla tantas veces como necesites.

Con estos elementos —variables, operadores, estructuras de control y funciones— ya tienes la base necesaria para empezar a construir lógica en el servidor.

A partir de aquí, las cosas se empiezan a poner interesantes.

9.4. Interacción con formularios

Hasta ahora hemos trabajado con páginas que generan contenido dinámico desde el servidor, pero sin interacción real con el usuario. Ahora vamos a ver cómo el usuario puede introducir información en la web para que el servidor la procese. Este mecanismo es la base de prácticamente cualquier aplicación web, desde un inicio de sesión hasta un formulario de compra.

9.4.1. Envío de datos desde HTML (GET y POST)

Los formularios HTML permiten recoger información del usuario y enviarla al servidor. Para ello utilizamos la etiqueta <form>, que define cómo se envían los datos.

Existen dos métodos principales de envío:

  • Método GET: envía los datos a través de la URL. Es visible y tiene limitaciones de tamaño.
  • Método POST: envía los datos de forma interna, sin mostrarlos en la URL, siendo más adecuado para información sensible.

Por ejemplo:

<form action="procesar.php" method="POST">
    <input type="text" name="nombre">
    <input type="submit" value="Enviar">
</form>

Cuando el usuario envía el formulario, los datos se envían al archivo procesar.php.

9.4.2. Recogida y uso de datos en PHP

Una vez que el formulario se envía, PHP puede recoger esos datos utilizando variables especiales llamadas superglobales.

  • $_GET: permite acceder a los datos enviados mediante GET.
  • $_POST: permite acceder a los datos enviados mediante POST.

Ejemplo:

<?php
// Archivo: procesar.php
$nombre = $_POST["nombre"];
echo "Hola, " . $nombre;
?>

Aquí el servidor recoge el nombre introducido por el usuario y genera una respuesta personalizada.

9.4.3. Validación básica de formularios

Uno de los aspectos más importantes al trabajar con formularios es asegurarse de que los datos recibidos son correctos. Esto se conoce como validación.

  • Comprobación de campos vacíos: evita procesar formularios incompletos.
  • Tipo de datos: verifica que el formato sea el adecuado (por ejemplo, un número o un correo electrónico).
  • Seguridad básica: evita introducir código malicioso o datos inesperados.

Por ejemplo:

<?php
if (empty($_POST["nombre"])) {
    echo "El nombre es obligatorio";
} else {
    echo "Hola, " . $_POST["nombre"];
}
?>

Con este tipo de comprobaciones evitamos errores y mejoramos la fiabilidad de nuestras aplicaciones.

9.5. Introducción al acceso a bases de datos

Todos los datos con los que hemos trabajado se generaban y se utilizaban en el momento, pero se perdían cuando la página se recargaba. Sin embargo, la mayoría de aplicaciones necesitan guardar información de forma permanente: usuarios, contraseñas, pedidos, mensajes, etc. Para ello utilizamos bases de datos.

Vamos a ver cómo conectar PHP con una base de datos y realizar operaciones básicas que nos permitan gestionar información persistente.

9.5.1. Qué es una base de datos en una aplicación web

Una base de datos es un sistema que permite almacenar, organizar y consultar información de forma estructurada. En el contexto web, el servidor utiliza la base de datos para guardar datos que deben mantenerse en el tiempo (de ahí lo de datos persistentes).

Por ejemplo, cuando creas una cuenta en una plataforma, tus datos no se guardan en el navegador, sino en una base de datos en el servidor. Cada vez que vuelves a iniciar sesión, el servidor consulta esa base de datos para comprobar tus credenciales.

Nosotros trabajaremos con MySQL, el sistema de gestión de bases de datos que más se utiliza en proyectos PHP.

9.5.2. Conexión básica a MySQL desde PHP

Para poder trabajar con una base de datos, lo primero que necesitamos es establecer una conexión desde PHP.

Esta conexión actúa como un puente entre nuestro programa y la base de datos.

<?php
$conexion = new mysqli("localhost", "root", "", "mi_base_de_datos");
if ($conexion->connect_error) {
    die("Error de conexión: " . $conexion->connect_error);
}
?>

En este ejemplo estamos indicando:

  • Servidor: localhost (nuestro propio ordenador).
  • Usuario: root (usuario por defecto en XAMPP).
  • Base de datos: el nombre de la base de datos que vamos a utilizar.

Si la conexión falla, el programa se detiene y muestra un mensaje de error.

9.5.3. Inserción y consulta de datos

Una vez conectados, podemos ejecutar consultas SQL desde PHP. Estas consultas nos permiten insertar y recuperar información.

Ejemplo de inserción:

<?php
$sql = "INSERT INTO usuarios (nombre) VALUES ('Ana')";
$conexion->query($sql);
?>

Ejemplo de consulta:

<?php
$resultado = $conexion->query("SELECT nombre FROM usuarios");
while ($fila = $resultado->fetch_assoc()) {
    echo $fila["nombre"] . "<br>";
}
?>

Aquí estamos recorriendo los resultados obtenidos de la base de datos y mostrándolos en pantalla.

9.6. Introducción a las APIs y servicios web

Las bases de datos que acabamos de usar estaban en servidores que formaban parte de nuestra infraestructura de red o para los que tenemos permisos de gestión. Sin embargo, muchas aplicaciones modernas no funcionan de forma aislada, sino que se comunican con otros servicios de terceros a través de Internet.

Por ejemplo, cuando una web muestra el tiempo, resultados deportivos o canciones, en muchos casos esa información no está en su propia base de datos, sino que la obtiene de otro servidor externo.

Vamos a introducir este concepto mediante el uso de APIs.

9.6.1. Qué es una API

Una API (Application Programming Interface) es un conjunto de reglas que permite que dos aplicaciones se comuniquen entre sí. En el contexto web, una API permite que un servidor proporcione datos para que otros programas los utilicen.

Por ejemplo, una aplicación del tiempo puede obtener información meteorológica desde una API externa en lugar de recoger los datos directamente. De esta forma, evitamos que cada persona tenga una estación meteorológica instalada en su casa y reutilizamos un servicio ya existente.

Podemos entender una API como un “intermediario”: haces una petición y recibes una respuesta con datos estructurados.

9.6.2. Concepto de REST

Muchas APIs actuales siguen el modelo REST, que define una forma estándar de acceder a los recursos a través de Internet utilizando el protocolo HTTP.

En este modelo, cada recurso (por ejemplo, usuarios, canciones o películas) tiene una dirección única, y podemos realizar acciones sobre él mediante distintos tipos de peticiones.

  • GET: para obtener información.
    • Por ejemplo, esta petición devuelve las canciones más populares de un artista en Spotify:
      GET https://api.spotify.com/v1/artists/{id}/top-tracks
  • POST: para enviar datos.
    • Por ejemplo, esta petición podría registrar a un nuevo usuario en una aplicación:
      POST https://miweb.com/api/usuarios
  • PUT: para modificar información existente.
    • Por ejemplo, esta petición podría actualizar los datos de un usuario existente:
      PUT https://miweb.com/api/usuarios/15
  • DELETE: para eliminar datos.
    • Por ejemplo, esta petición podría borrar un recurso concreto:
      DELETE https://miweb.com/api/usuarios/15

Aunque en este tema no profundizaremos en todos ellos, es importante que comprendas que las APIs utilizan este sistema para organizar la comunicación.

9.6.3. Consumo básico de APIs desde PHP

PHP permite realizar peticiones a APIs externas y obtener datos que luego podemos utilizar en nuestra aplicación. Normalmente, estos datos se reciben en formato JSON.

Por ejemplo, cómo obtener un chiste de Chuck Norris cada vez que hacemos una petición:

[🙏 Pido perdón por la calidad de los chistes]

<?php
$url = "https://api.chucknorris.io/jokes/random";
$respuesta = file_get_contents($url);
$datos = json_decode($respuesta, true);
echo $datos["value"];
?>

En este caso, PHP realiza una petición a una API pública, recibe una respuesta en formato JSON y extrae un dato para mostrarlo en la web.

9.6.4. Uso conjunto de PHP y JavaScript para mostrar datos

En aplicaciones reales, es habitual combinar PHP y JavaScript para trabajar con APIs. PHP puede encargarse de obtener los datos desde el servidor, mientras que JavaScript puede utilizarlos para mostrarlos de forma dinámica en la página.

Por ejemplo, una web que muestra canciones puede obtener los datos desde una API y, mediante JavaScript, mostrarlos en pantalla sin recargar la página completa.

Vamos a hacerlo, ¿por qué no?

Primero, creamos un archivo PHP que actúe como intermediario entre la API y nuestra web. Por ejemplo, llamémosle obtener_canciones.php 👇

<?php
$artista = "coldplay";
$url = "https://itunes.apple.com/search?term=" . urlencode($artista) . "&entity=song&limit=5";

$respuesta = file_get_contents($url);
echo $respuesta;
?>

Este archivo realiza una petición a la API de iTunes y devuelve directamente los datos en formato JSON.

Ahora creamos la página web que consumirá esos datos, digamos index.html 👇

<!DOCTYPE html>
<html>
<head>
    <title>Canciones desde API</title>
</head>
<body>

<h1>Top canciones</h1>
<button onclick="cargarCanciones()">Cargar canciones</button>

<ul id="lista"></ul>

<script>
function cargarCanciones() {
    fetch("obtener_canciones.php")
        .then(respuesta => respuesta.json())
        .then(datos => {
            const lista = document.getElementById("lista");
            lista.innerHTML = "";

            datos.results.forEach(cancion => {
                const li = document.createElement("li");
                li.textContent = cancion.trackName + " - " + cancion.artistName;
                lista.appendChild(li);
            });
        });
}
</script>

</body>
</html>

En este ejemplo ocurre lo siguiente:

  • PHP: se conecta con la API externa y obtiene los datos.
  • JavaScript: hace una petición a nuestro PHP usando fetch().
  • Procesamiento: los datos JSON se convierten en objetos JavaScript.
  • Visualización: se crean elementos HTML dinámicamente sin recargar la página.

Cuando el usuario pulsa el botón, la página no se recarga, pero aparece una lista de canciones. Esto es exactamente el comportamiento que vemos en aplicaciones reales como Spotify o YouTube.

Con todo lo anterior ya tienes una base conceptual suficiente como para construir una amplia variedad de aplicaciones web que resuelvan necesidades reales de los usuarios.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *