Close

Javascript : Ejemplo de CRUD con ES6

darmando.liraBoostrap / CSS / HTML / Javascript / PHP1 Comment

Antes de comenzar con un poco de TypeScript, quisiera compartirles un ejemplo muy simple de las bondades que nos está ofreciendo el EM6 para facilitarnos la vida.

Sobre el ejemplo solo tenemos 5 archivos en total y nos apoyamos de bootstrap para darle una mejor pinta, dentro del ejemplo bueno trate de ser lo más completo para que sea más entendible entre los conceptos a usar pues bueno son : POO, funciones arrow, herencia, import, promise,y fetch para hacer peticiones HTTP.

Para la parte del Back-End , seguiré reutilizando unos servicios montados en PHP donde los podrán ver a detalle aqui.

 

Nuestra estructura del proyecto queda de la siguiente manera:

 

Sin más preámbulos les dejo el código y su ejemplo.

 

index.html

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
   <div class="row">
    <div class="col-md-12">
       <div class="text-center">
         <img src="img/logo.png" alt="desarrollohidrocalido">
         <h3>EJEMPLO DE CRUD CON JAVASCRIPT ES6</h3>
       </div>
        <form class="form-horizontal" id="form-edit-client">
          <fieldset>
            <legend>Productos</legend>
            <div class="form-group">
              <label class="col-md-4 control-label" for="txtProducto">Producto</label>  
              <div class="col-md-4">
                <input id="txtProducto" name="txtProducto" type="text" class="form-control input-md">
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-4 control-label" for="txtPrecio">Precio</label>
              <div class="col-md-4">
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input id="txtPrecio" name="txtPrecio" class="form-control" type="number">
                </div>
              </div>
            </div>
          </fieldset>
        </form>
        <div class="form-group">
              <label class="col-md-4 control-label" for="btn-save"></label>
              <div class="col-md-4">
                <button id="btnGuardar" class="btn btn-success">Guardar</button>
                <button id="btnEliminar" class="btn btn-danger">Eliminar</button>
              </div>
        </div>
    </div>
  <div class=col-md-12>
       <legend>Lista de Productos</legend>
      <table class="table table-bordered table-condensed table-hover">
        <thead>
          <tr>
            <td>Producto</td>
            <th>Precio</th>
          </tr>
        </thead>
        <tbody id="tblProductos" class="cursor" >
        </tbody>
      </table>
  </div>
  </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="js/main.js" type="module"></script>
</body>
</html>

main.css

1
2
3
4
5
6
.cursor{
    cursor: pointer !important;
}
body{
    margin-top: 10px;
}

main.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
'use strict';
import Producto from "./Producto.js";
 
var oArrayProductos,oProducto,tblProductos,btnGuardar,btnEliminar,txtPrecio,txtProducto,banderaEsEdicion,oModelProductos;
 
OnInit();
 
function OnInit(){
    oArrayProductos = "";
    oProducto = new Producto();
    tblProductos = document.getElementById('tblProductos');
    btnGuardar = document.getElementById("btnGuardar");
    btnEliminar = document.getElementById("btnEliminar");
    txtPrecio = document.getElementById("txtPrecio");
    txtPrecio.value = "";
    txtProducto = document.getElementById("txtProducto");
    txtProducto.value = "";
    banderaEsEdicion = false;
    oModelProductos = {
        "cat_prec_id": null,
        "nombre": null,
        "precio":null
    }
    oProducto.obtenerProductos().then((response) => {
        response.cat_precios.forEach(elem => {
            oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;
        });      
        tblProductos.innerHTML = oArrayProductos;    
    }).catch(error => {
    
    });
}
 
tblProductos.addEventListener("click", function(e){
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    let productoSeleccionado = JSON.parse(target.dataset.producto);
    oModelProductos = productoSeleccionado;
    txtPrecio.value = oModelProductos.precio;
    txtProducto.value = oModelProductos.nombre;
    banderaEsEdicion = true;
});
 
btnGuardar.addEventListener("click", function(evet){
    event.preventDefault();
    if(txtProducto.value && txtPrecio.value){
        if(!banderaEsEdicion){
            // insert
            let producto = {
                "cat_prec_id": null,
                "nombre": txtProducto.value,
                "precio": txtPrecio.value
            }
            oProducto.agregarProducto(producto).then((response) => {
                response.cat_precios.forEach(elem => {
                    oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;
                });      
                tblProductos.innerHTML = oArrayProductos;    
            }).catch(error => {
            
            });        
        }else{
            //update
            let producto = {
                "cat_prec_id": oModelProductos.cat_prec_id,
                "nombre": txtProducto.value,
                "precio": txtPrecio.value
            }        
            oProducto.editarProducto(producto).then((response) => {
                response.cat_precios.forEach(elem => {
                    oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;
                });      
                tblProductos.innerHTML = oArrayProductos;    
            }).catch(error => {
            
            });
        }
        OnInit();
    }
});
 
btnEliminar.addEventListener("click", function(evet){
    event.preventDefault();
    if(oModelProductos.cat_prec_id){
        if(confirm(`¿Desea eliminar el producto: ${txtProducto.value} ?`)){
 
        }
        oProducto.eliminarProducto(oModelProductos.cat_prec_id).then((response) => {
            response.cat_precios.forEach(elem => {
                oArrayProductos += `<tr data-producto='${JSON.stringify(elem)}'><td>${elem.nombre}</td><td>${elem.precio}</td></tr>`;
            });      
            tblProductos.innerHTML = oArrayProductos;    
        }).catch(error => {
        
        });
      
        OnInit();
    }
});

Producto.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
'use strict';
import Servicio from "./Servicio.js";
export default class Producto extends Servicio{
    constructor(){
        super();
    }
    obtenerProductos(){
        var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios`, {method: 'GET', body: null});
        return new Promise(function(resolve, reject) {
            this.http(myRequest).then((response) => {
                 resolve(response);
             }).catch(error => {
                reject(error);
             });    
        }.bind(this));
    }
 
    eliminarProducto(_idProducto){
        var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios/${_idProducto}`, {method: 'DELETE', body: null});
        return new Promise(function(resolve, reject) {
            this.http(myRequest).then((response) => {
                 resolve(response);
             }).catch(error => {
                reject(error);
             });    
        }.bind(this));
    }
 
    editarProducto(_producto){
        var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios/${_producto.cat_prec_id}`, {method: 'PUT', body: JSON.stringify(_producto)});
        return new Promise(function(resolve, reject) {
            this.http(myRequest).then((response) => {
                 resolve(response);
             }).catch(error => {
                reject(error);
             });    
        }.bind(this));
    }
 
    agregarProducto(_producto){
        var myRequest = new Request(`https://www.desarrollohidrocalido.com/ejemplos/AngularJs-Slim-PHP/model/modulos/modulo1/cat_precios`, {method: 'POST', body: JSON.stringify(_producto)});
        return new Promise(function(resolve, reject) {
            this.http(myRequest).then((response) => {
                 resolve(response);
             }).catch(error => {
                reject(error);
             });    
        }.bind(this));
    }
 
 
}

 

Servicio.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
'use strict';
export default class Servicio{
 
    constructor(){
        
    }
 
    http(_request) {
        return new Promise(function(resolve, reject) {
            fetch(_request)
           .then(response => {
               if (response.status === 200) {
                 return response.json();
               } else {
                 throw new Error('Something went wrong on api server!');
               }
           })
           .then(data => {
               resolve(data);
           }).catch(error => {
             reject(error);
           });
        });
    }
}

 

Pos aquí podrán ver una pequeña demostración del ejemplo y más abajo el enlace para que lo puedan descargar o bien si lo quieres probar ustedes mismos el enlace directo al demo.

 

 

More from my site

1 thought on “Javascript : Ejemplo de CRUD con ES6”

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.