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 -->