En el mundo moderno, gestionar nuestros gastos diarios de manera eficiente es crucial para mantener nuestras finanzas en orden. Crear una aplicación de monitoreo de gastos puede ser una solución perfecta para esta necesidad. En este post, te guiaré paso a paso en cómo crear una aplicación de monitoreo de gastos diarios en PHP, utilizando MySQL para el almacenamiento de datos. Esta guía está diseñada tanto para principiantes como para desarrolladores experimentados que buscan un proyecto práctico.
Video Explicativo
Introducción
Antes de comenzar, asegúrate de tener instalado un servidor local como XAMPP o WAMP, que incluye PHP y MySQL. Además, necesitarás un editor de texto o IDE, como Visual Studio Code o Sublime Text.
Esta aplicación gratuita, hace parte de un compendio de más de 80 aplicaciones PHP grauita de libre distribución, te invito a darle una mirada a mi blog completo, ya que también cuento con más de 70 aplicaciones premium en su gran mayoría a 15 USD que te podrían servir.
Paso 1: Configuración del Entorno
- Instala un servidor local: Si aún no tienes uno, descarga e instala XAMPP o WAMP.
- Crea la base de datos: Abre phpMyAdmin y crea una nueva base de datos llamada
expenses_db. Luego, crea una tabla llamadatbl_expensecon los siguientes campos:id(INT, PRIMARY KEY, AUTO_INCREMENT)expense_date(DATE)expense_amount(DECIMAL)
Paso 2: Estructura del Proyecto
Organiza tu proyecto de la siguiente manera:
expenses-app/
├── inc/
│ ├── header.php
│ ├── footer.php
│ └── db.php
├── css/
│ └── styles.css
├── index.php
└── endpoint/
├── add-expense.php
└── delete-expense.php
Paso 3: Archivo de Conexión a la Base de Datos
Crea el archivo db.php dentro de la carpeta inc:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "expenses_db";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
?>
Paso 4: Encabezado y Pie de Página
Crea los archivos header.php y footer.php para incluir el encabezado y el pie de página en todas las páginas.
header.php:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplicación de Monitoreo de Gastos Diarios</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
footer.php:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>
</html>
Paso 5: Página Principal
Crea el archivo index.php con el siguiente contenido:
<?php include('inc/header.php'); ?>
<?php include('inc/db.php'); ?>
<div class="container">
<h1 class="mt-5">Monitoreo de Gastos Diarios</h1>
<button type="button" class="btn btn-primary mt-3" data-toggle="modal" data-target="#addExpenseModal">Añadir Gasto</button>
<div class="modal fade" id="addExpenseModal" tabindex="-1" aria-labelledby="addExpenseLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addExpenseLabel">Añadir Gasto</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="endpoint/add-expense.php" method="POST">
<div class="form-group">
<label for="expenseDate">Fecha del Gasto</label>
<input type="date" class="form-control" id="expenseDate" name="expense_date" required>
</div>
<div class="form-group">
<label for="expenseAmount">Monto del Gasto</label>
<input type="number" class="form-control" id="expenseAmount" name="expense_amount" required>
</div>
<button type="submit" class="btn btn-primary">Añadir</button>
</form>
</div>
</div>
</div>
</div>
<div class="mt-5">
<h2>Gastos</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Fecha</th>
<th>Monto</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<?php
$stmt = $conn->prepare("SELECT * FROM tbl_expense ORDER BY expense_date");
$stmt->execute();
$result = $stmt->fetchAll();
foreach ($result as $row) {
echo "<tr>";
echo "<td>" . $row['expense_date'] . "</td>";
echo "<td>" . $row['expense_amount'] . "</td>";
echo '<td><a href="endpoint/delete-expense.php?id=' . $row['id'] . '" class="btn btn-danger btn-sm">Eliminar</a></td>';
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<?php include('inc/footer.php'); ?>
Paso 6: Añadir y Eliminar Gastos
Crea los archivos add-expense.php y delete-expense.php en la carpeta endpoint.
add-expense.php:
<?php
include('../inc/db.php');
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$date = $_POST['expense_date'];
$amount = $_POST['expense_amount'];
$stmt = $conn->prepare("INSERT INTO tbl_expense (expense_date, expense_amount) VALUES (:date, :amount)");
$stmt->bindParam(':date', $date);
$stmt->bindParam(':amount', $amount);
if ($stmt->execute()) {
header("Location: ../index.php");
} else {
echo "Error al añadir el gasto.";
}
}
?>
delete-expense.php:
<?php
include('../inc/db.php');
if (isset($_GET['id'])) {
$id = $_GET['id'];
$stmt = $conn->prepare("DELETE FROM tbl_expense WHERE id = :id");
$stmt->bindParam(':id', $id);
if ($stmt->execute()) {
header("Location: ../index.php");
} else {
echo "Error al eliminar el gasto.";
}
}
?>
Paso 7: Estilos CSS
Crea un archivo styles.css en la carpeta css para agregar estilos personalizados:
body {
background-color: #f8f9fa;
}
.container {
margin-top: 50px;
}
table {
margin-top: 20px;
}
.modal-header {
background-color: #007bff;
color: #fff;
}
Repositorio de la Aplicación
Conclusión
¡Y eso es todo! Ahora tienes una aplicación funcional para el monitoreo de gastos diarios. Este proyecto no solo te ayuda a gestionar tus finanzas personales, sino que también mejora tus habilidades en PHP y MySQL. Recuerda siempre probar y mejorar tu código para adaptarlo a tus necesidades específicas. ¡Feliz codificación!
