Formulario A-B-C con MySQL, PHP y AngularJS - Parte 2

Ver parte 1

En el ejercicio anterior aprendimos como crear un listado. Ahora vamos a seguir adelante para lograr Agregar/Editar y eliminar elementos.

Agregando registros

Lo primero que haremos será agregar un formulario "modal". Para conseguirlo, agregamos el siguiente código:

<!-- Modal Producto -->
<div id="modalProducto" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Producto</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6">
                        <label>Código de barras:</label>
                        <div class="form-group input-group">

                            <input type="text" id="txtCodigoBarras" ng-model="producto.codigo_barras" class="form-control" />
                            <span class="input-group-addon"><i class="glyphicon glyphicon-barcode"></i></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>Nombre del producto:</label>
                            <input type="text" id="txtNombreProducto" ng-model="producto.nombre_producto" class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <label>Stock:</label>
                        <div class="form-group input-group">
                            <input type="text" id="txtStock" ng-model="producto.stock" class="form-control" />
                            <span class="input-group-addon">0.00</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label>Precio Venta:</label>
                        <div class="form-group input-group">

                            <input type="text" id="txtStock" ng-model="producto.precio_venta" class="form-control" />
                            <span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" ng-click="Grabar()" class="btn btn-primary" ><i class="glyphicon glyphicon-floppy-disk"></i> Grabar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Cancelar</button>
            </div>
        </div>

    </div>
</div>
<!-- Modal Producto -->

Ahora, es necesario identificar el botón "+ Agregar nuevo producto" y modificar su código, para que quede asi:

<a href="#" class="btn btn-primary" ng-click="AbrirNuevo();"><i class="glyphicon glyphicon-plus"></i> Agregar nuevo producto</a>

Con mucho cuidado, agregamos el siguiente código Javascript "dentro de myApp.controller":

$scope.AbrirEditar = function (item) {
    $scope.producto = item;
    $("#modalProducto").modal();
};
$scope.AbrirNuevo = function () {
    $scope.producto = {id_producto: 0, codigo_barras: "", nombre_producto: "", stock: 0, precio_venta: 0};
    $("#modalProducto").modal();
};
$scope.Grabar = function () {
    $http({
        method: "POST",
        url: 'cod-formulario-abc.php?functionToCall=grabar_producto',
        data: $scope.producto}).then(function (response) {
        if (response.data.status === "1") {
            alert(response.data.message);
            $scope.BuscarProducto();
            $("#modalProducto").modal("hide");
        } else {
            alert(response.data.message);
        }
    });
};

También, en la tabla, ubicamos la línea en donde está el botón para eliminar y lo modificamos para que quede asi:

<td class="text-center"><a href="#" ng-click="AbrirEditar(this.producto);" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-pencil"></i></a></td>

Modificamos el archivo "cod-formulario-abc.php" y agregamos la función "Grabar()":

function Grabar() {
    $mysql = new Connection();
    $cnn = $mysql->getConnection();
    $retorno = $this->ArrayMessage("0", "No se ha realizado ninguna acción.");
    $query = $cnn->prepare("call proc_ProductoGrabar (?,?,?,?,?)");
    $query->bind_param("issdd", $this->id_producto, $this->codigo_barras, $this->nombre_producto, $this->stock, $this->precio_venta);
    $query->execute();
    $query->store_result();
    if (mysqli_stmt_error($query) != "") {
        $retorno = $this->ArrayMessage("0", mysqli_stmt_error($query));
    }
    //Verificar si se obtubieron resultados
    if ($query->num_rows != 0) {
        $query->bind_result($this->id_producto);
        if ($query->fetch()) {
            if (is_null($this->id_producto)) {
                $retorno = $this->ArrayMessage("0", "No se ha realizado ninguna acción. El error se desconoce.");
            } else {
                $retorno = $this->ArrayMessage("1", "El producto ha sido grabado correctamente.");
            }
        }
    }
    $query->close();
    $cnn->close();
    return $retorno;
}

En el mismo archivo, agregamos otro "case" (En la parte inferior del mismo):

case "grabar_producto":
    $producto = new Productos();
    $producto->id_producto = $json_data->id_producto;
    $producto->codigo_barras = $json_data->codigo_barras;
    $producto->nombre_producto = $json_data->nombre_producto;
    $producto->stock = $json_data->stock;
    $producto->precio_venta = $json_data->precio_venta;
    echo json_encode($producto->Grabar());
    break;

Una vez hecho lo anterior, procedemos a realizar pruebas:

Si hacemos clic en el botón "+ Agregar nuevo producto", se verá lo siguiente:

Luego, llenamos todos los datos (escribimos a propósito un código de barras que ya existe):

Corregimos el código de barras y presionamos el botón "Grabar":

Se agrega el producto a la lista:


Eliminando Registros

Para continuar nuestro ejercicio y agregar la funcionalidad para eliminar, agregamos el siguiente código Javascript (Dentro del Controler):

$scope.AbrirEliminar = function (item) {
    $scope.producto = item;
    $("#modalProductoEliminar").modal();
};
$scope.Eliminar = function () {
    $http({
        method: "POST",
        url: 'cod-formulario-abc.php?functionToCall=eliminar_producto',
        data: $scope.producto}).then(function (response) {
        if (response.data.status === "1") {
            alert(response.data.message);
            $scope.BuscarProducto();
            $("#modalProductoEliminar").modal("hide");
        } else {
            alert(response.data.message);
        }
    });
};

Luego, agregamos el siguiente código HTML, el cual contiene una ventana modal:

<!-- Modal Eliminar-->
<div id="modalProductoEliminar" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title" style="color:red;">¿Realmente desea eliminar el producto?</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6">
                        <label>Código de barras:</label>
                        <div class="form-group input-group">

                            <input type="text" ng-model="producto.codigo_barras" readonly="true" class="form-control" />
                            <span class="input-group-addon"><i class="glyphicon glyphicon-barcode"></i></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>Nombre del producto:</label>
                            <input type="text" ng-model="producto.nombre_producto" readonly="true" class="form-control" />
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" ng-click="Eliminar()" class="btn btn-danger" ><i class="glyphicon glyphicon-trash"></i> Eliminar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Cancelar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Eliminar-->

Ahora, en la tabla, ubicamos la línea en donde se encuentra el botón para eliminar y la modificamos para que quede así:

<td class="text-center"><a href="#" ng-click="AbrirEliminar(this.producto);" class="btn btn-sm btn-danger"><i class="glyphicon glyphicon-trash"></i></a></td>

Ahora, modificamos el archivo "cod-formulario-abc.php" y agregamos la función "Eliminar($idProducto)"

function Eliminar($idProducto) {
    $mysql = new Connection();
    $cnn = $mysql->getConnection();
    $retorno = $this->ArrayMessage("0", "No se ha realizado ninguna acción.");
    $query = $cnn->prepare("call proc_ProductoEliminar (?)");
    $query->bind_param("i", $idProducto);
    $query->execute();
    $query->store_result();
    if (mysqli_stmt_error($query) != "") {
        $retorno = $this->ArrayMessage("0", mysqli_stmt_error($query));
    }
    //Verificar si se obtubieron resultados
    if ($query->num_rows != 0) {
        $query->bind_result($this->id_producto);
        if ($query->fetch()) {
            if (is_null($this->id_producto)) {
                $retorno = $this->ArrayMessage("0", "No se ha realizado ninguna acción. El error se desconoce.");
            } else {
                $retorno = $this->ArrayMessage("1", "El producto ha sido eliminado.");
            }
        }
    }
    $query->close();
    $cnn->close();
    return $retorno;
}

En el mismo archivo, agregamos otra opción "case" (Al final):

case "eliminar_producto":
    $producto = new Productos();
    echo json_encode($producto->Eliminar($json_data->id_producto));
    break;


Hagamos algunas pruebas:

Si damos clic en el botón para eliminar, debemos ver lo siguiente:

Si hacemos clic en el botón "Eliminar":


Y hemos terminado.

Espero que este tutorial les sea de utilidad. Si alguien tiene alguna sugerencia de mejora, les agradecería los comentarios, de igual manera, cualquier error que encuentren.

No olvides hacer G+1

1 comentario:

  1. amigo lo modifique y si me agarro todo menos el guardar y editar el guardar no los sube y el editar no sirce el boton de cancelar

    ResponderEliminar