PHP - CRUD CON MODAL PHP MYSQL BOOTSTRAP AJAX NO ME FUNCIONA

CRUD CON MODAL PHP MYSQL BOOTSTRAP AJAX NO ME FUNCIONA

Publicado por Juan (3 intervenciones) el 04/11/2022 01:24:18

Buenas noches grupo tengo un problema

necesito entregar pronto un CRUD con PHP MYSQL AJAX BOOTSTRAP Y VENTANA MODAL

COMENZE pero no puedo cargar registros en la modal ni actualizar ni borrar y necesito un ejemplo senicllo

donde pueda orientarme bien o corregir los que tengo mal en mi codigo.

agradezco de antemano cualquier buena ayuda.

las que he visto no me funcionan bien.

Carpeta codigo

conexion.php
<?php

$host = "localhost";
$user = "root";
$pass = "";
$base = "pruebas";

$conexion = new mysqli('localhost','root','','pruebas');

?>

insertar.php
<?php

include('conexion.php');

if(isset($_POST['nombres']) and !empty($_POST['nombres']) and
isset($_POST['apellido']) and !empty($_POST['apellido'])){

$sql = "INSERT INTO bendecido(nombre, Apellido)

values ('".$_POST['nombres']."',
'".$_POST['apellido']."')";

echo mysqli_query($conexion,$sql);
}

?>

tabla.php
<?php
include('conexion.php');
?>
<div class="container">
<div class="row">
<h5 align="center">Tabla de Mantenimiento Usuarios</h5>
<table class="table table-hover table-condensed table-bordered">
<div class="container my-4">
<div id="boton" align="right">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#registrar">
Add New Users
</button>
</div>
</div>
<tr>
<td>Id</td>
<td>Nombre</td>
<td>Apellido</td>
<td align="center">Editar</td>
<td align="center">Eliminar</td>
</tr>
<?php

$sql = "SELECT id, nombre, apellido FROM bendecido";
$resultado = mysqli_query($conexion,$sql);
while($row = mysqli_fetch_array($resultado)){
//creamos la variable datos para que extraiga los valores de los registros
//$datos = $row[0]."││".$row[1]."││".$row[2];
?>
<tr>
<td><?php echo $row[0] ?></td>
<td><?php echo $row[1] ?></td>
<td><?php echo $row[2] ?></td>
<td>
<div id="editar" align="center">
<button type="´button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editar" onclick="viewEdit(<?php echo $row[0] ?>)">
Editar
</button>
</div>
</td>
<td>
<div id="borrar" align="center">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#eliminar">
Borrar
</button>
</div>
</td>
</tr>
<?php

}

?>
</table>
</div>
</div>

ver_usuario.php
<?php

include('conexion.php');

if( isset($_POST['id'])){
$sql = sprintf("SELECT * FROM bendecido WHERE id = %d", $_POST['id']);
$result = mysqli_query($conecta,$sql);
$mostrar = mysqli_fetch_row($result);
echo json_encode($mostrar);
}

?>

carpeta Librerias
bootstrap-5.2.2-dist esta se tiene que descargar
jquery-3.6.0.min

librerias_cabecera.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="librerias/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

librerias_footer.php
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

index.php
<!DOCTYPE html>
<html>
<head>
<title>Pruebas</title>
<?php
include('librerias/librerias_cabecera.php');
include('librerias/librerias_footer.php');
?>
</head>
<body>

<div id="registrar" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal">×</button>
<h4 class="modal-title">Ingresar personal</h4>
</div>
<div class="modal-body">
<form method="post" id="guardar">
<label for="nombre" class="form-label">Ingrese nombre de personal</label>
<input type="text" name="nombres" id="nombres" class="form-control" />
<label for="apellido" class="form-label">Apellido</label>
<input type="text" name="apellido" id="apellido" class="form-control">
<br />
<input type="submit" name="insert" id="insert" value="Ingresar personal" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>



<div class="modal fade" id="editar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Editar Registros</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="text" hidden="" id="idpersona" name="">
<label for="nombreu" class="form-label">Nombre</label>
<input type="text" class="form-control" id="nombreu"
name="nombreu">
<label for="apellidou" class="form-label">Apellido</label>
<input type="text" class="form-control" id="apellidou" name="apellidou">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Actualizar</button>
</div>
</div>
</div>
</div>

<div id="tabla">

</div>

</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#tabla').load('codigo/tabla.php');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#insert').click(function(){
var datos = $('#guardar').serialize();
//alert(datos);
//return false;
$.ajax({
type:'POST',
url:'codigo/insertar.php',
data:datos,
success:function(r){
if(r==1){
alert("agregado con exito");
}else{
alert("Fallo al agregar");
}
$("#guardar")[0].reset();
}
});
return false;
});
});

function closeModal(){
$("#nombreu").val('');
$("#editar").modal('hide');
}

function viewEdit(_id){
//uso de ajax
$.ajax({
type:'POST',
url:'codigo/ver_usuario.php',
data: {id:_id} ,
success:function(r){
_json = JSON.parse(r);
$("#nombreu").val(_json[1]);
$("#apellidou").val(_json[2]);
},
error: function(r) { console.log(r) }
});
$("#editar").modal('show');
}
</script>

base de datos pruebas

tabla bendecido
-- phpMyAdmin SQL Dump
-- version 5.1.3
-- https://www.phpmyadmin.net/
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 04-11-2022 a las 01:01:04
-- Versión del servidor: 10.4.24-MariaDB
-- Versión de PHP: 7.4.29

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
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: `pruebas`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `bendecido`
--

CREATE TABLE `bendecido` (
`id` int(10) UNSIGNED NOT NULL,
`nombre` varchar(150) COLLATE utf8_spanish_ci NOT NULL,
`Apellido` varchar(20) COLLATE utf8_spanish_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;

--
-- Volcado de datos para la tabla `bendecido`
--

INSERT INTO `bendecido` (`id`, `nombre`, `Apellido`) VALUES
(51, 'Sofia', 'Yesterday'),
(52, 'Amanda Miguel', 'Argentina'),
(53, 'Erika ', 'Valoys'),
(54, 'Amanda', 'Miguel'),
(55, 'Jessel', 'Balls'),
(56, 'Hilary', 'Clinton'),
(57, 'Valdez', 'Johany'),
(58, 'Vanessa', 'Del rios'),
(59, 'Perdonados ', 'Todos'),
(60, 'Karen', 'Colombia'),
(61, 'Laura', 'Leon'),
(62, 'Valeria ', 'Lynch'),
(63, 'Sonia', 'Jaramillo'),
(64, 'Eugenio', '123'),
(65, 'Gisela ', 'Idalgo'),
(66, 'Ericka ', 'Varsallo');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `bendecido`
--
ALTER TABLE `bendecido`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `bendecido`
--
ALTER TABLE `bendecido`
MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=67;
COMMIT;

/*!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 */;

FAVOR SI ME PUIEDEN INDICAR MIS PASOS A SEGUIR PARA CORREGIR Y SEGUIR DESARROLLANDO ESTE PROYECTO O BIEN BRINDARME UN EJEMPLO FUNCIONABLE 100%
GRACIAS DE ANTE MANO

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 23

Val: 393

CRUD CON MODAL PHP MYSQL BOOTSTRAP AJAX NO ME FUNCIONA

Publicado por Jefferson (211 intervenciones) el 04/11/2022 20:04:42

Hola.

Necesariamente debe ser JQuery ????

Ya hasta se me olvido esa libreria, muy poco se usa.

Te recomiendo en su lugar JavaScript nativo o como le llaman vanila JavaScript

Deja te preparo un ejemplo algo rapidito y lo subo como adjunto en zip

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 23

Val: 393

CRUD CON MODAL PHP MYSQL BOOTSTRAP AJAX NO ME FUNCIONA

Publicado por Jefferson (211 intervenciones) el 04/11/2022 20:38:02

Mejor lo posteare

Crea un archivo index.php

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

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

    <title>Document</title>

</head>

<body>

    <section class="container">

        <h2 class="text-center mt-2 border p-2 rounded">Tabla listado</h2>

        <table class="table">

            <button class="btn btn-outline-success">Agregar</button>

            <thead>

                <tr>

                    <th scope="col">ID</th>

                    <th scope="col">NOMBRE</th>

                    <th scope="col">APELLIDO</th>

                    <th scope="col" class="text-center">CRUD</th>

                </tr>

            </thead>

            <tbody></tbody>

        </table>

        <div class="modal" tabindex="-1" id="myModal">

            <div class="modal-dialog">

                <div class="modal-content">

                    <div class="modal-header">

                        <h5 class="modal-title">MODAL</h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                    </div>

                    <div class="modal-body">

                        <form id="frm">

                            <div class="mb-3">

                                <label for="id" class="form-label">ID</label>

                                <input type="text" class="form-control" id="id" name="id" placeholder="id" readonly>

                            </div>

                            <div class="mb-3">

                                <label for="nombre" class="form-label">NOMBRE</label>

                                <input type="text" class="form-control" id="nombre" name="nombre" placeholder="nombre">

                            </div>

                            <div class="mb-3">

                                <label for="Apellido" class="form-label">APELLIDO</label>

                                <input type="text" class="form-control" id="Apellido" name="Apellido"

                                    placeholder="Apellido">

                            </div>

                        </form>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

                        <button type="button" class="btn btn-primary"></button>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"

        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">

    </script>

    <script>

    /* #################################################### */

    // Declaro mis variables

    let tbody = document.querySelector('tbody'),

        button = document.querySelector('.btn-primary'),

        tittle = document.querySelector('.modal-title');

    let myModal = new bootstrap.Modal(document.getElementById("myModal"), {});

    let EDIT = [];

//

    /* #################################################### */

    /* #################################################### */

    // esto hace lo mismo que esto $(document).ready(function()

    document.addEventListener('DOMContentLoaded', function() {

        pintaTBL();

});

//

    /* #################################################### */

    /* #################################################### */

    // esto hace lo mismo que esto $('#insert').click(function()

    button.addEventListener('click', (e) => {

        e.preventDefault();

        let formData = new FormData(frm);

        let JsonPars = {};

        formData.forEach(function(value, key) {

            JsonPars[key] = value;

});

        FetchAsynAwait('crud.php', {

            'accion': button.innerText,

            'json': JsonPars

        }, 'text').then((ret) => {

            myModal.hide();

            pintaTBL();

})

});

    document.querySelector('.btn-outline-success').addEventListener('click', function(e) {

        e.preventDefault();

        tittle.innerHTML = 'MODAL AGREGAR';

        frm.reset();

        button.innerText = 'Agregar';

        myModal.show();

});

//

    /* #################################################### */

    /* #################################################### */

    // esto hace lo mismo que Function()

    const edit = (este) => {

        tittle.innerHTML = 'MODAL EDITAR';

        button.innerText = 'Editar';

        let ArrEdit = FILTROarrayJS(EDIT, 'id', '==', este);

        id.value = ArrEdit[0].id;

        nombre.value = ArrEdit[0].nombre;

        Apellido.value = ArrEdit[0].Apellido;

        myModal.show();

    const borra = (este) => {

        tittle.innerHTML = 'MODAL BORRAR';

        button.innerText = 'Eliminar';

        let ArrEdit = FILTROarrayJS(EDIT, 'id', '==', este);

        id.value = ArrEdit[0].id;

        nombre.value = ArrEdit[0].nombre;

        Apellido.value = ArrEdit[0].Apellido;

        for (var i = 0, len = frm.elements.length; i < len; ++i) {

            frm.elements[i].readOnly = true;

        myModal.show();

//

    /* #################################################### */

    /* #################################################### */

    //Esto hace lo mismo que $.ajax({

    const FetchAsynAwait = async (pag, dataJson, r = 'json') => {

        const opciones = {

            method: 'POST',

            cache: 'no-cache',

            body: JSON.stringify(dataJson),

            headers: {

                'Content-Type': 'application/json'

};

        try {

            const fetchResp = await fetch(pag, opciones);

            const retorna = await r === 'json' ? fetchResp.json() : fetchResp.text();

            return retorna;

        } catch (e) {

            return e;

//

    /* #################################################### */

    /* #################################################### */

    /* En lo particular yo y creo que todos los desarrolladores

     Solemos usar Arrays para enviar y recibir informacion...

     que porque ???

     Pues de un tiron haces la consulta al servidor y te traes todo al dom del cliente

     luego las llamadas que desees hacer no tendrias que enviar la informacion

     una y otra vez ... consumiendo recursos innecesarios, dado que como lo tienes

     ya todo en un arreglo, solo dejas trabajar al pc que es el cliente y donde se

     ejecuta javascript.

*/

    const pintaTBL = () => {

        if (EDIT.length > 0) EDIT.length = 0;

        tbody.innerHTML = '';

        FetchAsynAwait('crud.php', {

            'tabla': true

        }).then((ret) => {

            EDIT = ret.edit;

            let dev = '';

            for (let i = 0; i < ret.tbody.length; i++) {

                var obj = ret.tbody[i];

                dev += '<tr>'

                for (let elem in obj) {

                    let valor = obj[elem];

                    dev += '<td>' + valor + '</td>';

                dev += '</tr>';

            tbody.innerHTML = dev;

})

    const FILTROarrayJS = (ARRAY_BUSCA, CondcionEncuentra, ope, CondcionBusca) => {

        let ARRAY_CREA = [];

        if (ARRAY_CREA.length > 0) ARRAY_CREA.length = 0;

        let NuevoArray = ARRAY_BUSCA.filter((bucle) => {

            switch (ope) {

                case '==':

                    if (bucle[CondcionEncuentra] == CondcionBusca) ARRAY_CREA.push(bucle);

                    break;

                case '!=':

                    if (bucle[CondcionEncuentra] != CondcionBusca) ARRAY_CREA.push(bucle);

                    break;

                case '>':

                    if (bucle[CondcionEncuentra] > CondcionBusca) ARRAY_CREA.push(bucle);

                    break;

                case '<':

                    if (bucle[CondcionEncuentra] < CondcionBusca) ARRAY_CREA.push(bucle);

                    break;

});

        return ARRAY_CREA;

//

    /* #################################################### */

    </script>

</body>

</html>

Ahora crea un archivo crud.php

<?php

$db = new mysqli('localhost', 'root', '', 'pruebas', 3306);

$json = json_decode(file_get_contents('php://input'), true);

if (!empty($json['tabla'])) {

    $qA = "SELECT * from bendecido ORDER BY id asc";

    $rA = $db->query($qA);

    $tbody = array();

    $edit = array();

    while ($fA = $rA->fetch_array()) {

        array_push($tbody, array(

            $fA[0], $fA[1], $fA[2],

            '<div class="d-flex justify-content-center">

            <span onclick="edit(' . $fA[0] . ');" ><span class="icon"><i class="bi bi-pencil fs-5 text-secondary" role="button"></i></span></span>

            <span onclick="borra(' . $fA[0] . ');"><span class="icon"><i class="bi bi-trash fs-5 text-danger ms-3" role="button"></i></span></span>

            </div>'

));

        array_push($edit, array(

            'id' => $fA[0],

            'nombre' => $fA[1],

            'Apellido' => $fA[2]

));

    $salida = array_merge(

        array('tbody' => $tbody),

        array('edit' => $edit)

);

    echo json_encode($salida, true);

if (!empty($json['accion'])) {

    if ($json['accion'] == 'Editar') {

        $query = "UPDATE bendecido set nombre ='" . $json['json']['nombre'] . "', Apellido ='" . $json['json']['Apellido'] . "'

        where id='" . $json['json']['id'] . "'";

    } else if ($json['accion'] == 'Agregar') {

        $query = "INSERT INTO bendecido(nombre,Apellido) VALUES('" . $json['json']['nombre'] . "','" . $json['json']['Apellido'] . "')";

    } else {

        $query = "DELETE FROM bendecido WHERE id = '" . $json['json']['id'] . "' ";

    $db->query($query);

Espero haberte ayudado
Saludos Jefferson Jimenez Venezuela

Valora esta respuesta

Comentar

CRUD CON MODAL PHP MYSQL BOOTSTRAP AJAX NO ME FUNCIONA

Publicado por Juan (3 intervenciones) el 04/11/2022 23:39:19

Gracias!! de veras funciona al 100%% gracias de veras....

Valora esta respuesta

Comentar

CRUD CON MODAL PHP MYSQL BOOTSTRAP AJAX NO ME FUNCIONA

Publicado por Juan (3 intervenciones) el 05/11/2022 03:59:35

Jefferson gracias de antemano

mil disculpas ahora que implemente el corre y todo aquello pero el codigo es muy complicado

para mi nivel recordando que soy nuevo en esto cuando el profe me pregunte el lunes que hice

no sabre como explicarlo el punto aqui es que si se podia con jquery y en la misma manera de programacion

que adjunte porque es la que el profesor nos dio. no se si lo puedes codificar asi como lo envie y con jquery y

ya estoy molestando mucho perdoname entonces y mil gracias de antemano ya hicistes bastante con responder

solo avisame si puedes saludos amigo Jefferson.

Valora esta respuesta

Comentar

Problema al usar google chart

¿Cómo hacer gráfica con php+postgres?