Belajar Python Part 14: Membuat Aplikasi Python di Localhost

Pada seri Belajar Python Part 13, kita telah berhasil membuat aplikasi CRUD (Create, Read, Update, Delete) berbasis CLI (Command Line Interface). Meskipun aplikasi tersebut sudah dapat mengelola data dengan baik, pengguna masih harus menjalankannya melalui terminal sehingga kurang praktis untuk penggunaan sehari-hari.

Di Belajar Python Part 14 ini, kita akan melangkah ke tahap berikutnya dengan mengubah aplikasi tersebut menjadi aplikasi web yang dapat dijalankan di localhost. Untuk membangun aplikasi web tersebut, kita memerlukan sebuah framework yang mampu menghubungkan kode Python dengan halaman web. Salah satu framework yang paling populer dan mudah dipelajari adalah Flask.

Apa itu Flask?

Flask adalah micro web framework untuk Python. Kata micro bukan berarti Flask memiliki fitur terbatas, melainkan Flask dirancang agar intinya tetap sederhana dan mudah diperluas sesuai kebutuhan. Meskipun minimalis, Flask didukung oleh ekosistem ekstensi yang beragam serta fitur bawaan yang solid, seperti sistem routing URL yang mudah dan server lokal untuk proses debugging.

Karakteristiknya yang cepat dan hemat memori membuat Flask sangat ideal digunakan untuk mempelajari dasar pengembangan web, membangun berbagai aplikasi dengan cepat, hingga mengembangkan layanan REST API dan arsitektur microservices di skala industri.

Cara Kerja Aplikasi Web

Proses kerja aplikasi web dimulai ketika pengguna melakukan aksi di browser, seperti mengetik URL atau mengklik sebuah tombol, yang otomatis memicu pengiriman HTTP Request ke server (misalnya perintah GET /mahasiswa). Begitu permintaan ini sampai, server berbasis Flask akan menerima dan memprosesnya melalui fungsi khusus yang disebut handler atau view function.

Pada tahap inilah Flask menjalankan logika aplikasi, termasuk berkomunikasi dengan database untuk mengambil, mengubah, atau menyimpan data yang dibutuhkan sesuai dengan permintaan tersebut.

Setelah seluruh pemrosesan di sisi server selesai, Flask akan menyusun hasilnya ke dalam sebuah HTTP Response yang umumnya berisi dokumen HTML, CSS, atau data pendukung lainnya. Respons tersebut kemudian dikirimkan kembali ke browser melalui jaringan internet. Begitu menerimanya, browser akan langsung menerjemahkan (render) kode-kode mentah tersebut menjadi halaman visual yang utuh, interaktif, dan siap dipahami oleh pengguna.

Membuat Aplikasi Python di Localhost

Pada seri Belajar Python Part 14 ini, kita akan mulai membangun aplikasi Python yang dapat dijalankan di localhost. Sebelum mengikuti langkah-langkahnya, pastikan Anda telah menyiapkan beberapa kebutuhan berikut agar proses instalasi dan konfigurasi dapat berjalan dengan lancar.

Pastikan Python sudah terinstal di komputer.
Pastikan pip (Python Package Manager) sudah tersedia.
Siapkan Command Prompt (CMD) di Windows atau Terminal di Linux/macOS.
Siapkan folder proyek yang akan digunakan untuk menyimpan aplikasi Python.
Pindah ke folder proyek menggunakan perintah cd pada CMD atau Terminal.
Pastikan komputer terhubung ke internet, karena Flask akan diunduh melalui pip.

Setelah persiapan selesai, Anda bisa melanjutkan step berikut ini:

Step 1. Instalasi Flask

Pastikan Python sudah terinstall, kemudian install Flask menggunakan pip:

# Install Flask

pip install flask

# Verifikasi instalasi

python -c "import flask; print(flask.__version__)"

Step 2. Struktur Flask

Buat folder project dengan struktur berikut:

File: database.py

File ini mengelola koneksi ke SQLite dan inisialisasi tabel produk. Tabel produk memiliki kolom: id, nama, harga, stok.

# database.py

import sqlite3

DB_NAME = 'toko.db'

def get_connection():

    conn = sqlite3.connect(DB_NAME)

    conn.row_factory = sqlite3.Row  # akses hasil query seperti dict

    return conn

def init_db():

    conn = get_connection()

    cursor = conn.cursor()

    cursor.execute('''

        CREATE TABLE IF NOT EXISTS produk (

            id     INTEGER PRIMARY KEY AUTOINCREMENT,

            nama   TEXT NOT NULL,

            harga  REAL NOT NULL,

            stok   INTEGER NOT NULL

        )

    ''')

    conn.commit()

    conn.close()

    print('Database berhasil diinisialisasi.')

File: app.py

File utama aplikasi Flask. Berisi semua route untuk operasi CRUD. Berikut konfigurasinya:

Import dan Konfigurasi

# app.py

from flask import Flask, render_template, request, redirect, url_for, flash

from database import get_connection, init_db

app = Flask(__name__)

app.secret_key = 'kunci_rahasia_123'  # diperlukan untuk flash message

Create: Tambah Barang Baru

# CREATE: Tambah data baru

@app.route('/tambah', methods=['GET', 'POST'])

def tambah():

    if request.method == 'POST':

        nama  = request.form['nama']

        harga = float(request.form['harga'])

        stok  = int(request.form['stok'])

        conn = get_connection()

        try:

            conn.execute(

                'INSERT INTO produk (nama, harga, stok) VALUES (?, ?, ?)',

                (nama, harga, stok)

            )

            conn.commit()

            flash('Produk berhasil ditambahkan!', 'success')

        except Exception as e:

            flash(f'Gagal: {e}', 'error')

        finally:

            conn.close()

        return redirect(url_for('index'))

    return render_template('tambah.html')

Read: Menampilkan Semua Barang

# READ: Menampilkan semua data

@app.route('/')

def index():

    conn = get_connection()

    produk = conn.execute('SELECT * FROM produk').fetchall()

    conn.close()

    return render_template('index.html', produk=produk)

Update: Edit Data Barang

# UPDATE: Edit data
@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def edit(id):
    conn = get_connection()
    if request.method == 'POST':
        nama  = request.form['nama']
        harga = float(request.form['harga'])
        stok  = int(request.form['stok'])
        conn.execute(
            'UPDATE produk SET nama=?, harga=?, stok=? WHERE id=?',
            (nama, harga, stok, id)
        )
        conn.commit()
        conn.close()
        flash('Data berhasil diperbarui!', 'success')
        return redirect(url_for('index'))
    produk = conn.execute('SELECT * FROM produk WHERE id=?', (id,)).fetchone()
    conn.close()
    return render_template('edit.html', produk=produk)

Delete: Hapus Barang

# DELETE: Hapus data

@app.route('/hapus/<int:id>')

def hapus(id):

    conn = get_connection()

    conn.execute('DELETE FROM produk WHERE id=?', (id,))

    conn.commit()

    conn.close()

    flash('Produk berhasil dihapus.', 'info')

    return redirect(url_for('index'))

Entry Point

if __name__ == '__main__':

    init_db()

    app.run(debug=True)

Template HTML

Layout Utama

Semua halaman akan menggunakan template ini, yang terdiri dari navigasi, styling dasar, dan blok konten.

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <title>Aplikasi Toko</title>

    <style>

        body { font-family: Arial; margin: 20px; }

        table { width: 100%; border-collapse: collapse; }

        th, td { border: 1px solid #ccc; padding: 8px; }

        th { background-color: #2E75B6; color: white; }

        .success { color: green; }

        .error   { color: red; }

        .info    { color: steelblue; }

    </style>

</head>

<body>

    <h1>Sistem Manajemen Barang</h1>

    <nav>

        <a href="/">Daftar Barang</a> |

        <a href="/tambah">Tambah Barang</a>

    </nav>

    <hr>

    {% block content %}{% endblock %}

</body>

</html>

7.2 Daftar Barang

Menampilkan semua barang dalam tabel, lengkap dengan flash message dan tombol Edit/Hapus.

{# templates/index.html #}

{% extends 'base.html' %}

{% block content %}

<h2>Daftar Barang</h2>

{% with messages = get_flashed_messages(with_categories=true) %}

  {% if messages %}

    {% for category, message in messages %}

      <div class="{{ category }}"><b>{{ message }}</b></div>

    {% endfor %}

  {% endif %}

{% endwith %}

<table>

  <thead>

    <tr>

      <th>No</th>

      <th>Nama Barang</th>

      <th>Harga (Rp)</th>

      <th>Stok</th>

      <th>Aksi</th>

    </tr>

  </thead>

  <tbody>

    {% for item in produk %}

    <tr>

      <td>{{ loop.index }}</td>

      <td>{{ item['nama'] }}</td>

      <td>{{ "{:,.0f}".format(item['harga']) }}</td>

      <td>{{ item['stok'] }}</td>

      <td>

        <a href="/edit/{{ item['id'] }}">Edit</a> |

        <a href="/hapus/{{ item['id'] }}"

           onclick="return confirm('Yakin hapus barang ini?')">Hapus</a>

      </td>

    </tr>

    {% else %}

    <tr><td colspan="5">Belum ada data barang.</td></tr>

    {% endfor %}

  </tbody>

</table>

{% endblock %}

Form Tambah Barang

{# templates/tambah.html #}

{% extends 'base.html' %}

{% block content %}

<h2>Tambah Barang</h2>

<form method="POST" action="/tambah">

  <label>Nama Barang:</label><br>

  <input type="text" name="nama" required><br><br>

  <label>Harga (Rp):</label><br>

  <input type="number" name="harga" step="0.01" min="0" required><br><br>

  <label>Stok:</label><br>

  <input type="number" name="stok" min="0" required><br><br>

  <button type="submit">Simpan</button>

  <a href="/">Batal</a>

</form>

{% endblock %}

Form Edit Barang

{# templates/edit.html #}

{% extends 'base.html' %}

{% block content %}

<h2>Edit Barang</h2>

<form method="POST" action="/edit/{{ produk['id'] }}">

  <label>Nama Barang:</label><br>

  <input type="text" name="nama"

         value="{{ produk['nama'] }}" required><br><br>

  <label>Harga (Rp):</label><br>

  <input type="number" name="harga" step="0.01" min="0"

         value="{{ produk['harga'] }}" required><br><br>

  <label>Stok:</label><br>

  <input type="number" name="stok" min="0"

         value="{{ produk['stok'] }}" required><br><br>

  <button type="submit">Perbarui</button>

  <a href="/">Batal</a>

</form>

{% endblock %}

Cara Menjalankan Aplikasi

Berikut cara menjalankan aplikasi Flask yang telah kita buat:

# Masuk ke folder project

cd path/ke/folder/project

# Jalankan aplikasi

python app.py

# Output yang muncul:

# Database berhasil diinisialisasi.

# * Serving Flask app 'app'

# * Debug mode: on

# * Running on http://127.0.0.1:5000

Buka browser dan akses URL berikut:

http://127.0.0.1:5000

Pada halaman utama, aplikasi yang tampil adalah informasi daftar barang. Anda bisa klik menu yang tersedia untuk mengarah ke sistem manajemen barang.

Tambah Barang

Untuk menambahkan barang, Anda bisa mengakses url berikut:

http://127.0.0.1:5000/tambah

Form Edit Barang

Untuk melakukan editing data barang, Anda bisa mengakses url berikut:

http://127.0.0.1:5000/edit/1

Pada link tersebut, /1 artinya data barang dengan id 1.

Hapus Barang

Untuk melakukan editing data barang, Anda bisa mengakses url berikut:

http://127.0.0.1:5000/hapus/1

Pada link tersebut, /1 artinya data barang dengan id 1.

Source Code

Sebagai rangkuman dari materi belajar Python part 14, berikut adalah keseluruhan kode aplikasi CRUD berbasis flask yang sudah kita bangun. Lihat source code.

Penutup

Pada seri Belajar Python Part 14 ini, kita telah berhasil mengubah aplikasi CRUD berbasis CLI menjadi aplikasi web sederhana yang berjalan di localhost menggunakan Flask. Kita mempelajari konsep dasar cara kerja aplikasi web, membuat koneksi ke database SQLite, membangun fitur CRUD melalui route Flask, hingga menampilkan data menggunakan template HTML yang lebih interaktif dan mudah digunakan.

Dengan dasar yang telah dibangun, kini kita sudah memiliki pemahaman dasar tentang pengembangan web menggunakan Python. Pada seri belajar python part 15 nanti, kita akan melangkah lebih jauh untuk membahas cara mempercantik tampilan aplikasi web Flask Menggunakan Bootstrap. Semoga bermanfaat!

Belajar Python Part 14: Membuat Aplikasi Python di Localhost

Apa itu Flask?

Cara Kerja Aplikasi Web

Membuat Aplikasi Python di Localhost

Step 1. Instalasi Flask

Step 2. Struktur Flask

File: database.py

File: app.py

Import dan Konfigurasi

Create: Tambah Barang Baru

Read: Menampilkan Semua Barang

Update: Edit Data Barang

Delete: Hapus Barang

Entry Point

Template HTML

Layout Utama

Form Tambah Barang

Form Edit Barang

Cara Menjalankan Aplikasi

Tambah Barang

Form Edit Barang

Hapus Barang

Source Code

Penutup

Amiratur Rafifah

Artikel Terbaru

Hubungi Kami

Rekomendasi Layanan

Tutorial

Informasi