¿Te gustaría crear una aplicación web sencilla pero funcional desde cero? En este artículo aprenderás a desarrollar una calculadora de gastos en PHP y HTML, ideal para quienes están comenzando en el mundo del desarrollo backend y quieren practicar con algo útil.
Este proyecto te enseñará a trabajar con formularios, procesar datos con PHP, mostrar resultados en tiempo real y, si quieres ir más allá, a guardar la información en archivos. Además, este tipo de aplicación puede evolucionar en muy poco tiempo hacia un completo sistema de presupuestos personales o familiares.
¿Qué es una calculadora de gastos y para qué sirve?
Una calculadora de gastos es una herramienta que permite llevar un registro organizado de los gastos que vas ingresando, sumándolos de forma automática. De esta manera, puedes saber cuánto dinero estás utilizando y en qué lo estás invirtiendo.
Aplicaciones como esta son el primer paso hacia soluciones más grandes como apps de finanzas, hojas de presupuesto interactivas o incluso pequeños ERPs caseros. Por eso, es ideal para desarrolladores que quieren experimentar con lógica, entrada de datos y visualización básica.
Requisitos previos para crear una calculadora de gastos en PHP
Antes de comenzar a escribir código, es importante tener a mano algunos conocimientos básicos y herramientas:
- Conocimientos básicos de HTML, ya que construirás un formulario para ingresar los datos.
- Conocimientos fundamentales de PHP, para procesar y calcular los valores introducidos.
- Un servidor local como XAMPP, WAMP o MAMP, necesario para ejecutar archivos PHP correctamente.
- Editor de código como Visual Studio Code, que te permita trabajar con HTML y PHP al mismo tiempo.
💡 Si aún no dominas PHP, te recomiendo revisar esta guía:
➡️ Introducción a PHP: Fundamentos y primeros pasos en programación
Ahí encontrarás todo lo necesario para dar tus primeros pasos y entender cómo funciona este lenguaje del lado del servidor.
Estructura del proyecto
La estructura de archivos para este proyecto es sencilla, pero está bien organizada:
calculadora-gastos/
├── index.html
├── procesar.php
└── estilo.css (opcional)
Puedes trabajar todos los archivos en la misma carpeta y ejecutar el proyecto dentro de htdocs si estás usando XAMPP.
HTML: Interfaz para introducir los gastos
Comenzamos creando un formulario HTML que servirá para introducir cada gasto. Lo haremos en index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Calculadora de Gastos</title>
</head>
<body>
<h1>Calculadora de Gastos</h1>
<form action="procesar.php" method="POST">
<label for="descripcion">Descripción:</label>
<input type="text" name="descripcion" required><br>
<label for="monto">Monto (€):</label>
<input type="number" name="monto" step="0.01" required><br>
<button type="submit">Agregar gasto</button>
</form>
</body>
</html>
Este formulario básico permite al usuario escribir el concepto del gasto y su valor económico, enviando ambos datos al archivo procesar.php mediante el método POST.
PHP: Procesar y sumar los gastos introducidos
Ahora toca el corazón del proyecto. En procesar.php, vamos a recibir los datos del formulario, validarlos y mostrarlos en pantalla:
<?php
session_start();
if (!isset($_SESSION['gastos'])) {
$_SESSION['gastos'] = [];
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$descripcion = $_POST['descripcion'];
$monto = floatval($_POST['monto']);
$nuevoGasto = [
'descripcion' => $descripcion,
'monto' => $monto
];
$_SESSION['gastos'][] = $nuevoGasto;
}
$total = 0;
?>
<h1>Resumen de Gastos</h1>
<ul>
<?php foreach ($_SESSION['gastos'] as $gasto): ?>
<li><?php echo $gasto['descripcion']; ?> - €<?php echo number_format($gasto['monto'], 2); ?></li>
<?php $total += $gasto['monto']; ?>
<?php endforeach; ?>
</ul>
<h2>Total: €<?php echo number_format($total, 2); ?></h2>
<a href="index.html">Agregar otro gasto</a>
Gracias al uso de sesiones, cada gasto queda guardado temporalmente mientras dura la navegación del usuario. Esto evita tener que usar bases de datos en una primera versión del proyecto.
Mostrar el historial de gastos
Una de las claves para que la aplicación sea útil es que permita consultar en cualquier momento el total acumulado y todos los gastos ingresados. En el código anterior, ya hemos añadido una lista con todos los gastos.
Sin embargo, puedes mejorar el diseño o añadir estilos CSS para que la experiencia visual sea más clara. Por ejemplo, destacar gastos superiores a cierta cantidad o diferenciar categorías.
Guardar los datos en un archivo de texto (opcional)
Aunque las sesiones funcionan bien para pruebas, no son permanentes. Por ello, una mejora sencilla consiste en guardar los datos en un archivo .txt cada vez que se agrega un gasto.
$file = fopen('gastos.txt', 'a');
fwrite($file, "$descripcion - $monto €\n");
fclose($file);
Esta técnica puede ayudarte a practicar operaciones de entrada/salida con PHP, y será muy útil cuando quieras crear sistemas más duraderos. Si quieres profundizar sobre cómo PHP maneja archivos, la documentación oficial sobre manejo de archivos en PHP es un excelente recurso para explorar todas las funciones disponibles, desde lectura hasta creación y eliminación.
Si te interesa avanzar en esta dirección, más adelante podrás conectar tu calculadora con una base de datos MySQL o SQLite y hacer uso de CRUDs completos.
Ideas para mejorar tu calculadora de gastos en PHP
Ahora que tienes una versión básica funcionando, es el momento perfecto para ampliar su funcionalidad. Aquí te dejo algunas ideas:
- Agregar categorías: comida, transporte, ocio, etc. Así puedes agrupar y filtrar los gastos.
- Exportar a CSV o PDF: para poder guardar o imprimir tus reportes fácilmente.
- Filtros por fecha: mostrar solo los gastos del día, semana o mes actual.
- Gráficos visuales: usa JavaScript o librerías como Chart.js para mostrar barras o tortas.
- Autenticación de usuarios: para que cada usuario vea solo sus propios gastos.
💡 En todos estos casos estarías aplicando lógica real, y podrías ir transformando esta sencilla herramienta en un sistema de control financiero personal.
Conclusión: tu primera calculadora de gastos en PHP ya está lista
Como has podido ver, crear una calculadora de gastos en PHP y HTML no es solo un ejercicio didáctico, sino que también representa un paso firme en el desarrollo web real. Trabajas con formularios, estructuras de datos, sesiones, validaciones y salidas dinámicas.
Este tipo de ejercicios te prepara para entender cómo funciona la interacción entre el frontend y el backend, incluso en entornos más complejos. Además, te da la oportunidad de pensar en mejoras, nuevas funcionalidades o transformaciones hacia una app más completa.
🌟 ¿Te gustaría que hiciéramos una versión conectada a una base de datos o con exportación de gastos?
💬 Déjalo en comentarios en el blog o escríbeme por redes. ¡Estoy abierto a sugerencias para seguir desarrollando juntos!
