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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
-- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Servidor: 127.0.0.1 -- Tiempo de generación: 07-06-2017 a las 05:46:39 -- Versión del servidor: 10.1.19-MariaDB -- Versión de PHP: 7.0.13 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Base de datos: `test_empleados` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `empleados` -- CREATE TABLE `empleados` ( `codigo` varchar(10) NOT NULL, `nombres` varchar(50) NOT NULL, `lugar_nacimiento` varchar(30) NOT NULL, `fecha_nacimiento` varchar(30) NOT NULL, `direccion` varchar(50) NOT NULL, `telefono` varchar(10) NOT NULL, `puesto` varchar(15) NOT NULL, `estado` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Volcado de datos para la tabla `empleados` -- INSERT INTO `empleados` (`codigo`, `nombres`, `lugar_nacimiento`, `fecha_nacimiento`, `direccion`, `telefono`, `puesto`, `estado`) VALUES ('1250', 'Juan Campos', 'Santa Ana, El Salvador', '15-06-1991', '', '70252525', 'Gerente', 2), ('12509', 'Andres Perez', 'SM', '06-06-1980', 'SM', '12345789', 'Gerente', 3), ('15200', 'Marcos Amaya', 'Santa Salvador', '06-06-2017', 'San Salvador', '12345678', 'Vendedor', 1); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `empleados` -- ALTER TABLE `empleados` ADD PRIMARY KEY (`codigo`); /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
2- Conexión a la base de datos
Para conectar la base de datos hemos creado un archivo llamado “conexion.php”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php /*Datos de conexion a la base de datos*/ $db_host = "localhost"; $db_user = "root"; $db_pass = ""; $db_name = "test_empleados"; $con = mysqli_connect($db_host, $db_user, $db_pass, $db_name); if(mysqli_connect_errno()){ echo 'No se pudo conectar a la base de datos : '.mysqli_connect_error(); } ?> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<?php include("conexion.php"); ?> <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datos de empleados</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style_nav.css" rel="stylesheet"> <style> .content { margin-top: 80px; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <?php include('nav.php');?> </nav> <div class="container"> <div class="content"> <h2>Lista de empleados</h2> <hr /> <?php if(isset($_GET['aksi']) == 'delete'){ // escaping, additionally removing everything that could be (html/javascript-) code $nik = mysqli_real_escape_string($con,(strip_tags($_GET["nik"],ENT_QUOTES))); $cek = mysqli_query($con, "SELECT * FROM empleados WHERE codigo='$nik'"); if(mysqli_num_rows($cek) == 0){ echo '<div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> No se encontraron datos.</div>'; }else{ $delete = mysqli_query($con, "DELETE FROM empleados WHERE codigo='$nik'"); if($delete){ echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Datos eliminado correctamente.</div>'; }else{ echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Error, no se pudo eliminar los datos.</div>'; } } } ?> <form class="form-inline" method="get"> <div class="form-group"> <select name="filter" class="form-control" onchange="form.submit()"> <option value="0">Filtros de datos de empleados</option> <?php $filter = (isset($_GET['filter']) ? strtolower($_GET['filter']) : NULL); ?> <option value="1" <?php if($filter == 'Tetap'){ echo 'selected'; } ?>>Fijo</option> <option value="2" <?php if($filter == 'Kontrak'){ echo 'selected'; } ?>>Contratado</option> <option value="3" <?php if($filter == 'Outsourcing'){ echo 'selected'; } ?>>Outsourcing</option> </select> </div> </form> <br /> <div class="table-responsive"> <table class="table table-striped table-hover"> <tr> <th>No</th> <th>Código</th> <th>Nombre</th> <th>Lugar de nacimiento</th> <th>Fecha de nacimiento</th> <th>Teléfono</th> <th>Cargo</th> <th>Estado</th> <th>Acciones</th> </tr> <?php if($filter){ $sql = mysqli_query($con, "SELECT * FROM empleados WHERE estado='$filter' ORDER BY codigo ASC"); }else{ $sql = mysqli_query($con, "SELECT * FROM empleados ORDER BY codigo ASC"); } if(mysqli_num_rows($sql) == 0){ echo '<tr><td colspan="8">No hay datos.</td></tr>'; }else{ $no = 1; while($row = mysqli_fetch_assoc($sql)){ echo ' <tr> <td>'.$no.'</td> <td>'.$row['codigo'].'</td> <td><a href="profile.php?nik='.$row['codigo'].'"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> '.$row['nombres'].'</a></td> <td>'.$row['lugar_nacimiento'].'</td> <td>'.$row['fecha_nacimiento'].'</td> <td>'.$row['telefono'].'</td> <td>'.$row['puesto'].'</td> <td>'; if($row['estado'] == '1'){ echo '<span class="label label-success">Fijo</span>'; } else if ($row['estado'] == '2' ){ echo '<span class="label label-info">Contratado</span>'; } else if ($row['estado'] == '3' ){ echo '<span class="label label-warning">Outsourcing</span>'; } echo ' </td> <td> <a href="edit.php?nik='.$row['codigo'].'" title="Editar datos" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> <a href="index.php?aksi=delete&nik='.$row['codigo'].'" title="Eliminar" onclick="return confirm(\'Esta seguro de borrar los datos '.$row['nombres'].'?\')" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a> </td> </tr> '; $no++; } } ?> </table> </div> </div> </div><center> <p>© Sistemas Web <?php echo date("Y");?></p </center> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
4- Editar los datos de los empleados
Para editar los datos de los empleados, se ha creado un archivo llamado “edit.php”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
<?php include("conexion.php"); ?> <!DOCTYPE html> <html lang="es"> <head> <!-- Project : Datos de empleados con PHP, MySQLi y Bootstrap CRUD (Create, read, Update, Delete) Author : Obed Alvarado Website : http://www.obedalvarado.pw Blog : http://obedalvarado.pw/blog/ Email : info@obedalvarado.pw --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datos de empleados</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-datepicker.css" rel="stylesheet"> <link href="css/style_nav.css" rel="stylesheet"> <style> .content { margin-top: 80px; } </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <?php include("nav.php");?> </nav> <div class="container"> <div class="content"> <h2>Datos del empleados » Editar datos</h2> <hr /> <?php // escaping, additionally removing everything that could be (html/javascript-) code $nik = mysqli_real_escape_string($con,(strip_tags($_GET["nik"],ENT_QUOTES))); $sql = mysqli_query($con, "SELECT * FROM empleados WHERE codigo='$nik'"); if(mysqli_num_rows($sql) == 0){ header("Location: index.php"); }else{ $row = mysqli_fetch_assoc($sql); } if(isset($_POST['save'])){ $codigo = mysqli_real_escape_string($con,(strip_tags($_POST["codigo"],ENT_QUOTES)));//Escanpando caracteres $nombres = mysqli_real_escape_string($con,(strip_tags($_POST["nombres"],ENT_QUOTES)));//Escanpando caracteres $lugar_nacimiento = mysqli_real_escape_string($con,(strip_tags($_POST["lugar_nacimiento"],ENT_QUOTES)));//Escanpando caracteres $fecha_nacimiento = mysqli_real_escape_string($con,(strip_tags($_POST["fecha_nacimiento"],ENT_QUOTES)));//Escanpando caracteres $direccion = mysqli_real_escape_string($con,(strip_tags($_POST["direccion"],ENT_QUOTES)));//Escanpando caracteres $telefono = mysqli_real_escape_string($con,(strip_tags($_POST["telefono"],ENT_QUOTES)));//Escanpando caracteres $puesto = mysqli_real_escape_string($con,(strip_tags($_POST["puesto"],ENT_QUOTES)));//Escanpando caracteres $estado = mysqli_real_escape_string($con,(strip_tags($_POST["estado"],ENT_QUOTES)));//Escanpando caracteres $update = mysqli_query($con, "UPDATE empleados SET nombres='$nombres', lugar_nacimiento='$lugar_nacimiento', fecha_nacimiento='$fecha_nacimiento', direccion='$direccion', telefono='$telefono', puesto='$puesto', estado='$estado' WHERE codigo='$nik'") or die(mysqli_error()); if($update){ header("Location: edit.php?nik=".$nik."&pesan=sukses"); }else{ echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Error, no se pudo guardar los datos.</div>'; } } if(isset($_GET['pesan']) == 'sukses'){ echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Los datos han sido guardados con éxito.</div>'; } ?> <form class="form-horizontal" action="" method="post"> <div class="form-group"> <label class="col-sm-3 control-label">Código</label> <div class="col-sm-2"> <input type="text" name="codigo" value="<?php echo $row ['codigo']; ?>" class="form-control" placeholder="NIK" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Nombres</label> <div class="col-sm-4"> <input type="text" name="nombres" value="<?php echo $row ['nombres']; ?>" class="form-control" placeholder="Nombres" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Lugar de nacimiento</label> <div class="col-sm-4"> <input type="text" name="lugar_nacimiento" value="<?php echo $row ['lugar_nacimiento']; ?>" class="form-control" placeholder="Lugar de nacimiento" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Fecha de nacimiento</label> <div class="col-sm-4"> <input type="text" name="fecha_nacimiento" value="<?php echo $row ['fecha_nacimiento']; ?>" class="input-group date form-control" date="" data-date-format="yyyy-mm-dd" placeholder="0000-00-00" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Dirección</label> <div class="col-sm-3"> <textarea name="direccion" class="form-control" placeholder="Dirección"><?php echo $row ['direccion']; ?></textarea> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Teléfono</label> <div class="col-sm-3"> <input type="text" name="telefono" value="<?php echo $row ['telefono']; ?>" class="form-control" placeholder="Teléfono" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Puesto</label> <div class="col-sm-3"> <input type="text" name="puesto" value="<?php echo $row ['puesto']; ?>" class="form-control" placeholder="Puesto" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Estado</label> <div class="col-sm-3"> <select name="estado" class="form-control"> <option value="">- Selecciona estado -</option> <option value="1" <?php if ($row ['estado']==1){echo "selected";} ?>>Fijo</option> <option value="2" <?php if ($row ['estado']==2){echo "selected";} ?>>Contrado</option> <option value="3" <?php if ($row ['estado']==3){echo "selected";} ?>>Outsourcing</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label"> </label> <div class="col-sm-6"> <input type="submit" name="save" class="btn btn-sm btn-primary" value="Guardar datos"> <a href="index.php" class="btn btn-sm btn-danger">Cancelar</a> </div> </div> </form> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-datepicker.js"></script> <script> $('.date').datepicker({ format: 'dd-mm-yyyy', }) </script> </body> </html> |
5- Crear empleados
Para la creación de los empleados, hemos creado un archivo llamado “add.php”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
<?php include("conexion.php"); ?> <!DOCTYPE html> <html lang="es"> <head> <!-- Project : Datos de empleados con PHP, MySQLi y Bootstrap CRUD (Create, read, Update, Delete) Author : Obed Alvarado Website : http://www.obedalvarado.pw Blog : http://obedalvarado.pw/blog/ Email : info@obedalvarado.pw --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Latihan MySQLi</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-datepicker.css" rel="stylesheet"> <link href="css/style_nav.css" rel="stylesheet"> <style> .content { margin-top: 80px; } </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <?php include("nav.php");?> </nav> <div class="container"> <div class="content"> <h2>Datos del empleados » Agregar datos</h2> <hr /> <?php if(isset($_POST['add'])){ $codigo = mysqli_real_escape_string($con,(strip_tags($_POST["codigo"],ENT_QUOTES)));//Escanpando caracteres $nombres = mysqli_real_escape_string($con,(strip_tags($_POST["nombres"],ENT_QUOTES)));//Escanpando caracteres $lugar_nacimiento = mysqli_real_escape_string($con,(strip_tags($_POST["lugar_nacimiento"],ENT_QUOTES)));//Escanpando caracteres $fecha_nacimiento = mysqli_real_escape_string($con,(strip_tags($_POST["fecha_nacimiento"],ENT_QUOTES)));//Escanpando caracteres $direccion = mysqli_real_escape_string($con,(strip_tags($_POST["direccion"],ENT_QUOTES)));//Escanpando caracteres $telefono = mysqli_real_escape_string($con,(strip_tags($_POST["telefono"],ENT_QUOTES)));//Escanpando caracteres $puesto = mysqli_real_escape_string($con,(strip_tags($_POST["puesto"],ENT_QUOTES)));//Escanpando caracteres $estado = mysqli_real_escape_string($con,(strip_tags($_POST["estado"],ENT_QUOTES)));//Escanpando caracteres $cek = mysqli_query($con, "SELECT * FROM empleados WHERE codigo='$codigo'"); if(mysqli_num_rows($cek) == 0){ $insert = mysqli_query($con, "INSERT INTO empleados(codigo, nombres, lugar_nacimiento, fecha_nacimiento, direccion, telefono, puesto, estado) VALUES('$codigo','$nombres', '$lugar_nacimiento', '$fecha_nacimiento', '$direccion', '$telefono', '$puesto', '$estado')") or die(mysqli_error()); if($insert){ echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Bien hecho! Los datos han sido guardados con éxito.</div>'; }else{ echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Error. No se pudo guardar los datos !</div>'; } }else{ echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Error. código exite!</div>'; } } ?> <form class="form-horizontal" action="" method="post"> <div class="form-group"> <label class="col-sm-3 control-label">Código</label> <div class="col-sm-2"> <input type="text" name="codigo" class="form-control" placeholder="Código" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Nombres</label> <div class="col-sm-4"> <input type="text" name="nombres" class="form-control" placeholder="Nombres" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Lugar de nacimiento</label> <div class="col-sm-4"> <input type="text" name="lugar_nacimiento" class="form-control" placeholder="Lugar de nacimiento" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Fecha de nacimiento</label> <div class="col-sm-4"> <input type="text" name="fecha_nacimiento" class="input-group date form-control" date="" data-date-format="dd-mm-yyyy" placeholder="00-00-0000" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Dirección</label> <div class="col-sm-3"> <textarea name="direccion" class="form-control" placeholder="Dirección"></textarea> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Teléfono</label> <div class="col-sm-3"> <input type="text" name="telefono" class="form-control" placeholder="Teléfono" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Puesto</label> <div class="col-sm-3"> <input type="text" name="puesto" class="form-control" placeholder="Puesto" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Estado</label> <div class="col-sm-3"> <select name="estado" class="form-control"> <option value=""> ----- </option> <option value="1">Fijo</option> <option value="2">Contratado</option> <option value="3">Outsourcing</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label"> </label> <div class="col-sm-6"> <input type="submit" name="add" class="btn btn-sm btn-primary" value="Guardar datos"> <a href="index.php" class="btn btn-sm btn-danger">Cancelar</a> </div> </div> </form> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-datepicker.js"></script> <script> $('.date').datepicker({ format: 'dd-mm-yyyy', }) </script> </body> </html> |
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”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<?php include("conexion.php"); ?> <!DOCTYPE html> <html lang="es"> <head> <!-- Project : Datos de empleados con PHP, MySQLi y Bootstrap CRUD (Create, read, Update, Delete) Author : Obed Alvarado Website : http://www.obedalvarado.pw Blog : http://obedalvarado.pw/blog/ Email : info@obedalvarado.pw --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datos de empleados</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style_nav.css" rel="stylesheet"> <style> .content { margin-top: 80px; } </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <?php include("nav.php");?> </nav> <div class="container"> <div class="content"> <h2>Datos del empleados » Perfil</h2> <hr /> <?php // escaping, additionally removing everything that could be (html/javascript-) code $nik = mysqli_real_escape_string($con,(strip_tags($_GET["nik"],ENT_QUOTES))); $sql = mysqli_query($con, "SELECT * FROM empleados WHERE codigo='$nik'"); if(mysqli_num_rows($sql) == 0){ header("Location: index.php"); }else{ $row = mysqli_fetch_assoc($sql); } if(isset($_GET['aksi']) == 'delete'){ $delete = mysqli_query($con, "DELETE FROM empleados WHERE codigo='$nik'"); if($delete){ echo '<div class="alert alert-danger alert-dismissable">><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Data berhasil dihapus.</div>'; }else{ echo '<div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Data gagal dihapus.</div>'; } } ?> <table class="table table-striped table-condensed"> <tr> <th width="20%">Código</th> <td><?php echo $row['codigo']; ?></td> </tr> <tr> <th>Nombre del empleado</th> <td><?php echo $row['nombres']; ?></td> </tr> <tr> <th>Lugar y Fecha de Nacimiento</th> <td><?php echo $row['lugar_nacimiento'].', '.$row['fecha_nacimiento']; ?></td> </tr> <tr> <th>Dirección</th> <td><?php echo $row['direccion']; ?></td> </tr> <tr> <th>Teléfono</th> <td><?php echo $row['telefono']; ?></td> </tr> <tr> <th>Puesto</th> <td><?php echo $row['puesto']; ?></td> </tr> <tr> <th>Estado</th> <td> <?php if ($row['estado']==1) { echo "Fijo"; } else if ($row['estado']==2){ echo "Contratado"; } else if ($row['estado']==3){ echo "Outsourcing"; } ?> </td> </tr> </table> <a href="index.php" class="btn btn-sm btn-info"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Regresar</a> <a href="edit.php?nik=<?php echo $row['nik']; ?>" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Editar datos</a> <a href="profile.php?aksi=delete&nik=<?php echo $row['nik']; ?>" class="btn btn-sm btn-danger" onclick="return confirm('Esta seguro de borrar los datos <?php echo $row['nombres']; ?>')"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Eliminar</a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
8- Creación del menú de nuestra aplicación
Llamaremos a nuestro archivo, que contendrá el menú de la aplicación “nav.php”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand visible-xs-block visible-sm-block" href="">Inicio</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav "> <li class="active"><a href="index.php">Lista de empleados</a></li> <li><a href="add.php">Agregar datos</a></li> </ul> </div><!--/.nav-collapse --> </div> |
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:
