Membuat Aplikasi Flask Dengan Database MySQL

Setelah kita berhasil membuat aplikasi Flask pada artikel dasar pemrograman flask dengan pycharm, sekarang kita akan mencoba mengkoneksikan aplikasi Flask dengan database Mysql.

Perlu diketahui, sebuah aplikasi tidak akan mengalami perubahan jika tidak terkoneksi dengan database. Jika kita ingin membuat perubahan, kita perlu melakukan koding ulang. Hal ini akan sulit untuk dilakukan apabila orang yang menghandle aplikasi bukan orang IT. Oleh karena itu, penggunaan DBMS menjadi sangat diperlukan.

DBMS singkatan dari DataBase Management System yaitu sistem atau software yang dirancang khusus untuk mengelola data dan menjalankan operasi terhadap data yang diminta oleh banyak pengguna. Salah satu DBMS yang ringan, gratis dan mudah untuk digunakan adalah MySQL.

MySQL sangat populer digunakan untuk keperluan website mulai dari pemakaian pribadi hingga level perusahaan. Kompatibilitas MySQL dengan berbagai bahasa pemrograman menjadikannya banyak digunakan oleh developer website.

Pada artikel ini, kita akan membuat aplikasi web yang membaca data artikel dari MySQL menggunakan Flask framework.

Membuat database MySQL

Hal pertama yang kita lakukan adalah membuat database MySQL untuk menyimpan data yang akan dimunculkan. Perlu diketahui, Saya menggunakan HeidiSQL untuk memudahkan proses membuat database. Anda bisa menggunakan tools yang lain seperti PHPMyadmin, SQLyog, Navicat atau bahkan command prompt bagi yang suka mengetik :).

Berikut langkah2 yang perlu dilakukan:

• Connect ke server dengan HeidiSQL
• Klik kanan nama server > Create New > Database
• Isikan nama database. misal db_blog
• Setelah database terbuat, klik kanan nama database > Create New > Table
• Isikan nama table. misal table_posts
• Buat struktur table nya seperti berikut.

• Insert data artikel ke table_posts

Menghubungkan Flask ke Database MySQL

Setelah database terbuat, langkah berikutnya adalah mengkoneksikan aplikasi Flask ke database. Ada banyak cara untuk menghubungkan Flask dengan MySQL. Kita bisa menggunakan koneksi native dengan library flask-mysql atau menggunakan ORM (Object Relational Mapping) dengan library flask-sqlalchemy.

Pada artikel ini kita menggunakan flask-mysql yang terkoneksi langsung dengan database MySQL. Berikut langkah2 yang perlu dilakukan.

• Buat aplikasi Flask dengan Pycharm
• Install library flask-mysql

$ pip install flask-mysql

• Buat file config env.py untuk menyimpan konfigurasi mysql. Pemisahan ini penting dilakukan agar ketika file app.py diupload ke server, kita tidak perlu menyesuaikan setting pada database.

db_user = '<user>'
db_password = '<password>'
db_name = '<database>'
db_host = '<host>'

• tambahkan kode berikut di file app.py untuk melakukan koneksi ke Mysql

from flaskext.mysql import MySQL
from env import *

mysql = MySQL()
app.config['MYSQL_DATABASE_USER'] = db_user
app.config['MYSQL_DATABASE_PASSWORD'] = db_password
app.config['MYSQL_DATABASE_DB'] = db_name
app.config['MYSQL_DATABASE_HOST'] = db_host
mysql.init_app(app)
conn = mysql.connect()

@app.route('/')
def hello_world():
    if conn:
        print('koneksi berhasil')
    else:
        print('koneksi gagal')
    return render_template('index.html')

• jalankan flask dengan perintah flask run

Mengambil data dari database dan menampilkannya di browser

Setelah berhasil melakukan koneksi ke MySQL, langkah berikutnya adalah mengambil data (query) dari database menggunakan SQL (Structured Query Language). Pengambilan data dilakukan dengan menjalankan perintah select sesuai kebutuhan.

Pada halaman home, kita akan mengambil data judul dan content dari artikel yang sudah dibuat. Data tersebut ditampilkan di halaman web dengan cara menjadikannya sebagai parameter pada saat render html.

Berikut kode yang digunakan untuk mengambil data artikel dan merendernya di halaman web.

@app.route('/')
def hello_world():
    cursor = conn.cursor()
    query = ("SELECT post_title, post_content FROM ci_posts");   
    cursor.execute(query)
    result = cursor.fetchall()
    return render_template('index.html', data=result)

Agar muncul sebagai excerpt, kita perlu memodifikasi file template index.html sebagai berikut.

<div class="row">
{% for article in data -%}
  <div class="col-md-4">
    <div class="card mb-4 box-shadow">
      <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
      <div class="card-body">
          <h3>{{ article[0] }}</h3>
        <p class="card-text">{{ article[1]|safe|truncate(300, true) }}</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="btn-group">
            <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
            <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
          </div>
          <small class="text-muted">9 mins</small>
        </div>
      </div>
    </div>
  </div>
{% endfor %}
</div>

Perhatikan sintaks yang di bold diatas. Cursor di python adalah tuple. Cara memanggilnya seperti kita melakukan pemanggilan array. Field pertama dibinding sebagai field[0] dan begitu selanjutnya.

Agar tuple bisa diakses menggunakan nama field, kita perlu menambahkan sebuah fungsi untuk mengkonversinya ke bentuk dictionary. Berikut fungsi yang dibuat.

def convert_to_dict(result, cursor):
    insertObject = []
    columnNames = [column[0] for column in cursor.description]
    for record in result:
        insertObject.append(dict(zip(columnNames, record)))
    return insertObject

Dibagian app.py tambahkan variabel result_set untuk menerima hasil result dan mengkonversinya ke bentuk dictionary.

result_set = convert_to_dict(result, cursor)

Selanjutnya, di template kita harus mengubah cara pemanggilan data dengan menggunakan nama field dan bukan indexnya. Misal untuk post_title dari article[0] menjadi article[‘post_title’].

Memformat tanggal dengan custom filter

Di dalam aplikasi, adakalanya kita ingin melakukan format tanggal sesuai keinginan kita. Pada Jinja kita bisa menambahkan hal itu menggunakan konsep filter. Misalnya kita ingin menampilkan tanggal artikel ditulis dengan format tertentu, kita bisa membuat filter sebagai dekorator dengan nama formatdatetime di app.py seperti berikut.

@app.template_filter('formatdatetime')
def format_datetime(value, format="%d %b %Y %I:%M %p"):    
    if value is None:
        return ""
    return value.strftime(format)

Untuk menggunakan filter tersebut, tambahkan pipeline pada field yang bertipe datetime di Jinja.

<small class="text-muted">{{ article['post_date'] | formatdatetime }}</small>

Kesimpulan

Pembuatan web dengan flask tidak hanya statis, tapi bisa juga dinamis dengan mengkoneksikannya dengan DBMS seperti MySQL. Kita bisa menggunakan SQL Native atau ORM untuk melakukan koneksi.

Ada 2 langkah yang harus dilakukan agar web kita bisa memunculkan data dari database. Pertama, lakukan koneksi dari Flask ke MySQL, selanjutnya lakukan query data dan munculkan pada template sesuai kebutuhan.