Consultas y tablas

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.

Algunos enlaces útiles

A continuación, se encuentran los enlaces al video de YouTube y a la cuenta de GitHub para esta sección:

Consulta

Realizamos una consulta a la base de datos introduciendo los siguientes filtros:

  1. Filtramos por autor.

  2. Filtramos las frases según el objetivo.

  3. iltramos las frases según la fuente.

  4. Ordenamos los datos en orden descendente según la fecha.

Paquete light_talk_app, archivo routes.py

        sentences = Sentence.query.filter_by(author=current_user). \
        filter(Sentence.objective == objective).\
        filter(Sentence.source != source).\
        order_by(Sentence.date.desc()).all()
    

Tabla

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>                  
                

Eliminar una frase en la base de datos

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:

  1. Realizamos una consulta en la base de datos para encontrar la entrada. Si la entrada no está en la base de datos, proporcionamos un mensaje 404.

  2. Utilizando el método delete, eliminamos la entrada.

  3. Utilizando el método commit, confirmamos los cambios.

  4. Mostramos un mensaje y redirigimos al usuario al archivo your_sentences.html.

Paquete light_talk_app, archivo routes.py

    @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'))
    

Chart.js

Algunos enlaces útiles

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:

Consulta y transferencia de información entre el servidor y el navegador

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.

Paquete light_talk_app, archivo routes.py, función your_sentences:

    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)
            

Información en el navegador y Chart.js

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.
  1. En el archivo layout.html, debemos introducir: <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    Es importante notar que introduzco la versión 2.8.0. Para los gráficos que estoy introduciendo en este capítulo, se requiere esa versión. Sin embargo, para otros gráficos, no necesitas esa versión.

  2. En el archivo your_sentences.html, definimos el lienzo (canvas) para el gráfico:
    
    <section class="section_light_talk_app_new_entry_main">
        <div class="container">
            <div class="box">
                <canvas id="correct_vs_incorrect""></canvas>
            </div>
        </div>
    </section>                                
                            
  3. En el archivo your_sentences.html, definimos el script, definimos un objeto JavaScript, y creamos un gráfico.
    
    {% block javascript %}
        <script>
        data...
        chart...
        </script>
    {% endblock %}                               
                            

Acceso a la información pasada desde el servidor usando la consola del navegador

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.

Reto Semanal

En este reto semanal, hacemos consultas en nuestra base de datos, y mostramos esa información en tablas y en gráficos.