Las siglas CRUD significan insertar, leer, actualizar y eliminar registros de la base de datos. Las operaciones de añadir, editar, actualizar y eliminar se utilizan en casi todos los proyectos web de PHP. Seguro que lo has hecho muchas veces, es una práctica muy habitual. En este artículo os voy a mostrar una forma muy sencilla de implementar operaciones CRUD en PHP.
Vamos a implementar las operaciones CRUD de PHP sin necesidad de actualizar la página, utilizando jQuery, Ajax, y MySQL. La funcionalidad del script de ejemplo será la de leer, añadir, actualizar y borrar registros de la base de datos MySQL.
En este script de ejemplo, vamos a extraer datos de una base de datos de usuarios, para luego mostrarlos en una lista con los típicos enlaces de añadir, editar y eliminar. Mediante estos enlaces, el usuario podrá añadir nuevos registros a la base de datos, actualizar los datos previamente introducidos y borrar datos de la base de datos. Todas estas operaciones ocurrirán en una sola página, sin tener que recargar la página. Además, utilizaremos la estructura de tablas de bootstrap para dar estilo al listado, a los campos del formulario y a los enlaces.
Esta sería la estructura de ficheros de la aplicación.
Aplicacion CRUD
- DB.php
- index.php
- userAction.php
Creación de la tabla en la BD
Para este script de ejemplo vamos a crear una tabla muy simple llamada users, con columnas muy básicas donde la información de los usuarios pueda ser almacenada.
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`email` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`phone` varchar(15) COLLATE utf8_unicode_ci NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
DB.php
La clase DB maneja todas las operaciones relacionadas con la base de datos. Por ejemplo, conectar con la base de datos, insertar, modificar y borrar registros de la base de datos. Debes cambiar el valor de las variables $dbHost, $dbUsername, $dbPassword y $dbName por tus propias credenciales.
class DB{
private $dbHost = "localhost";
private $dbUsername = "root";
private $dbPassword = "";
private $dbName = "prueba";
public function __construct(){
if(!$this->db){
// Connect to the database
$conn = new mysqli($this->dbHost, $this->dbUsername, $this->dbPassword, $this->dbName);
if($conn->connect_error){
die("Failed to connect with MySQL: " . $conn->connect_error);
}else{
$this->db = $conn;
}
}
}
/*
* Returns rows from the database based on the conditions
* @param string name of the table
* @param array select, where, order_by, limit and return_type conditions
*/
public function getRows($table,$conditions = array()){
$sql = 'SELECT ';
$sql .= array_key_exists("select",$conditions)?$conditions['select']:'*';
$sql .= ' FROM '.$table;
if(array_key_exists("where",$conditions)){
$sql .= ' WHERE ';
$i = 0;
foreach($conditions['where'] as $key => $value){
$pre = ($i > 0)?' AND ':'';
$sql .= $pre.$key." = '".$value."'";
$i++;
}
}
if(array_key_exists("order_by",$conditions)){
$sql .= ' ORDER BY '.$conditions['order_by'];
}
if(array_key_exists("start",$conditions) && array_key_exists("limit",$conditions)){
$sql .= ' LIMIT '.$conditions['start'].','.$conditions['limit'];
}elseif(!array_key_exists("start",$conditions) && array_key_exists("limit",$conditions)){
$sql .= ' LIMIT '.$conditions['limit'];
}
$result = $this->db->query($sql);
if(array_key_exists("return_type",$conditions) && $conditions['return_type'] != 'all'){
switch($conditions['return_type']){
case 'count':
$data = $result->num_rows;
break;
case 'single':
$data = $result->fetch_assoc();
break;
default:
$data = '';
}
}else{
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$data[] = $row;
}
}
}
return !empty($data)?$data:false;
}
/*
* Insert data into the database
* @param string name of the table
* @param array the data for inserting into the table
*/
public function insert($table,$data){
if(!empty($data) && is_array($data)){
$columns = '';
$values = '';
$i = 0;
if(!array_key_exists('created',$data)){
$data['created'] = date("Y-m-d H:i:s");
}
if(!array_key_exists('modified',$data)){
$data['modified'] = date("Y-m-d H:i:s");
}
foreach($data as $key=>$val){
$pre = ($i > 0)?', ':'';
$columns .= $pre.$key;
$values .= $pre."'".$val."'";
$i++;
}
$query = "INSERT INTO ".$table." (".$columns.") VALUES (".$values.")";
$insert = $this->db->query($query);
return $insert?$this->db->insert_id:false;
}else{
return false;
}
}
/*
* Update data into the database
* @param string name of the table
* @param array the data for updating into the table
* @param array where condition on updating data
*/
public function update($table,$data,$conditions){
if(!empty($data) && is_array($data)){
$colvalSet = '';
$whereSql = '';
$i = 0;
if(!array_key_exists('modified',$data)){
$data['modified'] = date("Y-m-d H:i:s");
}
foreach($data as $key=>$val){
$pre = ($i > 0)?', ':'';
$colvalSet .= $pre.$key."='".$val."'";
$i++;
}
if(!empty($conditions)&& is_array($conditions)){
$whereSql .= ' WHERE ';
$i = 0;
foreach($conditions as $key => $value){
$pre = ($i > 0)?' AND ':'';
$whereSql .= $pre.$key." = '".$value."'";
$i++;
}
}
$query = "UPDATE ".$table." SET ".$colvalSet.$whereSql;
$update = $this->db->query($query);
return $update?$this->db->affected_rows:false;
}else{
return false;
}
}
/*
* Delete data from the database
* @param string name of the table
* @param array where condition on deleting data
*/
public function delete($table,$conditions){
$whereSql = '';
if(!empty($conditions)&& is_array($conditions)){
$whereSql .= ' WHERE ';
$i = 0;
foreach($conditions as $key => $value){
$pre = ($i > 0)?' AND ':'';
$whereSql .= $pre.$key." = '".$value."'";
$i++;
}
}
$query = "DELETE FROM ".$table.$whereSql;
$delete = $this->db->query($query);
return $delete?true:false;
}
}
userAction.php
Este fichero maneja todas las peticiones que vienen desde el archivo de la vista (index.php) y devuelve los datos solicitados. Aquí el código se ejecuta basándose en el valor de action_type. action_type puede ser de cinco tipos: data, view, add, edit y delete. Las siguientes operaciones pueden ser desencadenadas por el valor de action_type.
- data: Devuelve los datos de un único usuario en formato JSON
- view: Devuelve la información de todos los usuarios en formato HTML
- add: Inserta el registro en la base de datos
- edit: Modifica el registro en la base de datos
- delete: Elimina el registro en la base de datos
<?php
include 'DB.php';
$db = new DB();
$tblName = 'users';
if(isset($_POST['action_type']) && !empty($_POST['action_type'])){
if($_POST['action_type'] == 'data'){
$conditions['where'] = array('id'=>$_POST['id']);
$conditions['return_type'] = 'single';
$user = $db->getRows($tblName,$conditions);
echo json_encode($user);
}elseif($_POST['action_type'] == 'view'){
$users = $db->getRows($tblName,array('order_by'=>'id DESC'));
if(!empty($users)){
$count = 0;
foreach($users as $user): $count++;
echo '<tr>';
echo '<td>#'.$count.'</td>';
echo '<td>'.$user['name'].'</td>';
echo '<td>'.$user['email'].'</td>';
echo '<td>'.$user['phone'].'</td>';
echo '<td><a href="javascript:void(0);" class="glyphicon glyphicon-edit" onclick="editUser(''.$user['id'].'')"></a><a href="javascript:void(0);" class="glyphicon glyphicon-trash" onclick="return confirm('Are you sure to delete data?')?userAction('delete',''.$user['id'].''):false;"></a></td>';
echo '</tr>';
endforeach;
}else{
echo '<tr><td colspan="5">No user(s) found......</td></tr>';
}
}elseif($_POST['action_type'] == 'add'){
$userData = array(
'name' => $_POST['name'],
'email' => $_POST['email'],
'phone' => $_POST['phone']
);
$insert = $db->insert($tblName,$userData);
echo $insert?'ok':'err';
}elseif($_POST['action_type'] == 'edit'){
if(!empty($_POST['id'])){
$userData = array(
'name' => $_POST['name'],
'email' => $_POST['email'],
'phone' => $_POST['phone']
);
$condition = array('id' => $_POST['id']);
$update = $db->update($tblName,$userData,$condition);
echo $update?'ok':'err';
}
}elseif($_POST['action_type'] == 'delete'){
if(!empty($_POST['id'])){
$condition = array('id' => $_POST['id']);
$delete = $db->delete($tblName,$condition);
echo $delete?'ok':'err';
}
}
exit;
}
index.php
Como he dicho anteriormente, este es el fichero que se encarga de la vista de la aplicación. Es una única página en donde el usuario podrá realizar todas las operaciones CRUD. Para que se entienda mejor, he dividido el script en dos partes.
Bootstrap y jQuery
Debemos incluir las librerías de Bootstrap y jQuery para que el script funcione correctamente. No es obligatorio incluir Bootstrap. Yo lo he hecho para dar estilo a los elementos, y nada más.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
La función getUsers() se utiliza para obtener los datos de los usuarios del fichero userAction.php utilizando ajax.
function getUsers(){
$.ajax({
type: 'POST',
url: 'userAction.php',
data: 'action_type=view&'+$("#userForm").serialize(),
success:function(html){
$('#userData').html(html);
}
});
}
La función userAction() se utiliza para enviar la petición de añadir, editar o eliminar al fichero userAction.php utilizando Ajax.
function userAction(type,id){
id = (typeof id == "undefined")?'':id;
var statusArr = {add:"added",edit:"updated",delete:"deleted"};
var userData = '';
if (type == 'add') {
userData = $("#addForm").find('.form').serialize()+'&action_type='+type+'&id='+id;
}else if (type == 'edit'){
userData = $("#editForm").find('.form').serialize()+'&action_type='+type;
}else{
userData = 'action_type='+type+'&id='+id;
}
$.ajax({
type: 'POST',
url: 'userAction.php',
data: userData,
success:function(msg){
if(msg == 'ok'){
alert('User data has been '+statusArr[type]+' successfully.');
getUsers();
$('.form')[0].reset();
$('.formData').slideUp();
}else{
alert('Some problem occurred, please try again.');
}
}
});
}
La función editUser() se utiliza para obtener los datos de un usuario en partícular a través del fichero userAction.php.
function editUser(id){
$.ajax({
type: 'POST',
dataType:'JSON',
url: 'userAction.php',
data: 'action_type=data&id='+id,
success:function(data){
$('#idEdit').val(data.id);
$('#nameEdit').val(data.name);
$('#emailEdit').val(data.email);
$('#phoneEdit').val(data.phone);
$('#editForm').slideDown();
}
});
}
HTML
<div class="container">
<div class="row">
<div class="panel panel-default users-content">
<div class="panel-heading">Users <a href="javascript:void(0);" class="glyphicon glyphicon-plus" id="addLink" onclick="javascript:$('#addForm').slideToggle();">Add</a></div>
<div class="panel-body none formData" id="addForm">
<h2 id="actionLabel">Add User</h2>
<form class="form" id="userForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" id="name"/>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" id="email"/>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" name="phone" id="phone"/>
</div>
<a href="javascript:void(0);" class="btn btn-warning" onclick="$('#addForm').slideUp();">Cancel</a>
<a href="javascript:void(0);" class="btn btn-success" onclick="userAction('add')">Add User</a>
</form>
</div>
<div class="panel-body none formData" id="editForm">
<h2 id="actionLabel">Edit User</h2>
<form class="form" id="userForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" id="nameEdit"/>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" id="emailEdit"/>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" name="phone" id="phoneEdit"/>
</div>
<input type="hidden" class="form-control" name="id" id="idEdit"/>
<a href="javascript:void(0);" class="btn btn-warning" onclick="$('#editForm').slideUp();">Cancel</a>
<a href="javascript:void(0);" class="btn btn-success" onclick="userAction('edit')">Update User</a>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody id="userData">
<?php
include 'DB.php';
$db = new DB();
$users = $db->getRows('users',array('order_by'=>'id DESC'));
if(!empty($users)): $count = 0; foreach($users as $user): $count++;
?>
<tr>
<td><?php echo '#'.$count; ?></td>
<td><?php echo $user['name']; ?></td>
<td><?php echo $user['email']; ?></td>
<td><?php echo $user['phone']; ?></td>
<td>
<a href="javascript:void(0);" class="glyphicon glyphicon-edit" onclick="editUser('<?php echo $user['id']; ?>')"></a>
<a href="javascript:void(0);" class="glyphicon glyphicon-trash" onclick="return confirm('Are you sure to delete data?')?userAction('delete','<?php echo $user['id']; ?>'):false;"></a>
</td>
</tr>
<?php endforeach; else: ?>
<tr><td colspan="5">No user(s) found......</td></tr>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
CSS
El CSS expuesto es para la clase .none, a la cual se le referencia bastante en HTML. El resto del CSS es opcional.
/* required style*/
.none{display: none;}
/* optional styles */
table tr th, table tr td{font-size: 1.2rem;}
.row{ margin:20px 20px 20px 20px;width: 100%;}
.glyphicon{font-size: 20px;}
.glyphicon-plus{float: right;}
a.glyphicon{text-decoration: none;}
a.glyphicon-trash{margin-left: 10px;}
Fuente: codexworld.com