Para terminar la serie de tutoriales sobre realizar un CRUD a una table en MySQL, haciendo uso de Python y Bottle, nos centraremos ahora en la eliminación de datos.
Nuestro objetivo
Eliminar un registro de la tabla MySQL. Para ello en el listado de los registros, de empleados, añadiremos a cada elemento en la lista un vínculo llamado Eliminar, que mediante uso de AJAX con ayuda de jQuery, enviaremos el requerimiento a una URL que ejecutará el proceso, este arrojará los resultados en formato json.
Entonces lo primero es añadir esta URL y el proceso que realizará la eliminación. Esto lo haremos en el archivo webapp.py. Veamos:
Nuestro archivo principal
Bien, a webapp.py vamos añadir el siguiente código y luego, ya que el código es muy entendible, igual explicaremos brevemente.
from mysql.connector import Error
import json
@route('/delete/<no>', method='GET')
def edit(no):
global cnx
response.headers['Content-Type'] = 'application/json'
try:
cursor = cnx.cursor()
cursor.execute("DELETE FROM crud_employees WHERE id = %s", (no,))
cnx.commit()
results = {'result':'true', 'message':'Eliminacion exitosa'}
return json.dumps(results)
except mysql.connector.Error as error:
results = {'result':'false', 'message':error}
return json.dumps(results)
finally:
if (cnx.is_connected()):
cursor.close()
Vamos a definir una ruta para el proceso de eliminación: /delete/<no>, donde no, es un parámetro de entrada que indica el código o id del empleado, en nuestro ejemplo. El método para capturar ese datos será GET, como puedes apreciar.
Como queremos que el proceso de eliminación nos arroje el resultado en formato JSON, importamos de Python este módulo: import json.
En el proceso de eliminación vamos añadir algunos elementos adicionales que nos permite manejarlo mejor. Del paquete de mysql para Python, vamos añadir el módulo Error. Esto es para el manejo de error al ejecutar consultas a la base de datos. No lo usamos antes para insertar o actualizar, pero es una buen práctica hacerlo.
En la función delete, primero especificamos cual será el tipo de respuesta, en nuestro caso JSON, de esta manera: response.headers['Content-Type'] = 'application/json'. Para ello debemos añadir el modulo response, a nuestro archivo webapp.py. Nosotros lo añadimos al inicio:
from bottle import route, run, template, request, static_file, debug, response
En la función delete, también hacemos uso de la rutina try: ... except: ... finally: ... para un mejor control sobre la ejecución del código. Esto nos permite manejar errores y excepciones en nuestro código.
Dentro de try: realizamos la consulta de eliminación DELETE .... Si hay errores, la sección except, se encargará de mostrarlo. En ambos casos, sea que la rutina se realice con éxito o dé errores, la función retornará una cadena JSON mostrando el resultado de la operación.
Cambios en el listado
En listado de los registros, de empleados, mencionamos que añadiremos un vinculo llamada Eliminar, que iniciará el proceso de eliminación de dicho registro. Esto lo haremos en la plantilla list_template.tpl. Añadiremos este codigo:
<td><a data-id="{{row[0]}}" class="del" href="#">Eliminar</a></td>
A la etiqueta del vinculo <a> definimos el atributo personalizado data-id que contiene el id del empleado, capturado por row[0]. Especificamos también la clase del al vinculo. Esto valores lo usaremos luego mediante Javascript.
Haciendo uso de Javascript
Usaremos jQuery para hacer llamados mediante AJAX al proceso de eliminación. Para ello tendremos que modificar nuestros archivos de plantillas y definiremos nuestra propia función en Javascript.
Vamos a la plantilla header.tpl, y añadimos la referencia a jQuery:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Escribiremos el archivo funcs.js que estará ubicado en el directorio files, cuyo objetivo es que cuando el usuario pulse el vinculo Eliminar, con la clase del, se ejecute una serie de procesos que conecte con la URL de eliminación /delete/<no> que definimos en el archivo webapp.py.
Veamos el archivo funcs.js:
$(".listEmployees").on("click", ".del", function(event){
event.preventDefault();
var delete_employee = confirm("¿Está seguro de eliminar?");
if ( delete_employee ) {
var employee_id = $(this).attr('data-id');
$.ajax({
method: "get",
url: "/delete/"+employee_id
})
.done(function( data ) {
if(data.result){
console.log(data)
setTimeout(function(){
window.location.href = '../list';
}, 1000);
}
alert(data.message);
});
}
});
Cuando el usuario pulsa el vinculo Eliminar, muestra una ventana de confirmación, si procedemos lo primero que hace el código es captura el id del empleado. Luego mediante una llamada AJAX, se conecta a la URL que realizará el proceso de eliminación. Si el resultado arrojado es exitoso, entonces recargará la pagina del listado de empleados, caso contrario mostrará un mensaje con los detalles del error.
Ahora vamos a la plantilla footer.tpl, y haremos referencia al archivo anterior, funcs.js. Antes del </body> colocamos lo siguiente:
<script src="../static/funcs.js"></script>
Como recordatorio: Físicamente el archivo funcs.js está en el directorio files, pero a nivel de ejecución mediante Bottle, hemos definido un directorio para los archivos estáticos, llamado static. Asi que tenemos que referenciar desde allí.
Ejecutar tu aplicación: python webapp.py, vea a la url del servidor de prueba: http://localhost:8080/list y haz la prueba!
Así finalizamos está serie de tutoriales paso a paso sobre realizar un CRUD haciendo uso de Python, con el micro framework Bottle, que como hemos visto tiene muchas interesantes funcionalidades y MySQL como motor de base de datos.