Crud Asp

5/3/2019 CRUD Ajax PHP MySQL usando BootStrap: Ejemplo Completo » BaulPHP
BaulPHP
 PHP EJEMPLOS  / DESCARGAS /  HTML5 /  CONTÁCTANOS /

INICIAR SESIÓN
Volkswagen POLO DISFRUTA EL VERAN

Viaja tranquilo,
⌃
CON VOLKSWAGEN
viaja con el Nuevo Polo.
Anuncios
CRUD Ajax PHP MySQL usando
BootStrap: Ejemplo Completo
 Compartir  Tweet
4.9 (97.14%) 14
votes
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 hay dentro? [Ocultar]
1 ¿Que es un CRUD en PHP MySQL?

2 ¿Que tecnologías usaran para el sistema CRUD AJAX?
3 CRUD Ajax PHP MySQL usando BootStrap
4 Estructura de nuestro sistema CRUD Ajax
4.1 Crear base de datos MySQL y tabla requerida:
4.2 Estructura del chero index. php
4.3 MOSTRAR LA TABLA CON LOS DATOS MYSQL
4.4 AGREGAR: MODALES POPUP
4.5 EDITAR: MODAL POPUP HTML
4.6 Ahora programamos el jQuery y JavaScript:
5 CONCLUSIÓN
5.1 DESCARGA
¿Que es un CRUD en PHP MySQL?

Atrae Más Clie Baulphp
778 Me gusta
Ads
Publicita C
Anuncio
Anuncio
Aquí Cuando Te Es
Me gusta esta página E
Google Ads
Saber más
Las cookies nos ayudan a entregar nuestros servicios. Al utilizar nuestros servicios, acepta nuestro uso de cookies. Leer
Más Entendido
https://www.baulphp.com/crud-ajax-php-mysql-usando-bootstrap/ 1/10
Un CRUD cumple un papel

 PHP EJEMPLOS 
fundamental en /el manejo
/ DESCARGAS  HTML5
de la información cuando
/  CONTÁCTANOS / Recientes
hablamos de un sistema web. 
INICIAR SESIÓN
Ingresar registros en la base de datos MySQL (INSERTAR). Búsqueda y Filtro de Productos

con Ajax, PHP y MySQL
Visualizar los registros de la base de datos y mostrar en una lista (VER).
Actualizar el registro mediante ventana Modal Popup (ACTUALIZAR).
Restringir acceso PHP por Días
Eliminar el registro con una ventana de con rmación (ELIMINAR).
y Horas: Ejemplos completos
Lo más visto

Descargar CRUD PHP MySQL usando Ajax y jQuery
PHP CRUD usando
OOP con MySQLi
¿Que tecnologías usaran para el sistema en …
CRUD AJAX?
Tecnologia HTML5
Lenguaje PHP
Base de datos MySQL
Lenguaje Jquery
Libreria Bootstrap
Estilos CSS3

Json JavaScript
Eliminar registros
con BootStrap
CRUD Ajax PHP MySQL usando BootStrap Modal usando
Recordemos que antes de empezar, tenemos que tener librerías externas PHP …
necesarios para nuestro CRUD. Por lo tanto, debemos de descargar los archivos
necesarios:
1. Descargar librería jQuery JS de la siguiente dirección –

http://jQuery.com/download/
2. Descargar bootstrap para el manejo de la interfaz grá ca de la siguiente
dirección – http://getbootstrap.com/Getting-Started/#download

Estructura de nuestro sistema CRUD Ajax Restringir acceso
A continuacion detallaremos una serie de secuencias que debemos implementar PHP por Días y
para que uestro sistema funcione correctamente. Horas: …
Instantly Check Your Writing

Eliminate grammar errors instantly & enhance your writing. Try now for free! Grammarly
Crear base de datos MySQL y tabla
Más requerida:
Entendido
Nuestra base de datos tendra por nombre: php_observacion . Sin embargo, el

nombre de la base de datos sera matriculadosobs . 
INICIAR SESIÓN
CREATE TABLE IF NOT EXISTS `matriculaobs` (

ìdobs` int
int(11) NOT NULL
NULL,
ìdalumno` int
int(11) DEFAULT NULL
NULL,
`codalumno` varchar(60) CHARACTER SET latin1 DEFAULT NULL
NULL,
`codmatri` varchar(60) CHARACTER SET latin1 DEFAULT NULL
NULL,
`fecha` date DEFAULT NULL
NULL,
òbs` text
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8 COMMENT='Tabl
a matricula observacion';

ALTER TABLE `matriculaobs`
ADD PRIMARY KEY (ìdobs`);

ALTER TABLE `matriculaobs`
MODIFY ìdobs` int
int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=1;
Estructura del chero 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>


<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/boo
tstrap.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v
5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NS
cPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>



<div class
class="container">
<div class
class="row">
<div class
class="col-md-12">
<div class
class="pull-right">
<button class
class="btn btn-success" data-toggle="modal" data-tar
get="#add_new_record_modal">Agregar Observación</button>
</div>
</div>
</div>
<div class
class="row">
<div class
class="col-md-12">
<div id="records_content"></div>
</div>
</div>
</div>



<script type="text/javascript" src="js/jquery-1.11.3.min.js"></scrip
t>

<script type="text/javascript" src="bootstrap-3.3.5/js/bootstrap.mi
n.js"></script>

<script type="text/javascript" src="js/script.js"></script>

</body>
</html>
MOSTRAR LA TABLA CON LOS
MásDATOS MYSQL
Entendido
A continuacion, tenemos/ que

 PHP EJEMPLOS 
crear el boton/ añadir
DESCARGAS
nuevo registro
 HTML5
para que nos
/  CONTÁCTANOS /
muestre la ventana emergente: 
INICIAR SESIÓN
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.



<div class
class="modal fade" id="add_new_record_modal" tabindex="-1" role
="dialog" aria-labelledby="myModalLabel">
<div class
class="modal-dialog" role="document">
<div class
class="modal-content">
<div class
class="modal-header">
<button type="button" class
class="close" data-dismiss="modal" ari
a-label="Close"><span aria-hidden="true">×</span></button>
<h4 class
class="modal-title" id="myModalLabel">Agregar comentario
</h4>
</div>
<div class
class="modal-body">
<div class
class="form-group">
<label for
for="id_alumno">Id Alumno</label>
<input type="text" id="idalumno" value="" class class="form-co
ntrol"/>
</div>
<div class
class="form-group">
<label for
for="Cod ALumno">Cod. Alumno</label>
<input type="text" id="codalumno" value="" class class="form-c
ontrol"/>
</div>
<div class
class="form-group">
<label for
for="CodMatri">Cod. Matri</label>
<input type="text" id="codmatri" classclass="form-control" valu
e=""/>
</div>
<div class
class="form-group">
<label for
for="Observacion">Observacion</label>
<textarea style="text-transform:uppercase" id="obs" class class=
"form-control"></textarea>

</div>
</div>
<div class
class="modal-footer">
class="btn btn-default" data-dismiss=
"modal">Cancelar</button>
class="btn btn-primary" onclick="addRe
cord()">Agregar</button>
</div>
</div>
Las </div>
cookies nos ayudan a entregar nuestros servicios. Al utilizar nuestros servicios, acepta nuestro uso de cookies. Leer
</div> Más Entendido


INICIAR SESIÓN
EDITAR: MODAL POPUP HTML
Codigo HTML para mostrar la ventana modal con el n de actualizar registros de
la base de datos.


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

El siguiente paso es crear la función Agregar nuevo registro registros.
$query = "INSERT INTO matriculaobs(idalumno, codalumno, codmatri, fe

cha, obs) VALUES('$idalumno', '$codalumno', '$codmatri', now(), '$ob
s')";
if
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>';
Más Entendido
$query = "SELECT * FROM matriculaobs";
PHP EJEMPLOS 
 / DESCARGAS /  HTML5 /  CONTÁCTANOS /

if INICIAR
(!$result = mysqli_query($con, $query)) {
SESIÓN
exit(mysqli_error($con));
}

// condicional
if(mysqli_num_rows($result) > 0)
if
{
$number = 1;
while($row = mysqli_fetch_assoc($result))
while
{
$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-dang
er"><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
var idalumno = $("#idalumno").val();
var
var codalumno = $("#codalumno").val();
var
var codmatri = $("#codmatri").val();
var
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() {
Las $.get("ajax/readRecord.php",
cookies nos ayudan a entregar nuestros
{}, servicios.
functionAl(data,
utilizar status)
nuestros{servicios, acepta nuestro uso de cookies. Leer
$("#records_content").html(data);
Más Entendido
});
}
PHP EJEMPLOS 
 / DESCARGAS /  HTML5 /  CONTÁCTANOS /

INICIAR SESIÓN
function DeleteUser(id) {
var
var conf = confirm("¿Está seguro, realmente desea eliminar el re
gistro?");
if
if (conf == true
true) {
$.post("ajax/deleteUser.php", {
id: id
},
function
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
// PARSE json data
var
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
var idalumno = $("#update_idalumno").val();
var
var codalumno = $("#update_codalumno").val();
var
var obs = $("#update_obs").val();

// get hidden field value
var
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
// hide modal popup
$("#update_user_modal").modal("hide");
// reload Users by using readRecords();
readRecords();
}
);
}

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


INICIAR SESIÓN
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.
¡ Este contenido está bloqueado!

Por favor, nos apoyan, utilice uno de los botones de abajo para
desbloquear el contenido.
Me Gusta
Me gusta 778 tweet
Twittear error
subscribe
4.9 (97.14%) 14
votes
 ENTRADA PREVIA SIGUIENTE ENTRADA 

Más Entendido

Related Articles
INICIAR SESIÓN

Eliminar registros de 3 formas para mostrar

MySQL con la ventana y ocultar contraseñas
Modal input password
Subir y crear imagen

Contador de visitas miniatura con PHP
Web con PHP y MYSQL
Deja una respuesta
Texto de comentario*
Nombres*
Email*
Website
Guardar mi nombre, correo electrónico y sitio web en este navegador la

próxima vez que comente.
ENVIAR SU COMENTARIO
Una respuesta
Más Entendido
fran
 PHP EJEMPLOS  franes
/ DESCARGAS /  HTML5 /  CONTÁCTANOS

/

INICIAR SESIÓN
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
24 octubre, 2018
BaulPHP
Blog de programación, desarrollo
web, tutoriales, PHP, MySQL, jQuery,    
Ajax, WordPress, Drupal, CodeIgniter
y Demostraciones
Copyright © 2019 BaulPHP Creado por BaulPHP
Más Entendido

Crud Asp

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Crud Asp

Încărcat de

Drepturi de autor:

Formate disponibile

5/3/2019 CRUD Ajax PHP MySQL usando BootStrap: Ejemplo Completo » BaulPHP

Volkswagen POLO DISFRUTA EL VERAN

CRUD Ajax PHP MySQL usando BootStrap. En este artículo realizaremos un

¿Que hay dentro? [Ocultar]

1 ¿Que es un CRUD en PHP MySQL?

¿Que es un CRUD en PHP MySQL?

Un CRUD cumple un papel

Ingresar registros en la base de datos MySQL (INSERTAR). Búsqueda y Filtro de Productos

1. Descargar librería jQuery JS de la siguiente dirección –

Instantly Check Your Writing

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

CREATE TABLE IF NOT EXISTS `matriculaobs` (

Estructura del chero index. php

A continuacion, tenemos/ que

Panel CRUD PHP MySQL usando Ajax y jQuery

AGREGAR: MODALES POPUP

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

$query = "INSERT INTO matriculaobs(idalumno, codalumno, codmatri, fe

Codigo para leer registros mediante modal Ajax con PHP

Ahora programamos el jQuery y JavaScript:

 PHP EJEMPLOS  / DESCARGAS /  HTML5 /  CONTÁCTANOS /

CRUD Ajax PHP MySQL usando BootStrap Ejemplo Completo

¡ Este contenido está bloqueado!

 ENTRADA PREVIA SIGUIENTE ENTRADA 

 PHP EJEMPLOS  / DESCARGAS /  HTML5 /  CONTÁCTANOS /

Eliminar registros de 3 formas para mostrar

Subir y crear imagen

Deja una respuesta

Guardar mi nombre, correo electrónico y sitio web en este navegador la

Copyright © 2019 BaulPHP Creado por BaulPHP

S-ar putea să vă placă și