Pengenalan Flask: Membuat Aplikasi Web Sederhana

1. Modul 1.1: Pengenalan Flask: Membuat Aplikasi Web Sederhana

1. 1. Tujuan Pembelajaran

Setelah menyelesaikan modul ini, Anda diharapkan mampu:

- Memahami konsep dasar Flask dan cara membuat aplikasi web sederhana. - Membuat halaman "Hello, World!" menggunakan Flask. - Menjalankan aplikasi Flask pada Ubuntu 24.04 tanpa menggunakan alat dari Microsoft.

1. 1. Pengenalan Flask

Flask adalah micro-framework web yang ditulis dalam bahasa Python. Disebut "micro" karena Flask menjaga intinya tetap sederhana namun dapat diperluas dengan berbagai ekstensi sesuai kebutuhan. Framework ini memungkinkan pengembang untuk membuat aplikasi web dengan cepat dan efisien.

1. 1. Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda memiliki:

- **Ubuntu 24.04** terinstal pada sistem Anda. - **Python 3** terinstal. Untuk memeriksa versi Python, jalankan perintah:

 ```bash
 python3 --version
 ```

 Jika Python belum terinstal, Anda dapat menginstalnya dengan:

 ```bash
 sudo apt update
 sudo apt install python3
 ```

- **pip** (Python package manager) terinstal. Periksa dengan:

 ```bash
 pip3 --version
 ```

 Jika pip belum terinstal, instal dengan:

 ```bash
 sudo apt install python3-pip
 ```

1. 1. Membuat Virtual Environment

Sebaiknya kita menggunakan virtual environment untuk mengisolasi dependensi proyek. Buat dan aktifkan virtual environment dengan perintah berikut:

```bash

1. Instal modul venv jika belum ada

sudo apt install python3-venv

1. Buat virtual environment bernama 'venv'

python3 -m venv venv

1. Aktifkan virtual environment

source venv/bin/activate ```

Setelah aktivasi, prompt terminal Anda akan menunjukkan bahwa virtual environment sedang aktif.

1. 1. Instalasi Flask

Dengan virtual environment aktif, instal Flask menggunakan pip:

```bash pip install flask ```

1. 1. Membuat Aplikasi "Hello, World!"

1. **Membuat Struktur Proyek**

  Buat direktori untuk proyek Anda dan navigasikan ke dalamnya:

  ```bash
  mkdir hello_flask
  cd hello_flask
  ```

2. **Membuat Aplikasi Flask**

  Buat file bernama `app.py` dan tambahkan kode berikut:

  ```python
  from flask import Flask

  app = Flask(__name__)

  @app.route('/')
  def hello():
      return 'Hello, World!'

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

  Penjelasan kode:

  - `from flask import Flask`: Mengimpor kelas Flask dari modul flask.
  - `app = Flask(__name__)`: Membuat instance aplikasi Flask.
  - `@app.route('/')`: Dekorator yang menentukan URL root ('/') untuk memanggil fungsi `hello`.
  - `def hello():`: Fungsi yang mengembalikan string 'Hello, World!'.
  - `if __name__ == '__main__':`: Memastikan server hanya berjalan saat skrip dijalankan secara langsung.
  - `app.run(debug=True)`: Menjalankan server dalam mode debug untuk pengembangan.

3. **Menjalankan Aplikasi**

  Pastikan virtual environment aktif, lalu jalankan aplikasi dengan:

  ```bash
  python app.py
  ```

  Output yang diharapkan:

  ```
  * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
  * Restarting with stat
  * Debugger is active!
  * Debugger PIN: 123-456-789
  ```

4. **Mengakses Aplikasi**

  Buka browser web dan navigasikan ke `http://127.0.0.1:5000/`. Anda akan melihat pesan "Hello, World!" ditampilkan.

1. 1. Penanganan Rute Tambahan

Flask memungkinkan penanganan berbagai rute. Misalnya, tambahkan rute baru untuk menyapa pengguna berdasarkan nama:

```python @app.route('/user/<name>') def greet_user(name):

   return f'Hello, {name.capitalize()}!'

```

Dengan penambahan ini, mengakses `http://127.0.0.1:5000/user/andi` akan menampilkan "Hello, Andi!".

1. 1. Menjalankan Aplikasi pada Port Berbeda

Secara default, Flask berjalan pada port 5000. Untuk menjalankan pada port lain, misalnya 8080, ubah pemanggilan `app.run()` menjadi:

```python app.run(debug=True, port=8080) ```

Atau jalankan aplikasi dengan perintah:

```bash python app.py --port=8080 ```

1. 1. Menggunakan Template HTML

Untuk memisahkan logika Python dan tampilan, Flask menggunakan template. Buat folder `templates` dan tambahkan file `index.html`:

• • Struktur Direktori:**

``` hello_flask/ ├── app.py └── templates/

   └── index.html

```

• • Isi `index.html`:**

```html <!doctype html> <html lang="id"> <head>

   <meta charset="utf-8">
   <title>Halo Flask</title>

</head> <body>

Template:Message

</body> </html> ```

Ubah `app.py` untuk merender template ini:

```python from flask import Flask, render_template

app = Flask(__name__)

@app.route('/') def hello():

   return render_template('index.html', message='Hello, World!')

if __name__ == '__main__':

   app.run(debug=True)

```

Sekarang, saat mengakses `http://127.0.0.1:5000/`, template HTML akan dirender dengan pesan yang diberikan.

1. 1. Referensi

Untuk pembelajaran lebih lanjut, Anda dapat merujuk pada [Tutorial Flask oleh Miguel Grinberg](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world).

1. 1. Latihan

1. Tambahkan rute baru `/about` yang menampilkan informasi singkat tentang aplikasi. 2. Buat halaman HTML terpisah untuk rute `/about` menggunakan template. 3. Eksplorasi dokumentasi Flask untuk memahami fitur-fitur lainnya.

Dengan menyelesaikan modul ini, Anda telah mempelajari dasar-dasar Flask dan cara membuat aplikasi web sederhana.

  - **1.1. Pengenalan Flask: Membuat Aplikasi Web Sederhana**
    - Memahami konsep dasar Flask dan cara membuat aplikasi web sederhana.
    - Contoh: Membuat halaman "Hello, World!" menggunakan Flask.
    - Referensi: [Tutorial Flask oleh Miguel Grinberg](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world)