Continuamos con la serie de tutoriales sobre hacer un mantenimiento de datos o CRUD, haciendo uso de las tecnologías mencionadas en el título MySQL y Python, haciendo uso del framework Bottle. En este oportunidad retomamos en el proyecto anterior (Insertar datos) y nos centraremos en el proceso de actualizar los datos.

Previamente definimos la base de datos, puedes descargarlo de la publicación anterior.

Nuevas funciones en la aplicación

En el archivo webapp.py vamos añadir 2 nuevas rutas URL y sus respectivas funciones. Vamos a colocar todo el código y explicaremos las funciones añadidas.

from bottle import route, run, template, request, static_file, debug
import mysql.connector
cnx = mysql.connector.connect(user='root', password='',host='127.0.0.1',database='db_emocion')
@route('/static/<filename>')
def server_static(filename):
    return static_file(filename, root='files/')
@route('/list')
def list():
    global cnx
    cursor = cnx.cursor()
    query = ("SELECT * FROM crud_employees")
    cursor.execute(query)
    result = cursor.fetchall()
    cursor.close()
    return template('list_template', rows=result)
@route ('/new')
def new():
    return template('new_employee.tpl')
@route('/edit/<no>', method='GET')
def edit(no):
    global cnx
    cursor = cnx.cursor()
    cursor.execute("SELECT * FROM crud_employees WHERE id = %s", (no,))
    result = cursor.fetchone()
    cursor.close()
    return template('edit_employee.tpl', row=result, no=no)
@route('/save', method='POST')
def save():
    global cnx
    mode = request.POST.mode.strip()
    id = request.POST.Id.strip()
    names = request.POST.Names.strip()
    address = request.POST.Address.strip()
    date_register = request.POST.Date_register.strip()
    phone = request.POST.Phone.strip()
    comment = request.POST.Comment.strip()
    salary = request.POST.Salary.strip()
    cursor = cnx.cursor()
    if mode == "new":
        cursor.execute( "INSERT INTO crud_employees (names, address, date_register, phone, comment, salary) VALUES (%s, %s, %s, %s, %s, %s)", (names, address, date_register, phone, comment, salary) )
        message =  '<p>El nuevo empleado fue agregado a la base de datos</p><p><a href="/list">Regresar al listado</a></p>'
    if mode == "update":
        cursor.execute( "UPDATE crud_employees SET names=%s, address=%s, date_register=%s, phone=%s, comment=%s, salary=%s WHERE id= %s", (names, address, date_register, phone, comment, salary, id) )
        message = '<p>Datos del empleado actualizados</p><p><a href="/list">Regresar al listado</a></p>'
    cnx.commit()
    cursor.close()
    return message
debug(True)
run(host='localhost', port=8080)

La nueva ruta es @route('/edit/<no>', method='GET'), donde no, es el nombre de un parámetro de entrada, también indicamos que el método de captura de datos es mediante GET. Con esto indicamos que si accedemos por la url, ej: http://localhost:8080/edit/8/, captura el valor 8 y lo pasará a la función edit(no) para procesarla.

La funcion edit(no), acepta como parámetro un valor. Este valor es el Id del empleado. Lo que haremos con este valor será consultar en la tabla empleado, los datos de este mediante su Id. Si los resultados son correctos, pasará los datos a la variable row, para mostrarlos en el template edit_employee.tpl, que es el formulario que mostrará los datos del empleado. Lo explicaremos luego…

Ahora nos centramos en la ruta para grabar los datos del empleado en la base de datos. En la anterior publicación ya habíamos comentado la ruta @route('/save', method='POST') y la función save() para guardar los datos del nuevo empleado, pero esta vez la hemos modificado para que acepte unas variables adicionales, mode e id.

En la variable mode, definimos cómo se desempeñará la funcion save() si va guardar o actualizar, dependiendo de ello ejecutará la instrucción correspondiente. Y el id contiene el valor del Id del empleado. Para un nuevo empleado el Id por defecto es 0, para actualizar un empleado existente previamente capturamos su Id.

Notaras también que luego de insertar/actualizar se muestra un mensaje, con un link para regresar a la lista de empleados.

El archivo template

Ahora vamos a mostrar el formulario donde aparecerá los datos del empleado a actualizar: edit_employee.tpl. Luego explicamos el código:

% include('header.tpl')
		<h2>MySQL + Python (Bottle)</h2>
		<p>Edit the task with ID = {{no}}</p>
    <p>Actualiza los datos del empleado</p>
    <form action="/save" method="POST">
			<input type="hidden" name="mode" value="update" />
			<input type="hidden" name="Id" value="{{row[0]}}" />
			<label>Nombres:
				<input type="text" name="Names" value="{{row[1]}}" />
			</label>
			<label>Dirección:
				<input type="text" name="Address" value="{{row[2]}}" />
			</label>
			<label>Fecha registro
				<input type="date" name="Date_register" value="{{row[3]}}" />
			</label>
			<label>Telefono
				<input type="tel" name="Phone" value="{{row[4]}}" />
			</label>
			<label>Comentario
				<textarea name="Comment">{{row[5]}}</textarea>
			</label>
			<label>Salario
				<input type="number" step=".01" name="Salary" value="{{row[6]}}" />
			</label>
			<button type="submit" value="Save">Enviar datos</button>
		</form>
		<p><a href="/list">Regresar a listado</a></p>
% include('footer.tpl')

No es difícil de entender. La función edit(no) retorna una variable: row, con los datos del empleado. Lo que hacemos en el template es mostrar row y entre corchetes el número de columna que contiene el dato a mostrar. Tendrá este formato row[0], en este caso corresponde con la columna id. De esta forma estamos mostrando los datos del empleado en el formulario.

En el formulario cuando se pulse Enviar datos, enviará los datos mediante el método post, y ejecutará la función save(), que explicamos líneas arriba.

En listado de los empleados

Ahora vamos a modificar la lista de empleados, vamos añadir una columna que contendrá un link para cada empleado, que nos llevará al formulario que cargara sus datos y nos permitirá actualizarlos: list_template.tpl

% include('header.tpl')
		<h2>MySQL + Python (Bottle)</h2>
    <p>La consulta arrojo lo siguiente resultados:</p>
    <table border="1">
    %for row in rows:
      <tr>
      %for col in row:
        <td>{{col}}</td>
      %end
				<td><a href="/edit/{{row[0]}}">Edit</a></td>
      </tr>
    %end
    </table>
		<p><a href="/new">Añadir nuevo empleado</a></p>
% include('footer.tpl')

Está es la línea nueva <a href="/edit/{{row[0]}}">Edit</a>. {{row[0]}} arrojará el Id del empleado. Cuando se pulse en este link, la aplicación ejecutará la función edit(no), donde no es el Id del empleado, consultará por los datos del Id y mostrará los datos en el formulario que explicamos antes.

Ahora a probar nuestra aplicación. Mediante la consola ubicarnos en donde está nuestra aplicación y escribir:

/directory_my_webapp/python webapp.py

A través del navegador ir a la url: http://localhost:8080/list, pulsa editar en cualquier empleado y te mostrará el formulario con los datos de dicho empleado.

Ya tenemos nuestro formulario de actualización funcionando! Próxima entrega, como eliminar un datos con MySQL y Bottle(Python).

Vamos paso a paso con el fin de ir aprendiendo y comprendiendo tanto el lenguaje Python cómo los métodos y funcionalidades con las que cuenta el framework Bottle.

Descargar Código