JQuery biblioteca de JavaScript Lenguaje PHP

CRUD Ajax PHP MySQL usando BootStrap: Ejemplo Completo

Nestor Tapia 22 octubre, 2018Last Updated: 1 mayo, 2021

6 18.590 5 minutos de lectura

CRUD Ajax PHP MySQL usando BootStrap. En este artículo realizaremos un ejemplo para manejar la información de una tabla en una base de datos. Si bien, existen varios modelos para administrar la información como ser los CRUD, lo que haremos en este artículo es realizar un CRUD usando librerías externas para optimizar el manejo de la información.

Tabla de contenidos

¿Que es un CRUD en PHP MySQL?

Un CRUD cumple un papel fundamental en el manejo de la información cuando hablamos de un sistema web.

Ingresar registros en la base de datos MySQL (INSERTAR).
Visualizar los registros de la base de datos y mostrar en una lista (VER).
Actualizar el registro mediante ventana Modal Popup (ACTUALIZAR).
Eliminar el registro con una ventana de confirmación (ELIMINAR).

Descargar CRUD PHP MySQL usando Ajax y jQuery

¿Que tecnologías usaran para el sistema CRUD AJAX?

Tecnologia HTML5
Lenguaje PHP
Base de datos MySQL
Lenguaje Jquery
Libreria Bootstrap
Estilos CSS3
Json JavaScript

CRUD Ajax PHP MySQL usando BootStrap

Recordemos que antes de empezar, tenemos que tener librerías externas necesarios para nuestro CRUD. Por lo tanto, debemos de descargar los archivos necesarios:

Descargar librería jQuery JS de la siguiente dirección – http://jQuery.com/download/
Descargar bootstrap para el manejo de la interfaz gráfica de la siguiente dirección – http://getbootstrap.com/Getting-Started/#download

Estructura de nuestro sistema CRUD Ajax

A continuacion detallaremos una serie de secuencias que debemos implementar para que uestro sistema funcione correctamente.

Crear base de datos MySQL y tabla requerida:

Nuestra base de datos tendra por nombre: php_observacion. Sin embargo, el nombre de la base de datos sera matriculadosobs.

CREATE TABLE IF NOT EXISTS `matriculaobs` (
`idobs` int(11) NOT NULL,
  `idalumno` int(11) DEFAULT NULL,
  `codalumno` varchar(60) CHARACTER SET latin1 DEFAULT NULL,
  `codmatri` varchar(60) CHARACTER SET latin1 DEFAULT NULL,
  `fecha` date DEFAULT NULL,
  `obs` text
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8 COMMENT='Tabla matricula observacion';


ALTER TABLE `matriculaobs`
 ADD PRIMARY KEY (`idobs`);

ALTER TABLE `matriculaobs`
MODIFY `idobs` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=1;

Estructura del fichero index. php

Crear archivo index. php e incluir archivos básicos para jQuery y bootstrap como se muestra a continuación en el codigo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CRUD Ajax PHp y MySQL</title>

<!-- Bootstrap CSS File  -->
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>

<!-- Content Section --> 
<!-- crud jquery-->
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="pull-right">
        <button class="btn btn-success" data-toggle="modal" data-target="#add_new_record_modal">Agregar Observación</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div id="records_content"></div>
    </div>
  </div>
</div>
<!-- /Content Section --> 


<!-- Jquery JS file --> 
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 
<!-- Bootstrap JS file --> 
<script type="text/javascript" src="bootstrap-3.3.5/js/bootstrap.min.js"></script> 
<!-- Custom JS file --> 
<script type="text/javascript" src="js/script.js"></script> 
<!-- Fin crud jquery-->
</body>
</html>

MOSTRAR LA TABLA CON LOS DATOS MYSQL

A continuacion, tenemos que crear el boton añadir nuevo registro para que nos muestre la ventana emergente:

Panel CRUD PHP MySQL usando Ajax y jQuery

Ahora tenemos que añadir modal popup, estamos utilizando bootstrap popups modal aquí, ir a la cabeza y utilizar el código siguiente para incluir popup en la página index. php.

AGREGAR: MODALES POPUP

Ventana modal para agregar registros a la base de datos.

<!-- Bootstrap Modals --> 
<!-- Modal - Add New Record/User -->
<div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Agregar comentario</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="id_alumno">Id Alumno</label>
          <input  type="text" id="idalumno" value=""  class="form-control"/>
        </div>
        <div class="form-group">
          <label for="Cod ALumno">Cod. Alumno</label>
          <input type="text" id="codalumno" value=""   class="form-control"/>
        </div>
        <div class="form-group">
          <label for="CodMatri">Cod. Matri</label>
          <input type="text" id="codmatri" class="form-control" value=""/>
        </div>
        <div class="form-group">
          <label for="Observacion">Observacion</label>
          <textarea style="text-transform:uppercase" id="obs" class="form-control"></textarea>
          <!--<input type="text" id="obs" class="form-control"/>--> 
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" onclick="addRecord()">Agregar</button>
      </div>
    </div>
  </div>
</div>
<!-- // Modal -->

EDITAR: MODAL POPUP HTML

Codigo HTML para mostrar la ventana modal con el fin de actualizar registros de la base de datos.

<!-- Modal - Update User details -->
<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Actualizar</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="idalumno">Cod. Alumno</label>
          <input type="text" id="update_idalumno" value="" class="form-control"/>
        </div>
        <div class="form-group">
          <label for="codalumno">Cod. Alumno</label>
          <input type="text" id="update_codalumno" placeholder="Last Name" class="form-control"/>
        </div>
        <div class="form-group">
          <label for="obs">Observaciones</label>
          <textarea style="text-transform:uppercase" id="update_obs" class="form-control"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Guardar Cambios</button>
        <input type="hidden" id="hidden_user_id">
      </div>
    </div>
  </div>
</div>
<!-- // Modal -->

El siguiente paso es crear la función Agregar nuevo registro registros.

$query = "INSERT INTO matriculaobs(idalumno, codalumno, codmatri, fecha, obs) VALUES('$idalumno', '$codalumno', '$codmatri', now(), '$obs')";
  if (!$result = mysqli_query($con, $query)) {
    exit(mysqli_error($con));
 }

Codigo para leer registros mediante modal Ajax con PHP

<?php
// incluimos el fichero de conexion
include("db_connection.php");

// difinir el encabezado de la tabla
$data = '<table class="table table-bordered table-striped">
		<tr>
			<th>No.</th>
			<th>Codigo</th>
			<th>Fecha</th>
			<th style="width:650px">Observacion</th>
			<th></th>
			<th></th>
		</tr>';

$query = "SELECT * FROM matriculaobs";

if (!$result = mysqli_query($con, $query)) {
	exit(mysqli_error($con));
}

// condicional
if(mysqli_num_rows($result) > 0)
{
	$number = 1;
while($row = mysqli_fetch_assoc($result))
{
$data .= '<tr>
	<td>'.$number.'</td>
	<td>'.$row['codalumno'].'</td>
	<td>'.$row['fecha'].'</td>
	<td>'.$row['obs'].'</td>
	<td>
		<button onclick="GetUserDetails('.$row['idobs'].')" class="btn btn-warning"><i class="fas fa-edit"></i></button>
	</td>
	<td>
		<button onclick="DeleteUser('.$row['idobs'].')" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
	</td>
</tr>';
$number++;
}
}
else
{
	// No hay registros
	$data .= '<tr><td colspan="6">No hay registros!</td></tr>';
}
$data .= '</table>';
echo $data;
?>

Ahora programamos el jQuery y JavaScript:

Vamos a crear nuestro archivo personalizado JS llamado script. js archivo bajo la carpeta JS y añadir el siguiente código:

// agregar registros
function addRecord() {
    // get values
    var idalumno = $("#idalumno").val();
    var codalumno = $("#codalumno").val();
    var codmatri = $("#codmatri").val();
    var obs = $("#obs").val();

    // agregar registros
    $.post("ajax/addRecord.php", {
        idalumno: idalumno,
        codalumno: codalumno,
        codmatri: codmatri,
		obs: obs
    }, function (data, status) {
        // close the popup
        $("#add_new_record_modal").modal("hide");

        // leer registros
        readRecords();

        // borrar campos
        $("#idalumno").val("");
        $("#codalumno").val("");
        $("#codmatri").val("");
        $("#obs").val("");
    });
}

// Leer record
function readRecords() {
    $.get("ajax/readRecord.php", {}, function (data, status) {
        $("#records_content").html(data);
    });
}


function DeleteUser(id) {
    var conf = confirm("¿Está seguro, realmente desea eliminar el registro?");
    if (conf == true) {
        $.post("ajax/deleteUser.php", {
                id: id
            },
            function (data, status) {
                // reload Users by using readRecords();
                readRecords();
            }
        );
    }
}

function GetUserDetails(id) {
    // Add User ID to the hidden field for furture usage
    $("#hidden_user_id").val(id);
    $.post("ajax/readUserDetails.php", {
            id: id
        },
        function (data, status) {
            // PARSE json data
            var user = JSON.parse(data);
            // Assing existing values to the modal popup fields
            $("#update_idalumno").val(user.idalumno);
            $("#update_codalumno").val(user.codalumno);
            $("#update_obs").val(user.obs);
        }
    );
    // Abrir modal popup
    $("#update_user_modal").modal("show");
}

function UpdateUserDetails() {
    // get values
    var idalumno = $("#update_idalumno").val();
    var codalumno = $("#update_codalumno").val();
    var obs = $("#update_obs").val();

    // get hidden field value
    var id = $("#hidden_user_id").val();

    // Update the details by requesting to the server using ajax
    $.post("ajax/updateUserDetails.php", {
            id: id,
            idalumno: idalumno,
            codalumno: codalumno,
            obs: obs
        },
        function (data, status) {
            // hide modal popup
            $("#update_user_modal").modal("hide");
            // reload Users by using readRecords();
            readRecords();
        }
    );
}

$(document).ready(function () {
    // READ recods on page load
    readRecords(); // calling function
});

CONCLUSIÓN

Una de las ventajas del uso de nuevas tecnologías como ser las librerías externas de JavaScript, es el dinamismo con el cual nos permite manejar la información extraída de la base de datos.

Otra de las ventajas es el tiempo, recordemos que usar Ajax, jquery nos permite ejecutar acciones sin que nuestro navegador se recarga. Por lo tanto, ganamos tiempo y el uso de recursos del servidor.

DESCARGA

Para su correcta implementación les dejare un archivo comprimido para que puedan descargarlo.

Descargar Código Fuente

Etiquetas

Nestor Tapia 22 octubre, 2018Last Updated: 1 mayo, 2021

6 18.590 5 minutos de lectura

6 comentarios

carlo dice:

29 junio, 2022 a las 7:51 pm

Muy buen aporte, todo me a funcionado excepto la parte de eliminar los registros.

Responder
nyko dice:

2 enero, 2021 a las 7:02 am

Excelente ejemplo. Muchas gracias.
Es posible agregarle paginación, búsqueda y exportación?

Saludos desde Buenos Aires, Argentina

Responder
1. nestor dice:
  
  1 agosto, 2021 a las 2:34 am
  
  la paginacion la puedes hacer con el plugin datatable
  
  Responder
NYKO dice:

2 enero, 2021 a las 6:46 am

Excelente ejemplo y desarrollo…
Una consulta existe modo de agregarle páginación, búsqueda y exportación a este ejemplo?
Gracias

Responder
Franz dice:

19 julio, 2020 a las 10:23 am

Como se descarga.
Sale Este contenido está bloqueado!
Por favor, nos apoyan, utilice uno de los botones de abajo para desbloquear el contenido.
y el botón de facebook no hace nada

Responder
fran franes dice:

24 octubre, 2018 a las 10:18 am

muy interesante.
Una duda ¿para descargar el ejemplo es obligatorio tener cuenta en facebook? yo no la tengo y no veo otro método de descarga

Responder

CRUD Ajax PHP MySQL usando BootStrap: Ejemplo Completo

¿Que es un CRUD en PHP MySQL?

¿Que tecnologías usaran para el sistema CRUD AJAX?

CRUD Ajax PHP MySQL usando BootStrap

Estructura de nuestro sistema CRUD Ajax

Crear base de datos MySQL y tabla requerida:

Estructura del fichero index. php

MOSTRAR LA TABLA CON LOS DATOS MYSQL

AGREGAR: MODALES POPUP

EDITAR: MODAL POPUP HTML

Ahora programamos el jQuery y JavaScript:

CONCLUSIÓN

DESCARGA

Nestor Tapia

6 comentarios

Deja una respuesta Cancelar la respuesta

Formatear número con cero a la izquierda en PHP

Eliminar Espacios en Blanco en Vscode [Tips]

¿Cómo agregar imágenes en etiqueta SELECT?

Limpiar caracteres especiales en PHP

Modificar cadenas con SUBSTR() de PHP

Sitio web dinámico simple con PHP y MySQL

Evitar contenido duplicado usando PHP y MySQL

Redireccionar sitio web con PHP, HTML (Explicado)

Mostrar Captcha 3 intentos fallidos de login PHP

Subir y Descargar archivos PHP: Ejemplo Completo

Imagen Responsive Pantalla Completa con CSS: Ejemplos

Cómo subir archivos con PHP al servidor

¿Que es un CRUD en PHP MySQL?

¿Que tecnologías usaran para el sistema CRUD AJAX?

CRUD Ajax PHP MySQL usando BootStrap

Estructura de nuestro sistema CRUD Ajax

Crear base de datos MySQL y tabla requerida:

Estructura del fichero index. php

MOSTRAR LA TABLA CON LOS DATOS MYSQL

AGREGAR: MODALES POPUP

EDITAR: MODAL POPUP HTML

Ahora programamos el jQuery y JavaScript:

CONCLUSIÓN

DESCARGA

Publicaciones relacionadas:

Nestor Tapia

Cómo insertar Emoji usando PHP en comentarios

Dividir y exportar en varios archivos en Excel con PHP

6 comentarios

Deja una respuesta Cancelar la respuesta

Formatear número con cero a la izquierda en PHP

Eliminar Espacios en Blanco en Vscode [Tips]

¿Cómo agregar imágenes en etiqueta SELECT?

Limpiar caracteres especiales en PHP

Modificar cadenas con SUBSTR() de PHP

Sitio web dinámico simple con PHP y MySQL

Evitar contenido duplicado usando PHP y MySQL

Redireccionar sitio web con PHP, HTML (Explicado)

Mostrar Captcha 3 intentos fallidos de login PHP

Subir y Descargar archivos PHP: Ejemplo Completo

Imagen Responsive Pantalla Completa con CSS: Ejemplos

Cómo subir archivos con PHP al servidor