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

  1. Instala un servidor local: Si aún no tienes uno, descarga e instala XAMPP o WAMP.
  2. Crea la base de datos: Abre phpMyAdmin y crea una nueva base de datos llamada expenses_db. Luego, crea una tabla llamada tbl_expense con 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:






Aplicación de Monitoreo de Gastos Diarios

‘ aria-label=»Copy» class=»code-block-pro-copy-button»>

DOCTYPE html>
 lang="es">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span><span>Aplicación de Monitoreo de Gastos Diarios</span><span>
     rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
     rel="stylesheet" href="css/styles.css">

footer.php:


Monitoreo de Gastos Diarios

Gastos

prepare(«SELECT * FROM tbl_expense ORDER BY expense_date»);
$stmt->execute();
$result = $stmt->fetchAll();foreach ($result as $row) {
echo «

«;
echo «

«;
echo «

«;
echo ‘

‘;
echo «

«;
}
?>

Fecha Monto Acción
» . $row[‘expense_date’] . « » . $row[‘expense_amount’] . « Eliminar


» aria-label=»Copy» class=»code-block-pro-copy-button»>

php include('inc/header.php'); ?>
php include('inc/db.php'); ?>

 class="container">
     class="mt-5">Monitoreo de Gastos Diarios
     type="button" class="btn btn-primary mt-3" data-toggle="modal" data-target="#addExpenseModal">Añadir Gasto

     class="modal fade" id="addExpenseModal" tabindex="-1" aria-labelledby="addExpenseLabel" aria-hidden="true">
         class="modal-dialog">
             class="modal-content">
                 class="modal-header">
                     class="modal-title" id="addExpenseLabel">Añadir Gasto
                     type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                         aria-hidden="true">×
class="modal-body"> action="endpoint/add-expense.php" method="POST"> class="form-group"> for="expenseDate">Fecha del Gasto type="date" class="form-control" id="expenseDate" name="expense_date" required>
class="form-group"> for="expenseAmount">Monto del Gasto type="number" class="form-control" id="expenseAmount" name="expense_amount" required>