En este post te mostraré un sistema que acabo de programar en PHP y MySQL, además de usar Bootstrap para framework de diseño. Este software que te presento es totalmente gratuito para descargar, y open source.

El sistema en PHP que he creado se encarga de llevar el registro de asistencia de empleados. Por cada empleado, el sistema guarda si ha asistido o no en determinada fecha.

Un módulo con el que este sistema cuenta es con el de registro y gestión de empleados. El segundo módulo se encarga de tomar la asistencia en una fecha concreta (se puede elegir entre asistencia o falta).

Finalmente el tercer módulo muestra el reporte de asistencia de empleados en donde muestra a partir de un rango de fechas la cantidad de faltas y asistencia que tuvo cada empleado.

Como lo dije, este software es totalmente open source y gratuito. La base de datos que usa es MySQL, con el lenguaje de programación PHP, un poco de JavaScript con Vue y finalmente con Bootstrap para el diseño.

A lo largo de este post te mostraré cómo es que fue creado este sistema así como detallar sus módulos, y te dejaré un enlace de descarga como suelo hacer.

Nota: también puedes ver este sistema funcionando con tarjetas RFID.

Base de datos y conexión

Se cuenta con una base de datos que tiene dos tablas: la que tiene el registro de los empleados y la que tiene el registro de asistencia:

Como puedes ver, existen relaciones entre las tablas a través de la columna employee_id. En el lado de la conexión desde PHP hasta MySQL usamos PDO. La conexión está dentro de las funciones:

Las credenciales de acceso está en el archivo env.php (no incluido, el cual debes crear tú). En mi caso se ve así:

De este modo vamos a poder incluir la conexión en cualquier lugar que sea necesaria. Por cierto, vamos a evitar inyecciones SQL por lo que este sistema será seguro en ese aspecto.

Diseño del sistema

El sistema es muy simple y se usan varios includes para separar el menú de navegación, el encabezado y el pie. También se separan todas las funciones en un solo archivo. Por ejemplo, así es el encabezado:

Así es el menú:

Y finalmente así se ve el pie:

También he usado los iconos de FontAwesome.

Administración de empleados

Pasemos a la administración de empleados. En este caso solo registramos el nombre del empleado pero podemos agregar más campos de ser necesario. Es un CRUD completo, es decir, registrar, editar, eliminar y listar.

Las funciones de PHP que gestionan todas estas operaciones son las siguientes:

Cada función recibe argumentos dependiendo de lo que realiza. Por ejemplo, la función para obtener empleados no recibe ningún argumento pero regresa un arreglo con todos los empleados. No explicaré todo el código aquí pues se haría muy extenso.

Para el caso del listado de empleados lo hacemos así:

Lo único que hacemos es dibujar una tabla usando un foreach, recorriendo el arreglo de empleados que nos devuelve la función getEmployees.

Registrar asistencia

Para el caso del registro de asistencia implementé el framework Vue.js para facilitar ciertas cosas. Se podría decir que este apartado implementa AJAX.

Lo primero que se hace es elegir la fecha en la que se toma la asistencia. Si ya hay datos para la fecha, entonces aparecen. En caso de que no, todos los empleados tienen el estado “desconocido”.

Ahora veamos el algoritmo. Al guardar la asistencia, se eliminan todos los registros de esa fecha. Después, por cada registro nuevo se va guardando el estado. Es decir, se hace un “update” que en realidad es limpiar todo y guardarlo de nuevo.

Por cierto, al inicio cuando cambia una fecha, se cargan todos los datos que ya existan. Todo lo que acabo de mencionar se puede ver en las siguientes funciones:

Aquí hay que prestar atención a la función saveAttendanceData que simplemente guarda los datos de la asistencia, recibiendo la lista de empleados con su estado, además de la fecha.

Lo interesante es ver el commit y el beginTransaction, pues hago esto para que la inserción sea más rápida, ya que se hacen varios insert dependiendo de la cantidad de datos.

También veamos el código que hace posible esta vista, el cual maneja las peticiones AJAX y usa vue.js:

Fíjate en la línea 67 que se encarga de guardar la asistencia. En los comentarios se explica el código, y finalmente la petición AJAX es realizada en la línea 81.

También es importante resaltar que para avisar al usuario que la asistencia ha sido guardada he usado una librería para mostrar notificaciones en Vue.js.

Reporte de asistencia

El tercer y último módulo se encarga de brindar un reporte de asistencia de empleados, en un período de fechas. Es decir, a partir de un rango de fechas, se muestra un reporte en donde aparece el total de faltas de un empleado, así como el total de asistencias.

La función que se encarga de dar estos datos es la siguiente:

En este caso estoy haciendo un doble count, una cosa que no había hecho en toda mi vida. Lo demás es simplemente filtrar por rango de fechas y agrupar.

Y el código que muestra la interfaz dependiendo de la fecha es:

Por defecto se muestra el reporte del día actual, pero puede seleccionarse cualquier rango de fechas.

Poniendo todo junto

Me parece que ya he explicado las partes más importantes del código fuente de este sistema; aunque recuerda que no es todo el código. Te dejo el código completo en mi Github. Recuerda que debes crear el archivo de entorno y también crear la base de datos.

Hice este sistema porque planeo hacer otro sistema que toma la asistencia usando etiquetas RFID y una tarjeta ESP8266, pero iré paso por paso.

Finalmente te invito a leer más sobre PHP, MySQL o ver más sistemas creados por mí.