Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreCrear un sistema de control de gastos con el patrón MVC
Rating: 4.5 out of 54.5(11 ratings)
2,200 students
Crear un sistema de control de gastos con el patrón MVC
Desarrolla una aplicación completa bajo el patrón de diseño MVC.
Created byFrancisco Javier Arce Anguiano
Last updated 3/2025
Spanish
What you'll learn
- Conocer los aspectos básicos de PHP y su instalación.
- Crear la estructura Modelo, Vista y Controlador para construir la tienda virtual con PHP y MySQL.
- Crear el controlador, el modelo y las vistas necesarias para permitir el acceso de los usuarios al sistema.
- Crear el menú, controlador, modelo y las vistas necesarias para: el tablero, los cuentas, los movimientos.
- Manejo de imágenes y paginación de consultas muy largas.
- Matendrá la integridad referencial de categorías y cuentas. Respaldo de la base de datos y depurar la base de datos y creará u tablero de cuentas.
Explore related topics
Course content
14 sections • 162 lectures • 22h 24m total length
- Bienvenida al curso Crear un sistema de control de citas con PHP con MVC5:36
Una aplicación que es muy recurrente en Internet es el desarrollo de una para el manejo de gastos personales. Esta aplicación nos sirve para utilizar lenguajes del lado del cliente, como JavaScript y lenguajes del lado del servidor como PHP, así como conectarlo con bases de datos, en este caso como MySQL, herramientas que son las más utilizadas en la Web. En este curso construiremos las páginas web por medio de Bootstrap 5.3. lo cual nos permitirá tener una aplicación responsiva. Partiremos desde una página completamente en blanco hasta concluir la parte del usuario (front-end) y la parte del administrador (back-end).
- Breve historia de PHP5:25
Rasmus Ledford Desarrolló PHP (Personal Home Page) en 1995.
- ¿Cómo funciona PHP?6:49
El cliente realiza una solicitud al servidor de un recurso .php
El servidor recibe la solicitud y llama al lenguaje PHP.
Donde el servidor encuentre las etiquetas PHP, lo ejecutará.
PHP realiza el programa y regresa como etiquetas HTML.
El servidor regresa el código HTML (nunca código PHP).
El cliente toma el HTML y el navegador lo interpreta.
- ¿Qué necesitamos?3:58
1. Instalar la plataforma Apache-MySQL-PHP en su computadora como XAMPP, MAMP, LAMP o WAMP o es su defecto, contar con un servidor remoto con PHP.
2. Un navegador moderno.
3. Un editor de código como Sublime Text, Aptana, Brackets, Atom o Dreamweaver (cualquier versión).
4. Si se cuenta con un servidor remoto, necesitarás un FTP o cPanel.
- Antes de iniciar, los archivos del curso8:26
Antes de iniciar daremos algunos consejos para el uso de la plataforma.
- Instalar el Apache + PHP + MySQL: XAMPP10:25
XAMPP es un paquete de instalación independiente de plataforma, software libre, que consiste principalmente en el sistema de gestión de bases de datos MySQL, el servidor web Apache y los intérpretes para lenguajes de script: PHP y Perl.
- Instalar MAMP en una computadora con Windows5:39
MAMP es una poderosa herramienta para convertir nuestra computadora en un servidor web local.
- Ver la configuración de PHP con phpinfo()5:39
Muestra gran cantidad de información sobre el estado actual de PHP. Incluye información sobre las opciones de compilación y extensiones de PHP, versión de PHP, información del servidor y entorno (si se compiló como módulo), entorno PHP, versión del OS, rutas, valor de las opciones de configuración locales y generales, cabeceras y licencia de PHP.
- Plugins de SublimeText para PHP (opcional)6:34
Entrar a packagecontrol.io
Abrir la consola (view > show console).
Copiar el código en la consola y ejecutarlo.
Cerrar y abrir sublime text.
[Ctrl]-[shift]-[p] o tools > command palette
Escribimos
Install packages > sublime lint > detecta problemas de sintaxis.
Install packages > phpcs
- Documentar con PHPDoc (opcional)5:24
PHPDocs es una adaptación de JavaDocs para documentar la programación en PHP.
- Retroalimentación0:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Definiciones7:34
Modelo-vista-controlador es un patrón de arquitectura de software, que separa los datos y principalmente lo que es la lógica de negocio de una aplicación de su representación y el módulo encargado de gestionar los eventos y las comunicaciones (Wikipedia).
- Creaciones de carpetas e index11:22
En esta clase utilizaremos las funciones:
app: controladores, libs, modelos, sql, vistas
public: css, javascript, img
- Crear la base de datos9:37
En esta clase utilizaremos los objetos PDO.
- El archivo .htaccess8:36
El archivo .htaccess nos permite modificar el acceso, en un ambiente Apache, a directorios o archivos.
Para que no puedan entrar a un directorio desde la URL y no ver el mismo se utiliza (en app):
Options -Indexes
- Conectar la base de datos7:51
extension=php_pdo.dll
extension=php_pdo_firebird.dll
extension=php_pdo_informix.dll
extension=php_pdo_mssql.dll
extension=php_pdo_mysql.dll
extension=php_pdo_oci.dll
extension=php_pdo_oci8.dll
extension=php_pdo_odbc.dll
extension=php_pdo_pgsql.dll
extension=php_pdo_sqlite.dll
- La clase Control11:47
El método separaURL() toma la URL del sistema y lo separará.
Utilizaremos las funciones:
isset() valida si una variable está definida.
rtrim() limpia caracteres a la derecha.
filter_var(FILTER_SANITIZE_URL) limpia los caracteres ilegales en una URL.
explode() separa una cadena por medio de una cadena delimitadora.
- La clase auxiliar Controlador.php8:59
Dentro del constructor llamaremos el controlador y el método solicitado desde los parámetros.
Utilizaremos las funciones:
file_exists() verifica que exista el archivo físico.
ucwords() cambia a mayúscula las primeras letras.
unset() elimina una variable.
- Recibir los parámetros6:22
Crearemos una clase base para heredar a las demás clases controladoras.
Utilizaremos las funciones:
extends: podemos extender o heredar una clase.
die() termina el programa.
- Crear el modelo y la vista8:52
Realizaremos el modelo y la primera vista para el “objeto” Login.
- Retroalimentación0:06
- El proceso de entrada6:30
Iniciaremos la construcción del objeto Login para la entrada a la aplicación.
- Instalación a Bootstrap 510:23
Añadiremos el framework Bootstrap 5.3. para que o se vea tan horrendo.
- Bootstrap 5 - formulario6:57
form-group
text-left
form-control
btn
btn-info
- Crear las otras vistas: Encabezado y Pie de página8:46
olvido
Inscripción (no aplica)
- Crear la vista de “olvido”7:26
Una práctica muy común es tomar un archivo anterior y convertirlo en un nuevo.
Lo realizaremos para crear la vista de “olvido de la contraseña”.
De la vista principal al controlador.
El controlador despliega la vista de “Olvidaste tu contraseña”.
- Crear la constante de la ruta5:36
A medida que avanzamos en las llamas de los métodos, la ruta relativa se puede ir perdiendo, por lo que la mantendremos en una Constante global.
define()
- Validar datos de la vista14:07
$_SERVER[“REQUEST_METHOD”] indica el método de envío a la página.
filter_var($email, FILTER_VALIDATE_EMAIL)
- Validar el correo en la base de datos8:46
Un proceso de validación muy importante es que busquemos en la base de datos el correo electrónico antes de enviar el correo.
- Desplegar los mensajes de error10:53
Realizaremos la función para desplegar el arreglo de errores dentro de la vista.
- Enviar correo electrónico12:07
Por medio de la instrucción mail() enviaremos el correo electrónico al usuario.
- Una vista general para mensajes10:31
Podemos crear una vista general donde podemos enviar diferentes mensajes erróneos o de aceptación.
Es muy importante saber a donde regresar después de la vista.
- Leer los datos del usuario8:56
Debemos recuperar los datos del usuario para enviarle el correo electrónico.
Solucionar el problema de las vistas.
- Encriptar en dos vías9:02
openssl_random_pseudo_bytes — Genera una cadena de bytes pseudo-aleatoria
openssl_cipher_iv_length — Obtener la longitud del iv (vector de iniciación) de cipher
openssl_encrypt — Encripta datos
openssl_decrypt — Desencripta datos
AES: Advanced Encryption Standard aes-256-cbc
- Vista para cambiar la clave de acceso7:32
Necesitamos crear el método y la vista para cambiar la clave de acceso.
- Validar datos de la clave de acceso9:23
hash_hmac(“sha512”,$clave,”llave encriptacion”); Genera una cadena cifrada por el método HMAC.
- Recuperar la clave de acceso7:24
Una vez que tenemos la clave de acceso encriptada, la compararemos con la correspondiente en la base de datos.
hash_hmac(“sha512”,$clave,”llave encriptacion”);
Genera una cadena cifrada por el método HMAC.
- Crear la clase sesión10:00
session_start(array $options = []): bool
$_SESSION[ ]
session_destroy(): bool
- Recordar los datos10:14
time() - Regresa los números de segundo transcurridos desde el 1o de enero de 1970, tiempo Unix.
setcookie() - establece una cookie o galleta.
$_COOKIE[] - vector global
- Ambiente de desarrollo, prueba y producción11:33
Podemos “cambiar” la configuración de la aplicación desde un programa PHP sin necesidad de modificar el archivo php.ini en forma manual.
- Crear el menú8:38
Dentro de el archivo del encabezado podemos añadir un menú y manipularlo si es administrativo o un usuario.
- Retroalimentación0:06
- Categorías básicas8:06
Casa
Comida
Salud
Auto/Transporte
Diversión
Escuela
Ahorro
Varios (internet, teléfono, revistas, etc.)
- Categorías básicas: Modelo-Vista-Controlador5:38
Crearemos los archivos del Modelo-Vista-Controlador.
- Crear la tabla de categorías básicas9:55
Crearemos la tabla donde se desplegarán las categorías y el botón para las altas de una categoría.
- Vista de detalle de la categoría9:42
Crearemos el método de alta y la vista correspondiente.
- Mostrar un combo-box en el formulario6:58
Leemos una de los catálogos (categoriasTipos).
Los vaciamos a un arreglo o array.
Los desplegamos en la vista.
- Recibir y validar la información de la vista8:01
Un proceso muy importante es recibir en el controlador la información de la vista y validarla o procesarla, antes de ser enviada al Modelo.
- Validar los datos según su tipo8:40
Es muy importante que verifiquemos las cadenas, los campos numéricos, los correos, las fechas, etc.
Hay que verificar especialmente la inyección de código.
- Añadir el registro a la base de datos9:52
Una vez que hayamos validado nuestros datos, estamos listos para su inserción a nuestra tabla.
- Paginar una consulta8:06
Determinar el número de registros.
Crear una constante para el tamaño de página.
Calcular el inicio de la página.
Calcular el total de páginas.
Recuperar la información: inicio y tamaño de la página.
Iniciar en la página 1 (obvio).
- Botones de las páginas7:12
Una vez que determinamos el número de páginas, debemos desplegar los botones correspondientes.
- Botones “anterior - posterior”7:55
Una vez que determinamos el número de páginas, debemos desplegar los botones correspondientes.
- Afinar la tabla de las categorías5:44
Es necesario armar la llave (categoriaTipo) y modificar el formato de las cantidades (justificar la cantidad a la derecha).
- Preparar la vista CRUD para la modificación (update)10:18
Utilizaremos la misma vista de la alta para desplegar los datos para ser modificados.
Debemos enviar el identificador para ser enviado de regreso para ser modificados.
- Eliminar una categoría (delete)8:48
Utilizaremos la misma vista de la alta para desplegar los datos para ser eliminados.
Hay que tener mucho cuidado en mantener la integridad referencial.
- Filtrar los datos12:22
Añadir un botón para lanzar la vista del filtro.
Crear la vista de los filtros.
Recuperar y armar el filtro.
Recuperar los mismos (variables de sesión).
Extraer y desplegar los datos filtrados.
Crear un botón para quitar el filtro.
- Armar el filtro11:23
Añadir un botón para lanzar la vista del filtro.
Crear la vista de los filtros.
- Aplicar el filtro12:12
Recuperar los mismos (variables de sesión).
Extraer y desplegar los datos filtrados.
- Eliminar el filtro (y ordenar)9:35
Crear un botón para quitar el filtro.
- Retroalimentación0:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Manejo de cuentas: Modelo+Vista+Controlador11:28
Crearemos los archivos Modelo+Vista+Controlador
- El filtro de la sesión5:32
Crearemos el método de alta y la vista correspondiente.
- Alta de una cuenta6:07
Preparar la vista para añadir una cuenta.
- Recibir y validar la información de la vista6:45
Un proceso muy importante es recibir en el controlador la información de la vista y validarla o procesarla, antes de ser enviada al Modelo.
- Añadir el registro a la base de datos11:19
Una vez que hayamos validado nuestros datos, estamos listos para su inserción a nuestra tabla.
- Preparar la vista CRUD para la modificación (update)6:25
Utilizaremos la misma vista de la alta para desplegar los datos para ser modificados.
Debemos enviar el identificador para ser enviado de regreso para ser modificados.
- Eliminar una cuenta (delete)6:54
Utilizaremos la misma vista de la alta para desplegar los datos para ser eliminados.
Hay que tener mucho cuidado en mantener la integridad referencial.
- Retroalimentación0:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Crear el Modelo, la Vista y el Controlador para los movimientos10:04
Los movimientos son el corazón del sistema.
Reunimos una categoría (por ejemplo, Renta) con una cuenta (por ejemplo, efectivo).
Actualizamos la cuenta (cargo o abono).
El presupuesto no se actualiza, lo calcularemos.
- El query de los movimientos9:47
$sql = "SELECT m.id as id, m.usuario as usuario, m.tipo as tipo, ";
$sql.= "m.fecha as fecha, m.nota as nota, ";
$sql.= "ca.categoria as categoriaNombre, cu.cuenta as cuentaNombre ";
$sql.= "FROM movimientos as m, cuentas as cu, categorias as ca ";
$sql.= "WHERE m.categoria=ca.id AND ";
$sql.= "m.cuenta=cu.id AND ";
$sql.= "m.usuario=".$usuario.$filtro;
$sql.= " LIMIT ".$inicio.", ".$tamano;
- Manejo de los tipos de categorías y cuentas8:54
En varios procesos del sistema vamos a necesitar la lectura de cuentas, categorías y sus tipos, por lo cual será mejor .
- Crear la vista CRUD del movimiento7:56
Crearemos la vista CRUD para la captura de los movimientos.
- Validar el registro de movimientos10:05
Recibiremos los datos de la vista, los validamos y los insertamos en la base de datos.
- Insertar registro9:18
Una vez validada la información se envía la misma al Modelo para ser insertada en la tabla.
Ajustaremos la vista.
- Ajustar las cuentas12:09
Cuando añadimos un movimiento debemos ajustar el saldo en las cuentas.
- Preparar la vista CRUD para la modificación (update)10:20
Utilizaremos la misma vista de la alta para desplegar los datos para ser modificados.
Debemos enviar el identificador para ser enviado de regreso para ser modificados.
- Ajustar los saldos10:09
Primero debemos “deshacer” el movimiento.
Recibir los datos y volver a modificar los saldos.
- Borrar un movimiento10:52
Primero debemos “deshacer” el movimiento.
Borrar el movimiento.
- Crear la vista del filtro9:26
Crear la vista y los métodos para el filtro.
- Crear el filtro para la base de datos10:52
Por medio de los datos de la vista armaremos la cadena para el filtro.
- Aplicar el filtro para la base de datos12:45
Por medio de los datos de la vista armaremos la cadena para el filtro.
- Crear vistas generales para mensajes7:07
Simplifiquemos los mensajes al usuario como correcto, incorrecto, etc.
- Descargar los movimientos12:05
Con una opción muy sencilla podemos descargar los movimientos en formato CSV.
header('Content-Type: text/plain');
header('Content-Disposition: attachment;filename='.$salida);
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');
fputcsv($output, $encabezados);
- Introducción a los traspasos9:14
Los traspasos son movimientos entre cuentas, por ejemplo:
El pago de la tarjeta de crédito (disminuye tu deuda, disminuye tu efectivo).
El retiro de la tarjeta de débito (disminuye la cuenta de débito, aumenta tu efectivo).
El retiro de una tarjeta de crédito (aumenta tu deuda, aumenta tu efectivo).
- Crear el query de los traspasos4:00
Necesitamos integrar los números de cuenta.
- Crear la vista para el CRUD13:00
Copiaremos una vista de otro objeto o instancia para el proceso de Altas-Bajas-Cambios de las transferencias.
- Incluir el saldo y validar los datos10:47
Para realizar un traspaso es importante conocer los saldos de las cuentas.
Verificaremos que el traspaso no sobrepase los saldos de las cuentas de efectivo.
- Validar cuentas de crédito8:47
Verificaremos que el traspaso no sobrepase los saldos de las cuentas de efectivo.
- Insertar los datos a la base de datos7:05
Una vez validado los datos, los insertaremos en la tabla y modificaremos las cuentas.
- Filtrar los traspasos8:46
Crearemos la vista para filtrar los traspasos.
- Crear el filtro9:37
Crearemos la cadena para el filtro y la cadena de ordenación.
- Aplicar el filtro4:00
Una vez creada la cadena, la aplicaremos al Query .
- Descargar los traspasos6:07
El alumno :
Creará la base de datos y un proceso completo de altas, bajas y cambios (ABC o CRUD) para las diferentes tablas.
Aprenderá a paginar una consulta de una tabla grande.
Creará las otras páginas para las Altas, Bajas y Cambios o CRUD.
- Retroalimentación0:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Crear los archivos básicos para el Presupuesto10:55
El presupuesto nos permite controlar nuestros gastos:
Calcularemos los gastos por cada una de las categorías.
Obviamente sólo es una herramienta de control, podemos gastar lo que sea.
- Crear el query del presupuesto8:05
Necesitamos integrar los números de cuenta.
SELECT sum(movimientos.monto) as gasto from movimientos
LEFT join categorias on categorias.id = movimientos.categoria
Group by movimientos.categoria;
- Detalle de los movimientos de la cuenta7:57
Definiremos la tabla del presupuesto y crearemos la vista del detalle.
- Leer los movimientos de la categoría10:50
Recibimos el número de categoría, leeremos el detalle de los movimientos y los relacionaremos con el presupuesto.
- Visualizar el presupuesto7:28
En la pantalla de detalle podemos ir calculando el presupuesto de la categoría.
- Descargar presupuestos3:47
Descargaremos los presupuestos a un archivo CSV.
- Retroalimentación0:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Cuentas por cobrar10:53
Las cuentas por cobrar son facturas o recibos generados por alguna actividad realizada y que queda pendiente por ser pagada.
Las CXC no entran a nuestra contabilidad hasta que son pagadas.
- Dar de alta una CXC9:59
Necesitamos integrar las cuentas por cobrar.
- Insertar el registro en la base de datos7:00
Insertaremos el registro en la tabla de cuentas por cobrar.
- Pagar una cuenta por cobrar12:53
Necesitamos las cuentas para saber en cuál nos pagarán, o si es un pago en efectivo.
- Crear el movimiento del pago de la CXC12:06
Debemos modificar el registro de la cxc, crear un registro de movimiento y actualizar la cuenta.
- Insertar movimiento10:46
Primero debemos recuperar la categoría de la transferencia.
Creamos el movimiento.
Actualizamos la cuenta.
- Cancelar una cuenta por cobrar8:05
Sólo podemos cancelar una cuenta por cobrar que esté pendiente.
- Depurar las cuentas por cobrar7:38
En el caso de las cuentas por cobrar, por ser relativamente independientes, es mejor depurarlas:
copiarlas en un formato CSV
Después borrarlas.
- Crear un mensaje de advertencia9:46
El alumno :
Creará la base de datos y un proceso completo de altas, bajas y cambios (ABC o CRUD) para las diferentes tablas.
Aprenderá a paginar una consulta de una tabla grande.
Creará las otras páginas para las Altas, Bajas y Cambios o CRUD.
- Retroalimentación0:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Introducción a la Configuración10:27
En el registro del usuario podemos almacenar la configuración de las categorías de traspasos, préstamos, cuentas por pagar, etc.
- Crear los campos de categorías de configuraciones9:30
Crearemos los campos para la configuración:
traspasos
cxc
ahorro
prestamoRecibido
pagoPrestamoRecibido
prestamoOtorgado
pagoPrestamoOtorgado
periodo
- Validar los datos de la vista11:27
Validaremos el registro en la vista de configuración.
- Modificar la variable de sesión9:52
Una vez modificadas las cuentas, debemos de modificar la variable de sesión de “usuario”.
- Validar los traspasos y cxc6:50
Antes de entrar a cualquier proceso debemos de validar si tenemos las categorías correspondientes.
- Datos del usuario10:28
Crearemos una vista para modificar los datos del usuario.
- Validar los datos de las claves de acceso10:50
Validaremos la información del perfil del usuario antes de ser modificado.
- Modificar la clave de acceso7:30
Una vez que validemos los datos, debemos de modificarlos en la base de datos.
- Retroalimentación0:06
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentarios son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
Requirements
- Conocimientos medios de PHP
- Conocimientos medios de MySQL
- Conocimientos básicos de JavaScript (opcional)
- Conocimientos básicos de Bootstrap (opcional)
Description
Una aplicación que es muy recurrente en Internet es el desarrollo de una para el manejo de gastos personales. Esta aplicación nos sirve para utilizar lenguajes del lado del cliente, como JavaScript y lenguajes del lado del servidor como PHP, así como conectarlo con bases de datos, en este caso como MySQL, herramientas que son las más utilizadas en la Web. En este curso construiremos las páginas web por medio de Bootstrap 5.3. lo cual nos permitirá tener una aplicación responsiva.
Partiremos desde una página completamente en blanco hasta concluir la parte del usuario (front-end) y la parte del administrador (back-end). Los objetivos del presente curso son:
Conocer los aspectos básicos de PHP y su instalación.
Crear la estructura Modelo, Vista y Controlador para construir la tienda virtual con PHP y MySQL.
Crear el controlador, el modelo y las vistas necesarias para permitir el acceso de los usuarios al sistema.
Crear el menú, controlador, modelo y las vistas necesarias para: el tablero, las cuentas, los movimientos.
Manejo de imágenes y paginación de consultas muy largas
Este curso intermedio, por lo que usted debe tener las bases de programación en Bootstrap, PHP, JavaScript y MySQL, aunque no debe de ser experto en ellos. Es una buena oportunidad para poner en práctica sus conocimientos. Usted debe de contar con una instalación de Apache-PHP-MySQL, como XAMPP, MAMP o WAMP.
Al final del curso contarás con todos los archivos del curso y los esquemas de la base de datos.
Who this course is for:
- Desarrolladores de PHP y MySQL