Skip to main content

30 Cursos de Angular JS – Proyecto final

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

 

 

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.