Tutorial #29 del curso de angular JS, continuamos con el proyecto CRUD, en este tutorial veremos como eliminar productos de la base de datos para ello daremos funcionamiento al botón eliminar de la tabla y crearemos scripts php para eliminar productos.
app.js
var app = angular.module('crud',[]);
app.controller('crudController',['$scope','$http',function($scope, $http){
$scope.productos = [];
$scope.producto = {};
$scope.detalle_producto = {};
$scope.errors = [];
//list
$scope.listProducts = function(){
$http.get('php/list.php',{})
.then(function success(e){
$scope.productos = e.data.productos;
}, function error(e){
console.log("Se ha producido un error al recuperar la información");
});
};
$scope.listProducts();
//método para registrar
$scope.addProduct = function(){
$http.post('php/create.php',{
producto:$scope.producto
})
.then(function success(e){
$scope.errors = [];
$scope.productos.push(e.data.producto);
var modal_element = angular.element('#add_new_modal');
modal_element.modal('hide');
}, function error(e){
$scope.errors = e.data.errors;
});
};
//eliminar
$scope.delete = function(index){
var conf = confirm("¿Realmente quieres eliminar el producto?");
if (conf==true) {
$http.post('php/delete.php',{
producto:$scope.productos[index]
})
.then(function success(e){
$scope.errors = [];
$scope.productos.splice(index,1);
}, function error(e){
$scope.errors = e.data.errors;
})
}
};
}]);library.php
<?php
require __DIR__ . '/database_connection.php';
class Crud{
protected $db;
public function __construct()
{
$this->db = DB();
}
public function Read()
{
$query = $this->db->prepare("SELECT * FROM productos");
$query->execute();
$data = array();
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}
return json_encode(['productos' => $data]);
}
public function Create($name, $description)
{
$query = $this->db->prepare("INSERT INTO productos(nombre, descripcion) VALUES (:nombre,:descripcion)");
$query->bindParam("nombre", $name, PDO::PARAM_STR);
$query->bindParam("descripcion", $description, PDO::PARAM_STR);
$query->execute();
return json_encode(['producto' => [
'id' => $this->db->lastInsertId(),
'nombre' => $name,
'descripcion' => $description
]]);
}
public function Delete($product_id)
{
$query = $this->db->prepare("DELETE FROM productos WHERE id = :id");
$query->bindParam("id", $product_id, PDO::PARAM_STR);
$query->execute();
}
}
?>delete.php
<?php
$data = json_decode(file_get_contents('php://input'), TRUE);
if (isset($data['producto'])) {
require __DIR__ . '/library.php';
$product_id = (isset($data['producto']['id']) ? $data['producto']['id'] : NULL);
if ($product_id==NULL) {
http_response_code(400);
echo json_encode(['errors' => ["No se pudo eliminar el producto"]]);
}else{
// Delete
$crud = new Crud();
$crud->Delete($product_id);
}
}
?>index.php
<div class="row">
<div class="col-md-12">
<h3><i class="fas fa-boxes"></i> Productos:</h3>
<table ng-if="productos.length > 0" class="table table-bordered table-responsive table-striped">
<tr>
<th>No</th>
<th>Nombre</th>
<th>Descripción</th>
<th>Acción</th>
</tr>
<tr ng-repeat="producto in productos">
<td>{{$index + 1}}</td>
<td>{{producto.nombre}}</td>
<td>{{producto.descripcion}}</td>
<td>
<button class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Editar</button>
<button ng-click="delete($index)" class="btn btn-danger btn-xs"><i class="fas fa-trash"></i> Eliminar</button>
</td>
</tr>
</table>
</div>
</div>