Educational articles section

This should show a list of all the articles that you can then select to see more detailed articles

• Need to add a table to the database to store educational articles (refer back to your ERD diagram to see what data you need to store)
• You need to insert in some articles to test
• Then have a main page to display all articles as per your layout
• You need to have article detail page showing the full text and images of the article

First we need to update the menu to have an educational page:

nav>
        <ul>
            <li><a href="/">Home</a></li>

            <li><a href="/education">Educational Articles</a></li>

            {% if session.get('user_id') %}
                <li><a href="/booking">Booking</a></li>
                <li><a href="/my-bookings">My Bookings</a></li>
                <li><a href="/logout">Logout ({{ session['username'] }})</a></li>
            {% else %}
                <li><a href="/login">Login</a></li>
                <li><a href="/register">Register</a></li>
            {% endif %}
        </ul>
    </nav>

This is how I setup the article in the database:

      # Educational article table
    c.execute("""
    CREATE TABLE IF NOT EXISTS education(
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT NOT NULL,
        description TEXT NOT NULL,
        image_url TEXT NOT NULL
    )
    """)
    c.execute("INSERT INTO education (title, description, image_url) VALUES ('This is an article about tigers','Tigers are not only the largest cat species in the world, but they are also a keystone species integral to the continued maintenance of the food chain. For decades, researchers have been warning governments around the world about the endangered status of tigers and encouraging more stringent protection on habitats and against poaching. With fewer than four thousand tigers remaining around the world, down from an estimated one hundred thousand in 1990, conservationists have been studying the best ways to keep the species alive.','http://howtodoright.com/wp-content/uploads/2017/06/iStock_000000439936Large.jpg')")
    c.execute("INSERT INTO education (title, description, image_url) VALUES ('This is an article about tigers','Tigers are not only the largest cat species in the world, but they are also a keystone species integral to the continued maintenance of the food chain. For decades, researchers have been warning governments around the world about the endangered status of tigers and encouraging more stringent protection on habitats and against poaching. With fewer than four thousand tigers remaining around the world, down from an estimated one hundred thousand in 1990, conservationists have been studying the best ways to keep the species alive.','http://howtodoright.com/wp-content/uploads/2017/06/iStock_000000439936Large.jpg')")
    c.execute("INSERT INTO education (title, description, image_url) VALUES ('This is an article about tigers','Tigers are not only the largest cat species in the world, but they are also a keystone species integral to the continued maintenance of the food chain. For decades, researchers have been warning governments around the world about the endangered status of tigers and encouraging more stringent protection on habitats and against poaching. With fewer than four thousand tigers remaining around the world, down from an estimated one hundred thousand in 1990, conservationists have been studying the best ways to keep the species alive.','http://howtodoright.com/wp-content/uploads/2017/06/iStock_000000439936Large.jpg')")
    c.execute("INSERT INTO education (title, description, image_url) VALUES ('This is an article about tigers','Tigers are not only the largest cat species in the world, but they are also a keystone species integral to the continued maintenance of the food chain. For decades, researchers have been warning governments around the world about the endangered status of tigers and encouraging more stringent protection on habitats and against poaching. With fewer than four thousand tigers remaining around the world, down from an estimated one hundred thousand in 1990, conservationists have been studying the best ways to keep the species alive.','http://howtodoright.com/wp-content/uploads/2017/06/iStock_000000439936Large.jpg')")

Then I setup a route to retrieve all the articles and pass them to the educational page:

@app.route("/education", methods=["GET", "POST"])
def education():
    db = get_db()
    c = db.cursor()

    articles = c.execute("""
                        SELECT * FROM education 
                          """).fetchall()
    print(articles)
    return render_template("education.html",articles=articles)

The educational page loops through each article displaying the articles in rows and columns using some complex stylings from bootstrap, I had to include this in my base.html:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

This is complex layout code that needs investigating and explaining

{% extends "base.html" %}
{% block content %}
{% for article in articles %}
<div class="container mt-4">

    <div class="row">
        {% for article in articles[:2] %}
        <div class="col-md-6 mb-4">
            <div class="card p-3">
                <img src="{{ article[3] or 'https://via.placeholder.com/600x350' }}" class="card-img-top mb-3">
                <h5>{{ article[1] }}</h5>
                <p>{{ article[2] }}</p>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="row">
        {% for article in articles[2:] %}
        <div class="col-md-4 mb-4">
            <div class="card p-3">
                <img src="{{ article[3] or 'https://via.placeholder.com/400x250' }}" class="card-img-top mb-3">
                <h6>{{ article[1] }}</h6>
                <p>{{ article[2] }}</p>
            </div>
        </div>
        {% endfor %}
    </div>

</div>

{% endfor %}

{% endblock %}

Breakdown of Bootstrap Classes

In our design we showed the first two articles {% for article in articles[:2] %} in the top section that has 50% width col-md-6 for them, when the width is greater than 768px. It is responsive so when the screen width shrinks the page will lay itself out properly.

Get Icodewithben’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The rest of the rows for all articles from 2 to the end will show 3 per row as it uses col-md-4.

A dictionary of array of articles is pass through so each thing from the db is displayed like this {{ article[1] }}, this will get the title for example.

Final page looked like this: