CRUD de datos usando dataTables, bootstrap, PHP y MySQL

En esta ocasión quiero compartir un fragmento de código que he desarrollado para mostrar datos de clientes usando datatables. Básicamente la carga de datos se hace de manera asíncrona, esto es útil si queremos cargar datos de una tabla que contenga miles de registros.

Para todos aquellos usuarios que tenga una aplicación web que requiera la carga de muchos registros, este ejemplo podría servirles, porque la carga de datos es rápida, esto evita a que el usuario tenga que esperar mucho tiempo para que se le muestren los datos

Cabe mencionar que hace algunos meses escribí un tutorial para cargar datos usando bootstrap, PHP, MySQL y jQuery; todo ello sin usar ningún plugins, si deseas echarle un vistazo sigue el siguiente enlace:

Cargar información dinámica en ventana modal Bootstrap con PHP, MySQL y jQuery

Instalación del CRUD de datos usando dataTables, Bootstrap, PHP y MySQL

1- Creación de la base de datos: Empezaremos creando la base de datos, para ello debemos abrir nuestra herramienta de gestión de base de datos y crear la base de datos. Para este ejemplo, he usado phpMyAdmin

2- Ahora procedemos a importar los datos: Los datos de nuestra aplicación se encuentran dentro de la carpeta “DB”, el archivo a importar se llama “datatables.sql”

3- Editar el archivo de conexión a la base de datos: Una vez hayamos creado e importado los datos, procederemos a editar el archivo de conexión a la base de datos llamado “conn.php”, debemos colocar los datos de conexión según nuestra configuración

4- Creación de archivo index.php: El archivo index.php contiene la estructura html, para mostrar los datos del cliente cargados desde nuestra base de datos:

<?php include "conn.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <head>
		<?php include("head.php");?>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                        <i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a>
                   
                   
                </div>
            </div>
            <!-- /navbar-inner -->
        </div><br />

            <div class="container">
                <div class="row">
                    <div class="span12">
                        <div class="content">
                            <?php
             if(isset($_GET['action']) == 'delete'){
				$id_delete = intval($_GET['id']);
				$query = mysqli_query($conn, "SELECT * FROM clientes WHERE id='$id_delete'");
				if(mysqli_num_rows($query) == 0){
					echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> No se encontraron datos.</div>';
				}else{
					$delete = mysqli_query($conn, "DELETE FROM clientes WHERE id='$id_delete'");
					if($delete){
						echo '<div class="alert alert-primary alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>  Bien hecho, los datos han sido eliminados correctamente.</div>';
					}else{
						echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Error, no se pudo eliminar los datos.</div>';
					}
				}
			}
			?>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                        <h3 class="panel-title"><i class="icon-user"></i> DataTables procesando datos del lado del servidor</h3> 
						 
                        </div>
						
                        <div class="panel-body">
							<div class="pull-right">
								<a href="registro.php" class="btn btn-sm btn-primary">Nuevo cliente</a>
							</div><br>
							<hr>
                                    <table id="lookup" class="table table-bordered table-hover">  
	                                   <thead bgcolor="#eeeeee" align="center">
                                        <tr>
	  
                                        <th>ID</th>
	                                    <th>Nombres </th>
                                        <th>Teléfono </th>
                                        <th>Email</th>
                                        <th>Dirección </th>
	                                    <th>Registrado</th>
	                                    <th class="text-center"> Acciones </th> 
	  
                                       </tr>
                                      </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                            
                                </div>
                            </div>
                            
                        </div>
                        <!--/.content-->
                    </div>
                    <!--/.span9-->
                </div>
            </div>
            <!--/.container-->
        
        <!--/.wrapper--><br />
        <div class="footer span-12">
            <div class="container">
              <center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> &copy; <?php echo date("Y")?> DataTables Bootstrap </b></center>
            </div>
        </div>
        <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        
        <script src="datatables/jquery.dataTables.js"></script>
        <script src="datatables/dataTables.bootstrap.js"></script>
        <script>
        $(document).ready(function() {
				var dataTable = $('#lookup').DataTable( {
					
				 "language":	{
					"sProcessing":     "Procesando...",
					"sLengthMenu":     "Mostrar _MENU_ registros",
					"sZeroRecords":    "No se encontraron resultados",
					"sEmptyTable":     "Ningún dato disponible en esta tabla",
					"sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
					"sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
					"sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
					"sInfoPostFix":    "",
					"sSearch":         "Buscar:",
					"sUrl":            "",
					"sInfoThousands":  ",",
					"sLoadingRecords": "Cargando...",
					"oPaginate": {
						"sFirst":    "Primero",
						"sLast":     "Último",
						"sNext":     "Siguiente",
						"sPrevious": "Anterior"
					},
					"oAria": {
						"sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
						"sSortDescending": ": Activar para ordenar la columna de manera descendente"
					}
				},

					"processing": true,
					"serverSide": true,
					"ajax":{
						url :"ajax-grid-data.php", // json datasource
						type: "post",  // method  , by default get
						error: function(){  // error handling
							$(".lookup-error").html("");
							$("#lookup").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
							$("#lookup_processing").css("display","none");
							
						}
					}
				} );
			} );
        </script>
      
    </body>

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

<?php include "conn.php"; ?>

<!DOCTYPE html>

<head>

<?php include("head.php");?>

</head>

<body>

<i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a>

</div>

</div><br />

<?php

if(isset($_GET['action']) == 'delete'){

$id_delete = intval($_GET['id']);

$query = mysqli_query($conn, "SELECT * FROM clientes WHERE id='$id_delete'");

if(mysqli_num_rows($query) == 0){

echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> No se encontraron datos.</div>';

}else{

$delete = mysqli_query($conn, "DELETE FROM clientes WHERE id='$id_delete'");

if($delete){

echo '<div class="alert alert-primary alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Bien hecho, los datos han sido eliminados correctamente.</div>';

}else{

echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Error, no se pudo eliminar los datos.</div>';

}

<h3 class="panel-title"><i class="icon-user"></i> DataTables procesando datos del lado del servidor</h3>

</div>

<a href="registro.php" class="btn btn-sm btn-primary">Nuevo cliente</a>

</div><br>

<hr>

<tr>

<th>Nombres </th>

<th>Teléfono </th>

<th>Email</th>

<th>Dirección </th>

<th>Registrado</th>

<th class="text-center"> Acciones </th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</div>

</div>

<br />

<center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> © <?php echo date("Y")?> DataTables Bootstrap </b></center>

</div>

$(document).ready(function() {

var dataTable = $('#lookup').DataTable( {

"language": {

"sProcessing": "Procesando...",

"sLengthMenu": "Mostrar _MENU_ registros",

"sZeroRecords": "No se encontraron resultados",

"sEmptyTable": "Ningún dato disponible en esta tabla",

"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",

"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",

"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",

"sInfoPostFix": "",

"sSearch": "Buscar:",

"sUrl": "",

"sInfoThousands": ",",

"sLoadingRecords": "Cargando...",

"oPaginate": {

"sFirst": "Primero",

"sLast": "Último",

"sNext": "Siguiente",

"sPrevious": "Anterior"

"oAria": {

"sSortAscending": ": Activar para ordenar la columna de manera ascendente",

"sSortDescending": ": Activar para ordenar la columna de manera descendente"

}

"processing": true,

"serverSide": true,

"ajax":{

url :"ajax-grid-data.php", // json datasource

type: "post", // method , by default get

error: function(){ // error handling

$(".lookup-error").html("");

$("#lookup").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');

$("#lookup_processing").css("display","none");

}

} );

</script>

</body>

Obtendremos una vista similar a la siguiente:

5- Creación del archivo ajax-grid-data: Este archivo se encargara de procesar las peticiones via Ajax, las cuales son enviadas desde el archivo index.php, se conectará a la base de datos y enviará a la vista los resultados de la consulta sql solicitados desde el index.php.

<?php

 include "conn.php";

// storing  request (ie, get/post) global array to a variable  
$requestData= $_REQUEST;


$columns = array( 
// datatable column index  => database column name
	0 => 'id',
    1 => 'nombres', 
	2 => 'telefono',
	3 => 'email',
    4 => 'direccion',
    5 => 'registrado'  
);


$sql = "SELECT id, nombres, telefono, email, direccion, registrado ";
$sql.=" FROM clientes";
$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get InventoryItems");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData;  // when there is no search parameter then total number rows = total number filtered rows.


if( !empty($requestData['search']['value']) ) {
	// if there is a search parameter
	$sql = "SELECT id, nombres, telefono, email, direccion, registrado ";
	$sql.=" FROM clientes";
	$sql.=" WHERE nombres LIKE '".$requestData['search']['value']."%' ";    // $requestData['search']['value'] contains search parameter
	$sql.=" OR telefono LIKE '".$requestData['search']['value']."%' ";
	$sql.=" OR email LIKE '".$requestData['search']['value']."%' ";
    $sql.=" OR direccion LIKE '".$requestData['search']['value']."%' ";
    $sql.=" OR registrado LIKE '".$requestData['search']['value']."%' ";
	$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO");
	$totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result without limit in the query 

	$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]."   ".$requestData['order'][0]['dir']."   LIMIT ".$requestData['start']." ,".$requestData['length']."   "; // $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc , $requestData['start'] contains start row number ,$requestData['length'] contains limit length.
	$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO"); // again run query with limit
	
} else {	

	$sql = "SELECT id, nombres, telefono, email, direccion, registrado ";
	$sql.=" FROM clientes";
	$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]."   ".$requestData['order'][0]['dir']."   LIMIT ".$requestData['start']." ,".$requestData['length']."   ";
	$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO");
	
}

$data = array();
while( $row=mysqli_fetch_array($query) ) {  // preparing an array
	$nestedData=array(); 

	$nestedData[] = $row["id"];
    $nestedData[] = $row["nombres"];
	$nestedData[] = $row["telefono"];
	$nestedData[] = $row["email"];
    $nestedData[] = $row["direccion"];
    $nestedData[] = date("d/m/Y", strtotime($row["registrado"]));
    $nestedData[] = '<td><center>
                     <a href="editar.php?id='.$row['id'].'"  data-toggle="tooltip" title="Editar datos" class="btn btn-sm btn-info"> <i class="menu-icon icon-pencil"></i> </a>
                     <a href="index.php?action=delete&id='.$row['id'].'"  data-toggle="tooltip" title="Eliminar" class="btn btn-sm btn-danger"> <i class="menu-icon icon-trash"></i> </a>
				     </center></td>';		
	
	$data[] = $nestedData;
    
}



$json_data = array(
			"draw"            => intval( $requestData['draw'] ),   // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. 
			"recordsTotal"    => intval( $totalData ),  // total number of records
			"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
			"data"            => $data   // total data array
			);

echo json_encode($json_data);  // send data as json format

?>

<?php

include "conn.php";

// storing request (ie, get/post) global array to a variable

$requestData= $_REQUEST;

$columns = array(

// datatable column index => database column name

0 => 'id',

1 => 'nombres',

2 => 'telefono',

3 => 'email',

4 => 'direccion',

5 => 'registrado'

);

$sql = "SELECT id, nombres, telefono, email, direccion, registrado ";

$sql.=" FROM clientes";

$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get InventoryItems");

$totalData = mysqli_num_rows($query);

$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows.

if( !empty($requestData['search']['value']) ) {

// if there is a search parameter

$sql = "SELECT id, nombres, telefono, email, direccion, registrado ";

$sql.=" FROM clientes";

$sql.=" WHERE nombres LIKE '".$requestData['search']['value']."%' "; // $requestData['search']['value'] contains search parameter

$sql.=" OR telefono LIKE '".$requestData['search']['value']."%' ";

$sql.=" OR email LIKE '".$requestData['search']['value']."%' ";

$sql.=" OR direccion LIKE '".$requestData['search']['value']."%' ";

$sql.=" OR registrado LIKE '".$requestData['search']['value']."%' ";

$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO");

$totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result without limit in the query

$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; // $requestData['order'][0]['column'] contains colmun index, $requestData['order'][0]['dir'] contains order such as asc/desc , $requestData['start'] contains start row number ,$requestData['length'] contains limit length.

$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO"); // again run query with limit

} else {

$sql = "SELECT id, nombres, telefono, email, direccion, registrado ";

$sql.=" FROM clientes";

$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." ";

$query=mysqli_query($conn, $sql) or die("ajax-grid-data.php: get PO");

}

$data = array();

while( $row=mysqli_fetch_array($query) ) { // preparing an array

$nestedData=array();

$nestedData[] = $row["id"];

$nestedData[] = $row["nombres"];

$nestedData[] = $row["telefono"];

$nestedData[] = $row["email"];

$nestedData[] = $row["direccion"];

$nestedData[] = date("d/m/Y", strtotime($row["registrado"]));

$nestedData[] = '<td><center>

</center></td>';

$data[] = $nestedData;

}

$json_data = array(

"draw" => intval( $requestData['draw'] ), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.

"recordsTotal" => intval( $totalData ), // total number of records

"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData

"data" => $data // total data array

);

echo json_encode($json_data); // send data as json format

6- Agregando registro a la base de datos: Para crear un nuevo registro en la base de datos, hemos creado un archivo llamado: registro.php, que servirá para la captura de datos.

<?php include "conn.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <head>
        <?php include("head.php");?>
    </head>
    <body>
       <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                        <i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a>
                   
                   
                </div>
            </div>
            <!-- /navbar-inner -->
        </div><br />

            <div class="container">
                <div class="row">
                    <div class="span12">
                        <div class="content">
                            <?php
			if(isset($_POST['input'])){
				$nombres	= mysqli_real_escape_string($conn,(strip_tags($_POST['nombres'], ENT_QUOTES)));
				$telefono  	= mysqli_real_escape_string($conn,(strip_tags($_POST['telefono'], ENT_QUOTES)));
				$email 		= mysqli_real_escape_string($conn,(strip_tags($_POST['email'], ENT_QUOTES)));
				$direccion  = mysqli_real_escape_string($conn,(strip_tags($_POST['direccion'], ENT_QUOTES)));
				$registrado=date("Y-m-d H:i:s");
		
				$insert = mysqli_query($conn, "INSERT INTO clientes(id, nombres, telefono, email, direccion, registrado)
															VALUES(NULL,'$nombres', '$telefono', '$email', '$direccion', '$registrado')") or die(mysqli_error());
						if($insert){
							echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Bien hecho, los datos han sido agregados correctamente.</div>';
						}else{
							echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Error, no se pudo registrar los datos.</div>';
						}
				
			}
			?>
            
            <blockquote>
            Agregar cliente
            </blockquote>
                         <form name="form1" id="form1" class="form-horizontal row-fluid" action="registro.php" method="POST" >
										<div class="control-group">
											<label class="control-label" for="nombres">Nombres</label>
											<div class="controls">
												<input type="text" name="nombres" id="nombres" placeholder="Nombres del cliente" class="form-control span8 tip" required>
											</div>
										</div>

										<div class="control-group">
											<label class="control-label" for="telefono">Teléfono</label>
											<div class="controls">
												<input type="text" name="telefono" id="telefono" placeholder="Teléfono del cliente" class="form-control span8 tip" required>
											</div>
										</div>

										<div class="control-group">
											<label class="control-label" for="email">Email</label>
											<div class="controls">
												<input name="email" id="email" class="form-control span8 tip" type="email" placeholder="Correo electrónico"  required />
											</div>
										</div>

										<div class="control-group">
											<label class="control-label" for="direccion">Dirección</label>
											<div class="controls">
												<input name="direccion" id="direccion" class=" form-control span8 tip" type="text" placeholder="Dirección" required />
											</div>
										</div>
                                        
                                      

										<div class="control-group">
											<div class="controls">
												<button type="submit" name="input" id="input" class="btn btn-sm btn-primary">Registrar</button>
                                               <a href="index.php" class="btn btn-sm btn-danger">Cancelar</a>
											</div>
										</div>
									</form>
                        </div>
                        <!--/.content-->
                    </div>
                    <!--/.span9-->
                </div>
            </div>
            <!--/.container-->
        
        <!--/.wrapper--><br />
        <div class="footer span-12">
            <div class="container">
              <center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> &copy; <?php echo date("Y")?> DataTables Bootstrap </b></center>
            </div>
        </div>

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

100

101

102

<?php include "conn.php"; ?>

<!DOCTYPE html>

<head>

<?php include("head.php");?>

</head>

<body>

<i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a>

</div>

</div><br />

<?php

if(isset($_POST['input'])){

$nombres = mysqli_real_escape_string($conn,(strip_tags($_POST['nombres'], ENT_QUOTES)));

$telefono = mysqli_real_escape_string($conn,(strip_tags($_POST['telefono'], ENT_QUOTES)));

$email = mysqli_real_escape_string($conn,(strip_tags($_POST['email'], ENT_QUOTES)));

$direccion = mysqli_real_escape_string($conn,(strip_tags($_POST['direccion'], ENT_QUOTES)));

$registrado=date("Y-m-d H:i:s");

$insert = mysqli_query($conn, "INSERT INTO clientes(id, nombres, telefono, email, direccion, registrado)

VALUES(NULL,'$nombres', '$telefono', '$email', '$direccion', '$registrado')") or die(mysqli_error());

if($insert){

echo '<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Bien hecho, los datos han sido agregados correctamente.</div>';

}else{

echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Error, no se pudo registrar los datos.</div>';

}

Agregar cliente

</blockquote>

<label class="control-label" for="nombres">Nombres</label>

</div>

<label class="control-label" for="telefono">Teléfono</label>

</div>

<label class="control-label" for="email">Email</label>

</div>

<label class="control-label" for="direccion">Dirección</label>

</div>

<button type="submit" name="input" id="input" class="btn btn-sm btn-primary">Registrar</button>

<a href="index.php" class="btn btn-sm btn-danger">Cancelar</a>

</div>

</form>

</div>

</div>

</div>

<br />

<center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> © <?php echo date("Y")?> DataTables Bootstrap </b></center>

</div>

</body>

Vista de registro de datos:

7- Editando los registros: Para la edición de los registros, hemos creados 2 archivos:

Archivo “editar.php”, el cual se encarga de mostrar los datos a actualizar desde la base de datos
Archivo “update-edit.php”, el encarga de procesar los datos enviados desde al archivo editar.php

Creando el archivo “editar.php”.

<?php include "conn.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <head>
      <?php include("head.php");?>
    </head>
    <body>
       <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                        <i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a>
                   
                   
                </div>
            </div>
            <!-- /navbar-inner -->
        </div><br />

            <div class="container">
                <div class="row">
                    <div class="span12">
                        <div class="content">
                            <?php
           $id = intval($_GET['id']);
			$sql = mysqli_query($conn, "SELECT * FROM clientes WHERE id='$id'");
			if(mysqli_num_rows($sql) == 0){
				header("Location: index.php");
			}else{
				$row = mysqli_fetch_assoc($sql);
			}
			?>
            
            <blockquote>
            Actualizar datos del cliente
            </blockquote>
                         <form name="form1" id="form1" class="form-horizontal row-fluid" action="update-edit.php" method="POST" >
										<div class="control-group">
											<label class="control-label" for="basicinput">ID</label>
											<div class="controls">
												<input type="text" name="id" id="id" value="<?php echo $row['id']; ?>" placeholder="Tidak perlu di isi" class="form-control span8 tip" readonly="readonly">
											</div>
										</div>

										<div class="control-group">
											<label class="control-label" for="basicinput">Nombres</label>
											<div class="controls">
												<input type="text" name="nombres" id="nombres" value="<?php echo $row['nombres']; ?>" placeholder="" class="form-control span8 tip" required>
											</div>
										</div>

										<div class="control-group">
											<label class="control-label" for="basicinput">Teléfono</label>
											<div class="controls">
												<input type="text" name="telefono" id="telefono" value="<?php echo $row['telefono']; ?>" placeholder="" class="form-control span8 tip" required>
											</div>
										</div>

										<div class="control-group">
											<label class="control-label" for="basicinput">Email</label>
											<div class="controls">
												<input name="email" id="email" value="<?php echo $row['email']; ?>" class="form-control span8 tip" type="email"  required />
											</div>
										</div>

										<div class="control-group">
											<label class="control-label" for="basicinput">Dirección</label>
											<div class="controls">
												<input name="direccion" id="direccion" value="<?php echo $row['direccion']; ?>" class="form-control span8 tip" type="text"  required />
											</div>
										</div>
                                        
                                        <div class="control-group">
											<label class="control-label" for="basicinput">Registrado</label>
											<div class="controls">
												<input name="notelp" id="notelp" value="<?php echo $row['registrado']; ?>" class=" form-control span8 tip" type="text" disabled  />
											</div>
										</div>

										<div class="control-group">
											<div class="controls">
												<input type="submit" name="update" id="update" value="Actualizar" class="btn btn-sm btn-primary"/>
                                               <a href="index.php" class="btn btn-sm btn-danger">Cancelar</a>
											</div>
										</div>
									</form>
                        </div>
                        <!--/.content-->
                    </div>
                    <!--/.span9-->
                </div>
            </div>
            <!--/.container-->
        
        <!--/.wrapper--><br />
        <div class="footer span-12">
            <div class="container">
              <center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> &copy; <?php echo date("Y")?> DataTables Bootstrap </b></center>
            </div>
        </div>

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


      
    </body>

100

101

102

103

104

105

106

107

108

<?php include "conn.php"; ?>

<!DOCTYPE html>

<head>

<?php include("head.php");?>

</head>

<body>

<i class="icon-reorder shaded"></i></a><a class="brand" href="http://obedalvarado.pw/" target="_blank">Sistemas Web</a>

</div>

</div><br />

<?php

$id = intval($_GET['id']);

$sql = mysqli_query($conn, "SELECT * FROM clientes WHERE id='$id'");

if(mysqli_num_rows($sql) == 0){

header("Location: index.php");

}else{

$row = mysqli_fetch_assoc($sql);

}

Actualizar datos del cliente

</blockquote>

<input type="text" name="id" id="id" value="<?php echo $row['id']; ?>" placeholder="Tidak perlu di isi" class="form-control span8 tip" readonly="readonly">

</div>

<label class="control-label" for="basicinput">Nombres</label>

<input type="text" name="nombres" id="nombres" value="<?php echo $row['nombres']; ?>" placeholder="" class="form-control span8 tip" required>

</div>

<label class="control-label" for="basicinput">Teléfono</label>

<input type="text" name="telefono" id="telefono" value="<?php echo $row['telefono']; ?>" placeholder="" class="form-control span8 tip" required>

</div>

<label class="control-label" for="basicinput">Email</label>

<input name="email" id="email" value="<?php echo $row['email']; ?>" class="form-control span8 tip" type="email" required />

</div>

<label class="control-label" for="basicinput">Dirección</label>

<input name="direccion" id="direccion" value="<?php echo $row['direccion']; ?>" class="form-control span8 tip" type="text" required />

</div>

<label class="control-label" for="basicinput">Registrado</label>

<input name="notelp" id="notelp" value="<?php echo $row['registrado']; ?>" class=" form-control span8 tip" type="text" disabled />

</div>

<a href="index.php" class="btn btn-sm btn-danger">Cancelar</a>

</div>

</form>

</div>

</div>

</div>

<br />

<center> <b class="copyright"><a href="http://obedalvarado.pw/"> Sistemas Web</a> © <?php echo date("Y")?> DataTables Bootstrap </b></center>

</div>

</body>

Vista para actualizar los datos:

Creando el archivo “update-edit.php”.

<?php
include "conn.php";
if(isset($_POST['update'])){
				$id			= intval($_POST['id']);
				$nombres	= mysqli_real_escape_string($conn,(strip_tags($_POST['nombres'], ENT_QUOTES)));
				$telefono  	= mysqli_real_escape_string($conn,(strip_tags($_POST['telefono'], ENT_QUOTES)));
				$email 		= mysqli_real_escape_string($conn,(strip_tags($_POST['email'], ENT_QUOTES)));
				$direccion  = mysqli_real_escape_string($conn,(strip_tags($_POST['direccion'], ENT_QUOTES)));
               
				
				$update = mysqli_query($conn, "UPDATE clientes SET nombres='$nombres', telefono='$telefono', email='$email', direccion='$direccion' WHERE id='$id'") or die(mysqli_error());
				if($update){
					echo "<script>alert('Los datos han sido actualizados!'); window.location = 'index.php'</script>";
				}else{
					echo "<script>alert('Error, no se pudo actualizar los datos'); window.location = 'index.php'</script>";
				}
			}
  ?>

<?php

include "conn.php";

if(isset($_POST['update'])){

$id = intval($_POST['id']);

$nombres = mysqli_real_escape_string($conn,(strip_tags($_POST['nombres'], ENT_QUOTES)));

$telefono = mysqli_real_escape_string($conn,(strip_tags($_POST['telefono'], ENT_QUOTES)));

$email = mysqli_real_escape_string($conn,(strip_tags($_POST['email'], ENT_QUOTES)));

$direccion = mysqli_real_escape_string($conn,(strip_tags($_POST['direccion'], ENT_QUOTES)));

$update = mysqli_query($conn, "UPDATE clientes SET nombres='$nombres', telefono='$telefono', email='$email', direccion='$direccion' WHERE id='$id'") or die(mysqli_error());

if($update){

echo "<script>alert('Los datos han sido actualizados!'); window.location = 'index.php'</script>";

}else{

echo "<script>alert('Error, no se pudo actualizar los datos'); window.location = 'index.php'</script>";

}

Te invito a que descargues todos los archivos base para desarrollar este tutorial a continuacion:

DESCARGAR ARCHIVOS

Espero que este breve tutorial y explicación pueda ser útil para todos aquellos que están construyendo aplicaciones web o que están aprendiendo a programar con PHP.

Blog

CRUD de datos usando dataTables, Bootstrap, PHP y MySQL

Instalación del CRUD de datos usando dataTables, Bootstrap, PHP y MySQL

También te puede interesar:

Crear Cotizaciones con HTML, CSS y JavaScript

Dashboard Interactivo de Ventas con PHP, MySQL, Chart.js y Bootstrap 5

Integración de APIs REST con Fetch API, PHP y MySQL

Suscríbete a nuestro boletín de noticias

Sobre Mi

Productos

Enlaces importantes

Blog

Instalación del CRUD de datos usando dataTables, Bootstrap, PHP y MySQL

También te puede interesar:

Crear Cotizaciones con HTML, CSS y JavaScript

Dashboard Interactivo de Ventas con PHP, MySQL, Chart.js y Bootstrap 5

Integración de APIs REST con Fetch API, PHP y MySQL

Sobre Mi

Productos

Enlaces importantes

Sistema para Gestión de Archivos con PHP