Python Flask-mysqldb Simple CRUD

March 31, 2018
Membuat Create, Read, Update dan Delete (CRUD) menggunakan Flask Framework sangat mudah. Ada banyak library atau tools yang dapat digunakan mulai dari flask-mysqldb sampai flask-sqlalchemy. Kali ini saya akan berbagi tutorial CRUD menggunakan Flask-MYSQLdb.

Jika kamu baru belajar Python Flask kamu dapat mencoba tutorial dibawah ini:

7 Alasan Kenapa Kamu Harus Belajar Python
Cara Install Python dan Setting Environment Variables Pada Windows
Flask Tutorial Templating Menggunakan Bootstrap

Membuat database dan tabel baru




CREATE DATABASE flaskdb;
CREATE TABLE computer ( id smallint unsigned not null auto_increment, data varchar(20) not null, primary key (id) );


Install flask-mysqldb

Buka command prompt kemudian ketik command dibawah ini untuk menginstall flask-mysqldb

$ pip install flask-mysqldb

Dokumentasi resmi silahkan lihat disini


Konfigurasi koneksi mysql di file app.py

File app.py adalah entry file yang akan dijalankan, didalamnya diletakkan konfigurasi mysql


from flask import Flask, render_template, request, url_for, redirect
from flask_mysqldb import MySQL

app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'flaskdb'
mysql = MySQL(app)

@app.route('/')
def home():
    cur = mysql.connection.cursor()
    cur.execute("SELECT * FROM computer")
    rv = cur.fetchall()
    cur.close()
    return render_template('home.html', computers=rv)

if __name__ == '__main__':
    app.run(debug=True)


Penjelasan Kode Program
app.config['MYSQL_HOST'] = 'localhost'
MYSQL_HOST adalah alamat ip/domain mysql, jika kamu menggunakan local database (xampp/wamp/lampp) silahkan menggunakan localhost atau 127.0.0.1

app.config['MYSQL_USER'] = 'root'
MYSQL_USER adalah user mysql untuk mengakses database, jika kamu menggunakan default setting dari xampp maka mysq_user nya adalah root

app.config['MYSQL_PASSWORD'] = ''
MYSQL_PASSWORD adalah password dari user untuk mengakses database, jika kamu menggunakan default setting dari xampp maka mysq_passwordnya tidak perlu diisi

app.config['MYSQL_DB'] = 'flaskdb'
MYSQL_DB adalah nama database yang sebelumnya sudah dibuat

cur = mysql.connection.cursor()
Deklarisi variable untuk koneksesi ke mysql

cur.execute("SELECT * FROM computer")
Perintah untuk menjalankan query pada code ini query yang dijalankan adalah "SELECT * FROM computer"

rv = cur.fetchall()
Perintah untuk mengambil semua data dari query yang sebelumnya dijalankan, data tersebut disimpan kedalam variabel rv

cur.close()
Menutup koneksi mysql setelah data didapatkan

return render_template('home.html', computers=rv)
Mengarahkan ke halaman home.html dipadukan dengan data rv (data query), rv dideklarasikan ulang sebagai variabel computer


Flask-mysqldb: Menampilkan Data Query Pada HTML

Data yang dipadukan ke halaman home.html ditampilkan dengan menggunakan looping for
{% extends 'layout.html' %}

{% block title %} Home {% endblock %}

{% block body %}
<div class="container">

<div class="starter-template">
<h1>Tampilkan Data</h1>
<table class="table table-striped">
<thead>
<tr>
<td>No</td>
<td>Nama</td>
</tr>
</thead>
<tbody>
{% for row in computers %}
<tr>
<td>{{ row.0 }}</td>
<td>{{ row.1 }}</td>
</tr>
{% else %}
<tr>
<td colspan="2">Unbelievable. No entries here so far</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>

</div>
<!-- /.container -->
{% endblock %}


Penjelasan kode program
Data dilooping menggunakan for

{% for row in computers %}
Melooping setiap data (index) dari computers ke variabel row

{{ row.0 }}
Menampilkan index ke-0 dari row dimana pada database index ke-0 adalah id (primary key)

{{ row.1 }}
Menampilkan index ke-1 dari row dimana pada database index ke-1 adalah data


Output Read Data



Flask-mysqldb: Menambahkan Data (Insert Data) ke Database

Form insert data  akan ditampilkan pada modal (pop-up form). Langkah pertama adalah membuat button Tambah Data pada home.html tepat diatas tag tabel

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Tambah Data</button>

Menambahkan modal dialog diatas endblock body pada home.html
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Tambah Data</h4>
</div>
<div class="modal-body">
<form action="{{ url_for('simpan') }}" method="POST">
<div class="form-group">
<label>Nama:</label>
<input type="text" class="form-control" name="nama">
</div>
<div class="form-group">
<button class="btn btn-primary" type="sbumit">Simpan</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


<!-- /.container -->
{% endblock %}

Membuat route simpan pada app.py




@app.route('/simpan',methods=["POST"])
def simpan():
    nama = request.form['nama']
    cur = mysql.connection.cursor()
    cur.execute("INSERT INTO computer (data) VALUES (%s)",(nama,))
    mysql.connection.commit()
    return redirect(url_for('home'))


Penjelasan kode program
nama = request.form['nama']
Mendapatkan data dari form input dengan name='nama' yang disimpan kedalam variabel nama

    cur.execute("INSERT INTO computer (data) VALUES (%s)",(nama,))
Mengeksekusi query insert dengan menyisipkan value dari nama kedalam %s

    mysql.connection.commit()
Menerapkan perubahan data pada mysql (setiap perubahan data insert/update harus di commit)


Tampilan form insert data



Flask-mysqlsb: Update Data

Langkah pertama adalah menambahkan kolom aksi pada tabel data kemudian pada looping ditambahkan modal edit

hasil akhir home.html
{% extends 'layout.html' %}

{% block title %} Home {% endblock %}

{% block body %}
<div class="container">

<div class="starter-template">
<h1>Tampilkan Data</h1>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Tambah Data</button>
<table class="table table-striped">
<thead>
<tr>
<td>No</td>
<td>Nama</td>
<td>Aksi</td>
</tr>
</thead>
<tbody>
{% for row in computers %}
<tr>
<td>{{ row.0 }}</td>
<td>{{ row.1 }}</td>
<td>
<a href="#!" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#modalEdit{{ row.0 }}">Edit</a>
<a href="/hapus/{{ row.0 }}" class="btn btn-danger btn-xs" onclick="return confirm('Yakin ingin hapus?')">Hapus</a>
</td>
</tr>

<!-- Modal -->
<div id="modalEdit{{ row.0 }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Edit Data</h4>
</div>
<div class="modal-body">
<form action="{{ url_for('update') }}" method="POST">
<div class="form-group">
<label>Nama:</label>
<input type="hidden" name="id" value="{{ row.0 }}">
<input type="text" class="form-control" name="nama" value="{{ row.1 }}">
</div>
<div class="form-group">
<button class="btn btn-warning" type="submit">Update</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

{% else %}
<tr>
<td colspan="3">Unbelievable. No entries here so far</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>

</div>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Tambah Data</h4>
</div>
<div class="modal-body">
<form action="{{ url_for('simpan') }}" method="POST">
<div class="form-group">
<label>Nama:</label>
<input type="text" class="form-control" name="nama">
</div>
<div class="form-group">
<button class="btn btn-primary" type="sbumit">Simpan</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


<!-- /.container -->
{% endblock %}


Penjelasan kode program

<a href="#!" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#modalEdit{{ row.0 }}">Edit</a>
Membuat tombol ukuran kecil (btn-xs) berwarna orange (btn-warning) yang akan men-trigger modal #modalEdit[id]

<a href="/hapus/{{ row.0 }}" class="btn btn-danger btn-xs" onclick="return confirm('Yakin ingin hapus?')">Hapus</a>
Membuat tombol ukuran kecil (btn-xs) berwarna merah (btn-danger), ketika tombol ini diklik akan menampilkan pop-up confirm javascript, jika kita konfirmasi dengan klik tombol ok maka akan diarahkan ke url "/hapus/{id}"

<input type="hidden" name="id" value="{{ row.0 }}">
<input type="text" class="form-control" name="nama" value="{{ row.1 }}">
Untuk mengupdate data pada database kita memerlukan id (primary key). Pada modal edit ditambahkan input dengan tipe hidden, input tipe ini tidak akan tampil pada form update namun datanya dapat kita ambil dengan tag value. Pada Input name="nama" kita tambahkan value="{{ row.1 }}" dimana pada input ini akan tampil nilai index ke-1 (data) dari database

Membuat route update pada app.py
@app.route('/update', methods=["POST"])
def update():
    id_data = request.form['id']
    nama = request.form['nama']
    cur = mysql.connection.cursor()
    cur.execute("UPDATE computer SET data=%s WHERE id=%s", (nama,id_data,))
    mysql.connection.commit()
    return redirect(url_for('home'))

Ketika selesai mengeksekusi query selajutnya diarahkan ke def home menggunakan perintah return redirect (url_for('home'))


Flask-mysqldb: Hapus Data

Membuat route hapus pada app.py
@app.route('/hapus/<string:id_data>', methods=["GET"])
def hapus(id_data):
    cur = mysql.connection.cursor()
    cur.execute("DELETE FROM computer WHERE id=%s", (id_data,))
    mysql.connection.commit()
    return redirect(url_for('home'))


Hasil akhir app.py




from flask import Flask, render_template, request, url_for, redirect
from flask_mysqldb import MySQL

app = Flask(__name__)
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'flaskdb'
mysql = MySQL(app)

@app.route('/')
def home():
    cur = mysql.connection.cursor()
    cur.execute("SELECT * FROM computer")
    rv = cur.fetchall()
    cur.close()
    return render_template('home.html', computers=rv)

@app.route('/simpan',methods=["POST"])
def simpan():
    nama = request.form['nama']
    cur = mysql.connection.cursor()
    cur.execute("INSERT INTO computer (data) VALUES (%s)",(nama,))
    mysql.connection.commit()
    return redirect(url_for('home'))

@app.route('/update', methods=["POST"])
def update():
    id_data = request.form['id']
    nama = request.form['nama']
    cur = mysql.connection.cursor()
    cur.execute("UPDATE computer SET data=%s WHERE id=%s", (nama,id_data,))
    mysql.connection.commit()
    return redirect(url_for('home'))

@app.route('/hapus/<string:id_data>', methods=["GET"])
def hapus(id_data):
    cur = mysql.connection.cursor()
    cur.execute("DELETE FROM computer WHERE id=%s", (id_data,))
    mysql.connection.commit()
    return redirect(url_for('home'))

if __name__ == '__main__':
    app.run(debug=True)

Flask-mysqldb CRUD


Video Tutorial Flask-Mysqldb CRUD

5 comments:

  1. mohon maaf,kenapa ketika saya mengikuti tutorial anda pada bagian modal tambah data,modal tidak muncul?
    dan ketika saya buka console,muncul error yang bertuliskan Uncaught Error: Bootstrap's JavaScript requires jQuery
    mohon penjelasannya mas
    maaf baru belajar tentang ini,

    ReplyDelete
  2. Enjoyed reading the article above, really explains everything in detail, the article is very interesting and effective. Thank you and good luck for the upcoming articles Python Programming Training

    ReplyDelete

Powered by Blogger.