Skip to main content

28 Cursos de Angular JS – Proyecto final

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">×</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 -->

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.