Add pagination to blog posts

Implemented pagination in the blog to display 3 posts per page.
This change allows users to navigate through posts using a
pagination control at the bottom of the page. The pagination
follows the pattern: << < 1 2 3 ... n > >>, enabling navigation
to the first, previous, specific, next, or last pages. This
improves user experience by preventing long scrolls on pages
with many posts.

Issue ID: FLAS-33

flaskr/blog.py

@@ -7,6 +7,7 @@ from flask import request
 from flask import url_for
 from werkzeug.exceptions import abort
 import markdown
+import math
 
 from .auth import login_required
 from .db import get_db
@@ -18,16 +19,24 @@ bp = Blueprint("blog", __name__)
 def index():
     """Show all the posts, most recent first."""
     db = get_db()
+    page = request.args.get('page', 1, type=int)
+    per_page = 3
+    total_posts = db.execute("SELECT COUNT(*) FROM post").fetchone()[0]
+    total_pages = math.ceil(total_posts / per_page)
+
     posts = db.execute(
         "SELECT p.id, title, body, created, author_id, username"
         " FROM post p JOIN user u ON p.author_id = u.id"
         " ORDER BY created DESC"
+        " LIMIT ? OFFSET ?",
+        (per_page, (page - 1) * per_page)
     ).fetchall()
+
     # Convert markdown to HTML for each post body
     posts = [
         {**post, 'body': markdown.markdown(post['body'])} for post in posts
     ]
-    return render_template("blog/index.html", posts=posts)
+    return render_template("blog/index.html", posts=posts, page=page, total_pages=total_pages)
 
 
 def get_post(id, check_author=True):

flaskr/templates/blog/index.html

@@ -25,5 +25,24 @@
       <hr>
     {% endif %}
   {% endfor %}
+
+  <div class="pagination">
+    {% if page > 1 %}
+      <a href="{{ url_for('blog.index', page=1) }}"><<</a>
+      <a href="{{ url_for('blog.index', page=page-1) }}"><</a>
+    {% endif %}
+    {% for p in range(1, total_pages + 1) %}
+      {% if p == page %}
+        <strong>{{ p }}</strong>
+      {% else %}
+        <a href="{{ url_for('blog.index', page=p) }}">{{ p }}</a>
+      {% endif %}
+    {% endfor %}
+    {% if page < total_pages %}
+      <a href="{{ url_for('blog.index', page=page+1) }}">></a>
+      <a href="{{ url_for('blog.index', page=total_pages) }}">>></a>
+    {% endif %}
+  </div>
+
   <script src="{{ url_for('static', filename='collapse.js') }}"></script>
 {% endblock %}