7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Python

Pengenalan Framework Flask pada Python

Scroll to top
Read Time: 10 mins

Indonesian (Bahasa Indonesia) translation by Aditia Dwiperdana (you can also view the original English article)

Flask adalah framework web pada Python yang kecil namun tangguh. Flask mudah dipelajari dan digunakan, membuat kamunb isa membangun aplikasi web dalam waktu yang singkat.

Pada artikel ini, saya akan tunjukkan bagaimana membuat website sederhana, yang memiliki dua halaman statik dengan sedikit konten dinamis. Walau Flask bisa digunakan untuk membuat website rumit yang berbasis database, memulai dengan membuat halaman statik berguna untuk memperkenalkan alur kerja, yang nantinya digunakan untuk membuat halaman lain yang lebih rumit. Setelah menyelesaikan tutorial ini, kamu akan bisa melakukan langkah-langkah yang sama untuk mempercepat proses pengembangan aplikasi Flask-mu yang berikutnya.


Menginstall Flask

Sebelum kita mulai, kita perlu install Flask. Karena sistem bervariasi, suatu hal bisa tiba-tiba tidak bekerja saat menjalankan langkah-langkah tersebut. Jika iya, seperti yang biasa kita lakukan, tulis isi pesan error ke Google atau tulis komentar dan jelaskan masalahnya apa.

Menginstall Virtualenv

Virtualenv adalah alat yang berguna yang akan membuat lingkungan pengembangan Python yang terisolasi di mana kamu bisa mengerjakan semua pengembangan yang diperlukan.

Kita akan menggunakan virtualenv untuk menginstall Flask. Virtualenv adalah alat yang berguna yang akan membuat lingkungan pengembangan Python yang terisolasi di mana kamu bisa melakukan semua pengembangan yang diperlukan. Misalkan kamu menemukan library Python baru yang ingin kamu coba. Jika kamu install pada sistem keseluruhan, ada resiko mengganggu library lain yang sudah pernah kamu install. Jadi kita gunakan virtualenv untuk membuat sandbox, di mana kamu bisa menginstall dan menggunakan library tersebut tanpa mempengaruhi sisa dari sistem yang kamu miliki. Kamu bisa tetap menggunakan sandbox ini untuk pekerjaan selanjutnya, atau kamu bisa menghapusnya begitu kamu selesai menggunakannya. Yang manapun yang kamu pilih, sistem kamu akan tetap rapi dan bersih dari kotoran.

Kemungkinan sudah ada virtualenv pada sistem yang kamu miliki. Buka command line, dan coba perintah berikut:

Jika kamu melihat nomor versi, kamu sudah siap dan bisa melewati bagian "menginstall Flask". Jika perintah tidak digunakan, gunakan easy_install atau pip untuk menginstall virtualenv. Jika kamu menjalankan Linux atau Mac OS X, salah satu perintah berikut seharusnya bisa digunakan:

atau:

atau:

Jika kamu tidak memiliki perintah-perintah tersebut pada sistem, ada beberapa tutorial onlne yang akan menunjukkan bagaimana menginstall virtualenv di sistem kamu. Jika kamu menggunakan Windows, ikuti "Panduan Instalasi" pada halaman ini untuk menginstall easy_install di komputer kamu.

Menginstall Flask

Setelah menginstall virtualenv, kamu bisa membuat lingkungan pengembangan yang terisolir dengan perintah berikut:

Di sini,  virtualenv membuat folder, flaskapp/, dan mengatur salinan bersih dari Python di dalamnya untuk kamu gunakan. Virtualenv juga menginstall package manager pip.

Masuk ke lingkungan pengembangan baru yang baru dibuat dan aktifkan agar bisa kamu gunakan untuk bekerja.

Sekarang kamu bisa menginstall Flask dengan aman:


Mengatur Struktur Proyek

Kita buat beberapa folder dan file di dalam flaskapp/ untuk membuat aplikasi web kita tetap rapi.

Di dalam flaskapp/, buat sebuah folder app/ untuk menyimpan semua file-mu. Di dalam app/, buat folder static/, di sinilah kita akan simpan gambar, CSS, dan file JavaScript aplikasi web kita. Jadi buat folder untuk masing-masing jenis tersebut, seperti yang dicontohkan di atas. Begitu pula, buat folder lain bernama templates/ untuk menyimpan template untuk aplikasi web ini. Buat file Python kosong bernama routes.py untuk logika aplikasi, seperti routing URL.

Dan tidak ada proyek yang lengkap tanpa deskripsi yang baik, jadi buatlah file README.md.

Sekarang kita tahu di mana menyimpan aset untuk proyek kita, tapi bagaimana menghubungkan semuanya? Mari kita lihat Gambar 1 di bawah untuk melihat gambaran besarnya.

Gambar 1

  1. Seorang user mengirim request ke URL akar / pada domain untuk masuk ke halaman utama
  2. routes.py memetakan URL / ke sebuah fungsi Python
  3. Fungsi Python tersebut menemukan template web yang berada di folder templates/.
  4. Template web melihat ke folder static/ untuk gambar, CSS, atau file JavaScript yang dibutuhkan untuk merender HTML.
  5. HTML yang dirender dikirim balik ke routes.py.
  6. routes.py mengirim HTML kembali ke browser.

Kita mulai dengan request yang dikirim dari browser web. Seorang user mengetik URL ke kotak alamat pada browser. Request mengenai routes.py, yang memilki kode yang memetakan URL ke sebuah fungsi. Fungsi tersebut menemukan template di folder templates/, merender ke HTML, dan mengirimnya kembali ke browser. Fungsi tersebut bisa juga mengambil record dari database dan melempar informasi tersebut ke template web, tapi karena kita berurusan dengan halaman statik di artikel ini, kita lewatkan interaksi dengan database untuk saat ini.

Sekarang kita sudah memahami struktur proyek yang kita atur, sekarang kita mulai dengan membuat halaman utama aplikasi web kita.


Membuat Halaman Utama

Saat kamu membuat aplikasi web dengan beberapa halaman, akan menjadi menyulitkan untuk menulik halaman HTML yang sama terus menerus untuk setiap halaman. Lebih jauh lagi, bagaimana jika kamu perlu menambah elemen baru untuk aplikasi kamu seperti file CSS baru? Kamu harus membuka semua halaman dan menambahkannya. Hal ini makan waktu dan rentan membuat kesalahan. Akankah lebih baik jika daripada menulis kode yang HTML yang sama terus menerus, kamu bisa mendefinisikan rancangan halaman sekali saja, dan menggunakan rancangan tersebut untuk membuat halaman baru dengan kontennya sendiri? Ini adalah apa yang dilakukan oleh template web!

Template web hanyalah file teks yang berisi variabel dan pernyataan flow control (if..else, for, dan lain-lain), dan berakhir dengan ekstensi .html atau .xml.

Varibel-variabel tersebut digantikan dengan kontenmu, saat template web dievaluasi. Template web menghilangkan pengulangan, memisahkan konten dari desain, dan membuat aplikasimu lebih mudah dipelihara. Dengan kata lain, template web itu keren dan kamu perlu menggunakannya! Flask menggunakan template engine Jinja2; kita lihat bagaimana cara menggunakannya.

Sebagai langkah pertama, kita mendefinisikan rancangan halaman dalam kerangka dokumen HTML layout.html dan menyimpannya di dalam folderr templates/.

app/templates/layout.html

Ini adalah HTML file biasa, tapi apa maksud bagian {% block content %}{% endblock %}? Untuk menjawab ini, kita buat file lain ibernama home.html.

app/templates/home.html

File layout.html mendefinisikan blok kosong bernama content, di mana template anak bisa mengisinya. File home.html adalah template anak yang meneruskan markup dari layout.html dan mengisi blok "content" dengan teksnya sendiri. Dengan kata lain, layout.html mendefinisikan semua elemen umum dari situsmu, sedangkan setiap template anak menyesuaikannya dengan kontennya masing-masing.

Semua ini terdengar keren, tapi bagaimana kita bisa melihat halaman ini? Kamu bisa menulis URL di browser dan 'mengunjungi' home.html? Kita kembali ke Gambar 1. Kita baru saja membuat template home.html dan menempatkannya pada folder templates/. Sekarang kita perlu memetakan sebuah URL untuknya agar kita bisa melihatnya pada browser. Buka routes.py dan lakukan hal berikut:

app/routes.py

Sekian untuk routes.py. Apa yang kita lakukan?

  1. Pertama. Kita mengimpor kelas Flask dan fungsi render_template.
  2. Berikutnya kita membuat instance baru dari kelas Flask.
  3. Lalu memetakan URL / ke fungsi home(). Sekarang, jika seseorang mengunjungi URL ini, fungsi home() akan dijalankan.
  4. Fungsi home() menggunakan fungsi Flask render_template() untuk merender ke template home.html yang baru kita buat dari folder templates/ ke browser.
  5. Akhirnya, kita gunakan run() untuk menjalankan aplikasi kita pada server lokal. Kita atur flag debug menjadi true, agar kita bisa melihat pesan error yang terkait jika terjadi kesalahan, dan agar server lokal secara otomatis mengulang setelah kita membuat perubahan ke server.

Akhirnya kita siap melihat hasil dari kerja keras kita. Kembali ke command line dan ketik:

Buka http://localhost:5000/ pada web browser favoritmu.

Saat kita mengunjungi http://localhost:5000/, routes.py memiliki kode di dalamnya, yang memetakank URL / ke fungsi Python home(). home() menemukan template home.html dalam folder templates/, merendernya ke HTML, dan mengirimnya kembali ke browser, memberikan halaman di atas.

Cukup mudah, tapi halaman utama ini membosankan bukan? Kita buat tampilannya lebih baik dengan menambahkan CSS. Buat file main.css di dalam statis/css/, dan tambahkan beberapa aturan berikut:

static/css/main.css

Tambahkan  stylesheet ini ke file kerangka layout.html agar gaya yang dibuat diterapkan ke semua template anak dengan menambahkan baris ini ke elemen <head>.

Kita menggunakan fungsi Flask url_for untuk membuat URL ke main.css dalam folder static. Setelah menambahkan baris ini, layout.html seharusnya terlihat seperti ini:

app/templates/layout.html

Mari kembali ke browser dan me-refresh halaman untuk melihat dampak dari CSS.

Ini lebih bagus! Sekarang, saat kita mengunjugi http://localhost:5000/, routes.py masih memetakan URL / ke fungsi home(), dan home() masih menemukan template web home.html di folder templates/. Tapi karena kita menambahkan file CSS bernama main.css, template web home.html mencari di folder static/ untuk menemukan aset ini, sebelum akhirnya merender HTML dan mengirimnya ke browser.

Kita sudah mencapai cukup banyak sejauh ini. Kita mulai dengan Gambar 1 dengan memahami bagaimana Flask bekerja, sekarang kita sudah melihat bagaimana hasilnya, dengan membuat halaman utama untuk aplikasi web kita. Mari lanjutkan dan buat halaman About.


Membuat Halaman About

Di bagian sebelumnya, kita membuat template web home.html dengan mengembangkan file kerangka layout.html. Lalu kita petakan URL / ke home.html pada routes.py agar kita bisa mengunjunginya di browser. Kitai selesaikan dengan menambahkan gaya untuk membuatnya lebih cantik. Kita ulangi proses tersebut untuk membuat sebuah halaman untuk aplikasi web kita.

Kita mulai dengan membuat template web, about.html, dan menempatkannya di dalam folder templates/.

app/templates/about.html

Seperti sebelumnya dengan home.html, kita kembangkan layout.html lalu kita isi blok content dengan konten khusus kita.

Untuk bisa mengunjungi halaman ini di browser, kita perlu memetakan URL yang sesuai. Buka routes.py dan tambahkan maaping baru:

Kita petakan URL /about ke fungsi about(). Sekarang kita bisa buka browser dan buka http://localhost:5000/about dan melihat halaman yang baru kita buat.


Menambahkan Navigasi

Sebagian besar website memiliki tautan ke halaman utama di dalam header atau footer dokumen. Tautan-tautan ini biasanya terlihat di semua halaman website. Mari kita buka file kerangka, layout.html. Dan tambahkan beberapa tautan berikut agar muncul di semua template anak. Khususnya, tambahkan elemen <nav> di dalam elemen <header>:

app/templates/layout.html

Sekali lagi, kita menggunakan fungsi url_for untuk membuat URL.

Berikutnya, tambahkan beberapa atruan gaya untuk main.css untuk membuat elemen navigasi ini terlihat bagus:

app/static/css/main.css

Akhirnya, buka browser dan refresh http://localhost:5000/ untuk melihat tautan navigasi kita yang baru.


Kesimpulan

Sepanjang artikel ini, kita membuat aplikasi web sederhana dengan dua halaman statik. Dengan melakukan itu, kita mempelajari workflow yang bisa digunakan untuk membuat website yang lebih rumit dengan konten dinamis. Flask adalah framework yang sederhana namun kuat, yang membuat kamu bisa membuat aplikasi web secara efektif. Ayo cobalah!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.