
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>