Tutorial Python Web Server #4: Mengatur Rute (Routing) Banyak Halaman

Membuat Beberapa Halaman dengan Routing di Flask

Assalamualaikum Wr. Wb.

Pada tutorial sebelumnya, kita sudah berhasil menjalankan server Flask sederhana dan menampilkan teks “Hello World” melalui browser.

Sekarang kita akan melanjutkan ke tahap berikutnya, yaitu membuat beberapa halaman berbeda dalam satu aplikasi Flask.

Sebuah website biasanya tidak hanya memiliki satu halaman. Kita mungkin membutuhkan halaman seperti About, Contact, atau halaman lainnya. Di Flask, kita dapat membuat halaman-halaman tersebut menggunakan konsep yang disebut routing.

Untuk latihan kali ini, kita belum perlu membuat banyak folder atau file tambahan. Kita cukup menambahkan beberapa route ke file app.py yang sudah dibuat sebelumnya.

---

Langkah 1: Modifikasi File app.py

Buka kembali file app.py yang berada di folder:

C:\PythonWebServer

Gunakan text editor yang biasa kamu gunakan untuk mengedit kode Python.

Kemudian, ubah isi file tersebut menjadi seperti berikut:

from flask import Flask

app = Flask(__name__)

# Halaman utama
@app.route('/')
def halaman_utama():
    return 'Hello World! Ini Halaman Utama Web Server.'

# Halaman About
@app.route('/about')
def halaman_about():
    return 'Ini adalah halaman About.'

# Halaman Contact
@app.route('/contact')
def halaman_contact():
    return 'Ini adalah halaman Contact.'

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

Pada contoh tersebut, kita memiliki tiga route:

• / untuk halaman utama
• /about untuk halaman About
• /contact untuk halaman Contact

Perhatikan bagian berikut:

@app.route('/about')
def halaman_about():
    return 'Ini adalah halaman About.'

@app.route('/about') memberi tahu Flask bahwa ketika pengguna mengakses alamat /about, Flask harus menjalankan fungsi halaman_about().

Hal yang sama berlaku untuk route /contact.

Setelah selesai mengetik kode, jangan lupa simpan file tersebut dengan menekan Ctrl + S.

---

Langkah 2: Jalankan Server Flask

Buka kembali Command Prompt (CMD) atau terminal yang kamu gunakan sebelumnya.

Pastikan kamu berada di folder project dan virtual environment yang digunakan pada tutorial sebelumnya masih aktif.

Kemudian jalankan perintah berikut:

python app.py

Jika tidak terdapat error, Flask akan menjalankan server lokal yang dapat diakses melalui browser.

Biasanya alamat servernya adalah:

http://127.0.0.1:5000/

---

Langkah 3: Mencoba Setiap Halaman

Sekarang buka browser dan coba akses alamat berikut satu per satu.

1. Halaman Utama

http://127.0.0.1:5000/

Browser akan menampilkan:

Hello World! Ini Halaman Utama Web Server.

2. Halaman About

Kemudian buka:

http://127.0.0.1:5000/about

Hasilnya:

Ini adalah halaman About.

3. Halaman Contact

Terakhir, buka:

http://127.0.0.1:5000/contact

Browser akan menampilkan:

Ini adalah halaman Contact.

Perhatikan bahwa kita masih menggunakan satu file app.py, tetapi aplikasi Flask sudah dapat memberikan respons yang berbeda berdasarkan URL yang diakses.

---

Memahami Cara Kerja Routing Flask

Dari latihan ini, kita dapat melihat pola dasar routing pada Flask.

Misalnya:

@app.route('/about')
def halaman_about():
    return 'Ini adalah halaman About.'

Alurnya secara sederhana adalah:

Browser → URL /about → Flask mencari route → fungsi halaman_about() dijalankan → Flask mengirimkan respons ke browser

Jadi, bagian @app.route() digunakan untuk menentukan alamat atau URL yang akan ditangani oleh sebuah fungsi.

Kita juga dapat membuat route lain sesuai kebutuhan aplikasi.

Contohnya:

@app.route('/produk')
def halaman_produk():
    return 'Ini adalah halaman Produk.'

Dengan kode tersebut, halaman baru dapat diakses melalui:

http://127.0.0.1:5000/produk

---

Bagaimana Jika Muncul Error 404 Not Found?

Jika ketika membuka /about atau /contact muncul pesan 404 Not Found, Flask tidak menemukan route yang sesuai dengan URL tersebut.

Beberapa hal yang dapat diperiksa:

1. Pastikan penulisan URL sudah benar.
2. Pastikan route sudah ditambahkan ke app.py.
3. Pastikan file app.py sudah disimpan.
4. Pastikan server Flask sedang berjalan.
5. Jika server belum membaca perubahan kode, hentikan server lalu jalankan kembali python app.py.

Perhatikan juga bahwa penulisan URL harus sesuai dengan route.

Jika kodenya:

@app.route('/about')

maka URL yang digunakan adalah:

/about

Bukan:

/abouts

atau alamat lainnya.

---

Kesimpulan

Pada tutorial kali ini, kita sudah mempelajari konsep dasar routing pada Flask.

Dengan menggunakan @app.route(), kita dapat membuat beberapa URL yang menjalankan fungsi berbeda dalam satu aplikasi Flask.

Pada latihan sederhana ini kita membuat tiga halaman:

• / → halaman utama
• /about → halaman About
• /contact → halaman Contact

Untuk sementara, setiap halaman masih mengembalikan teks sederhana. Pada tutorial berikutnya, kita akan mulai memisahkan tampilan website dari kode Python dan menggunakan template HTML agar halaman Flask dapat menampilkan struktur website yang lebih lengkap.

Jika mengalami masalah saat mencoba tutorial ini, periksa kembali penulisan route dan URL yang digunakan. Kamu juga dapat menuliskan kendalanya di kolom komentar agar dapat didiskusikan bersama.

Wassalam.

Berbagi :