Tutorial #28 del curso de angular JS, continuamos con el proyecto CRUD, en este tutorial veremos como agregar productos a la base de datos ello daremos funcionamiento al formulario de la ventana modal y crearemos scripts php para agregar 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;
});
};
}]);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
]]);
}
}
?>create.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);
// validación
if ($name == NULL) {
http_response_code(400);
echo json_encode(['errors' => ["El campo de nombre es obligatorio"]]);
} else {
// Add new product
$crud = new Crud();
echo $crud->Create($name, $description);
}
}
?>index.php
<!-- 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 -->