Cómo Crear una Aplicación de Monitoreo de Gastos Diarios en PHP: Guía Paso a Paso

Cómo Crear una Aplicación de Monitoreo de Gastos Diarios en PHP: Guía Paso a Paso

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:

<?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

Sistema de Control de Gastos en PHP y MySQL

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!

Deja una respuesta

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

configuroweb.com
×
Hola de Nuevo
Abrir chat
¿Qué te interesa?
Selecciona los temas de interés sobre
los que deseas recibir noticias: