- Creamos una
nueva columna Acciones, con dos botones, y al botón de editar lo configuramos
para que abra un modal. esto con el siguiente código.
<td>
<div class="btn-group">
<button class="btn btn-warning btn-xs btnEditarUsuario" idUsuario="'.$value["id"].'" data-toggle="modal" data-target="#modalEditarUsuario"><i class="fas fa-pencil-alt"></i></button>
<button class="btn btn-danger btn-xs btnEliminarUsuario" idUsuario="'.$value["id"].'" fotoUsuario="'.$value["foto"].'" usuario="'.$value["usuario"].'"><i class="fa fa-times"></i></button>
</div>
</td>
|
2. Creamos el
modal de actualización copiando el miso de agregar usuario pero actualizamos el
id, y cambiamos los name de los input quedando así
<!--
Modal Editar Usuario -->
<div class="modal fade"
id="modalEditarUsuario" role="dialog">
<div class="modal-dialog">
<form role="form" method="post"
enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">Agregar usuario</h5>
<button type="button"
class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<span
class="input-group-addon" style="margin:10px 10px 0px
0px;"><i class="fa fa-user"></i></span>
<input type="text"
name="editarNombre" class="form-control input-lg"
value="Nombre Usuario" required>
</div>
</div>
<div
class="form-group">
<div
class="input-group">
<span
class="input-group-addon" style="margin:10px 10px 0px
0px;"><i class="fa fa-key"></i></span>
<input type="text"
name="editarUsuario" class="form-control input-lg"
placeholder="Ingresar usuario" required>
</div>
</div>
<div
class="form-group">
<div
class="input-group">
<span class="input-group-addon"
style="margin:10px 10px 0px 0px;"><i class="fa
fa-lock"></i></span>
<input type="text"
name="editarPassword" class="form-control input-lg"
placeholder="Escriba la nueva contraseña" required>
</div>
</div>
<div
class="form-group">
<div class="input-group">
<span
class="input-group-addon" style="margin:10px 10px 0px
0px;"><i class="fa fa-user"></i></span>
<select class="form-control
input-lg" name="editarPerfil">
<option value=""
id="editarPerfil"></option>
<option
value="Administrador">Administrador</option>
<option
value="Vendedor">Vendedor</option>
<option
value="Especial">Especial</option>
</select>
</div>
</div>
<div class="form-group">
<div
class="panel">SUBIRFOTO</div>
<input type="file"
name="editarFoto" class="nuevaFoto center-block">
<p
class="center-block">Peso maximo de la foto 2Mb</p>
<img src="vistas/img/user.png" class="thumbnail center-block
previsualizar" width="100px">
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-dismiss="modal">Salir</button>
<button type="submit"
class="btn btn-primary">Guardar</button>
</div>
</div>
<?php
$crearusuario = new ControladorUsuarios();
$crearusuario -> ctrCrearUsuario();
?>
</form>
</div>
</div>
|
3. Previamente se agrego la clase btnEditarUsuario y el parámetro idUsuario en el paso 1
ahora colocamos
el siguiente código de js
$(".btnEditarUsuario").click(function(){
var idUsuario =
$(this).attr("idUsuario");
console.log("idUsuario",idUsuario);
})
|
1. 4. verificamos
que al presionar un registro nos imprima en la consola el id. Utilizamos
ajax para traer los datos de la bd para ello en el archivo usuarios.js dejamos
el codigo de la siguiente manera
/*=============================================
EDITAR USUARIO
=============================================*/
$(".btnEditarUsuario").click(function(){
var idUsuario =
$(this).attr("idUsuario");
var datos = new FormData();
datos.append("idUsuario", idUsuario);
$.ajax({
url:"ajax/usuarios.ajax.php",
method: "POST",
data: datos,
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: function(respuesta){
console.log("Respuesta",respuesta);
});
})
|
5. Creamos el archivo usuarios.ajax.php en la carpeta ajax en la raiz del proyecto.
require_once
"../controladores/usuarios.controlador.php";
require_once
"../modelos/usuarios.modelo.php";
class
AjaxUsuarios{
/*=============================================
EDITAR USUARIO
=============================================*/
public
$idUsuario;
public
function ajaxEditarUsuario(){
$item
= "id";
$valor
= $this->idUsuario;
$respuesta
= ControladorUsuarios::ctrMostrarUsuarios($item, $valor);
echo
json_encode($respuesta);
}
}
/*=============================================
EDITAR
USUARIO
=============================================*/
if(isset($_POST["idUsuario"])){
$editar
= new AjaxUsuarios();
$editar
-> idUsuario = $_POST["idUsuario"];
$editar ->
ajaxEditarUsuario();
}
|
6. Probar que
en la consola muestre todos los datos del registro seleccionado
agregamos un
los id editarNombre, editarPassword, editarPerfil, editarUsuario en e modal de
editarUsuario
y en el
archivo usuarios.js reemplazamos la linea
console.log("Respuesta",respuesta); por lo siguiente
$("#editarNombre").val(respuesta['nombre']);
$("#editarUsuario").val(respuesta['usuario']);
$("#editarPerfil").html(respuesta['perfil']);
if(respuesta['foto']!=""){
$(".previsualizar").attr("src",respuesta['foto']);
}
},
error : function(respuesta) {
console.log("Error",respuesta);
}
|
7. Se agrega el
un input oculto de password de password de la siguiente manera
<input type="hidden"
name="passwordActual" id="passwordActual">
|
7. Se agrega un input oculto debajo de la etiqueta img de la foto de la siguiente manera
<input type="hidden" name="fotoActual"
id="fotoActual">
|
8. Se modifica
el archivo usuarios.js quedando de la sigiente manera
$("#editarNombre").val(respuesta['nombre']);
$("#editarUsuario").val(respuesta['usuario']);
$("#passwordActual").val(respuesta['password']);
$("#editarPerfil").html(respuesta['perfil']);
$("#editarPerfil").val(respuesta['perfil']);
$("#fotoActual").val(respuesta['foto']);
if(respuesta['foto']!=""){
$(".previsualizar").attr("src",respuesta['foto']);
}
},
error : function(respuesta) {
console.log("Error",respuesta);
}
|
9. SE llama la
funcion editar usuario del controlador con las siguientes lineas al final del
form
<?php
$editarUsuario = new ControladorUsuarios();
$editarUsuario -> ctrEditarUsuario();
?>
|
10. Se crea el
metodo ctrEditarUsuario
}
$tabla = "usuarios";
if($_POST['editarPassword']!=""){
if(preg_match('/^[a-zA-Z0-9]+$/',$_POST['nuevoPassword'])){
$salt = md5($_POST['editarPassword']);
$passwordEncriptado = crypt($_POST['editarPassword'],$salt);
}else{
echo"<script>
Swal.fire({
title: 'Error!',
text: '¡No puedes usar caraceres especiales en el campo contraseña!',
icon: 'error',
confirmButtonText:'Ok'
});
</script>";
}
}else{
$passwordEncriptado = $_POST['passwordActual'];
}
$datos = array("nombre"=>$_POST['editarNombre'],
"usuario"=>$_POST['editarUsuario'],
"password"=>$passwordEncriptado,
"perfil"=>$_POST['editarPerfil'],
"ruta"=>$ruta);
$respuesta = ModeloUsuarios::mdlEditarUsuario($tabla, $datos);
if($respuesta=="ok"){
echo"<script>
Swal.fire({
title: 'Success!',
text: '¡El usuario ha sido actualizaddo correctamente!',
icon: 'success',
confirmButtonText:'Ok'
}).then((result)=>{
if(result.value){
window.location = 'usuarios';
}
})
</script>";
}
}else{
echo"<script>
Swal.fire({
title: 'Error!',
text: '¡No puedes usar caracteres especiales en el campo nombre!',
icon: 'error',
confirmButtonText:'Ok'
})
</script>";
}
}
}
|
11. Se crear el
metodo mdlEditarUsuario en usuarios.modelo.php
static public function mdlEditarUsuario($tabla,$datos){
$stmt = conexion::conectar()->prepare("UPDATE $tabla SET nombre=:nombre,password=:password,perfil=:perfil,foto=:foto WHERE usuario=:usuario");
$stmt -> bindParam(":nombre",$datos['nombre'],PDO::PARAM_STR);
$stmt -> bindParam(":usuario",$datos['usuario'],PDO::PARAM_STR);
$stmt -> bindParam(":password",$datos['password'],PDO::PARAM_STR);
$stmt -> bindParam(":perfil",$datos['perfil'],PDO::PARAM_STR);
$stmt -> bindParam(":foto",$datos['ruta'],PDO::PARAM_STR);
if($stmt->execute()){
return "ok";
}else{
return "error";
}
$stmt ->close();
$stmt = null;
}
|
No hay comentarios:
Publicar un comentario