Membuat Tabel Data dari MySQL Menggunakan Python Flask

5 min readJan 15, 2021

Assalamu’alaikum Wr. Wb.

Hai teman-teman! Apa Kabar Semua?

Pada kesempatan kali ini Kita akan mencoba untuk menampilkan data dari database MySQL dengan menggunakan Flask.

Pertama aktifkan terlebih dahulu MySQL nya, jika belum memilikinya bisa mengunduh dan menginstallnya terlebih dahulu. Disini saya menggunakan XAMPP

Untuk mengaktifkan MySQL pada XAMPP yaitu klik shell lalu gunakan perintah berikut

mysql -u root

jika berhasil diaktifkan maka MySQL siap digunakan

Setelah itu kita membuat database baru kita misalkan membuat database mahasiswa dengan perintah berikut

create database mahasiswa;
use mahasiswa;

maka jika berhasil akan keluar tempilan seperti berikut

setelah itu kita akan membuat tabel baru, kita beri nama biodata dengan menggunakan perintah seperti berikut

create table biodata (nama varchar(30), nim int(8) not null, asal varchar (15), tlp int(12) not null);
desc biodata;

maka jika berhasil akan keluar seperti gambar berikut

dari hasil diatas diketahui bahwa tabel tersebut terdiri dari 4 variabel yaitu nama, nim, asal, dan tlp

Selanjutnya kita buat terlebih dulu folder yang nantinya digunakan untuk menyimpan beberapa hasil coding yaitu pada folder local disk C buat folder dengan nama flaskmysql, dan buat folder lagi dengan nama Mahasiswa

Kemudian copy coding berikut

from flask import Flask, render_template, request
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'] = 'mahasiswa'
mysql = MySQL(app)
@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == "POST":
        details = request.form
        Nama = details['name']
        Nim = details['id']
        Asal = details['stay']
        Tlp = details['tlpn']
        cur = mysql.connection.cursor()
        cur.execute("INSERT INTO biodata (nama, nim, asal, tlp) VALUES (%s, %s, %s, %s)", (Nama, Nim, Asal, Tlp))
        mysql.connection.commit()
        cur.close()
        return 'success'
    return render_template('index.html')
@app.route('/mahasiswa')
def mahasiswa():
 cur = mysql.connection.cursor()
 cur.execute('''SELECT nama, nim, asal, tlp FROM biodata''')
 rv = cur.fetchall()
 return render_template("indexmahasiswa.html",value=rv)
if __name__ == '__main__':
    app.run()

lalu simpan coding diatas dengan nama “appmahasiswa.py” dan simpan pada folder yang tadi dibuat

lalu copy lagi coding berikut

<HTML>
<BODY bgcolor="cyan">
<form method="POST" action="">
    <center>
    <H1> BIODATA </H1> <br>
 Nama <input type = "varchar" name = "name" /> <br>
 NIM <input type = "integer" name = "id" /> <br>
    Asal <input type = "varchar" name= "stay" /> <br>
    No Tlpn <input type = "integer" name= "tlpn" /> <br>
    <input type = "submit">
    </center>
</form>
</BODY>
</HTML>

kemudian simpan dengan nama “index.html” lalu masukkan kedalam folder baru dengan nama “templates” (masih didalam folder Mahasiswa), jadi format lengkapnya “c:\flaskmysql\Mahasiswa\templates”
(silahkan teman-teman bisa masukkan ke dalam format folder masing-masing)

selanjutnya copy coding berikut

<HTML>
<BODY>
<table>
 <thead>
 <tr>
 <th>nama</th>
 <th>nim</th>
 <th>asal</th>
 <th>tlp</th>
 </tr>
 </thead>
 <tbody>
 {% for row in value %}
 <tr>
 <td>{{row[0]}}</td>
 <td>{{row[1]}}</td>
 <td>{{row[2]}}</td>
 <td>{{row[3]}}</td>
 </tr>
 {% endfor %}
 </tbody>
</table>
</BODY>

kemudian masukkan ke dalam folder templates seperti tadi

Untuk selanjutnya kita membuka command prompt tampilan awalnya seperti berikut

berdasarkan gambar diatas, dapat kita ketahui bahwa command prompt akan memproses pada folder “c:\Users\Lenovo” sedangkan tadi kita menyimpan folder dengan letak “c:\flaskmysql\Mahasiswa” maka kita hapus folder “Users\Lenovo” pada perintah diatas dengan menggunakan

c:\Users\LENOVO>cd..
c:\Users\cd..

jika dimasukkan kedalam command prompt seperti berikut

jadi fungsi ‘cd’ yaitu untuk menambahkan atau mengurangi folder yang nantinya akan dideteksi, untuk menambahkan “flaskmysql\Mahasiswa” seperti berikut

c:\cd flaskmysql
c:\flaskmysql\cd Mahasiswa

maka tampilan dalam command prompt seperti berikut

kemudian kita akan menggunakan “appmahasiswa.py” yang tadi telah kita copy coding-nya

C:\flaskmysql\Mahasiswa>python appmahasiswa.py

maka akan nampak hasil seperti berikut

kemudian pada browser kita ketikkan alamat berikut “http://127.0.0.1:5000"

kemudian kita isi

lalu klik submit maka akan keluar hasil seperti berikut

kemudian dapat kita cek dalam “http://localhost/phpmyadmin/” untuk mengetahui masuk atau tidaknya data

diketahui dari gambar diatas bahwa data yang tadi telah kita input telah berhasil, tetapi terdapat sedikit kesalahan dimana nomer telpon tidak bisa terisi sesuai apa yang kita isi terdapat sedikit error yang saya kurang mengerti dimana kesalahannya
(kalau ada yang bisa bantu silahkan beri saya saran di komentar)

lalu kita juga dapat melihat pada MySQL nya dengan menggunakan perintah