Portada » JQuery biblioteca de JavaScript » CRUD Ajax PHP MySQL usando BootStrap: Ejemplo Completo

CRUD Ajax PHP MySQL usando BootStrap: Ejemplo Completo

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.

¿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.

Descargar CRUD PHP MySQL usando Ajax y jQuery
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:

  1. Descargar librería jQuery JS de la siguiente direcciónhttp://jQuery.com/download/
  2. Descargar bootstrap para el manejo de la interfaz gráfica de la siguiente direcciónhttp://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
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
});
CRUD Ajax PHP MySQL usando BootStrap Ejemplo Completo
CRUD Ajax PHP MySQL usando BootStrap Ejemplo Completo

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

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 2.7 / 5. Recuento de votos: 3

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad