27 Cursos de Angular JS – Proyecto final

Tutorial #27 del curso de angular JS, continuamos con el proyecto CRUD, en este tutorial realizaremos el listado de productos para ello crearemos la Base de datos y los scripts php para la conexión y listado de productos.

tienda.sql

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

database_connection.php

<?php

define('HOST', 'localhost'); // Host de la base de datos
define('USER', 'root'); // Usuario
define('PASSWORD', ''); // Contraseña
define('DATABASE', 'tienda'); // Nombre de Base de Datos

function DB()
{
    static $instance;
    if ($instance === null) {
        $opt = array(
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            PDO::ATTR_EMULATE_PREPARES => FALSE,
        );
        $dsn = 'mysql:host=' . HOST . ';dbname=' . DATABASE;
        $instance = new PDO($dsn, USER, PASSWORD, $opt);
    }
    return $instance;
}

?>

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]);
    }

}

?>

list.php

<?php
require __DIR__ . '/library.php';

$productos = new Crud();

echo $productos->Read();

?>

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();

}]);

index.php

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