CRUD de datos de empleados con PHP, MySQL y Bootstrap

La creación de un CRUD es una tarea muy común en el desarrollo web  (CRUD por sus siglas en ingles Create/Read/Update/Delete).  Si tu eres un desarrollador web intermedio o avanzado, es muy probable que hayas creados muchos desarrollos que impliquen un (CRUD) ; ya que se utiliza para: desarrollo de sistemas de gestores de contenidos, desarrollo de sistemas de inventario, o un sistema contable.

Si tu estas iniciando en esta area del desarrollo web, sin duda este tutorial sera de mucha ayuda para ti, ya que te ahorrara un par de horas de desarrollo para la creación de tus propios CRUD.

En este tutorial, vamos a ir a paso a pasos  para la creación y mantenimiento de una tabla “empleados” usaremos como lenguaje de lado del servidor, el cual se comunicara con el gestor de base de datos MySQL, y para la parte del front-end, usaremos Bootstrap.

1- Creación de la base de datos

En este tutorial, vamos a trabajar en una simple tabla llamada “empleados”. Para crear la base de datos abre tu herramienta preferida para manejar la administración de MySQL, en nuestro caso usaremos phpMyAdmin. Luego de haber creado nuestra base de datos solo quedara ejecutar el código siguiente:

2- Conexión a la base de datos

Para conectar la base de datos hemos creado un archivo llamado “conexion.php”.

Como se puede ver, estamos utilizando MySQLI para el acceso a la base de datos.

 

$db_host= Host de la base de datos, generalmente suele ser “localhost”
$db_user= Nombre de usuario de la base de datos
$db_pass= Contraseña del usuario de la base de datos
$db_name = Nombre de la base de datos que se utilizará para la tabla “empleados”

3- Mostrar los datos de los empleados

Para mostrar los datos de los empleados hemos creado un archivo llamado “index.php“, el cual se encargará de listar los registros de nuestra tabla y mostrarlos a los usuarios.

4- Editar los datos de los empleados

Para editar los datos de los empleados, se ha creado un archivo llamado “edit.php


5- Crear empleados

Para la creación de los empleados, hemos creado un archivo llamado “add.php

6- Eliminar los datos de los empleados

Para eliminar los datos de los empleados hemos colocado el código respectivo para la eliminación de datos, en el archivo “index.php“, el cual fue creado en el paso  3

7- Viendo detalle datos de los empleados

Para visualizar la informacion detallada de cada empleado hemos creado el archivo “profile.php

8- Creación del menú de nuestra aplicación

Llamaremos a nuestro archivo, que contendrá el menú de la aplicación “nav.php

Nuestra estructura final de archivo sería similar a la siguiente:

Para que puedas comprender el funcionamiento del CRUD te aconsejo que descargues los archivos a continuación:

  • Enrique Tovar S

    Gracias por tu aporte, disculpa, para agregar una foto del empleado, ¿cómo se puede hacer? Gracias.

  • Grupo Sointex

    por favor ..no desbloquea el contenido aunque comparta en googel+

  • RAÚL

    Muchas gracias por toda la información, útil y muy bien explicado.

    Saludos desde Chile

  • jose osorio

    Excelente aplicación bien explicada. Gracias Obed

  • Lenin Morales Rivera

    Soy yo o el enlace de descarga va directo al script de datatables, las img de la demostración son muy distintas la de la datatables a esta, ???

    • Obed

      Muchas gracias por notificar el error en enlace de descarga, ya he agregado el enlace correcto!

  • Carlos

    Me puedes ayudar a descargar este “crud datos de empleados” quiero hacer esto.

  • Carlos

    Gracias!!!

  • Carlos

    http://elprofe.16mb.com este es el link –> admin ->admin para que me digas que se puede hacer.

  • jamarchi

    Hola, lo probe y este excelente… y fácil de entender… oye.. de casualidad este código lo tendrás pero que se le pueda agregar la foto del empleado ?

    • Obed

      De momento no tengo crud para subir la foto del empleado

      • jamarchi

        y alguno otro que suba imagen ?

      • Carlos

        Hola obed este crud es open sourse?, me regalas la oportunidad de tomar ideas de este ejercicio. para yo hacer mi crud.. Bendiciones. Por aparte

        • Obed

          Hola Carlos.
          Este script es gratuito y puedes usarlo libremente para uso personal y/o comercial.

  • Juan Carlos

    Hola Obed, sus demos son exelentes, tienes alguno de formulario master detalle con bootstrap?

  • Diego

    Hola, no puedo descargar los archivos. Siguen habilitados para descargar ?

  • Markos Moroxo

    Hola soy nuevo en esto, tengo un problema no puedo visualizar los datos
    https://uploads.disquscdn.com/images/a43105ffd80d701d6b4cae491cd00e2eb601fd274115bbbdd17bd3f90d887898.png

  • Paco Gherte

    Yo tengo este error, no esta definido la variable nik. En el boton Editar datos y en el boton Eliminar, del archivo profile.php – VER Datos de empleados. Alguna sugerencia? gracias.
    https://uploads.disquscdn.com/images/a1867e8bbf9c116c6a89d48bb1f9752b8616a7a9f942c99e88041a8c6501ecad.jpg

    • segundo pantoja

      amigo @paco gherte cambia la paalabra nik por la palabra codigo y asunto arreglado en los dos botones