Pertemuan Ke-XV

BEKERJA BEBASIS WEB

Pemrograman Python berbasis web menggunakan framework Flask adalah salah satu cara yang
populer untuk mengembangkan aplikasi web. Flask adalah framework web ringan dan sederhana yang
dibuat dengan bahasa pemrograman Python. Dengan Flask, kita dapat dengan mudah membuat aplikasi
web yang efisien dan mudah diimplementasikan. Flask menyediakan berbagai fitur dan alat yang
memungkinkan kita untuk mengatur rute URL, mengelola permintaan HTTP, dan merender tampilan
HTML. Dengan menggunakan Flask, kita dapat mengembangkan aplikasi web dari yang sederhana hingga
yang kompleks dengan cepat dan efisien.
Salah satu keunggulan Flask adalah kemudahannya dalam pemahaman dan penggunaannya.
Framework ini memiliki basis kode yang sederhana dan jelas, sehingga memudahkan pengembang untuk
memahami dan mengelola aplikasi web. Flask juga memberikan kebebasan kepada pengembang untuk
memilih komponen yang ingin mereka gunakan, sehingga memungkinkan pengembangan yang lebih
fleksibel dan sesuai dengan kebutuhan proyek. Dalam pemrograman web menggunakan Flask, kita dapat
menggunakan Python untuk mengatur logika aplikasi, mengelola basis data, melakukan validasi data, dan
masih banyak lagi. Kita juga dapat menggunakan templating untuk membuat tampilan HTML yang dinamis
dan menarik.
Dalam tutorial ini, kita akan menjelajahi langkah-langkah dasar dalam mengembangkan aplikasi
web dengan Flask. Kami akan membahas pengaturan proyek, penggunaan rute URL, pengelolaan
permintaan HTTP, penggunaan templating, dan interaksi dengan basis data. Dengan pemahaman ini, kita
akan memiliki pondasi yang kuat untuk memulai pengembangan aplikasi web yang mengesankan dengan
menggunakan Flask.
1. Mengenal Web
Web, singkatan dari "World Wide Web," adalah sebuah sistem informasi global yang terdiri dari
berbagai halaman web yang saling terhubung melalui tautan (link) dan dapat diakses melalui internet.
Web memungkinkan pengguna untuk mengakses dan berbagi informasi, konten multimedia, aplikasi, dan
layanan online. Halaman web adalah unit dasar dalam web, yang terdiri dari teks, gambar, video, audio,
dan elemen interaktif lainnya. Setiap halaman web memiliki alamat unik yang disebut URL (Uniform
Resource Locator), yang digunakan untuk mengidentifikasi dan mengakses halaman tersebut.
Web didasarkan pada teknologi dan protokol standar, termasuk HyperText Transfer Protocol
(HTTP) yang digunakan untuk mengirim dan menerima data melalui internet, dan HyperText Markup
Language (HTML) yang digunakan untuk membuat struktur dan konten halaman web. Melalui web,
pengguna dapat menjelajahi halaman web dengan menggunakan perangkat lunak klien yang disebut web
browser, seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge. Browser membaca kode HTML
pada halaman web dan merendernya menjadi tampilan yang dapat dilihat dan diinteraksi oleh pengguna.
Web telah menjadi sarana utama bagi berbagai kegiatan online, seperti pencarian informasi, komunikasi,
e-commerce, media sosial, hiburan, pendidikan, dan banyak lagi. Dengan adanya web, pengguna dapat
mengakses informasi dan berinteraksi dengan orang-orang di seluruh dunia secara cepat dan mudah.

Pemrograman Komputer – Python Hal. 1 Dr. Eko Darmanto, S.Kom., M.Cs

2. Mengenal HTML
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan
mengatur struktur konten pada halaman web. HTML terdiri dari serangkaian elemen atau "tag" yang
memberikan instruksi kepada browser tentang bagaimana konten web harus ditampilkan. HTML
menggunakan markup tags untuk mengelompokkan dan memberi makna pada elemen-elemen konten
seperti teks, gambar, tautan, tabel, formulir, dan lain-lain. Setiap tag memiliki sintaksis yang ditulis dalam
tanda kurung sudut (`<>`). Contohnya, tag `<p>` digunakan untuk menandai paragraf, tag `<img>` untuk
menampilkan gambar, dan tag `<a>` untuk membuat tautan.
Selain elemen-elemen konten, HTML juga mendukung atribut yang memberikan informasi
tambahan atau pengaturan khusus pada elemen. Misalnya, atribut `href` pada tag `<a>` digunakan untuk
menentukan URL tautan, dan atribut `src` pada tag `<img>` digunakan untuk menentukan sumber gambar.
Dengan HTML, kita dapat membangun struktur dasar halaman web, menampilkan konten, dan membuat
tautan antara halaman. HTML bekerja sama dengan CSS (Cascading Style Sheets) untuk mengatur
tampilan dan dengan JavaScript untuk menambahkan interaktivitas pada halaman web. HTML merupakan
standar yang digunakan secara luas dalam pengembangan web dan dipahami oleh semua browser
modern. Dengan menggunakan HTML, kita dapat membuat halaman web yang kaya konten, terstruktur,
dan dapat diakses oleh pengguna di berbagai perangkat dan platform.
Berikut adalah contoh kode Python untuk membuat HTML dasar menggunakan Flask:
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
return '''
<html>
<head>
<title>Contoh HTML Dasar</title>
</head>
<body>
<h1>Selamat datang di aplikasi web Flask!</h1>
<p>Ini adalah contoh HTML dasar yang dihasilkan menggunakan Flask.</p>
</body>
</html>
'''
if __name__ == '__main__':
app.run()
```

Dalam contoh ini, kita menggunakan Flask untuk membuat aplikasi web. Ketika pengguna
mengakses halaman utama (route `'/'`), fungsi `home()` akan dijalankan dan mengembalikan kode HTML
dasar yang akan ditampilkan di browser. Kode HTML yang dikembalikan berada dalam tanda petik tiga (`'''
... '''`) untuk memungkinkan multiline string. Kita dapat menambahkan elemen HTML seperti `<h1>`, `<p>`,
atau elemen lainnya sesuai kebutuhan.
Untuk menjalankan aplikasi ini, kita dapat menyimpannya dalam file Python dengan ekstensi `.py`
(misalnya `app.py`) dan menjalankannya dengan perintah `python app.py` di terminal. Kemudian, kita
dapat mengakses aplikasi web Flask melalui alamat `http://localhost:5000` di browser untuk melihat
HTML dasar yang dihasilkan.

Pemrograman Komputer – Python Hal. 2 Dr. Eko Darmanto, S.Kom., M.Cs

3. Instalasi FLASK
Berikut adalah langkah-langkah instalasi Flask menggunakan PyCharm Community Edition:
1. Pastikan telah menginstal Python di komputer. Jika belum, dapat mengunduh dan menginstal
Python dari situs resmi python.org.
2. Buka PyCharm Community Edition dan buka proyek Python yang ingin digunakan untuk
mengembangkan aplikasi Flask.
3. Klik kanan pada nama proyek di panel Project, lalu pilih "Open Terminal" atau "Open in Terminal"
untuk membuka terminal di dalam PyCharm.
4. Di terminal, masukkan perintah berikut untuk menginstal Flask menggunakan pip:

5. Tunggu beberapa saat hingga proses instalasi selesai. Pip akan mengunduh dan menginstal Flask
beserta dependensinya.
6. Setelah instalasi selesai, kita dapat memulai pengembangan aplikasi Flask di PyCharm. Buatlah file
Python baru dan import modul Flask:

7. Kita dapat membuat aplikasi Flask dengan menambahkan kode berikut:

8. Simpan file tersebut dan jalankan aplikasi Flask dengan mengklik tombol "Run" atau dengan
menggunakan shortcut keyboard (biasanya Shift + F10).
9. PyCharm akan menampilkan URL tempat aplikasi Flask dijalankan (misalnya
http://127.0.0.1:5000/). Buka URL tersebut di browser untuk melihat hasil aplikasi Flask.
Langkah-langkah di atas, adalah cara menginstal Flask dan mulai mengembangkan aplikasi web
menggunakan PyCharm Community Edition. Pastikan telah mengaktifkan lingkungan virtual (virtual
environment) jika diperlukan untuk isolasi proyek.
4. Membuat program berbasis WEB
Berikut adalah contoh program yang menggunakan Flask untuk menampilkan data yaitu ke dalam
browser dari file yang diambil dari materi terdahulu yaitu tabel buatan sendiri:
from flask import Flask, render_template
app = Flask(__name__)

def baca_data(file_path):
data = []
with open(file_path, 'r') as file:
lines = file.readlines()
for line in lines:

Pemrograman Komputer – Python Hal. 3 Dr. Eko Darmanto, S.Kom., M.Cs

 # Menghapus karakter newline (\n) di akhir baris
line = line.strip()
# Membagi baris menjadi kolom-kolom berdasarkan tanda koma (,)
row = line.split(',')
data.append(row)
return data

@app.route('/')
def tampilkan_data():
file_path = "F:\Python Programming\Belajar Python\Operasi File\MyData.txt"
data = baca_data(file_path)
return render_template('data.html', data=data)

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

Pada contoh di atas, kita menggunakan Flask untuk membuat aplikasi web sederhana. Fungsi
‘baca_data()’ digunakan untuk membaca data dari file seperti yang telah tersimpan sebelumnya.
Selanjutnya, kita mendefinisikan ‘route /’ pada decorator ‘@app.route('/')’. Ketika pengguna mengakses
URL utama, fungsi ‘tampilkan_data()’ akan dipanggil. Di dalam fungsi ini, kita membaca data dari file
menggunakan ‘baca_data()’ dan mengirimkannya ke template HTML.
Untuk menampilkan data pada browser, kita menggunakan template HTML dengan nama
‘data.html’. Template ini akan menerima data yang dikirimkan dari fungsi ‘tampilkan_data()’ dan
melakukan iterasi untuk menampilkan setiap baris data. Berikut adalah contoh template HTML
‘data.html’:
<!DOCTYPE html>
<html>
<head>
<title>Data</title>
</head>
<body>
<h1>Data</h1>
<table>
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Tanggal Lahir</th>
<th>Berat Badan</th>
</tr>
{% for row in data %}
<tr>
<td>{{ row[0] }}</td>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
<td>{{ row[3] }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>

Pada template ini, kita menggunakan tag ‘table’ untuk menampilkan data dalam bentuk tabel.
Dalam iterasi ‘for’, kita mengambil setiap baris data dan menampilkannya dalam baris tabel menggunakan
tag ‘tr’ dan tag ‘td’. Setelah itu, akses URL http://localhost:5000 pada browser untuk melihat tampilan
data dari file.

Pemrograman Komputer – Python Hal. 4 Dr. Eko Darmanto, S.Kom., M.Cs