Laravel / Vue

Tutorial POS Restaurante – Laravel + Vue.js Parte 2 : Categorías de producto

- por Artyom - Deja un comentario

Tutorial anterior: Crear proyecto y plantilla bootstrap.

Tutorial resumido

Tutorial completo

Crear una tabla de Categorías en la base de datos

-- phpMyAdmin SQL Dump
-- version 4.6.6deb5
-- https://www.phpmyadmin.net/
--
-- Servidor: localhost:3306
-- Tiempo de generación: 19-07-2019 a las 00:21:12
-- Versión del servidor: 5.7.26-0ubuntu0.18.04.1
-- Versión de PHP: 7.2.19-0ubuntu0.18.04.1

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @[email protected]@CHARACTER_SET_CLIENT */;
/*!40101 SET @[email protected]@CHARACTER_SET_RESULTS */;
/*!40101 SET @[email protected]@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de datos: `pos_demo`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `categorias`
--

CREATE TABLE `categorias` (
  `cat_id` int(11) NOT NULL,
  `cat_nombre` varchar(100) COLLATE utf16_spanish2_ci NOT NULL,
  `cat_delete` int(11) NOT NULL,
  `cat_active` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf16 COLLATE=utf16_spanish2_ci;

--
-- Volcado de datos para la tabla `categorias`
--

INSERT INTO `categorias` (`cat_id`, `cat_nombre`, `cat_delete`, `cat_active`) VALUES
(1, 'Carne', 0, 1),
(2, 'Hamburguesa', 0, 0),
(3, 'Bebidas', 0, 1);

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `categorias`
--
ALTER TABLE `categorias`
  ADD PRIMARY KEY (`cat_id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `categorias`
--
ALTER TABLE `categorias`
  MODIFY `cat_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
/*!40101 SET [email protected]_CHARACTER_SET_CLIENT */;
/*!40101 SET [email protected]_CHARACTER_SET_RESULTS */;
/*!40101 SET [email protected]_COLLATION_CONNECTION */;

Laravel (Backend)

Modelo de Categorías

Crear un modelo categoría por medio de comando

php artisan make:model Categorias

Codigo de app/Categorias.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Categorias extends Model
{
    //
    protected $table = "categorias";

    protected $fillable = ['cat_id','cat_nombre', 'cat_active', 'cat_delete'];

    public $timestamps = false;

}

Controlador

Crear un controlador de Categoría en la carpeta de API por el comando

php artisan make:controller API/CategoriaController

Código de app/Http/Controllers/API/CategoriaController.php

<?php

namespace App\Http\Controllers\API;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Categorias;

class CategoriaController extends Controller
{
    //

    public function add(Request $request){

      $name = $request->input("name");

      Categorias::insert([
        'cat_nombre' => $name,
        'cat_active' => 1,
        'cat_delete' => 0
      ]);

      $response['message'] = "Guardo exitosamente $name";
      $response['success'] = true;
      return $response;

    }


    public function list(){

      $data = Categorias::where("cat_delete",0)
      ->get();
      return $data;
    }

    public function avalaible(){
      $data = Categorias::where("cat_delete",0)->where("cat_active",1)->get();
      return $data;
    }

    public function change_status(Request $request){

      // id de categoria
      $idcat = $request->input("idcat");
      // el estado de categoria
      $status = $request->input("status");

      Categorias::where("cat_id",$idcat)->update([
        'cat_active' => $status
      ]);

      $response['message'] = "Actualizo exitosamente";
      $response['success'] = true;
      return $response;

    }

}

Crear rutas para Categoria en el routes/web.php

Route::get('/categoria', function () {
    return view('categoria');
});

// API
Route::group(['prefix'=>'api'],function(){
  Route::post('Categoria/add','API\[email protected]');
  Route::get('Categoria/list','API\[email protected]');
  Route::get('Categoria/disponible','API\[email protected]');
  Route::post('Categoria/change-status','API\[email protected]_status');
});

Crear una vista en blade resources/views/categoria.blade.php

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jumbotron Template for Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body >

    <div id="app">
      <component-header-pos></component-header-pos>
      <component-categoria></component-categoria> 
    </div>

    <!-- importar component vue -->
    <script src="{{ asset('js/app.js') }}" ></script>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  </body>
</html>

Vue.js ( Frontend)

Crear un componente en el resources/js/components/component-categoria.vue

<template>
  <div class="container">
        <br>
        <div class="row">

      <div class="col-md-8 order-md-1">

        <h4 class="mb-3">Modulo Categorias {{nameCat}}</h4>

        <div class="input-group mb-3">
          <input type="text" class="form-control" v-model="nameCat" placeholder="Nombre de categoria" aria-label="Recipient's username" aria-describedby="button-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="button-addon2" v-on:click="addCategory()">Agregar</button>
          </div>
        </div>

        <table class="table table-striped">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Nombre</th>
              <th scope="col">Acciones</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="data in listCat">
              <td></td>
              <td>{{data.cat_nombre}}</td>
              <td>
                <button type="button" class="btn btn-info" v-if="data.cat_active==1" v-on:click="updateSatus(data.cat_id,0)">Activo</button>
                <button type="button" class="btn btn-light" v-else v-on:click="updateSatus(data.cat_id,1)">Desactivado</button>
              </td>
            </tr>
          </tbody>
        </table>

      </div>


    </div>


  </div> <!-- /container -->
</template>

<script>
    export default {
        data(){
          return{
            nameCat:"",
            listCat:[]
          }
        },
        mounted() {
            this.listCatService()
        },
        methods:{
          addCategory(){

            const formData = new FormData()
            formData.append('name',this.nameCat)

            axios.post("api/Categoria/add",formData)
            .then(response => {
              // limpiar campo
              this.nameCat = ""
              // cargar lista de nuevo
              this.listCatService()
            })
            .catch(error => {
              alert(error)
            })

          },
          listCatService(){

            axios.get("api/Categoria/list")
            .then(response=>{
              // cargar datos
              this.listCat = response.data
            })
            .catch(error=>{
              alert(error)
            })

          },
          updateSatus(id,status){

            const formData = new FormData()
            // parametro
            // id de categoria
            formData.append('idcat',id)
            // status de categoria
            formData.append('status',status)

            axios.post("api/Categoria/change-status",formData)
            .then(response => {
              // limpiar campo
              // cargar lista de nuevo
              this.listCatService()
            })
            .catch(error => {
              alert(error)
            })
          }
        }
    }
</script>

La funcion de «listCatService()» es para llamar todos los datos y se muestra en la lista de categorías y la funcion de «addCategory()» es donde se envia los datos y se carga las categorias.

Importar el componente de categoria

Vue.component('component-categoria', require('./components/component-categoria.vue').default);

Ahora a compilar …

npm run watch-poll

Debajo de Food and Drink y colocar el botón para Categoría en el template de componente resources/js/components/component-pos.vue

<button type="button" class="btn btn-light" v-for="cat in listCat">{{cat.cat_nombre}}</button>

Agregar script para crear variable y cargar datos de categoría desde API

<script>
    export default {
        data(){
          return{
            listCat:[]
          }
        },
        mounted() {
            this.listCatService()
        },
        methods:{

          listCatService(){

            axios.get("api/Categoria/disponible")
            .then(response=>{
              // cargar datos 
              this.listCat = response.data
            })
            .catch(error=>{
              alert(error)
            })

          }

        }

    }
</script>

la funcion de «this.listCatService()» es para cargar datos desde API en el mounted y luego se lista las categorias disponibles con ciclo de foreach en el <button>

Artículos relacionados

JWT + Laravel 8 : Autenticación con JWT en laravel

Tutorial FullStack – Angular 10 + Laravel 8 + MySQL

ReactJS Hooks + Laravel 8 + MySQL + API REST CRUD #7 Delete

Acerca de Artyom

Ver todas las entradas de Artyom →

Deja una respuesta

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