Membuat Paginasi di Flask Dengan Database MySQL

Setelah kita berhasil membuat website dinamis yang menggabungkan Flask dan MySQL, adakalanya kita butuh untuk membatasi data yang ditampilkan di web. Hal ini biasanya terjadi seiring berjalannya waktu yang mengakibatkan data kita membengkak.

Bayangkan, jika kita harus mengambil data sebanyak 100 ribu atau bahkan 1 juta record dalam sekali ambil. Hal ini akan berdampak pada performa website. Untuk itu kita perlu membatasi jumlah data yang diambil dalam 1 waktu. Disinilah kita perlu membuat paginasi. Pada dasarnya paginasi akan membatasi data yang diambil dari database. Pembatasan ini menggunakan SQL limit.

Pada Flask, kita bisa menggunakan library yang sudah ada seperti flask-pagination atau membuat paginasi sendiri. Di artikel ini, kita akan membahas bagaimana membuat paginasi sendiri di Flask.

Langkah2 membuat paginasi di Flask

Melanjutkan aplikasi blog yang sudah dibahas sebelumnya. Kita akan membuat paginasi untuk membatasi artikel yang ditampilkan. Ada beberapa langkah yang perlu kita lakukan, antara lain:

• Query keseluruhan data untuk mengambil jumlah record
• Tentukan jumlah data per halaman
• Tentukan jumlah halaman paginasi
• Query data dengan limit yang sudah ditentukan
• Tampilkan data

Karena kita menggunakan MySQL, sintaks yang digunakan adalah select * from <nama_table> order by nama_field desc limit <start>, <jml_data>.

Implementasi kode dari algoritma diatas sebagai berikut:

Query keseluruhan data

Misal kita akan mengambil data dari table posts, tuliskan script berikut.

cursor = conn.cursor()
query = ("SELECT * FROM ci_posts")
cursor.execute(query)

Tentukan jumlah data per halaman

Untuk menentukan jumlah data yang akan ditampilkan, kita perlu membuat variable misal per_page dan tentukan berapa nilainya.

per_page = 10

Tentukan jumlah halaman paginasi

Jumlah halaman paginasi bisa kita ambil dari pembagian antara jumlah keseluruhan data dengan jumlah data yang akan ditampilkan per halaman.

jml = cursor.rowcount
jml_page = int(math.ceil(jml/per_page))

Query data dengan limit start dan jumlah record

Karena menggunakan MySQL, kita perlu menentukan record awal pengambilan data dan berapa jumlah data yang akan diambil. Untuk DBMS yang lain seperti PostgreSQL atau Oracle, kita harus menyesuaikan.

start = (i * per_page) - (per_page)
cursor2 = conn.cursor()
query2 = (query + "order by a.post_date desc limit %s, %s")
cursor2.execute(query2, (start, per_page))
result2 = cursor2.fetchall()
result_set = convert_to_dict(result2, cursor)

Perlu diketahui, variabel i diambil dari parameter page yang dikiriman dari url yang menunjukkan halaman berapa yang sedang diakses.

Tampilkan data

Untuk menampilkan data, kita bisa menggunakan komponen paginasi bootstrap. Pada artikel ini, saya menggunakan komponen paginasi bootstrap 4. Tambahkan komponen paginasi di dalam template.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    {% for jml_page in range(jml_page) %}
            {% if page == (jml_page+1)|string %}
              <li class="page-item active">
            {% else %}
              <li class="page-item">
            {% endif %}
                <a class="page-link" href="{{ url_for('index', i=(jml_page+1)) }}">{{ (jml_page+1) }}</a>
            </li>
          {% endfor %}
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Kode program untuk membuat paginasi di Flask

Berikut tampilan keseluruhan kode untuk membuat paginasi di Flask (app.py).

@app.route('/page/<int:i>')
def index(i=1):
    start = (i * per_page) - (per_page)
    cursor = conn.cursor()
    query = ("SELECT * FROM ci_posts")
    cursor.execute(query)
    jml = cursor.rowcount
    jml_page = int(math.ceil(jml/per_page))

    cursor2 = conn.cursor()
    query2 = (query + "order by a.post_date desc limit %s, %s")
    cursor2.execute(query2, (start, per_page))
    result2 = cursor2.fetchall()
    result_set = convert_to_dict(result2, cursor)
    
    return render_template('index.html', data=result_set, jml_page=jml_page)

Berikut kode program untuk template paginasi (index.html). Tambahkan setelah tampilan utama.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    {% for jml_page in range(jml_page) %}
            {% if page == (jml_page+1)|string %}
              <li class="page-item active">
            {% else %}
              <li class="page-item">
            {% endif %}
                <a class="page-link" href="{{ url_for('index', i=(jml_page+1)) }}">{{ (jml_page+1) }}</a>
            </li>
          {% endfor %}
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Kesimpulan

Pembuatan paginasi di halaman web perlu dilakukan untuk membatasi jumlah record yang diambil. Banyaknya data tanpa paginasi akan berpengaruh pada performa website kita. Untuk membuat paginasi dengan Flask dan MySQL, anda bisa menerapkan langkah2 yang sudah dibahas di artikel ini.