- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CRUD articulos con Buscador usando Vue.js con PHP-Mysql-Api Json-Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
h3 {
color: #e9ff88;
text-shadow: 2px 2px 5px #000000;
}
table,input,button {
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.6);
}
th,td{
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.8);
}
.card{
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.8);
}
.panel-heading{
margin-bottom: 8px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
text-align: left;
gap: 5px;
}
@media screen and (max-width: 500px) {
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container" id="crudApp">
<br />
<h3 align="center">CRUD articulos con Buscador usando Vue.js con PHP-Mysql-Api Json-Bootstrap</h3>
<div class="card">
<div class="card-body">
<div class="grid">
<div class="item item-1">
<input type="text" placeholder="Buscar x nombre aqui..." v-model="buscar" @keyup.enter="fetchtodosdatos()" @keyup="fetchtodosdatos()" autocomplete="off" class="form-control" />
</div>
<div class="item item-2">
<button class="btn btn-info btn-xs" v-on:click="fetchtodosdatos()"><i class='bx bx-search'></i> Buscar</button>
</div>
</div>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-12">
<button class="btn btn-success btn-xs" @click="openModel"><i class='bx bx-plus'></i> Nuevo</button>
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-striped table-sm">
<thead class="thead-dark">
<tr>
<th>Nombre</th>
<th>Precio</th>
<th>Editar</th>
<th>Eliminar</th>
</tr>
</thead>
<tr v-for="reg in todosDatos">
<td>{{ reg.nombre }}</td>
<td>{{ reg.precio }}</td>
<td><button type="button" name="edit" class="btn btn-warning btn-xs edit" @click="fetchDato(reg.id)"><i class='bx bx-pencil'></i> Editar</button></td>
<td><button type="button" name="delete" class="btn btn-danger btn-xs delete" @click="borrarDato(reg.id)"><i class='bx bx-trash-alt'></i> Eliminar</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div v-if="myModel">
<transition name="model">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ dinamicoTitulo }}</h4>
<button type="button" class="close" @click="myModel=false"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nombre</label>
<input type="text" class="form-control" v-model="nombre" />
</div>
<div class="form-group">
<label>Precio</label>
<input type="text" class="form-control" v-model="precio" />
</div>
<br />
<div align="center">
<input type="hidden" v-model="id" />
<input type="button" class="btn btn-success btn-xs" v-model="accionBoton" @click="submitData" />
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</body>
</html>
<script>
var aplicacion_web = new Vue({
el:'#crudApp',
data:{
todosDatos:'',
myModel:false,
accionBoton:'Insertar',
dinamicoTitulo:'NUEVO REGISTRO',
buscar:'',
},
methods:{
fetchtodosdatos:function(){
axios.post('apijson.php', {
action:'fetchtodos',
buscar:this.buscar
}).then(function(response){
aplicacion_web.todosDatos = response.data;
});
},
openModel:function(){
aplicacion_web.nombre = '';
aplicacion_web.precio = '';
aplicacion_web.accionBoton = "Insertar";
aplicacion_web.dinamicoTitulo = "NUEVO REGISTRO";
aplicacion_web.myModel = true;
},
submitData:function(){
if(aplicacion_web.nombre != '' && aplicacion_web.precio != '')
{
if(aplicacion_web.accionBoton == 'Insertar')
{
axios.post('apijson.php', {
action:'Insertar',
nombre:aplicacion_web.nombre,
precio:aplicacion_web.precio
}).then(function(response){
aplicacion_web.myModel = false;
aplicacion_web.fetchtodosdatos();
aplicacion_web.nombre = '';
aplicacion_web.precio = '';
alert(response.data.mensaje);
});
}
if(aplicacion_web.accionBoton == 'Actualizar')
{
axios.post('apijson.php', {
action:'Actualizar',
nombre : aplicacion_web.nombre,
precio : aplicacion_web.precio,
id : aplicacion_web.id
}).then(function(response){
aplicacion_web.myModel = false;
aplicacion_web.fetchtodosdatos();
aplicacion_web.nombre = '';
aplicacion_web.precio = '';
aplicacion_web.id = '';
alert(response.data.mensaje);
});
}
}
else
{
alert("Debe Rellenar todos los campos");
}
},
fetchDato:function(id){
axios.post('apijson.php', {
action:'fetchUnico',
id:id
}).then(function(response){
aplicacion_web.nombre = response.data.nombre;
aplicacion_web.precio= response.data.precio;
aplicacion_web.id = response.data.id;
aplicacion_web.myModel = true;
aplicacion_web.accionBoton = 'Actualizar';
aplicacion_web.dinamicoTitulo = 'MODIFICAR DATOS';
});
},
borrarDato:function(id){
if(confirm("Estas seguro de que quieres eliminar este registro ?"))
{
axios.post('action.php', {
action:'Eliminar',
id:id
}).then(function(response){
aplicacion_web.fetchtodosdatos();
alert(response.data.mensaje);
});
}
}
},
created:function(){
this.fetchtodosdatos();
}
});
</script>
--------------------------
apijson.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=tienda", "root", "root");
$dato_recibido = json_decode(file_get_contents("php://input"));
$data = array();
if($dato_recibido->action == 'fetchtodos')
{
$query = "SELECT * FROM articulos WHERE nombre LIKE '%$dato_recibido->buscar%' ORDER BY id DESC LIMIT 100";
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
/////////////////////////////////////////////
if($dato_recibido->action == 'Insertar')
{
$data = array(
':nombre' => $dato_recibido->nombre,
':precio' => $dato_recibido->precio
);
$query = " INSERT INTO articulos (nombre, precio) VALUES (:nombre, :precio)";
$statement = $connect->prepare($query);
$statement->execute($data);
$output = array(
'mensaje' => 'Datos insertados con EXITO :-)'
);
echo json_encode($output);
}
////////////////////////////////////////////
if($dato_recibido->action == 'fetchUnico')
{
$query = "SELECT * FROM articulos WHERE id = '".$dato_recibido->id."'";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$data['id'] = $row['id'];
$data['nombre'] = $row['nombre'];
$data['precio'] = $row['precio'];
}
echo json_encode($data);
}
///////////////////////////////////////////////
if($dato_recibido->action == 'Actualizar')
{
$data = array(
':nombre' => $dato_recibido->nombre,
':precio' => $dato_recibido->precio,
':id' => $dato_recibido->id
);
$query = "UPDATE articulos SET nombre = :nombre, precio = :precio WHERE id = :id";
$statement = $connect->prepare($query);
$statement->execute($data);
$output = array(
'mensaje' => 'Datos Actualizados con EXITO :-)'
);
echo json_encode($output);
}
//////////////////////////////////////////////
if($dato_recibido->action == 'Eliminar')
{
$query = "DELETE FROM articulos WHERE id = '".$dato_recibido->id."'";
$statement = $connect->prepare($query);
$statement->execute();
$output = array(
'mensaje' => 'Registro Eliminado con Exito :-)'
);
echo json_encode($output);
}
?>
/////////////////////////////////////
tienda.sql
--
-- Base de datos: `tienda`
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `articulos`
--
CREATE TABLE `articulos` (
`id` bigint(20) NOT NULL,
`nombre` mediumtext COLLATE utf8_spanish_ci NOT NULL,
`precio` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
--
-- Volcado de datos para la tabla `articulos`
--
INSERT INTO `articulos` (`id`, `nombre`, `precio`) VALUES
(1, 'Aceite De Girasol 900 ml', '480.00'),
(27, 'Aceite De Girasol 1.5 Litros', '990.00'),
(28, 'Mayonesa 475 Gr', '250.00'),
(29, 'Yerba 1 kg', '800.99'),
(30, 'Azucar 1 kg', '250.88'),
(31, 'Pan salvado', '22.98');
--
-- Índices para tablas volcadas
--
--
-- Indices de la tabla `articulos`
--
ALTER TABLE `articulos`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT de las tablas volcadas
--
--
-- AUTO_INCREMENT de la tabla `articulos`
--
ALTER TABLE `articulos`
MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=32;.sql
--
-- Base de datos: `tienda`
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `articulo`
--
CREATE TABLE `articulos` (
`id` bigint(20) NOT NULL,
`nombre` mediumtext COLLATE utf8_spanish_ci NOT NULL,
`precio` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
--
-- Volcado de datos para la tabla `articulos`
--
INSERT INTO `articulos` (`id`, `nombre`, `precio`) VALUES
(1, 'Aceite De Girasol 900 ml', '480.00'),
(27, 'Aceite De Girasol 1.5 Litros', '990.00'),
(28, 'Mayonesa 475 Gr', '250.00'),
(29, 'Yerba 1 kg', '800.99'),
(30, 'Azucar 1 kg', '250.88'),
(31, 'Pan salvado', '22.98');
--
-- Índices para tablas volcadas
--
--
-- Indices de la tabla `articulos`
--
ALTER TABLE `articulos`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT de las tablas volcadas
--
--
-- AUTO_INCREMENT de la tabla `articulos`
--
ALTER TABLE `articulos`
MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=32;
Post publicado por:
Comentarios
Publicar un comentario