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.

Table of Contents

Toggle

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

<span class="line"><span style="color: #D8DEE9">expenses</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9">app</span><span style="color: #81A1C1">/</span></span>
<span class="line"><span style="color: #D8DEE9FF">├── </span><span style="color: #D8DEE9">inc</span><span style="color: #81A1C1">/</span></span>
<span class="line"><span style="color: #D8DEE9FF">│   ├── </span><span style="color: #D8DEE9">header</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">php</span></span>
<span class="line"><span style="color: #D8DEE9FF">│   ├── </span><span style="color: #D8DEE9">footer</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">php</span></span>
<span class="line"><span style="color: #D8DEE9FF">│   └── </span><span style="color: #D8DEE9">db</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">php</span></span>
<span class="line"><span style="color: #D8DEE9FF">├── </span><span style="color: #D8DEE9">css</span><span style="color: #81A1C1">/</span></span>
<span class="line"><span style="color: #D8DEE9FF">│   └── </span><span style="color: #D8DEE9">styles</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">css</span></span>
<span class="line"><span style="color: #D8DEE9FF">├── </span><span style="color: #D8DEE9">index</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">php</span></span>
<span class="line"><span style="color: #D8DEE9FF">└── </span><span style="color: #D8DEE9">endpoint</span><span style="color: #81A1C1">/</span></span>
<span class="line"><span style="color: #D8DEE9FF">    ├── </span><span style="color: #D8DEE9">add</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9">expense</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">php</span></span>
<span class="line"><span style="color: #D8DEE9FF">    └── </span><span style="color: #81A1C1">delete-</span><span style="color: #D8DEE9">expense</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">php</span></span>
<span class="line"></span>

Paso 3: Archivo de Conexión a la Base de Datos

Crea el archivo db.php dentro de la carpeta inc:

<span class="line"><span style="color: #81A1C1">&lt;?</span><span style="color: #D8DEE9">php</span></span>
<span class="line"><span style="color: #D8DEE9">$servername</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">localhost</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9">$username</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">root</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9">$password</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;&quot;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9">$dbname</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">expenses_db</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9">try</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">$conn</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">new</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">PDO</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">mysql:host=$servername;dbname=$dbname</span><span style="color: #ECEFF4">&quot;</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$username</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$password</span><span style="color: #D8DEE9FF">);</span></span>
<span class="line"><span style="color: #D8DEE9FF">    $conn-&gt;</span><span style="color: #88C0D0">setAttribute</span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">PDO</span><span style="color: #81A1C1">::</span><span style="color: #D8DEE9FF">ATTR_ERRMODE</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">PDO</span><span style="color: #81A1C1">::</span><span style="color: #D8DEE9FF">ERRMODE_EXCEPTION</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">catch</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">PDOException</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$e</span><span style="color: #D8DEE9FF">) </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    echo </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">Connection failed: </span><span style="color: #ECEFF4">&quot;</span><span style="color: #88C0D0"> . $e-&gt;getMessage();</span></span>
<span class="line"><span style="color: #88C0D0">}</span></span>
<span class="line"><span style="color: #88C0D0">?&gt;</span></span>
<span class="line"></span>

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:

<span class="line"><span style="color: #81A1C1">&lt;!</span><span style="color: #D8DEE9">DOCTYPE</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">html</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;html</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">lang</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">es</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;head&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;meta</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">charset</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">UTF-8</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;meta</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">name</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">viewport</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">content</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">width=device-width, initial-scale=1.0</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;title&gt;</span><span style="color: #D8DEE9FF">Aplicación de Monitoreo de Gastos Diarios</span><span style="color: #81A1C1">&lt;/title&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;link</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">rel</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">stylesheet</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">href</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;link</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">rel</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">stylesheet</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">href</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">css/styles.css</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;/head&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;body&gt;</span></span>
<span class="line"></span>

footer.php:

<span class="line"><span style="color: #81A1C1">&lt;script</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">src</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">https://cdn.jsdelivr.net/npm/chart.js</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;script</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">src</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;script</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">src</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;script</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">src</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;/</span><span style="color: #D8DEE9">body</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;/</span><span style="color: #D8DEE9">html</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"></span>

Paso 5: Página Principal

Crea el archivo index.php con el siguiente contenido:

<span class="line"><span style="color: #81A1C1">&lt;?</span><span style="color: #D8DEE9">php</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">include</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">inc/header.php</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">); </span><span style="color: #81A1C1">?&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;?</span><span style="color: #D8DEE9">php</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">include</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">inc/db.php</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">); </span><span style="color: #81A1C1">?&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">container</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;h1</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">mt-5</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span><span style="color: #D8DEE9FF">Monitoreo de Gastos Diarios</span><span style="color: #81A1C1">&lt;/h1&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;button</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">type</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">button</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">btn btn-primary mt-3</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">data-toggle</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">modal</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">data-target</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">#addExpenseModal</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span><span style="color: #D8DEE9FF">Añadir Gasto</span><span style="color: #81A1C1">&lt;/button&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">modal fade</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">id</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">addExpenseModal</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">tabindex</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">-1</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">aria-labelledby</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">addExpenseLabel</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">aria-hidden</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">true</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">modal-dialog</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">modal-content</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                </span><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">modal-header</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #81A1C1">&lt;h5</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">modal-title</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">id</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">addExpenseLabel</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span><span style="color: #D8DEE9FF">Añadir Gasto</span><span style="color: #81A1C1">&lt;/h5&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #81A1C1">&lt;button</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">type</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">button</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">close</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">data-dismiss</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">modal</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">aria-label</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">Cerrar</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                        </span><span style="color: #81A1C1">&lt;span</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">aria-hidden</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">true</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span><span style="color: #D8DEE9FF">×</span><span style="color: #81A1C1">&lt;/span&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #81A1C1">&lt;/button&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                </span><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                </span><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">modal-body</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #81A1C1">&lt;form</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">action</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">endpoint/add-expense.php</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">method</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">POST</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                        </span><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">form-group</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                            </span><span style="color: #81A1C1">&lt;label</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">for</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">expenseDate</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span><span style="color: #D8DEE9FF">Fecha del Gasto</span><span style="color: #81A1C1">&lt;/label&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                            </span><span style="color: #81A1C1">&lt;input</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">type</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">date</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">form-control</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">id</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">expenseDate</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">name</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">expense_date</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">required</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                        </span><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                        </span><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">form-group</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                            </span><span style="color: #81A1C1">&lt;label</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">for</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">expenseAmount</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span><span style="color: #D8DEE9FF">Monto del Gasto</span><span style="color: #81A1C1">&lt;/label&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                            </span><span style="color: #81A1C1">&lt;input</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">type</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">number</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">form-control</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">id</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">expenseAmount</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">name</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">expense_amount</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">required</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                        </span><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                        </span><span style="color: #81A1C1">&lt;button</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">type</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">submit</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">btn btn-primary</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span><span style="color: #D8DEE9FF">Añadir</span><span style="color: #81A1C1">&lt;/button&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #81A1C1">&lt;/form&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                </span><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;div</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">mt-5</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1">&lt;h2&gt;</span><span style="color: #D8DEE9FF">Gastos</span><span style="color: #81A1C1">&lt;/h2&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1">&lt;table</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">class</span><span style="color: #81A1C1">=</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">table table-bordered</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1">&lt;thead&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                </span><span style="color: #81A1C1">&lt;tr&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #81A1C1">&lt;th&gt;</span><span style="color: #D8DEE9FF">Fecha</span><span style="color: #81A1C1">&lt;/th&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #81A1C1">&lt;th&gt;</span><span style="color: #D8DEE9FF">Monto</span><span style="color: #81A1C1">&lt;/th&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #81A1C1">&lt;th&gt;</span><span style="color: #D8DEE9FF">Acción</span><span style="color: #81A1C1">&lt;/th&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                </span><span style="color: #81A1C1">&lt;/tr&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1">&lt;/thead&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1">&lt;tbody&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                &lt;?php</span></span>
<span class="line"><span style="color: #D8DEE9FF">                $stmt = $conn-&gt;prepare(&quot;SELECT * FROM tbl_expense ORDER BY expense_date&quot;);</span></span>
<span class="line"><span style="color: #D8DEE9FF">                $stmt-&gt;execute();</span></span>
<span class="line"><span style="color: #D8DEE9FF">                $result = $stmt-&gt;fetchAll();</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">                foreach ($result as $row) </span><span style="color: #81A1C1">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #D8DEE9">echo</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">&lt;tr&gt;</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #D8DEE9">echo</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">&lt;td&gt;</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$row</span><span style="color: #D8DEE9FF">&#91;</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">expense_date</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">&#93; </span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">&lt;/td&gt;</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #D8DEE9">echo</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">&lt;td&gt;</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$row</span><span style="color: #D8DEE9FF">&#91;</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">expense_amount</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">&#93; </span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">&lt;/td&gt;</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #D8DEE9">echo</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">&lt;td&gt;&lt;a href=&quot;endpoint/delete-expense.php?id=</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$row</span><span style="color: #D8DEE9FF">&#91;</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">id</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">&#93; </span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">&quot; class=&quot;btn btn-danger btn-sm&quot;&gt;Eliminar&lt;/a&gt;&lt;/td&gt;</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                    </span><span style="color: #D8DEE9">echo</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">&lt;/tr&gt;</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">                </span><span style="color: #81A1C1">}</span></span>
<span class="line"><span style="color: #D8DEE9FF">                ?&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">            </span><span style="color: #81A1C1">&lt;/tbody&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #81A1C1">&lt;/table&gt;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"><span style="color: #81A1C1">&lt;/div&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">&lt;?php include(&#39;inc/footer.php&#39;); ?&gt;</span></span>
<span class="line"></span>

Paso 6: Añadir y Eliminar Gastos

Crea los archivos add-expense.php y delete-expense.php en la carpeta endpoint.

add-expense.php:

<span class="line"><span style="color: #81A1C1">&lt;?</span><span style="color: #D8DEE9">php</span></span>
<span class="line"><span style="color: #88C0D0">include</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">../inc/db.php</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #88C0D0">if</span><span style="color: #D8DEE9FF"> (</span><span style="color: #D8DEE9">$_SERVER</span><span style="color: #D8DEE9FF">&#91;</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">REQUEST_METHOD</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">&#93; </span><span style="color: #81A1C1">==</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">POST</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">) </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">$date</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$_POST</span><span style="color: #D8DEE9FF">&#91;</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">expense_date</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">&#93;;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">$amount</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$_POST</span><span style="color: #D8DEE9FF">&#91;</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">expense_amount</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">&#93;;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">$stmt</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$conn</span><span style="color: #81A1C1">-&gt;</span><span style="color: #88C0D0">prepare</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">INSERT INTO tbl_expense (expense_date, expense_amount) VALUES (:date, :amount)</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">);</span></span>
<span class="line"><span style="color: #D8DEE9FF">    $stmt-&gt;</span><span style="color: #88C0D0">bindParam</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">:date</span><span style="color: #ECEFF4">&#39;</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$date</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    $stmt-&gt;</span><span style="color: #88C0D0">bindParam</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">:amount</span><span style="color: #ECEFF4">&#39;</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$amount</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #88C0D0">if</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">$stmt</span><span style="color: #D8DEE9FF">-&gt;</span><span style="color: #D8DEE9">execute</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF">) </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #88C0D0">header</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">Location: ../index.php</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF"> else </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #D8DEE9">echo</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">Error al añadir el gasto.</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #ECEFF4">}</span></span>
<span class="line"><span style="color: #ECEFF4">}</span></span>
<span class="line"><span style="color: #81A1C1">?&gt;</span></span>
<span class="line"></span>

delete-expense.php:

<span class="line"><span style="color: #81A1C1">&lt;?</span><span style="color: #D8DEE9">php</span></span>
<span class="line"><span style="color: #88C0D0">include</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">../inc/db.php</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #88C0D0">if</span><span style="color: #D8DEE9FF"> (</span><span style="color: #88C0D0">isset</span><span style="color: #D8DEE9FF">(</span><span style="color: #D8DEE9">$_GET</span><span style="color: #D8DEE9FF">&#91;</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">id</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">&#93;)) </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">$id</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$_GET</span><span style="color: #D8DEE9FF">&#91;</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">id</span><span style="color: #ECEFF4">&#39;</span><span style="color: #D8DEE9FF">&#93;;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">$stmt</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$conn</span><span style="color: #81A1C1">-&gt;</span><span style="color: #88C0D0">prepare</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">DELETE FROM tbl_expense WHERE id = :id</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">);</span></span>
<span class="line"><span style="color: #D8DEE9FF">    $stmt-&gt;</span><span style="color: #88C0D0">bindParam</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">&#39;</span><span style="color: #A3BE8C">:id</span><span style="color: #ECEFF4">&#39;</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">$id</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #88C0D0">if</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">$stmt</span><span style="color: #D8DEE9FF">-&gt;</span><span style="color: #D8DEE9">execute</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF">) </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #88C0D0">header</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">Location: ../index.php</span><span style="color: #ECEFF4">&quot;</span><span style="color: #D8DEE9FF">)</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF"> else </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">        </span><span style="color: #D8DEE9">echo</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">&quot;</span><span style="color: #A3BE8C">Error al eliminar el gasto.</span><span style="color: #ECEFF4">&quot;</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #ECEFF4">}</span></span>
<span class="line"><span style="color: #ECEFF4">}</span></span>
<span class="line"><span style="color: #81A1C1">?&gt;</span></span>
<span class="line"></span>

Paso 7: Estilos CSS

Crea un archivo styles.css en la carpeta css para agregar estilos personalizados:

<span class="line"><span style="color: #D8DEE9">body</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">background</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">color</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> #</span><span style="color: #D8DEE9">f8f9fa</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #ECEFF4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">container</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">margin</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">top</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> 50</span><span style="color: #D8DEE9">px</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #ECEFF4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9">table</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">margin</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">top</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> 20</span><span style="color: #D8DEE9">px</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #ECEFF4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">modal</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9">header</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span>
<span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #D8DEE9">background</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">color</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> #007</span><span style="color: #D8DEE9">bff</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #D8DEE9FF">    color</span><span style="color: #ECEFF4">:</span><span style="color: #D8DEE9FF"> #</span><span style="color: #D8DEE9">fff</span><span style="color: #81A1C1">;</span></span>
<span class="line"><span style="color: #ECEFF4">}</span></span>
<span class="line"></span>

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!