El primer paso es simple: acepta el momento en el que estás
Si eres estudiante de DAW y sientes un bloqueo a la hora de empezar tu proyecto, no te preocupes, es algo bastante habitual. Nos puede pasar a tod@s, sea cual sea el nivel o el punto de la carrera en el que estés. Muchas veces dan ganas de mandarlo todo a la #$%dfh… Te entiendo perfectamente. Quizás no has tenido suerte con tu centro educativo, tus profesores pasan de todo y el temario parece sacado de una cápsula del tiempo (si en tu examen aún mencionan Flash, ya sabes de qué hablo).
Esa frustración, sumada a las prisas, está creando una brecha enorme:
- Gente que hace copy-paste de la IA sin entender ni una línea de código.
- Gente que se rinde porque se siente incapaz.
La mala calidad del temario y la falta de tiempo nos están robando el aprendizaje real. A eso súmale la falsa sensación de “efectividad instantánea” que predomina hoy en día; queremos resultados ya, sin entender el cómo.
Mi humilde opinión es que no necesitas crear el nuevo Netflix ni tener una idea increíble en tu primer intento. Y, sobre todo, no te compares con los demás. Hay gente muy buena, es cierto. Pero tu meta hoy no es innovar ni tener el nivel de otros: es entender las bases y hacer que el proceso no duela. Te vale con mejorar el nivel que tenías ayer. Esta aventura es solo contigo mismo.
Háztelo fácil: utiliza las tecnologías básicas, sin añadidos
Hay mil formas de empezar, pero si te sientes perdid@, mi consejo es: aplica lo que te han enseñado, pero aplícalo bien. No te compliques con frameworks que ni siquiera entiendes. Vamos a volver a lo básico, a lo que te da el control: HTML, CSS, JavaScript, MySQL y… sí, PHP. Sé que algunas personas se asustan al leer PHP, pero créeme, en estos ciclos en España te enseñan cosas mucho más obsoletas y dolorosas. Además, PHP es moderno y perfecto para entender cómo se conecta un backend con una base de datos de verdad.
1. La estructura de carpetas
Antes de escribir código como un loco, organiza tu proyecto. Vamos a usar nombres en inglés, porque así es como te vas a encontrar el mundo real ahí fuera. Empezar con orden es clave. Y ojo, que aún no sabemos de qué va a ir nuestro proyecto, pero si tenemos un patrón claro a la hora de estructurar y trabajar en él, nuestro proyecto ya no parte desde la nada absoluta. ¿No te sientes ya un poco mejor?
Abre tu editor de código favorito y crea la estructura de carpetas y archivos que te comparto a continuación:
daw-project/
├── assets/ <-- Tus recursos estáticos
│ ├── icons/ <-- Iconos (svg, png pequeños...)
│ └── img/ <-- Imágenes, fotos, fondos...
├── css/
│ └── styles.css <-- Estilos
├── includes/
│ └── db.php <-- El "enchufe" a la base de datos
├── js/
│ └── main.js <-- Tu lógica de frontend
├── .gitignore <-- Lo que Git debe ignorar
└── index.php <-- La base de tu web1.1 ¿Para qué sirve cada carpeta?
No hemos organizado las carpetas así por estética. En el desarrollo real, cada cosa tiene su sitio para que, cuando tu proyecto crezca, no se convierta en una pesadilla. Aquí tienes el motivo de cada elección:
- assets/: Es tu almacén de recursos estáticos.
- icons/: Para archivos pequeños como el favicon o iconos SVG. Tenerlos separados te ayuda a no mezclarlos con las fotos.
- img/: Aquí van las fotografías, fondos y capturas. Si mañana tienes 50 fotos, agradecerás que no estén flotando en la raíz del proyecto.
- css/: Solo para tus hojas de estilo. Fíjate que hemos usado styles.css (en plural). Es una convención: dentro podrías tener más adelante un
reset.csso unlayout.css. - includes/: Esta carpeta es vital en PHP. Aquí guardamos archivos que no son páginas completas, sino “piezas” o herramientas que vamos a reutilizar (como la conexión a la base de datos o un menú que se repite). Es código que el usuario nunca debería cargar directamente en el navegador.
- js/: Tu lógica de Frontend. Al separarlo del HTML, mantienes el código limpio y fácil de depurar.
- .gitignore: Este es tu “seguro de vida” frente a Git. Sirve para decirle al control de versiones qué archivos no debe subir (como carpetas de configuración de VS Code o archivos temporales). Es un hábito de programador profesional que te ahorrará sustos.
- index.php: Es el corazón. El servidor busca este archivo por defecto para arrancar tu web. Al ser
.php, nos permite mezclar el HTML de toda la vida con la lógica que traeremos de la base de datos más adelante.
2. El archivo .gitignore
Este archivo nos sirve para mantener limpio nuestro proyecto. Como ya lo hemos creado previamente en nuestra estructura, vamos a darle contenido. No queremos que cuando subamos el proyecto a GitHub (o se lo pases a un profesor), se llene de “basura” del sistema o de archivos de configuración de tu editor que a nadie más le sirven.
Sería genial poder pararnos un poco más en esto, pero el tiempo apremia, así que te invito a que busques más información sobre todas las ventajas y aspectos de seguridad que nos permite al añadir un archivo .gitignore en la raíz de nuestro proyecto.
Abre tu archivo .gitignore y pega este bloque, pero ojo aplica solo lo que necesites según tu sistema operativo o editor de código:
# Archivos basura del sistema (Mac)
.DS_Store
# Archivos basura del sistema (Windows)
Thumbs.db
# Configuración de tu editor (VS Code / Cursor / etc)
.vscode/
.idea/
# Archivos temporales de PHP o logs de error
*.log3. El “enchufe” maestro: db.php
Para que tu web deje de ser HTML estático y empiece a mostrar datos reales, necesitamos conectar PHP con MySQL. En clase seguramente te hayan enseñado mysqli. Es importante que sepas que, aunque en el mundo profesional existen alternativas más “modernas” como PDO, usar mysqli es totalmente válido y, sobre todo, es lo que ya conoces y lo que conoce el profesor o profesora que te va a corregir el proyecto. Pero te invito a que mires alternativas más modernas con PHP. De cualquier manera, para el proyecto de DAW, usar mysqli es totalmente válido.
Por cierto, vamos a usar datos genéricos porque es un proyecto académico. En un entorno profesional, la conexión con la BD la haríamos de otra forma, y por supuesto no utilizaríamos datos por defecto. No hace falta aclararlo, pero por si acaso.
Abre tu archivo includes/db.php y mete este código:
<?php
// 1. Datos de conexión (Ajusta según uses XAMPP, MAMP o WAMP)
$host = 'localhost';
$user = 'root';
$password = ''; // En XAMPP suele estar vacío '', en MAMP es 'root'
$db = 'my_project_db';
// 2. Crear la conexión (Estilo orientado a objetos)
$conn = new mysqli($host, $user, $password, $db);
// 3. Forzar el charset para no tener problemas con eñes o acentos
$conn->set_charset("utf8mb4");
// 4. Comprobar si la conexión ha fallado
if ($conn->connect_error) {
die("Vaya, algo ha fallado en la conexión: " . $conn->connect_error);
}Por cierto, nota importante, este código dará error si intentas ejecutarlo ahora mismo porque aún no hemos creado la base de datos. Vamos a ello en el siguiente paso.
4. phpMyAdmin y puesta en marcha
Vamos a utilizar phpMyAdmin para crear y gestionar nuestra base de datos. La interfaz es muy sencilla e intuitiva. Así que por suerte aquí no suele haber mucha confusión. Pero antes, vamos a poner en marcha nuestro servidor local para que podamos correr en el navegador nuestra aplicación web y además poder gestionar y conectarla con nuestra base de datos.
Para que esto funcione, hay dos reglas de oro que no nos podemos saltar:
- La ubicación importa: Tu carpeta
daw-projecttiene que estar dentro de la carpetahtdocsde tu servidor local. Si usas XAMPP en Windows suele serC:/xampp/htdocs/y en Mac con MAMP es/Applications/MAMP/htdocs/. Si la creas en otro sitio, el navegador no la encontrará. - Encender los motores: Abre el panel de XAMPP o MAMP y dale a “Start” en los módulos de Apache y MySQL. Tienen que estar en verde.
- Ojo con la URL: Una vez arrancado, entra en tu navegador a
localhost/phpmyadmin. Si te da error, mira los puertos en tu panel de control. Si usas MAMP, lo normal es que tengas que ponerlocalhost:8888/phpmyadmin. Si en XAMPP has cambiado el puerto porque el 80 estaba ocupado, puede que sealocalhost:8080/phpmyadmin.
En clase te han enseñado a usar XAMPP. Si eres usuario de Mac, aunque hay alternativas más modernas como HERD, puedes intentar usar XAMPP también. Pero si te da algún tipo de problema prueba con MAMP. Más adelante en tu carrera verás que todo esto se puede arreglar utilizando Docker, pero bueno, solo lo menciono ya que ahora mismo no estamos en ese punto.
Una vez arrancado, entra en tu navegador a localhost/phpmyadmin. Comprueba en “Cuentas de usuario” que el usuario root que vamos a utilizar tenga todos los privilegios. Si te da algún tipo de error cuando probemos a traer los datos de nuestra tabla, comprueba que todo esto esté correcto (aunque por defecto viene así, por si acaso).
Bien, pues siguiendo el menú que tenemos al entrar en phpMyAdmin, lo siguiente es crear una nueva base de datos desde la pestaña “Bases de datos”. Es muy fácil: ahí tienes el botón de crear y el campo para poner el nombre. En nuestro caso de ejemplo, habíamos puesto: my_project_db.
Es vital que coincida exactamente con el nombre que configuraste en el archivo db.php. El cotejamiento (collation) suele venir configurado por defecto, pero si no, asegúrate de marcarlo como utf8mb4_general_ci. Esto es lo que nos asegura que los acentos y las eñes no se rompan.
4.1. Creando nuestra primera tabla
Ahora que tienes el “contenedor” (my_project_db), necesitamos una tabla con datos para que nuestro index.php tenga algo que mostrar. Pero ojo, que aquí es donde mucha gente se equivoca:
Antes de nada, haz clic en el nombre de tu base de datos (my_project_db) en el menú de la izquierda. Tienes que estar “dentro” de ella para que las tablas se creen en el sitio correcto.
Una vez dentro, sigue estos pasos:
- Ve a la pestaña superior que pone “SQL”.
- Pega este código que te dejo aquí abajo. He preparado un par de tareas de ejemplo para que veas contenido en pantalla nada más empezar.
- Dale al botón “Continuar” (abajo a la derecha).
-- 1. Creamos la tabla 'tasks'
CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT
);
-- 2. Metemos un par de filas de ejemplo
INSERT INTO tasks (title, description) VALUES
('Aprender PHP', 'Entender por fin cómo funciona la conexión a BD.'),
('Terminar el proyecto de DAW', 'No morir en el intento y sacar un 10.');
Si lo has hecho bien, verás que en el menú de la izquierda, debajo de my_project_db, ahora aparece la tabla tasks. Ya tienes datos reales listos para ser usados.
5. Tu primera página dinámica: index.php
Ahora viene lo bueno. Vamos a comprobar que el “enchufe” funciona. Como previamente a este paso ya tenemos la tabla tasks creada y nuestro archivo de conexión db.php configurado, es el momento de volver a nuestro editor de código y abrir el archivo index.php. Dentro de este archivo, copia el código que tienes a continuación, luego abre el navegador web y escribe http://localhost/daw-project para ver el resultado:
<?php
// 1. Importamos la conexión que creamos antes
require_once 'includes/db.php';
// 2. Lanzamos una consulta simple para traer datos
$query = "SELECT * FROM tasks";
$result = $conn->query($query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Proyecto DAW</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Mis Tareas</h1>
<div class="container">
<?php if ($result->num_rows > 0): ?>
<ul>
<?php while($row = $result->fetch_assoc()): ?>
<li>
<strong><?php echo htmlspecialchars($row['title']); ?></strong>:
<?php echo htmlspecialchars($row['description']); ?>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>No hay tareas que mostrar, ¡ponte a trabajar!</p>
<?php endif; ?>
</div>
<script src="js/main.js"></script>
</body>
</html>¿Qué acaba de pasar aquí?
Si has recargado la página y ves tus datos, enhorabuena: ya tienes un proyecto Full Stack.
Has pasado de tener archivos sueltos a tener una comunicación real:
HTML -> PHP -> MySQL. Lo que ves en el bucle while es la base de casi todo lo que harás en la gran mayoría de proyectos. Y sí, así es como se puede crear con PHP, y si estuviésemos usando Vue, Astro, React u otra tecnología lo haríamos con una sintaxis diferente, pero el concepto base, que es lo importante, sería el mismo. Básicamente lo que estamos haciendo es recuperar en el Frontend cada fila que nos devuelve la base de datos. Utilizamos fetch_assoc y la pintamos en el HTML hasta que no queden más.
Por cierto, un último consejo más: Trabajando con PHP moderno, podemos evitar tener que utilizar echo todo el rato. Para el pequeño ejemplo que hemos visto está bien pero con una aplicación grande cualquier ahorro de sintaxis nos puede venir genial. El cambio que permite PHP es sustituir echo cuando queremos añadir una variable dentro de etiquetas HTML. Esto se conoce como “Short Echo Tag”.
- Apertura: <?=
- Cierre: ?>
<?php
$soyUnaVariableQueTeSaluda = 'Hola';
?>
<p><?= $soyUnaVariableQueTeSaluda ?></p>A partir de aquí, no hay límites, puedes ir añadiendo a tu proyecto todo aquello que necesites. Como consejo, en este post lo que hemos visto es cómo arrancar nuestro proyecto. Ahora que tienes los conceptos básicos claros, sería el momento de pensar realmente qué idea quieres desarrollar. Y ponerte a pensar en qué tablas necesita tu proyecto. Una vez tengas clara esa parte, el asunto de conectar el Frontend con el Backend ya está resuelto.
Lo que ahora tocaría sería añadir formularios para guardar los datos de los usuarios que utilicen nuestra aplicación, borrar registros de la base de datos y sobre todo añadir CSS para crear una interfaz agradable para el usuario. También puedes incluir algo de JavaScript para alguna interacción que necesites. Ya dejamos preparado un archivo de JavaScript, por el momento no incluimos nada, pero ya tienes la estructura base preparada.
Pues bueno, si llegaste hasta aquí y el código te funciona, felicidades, has superado por fin esa maldita barrera inicial. Espero que mi explicación te haya podido ayudar y solventar algunas dudas. Ahora viene la parte divertida, hemos conectado los dos mundos front y back (la parte técnica) pero es el momento de crear y pensar qué quieres desarrollar (la parte creativa).
Mucha suerte con el proyecto 🌪️
