Tutorial #30 del curso de angular JS, finalizamos el proyecto CRUD, en este tutorial veremos como recuperar los datos del producto seleccionado y la parte de actualizar el producto en la base de datos para ello daremos funcionamiento al formulario de editar de la ventana modal y crearemos scripts php para actualizar productos el código fuente completo se encuentra debajo.
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;
})
}
};
//recuperar
$scope.edit = function(index){
$scope.detalle_producto = $scope.productos[index];
var modal_element = angular.element('#modal_update');
modal_element.modal('show');
};
//actualizar
$scope.updateProduct = function(){
$http.post('php/update.php',{
producto:$scope.detalle_producto
})
.then(function success(e){
$scope.errors = [];
var modal_element = angular.element('#modal_update');
modal_element.modal('hide');
}, 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();
}
public function Update($name, $description, $product_id)
{
$query = $this->db->prepare("UPDATE productos SET nombre = :nombre, descripcion = :descripcion WHERE id = :id");
$query->bindParam("nombre", $name, PDO::PARAM_STR);
$query->bindParam("descripcion", $description, PDO::PARAM_STR);
$query->bindParam("id", $product_id, PDO::PARAM_STR);
$query->execute();
}
}
?>update.php
<?php
$data = json_decode(file_get_contents('php://input'), TRUE);
if (isset($data['producto'])) {
require __DIR__ . '/library.php';
$name = (isset($data['producto']['nombre']) ? $data['producto']['nombre'] : NULL);
$description = (isset($data['producto']['descripcion']) ? $data['producto']['descripcion'] : NULL);
$product_id = (isset($data['producto']['id']) ? $data['producto']['id'] : NULL);
// validar
if ($name == NULL) {
http_response_code(400);
echo json_encode(['errors' => ["El campo de nombre es obligatorio"]]);
} else {
// Update
$crud = new Crud();
$crud->Update($name, $description, $product_id);
}
}
?>index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS PHP CRUD</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body ng-app="crud">
<div ng-controller="crudController">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><i class="fab fa-angular"></i> AngularJS PHP CRUD</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button class="btn btn-success" data-toggle="modal" data-target="#add_new_modal"> <i class="fas fa-plus-circle"></i> Nuevo Producto
</button>
</div>
</div>
</div>
<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 ng-click="edit($index)" 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>
<!-- Bootstrap Modals -->
<div class="modal fade" id="add_new_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">Nuevo Producto</h4>
</div>
<div class="modal-body">
<ul class="alert alert-danger" ng-if="errors.length > 0">
<li ng-repeat="error in errors">
{{ error }}
</li>
</ul>
<div class="form-group">
<label for="name">Nombre</label>
<input ng-model="producto.nombre" type="text" id="name" class="form-control"/>
</div>
<div class="form-group">
<label for="description">Descripción</label>
<textarea ng-model="producto.descripcion" class="form-control" name="description"></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" ng-click="addProduct()">Guardar Producto</button>
</div>
</div>
</div>
</div>
<!-- // Modal -->
<!-- Modal - Update -->
<div class="modal fade" id="modal_update" 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">Editar Producto</h4>
</div>
<div class="modal-body">
<ul class="alert alert-danger" ng-if="erros.length > 0">
<li ng-repeat="error in errors">
{{ error }}
</li>
</ul>
<div class="form-group">
<label for="name">Nombre</label>
<input ng-model="detalle_producto.nombre" type="text" id="name" class="form-control"/>
</div>
<div class="form-group">
<label for="description">Descripción</label>
<textarea ng-model="detalle_producto.descripcion" class="form-control" name="description"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button ng-click="<updateProduct></updateProduct>" type="button" class="btn btn-primary">Guardar Cambios</button>
</div>
</div>
</div>
</div>
<!-- // Modal -->
</div>
</div>
<script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/app.js"></script>
</body>
</html>tienda.sql
-- phpMyAdmin SQL Dump -- version 4.7.4 -- https://www.phpmyadmin.net/ -- -- Servidor: 127.0.0.1 -- Tiempo de generación: 05-05-2018 a las 23:33:43 -- Versión del servidor: 10.1.28-MariaDB -- Versión de PHP: 5.6.32 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Base de datos: `tienda` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `productos` -- CREATE TABLE `productos` ( `id` int(11) NOT NULL, `nombre` varchar(50) COLLATE utf8_spanish2_ci NOT NULL, `descripcion` text COLLATE utf8_spanish2_ci NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish2_ci; -- -- Volcado de datos para la tabla `productos` -- INSERT INTO `productos` (`id`, `nombre`, `descripcion`) VALUES (1, 'monitor tv', 'monitor de 22 pulgadas led hdmi, vga, dvi'), (2, 'mouse', 'color rojo ps2'); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `productos` -- ALTER TABLE `productos` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `productos` -- ALTER TABLE `productos` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;