En este capítulo aprendemos a realizar consultas para extraer información relevante de nuestras bases de datos, y aprendemos cómo pasar esa información del servidor al navegador. Primero, usamos tablas para mostrar esa información en el navegador. Segundo, usando Chart.js, mostramos la información de nuestras bases de datos en una gráfica.
Utilizamos las consultas que aprendimos cuando estudiamos bases de datos para acceder a las frases de los usuarios. Mostramos esa información en el navegador utilizando tablas de Bootstrap.
En esta sección, realizamos consultas para acceder a las bases de datos en nuestra aplicación, y aprendemos cómo mostrar esa información utilizando diferentes gráficas.
En este reto semanal, hacemos consultas en nuestra base de datos, y mostramos esa información en tablas y en gráficos.
En esta sección, realizamos una consulta a la base de datos para recopilar información sobre las frases del usuario. Después de realizar una consulta, mostramos la información utilizando una tabla de Bootstrap. También aprendemos a eliminar una entrada de nuestra base de datos.
A continuación, se encuentran los enlaces al video de YouTube y a la cuenta de GitHub para esta sección:
Realizamos una consulta a la base de datos introduciendo los siguientes filtros:
sentences = Sentence.query.filter_by(author=current_user). \
filter(Sentence.objective == objective).\
filter(Sentence.source != source).\
order_by(Sentence.date.desc()).all()
Utilizando una tabla de Bootstrap, mostramos los datos que obtuvimos en nuestra consulta. El enlace a las tablas de Bootstrap se encuentra a continuación:
Debemos introducir los siguientes cambios en el archivo your_sentences.html.
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Usuario</th>
<th scope="col">Fecha</th>
<th scope="col">Frase Incorrecta</th>
<th scope="col">...</th>
<th scope="col">Eliminar</th>
</tr>
</thead>
<tbody>
{% for sentence in entries %}
<tr>
<th scope="row">{{ current_user.username }}</th>
<td>{{ sentence.date.strftime("%m-%d-%Y") }}</td>
<td>{{ sentence.kms }}</td>
<td>{{ ...}}</td>
<td><a href="{{ url_for('light_talk_app.delete_emission',
sentence_id = sentence.id) }}"
class="btn btn-outline-danger btn-sm">Eliminar</a></td>
</tr>
{% endfor %}
</tbody>
</table>
Podemos estar interesados en permitir al usuario borrar una entrada de la base de datos. Para hacerlo, necesitamos introducir un enlace en la tabla y una nueva ruta para eliminar la entrada. El enlace en la tabla está en el código anterior. También muestro ese código en las siguientes líneas:
Debemos introducir los siguientes cambios en el archivo your_sentences.html.
<td><a href="{{ url_for('light_talk_app.delete_sentence',
sentence_id = sentence.id) }}"
class="btn btn-outline-danger btn-sm">Eliminar</a>
</td>
En el paquete light_talk_app, en el archivo routes.py, necesitamos introducir una nueva ruta para eliminar una entrada de la base de datos. Procedemos en cuatro pasos:
@light_talk_app.route('/light_talk_app/elimina_frase/<int:sentence_id>')
def delete_sentence(sentence_id):
sentence = Sentence.query.get_or_404(int(sentence_id))
db.session.delete(sentence)
db.session.commit()
flash("Frase eliminada", "success")
return redirect(url_for('light_talk_app.your_sentences'))
Los enlaces al video de YouTube y a la cuenta de GitHub para esta sección están a continuación:
Toda la información en esta sección ha sido tomada del siguiente enlace:
Para pasar la información necesaria para hacer los gráficos necesitamos hacer una consulta en nuestra base de datos, y luego pasar esa información desde el servidor al navegador.
Para eso introducimos dos cambios en las rutas del paquete light_talk_app.
La información con los dos pasos está en el panel de la derecha.
incorrect = Sentence.query.filter_by(author=current_user). \
filter(Sentence.result_num == 0).\
filter(Sentence.objective != objective).\
filter(Sentence.source != source).\
order_by(Sentence.date.desc()).count()
correct = Sentence.query.filter_by(author=current_user). \
filter(Sentence.result_num == 1).\
filter(Sentence.objective != objective).\
filter(Sentence.source != source).\
order_by(Sentence.date.desc()).count()
return render_template('light_talk_app/your_sentences.html',
title='select your sentences', form=form,
sentences=sentences, correct=correct, incorrect=incorrect)
Una vez que tenemos la información en el navegador, podemos comenzar a graficarla utilizando Chart.js:
Para usar Chart.js, procedemos en tres pasos.
<section class="section_light_talk_app_new_entry_main">
<div class="container">
<div class="box">
<canvas id="correct_vs_incorrect""></canvas>
</div>
</div>
</section>
{% block javascript %}
<script>
data...
chart...
</script>
{% endblock %}
Una vez que creamos un objeto JavaScript, podemos acceder a él desde la consola en el terminal del navegador. Podemos escribir el siguiente código (console.log(emission_transport_data)) y acceder a información muy útil.
En este reto semanal, hacemos consultas en nuestra base de datos, y mostramos esa información en tablas y en gráficos.